reui-blocks/blocks/checkout8.tsx

"use client";
import { zodResolver } from "@hookform/resolvers/zod";
import { useState } from "react";
import type { SubmitHandler, UseFormReturn } from "react-hook-form";
import {
  Controller,
  FormProvider,
  useFieldArray,
  useForm,
  useFormContext,
} from "react-hook-form";
import z from "zod";

import type { PriceType } from "@/components/shadcnblocks/price";
import { Price, PriceValue } from "@/components/shadcnblocks/price";
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 {
  Field,
  FieldContent,
  FieldDescription,
  FieldError,
  FieldGroup,
  FieldLabel,
  FieldTitle,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
} from "@/components/ui/input-group";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";

type CartItem = {
  product_id: string;
  link: string;
  name: string;
  image: string;
  price: PriceType;
  details: {
    label: string;
    value: string;
  }[];
};

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(),
  }),
  payment: PaymentSchema,
  products: z
    .object({
      product_id: z.string(),
      quantity: z.number(),
      price: z.number(),
    })
    .array(),
});

type CheckoutFormType = z.infer<typeof checkoutFormSchema>;

type CartItemProps = CartItem;

type CartType = {
  items: CartItem[];
  shippingCost: {
    price: number;
    currency: string;
  };
  discount: {
    price: number;
    currency: string;
  };
};

interface CartProps {
  cartData: CartType;
  form: UseFormReturn<CheckoutFormType>;
}

interface Checkout8Props {
  cart: CartType;
  className?: string;
}

interface CheckoutFormProps {
  onSubmit: SubmitHandler<CheckoutFormType>;
}

const CART = {
  items: [
    {
      product_id: "product-1",
      link: "#",
      name: "کفش اسپرت زرشکی",
      image:
        "/block-media/shadcnblocks/block/ecommerce/clothes/stylish-maroon-sneaker.png",
      price: {
        regular: 354000.0,
        currency: "ریال",
      },
      details: [
        {
          label: "رنگ",
          value: "قرمز",
        },
        {
          label: "سایز",
          value: "۳۶",
        },
      ],
    },
    {
      product_id: "product-2",
      link: "#",
      name: "سویشرت دو‌رنگ با لوگوی گلدوزی",
      image:
        "/block-media/shadcnblocks/block/ecommerce/clothes/bicolor-crewneck-sweatshirt-with-embroidered-logo.png",
      price: {
        regular: 499000.0,
        currency: "ریال",
      },
      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: 245000.0,
        currency: "ریال",
      },
      details: [
        {
          label: "رنگ",
          value: "زرشکی",
        },
      ],
    },
  ],
  shippingCost: {
    price: 20000.0,
    currency: "ریال",
  },
  discount: {
    price: 50000.0,
    currency: "ریال",
  },
};

const Checkout8 = ({ cart = CART, className }: Checkout8Props) => {
  const defaultProducts = cart.items.map((item) => ({
    product_id: item.product_id,
    price: item.price.sale ?? item.price.regular,
  }));

  const form = useForm({
    resolver: zodResolver(checkoutFormSchema),
    defaultValues: {
      payment: {
        method: PAYMENT_METHODS.creditCard,
      },
      products: defaultProducts,
    },
  });

  const onSubmit: SubmitHandler<CheckoutFormType> = (
    data: CheckoutFormType,
  ) => {
    console.log(data);
  };

  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("bg-muted py-32", className)}
    >
      <div className="container">
        <FormProvider {...form}>
          <div className="grid grid-cols-1 gap-6 lg:grid-cols-2 xl:grid-cols-3">
            <div className="col-span-1">
              <div className="space-y-6">
                <Cart form={form} cartData={cart} />
                <PromoCode />
              </div>
            </div>
            <div className="xl:col-span-2">
              <CheckoutForm onSubmit={onSubmit} />
            </div>
          </div>
        </FormProvider>
      </div>
    </section>
  );
};

const Cart = ({ cartData, form }: CartProps) => {
  const { fields } = useFieldArray({
    control: form.control,
    name: "products",
  });

  const formItems = form.watch("products");

  const subTotalPrice = formItems?.reduce((sum, p) => sum + p.price, 0);
  const totalPrice =
    subTotalPrice + cartData.shippingCost.price - cartData.discount.price;

  return (
    <div className="space-y-6 rounded-lg border-border bg-background p-7 shadow-lg">
      <div>
        <h2 className="text-xl leading-relaxed font-semibold">سبد خرید</h2>
        <p className="text-sm font-medium text-muted-foreground">
          {formItems.length.toLocaleString("fa-IR")} محصول در سبد خرید شما قرار دارد.
                          </p>
      </div>
      <Separator />
      <ul className="space-y-5">
        {fields.map((field) => {
          return (
            <li key={field.id}>
              <CartItem
                {...(cartData.items.find(
                  (p) => p.product_id === field.product_id,
                ) as CartItem)}
              />
            </li>
          );
        })}
      </ul>
      <Separator />
      <div className="space-y-4">
        <div className="flex items-center justify-between">
          <div>جمع سفارش</div>
          <Price>
            <PriceValue
              price={subTotalPrice}
              currency={cartData.items[0].price.currency}
            />
          </Price>
        </div>
        <div className="flex items-center justify-between">
          <div>هزینه ارسال</div>
          <Price>
            <PriceValue
              price={cartData.shippingCost.price}
              currency={cartData.shippingCost.currency}
            />
          </Price>
        </div>
        <div className="flex items-center justify-between">
          <div>تخفیف</div>
          <Price>
            <PriceValue
              price={cartData.discount.price}
              currency={cartData.discount.currency}
            />
          </Price>
        </div>
      </div>
      <Separator />
      <div className="flex items-center justify-between">
        <div>مبلغ قابل پرداخت</div>
        <Price>
          <PriceValue
            price={totalPrice}
            currency={cartData.discount.currency}
          />
        </Price>
      </div>
      <Button className="w-full">ثبت و پرداخت سفارش</Button>
    </div>
  );
};

const CartItem = ({ image, name, link, details, price }: CartItemProps) => {
  const { regular, currency } = price;

  return (
    <a href={link} className="flex items-center gap-4">
      <div className="shrink-0 basis-15">
        <AspectRatio ratio={1} className="overflow-hidden">
          <img
            src={image}
            alt={name}
            className="block size-full object-cover object-center"
          />
        </AspectRatio>
      </div>
      <div className="flex flex-1 gap-4 max-sm:flex-col sm:items-center">
        <div className="flex-1">
          <h2 className="font-medium">{name}</h2>
          <ProductDetails details={details} />
        </div>
        <Price className="text-sm font-semibold">
          <PriceValue price={regular} currency={currency} variant="regular" />
        </Price>
      </div>
    </a>
  );
};

const ProductDetails = ({
  details,
}: {
  details?: {
    label: string;
    value: string;
  }[];
}) => {
  if (!details) return;
  return (
    <ul>
      {details?.map((item, index) => {
        const isLast = index === details.length - 1;

        return (
          <li className="inline" key={index}>
            <dl className="inline text-xs text-muted-foreground">
              <dt className="inline">{item.label}: </dt>
              <dd className="inline">{item.value}</dd>
              {!isLast && <span className="mx-1 text-muted-foreground">/</span>}
            </dl>
          </li>
        );
      })}
    </ul>
  );
};

const promoCodeFormSchema = z.object({
  promoCode: z.string().trim().min(3),
});

type promoCodeFormType = z.infer<typeof promoCodeFormSchema>;

const PromoCode = () => {
  const promoForm = useForm<promoCodeFormType>({
    resolver: zodResolver(promoCodeFormSchema),
    defaultValues: {
      promoCode: "",
    },
  });

  const onSubmit = (data: promoCodeFormType) => {
    console.log(data);
  };

  return (
    <div className="rounded-lg border-border bg-background p-7 shadow-lg">
      <form onSubmit={promoForm.handleSubmit(onSubmit)}>
        <Controller
          name="promoCode"
          control={promoForm.control}
          render={({ field, fieldState }) => (
            <Field data-invalid={fieldState.invalid}>
              <div>
                <FieldLabel
                  htmlFor="promo-code"
                  className="text-lg font-semibold"
                >
                  کد تخفیف
                </FieldLabel>
                <FieldDescription>
                  کد تخفیف خود را وارد کنید تا مبلغ سفارش به‌صورت خودکار به‌روزرسانی شود.
                                          </FieldDescription>
              </div>

              <InputGroup>
                <InputGroupInput
                  {...field}
                  id="promo-code"
                  placeholder="کد تخفیف"
                  aria-invalid={fieldState.invalid}
                />
                <InputGroupAddon align="inline-end">
                  <InputGroupButton variant="default" className="text-xs">
                    اعمال تخفیف
                                                </InputGroupButton>
                </InputGroupAddon>
              </InputGroup>
              {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
            </Field>
          )}
        />
      </form>
    </div>
  );
};

const CheckoutForm = ({ onSubmit }: CheckoutFormProps) => {
  const [activeAccordion, setActiveAccordion] = useState("item-1");
  const { handleSubmit } = useFormContext<CheckoutFormType>();

  const handleOnValueChange = (value: string) => {
    setActiveAccordion(value);
  };

  const onContinue = (value: string) => {
    setActiveAccordion(value);
  };

  const accordionTriggerClasses =
    "px-5 py-3.5 text-base font-semibold hover:no-underline";
  const accordionContentClasses = "";

  return (
    <div className="space-y-6 rounded-lg border-border bg-background p-7 shadow-lg">
      <form onSubmit={handleSubmit(onSubmit)}>
        <Accordion
          type="single"
          collapsible
          className="w-full border"
          value={activeAccordion}
          onValueChange={handleOnValueChange}
        >
          <AccordionItem value="مرحله ۱">
            <AccordionTrigger className={accordionTriggerClasses}>
              اطلاعات تماس
            </AccordionTrigger>
            <AccordionContent className={accordionContentClasses}>
              <div className="space-y-7">
                <ContactFields />
                <Button
                  type="button"
                  className="w-full"
                  variant="secondary"
                  onClick={() => onContinue("item-2")}
                >
                  ادامه مرحله
                                                  </Button>
              </div>
            </AccordionContent>
          </AccordionItem>
          <AccordionItem value="مرحله ۲">
            <AccordionTrigger className={accordionTriggerClasses}>
              روش ارسال
            </AccordionTrigger>
            <AccordionContent className={accordionContentClasses}>
              <div className="space-y-7">
                <ShippingMethodFields />
                <Button
                  type="button"
                  className="w-full"
                  variant="secondary"
                  onClick={() => onContinue("item-3")}
                >
                  ادامه مرحله
                                                  </Button>
              </div>
            </AccordionContent>
          </AccordionItem>
          <AccordionItem value="مرحله ۳">
            <AccordionTrigger className={accordionTriggerClasses}>
              پرداخت
            </AccordionTrigger>
            <AccordionContent className={accordionContentClasses}>
              <div className="space-y-7">
                <PaymentFields />
                <Button type="submit" className="w-full">
                  ثبت و پرداخت سفارش
                                                  </Button>
              </div>
            </AccordionContent>
          </AccordionItem>
        </Accordion>
      </form>
    </div>
  );
};

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

  return (
    <FieldGroup className="gap-3.5">
      <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"
              aria-invalid={fieldState.invalid}
            />
            {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
          </Field>
        )}
      />
      <div className="flex gap-3.5 max-sm:flex-col">
        <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"
                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"
                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"
              aria-invalid={fieldState.invalid}
            />
            {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
          </Field>
        )}
      />
      <div className="flex gap-3.5 max-sm:flex-col">
        <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"
                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"
                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"
              aria-invalid={fieldState.invalid}
            />
            {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
          </Field>
        )}
      />
      <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"
              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="font-normal">
              مایلم از تخفیف‌ها و پیشنهادهای ویژه مطلع شوم.
                                </FieldLabel>
          </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="flex max-sm:flex-col"
          >
            <FieldLabel htmlFor="checkout-shippingMethod-1">
              <Field orientation="horizontal" data-invalid={fieldState.invalid}>
                <FieldContent>
                  <FieldTitle>پست اکسپرس</FieldTitle>
                  <FieldDescription>تحویل در اولین روز کاری</FieldDescription>
                </FieldContent>
                <div className="flex gap-3.5">
                  <Price className="text-sm">
                    <PriceValue price={10000} currency="ریال" />
                  </Price>
                  <RadioGroupItem
                    value="UPS"
                    id="checkout-shippingMethod-1"
                    aria-invalid={fieldState.invalid}
                  />
                </div>
              </Field>
            </FieldLabel>
            <FieldLabel htmlFor="checkout-shippingMethod-2">
              <Field orientation="horizontal" data-invalid={fieldState.invalid}>
                <FieldContent>
                  <FieldTitle>پیک سریع</FieldTitle>
                  <FieldDescription>تحویل طی ۳ تا ۵ روز کاری</FieldDescription>
                </FieldContent>
                <div className="flex gap-3.5">
                  <Price className="text-sm">
                    <PriceValue price={2990} currency="ریال" />
                  </Price>
                  <RadioGroupItem
                    value="FedEx"
                    id="checkout-shippingMethod-2"
                    aria-invalid={fieldState.invalid}
                  />
                </div>
              </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-7">
      <Controller
        name="payment.method"
        control={form.control}
        render={({ field, fieldState }) => (
          <Field>
            <RadioGroup
              name={field.name}
              value={field.value}
              onValueChange={field.onChange}
            >
              <FieldLabel htmlFor="checkout-payment-method-1">
                <Field
                  orientation="horizontal"
                  data-invalid={fieldState.invalid}
                >
                  <FieldContent className="flex-1">
                    <FieldTitle>کارت بانکی</FieldTitle>
                  </FieldContent>
                  <img
                    src="/block-media/shadcnblocks/block/logos/visa-icon.svg"
                    alt="کارت بانکی"
                    className="size-5"
                  />
                  <RadioGroupItem
                    value="creditCard"
                    id="checkout-payment-method-1"
                    aria-invalid={fieldState.invalid}
                  />
                </Field>
              </FieldLabel>
              <FieldLabel htmlFor="checkout-payment-method-2">
                <Field
                  orientation="horizontal"
                  data-invalid={fieldState.invalid}
                >
                  <FieldContent className="flex-1">
                    <FieldTitle>پی‌پال</FieldTitle>
                  </FieldContent>
                  <img
                    src="/block-media/shadcnblocks/block/logos/paypal-icon.svg"
                    alt="پی‌پال"
                    className="size-5"
                  />
                  <RadioGroupItem
                    value="paypal"
                    id="checkout-payment-method-2"
                    aria-invalid={fieldState.invalid}
                  />
                </Field>
              </FieldLabel>
              <FieldLabel htmlFor="checkout-payment-method-3">
                <Field
                  orientation="horizontal"
                  data-invalid={fieldState.invalid}
                >
                  <FieldContent>
                    <FieldTitle>پرداخت از طریق انتقال بانکی</FieldTitle>
                  </FieldContent>
                  <RadioGroupItem
                    value="onlineBankTransfer"
                    id="checkout-payment-method-3"
                    aria-invalid={fieldState.invalid}
                  />
                </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;

  switch (method) {
    case PAYMENT_METHODS.creditCard:
      return (
        <div className="space-y-3.5">
          <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"
                  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"
                  aria-invalid={fieldState.invalid}
                />
                {fieldState.invalid && (
                  <FieldError errors={[fieldState.error]} />
                )}
              </Field>
            )}
          />
          <div className="flex gap-3.5 max-sm:flex-col">
            <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"
                    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"
                placeholder="example@email.com"
                id="checkout-payment-payPalEmail"
                aria-invalid={fieldState.invalid}
              />
              {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
            </Field>
          )}
        />
      );
    case PAYMENT_METHODS.onlineBankTransfer:
      return (
        <div className="space-y-3.5">
          <Controller
            name="payment.bankName"
            control={form.control}
            render={({ field, fieldState }) => (
              <Field data-invalid={fieldState.invalid}>
                <FieldLabel
                  className="text-sm font-normal"
                  htmlFor="checkout-payment-bankName"
                >
                  نام بانک
                </FieldLabel>
                <Input
                  {...field}
                  placeholder="نام بانک"
                  id="checkout-payment-bankName"
                  aria-invalid={fieldState.invalid}
                />
                {fieldState.invalid && (
                  <FieldError errors={[fieldState.error]} />
                )}
              </Field>
            )}
          />
          <Controller
            name="payment.accountNumber"
            control={form.control}
            render={({ field, fieldState }) => (
              <Field data-invalid={fieldState.invalid}>
                <FieldLabel
                  className="text-sm font-normal"
                  htmlFor="checkout-payment-accountNumber"
                >
                  شماره حساب
                </FieldLabel>
                <Input
                  {...field}
                  id="checkout-payment-accountNumber"
                  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="text-sm font-normal"
            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"
            id="checkout-payment-expiryDate"
            aria-invalid={fieldState.invalid}
          />
          {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
        </Field>
      )}
    />
  );
};

export { Checkout8 };