reui-blocks/blocks/checkout3.tsx

"use client";

import { zodResolver } from "@hookform/resolvers/zod";
import { ChevronDown, Minus, Plus, ShoppingBag, Trash } from "lucide-react";
import { useCallback, useState } 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 {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { AspectRatio } from "@/components/ui/aspect-ratio";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible";
import {
  Field,
  FieldContent,
  FieldDescription,
  FieldError,
  FieldGroup,
  FieldLabel,
  FieldTitle,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
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>;
}

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({
  contactInfo: z.object({
    email: z.string(),
    subscribe: z.boolean().optional(),
  }),
  address: z.object({
    country: z.string(),
    firstName: z.string(),
    lastName: z.string(),
    address: z.string(),
    postalCode: z.string(),
    city: z.string(),
    phone: z.string(),
  }),
  shippingMethod: z.string(),
  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: "زرشکی" }],
  },
];

interface Checkout3Props {
  cartItems?: CartItem[];
  className?: string;
}

const Checkout3 = ({ cartItems = CART_ITEMS, className }: Checkout3Props) => {
  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("py-16 md:py-32", className)}>
      <div className="container max-w-lg">
        <div className="mb-8 text-center">
          <h1 className="text-xl font-bold tracking-tight md:text-3xl">
            نهایی‌سازی خرید
                                </h1>
        </div>

        <FormProvider {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
            <CollapsibleCart form={form} cartItems={cartItems} />

            <div className="space-y-6">
              <section>
                <h2 className="mb-4 text-lg font-semibold">اطلاعات تماس</h2>
                <ContactFields />
              </section>

              <Separator />

              <ShippingDeliveryAccordion />

              <Separator />

              <section>
                <h2 className="mb-4 text-lg font-semibold">پرداخت نهایی</h2>
                <PaymentFields />
              </section>
            </div>

            <Button type="submit" size="lg" className="w-full text-base">
              ثبت و پرداخت سفارش
                                      </Button>
          </form>
        </FormProvider>
      </div>
    </section>
  );
};

const ShippingDeliveryAccordion = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <section>
      <Accordion
        type="single"
        collapsible
        className="w-full"
        value={isOpen ? "shipping-delivery" : undefined}
        onValueChange={(value) => setIsOpen(value === "shipping-delivery")}
      >
        <AccordionItem value="shipping-delivery">
          <AccordionTrigger className="py-0 text-lg font-semibold hover:no-underline [&>svg:last-child]:hidden [&[data-state=closed]>svg:nth-of-type(2)]:hidden [&[data-state=open]>svg:nth-of-type(1)]:hidden [&[data-state=open]>svg:nth-of-type(2)]:block">
            ارسال و تحویل
            <Plus className="pointer-events-none size-4 shrink-0 self-center text-muted-foreground" />
            <Minus className="pointer-events-none hidden size-4 shrink-0 self-center text-muted-foreground" />
          </AccordionTrigger>
          <AccordionContent className="px-1 pb-4">
            <div className="space-y-6">
              <AddressFields />
              <ShippingMethodFields />
            </div>
          </AccordionContent>
        </AccordionItem>
      </Accordion>
    </section>
  );
};

const CollapsibleCart = ({ cartItems, form }: CartProps) => {
  const [isOpen, setIsOpen] = useState(false);

  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 itemCount = formItems?.reduce((sum, p) => sum + p.quantity, 0) || 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 (
    <Collapsible open={isOpen} onOpenChange={setIsOpen}>
      <CollapsibleTrigger asChild>
        <Button
          variant="outline"
          className="h-auto w-full justify-between py-4"
        >
          <div className="flex items-center gap-3">
            <ShoppingBag className="size-5" />
            <span className="font-medium">
              {itemCount.toLocaleString("fa-IR")} کالا
                                      </span>
          </div>
          <div className="flex items-center gap-2">
            <span className="font-semibold tabular-nums">
              {formatPrice(totalPrice ?? 0, cartItems[0]?.price.currency)}
            </span>
            <ChevronDown
              className={cn(
                "size-4 transition-transform",
                isOpen && "rotate-180",
              )}
            />
          </div>
        </Button>
      </CollapsibleTrigger>
      <CollapsibleContent>
        <div className="mt-4 space-y-4 rounded-lg border p-4">
          <ul className="space-y-4">
            {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-2 text-sm">
            <div className="flex justify-between">
              <span className="text-muted-foreground">جمع سفارش</span>
              <span className="tabular-nums">
                {formatPrice(totalPrice ?? 0, cartItems[0]?.price.currency)}
              </span>
            </div>
            <div className="flex justify-between">
              <span className="text-muted-foreground">هزینه ارسال</span>
              <span>پس از انتخاب روش ارسال محاسبه می‌شود</span>
            </div>
          </div>

          <Separator />

          <div className="flex justify-between font-medium">
            <span>مبلغ قابل پرداخت</span>
            <span className="tabular-nums">
              {formatPrice(totalPrice ?? 0, cartItems[0]?.price.currency)}
            </span>
          </div>
        </div>
      </CollapsibleContent>
    </Collapsible>
  );
};

const CartItemComponent = ({
  image,
  name,
  link,
  details,
  price,
  index,
  onQuantityChange,
  onRemoveClick,
}: CartItemProps) => {
  const { regular, currency } = price;

  return (
    <div className="flex gap-4">
      <div className="w-16 shrink-0">
        <AspectRatio ratio={1} className="overflow-hidden rounded-md bg-muted">
          <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-2">
          <div>
            <a
              href={link}
              className="line-clamp-1 text-sm font-medium hover:underline"
            >
              {name}
            </a>
            <ProductDetails details={details} />
          </div>
          <Button
            size="icon"
            variant="ghost"
            className="size-7 shrink-0"
            onClick={onRemoveClick}
            aria-label={`حذف ${name} از سبد`}
          >
            <Trash className="size-3.5" />
            <span className="sr-only">حذف از سبد</span>
          </Button>
        </div>
        <div className="mt-2 flex items-center justify-between">
          <QuantityField index={index} onQuantityChange={onQuantityChange} />
          <span className="text-sm font-medium tabular-nums">
            {formatPrice(regular, currency)}
          </span>
        </div>
      </div>
    </div>
  );
};

const ProductDetails = ({
  details,
}: {
  details?: { label: string; value: string }[];
}) => {
  if (!details) return null;
  return (
    <p className="text-xs text-muted-foreground">
      {details.map((item, index) => (
        <span key={index}>
          {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-30">
          <QuantityInput
            inputProps={field}
            onValueChange={(newQty) => {
              field.onChange(newQty);
              onQuantityChange(newQty);
            }}
            className="h-8 rounded-none"
          />
        </Field>
      )}
    />
  );
};

const ContactFields = () => {
  const form = useFormContext();

  return (
    <FieldGroup className="gap-4">
      <Controller
        name="contactInfo.email"
        control={form.control}
        render={({ field, fieldState }) => (
          <Field data-invalid={fieldState.invalid}>
            <FieldLabel
              className="text-sm font-normal"
              htmlFor="checkout-email"
            >
              ایمیل
            </FieldLabel>
            <Input
              {...field}
              id="checkout-email"
              type="email"
              dir="rtl"
              placeholder="example@email.com"
              className="h-12"
              aria-invalid={fieldState.invalid}
            />
            {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
          </Field>
        )}
      />
      <Controller
        name="contactInfo.subscribe"
        control={form.control}
        render={({ field }) => (
          <Field orientation="horizontal">
            <Checkbox
              id="checkout-subscribe"
              name={field.name}
              // @ts-ignore
              checked={field.value}
              onCheckedChange={field.onChange}
            />
            <FieldLabel
              htmlFor="checkout-subscribe"
              className="text-sm font-normal"
            >
              دریافت اخبار و پیشنهادها از طریق ایمیل
            </FieldLabel>
          </Field>
        )}
      />
    </FieldGroup>
  );
};

const AddressFields = () => {
  const form = useFormContext();

  return (
    <FieldGroup className="gap-4">
      <Controller
        name="address.country"
        control={form.control}
        render={({ field, fieldState }) => (
          <Field data-invalid={fieldState.invalid}>
            <FieldLabel
              className="text-sm font-normal"
              htmlFor="checkout-country"
            >
              کشور
            </FieldLabel>
            <Input
              {...field}
              id="checkout-country"
              className="h-12"
              aria-invalid={fieldState.invalid}
            />
            {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
          </Field>
        )}
      />
      <div className="grid grid-cols-2 gap-4">
        <Controller
          name="address.firstName"
          control={form.control}
          render={({ field, fieldState }) => (
            <Field data-invalid={fieldState.invalid}>
              <FieldLabel
                className="text-sm font-normal"
                htmlFor="checkout-firstName"
              >
                نام
              </FieldLabel>
              <Input
                {...field}
                id="checkout-firstName"
                className="h-12"
                aria-invalid={fieldState.invalid}
              />
              {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
            </Field>
          )}
        />
        <Controller
          name="address.lastName"
          control={form.control}
          render={({ field, fieldState }) => (
            <Field data-invalid={fieldState.invalid}>
              <FieldLabel
                className="text-sm font-normal"
                htmlFor="checkout-lastName"
              >
                نام خانوادگی
              </FieldLabel>
              <Input
                {...field}
                id="checkout-lastName"
                className="h-12"
                aria-invalid={fieldState.invalid}
              />
              {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
            </Field>
          )}
        />
      </div>
      <Controller
        name="address.address"
        control={form.control}
        render={({ field, fieldState }) => (
          <Field data-invalid={fieldState.invalid}>
            <FieldLabel
              className="text-sm font-normal"
              htmlFor="checkout-address"
            >
              آدرس
            </FieldLabel>
            <Input
              {...field}
              id="checkout-address"
              className="h-12"
              aria-invalid={fieldState.invalid}
            />
            {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
          </Field>
        )}
      />
      <div className="grid grid-cols-2 gap-4">
        <Controller
          name="address.postalCode"
          control={form.control}
          render={({ field, fieldState }) => (
            <Field data-invalid={fieldState.invalid}>
              <FieldLabel
                className="text-sm font-normal"
                htmlFor="checkout-postalCode"
              >
                کد پستی
              </FieldLabel>
              <Input
                {...field}
                id="checkout-postalCode"
                dir="rtl"
                className="h-12"
                aria-invalid={fieldState.invalid}
              />
              {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
            </Field>
          )}
        />
        <Controller
          name="address.city"
          control={form.control}
          render={({ field, fieldState }) => (
            <Field data-invalid={fieldState.invalid}>
              <FieldLabel
                className="text-sm font-normal"
                htmlFor="checkout-city"
              >
                شهر
              </FieldLabel>
              <Input
                {...field}
                id="checkout-city"
                className="h-12"
                aria-invalid={fieldState.invalid}
              />
              {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
            </Field>
          )}
        />
      </div>
      <Controller
        name="address.phone"
        control={form.control}
        render={({ field, fieldState }) => (
          <Field data-invalid={fieldState.invalid}>
            <FieldLabel
              className="text-sm font-normal"
              htmlFor="checkout-phone"
            >
              تلفن
            </FieldLabel>
            <Input
              {...field}
              id="checkout-phone"
              type="tel"
              dir="rtl"
              placeholder="09123456789"
              className="h-12"
              aria-invalid={fieldState.invalid}
            />
            {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
          </Field>
        )}
      />
    </FieldGroup>
  );
};

const ShippingMethodFields = () => {
  const form = useFormContext();

  return (
    <Controller
      name="shippingMethod"
      control={form.control}
      render={({ field, fieldState }) => (
        <Field>
          <RadioGroup
            name={field.name}
            value={field.value}
            onValueChange={field.onChange}
            className="gap-3"
          >
            <FieldLabel htmlFor="checkout-shippingMethod-1">
              <Field
                orientation="horizontal"
                data-invalid={fieldState.invalid}
                className="rounded-lg border p-4"
              >
                <RadioGroupItem
                  value="UPS"
                  id="checkout-shippingMethod-1"
                  aria-invalid={fieldState.invalid}
                />
                <FieldContent className="flex-1">
                  <FieldTitle>ارسال سریع</FieldTitle>
                  <FieldDescription>تحویل در اولین روز کاری</FieldDescription>
                </FieldContent>
                <p className="text-sm font-medium tabular-nums">
                  {formatPrice(10, "IRR")}
                </p>
              </Field>
            </FieldLabel>
            <FieldLabel htmlFor="checkout-shippingMethod-2">
              <Field
                orientation="horizontal"
                data-invalid={fieldState.invalid}
                className="rounded-lg border p-4"
              >
                <RadioGroupItem
                  value="Standard"
                  id="checkout-shippingMethod-2"
                  aria-invalid={fieldState.invalid}
                />
                <FieldContent className="flex-1">
                  <FieldTitle>ارسال عادی</FieldTitle>
                  <FieldDescription>تحویل طی ۳ تا ۵ روز کاری</FieldDescription>
                </FieldContent>
                <p className="text-sm font-medium text-green-600">بدون هزینه</p>
              </Field>
            </FieldLabel>
          </RadioGroup>
          {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">
      <Controller
        name="payment.method"
        control={form.control}
        render={({ field, fieldState }) => (
          <Field>
            <RadioGroup
              name={field.name}
              value={field.value}
              onValueChange={field.onChange}
              className="gap-3"
            >
              <FieldLabel htmlFor="checkout-payment-method-1">
                <Field
                  orientation="horizontal"
                  data-invalid={fieldState.invalid}
                  className="rounded-lg border p-4"
                >
                  <RadioGroupItem
                    value="creditCard"
                    id="checkout-payment-method-1"
                    aria-invalid={fieldState.invalid}
                  />
                  <FieldContent className="flex-1">
                    <FieldTitle>کارت بانکی</FieldTitle>
                  </FieldContent>
                  <img
                    src="/block-media/shadcnblocks/block/logos/visa-icon.svg"
                    alt="کارت بانکی"
                    className="size-5"
                  />
                </Field>
              </FieldLabel>
              <FieldLabel htmlFor="checkout-payment-method-2">
                <Field
                  orientation="horizontal"
                  data-invalid={fieldState.invalid}
                  className="rounded-lg border p-4"
                >
                  <RadioGroupItem
                    value="paypal"
                    id="checkout-payment-method-2"
                    aria-invalid={fieldState.invalid}
                  />
                  <FieldContent className="flex-1">
                    <FieldTitle>کیف پول دیجیتال</FieldTitle>
                  </FieldContent>
                  <img
                    src="/block-media/shadcnblocks/block/logos/paypal-icon.svg"
                    alt="PayPal"
                    className="size-5"
                  />
                </Field>
              </FieldLabel>
            </RadioGroup>
            {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
          </Field>
        )}
      />
      <PaymentFieldsByMethod method={paymentMethod} />
    </div>
  );
};

const PaymentFieldsByMethod = ({ method }: { method: PaymentMethod }) => {
  const form = useFormContext();

  if (!method) return null;

  switch (method) {
    case PAYMENT_METHODS.creditCard:
      return (
        <div className="space-y-4">
          <Controller
            name="payment.cardholderName"
            control={form.control}
            render={({ field, fieldState }) => (
              <Field data-invalid={fieldState.invalid}>
                <FieldLabel
                  className="text-sm font-normal"
                  htmlFor="checkout-payment-cardholderName"
                >
                  نام روی کارت
                </FieldLabel>
                <Input
                  {...field}
                  id="checkout-payment-cardholderName"
                  placeholder="نام و نام خانوادگی"
                  className="h-12"
                  aria-invalid={fieldState.invalid}
                />
                {fieldState.invalid && (
                  <FieldError errors={[fieldState.error]} />
                )}
              </Field>
            )}
          />
          <Controller
            name="payment.cardNumber"
            control={form.control}
            render={({ field, fieldState }) => (
              <Field data-invalid={fieldState.invalid}>
                <FieldLabel
                  className="text-sm font-normal"
                  htmlFor="checkout-payment-cardNumber"
                >
                  شماره کارت
                </FieldLabel>
                <Input
                  {...field}
                  id="checkout-payment-cardNumber"
                  dir="rtl"
                  className="h-12"
                  placeholder="1234 5678 9012 3456"
                  aria-invalid={fieldState.invalid}
                />
                {fieldState.invalid && (
                  <FieldError errors={[fieldState.error]} />
                )}
              </Field>
            )}
          />
          <div className="grid grid-cols-2 gap-4">
            <DateInput />
            <Controller
              name="payment.cvc"
              control={form.control}
              render={({ field, fieldState }) => (
                <Field data-invalid={fieldState.invalid}>
                  <FieldLabel
                    className="text-sm font-normal"
                    htmlFor="checkout-payment-cvc"
                  >
                    کد امنیتی (CVC)
                  </FieldLabel>
                  <Input
                    {...field}
                    id="checkout-payment-cvc"
                    dir="rtl"
                    className="h-12"
                    placeholder="123"
                    aria-invalid={fieldState.invalid}
                  />
                  {fieldState.invalid && (
                    <FieldError errors={[fieldState.error]} />
                  )}
                </Field>
              )}
            />
          </div>
        </div>
      );
    case PAYMENT_METHODS.paypal:
      return (
        <Controller
          name="payment.payPalEmail"
          control={form.control}
          render={({ field, fieldState }) => (
            <Field data-invalid={fieldState.invalid}>
              <FieldLabel
                className="text-sm font-normal"
                htmlFor="checkout-payment-payPalEmail"
              >
                ایمیل کیف پول دیجیتال
              </FieldLabel>
              <Input
                {...field}
                type="email"
                dir="rtl"
                className="h-12"
                placeholder="example@email.com"
                id="checkout-payment-payPalEmail"
                aria-invalid={fieldState.invalid}
              />
              {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
            </Field>
          )}
        />
      );
    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="text-sm font-normal"
            htmlFor="checkout-payment-expiryDate"
          >
            تاریخ انقضا
          </FieldLabel>
          <Input
            {...field}
            className="h-12"
            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 { Checkout3 };