163 lines
9.0 KiB
JavaScript
163 lines
9.0 KiB
JavaScript
import { jsxs, Fragment, jsx } from "react/jsx-runtime";
|
|
import { I as InputError } from "./input-error-D1JIzedA.js";
|
|
import { A as Alert, b as AlertDescription } from "./alert-C0mcq2Y_.js";
|
|
import { B as Button } from "./button-CdJZJLGw.js";
|
|
import { C as Card, b as CardContent, a as CardHeader, c as CardTitle } from "./card-B-gBwpxd.js";
|
|
import { I as Input } from "./input-BsvJqbcd.js";
|
|
import { L as Label } from "./label-0rIIfpX0.js";
|
|
import { M as Main } from "./main-BKBelQb-.js";
|
|
import { o as onHandleChange } from "./inertia-BtwbgBI3.js";
|
|
import { usePage, useForm, Head } from "@inertiajs/react";
|
|
import { Info, CreditCard, CheckCircle2, XCircle } from "lucide-react";
|
|
import { Editor } from "richtor";
|
|
/* empty css */
|
|
import "./utils-DLCPGU0v.js";
|
|
import "clsx";
|
|
import "tailwind-merge";
|
|
import "class-variance-authority";
|
|
import "react";
|
|
import "@radix-ui/react-slot";
|
|
import "@radix-ui/react-label";
|
|
import "next-themes";
|
|
import "sonner";
|
|
const Index = () => {
|
|
const { props } = usePage();
|
|
const { user, item, amount, currency, payment_instructions, payment_details, errors } = props;
|
|
const { data, setData, post, processing } = useForm({
|
|
payment_info: "",
|
|
payment_date: (/* @__PURE__ */ new Date()).toISOString().split("T")[0],
|
|
attachment: null
|
|
});
|
|
const handleSubmit = (e) => {
|
|
e.preventDefault();
|
|
post(route("payments.offline.submit"));
|
|
};
|
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
/* @__PURE__ */ jsx(Head, { title: "Offline Payment" }),
|
|
/* @__PURE__ */ jsx("div", { className: "flex min-h-screen items-center justify-center bg-gray-50 py-8", children: /* @__PURE__ */ jsx("div", { className: "mx-auto w-full max-w-[900px] p-6", children: /* @__PURE__ */ jsxs(Card, { className: "overflow-hidden shadow-sm", children: [
|
|
/* @__PURE__ */ jsxs("div", { className: "bg-blue-500 p-6 text-white", children: [
|
|
/* @__PURE__ */ jsx("h1", { className: "mb-2 text-2xl font-bold", children: "Offline Payment Instructions" }),
|
|
/* @__PURE__ */ jsx("p", { className: "text-blue-100", children: "Please complete the payment and submit your transaction details below" })
|
|
] }),
|
|
/* @__PURE__ */ jsxs(CardContent, { className: "space-y-6 p-6", children: [
|
|
/* @__PURE__ */ jsxs(Card, { className: "border bg-gray-50", children: [
|
|
/* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { className: "text-lg", children: "Order Summary" }) }),
|
|
/* @__PURE__ */ jsxs(CardContent, { className: "space-y-3", children: [
|
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
|
|
/* @__PURE__ */ jsx("span", { className: "text-gray-600", children: "Item:" }),
|
|
/* @__PURE__ */ jsx("span", { className: "font-medium text-gray-900", children: item.title })
|
|
] }),
|
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
|
|
/* @__PURE__ */ jsx("span", { className: "text-gray-600", children: "Customer:" }),
|
|
/* @__PURE__ */ jsx("span", { className: "font-medium text-gray-900", children: user.name })
|
|
] }),
|
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-t pt-3", children: [
|
|
/* @__PURE__ */ jsx("span", { className: "text-lg font-semibold text-gray-800", children: "Total Amount:" }),
|
|
/* @__PURE__ */ jsxs("span", { className: "text-2xl font-bold text-blue-600", children: [
|
|
currency,
|
|
" ",
|
|
Number(amount).toFixed(2)
|
|
] })
|
|
] })
|
|
] })
|
|
] }),
|
|
payment_instructions && /* @__PURE__ */ jsxs(Alert, { className: "border-yellow-200 bg-yellow-50", children: [
|
|
/* @__PURE__ */ jsx(Info, { className: "h-5 w-5 text-yellow-600" }),
|
|
/* @__PURE__ */ jsxs(AlertDescription, { children: [
|
|
/* @__PURE__ */ jsx("h2", { className: "mb-3 text-lg font-semibold text-gray-800", children: "Payment Instructions" }),
|
|
/* @__PURE__ */ jsx("div", { className: "prose prose-sm max-w-none text-gray-700", dangerouslySetInnerHTML: { __html: payment_instructions } })
|
|
] })
|
|
] }),
|
|
payment_details && /* @__PURE__ */ jsxs(Alert, { className: "border-blue-200 bg-blue-50", children: [
|
|
/* @__PURE__ */ jsx(CreditCard, { className: "h-5 w-5 text-blue-600" }),
|
|
/* @__PURE__ */ jsxs(AlertDescription, { children: [
|
|
/* @__PURE__ */ jsx("h2", { className: "mb-4 text-lg font-semibold text-gray-800", children: "Payment Details" }),
|
|
/* @__PURE__ */ jsx("div", { className: "prose prose-sm max-w-none text-gray-700", dangerouslySetInnerHTML: { __html: payment_details } })
|
|
] })
|
|
] }),
|
|
/* @__PURE__ */ jsxs(Card, { children: [
|
|
/* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { className: "text-lg", children: "Submit Payment Details" }) }),
|
|
/* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
|
|
/* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
|
|
/* @__PURE__ */ jsxs(Label, { htmlFor: "payment_method", children: [
|
|
"Payment Method Used ",
|
|
/* @__PURE__ */ jsx("span", { className: "text-red-500", children: "*" })
|
|
] }),
|
|
/* @__PURE__ */ jsx(
|
|
Editor,
|
|
{
|
|
output: "html",
|
|
placeholder: {
|
|
paragraph: "Enter payment details here...",
|
|
imageCaption: "Enter image caption here..."
|
|
},
|
|
contentMinHeight: 220,
|
|
contentMaxHeight: 600,
|
|
initialContent: data.payment_info,
|
|
onContentChange: (value) => setData("payment_info", value)
|
|
}
|
|
),
|
|
/* @__PURE__ */ jsx(InputError, { message: errors.payment_info })
|
|
] }),
|
|
/* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
|
|
/* @__PURE__ */ jsxs(Label, { children: [
|
|
"Payment Date ",
|
|
/* @__PURE__ */ jsx("span", { className: "text-red-500", children: "*" })
|
|
] }),
|
|
/* @__PURE__ */ jsx(
|
|
Input,
|
|
{
|
|
required: true,
|
|
type: "date",
|
|
name: "payment_date",
|
|
max: (/* @__PURE__ */ new Date()).toISOString().split("T")[0],
|
|
value: data.payment_date,
|
|
onChange: (e) => onHandleChange(e, setData)
|
|
}
|
|
),
|
|
/* @__PURE__ */ jsx(InputError, { message: errors.payment_date })
|
|
] }),
|
|
/* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
|
|
/* @__PURE__ */ jsxs(Label, { children: [
|
|
"Transaction Attachment ",
|
|
/* @__PURE__ */ jsx("span", { className: "font-light", children: "(Optional)" })
|
|
] }),
|
|
/* @__PURE__ */ jsx(
|
|
Input,
|
|
{
|
|
type: "file",
|
|
name: "attachment",
|
|
placeholder: "Enter transaction attachment",
|
|
onChange: (e) => onHandleChange(e, setData)
|
|
}
|
|
),
|
|
/* @__PURE__ */ jsx(InputError, { message: errors.attachment })
|
|
] }),
|
|
/* @__PURE__ */ jsxs(Alert, { className: "border-blue-200 bg-blue-50", children: [
|
|
/* @__PURE__ */ jsx(Info, { className: "h-4 w-4 text-blue-600" }),
|
|
/* @__PURE__ */ jsxs(AlertDescription, { className: "text-sm text-blue-800", children: [
|
|
/* @__PURE__ */ jsx("p", { className: "mb-1 font-medium", children: "Important Notice" }),
|
|
/* @__PURE__ */ jsx("p", { children: "Your enrollment will be activated once our team verifies your payment. This usually takes 1-2 business days. You will receive an email notification once your payment is confirmed." })
|
|
] })
|
|
] }),
|
|
/* @__PURE__ */ jsxs("div", { className: "flex gap-3 pt-4", children: [
|
|
/* @__PURE__ */ jsxs(Button, { type: "submit", className: "flex flex-1 items-center justify-center gap-2", disabled: processing, children: [
|
|
/* @__PURE__ */ jsx(CheckCircle2, { className: "h-5 w-5" }),
|
|
processing ? "Submitting..." : "Submit Payment Details"
|
|
] }),
|
|
/* @__PURE__ */ jsx(Button, { asChild: true, type: "button", variant: "secondary", disabled: processing, className: "gap-2", children: /* @__PURE__ */ jsxs("a", { href: route("payments.offline.cancel"), children: [
|
|
/* @__PURE__ */ jsx(XCircle, { className: "h-4 w-4" }),
|
|
"Cancel"
|
|
] }) })
|
|
] })
|
|
] }) })
|
|
] })
|
|
] })
|
|
] }) }) })
|
|
] });
|
|
};
|
|
Index.layout = (page) => /* @__PURE__ */ jsx(Main, { children: page });
|
|
export {
|
|
Index as default
|
|
};
|