641 lines
18 KiB
TypeScript
641 lines
18 KiB
TypeScript
"use client";
|
|
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import { Trash } from "lucide-react";
|
|
import { useCallback } from "react";
|
|
import type { UseFormReturn } from "react-hook-form";
|
|
import {
|
|
Controller,
|
|
FormProvider,
|
|
useFieldArray,
|
|
useForm,
|
|
useFormContext,
|
|
} from "react-hook-form";
|
|
import z from "zod";
|
|
|
|
import QuantityInput from "@/components/shadcnblocks/quantity-input";
|
|
import { AspectRatio } from "@/components/ui/aspect-ratio";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Field, FieldError, FieldLabel } from "@/components/ui/field";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Separator } from "@/components/ui/separator";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface ProductPrice {
|
|
regular: number;
|
|
sale?: number;
|
|
currency: string;
|
|
}
|
|
|
|
type CartItem = {
|
|
product_id: string;
|
|
link: string;
|
|
name: string;
|
|
image: string;
|
|
price: ProductPrice;
|
|
quantity: number;
|
|
details: {
|
|
label: string;
|
|
value: string;
|
|
}[];
|
|
};
|
|
|
|
interface CartItemProps extends CartItem {
|
|
index: number;
|
|
onRemoveClick: () => void;
|
|
onQuantityChange: (newQty: number) => void;
|
|
}
|
|
|
|
interface CartProps {
|
|
cartItems: CartItem[];
|
|
form: UseFormReturn<CheckoutFormType>;
|
|
}
|
|
|
|
interface Checkout4Props {
|
|
cartItems: CartItem[];
|
|
className?: string;
|
|
}
|
|
|
|
const formatPrice = (price: number, currency = "IRR") =>
|
|
new Intl.NumberFormat("fa-IR", {
|
|
style: "currency",
|
|
currency,
|
|
}).format(price);
|
|
|
|
const PAYMENT_METHODS = {
|
|
creditCard: "creditCard",
|
|
paypal: "paypal",
|
|
onlineBankTransfer: "onlineBankTransfer",
|
|
};
|
|
|
|
type PaymentMethod = keyof typeof PAYMENT_METHODS;
|
|
|
|
const CreditCardPayment = z.object({
|
|
method: z.literal(PAYMENT_METHODS.creditCard),
|
|
cardholderName: z.string(),
|
|
cardNumber: z.string(),
|
|
expiryDate: z
|
|
.string()
|
|
.regex(/^(0[1-9]|1[0-2])\/\d{2}$/, "فرمت نامعتبر (MM/YY)")
|
|
.refine((value) => {
|
|
const [mm, yy] = value.split("/").map(Number);
|
|
const now = new Date();
|
|
const currentMonth = now.getMonth() + 1;
|
|
const currentYear = now.getFullYear() % 100;
|
|
if (yy < currentYear) return false;
|
|
if (yy === currentYear && mm < currentMonth) return false;
|
|
return true;
|
|
}, "کارت منقضی شده است"),
|
|
cvc: z.string(),
|
|
});
|
|
|
|
const PayPalPayment = z.object({
|
|
method: z.literal(PAYMENT_METHODS.paypal),
|
|
payPalEmail: z.string(),
|
|
});
|
|
|
|
const BankTransferPayment = z.object({
|
|
method: z.literal(PAYMENT_METHODS.onlineBankTransfer),
|
|
bankName: z.string(),
|
|
accountNumber: z.string(),
|
|
});
|
|
|
|
const PaymentSchema = z.discriminatedUnion("method", [
|
|
CreditCardPayment,
|
|
PayPalPayment,
|
|
BankTransferPayment,
|
|
]);
|
|
|
|
const checkoutFormSchema = z.object({
|
|
email: z.string().email("ایمیل نامعتبر است"),
|
|
payment: PaymentSchema,
|
|
products: z
|
|
.object({
|
|
product_id: z.string(),
|
|
quantity: z.number(),
|
|
price: z.number(),
|
|
})
|
|
.array(),
|
|
});
|
|
|
|
type CheckoutFormType = z.infer<typeof checkoutFormSchema>;
|
|
|
|
const CART_ITEMS: CartItem[] = [
|
|
{
|
|
product_id: "product-1",
|
|
link: "#",
|
|
name: "کفش اسپرت زرشکی",
|
|
image:
|
|
"/block-media/shadcnblocks/block/ecommerce/clothes/stylish-maroon-sneaker.png",
|
|
price: {
|
|
regular: 354.0,
|
|
currency: "IRR",
|
|
},
|
|
quantity: 1,
|
|
details: [
|
|
{ label: "رنگ", value: "قرمز" },
|
|
{ label: "سایز", value: "36" },
|
|
],
|
|
},
|
|
{
|
|
product_id: "product-2",
|
|
link: "#",
|
|
name: "سوئیشرت دو رنگ با لوگوی گلدوزی",
|
|
image:
|
|
"/block-media/shadcnblocks/block/ecommerce/clothes/bicolor-crewneck-sweatshirt-with-embroidered-logo.png",
|
|
price: {
|
|
regular: 499.0,
|
|
currency: "IRR",
|
|
},
|
|
quantity: 1,
|
|
details: [
|
|
{ label: "رنگ", value: "آبی و سفید" },
|
|
{ label: "سایز", value: "L" },
|
|
],
|
|
},
|
|
{
|
|
product_id: "product-4",
|
|
link: "#",
|
|
name: "کیف چرمی زرشکی",
|
|
image:
|
|
"/block-media/shadcnblocks/block/ecommerce/clothes/maroon-leather-handbag.png",
|
|
price: {
|
|
regular: 245.0,
|
|
currency: "IRR",
|
|
},
|
|
quantity: 1,
|
|
details: [{ label: "رنگ", value: "زرشکی" }],
|
|
},
|
|
];
|
|
|
|
const Checkout4 = ({ cartItems = CART_ITEMS, className }: Checkout4Props) => {
|
|
const defaultProducts = cartItems.map((item) => ({
|
|
product_id: item.product_id,
|
|
quantity: item.quantity,
|
|
price: item.price.sale ?? item.price.regular,
|
|
}));
|
|
|
|
const form = useForm({
|
|
resolver: zodResolver(checkoutFormSchema),
|
|
defaultValues: {
|
|
payment: {
|
|
method: PAYMENT_METHODS.creditCard,
|
|
},
|
|
products: defaultProducts,
|
|
},
|
|
});
|
|
|
|
const onSubmit = (data: CheckoutFormType) => {
|
|
console.log(data);
|
|
};
|
|
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("min-h-screen", className)}>
|
|
<FormProvider {...form}>
|
|
<form onSubmit={form.handleSubmit(onSubmit)}>
|
|
<div className="grid min-h-screen lg:grid-cols-2">
|
|
<div className="order-2 flex items-center bg-muted/30 lg:order-1">
|
|
<div className="mx-auto w-full max-w-xl p-8 lg:p-12 xl:p-16">
|
|
<h2 className="mb-8 text-xl font-semibold">خلاصه خرید</h2>
|
|
<Cart form={form} cartItems={cartItems} />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="order-1 flex items-center lg:order-2">
|
|
<div className="mx-auto w-full max-w-xl p-8 lg:p-12 xl:p-16">
|
|
<div className="mb-10">
|
|
<h1 className="text-3xl font-bold tracking-tight">
|
|
پرداخت با کارت بانکی
|
|
</h1>
|
|
</div>
|
|
|
|
<div className="space-y-6">
|
|
<section>
|
|
<ContactFields />
|
|
</section>
|
|
|
|
<section>
|
|
<PaymentFields />
|
|
</section>
|
|
|
|
<Button type="submit" size="lg" className="w-full text-base">
|
|
پرداخت نهایی
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</FormProvider>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
const Cart = ({ cartItems, form }: CartProps) => {
|
|
const { fields, remove, update } = useFieldArray({
|
|
control: form.control,
|
|
name: "products",
|
|
});
|
|
|
|
const formItems = form.watch("products");
|
|
const totalPrice = formItems?.reduce(
|
|
(sum, p) => sum + p.price * p.quantity,
|
|
0,
|
|
);
|
|
|
|
const handleRemove = useCallback(
|
|
(index: number) => () => {
|
|
remove(index);
|
|
},
|
|
[remove],
|
|
);
|
|
|
|
const handleQuantityChange = useCallback(
|
|
(index: number) => (newQty: number) =>
|
|
update(index, { ...fields[index], quantity: newQty }),
|
|
[update, fields],
|
|
);
|
|
|
|
return (
|
|
<div className="space-y-8">
|
|
<ul className="space-y-6">
|
|
{fields.map((field, index) => {
|
|
const cartItem = cartItems.find(
|
|
(p) => p.product_id === field.product_id,
|
|
);
|
|
if (!cartItem) return null;
|
|
return (
|
|
<li key={field.id}>
|
|
<CartItemComponent
|
|
{...cartItem}
|
|
onRemoveClick={() => handleRemove(index)()}
|
|
onQuantityChange={(newQty: number) =>
|
|
handleQuantityChange(index)(newQty)
|
|
}
|
|
index={index}
|
|
/>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
|
|
<Separator />
|
|
|
|
<div className="space-y-3">
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-muted-foreground">جمع سفارش</span>
|
|
<span className="tabular-nums">
|
|
{formatPrice(totalPrice ?? 0, cartItems[0]?.price.currency)}
|
|
</span>
|
|
</div>
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-muted-foreground">هزینه ارسال</span>
|
|
<span>در مرحله بعد محاسبه میشود</span>
|
|
</div>
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-muted-foreground">مالیات بر ارزش افزوده تقریبی</span>
|
|
<span className="tabular-nums">
|
|
{formatPrice(35.8, cartItems[0]?.price.currency)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
<div className="flex justify-between">
|
|
<span className="text-xl font-semibold">مبلغ قابل پرداخت</span>
|
|
<span className="text-xl font-semibold tabular-nums">
|
|
{formatPrice(totalPrice ?? 0, cartItems[0]?.price.currency)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const CartItemComponent = ({
|
|
image,
|
|
name,
|
|
link,
|
|
details,
|
|
price,
|
|
index,
|
|
onQuantityChange,
|
|
onRemoveClick,
|
|
}: CartItemProps) => {
|
|
const { regular, currency } = price;
|
|
|
|
return (
|
|
<div className="flex gap-5">
|
|
<div className="w-24 shrink-0">
|
|
<AspectRatio
|
|
ratio={1}
|
|
className="overflow-hidden rounded-xl bg-background"
|
|
>
|
|
<img src={image} alt={name} className="size-full object-cover" />
|
|
</AspectRatio>
|
|
</div>
|
|
<div className="min-w-0 flex-1">
|
|
<div className="flex justify-between gap-3">
|
|
<div>
|
|
<a href={link} className="line-clamp-2 font-medium hover:underline">
|
|
{name}
|
|
</a>
|
|
<ProductDetails details={details} />
|
|
</div>
|
|
<Button
|
|
size="icon"
|
|
variant="ghost"
|
|
className="size-8 shrink-0"
|
|
onClick={onRemoveClick}
|
|
aria-label={`حذف ${name} از سبد`}
|
|
>
|
|
<Trash className="size-4" />
|
|
<span className="sr-only">حذف از سبد</span>
|
|
</Button>
|
|
</div>
|
|
<div className="mt-3 flex items-center justify-between">
|
|
<QuantityField index={index} onQuantityChange={onQuantityChange} />
|
|
<span className="text-lg font-semibold tabular-nums">
|
|
{formatPrice(regular, currency)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const ProductDetails = ({
|
|
details,
|
|
}: {
|
|
details?: { label: string; value: string }[];
|
|
}) => {
|
|
if (!details) return null;
|
|
return (
|
|
<p className="mt-1 text-sm text-muted-foreground">
|
|
{details.map((item, index) => (
|
|
<span key={index}>
|
|
{item.label}: {item.value}
|
|
{index < details.length - 1 && " · "}
|
|
</span>
|
|
))}
|
|
</p>
|
|
);
|
|
};
|
|
|
|
const QuantityField = ({
|
|
index,
|
|
onQuantityChange,
|
|
}: {
|
|
index: number;
|
|
onQuantityChange: (n: number) => void;
|
|
}) => {
|
|
const { control } = useFormContext();
|
|
|
|
return (
|
|
<Controller
|
|
name={`products.${index}.quantity`}
|
|
control={control}
|
|
render={({ field }) => (
|
|
<Field className="w-28">
|
|
<QuantityInput
|
|
inputProps={field}
|
|
onValueChange={(newQty) => {
|
|
field.onChange(newQty);
|
|
onQuantityChange(newQty);
|
|
}}
|
|
className="rounded-none"
|
|
/>
|
|
</Field>
|
|
)}
|
|
/>
|
|
);
|
|
};
|
|
|
|
const ContactFields = () => {
|
|
const form = useFormContext();
|
|
|
|
return (
|
|
<Controller
|
|
name="email"
|
|
control={form.control}
|
|
render={({ field, fieldState }) => (
|
|
<Field data-invalid={fieldState.invalid}>
|
|
<FieldLabel className="text-sm font-medium" htmlFor="checkout-email">
|
|
ایمیل
|
|
</FieldLabel>
|
|
<Input
|
|
{...field}
|
|
id="checkout-email"
|
|
type="email"
|
|
dir="rtl"
|
|
placeholder="example@email.com"
|
|
aria-invalid={fieldState.invalid}
|
|
/>
|
|
{fieldState.invalid && <FieldError errors={[fieldState.error]} />}
|
|
</Field>
|
|
)}
|
|
/>
|
|
);
|
|
};
|
|
|
|
const PaymentFields = () => {
|
|
const form = useFormContext();
|
|
const paymentMethod = form.watch("payment.method") as PaymentMethod;
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div>
|
|
<h2 className="mb-2 text-sm font-medium">روش پرداخت</h2>
|
|
<PaymentFieldsByMethod method={paymentMethod} />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const PaymentFieldsByMethod = ({ method }: { method: PaymentMethod }) => {
|
|
const form = useFormContext();
|
|
|
|
// Default to credit card if no method selected
|
|
const paymentMethod = method || PAYMENT_METHODS.creditCard;
|
|
|
|
switch (paymentMethod) {
|
|
case PAYMENT_METHODS.creditCard:
|
|
return (
|
|
<div className="space-y-5">
|
|
<Controller
|
|
name="payment.cardNumber"
|
|
control={form.control}
|
|
render={({ field, fieldState }) => (
|
|
<div className="space-y-2">
|
|
<div className="flex items-center justify-between">
|
|
<FieldLabel
|
|
className="text-sm font-medium text-muted-foreground"
|
|
htmlFor="checkout-payment-cardNumber"
|
|
>
|
|
اطلاعات کارت بانکی
|
|
</FieldLabel>
|
|
<div className="pointer-events-none flex items-center gap-1.5">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/logos/visa-icon.svg"
|
|
alt="Visa"
|
|
className="size-5 shrink-0"
|
|
/>
|
|
<img
|
|
src="/block-media/shadcnblocks/block/logos/mastercard-logo.svg"
|
|
alt="Mastercard"
|
|
className="size-5 shrink-0"
|
|
/>
|
|
<img
|
|
src="/block-media/shadcnblocks/block/logos/american-express-icon.svg"
|
|
alt="کارت ویژه"
|
|
className="size-5 shrink-0"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<Field
|
|
data-invalid={fieldState.invalid}
|
|
className="relative w-full"
|
|
>
|
|
<Input
|
|
{...field}
|
|
id="checkout-payment-cardNumber"
|
|
dir="rtl"
|
|
placeholder="1234 1234 1234 1234"
|
|
aria-invalid={fieldState.invalid}
|
|
/>
|
|
{fieldState.invalid && (
|
|
<FieldError errors={[fieldState.error]} />
|
|
)}
|
|
</Field>
|
|
</div>
|
|
)}
|
|
/>
|
|
<div className="grid gap-5 sm:grid-cols-2">
|
|
<DateInput />
|
|
<Controller
|
|
name="payment.cvc"
|
|
control={form.control}
|
|
render={({ field, fieldState }) => (
|
|
<Field data-invalid={fieldState.invalid}>
|
|
<Input
|
|
{...field}
|
|
id="checkout-payment-cvc"
|
|
dir="rtl"
|
|
placeholder="CVC"
|
|
aria-label="کد امنیتی (CVC)"
|
|
aria-invalid={fieldState.invalid}
|
|
/>
|
|
{fieldState.invalid && (
|
|
<FieldError errors={[fieldState.error]} />
|
|
)}
|
|
</Field>
|
|
)}
|
|
/>
|
|
</div>
|
|
<Controller
|
|
name="payment.cardholderName"
|
|
control={form.control}
|
|
render={({ field, fieldState }) => (
|
|
<Field data-invalid={fieldState.invalid}>
|
|
<FieldLabel
|
|
className="text-sm font-medium"
|
|
htmlFor="checkout-payment-cardholderName"
|
|
>
|
|
نام روی کارت
|
|
</FieldLabel>
|
|
<Input
|
|
{...field}
|
|
id="checkout-payment-cardholderName"
|
|
placeholder="نام و نام خانوادگی روی کارت"
|
|
aria-invalid={fieldState.invalid}
|
|
/>
|
|
{fieldState.invalid && (
|
|
<FieldError errors={[fieldState.error]} />
|
|
)}
|
|
</Field>
|
|
)}
|
|
/>
|
|
</div>
|
|
);
|
|
case PAYMENT_METHODS.paypal:
|
|
return (
|
|
<div>
|
|
<Controller
|
|
name="payment.payPalEmail"
|
|
control={form.control}
|
|
render={({ field, fieldState }) => (
|
|
<Field data-invalid={fieldState.invalid}>
|
|
<FieldLabel
|
|
className="text-sm font-medium"
|
|
htmlFor="checkout-payment-payPalEmail"
|
|
>
|
|
ایمیل کیف پول دیجیتال
|
|
</FieldLabel>
|
|
<Input
|
|
{...field}
|
|
type="email"
|
|
dir="rtl"
|
|
placeholder="example@email.com"
|
|
id="checkout-payment-payPalEmail"
|
|
aria-invalid={fieldState.invalid}
|
|
/>
|
|
{fieldState.invalid && (
|
|
<FieldError errors={[fieldState.error]} />
|
|
)}
|
|
</Field>
|
|
)}
|
|
/>
|
|
</div>
|
|
);
|
|
default:
|
|
return null;
|
|
}
|
|
};
|
|
|
|
const DateInput = () => {
|
|
const form = useFormContext();
|
|
|
|
return (
|
|
<Controller
|
|
name="payment.expiryDate"
|
|
control={form.control}
|
|
render={({ field, fieldState }) => (
|
|
<Field data-invalid={fieldState.invalid}>
|
|
<FieldLabel
|
|
className="sr-only"
|
|
htmlFor="checkout-payment-expiryDate"
|
|
>
|
|
تاریخ انقضا
|
|
</FieldLabel>
|
|
<Input
|
|
{...field}
|
|
onChange={(e) => {
|
|
let val = e.target.value;
|
|
val = val.replace(/[^0-9/]/g, "");
|
|
const prev = field.value ?? "";
|
|
const isDeleting = val.length < prev.length;
|
|
if (!isDeleting) {
|
|
if (val.length === 2 && !val.includes("/")) {
|
|
val = val + "/";
|
|
}
|
|
}
|
|
if (val.length > 5) {
|
|
val = val.slice(0, 5);
|
|
}
|
|
field.onChange(val);
|
|
}}
|
|
pattern="^(0[1-9]|1[0-2])/[0-9]{2}$"
|
|
placeholder="MM/YY"
|
|
dir="rtl"
|
|
id="checkout-payment-expiryDate"
|
|
aria-invalid={fieldState.invalid}
|
|
/>
|
|
{fieldState.invalid && <FieldError errors={[fieldState.error]} />}
|
|
</Field>
|
|
)}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export { Checkout4 };
|