删除无用的文件

src/app/(public)/success/_components/OrderDetailWrapper.tsx

@@ -194,13 +194,6 @@ export default function OrderDetailWrapper({
                     <p className="text-ly-16 leading-ly-24 font-bold">{currency && currency.symbol}{orderDetailRes?.grandTotal}</p>
                 </div>
             </div>
-
-
-            {/* <div className="flex w-full flex-col items-center justify-center overflow-hidden">
-                <CheckSign className="h-28 w-28 sm:h-38 sm:w-38" />
-                <OrderDetail />
-                <ClearCartButton buttonName="Continue shopping" redirect="/" />
-            </div> */}
         </>
     );
 }

src/components/cart/OrderDetail.tsx

@@ -1,30 +0,0 @@
-"use client";
-
-import { ORDER_ID } from "@/utils/constants";
-import { getCookie } from "@utils/cookie-tools";
-import { useEffect, useState } from "react";
-
-export default function OrderDetail() {
-  const [orderId, setOrderId] = useState<string | null>(null);
-
-  useEffect(() => {
-    requestAnimationFrame(() => {
-      setOrderId(getCookie(ORDER_ID));
-    });
-  }, []);
-
-  return (
-    <div className="mb-8 font-outfit">
-      <h1 className="my-2 text-center text-3xl font-semibold sm:text-4xl">
-        Your order{" "}
-        <span className="text-primary">
-          #{orderId ? orderId : <span className="animate-pulse">...</span>}
-        </span>{" "}
-        has been placed successfully{" "}
-      </h1>
-      <p className="text-center text-lg font-normal text-black/60 dark:text-neutral-300">
-        Missing page, but your next favorite chair is just a click away.
-      </p>
-    </div>
-  );
-}

src/components/checkout/checkout-cart/CartItemAccordian.tsx

@@ -1,161 +0,0 @@
-import { DEFAULT_OPTION } from "@/utils/constants";
-import { useScrollTo } from "@/utils/hooks/useScrollTo";
-import { Price } from "@components/theme/ui/Price";
-import { Accordion, AccordionItem } from "@heroui/accordion";
-import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/24/outline";
-import { createUrl, safeParse } from "@utils/helper";
-import Image from "next/image";
-import Link from "next/link";
-
-type MerchandiseSearchParams = {
-  [key: string]: string;
-};
-
-export default function CartItemAccordion({
-  cartItems,
-}: {
-  cartItems: any;
-}) {
-
-  const cart = Array.isArray(cartItems?.items?.edges)
-    ? cartItems?.items?.edges
-    : [];
-
-  const scrollTo = useScrollTo();
-
-  return (
-    <div className="mobile-heading fixed bottom-0 left-0 z-50 w-full border-t border-neutral-200 bg-white pb-14
-     dark:border-neutral-700 dark:bg-black lg:hidden">
-      <Accordion
-        selectionMode="multiple"
-        className="!px-0"
-        onSelectionChange={(e) => {
-          const keys = e as Set<string>;
-          if (keys.has("1")) {
-            setTimeout(() => {
-              scrollTo({
-                top: document.body.scrollHeight,
-                behavior: "smooth",
-              });
-            }, 300);
-          }
-        }}
-      >
-        <AccordionItem
-          key="1"
-          indicator={({ isOpen }) =>
-            isOpen ? (
-              <ChevronLeftIcon className="h-5 w-5 stroke-neutral-800 dark:stroke-white" />
-            ) : (
-              <ChevronRightIcon className="h-5 w-5 stroke-neutral-800 dark:stroke-white" />
-            )
-          }
-          classNames={{
-    heading: "px-4", 
-    content: "px-4" 
-  }}
-          aria-label="Accordion 1"
-          title="Order Summary"
-          subtitle={
-            <Price
-              className=""
-              amount={cartItems?.grandTotal || "0"}
-              currencyCode={"USD"}
-            />
-          }
-        >
-          <div className="flex h-full flex-col justify-between px-4">
-            <ul className="flex-grow overflow-y-auto max-h-[300px] py-4 pr-2 -mr-2" style={{ scrollbarWidth: 'thin' }}>
-              {cart?.map((item: any, i: number) => {
-                const merchandiseSearchParams = {} as MerchandiseSearchParams;
-                const merchandiseUrl = createUrl(
-                                `/product/${item?.node.productUrlKey}`,
-                                new URLSearchParams(merchandiseSearchParams)
-                              );
-                const baseImage: any = safeParse(item?.node?.baseImage);
-                return (
-                  <li key={i} className="flex w-full flex-col">
-                    <div className="relative flex w-full flex-row justify-between gap-3 px-1 py-4">
-                      <Link
-                        href={merchandiseUrl}
-                        className="z-30 flex flex-row items-center space-x-4"
-                        aria-label={`${item?.node?.name}`}
-                      >
-                        <div className="relative h-16 w-16 cursor-pointer overflow-hidden rounded-md border border-neutral-300 bg-neutral-300 dark:border-neutral-700 dark:bg-neutral-900 dark:hover:bg-neutral-800">
-                          <Image
-                            className="h-full w-full object-cover"
-                            width={64}
-                            height={64}
-                            alt={item?.node?.baseImage || item?.product?.name}
-                            src={baseImage?.small_image_url || ""}
-                          />
-                        </div>
-
-                        <div className="flex flex-1 flex-col text-base">
-                          <span className="leading-tight text-neutral-900 line-clamp-1 dark:text-white">
-                            {item?.node?.name}
-                          </span>
-                          <span className="font-normal text-black dark:text-white">
-                            Quantity : {item.node.quantity}
-                          </span>
-                          {item.name !== DEFAULT_OPTION ? (
-                            <p className="text-sm lowercase line-clamp-1 text-neutral-500 dark:text-neutral-400">
-                              {item?.node?.sku}
-                            </p>
-                          ) : null}
-                        </div>
-                      </Link>
-                      <div className="flex h-16 flex-col justify-between text-black/[60%] dark:!text-neutral-300">
-                        <Price
-                          className="flex justify-end space-y-2 text-right text-sm"
-                          amount={item?.node?.price}
-                          currencyCode={"USD"}
-                        />
-                      </div>
-                    </div>
-                  </li>
-                );
-              })}
-            </ul>
-            <div className="py-4 text-sm text-neutral-500 dark:text-neutral-400">
-              <div className="mb-3 flex items-center justify-between pb-1">
-                <p className="text-black[60%] font-outfit text-base font-normal dark:text-white">
-                  Subtotal
-                </p>
-                <Price
-                  className="text-right text-base text-black dark:text-white"
-                  amount={cartItems?.subtotal || "0"}
-                  currencyCode={"USD"}
-                />
-              </div>
-              <div className="mb-3 flex items-center justify-between pb-1 pt-1">
-                <p className="text-black[60%] font-outfit text-base font-normal dark:text-white">
-                  Shipping
-                </p>
-                {cartItems?.shippingAmount ? (
-                  <Price
-                    amount={cartItems?.shippingAmount || "0"}
-                    className="text-right text-base text-black dark:text-white"
-                    currencyCode={"USD"}
-                  />
-                ) : (
-                  <p className="text-right text-base">
-                    Calculated at Next Step
-                  </p>
-                )}
-              </div>
-              <div className="mb-3 flex items-center justify-between pb-1 pt-1">
-                <p className="text-xl font-bold dark:text-white">Total</p>
-                <Price
-                  className="text-right text-base text-black dark:text-white"
-                  amount={cartItems?.grandTotal || "0"}
-                  currencyCode={"USD"}
-                />
-              </div>
-            </div>
-          </div>
-        </AccordionItem>
-      </Accordion>
-    </div>
-  );
-}

src/components/checkout/checkout-cart/CheckoutCart.tsx

@@ -1,128 +0,0 @@
-import { DEFAULT_OPTION } from "@/utils/constants";
-import { GridTileImage } from "@components/theme/ui/grid/Tile";
-import { Price } from "@components/theme/ui/Price";
-import CartItemAccordion from "./CartItemAccordian";
-import { NOT_IMAGE } from "@utils/constants";
-import Link from "next/link";
-import { createUrl, safeParse } from "@utils/helper";
-type MerchandiseSearchParams = {
-  [key: string]: string;
-};
-
-export default function CheckoutCart({ cartItems, selectedShippingRate: _id }: { cartItems: any, selectedShippingRate?: any }) {
-
-  const cart = Array.isArray(cartItems?.items?.edges)
-    ? cartItems?.items?.edges
-    : [];
-  return (
-    <>
-      <CartItemAccordion cartItems={cartItems} />
-      <div className="hidden h-full min-h-[100dvh] flex-col justify-between py-4 pl-4 pr-8 lg:flex">
-        <div className="">
-          <h1 className="p-6 font-outfit text-xl font-medium text-black dark:text-neutral-300">
-            Order Summary
-          </h1>
-          <ul className="m-0 flex max-h-[calc(100dvh-292px)] flex-col gap-y-6 overflow-y-auto px-4 py-6 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-gray-500 dark:scrollbar-thumb-neutral-300 lg:h-[calc(100dvh-124px)] lg:overflow-hidden lg:overflow-y-auto">
-            {Array.isArray(cart) &&
-              cart &&
-              cart?.map((item: any, i: number) => {
-                const merchandiseSearchParams = {} as MerchandiseSearchParams;
-                const merchandiseUrl = createUrl(
-                  `/product/${item?.node.productUrlKey}`,
-                  new URLSearchParams(merchandiseSearchParams)
-                );
-                const baseImage: any = safeParse(item?.node?.baseImage);
-
-                return (
-                  <li key={i} className="flex w-full flex-col">
-                    <div className="relative flex w-full flex-row justify-between">
-                      <Link
-                        className="z-30 flex flex-row items-center space-x-4"
-                        aria-label={`${item?.node?.name}`}
-                        href={merchandiseUrl}
-                      >
-                        <div className="relative h-[120px] w-[120px] cursor-pointer rounded-2xl bg-neutral-300 xl:h-[162px] xl:w-[194px]">
-                          <GridTileImage
-                            alt={item?.node?.baseImage || item?.product?.name}
-                            className="h-full w-full object-cover"
-                            height={64}
-                            src={baseImage?.small_image_url || ""}
-                            width={74}
-                            onError={(e) => (e.currentTarget.src = NOT_IMAGE)}
-                          />
-                        </div>
-                        <div className="flex flex-1 flex-col text-base">
-                          <h1 className="font-outfit text-lg font-medium">
-                            {item?.node?.name}
-                          </h1>
-                          {item.name !== DEFAULT_OPTION ? (
-                            <p className="text-sm font-normal text-neutral-500 dark:text-neutral-400">
-                              {item?.node?.sku}
-                            </p>
-                          ) : null}
-                          <span className="font-normal text-black dark:text-white">
-                            Quantity : {item?.node?.quantity}
-                          </span>
-                          <div className="block h-16 xl:hidden">
-                            <Price
-                              amount={item?.node?.price}
-                              className="space-y-2 text-start font-outfit text-lg font-medium xl:text-right"
-                              currencyCode={"USD"}
-                            />
-                          </div>
-                        </div>
-                      </Link>
-                      <div className="hidden h-16 xl:block">
-                        <Price
-                          amount={item?.node?.price}
-                          className="space-y-2 text-start font-outfit text-lg font-medium xl:text-right"
-                          currencyCode={"USD"}
-                        />
-                      </div>
-                    </div>
-                  </li>
-                );
-              })}
-          </ul>
-        </div>
-        <div className="px-4 py-4 text-sm text-neutral-500 dark:text-neutral-400">
-          <div className="mb-3 flex items-center justify-between pb-1">
-            <p className="text-black[60%] font-outfit text-base font-normal">
-              Subtotal
-            </p>
-            <Price
-              amount={cartItems?.subtotal || "0"}
-              className="text-right text-base text-black dark:text-white"
-              currencyCode={"USD"}
-            />
-          </div>
-          <div className="mb-3 flex items-center justify-between pb-1 pt-1">
-            <p className="text-black[60%] font-outfit text-base font-normal">
-              {" "}
-              Shipping
-            </p>
-            {cartItems?.shippingAmount ? (
-              <Price
-                amount={cartItems?.shippingAmount}
-                className="text-right text-base text-black dark:text-white"
-                currencyCode={"USD"}
-              />
-            ) : (
-              <p className="text-right text-base">Calculated at Next Step</p>
-            )}
-          </div>
-          <div className="my-6 flex items-center justify-between">
-            <p className="font-outfit text-2xl font-normal text-black/[60%] dark:text-white">
-              Grand Total
-            </p>
-            <Price
-              amount={(cartItems as any)?.grandTotal || "0"}
-              className="text-right font-outfit text-2xl font-normal text-black dark:text-white"
-              currencyCode={"USD"}
-            />
-          </div>
-        </div>
-      </div>
-    </>
-  );
-}

src/components/checkout/index.tsx

@@ -1,68 +0,0 @@
-"use client";
-import { useAppSelector } from "@/store/hooks";
-import CheckoutSkeleton from "../common/skeleton/CheckoutSkeleton";
-import { CartSkeleton } from "../common/skeleton/ProductCartSkeleton";
-import { useCartDetail } from "@/utils/hooks/useCartDetail";
-import CheckoutCart from "./checkout-cart/CheckoutCart";
-import Stepper from "./stepper";
-import { useEffect } from 'react';
-import { useScrollToTop } from "@/utils/hooks/useScrollTo";
-import { useAddressesFromApi } from "@utils/hooks/getAddress";
-
-
-
-interface CheckOutProps {
-  step: string;
-}
-
-const CheckOut = ({ step }: CheckOutProps) => {
-  const { isLoading, getCartDetail } = useCartDetail();
-  const { billingAddress, shippingAddress } = useAddressesFromApi();
-  const cartDetail = useAppSelector((state) => state.cartDetail);
-  const cartItems = cartDetail?.cart;
-  const selectedShippingRate = cartItems?.selectedShippingRate;
-  const selectedShippingRateTitle = cartItems?.selectedShippingRateTitle;
-  const selectedPayment = cartItems?.paymentMethod;
-  const selectedPaymentTitle = cartItems?.paymentMethodTitle;
-  useScrollToTop();
-
-  // useEffect(() => {
-  //   getCartDetail();
-  // }, [getCartDetail]);
-
-
-
-  return (
-    <>
-      <section className="flex flex-col items-start justify-between lg:flex-row lg:justify-between">
-        <div className="w-full px-0 py-2 sm:px-4 sm:py-4 lg:w-1/2 xl:pl-16 xl:pr-0">
-          {isLoading ? (
-            <CheckoutSkeleton />
-          ) : (
-            <Stepper
-              billingAddress={billingAddress}
-              currentStep={step}
-              selectedPayment={selectedPayment}
-              selectedPaymentTitle={selectedPaymentTitle || ''}
-              selectedShippingRate={selectedShippingRate}
-              selectedShippingRateTitle={selectedShippingRateTitle || ''}
-              shippingAddress={shippingAddress}
-            />
-          )}
-        </div>
-
-        <div className="h-full w-full !z-0 justify-self-start border-0 border-l border-none border-black/[10%] dark:border-neutral-700 lg:w-1/2 lg:border-solid">
-          {isLoading ? (
-            <CartSkeleton className="w-full" />
-          ) : (
-            <div className="max-h-auto w-full flex-initial flex-shrink-0 flex-grow-0 lg:sticky lg:top-0">
-              <CheckoutCart cartItems={cartItems} selectedShippingRate={selectedShippingRate} />
-            </div>
-          )}
-        </div>
-      </section>
-    </>
-  );
-};
-
-export default CheckOut;

src/components/checkout/stepper/Email.tsx

@@ -1,140 +0,0 @@
-"use client";
-import { useForm } from "react-hook-form";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
-import { EMAIL, getLocalStorage, setLocalStorage } from "@/store/local-storage";
-import Link from "next/link";
-import InputText from "@components/common/form/Input";
-import { ProceedToCheckout } from "./ProceedToCheckout";
-import { delay } from "@utils/helper";
-import { EmailFormProps, EmailFormValues } from "../type";
-import { EMAIL_REGEX } from "@utils/constants";
-
-
-
-const Email = () => {
-  const email = getLocalStorage(EMAIL);
-  const [isOpen, setIsOpen] = useState(false);
-  const router = useRouter();
-  const isGuest = true;
-
-  const {
-    register,
-    handleSubmit,
-    formState: { errors, isSubmitting },
-  } = useForm<EmailFormValues>({
-    defaultValues: { email },
-  });
-
-  const onSubmit = async (data: EmailFormValues) => {
-    setLocalStorage(EMAIL, data?.email);
-    await delay(200);
-    router.push("/checkout?step=address");
-  };
-
-  return (
-    <>
-      {email === "" || typeof email === "object" ? (
-        <form className="mt-5" onSubmit={handleSubmit(onSubmit)}>
-          <EmailForm
-            register={register}
-            errors={errors}
-            isSubmitting={isSubmitting}
-            isGuest={isGuest}
-          />
-        </form>
-      ) : isOpen ? (
-        <form className="mt-5" onSubmit={handleSubmit(onSubmit)}>
-          <EmailForm
-            register={register}
-            errors={errors}
-            isSubmitting={isSubmitting}
-            isGuest={isGuest}
-          />
-        </form>
-      ) : (
-        <>
-          <div className="mt-4 flex gap-2 justify-between hidden sm:flex">
-            <div className="flex">
-              <p className="w-auto text-base font-normal text-black/60 dark:text-white/60 sm:w-[180px]">
-                Email Address
-              </p>
-              <p className="font-normal block text-base text-black/60 dark:text-white/60">{email}</p>
-            </div>
-            <div>
-            <button
-              onClick={() => setIsOpen(!isOpen)}
-              className="cursor-pointer text-base font-normal text-black/[60%] underline dark:text-neutral-300"
-            >
-              Change
-            </button>
-            </div>
-          </div>
-          <div className=" relative mt-4 flex sm:hidden flex-col justify-end gap-y-2 sm:flex-row sm:justify-between sm:gap-y-0">
-            <div className="flex justify-between  flex-1 flex-wrap">
-              <p className="w-auto text-base font-normal text-black/60 dark:text-white/60 sm:w-[192px]">
-                Email Address
-              </p>
-              <p className="font-normal block text-base text-black/60 dark:text-white/60">{email}</p>
-            </div>
-            <button
-              onClick={() => setIsOpen(!isOpen)}
-              className="cursor-pointer absolute right-0  text-base font-normal text-black/[60%] underline dark:text-neutral-300"
-              style={{ top: "-36px" }}
-            >
-              Change
-            </button>
-          </div>
-        </>
-      )}
-    </>
-  );
-};
-
-export default Email;
-
-function EmailForm({
-  register,
-  errors,
-  isSubmitting,
-  isGuest,
-}: EmailFormProps) {
-  return (
-    <div>
-      <InputText
-        className="max-w-full"
-        id="email"
-        size="md"
-        {...register("email", {
-          required: "Email is required",
-          pattern: {
-            value: EMAIL_REGEX,
-            message: "Please enter a valid email address",
-          }
-        })}
-        errorMsg={errors?.email?.message as string}
-        label="Enter Email *"
-        placeholder="example@gmail.com"
-        readOnly={!isGuest}
-      />
-
-      {isGuest && (
-        <p className="mb-4 mt-6 font-outfit text-base font-normal text-black/[60%] dark:text-neutral-300">
-          Already have an account? No worries, just{" "}
-          <br className="block sm:hidden" />
-          <Link
-            aria-label="Go to Login Page"
-            className="text-base font-normal text-primary"
-            href="/customer/login"
-          >
-            log in.
-          </Link>
-        </p>
-      )}
-
-      <div className="mt-6 justify-self-end">
-        <ProceedToCheckout buttonName="Next" pending={isSubmitting} />
-      </div>
-    </div>
-  );
-}

src/components/checkout/stepper/GuestAddAdressForm.tsx

@@ -1,540 +0,0 @@
-"use client";
-import { FC, useState, useEffect } from "react";
-import { useForm, useWatch } from "react-hook-form";
-import { AddressDataTypes } from "@/types/types";
-import { EMAIL, getLocalStorage } from "@/store/local-storage";
-import { IS_VALID_ADDRESS, IS_VALID_PHONE, IS_VALID_INPUT } from "@/utils/constants";
-import { isObject } from "@/utils/type-guards";
-import { useCheckout } from "@utils/hooks/useCheckout";
-import InputText from "@components/common/form/Input";
-import { ProceedToCheckout } from "./ProceedToCheckout";
-import CheckBox from "@components/theme/ui/element/Checkbox";
-import { useDispatch } from "react-redux";
-import { updateCart } from "@/store/slices/cart-slice";
-
-
-export const GuestAddAdressForm: FC<{
-  billingAddress?: AddressDataTypes | null;
-  shippingAddress?: AddressDataTypes | null;
-  currentStep?: string;
-}> = ({
-  billingAddress: initialBilling,
-  shippingAddress: initialShipping,
-  currentStep,
-}) => {
-    const email = getLocalStorage(EMAIL);
-    const dispatch = useDispatch();
-    const [isOpen, setIsOpen] = useState(currentStep !== "address");
-
-    const [billingAddress, setBillingAddress] = useState<AddressDataTypes | null>(
-      initialBilling ?? null
-    );
-    const [shippingAddress, setShippingAddress] =
-      useState<AddressDataTypes | null>(initialShipping ?? null);
-
-    const [prevStep, setPrevStep] = useState(currentStep);
-    if (currentStep !== prevStep) {
-      setPrevStep(currentStep);
-      setIsOpen(currentStep !== "address" && isObject(shippingAddress) && isObject(billingAddress));
-    }
-
-
-    const {
-      register,
-      control,
-      handleSubmit,
-      reset,
-      formState: { errors },
-    } = useForm({
-      mode: "onSubmit",
-      defaultValues: {
-        billing: {
-          email: billingAddress?.email ?? email ?? "",
-          firstName: billingAddress?.firstName || "",
-          lastName: billingAddress?.lastName || "",
-          companyName: billingAddress?.companyName || "",
-          address: billingAddress?.address || "",
-          country: billingAddress?.country || "IN",
-          state: billingAddress?.state || "UP",
-          city: billingAddress?.city || "",
-          postcode: billingAddress?.postcode || "",
-          phone: billingAddress?.phone || "",
-        },
-        shipping: {
-          email: shippingAddress?.email ?? email ?? "",
-          firstName: shippingAddress?.firstName || "",
-          lastName: shippingAddress?.lastName || "",
-          companyName: shippingAddress?.companyName || "",
-          address: shippingAddress?.address || "",
-          country: shippingAddress?.country || "IN",
-          state: shippingAddress?.state || "UP",
-          city: shippingAddress?.city || "",
-          postcode: shippingAddress?.postcode || "",
-          phone: shippingAddress?.phone || "",
-        },
-        useForShipping: true,
-      },
-    });
-
-    useEffect(() => {
-      if (initialBilling || initialShipping) {
-        const billing = initialBilling ?? null;
-        const shipping = initialShipping ?? null;
-        requestAnimationFrame(() => {
-          setBillingAddress(billing);
-          setShippingAddress(shipping);
-          setIsOpen(currentStep !== "address" && isObject(shipping) && isObject(billing));
-        });
-
-        reset({
-          billing: {
-            email: initialBilling?.email ?? email ?? "",
-            firstName: initialBilling?.firstName || "",
-            lastName: initialBilling?.lastName || "",
-            companyName: initialBilling?.companyName || "",
-            address: initialBilling?.address || "",
-            country: initialBilling?.country || "IN",
-            state: initialBilling?.state || "UP",
-            city: initialBilling?.city || "",
-            postcode: initialBilling?.postcode || "",
-            phone: initialBilling?.phone || "",
-          },
-          shipping: {
-            email: initialShipping?.email ?? email ?? "",
-            firstName: initialShipping?.firstName || "",
-            lastName: initialShipping?.lastName || "",
-            companyName: initialShipping?.companyName || "",
-            address: initialShipping?.address || "",
-            country: initialShipping?.country || "IN",
-            state: initialShipping?.state || "UP",
-            city: initialShipping?.city || "",
-            postcode: initialShipping?.postcode || "",
-            phone: initialShipping?.phone || "",
-          },
-          useForShipping: true,
-        });
-      }
-    }, [initialBilling, initialShipping, reset, email]);
-
-    const { isLoadingToSave, saveCheckoutAddress } = useCheckout();
-
-    const watchUseForShipping = useWatch({
-      control,
-      name: "useForShipping",
-      defaultValue: true,
-    });
-
-    const addGuestAddress = async (data: any) => {
-      const billing = data?.billing;
-      const shipping = data?.shipping;
-
-      const useForShipping = Boolean(data.useForShipping);
-      const shippingSource = useForShipping ? billing : shipping;
-
-      const payload: any = {
-        billingFirstName: billing.firstName,
-        billingLastName: billing.lastName,
-        billingEmail: billing.email ?? email ?? "",
-        billingAddress: billing.address,
-        billingCity: billing.city,
-        billingCountry: billing.country || "IN",
-        billingState: billing.state || "UP",
-        billingPostcode: billing.postcode,
-        billingPhoneNumber: billing.phone,
-        billingCompanyName: billing.companyName,
-        useForShipping,
-      };
-
-      if (!useForShipping) {
-        payload.shippingFirstName = shipping.firstName;
-        payload.shippingLastName = shipping.lastName;
-        payload.shippingEmail = shipping.email ?? email ?? "";
-        payload.shippingAddress = shipping.address;
-        payload.shippingCity = shipping.city;
-        payload.shippingCountry = shipping.country;
-        payload.shippingState = shipping.state;
-        payload.shippingPostcode = shipping.postcode;
-        payload.shippingPhoneNumber = shipping.phone;
-        payload.shippingCompanyName = shipping.companyName;
-      }
-
-      try {
-        await saveCheckoutAddress(payload as any);
-        dispatch(
-          updateCart({
-              billingAddress: {
-                ...billing,
-                email: billing.email ?? email ?? "",
-              },
-              shippingAddress: {
-                ...shippingSource,
-                email: shippingSource.email ?? email ?? "",
-              },
-          })
-        );
-        setBillingAddress({
-          ...billing,
-          email: billing.email ?? email ?? "",
-        } as AddressDataTypes);
-
-        setShippingAddress({
-          ...shippingSource,
-          email: shippingSource.email ?? email ?? "",
-        } as AddressDataTypes);
-
-        setIsOpen(true);
-      } catch (error) {
-        console.error("Failed to save checkout address", error);
-      }
-    };
-
-    const showSummary = isObject(shippingAddress) && isObject(billingAddress);
-
-    if (showSummary && isOpen) {
-      return (
-        <>
-          <div className="mt-4  items-start  hidden sm:flex">
-            <div className="flex flex-col justify-between w-full">
-              <div className="flex">
-                <p className="w-[184px] text-base font-normal text-black/60 dark:text-white/60">
-                  Billing Address
-                </p>
-                <div className="block cursor-pointer rounded-xl p-2 max-sm:rounded-lg">
-                  <div className="flex flex-col">
-                    <p className="text-base font-medium">
-                      {`${billingAddress?.firstName || ""} ${billingAddress?.lastName || ""
-                        }`}
-                    </p>
-                    <p className="text-base font-medium text-zinc-500">
-                      {`${billingAddress?.companyName || ""}`}
-                    </p>
-                  </div>
-                  <p className="mt-2 text-sm text-zinc-500 max-md:mt-2 max-sm:mt-0">
-                    {`${billingAddress?.address || ""}, ${billingAddress?.postcode || ""
-                      }`}
-                  </p>
-                  <p className="text-zinc-500">
-                    {billingAddress?.city || ""} {billingAddress?.state || ""},
-                    {billingAddress?.country || ""}
-                  </p>
-                  <p className="mt-2 text-sm text-zinc-500 max-md:mt-2 max-sm:mt-0">
-                    {`T: ${billingAddress?.phone || ""}`}
-                  </p>
-                </div>
-              </div>
-              <div className="flex">
-                <p className="w-[184px] text-base font-normal text-black/60 dark:text-white/60">
-                  Shipping Address
-                </p>
-                <div className="block cursor-pointer rounded-xl p-2 max-sm:rounded-lg">
-                  <div className="flex flex-col">
-                    <p className="text-base font-medium">
-                      {`${shippingAddress?.firstName || ""} ${shippingAddress?.lastName || ""
-                        }`}
-                    </p>
-                    <p className="text-base font-medium text-zinc-500">
-                      {`${shippingAddress?.companyName || ""}`}
-                    </p>
-                  </div>
-                  <p className="mt-2 text-sm text-zinc-500 max-md:mt-2 max-sm:mt-0">
-                    {`${shippingAddress?.address || ""}, ${shippingAddress?.postcode || ""
-                      }`}
-                  </p>
-                  <p className="text-zinc-500">
-                    {shippingAddress?.city || ""} {shippingAddress?.state || ""},
-                    {shippingAddress?.country || ""}
-                  </p>
-                  <p className="mt-2 text-sm text-zinc-500 max-md:mt-2 max-sm:mt-0">
-                    {`T: ${shippingAddress?.phone || ""}`}
-                  </p>
-                </div>
-              </div>
-            </div>
-
-            <button
-              onClick={() => {
-                setIsOpen(false);
-              }}
-              className="cursor-pointer text-base font-normal text-black/[60%] underline dark:text-neutral-300"
-            >
-              Change
-            </button>
-          </div>
-          <div className="mt-4 flex sm:hidden items-start justify-between relative">
-            <div className="flex flex-col justify-between w-full">
-              <div className="flex justify-between justify-between  flex-1 wrap">
-                <p className="w-[184px] text-base font-normal text-black/60 dark:text-white/60">
-                  Billing Address
-                </p>
-                <div className="block cursor-pointer rounded-xl p-2 max-sm:rounded-lg">
-                  <div className="flex flex-col">
-                    <p className="text-base font-medium">
-                      {`${billingAddress?.firstName || ""} ${billingAddress?.lastName || ""
-                        }`}
-                    </p>
-                    <p className="text-base font-medium text-zinc-500">
-                      {`${billingAddress?.companyName || ""}`}
-                    </p>
-                  </div>
-                  <p className="mt-2 text-sm text-zinc-500 max-md:mt-2 max-sm:mt-0">
-                    {`${billingAddress?.address || ""}, ${billingAddress?.postcode || ""
-                      }`}
-                  </p>
-                  <p className="text-zinc-500">
-                    {billingAddress?.city || ""} {billingAddress?.state || ""},
-                    {billingAddress?.country || ""}
-                  </p>
-                  <p className="mt-2 text-sm text-zinc-500 max-md:mt-2 max-sm:mt-0">
-                    {`T: ${billingAddress?.phone || ""}`}
-                  </p>
-                </div>
-              </div>
-              <div className="flex justify-between justify-between  flex-1 wrap">
-                <p className="w-[184px] text-base font-normal text-black/60 dark:text-white/60">
-                  Shipping Address
-                </p>
-                <div className="block cursor-pointer rounded-xl p-2 max-sm:rounded-lg">
-                  <div className="flex flex-col">
-                    <p className="text-base font-medium">
-                      {`${shippingAddress?.firstName || ""} ${shippingAddress?.lastName || ""
-                        }`}
-                    </p>
-                    <p className="text-base font-medium text-zinc-500">
-                      {`${shippingAddress?.companyName || ""}`}
-                    </p>
-                  </div>
-                  <p className="mt-2 text-sm text-zinc-500 max-md:mt-2 max-sm:mt-0">
-                    {`${shippingAddress?.address || ""}, ${shippingAddress?.postcode || ""
-                      }`}
-                  </p>
-                  <p className="text-zinc-500">
-                    {shippingAddress?.city || ""} {shippingAddress?.state || ""},
-                    {shippingAddress?.country || ""}
-                  </p>
-                  <p className="mt-2 text-sm text-zinc-500 max-md:mt-2 max-sm:mt-0">
-                    {`T: ${shippingAddress?.phone || ""}`}
-                  </p>
-                </div>
-              </div>
-            </div>
-
-            <button
-              onClick={() => {
-                setIsOpen(false);
-              }}
-              className="cursor-pointer absolute right-0 text-base font-normal text-black/[60%] underline dark:text-neutral-300"
-              style={{ top: "-36px" }}
-            >
-              Change
-            </button>
-          </div>
-        </>
-      );
-    }
-
-    return (
-      <form className="my-5" onSubmit={handleSubmit(addGuestAddress)}>
-        <div className="my-7 grid grid-cols-6 gap-4">
-          <InputText
-            {...register("billing.firstName", {
-              required: "First name is required",
-              pattern: {
-                value: IS_VALID_INPUT,
-                message: "Invalid First Name",
-              },
-            })}
-            className="col-span-6 xxs:col-span-3 mb-4"
-            errorMsg={errors?.billing?.firstName?.message}
-            label="First Name *"
-            size="md"
-          />
-          <InputText
-            {...register("billing.lastName", {
-              required: "Last name is required",
-              pattern: {
-                value: IS_VALID_INPUT,
-                message: "Invalid Last Name",
-              },
-            })}
-            className="col-span-6 xxs:col-span-3 mb-4"
-            errorMsg={errors?.billing?.lastName?.message}
-            label="Last Name *"
-            size="md"
-          />
-          <InputText
-            {...register("billing.companyName", {
-              pattern: {
-                value: IS_VALID_INPUT,
-                message: "Invalid Company Name",
-              },
-            })}
-            className="col-span-6 mb-2"
-            errorMsg={errors?.billing?.companyName?.message}
-            label="Company Name"
-            size="md"
-          />
-          <InputText
-            {...register("billing.address", {
-              required: "Address field is required",
-              pattern: {
-                value: IS_VALID_ADDRESS,
-                message: "Invalid Address",
-              },
-            })}
-            className="col-span-6 mb-4"
-            errorMsg={errors?.billing?.address?.message}
-            label="Street Address *"
-            size="md"
-          />
-          <InputText
-            {...register("billing.city", {
-              required: "City field is required",
-              pattern: {
-                value: IS_VALID_INPUT,
-                message: "Invalid City",
-              },
-            })}
-            className="col-span-6 xxs:col-span-3 mb-4"
-            errorMsg={errors?.billing?.city?.message}
-            label="City *"
-            size="md"
-          />
-          <InputText
-            {...register("billing.postcode", {
-              required: "Postcode field is required",
-              pattern: {
-                value: IS_VALID_INPUT,
-                message: "Invalid Postcode",
-              },
-            })}
-            className="col-span-6 xxs:col-span-3"
-            errorMsg={errors?.billing?.postcode?.message}
-            label="Zip Code *"
-            size="md"
-          />
-          <InputText
-            {...register("billing.phone", {
-              required: "Phone field is required",
-              pattern: {
-                value: IS_VALID_PHONE,
-                message: "Enter Valid Phone Number",
-              },
-            })}
-            type="tel"
-            inputMode="tel"
-            autoComplete="tel"
-            className="col-span-6"
-            errorMsg={errors?.billing?.phone?.message}
-            label="Phone *"
-            size="md"
-          />
-          <CheckBox
-            className="col-span-6 mt-3"
-            defaultValue={watchUseForShipping}
-            id="useForShipping"
-            label="Billing address is same as shipping address"
-            {...register("useForShipping")}
-          />
-        </div>
-
-        {!watchUseForShipping && (
-          <div className="my-7 grid grid-cols-6 gap-4">
-            <InputText
-              {...register("shipping.firstName", {
-                required: "First name is required",
-                pattern: {
-                  value: IS_VALID_INPUT,
-                  message: "Invalid First Name",
-                },
-              })}
-              className="col-span-3 mb-4"
-              errorMsg={errors?.shipping?.firstName?.message}
-              label="First Name *"
-              size="md"
-            />
-            <InputText
-              {...register("shipping.lastName", {
-                required: "Last name is required",
-                pattern: {
-                  value: IS_VALID_INPUT,
-                  message: "Invalid Last Name",
-                },
-              })}
-              className="col-span-3 mb-4"
-              errorMsg={errors?.shipping?.lastName?.message}
-              label="Last Name *"
-              size="md"
-            />
-            <InputText
-              {...register("shipping.companyName", {
-                pattern: {
-                  value: IS_VALID_INPUT,
-                  message: "Invalid Company Name",
-                },
-              })}
-              className="col-span-6 mb-4"
-              errorMsg={errors?.shipping?.companyName?.message}
-              label="Company Name"
-              size="md"
-            />
-            <InputText
-              {...register("shipping.address", {
-                required: "Address field is required",
-                pattern: {
-                  value: IS_VALID_ADDRESS,
-                  message: "Invalid Address",
-                },
-              })}
-              className="col-span-6 mb-4"
-              errorMsg={errors?.shipping?.address?.message}
-              label="Street Address *"
-              size="md"
-            />
-            <InputText
-              {...register("shipping.city", {
-                required: "City field is required",
-                pattern: {
-                  value: IS_VALID_INPUT,
-                  message: "Invalid City",
-                },
-              })}
-              className="col-span-3 mb-4"
-              errorMsg={errors?.shipping?.city?.message}
-              label="City *"
-              size="md"
-            />
-            <InputText
-              {...register("shipping.postcode", {
-                required: "Postcode field is required",
-                pattern: {
-                  value: IS_VALID_INPUT,
-                  message: "Invalid Postcode",
-                },
-              })}
-              className="col-span-3"
-              errorMsg={errors?.shipping?.postcode?.message}
-              label="Zip Code *"
-              size="md"
-            />
-            <InputText
-              {...register("shipping.phone", {
-                required: "Phone field is required",
-                pattern: {
-                  value: IS_VALID_PHONE,
-                  message: "Enter Valid Phone Number",
-                },
-              })}
-              className="col-span-6"
-              errorMsg={errors?.shipping?.phone?.message}
-              label="Phone *"
-              size="md"
-            />
-          </div>
-        )}
-
-        <div className="justify-self-end">
-          <ProceedToCheckout buttonName="Next" pending={isLoadingToSave} />
-        </div>
-      </form>
-    );
-  };

src/components/checkout/stepper/ProceedToCheckout.tsx

@@ -1,73 +0,0 @@
-"use client";
-import LoadingDots from "@components/common/icons/LoadingDots";
-import clsx from "clsx";
-
-function SubmitButton({
-  availableForSale,
-  buttonName,
-  className,
-  pending,
-}: {
-  availableForSale: boolean;
-  buttonName: string;
-  className?: string;
-  pending: boolean;
-}) {
-  const buttonClasses =
-    "relative text-base w-fit cursor-pointer rounded-full px-8 py-3 font-bold border-white items-center justify-center bg-blue-600 tracking-wide text-white";
-  const disabledClasses = "cursor-wait opacity-60 hover:opacity-60";
-
-  if (!availableForSale) {
-    return (
-      <button 
-        type="button"
-        aria-disabled 
-        disabled
-        className={clsx(buttonClasses, disabledClasses)}
-      >
-        Processing...
-      </button>
-    );
-  }
-
-  return (
-    <button
-      type="submit"
-      disabled={pending}
-      aria-disabled={pending}
-      aria-label="Proceed to checkout"
-      className={clsx(
-        buttonClasses,
-        {
-          "hover:opacity-90": !pending,
-          [disabledClasses]: pending,
-        },
-        className,
-      )}
-    >
-      <div className="absolute left-0 ml-4">
-        {pending && <LoadingDots className="mb-3 bg-white" />}
-      </div>
-      {buttonName}
-    </button>
-  );
-}
-
-export function ProceedToCheckout({
-  buttonName,
-  className,
-  pending = false,
-}: {
-  buttonName: string;
-  className?: string;
-  pending: boolean;
-}) {
-  return (
-    <SubmitButton
-      availableForSale={!pending}
-      buttonName={buttonName}
-      className={className}
-      pending={pending}
-    />
-  );
-}

src/components/checkout/stepper/index.tsx

@@ -1,169 +0,0 @@
-import Link from "next/link";
-import { useMemo } from "react";
-import LogoIcon from "@components/common/icons/LogoIcon";
-import Email from "./Email";
-import { GuestAddAdressForm } from "./GuestAddAdressForm";
-import Shipping from "./shipping";
-import Payment from "./payment";
-import Review from "./review";
-
-
-
-const { SITE_NAME } = process.env;
-
-interface Step {
-  id: number;
-  key: string;
-  title: string;
-  href: string;
-  component: React.ReactNode;
-}
-
-interface CheckOutProps {
-  billingAddress?: any;
-  shippingAddress?: any;
-  currentStep: string;
-  selectedPayment?: any;
-  selectedPaymentTitle?: string;
-  selectedShippingRate?: any;
-  selectedShippingRateTitle?: string;
-}
-
-export default function Stepper(
-  {
-    billingAddress,
-    shippingAddress,
-    selectedShippingRate,
-    selectedShippingRateTitle,
-    selectedPayment,
-    selectedPaymentTitle,
-    currentStep,
-  }: CheckOutProps
-) {
-
-  const steps = useMemo<Step[]>(() => {
-    return [
-      {
-        id: 1,
-        key: "email",
-        title: "Email",
-        href: "/checkout",
-        component: <Email />,
-      },
-      {
-        id: 2,
-        key: "address",
-        title: "Address",
-        href: "/checkout",
-        component:
-          <GuestAddAdressForm
-            billingAddress={billingAddress}
-            shippingAddress={shippingAddress}
-            currentStep={currentStep}
-          />
-      },
-      {
-        id: 3,
-        key: "shipping",
-        title: "Shipping",
-        href: "/checkout?step=address",
-        component: <Shipping
-          selectedShippingRate={selectedShippingRate}
-          currentStep={currentStep}
-        />,
-      },
-      {
-        id: 4,
-        key: "payment",
-        title: "Payment",
-        href: "/checkout?step=shipping",
-        component: (
-          <Payment
-            selectedPayment={selectedPayment}
-            currentStep={currentStep}
-          />
-        ),
-      },
-      {
-        id: 5,
-        key: "review",
-        title: "Review",
-        href: "/checkout?step=payment",
-        component: (
-          <Review
-            billingAddress={billingAddress}
-            selectedPaymentTitle={selectedPaymentTitle}
-            selectedShippingRate={selectedShippingRate}
-            selectedShippingRateTitle={selectedShippingRateTitle}
-            shippingAddress={shippingAddress}
-          />
-        ),
-      },
-    ];
-  }, [
-    currentStep,
-    billingAddress,
-    shippingAddress,
-    selectedShippingRate,
-    selectedPayment,
-    selectedPaymentTitle,
-    selectedShippingRateTitle,
-  ]);
-
-  const currentStepIndex = steps.findIndex((s) => s.key === currentStep);
-
-  const StepItem = ({ step }: { step: Step }) => {
-    const isActive = step.key === currentStep;
-    const isCompleted = step.id <= (steps[currentStepIndex]?.id || 1);
-
-    return (
-      <div key={step.id} className="flex w-full flex-col">
-        <div className="flex items-center justify-between font-outfit">
-          <div className="flex items-center gap-3">
-            <div
-              className={`flex h-6 w-6 items-center justify-center rounded-full text-sm font-medium ${isCompleted
-                ? "bg-blue-600 text-white"
-                : "bg-gray-200 text-neutral-900"
-                }`}
-            >
-              {step.id}
-            </div>
-            <span
-              className={`text-lg font-medium max-md:text-base ${isActive
-                ? "font-medium text-neutral-900 dark:text-neutral-300"
-                : "text-neutral-900 dark:text-white"
-                }`}
-            >
-              {step.title}
-            </span>
-          </div>
-        </div>
-
-        {isCompleted && <section className="relative">{step.component}</section>}
-      </div>
-    );
-  };
-
-  return (
-    <div className="mx-auto w-full">
-      <header className="pb-6 sm:py-6">
-        <Link
-          aria-label={SITE_NAME}
-          className="flex items-center gap-2 text-black dark:text-white md:pt-1 hidden lg:block"
-          href="/"
-        >
-          <LogoIcon />
-        </Link>
-        <h1 className="text-xl px-2 font-semibold block lg:hidden">Checkout</h1>
-      </header>
-
-      <div className="scrollbar-thin scrollbar-track-transparent scrollbar-thumb-gray-500 dark:scrollbar-thumb-neutral-300 h-[calc(100dvh-300px)] overflow-y-auto lg:h-[calc(100dvh-124px)]">
-        <div className="flex h-full flex-col gap-y-8 pl-2 pr-6 sm:px-3 sm:pr-10">
-          {steps.map((step) => (
-            <StepItem key={step.id} step={step} />
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}

src/components/checkout/stepper/payment/PaymentMethod.tsx

@@ -1,222 +0,0 @@
-"use client";
-
-import { Controller, FieldValues, useForm } from "react-hook-form";
-import { cn } from "@heroui/theme";
-import { Radio, RadioGroup } from "@heroui/radio";
-import { useState } from "react";
-import { useCustomToast } from "@utils/hooks/useToast";
-import { useCheckout } from "@utils/hooks/useCheckout";
-import { ProceedToCheckout } from "../ProceedToCheckout";
-import { CustomRadioProps } from "@components/checkout/type";
-import { useDispatch } from "react-redux";
-import { updateCart } from "@/store/slices/cart-slice";
-
-export default function PaymentMethod({
-  selectedPayment,
-  methods,
-  currentStep,
-}: {
-  selectedPayment?: string;
-  methods: any;
-  currentStep?: string;
-}) {
-  const { showToast } = useCustomToast();
-  const { isPaymentLoading, saveCheckoutPayment } = useCheckout();
-  const [isOpen, setIsOpen] = useState(currentStep !== "payment");
-
-  const [prevValues, setPrevValues] = useState({
-    currentStep,
-    selectedPayment,
-  });
-
-  if (
-    currentStep !== prevValues.currentStep ||
-    selectedPayment !== prevValues.selectedPayment
-  ) {
-    setPrevValues({ currentStep, selectedPayment });
-    if (currentStep === "payment") {
-      setIsOpen(false);
-    } else if (selectedPayment) {
-      setIsOpen(true);
-    }
-  }
-
-  const { handleSubmit, control } = useForm({
-    mode: "onSubmit",
-    defaultValues: {
-      method: selectedPayment ?? "",
-    },
-  });
-
-  const selectedMethodLabelPrior = methods?.find(
-    (method: any) => method?.method === selectedPayment,
-  )?.title;
-
-  const dispatch = useDispatch();
-  const onSubmit = async (data: FieldValues) => {
-    if (!data?.method) {
-      showToast("Please Choose the Payment Method", "warning");
-      return;
-    }
-    try {
-      const selectedMethod = methods?.find(
-        (m: any) => m?.method === data?.method,
-      );
-      if (selectedMethod) {
-        dispatch(
-          updateCart({
-            paymentMethod: selectedMethod?.method || "",
-            paymentMethodTitle: selectedMethod?.title || "",
-          }),
-        );
-      }
-      await saveCheckoutPayment(data.method);
-    } catch {
-      showToast("Failed to save payment method. Please try again.");
-    }
-  };
-
-  return (
-    <>
-      {selectedPayment ? (
-        isOpen ? (
-          <>
-            <div className="mt-4  justify-between hidden sm:flex ">
-              <div className="flex">
-                <p className="w-auto text-base font-normal text-black/60 dark:text-white/60 sm:w-[192px]">
-                  Payment Method
-                </p>
-                <p className="text-base font-normal">
-                  {selectedMethodLabelPrior as string}
-                </p>
-              </div>
-
-              <button
-                onClick={() => {
-                  setIsOpen(false);
-                }}
-                className="cursor-pointer text-base font-normal text-black/60 underline dark:text-neutral-300"
-              >
-                Change
-              </button>
-            </div>
-            <div className="mt-4 flex sm:hidden justify-between relative">
-              <div className="flex justify-between justify-between  flex-1 wrap">
-                <p className="w-auto text-base font-normal text-black/60 dark:text-white/60 sm:w-[192px]">
-                  Payment Method
-                </p>
-                <p className="text-base font-normal">
-                  {selectedMethodLabelPrior as string}
-                </p>
-              </div>
-
-              <button
-                onClick={() => {
-                  setIsOpen(false);
-                }}
-                className="cursor-pointer absolute right-0 text-base font-normal text-black/60 underline dark:text-neutral-300"
-                style={{ top: "-36px" }}
-              >
-                Change
-              </button>
-            </div>
-          </>
-        ) : (
-          <div className="mt-6">
-            <form onSubmit={handleSubmit(onSubmit)}>
-              <Controller
-                control={control}
-                name="method"
-                render={({ field }) => (
-                  <RadioGroup
-                    {...field}
-                    label=""
-                    value={field.value ?? ""}
-                    onValueChange={field.onChange}
-                  >
-                    {methods?.map((method: any) => (
-                      <CustomRadio
-                        key={method?.method}
-                        className="my-1 border border-solid border-neutral-300 dark:border-neutral-500"
-                        description={method?.description}
-                        value={method?.method}
-                      >
-                        <span className="text-neutral-700 dark:text-white">
-                          {method?.title}
-                        </span>
-                      </CustomRadio>
-                    ))}
-                  </RadioGroup>
-                )}
-              />
-
-              <div className="my-6 justify-self-end">
-                <ProceedToCheckout
-                  buttonName="Pay Now"
-                  pending={isPaymentLoading}
-                />
-              </div>
-            </form>
-          </div>
-        )
-      ) : (
-        <div className="mt-6">
-          <form onSubmit={handleSubmit(onSubmit)}>
-            <Controller
-              control={control}
-              name="method"
-              render={({ field }) => (
-                <RadioGroup
-                  {...field}
-                  label=""
-                  value={field.value ?? ""}
-                  onValueChange={field.onChange}
-                >
-                  {methods?.map((method: any) => (
-                    <CustomRadio
-                      key={method?.method}
-                      className="my-1 border border-solid border-neutral-300 dark:border-neutral-500"
-                      description={method?.description}
-                      value={method?.method}
-                    >
-                      <span className="text-neutral-700 dark:text-white">
-                        {method?.title}
-                      </span>
-                    </CustomRadio>
-                  ))}
-                </RadioGroup>
-              )}
-            />
-
-            <div className="my-6 justify-self-end">
-              <ProceedToCheckout
-                buttonName="Pay Now"
-                pending={isPaymentLoading}
-              />
-            </div>
-          </form>
-        </div>
-      )}
-    </>
-  );
-}
-
-const CustomRadio = (props: CustomRadioProps) => {
-  const { children, ...otherProps } = props;
-
-  return (
-    <Radio
-      {...otherProps}
-      classNames={{
-        base: cn(
-          "inline-flex m-0 bg-transparent hover:bg-transparent items-center",
-          "flex-row items-baseline max-w-full cursor-pointer rounded-lg gap-4 p-4 border-2 border-transparent",
-          "data-[selected=true]:border-primary",
-        ),
-        hiddenInput: "peer absolute h-0 w-0 opacity-0",
-      }}
-    >
-      {children}
-    </Radio>
-  );
-};

src/components/checkout/stepper/payment/index.tsx

@@ -1,37 +0,0 @@
-"use client";
-
-import { CartCheckoutPageSkeleton } from "@/components/common/skeleton/CheckoutSkeleton";
-import { useQuery } from "@apollo/client/react";
-import PaymentMethod from "./PaymentMethod";
-import { FC } from "react";
-import { GET_CHECKOUT_PAYMENT_METHODS } from "@/graphql";
-import { getCartToken } from "@/utils/getCartToken";
-import { CheckoutPaymentMethodsData } from "@/types/checkout/type";
-
-const Payment: FC<{
-  selectedPayment?: {
-    method: string;
-    methodTitle?: string;
-  };
-  currentStep?: string;
-}> = ({ selectedPayment, currentStep }) => {
-  const token = getCartToken();
-  const { data, loading: isLoading } = useQuery<CheckoutPaymentMethodsData>(GET_CHECKOUT_PAYMENT_METHODS, {
-    variables: { token: token || "" },
-    skip: !token,
-    fetchPolicy: "cache-first",
-    nextFetchPolicy: "cache-first",
-  });
-
-  if (isLoading && !data) return <CartCheckoutPageSkeleton />;
-
-  return (
-    <PaymentMethod
-      methods={data?.collectionPaymentMethods}
-      selectedPayment={selectedPayment as any}
-      currentStep={currentStep}
-    />
-  );
-};
-
-export default Payment;

src/components/checkout/stepper/review/OrderReview.tsx

@@ -1,101 +0,0 @@
-"use client";
-import { useForm } from "react-hook-form";
-import {
-  AddressDataTypes,
-} from "@/types/types";
-import { isObject } from "@/utils/type-guards";
-import { useCheckout } from "@utils/hooks/useCheckout";
-import { ProceedToCheckout } from "../ProceedToCheckout";
-export default function OrderReview({
-  selectedPaymentTitle,
-  shippingAddress,
-  billingAddress,
-  selectedShipping : _selectedShipping,
-  selectedShippingRateTitle,
-}: {
-  selectedPaymentTitle?: string;
-  shippingAddress?: AddressDataTypes;
-  billingAddress?: AddressDataTypes;
-  selectedShipping?: string;
-  selectedShippingRateTitle?: string;
-}) {
-  const { isPlaceOrder, savePlaceOrder } = useCheckout();
-  const { handleSubmit } = useForm();
-  const onSubmit = () => {
-    savePlaceOrder();
-  };
-
-  return (
-    <div className="mt-4 flex-col mb-20 sm:mb-0">
-      <div className="relative">
-        {isObject(shippingAddress) && (
-          <table className="w-full text-left text-sm text-gray-500 dark:text-gray-400">
-            <tbody>
-              <tr className="">
-                <td className="py-4">Contact</td>
-                <th
-                  className="break-all px-6 py-4 font-medium text-gray-900 dark:text-white"
-                  scope="row"
-                >
-                  {shippingAddress?.email}
-                </th>
-              </tr>
-              <tr className="">
-                <td className="py-4">Billing to</td>
-                <th
-                  className="break-all px-6 py-4 font-medium text-gray-900 dark:text-white"
-                  scope="row"
-                >
-                  {billingAddress?.firstName}, {billingAddress?.lastName},{" "}
-                  {billingAddress?.address}, {billingAddress?.city},{" "}
-                  {billingAddress?.state}, {billingAddress?.postcode},{" "}
-                  {billingAddress?.country}
-                </th>
-              </tr>
-              <tr className="">
-                <td className="py-4">Ship to</td>
-                <th
-                  className="break-all px-6 py-4 font-medium text-gray-900 dark:text-white"
-                  scope="row"
-                >
-                  {shippingAddress?.firstName}, {shippingAddress?.lastName},{" "}
-                  {shippingAddress?.address}, {shippingAddress?.city},{" "}
-                  {shippingAddress?.state}, {shippingAddress?.postcode},{" "}
-                  {shippingAddress?.country}
-                </th>
-              </tr>
-              <tr className="">
-                <td className="py-4">Method</td>
-                <th
-                  className="break-all px-6 py-4 font-medium text-gray-900 dark:text-white"
-                  scope="row"
-                >
-                  {selectedShippingRateTitle}
-                </th>
-              </tr>
-              <tr className="">
-                <td className="py-4">Payment</td>
-                <th
-                  className="break-all px-6 py-4 font-medium text-gray-900 dark:text-white"
-                  scope="row"
-                >
-                  {selectedPaymentTitle}
-                </th>
-              </tr>
-            </tbody>
-          </table>
-        )}
-      </div>
-      <div className="flex flex-col gap-6">
-        <form onSubmit={handleSubmit(onSubmit)}>
-          <div className="justify-self-end">
-            <ProceedToCheckout
-              buttonName="Place Order"
-              pending={isPlaceOrder}
-            />
-          </div>
-        </form>
-      </div>
-    </div>
-  );
-}

src/components/checkout/stepper/review/index.tsx

@@ -1,29 +0,0 @@
-import { FC } from "react";
-import { AddressDataTypes } from "@/types/types";
-import OrderReview from "./OrderReview";
-
-export const Review: FC<{
-  selectedPaymentTitle?: string;
-  shippingAddress?: AddressDataTypes;
-  billingAddress?: AddressDataTypes;
-  selectedShippingRate?: string;
-  selectedShippingRateTitle?: string;
-}> = ({
-  selectedPaymentTitle,
-  shippingAddress,
-  billingAddress,
-  selectedShippingRate,
-  selectedShippingRateTitle,
-}) => {
-  return (
-    <OrderReview
-      billingAddress={billingAddress}
-      selectedPaymentTitle={selectedPaymentTitle}
-      selectedShipping={selectedShippingRate}
-      selectedShippingRateTitle={selectedShippingRateTitle}
-      shippingAddress={shippingAddress}
-    />
-  );
-};
-
-export default Review;

src/components/checkout/stepper/shipping/ShippingMethod.tsx

@@ -1,219 +0,0 @@
-"use client";
-
-import { FieldValues, useForm, Controller } from "react-hook-form";
-import { cn } from "@heroui/theme";
-import { Radio, RadioGroup } from "@heroui/radio";
-import { useState } from "react";
-import { ProceedToCheckout } from "../ProceedToCheckout";
-import { useCustomToast } from "@utils/hooks/useToast";
-import { useCheckout } from "@utils/hooks/useCheckout";
-import { CustomRadioProps, ShippingMethodType } from "@components/checkout/type";
-import { useDispatch } from "react-redux";
-import { updateCart } from "@/store/slices/cart-slice";
-
-
-export default function ShippingMethod({
-  shippingMethod,
-  selectedShippingRate,
-  currentStep
-}: {
-  shippingMethod?: ShippingMethodType[];
-  selectedShippingRate?: any;
-  methodDesc?: string;
-  currentStep?: string;
-}) {
-  const { isSaving, saveCheckoutShipping } = useCheckout();
-  const { showToast } = useCustomToast();
-  const [isOpen, setIsOpen] = useState(currentStep !== "shipping");
-
-  const [prevValues, setPrevValues] = useState({ currentStep, selectedShippingRate });
-
-  if (currentStep !== prevValues.currentStep || selectedShippingRate !== prevValues.selectedShippingRate) {
-    setPrevValues({ currentStep, selectedShippingRate });
-    if (currentStep === "shipping") {
-      setIsOpen(false);
-    } else if (selectedShippingRate) {
-      setIsOpen(true);
-    }
-  }
-  const { control, handleSubmit } = useForm({
-    mode: "onSubmit",
-    defaultValues: {
-      method: selectedShippingRate ?? "",
-    },
-  });
-  const selectedMethodTitle = shippingMethod?.find(
-    (method) => method.method === selectedShippingRate
-  )?.label;
-  const selectedMethodPrice = shippingMethod?.find(
-    (method) => method.method === selectedShippingRate
-  )?.price;
-
-  const dispatch = useDispatch();
-  const onSubmit = async (data: FieldValues) => {
-    if (!data?.method) {
-      showToast("Please Choose the Shipping Method", "warning");
-      return;
-    }
-    try {
-      const selectedRate = shippingMethod?.find(m => m.method === data.method);
-      if (selectedRate) {
-        dispatch(updateCart({
-          // shippingMethod: selectedRate?.method || "",
-          selectedShippingRate: selectedRate?.method || "",
-          selectedShippingRateTitle: selectedRate?.label || "",
-        }));
-      }
-      await saveCheckoutShipping(data?.method);
-    } catch {
-      showToast("Failed to save shipping method. Please try again.");
-    }
-  };
-
-
-  return (
-    <div>
-      {(selectedShippingRate) ? (
-        isOpen ? (
-          <>
-            <div className="mt-4  justify-between hidden sm:flex">
-              <div className="flex">
-                <p className="w-auto text-base font-normal text-black/60 dark:text-white/60 sm:w-[192px]">
-                  Shipping Method
-                </p>
-                <p className="text-base font-normal">{selectedMethodTitle} (${selectedMethodPrice})</p>
-              </div>
-              <div className="flex">
-                <button
-                  onClick={() => {
-                    setIsOpen(!isOpen);
-                  }}
-                  className="cursor-pointer text-base font-normal text-black/[60%] underline dark:text-neutral-300"
-                >
-                  Change
-                </button>
-              </div>
-            </div>
-
-            <div className="mt-4 block sm:hidden flex flex-col justify-between sm:flex-row relative  ">
-              <div className="flex justify-between  flex-1 wrap">
-                <p className="w-auto text-base font-normal text-black/60 dark:text-white/60 sm:w-[192px]">
-                  Shipping Method
-                </p>
-                <p className="text-base font-normal">{selectedMethodTitle} (${selectedMethodPrice})</p>
-              </div>
-
-              <button
-                onClick={() => {
-                  setIsOpen(!isOpen);
-                }}
-                className="cursor-pointer absolute right-0  text-base font-normal text-black/[60%] underline dark:text-neutral-300"
-                style={{ top: "-36px" }}
-              >
-                Change
-              </button>
-            </div>
-          </>
-
-        ) : (
-          <form className="mt-6" onSubmit={handleSubmit(onSubmit)}>
-            <div className="flex flex-col gap-5">
-              {Array.isArray(shippingMethod) && (
-                <Controller
-                  control={control}
-                  name="method"
-                  render={({ field }) => (
-                    <RadioGroup
-                      {...field}
-                      label=""
-                      value={field.value ?? ""}
-                      onValueChange={field.onChange}
-                    >
-                      {shippingMethod.map((method: any) => (
-                        <CustomRadio
-                          key={method?.code}
-                          className="inset-0 my-1 border border-solid border-neutral-300 dark:border-neutral-500"
-                          description={"$" + method?.price}
-                          value={method?.method}
-                        >
-                          <span className="text-neutral-700 dark:text-white">
-                            {method?.label}
-                          </span>
-                        </CustomRadio>
-                      ))}
-                    </RadioGroup>
-                  )}
-                />
-              )}
-            </div>
-
-            <div className="my-6 justify-self-end">
-              <ProceedToCheckout buttonName="Next" pending={isSaving} />
-            </div>
-          </form>
-        )
-      ) : (
-        <form className="mt-6" onSubmit={handleSubmit(onSubmit)}>
-          <div className="flex flex-col gap-5">
-            {Array.isArray(shippingMethod) && (
-              <Controller
-                control={control}
-                name="method"
-                render={({ field }) => {
-                  return (
-                    <RadioGroup
-                      {...field}
-                      label=""
-                      value={field.value ?? ""}
-                      onValueChange={(value) => {
-                        field.onChange(value);
-                      }}
-                    >
-                      {shippingMethod.map((method : any) => (
-                        <CustomRadio
-                          key={method?.code}
-                          className="inset-0 my-1 border border-solid border-neutral-300 dark:border-neutral-500"
-                          description={"$" + method?.price}
-                          value={method?.method}
-                        >
-                          <span className="text-neutral-700 dark:text-white">
-                            {method?.label}
-                          </span>
-                        </CustomRadio>
-                      ))}
-                    </RadioGroup>
-                  )
-                }}
-              />
-            )}
-          </div>
-
-          <div className="my-6 justify-self-end">
-            <ProceedToCheckout buttonName="Next" pending={isSaving} />
-          </div>
-        </form>
-      )}
-    </div>
-  );
-}
-
-const CustomRadio = (props: CustomRadioProps) => {
-  const { children, className, ...otherProps } = props;
-
-  return (
-    <Radio
-      {...otherProps}
-      classNames={{
-        base: cn(
-          "inline-flex m-0 bg-transparent hover:bg-transparent items-center",
-          "flex-row items-baseline max-w-full cursor-pointer rounded-lg gap-4 p-4 border-2 border-transparent",
-          "data-[selected=true]:border-primary",
-          className
-        ),
-        hiddenInput: "peer absolute h-0 w-0 opacity-0",
-      }}
-    >
-      {children}
-    </Radio>
-  );
-};

src/components/checkout/stepper/shipping/index.tsx

@@ -1,37 +0,0 @@
-"use client";
-
-import { CartCheckoutPageSkeleton } from "@/components/common/skeleton/CheckoutSkeleton";
-import { useQuery } from "@apollo/client/react";
-import ShippingMethod from "./ShippingMethod";
-import { FC } from "react";
-import { SelectedShippingRateType, GetCheckoutShippingRatesData } from "@/types/checkout/type";
-import { GET_CHECKOUT_SHIPPING_RATES } from "@/graphql";
-import { getCartToken } from "@/utils/getCartToken";
-
-const Shipping: FC<{
-  selectedShippingRate?: SelectedShippingRateType;
-  currentStep?: string;
-}> = ({ selectedShippingRate, currentStep }) => {
-  const token = getCartToken();
-
-  const { data, loading: isLoading } = useQuery<GetCheckoutShippingRatesData>(GET_CHECKOUT_SHIPPING_RATES, {
-    variables: { token: token || "" },
-    skip: !token,
-    fetchPolicy: "cache-first",
-    nextFetchPolicy: "cache-first",
-  });
-
-  if (isLoading && !data) {
-    return <CartCheckoutPageSkeleton />;
-  }
-  return (
-    <ShippingMethod
-      shippingMethod={data?.collectionShippingRates}
-      selectedShippingRate={selectedShippingRate}
-      methodDesc={selectedShippingRate?.methodDescription}
-      currentStep={currentStep}
-    />
-  );
-};
-
-export default Shipping;

src/components/checkout/success/EmptyCart.tsx

@@ -1,73 +0,0 @@
-"use client";
-import { clearCart } from "@/store/slices/cart-slice";
-import clsx from "clsx";
-import { useRouter } from "next/navigation";
-import { useEffect } from "react";
-import CheckSign from "@components/common/icons/CheckSign";
-import { useFormStatus } from "react-dom";
-import { useDispatch } from "react-redux";
-import LoadingDots from "@components/common/icons/LoadingDots";
-import dynamic from "next/dynamic";
-
-const OrderDetail = dynamic(() => import("@/components/cart/OrderDetail"), {
-  loading: () => (
-    <div className="max-w-sm animate-pulse" role="status">
-      <div className="mb-4 h-8 w-48 rounded-full bg-gray-200 dark:bg-gray-700" />
-      <span className="sr-only">Loading...</span>
-    </div>
-  )
-});
-const EmptyCartPage = () => {
-  return (
-    <div className="flex min-h-[calc(100vh-450px)] px-4 items-center">
-      <div className="flex w-full flex-col items-center justify-center overflow-hidden">
-        <CheckSign className="sm:h-38 sm:w-38 h-28 w-28" />
-        <OrderDetail />
-        <ClearCartButton buttonName="Continue shopping" redirect="/" />
-      </div>
-    </div>
-  );
-};
-
-export default EmptyCartPage;
-
-function SubmitButton({
-  buttonName,
-  redirectNav,
-}: {
-  buttonName: string;
-  redirectNav: string;
-}) {
-  const router = useRouter();
-  const dispatch = useDispatch();
-  const { pending } = useFormStatus();
-  useEffect(() => {
-    dispatch(clearCart());
-  }, []);
-  return (
-    <button
-      className={clsx(
-        "sm:my-3 my-0 w-auto items-center cursor-pointer justify-center rounded-full border-white bg-blue-600 px-12 py-4 text-sm font-bold tracking-wide text-white",
-        pending ? "cursor-wait" : "cursor-pointer"
-      )}
-      disabled={pending}
-      type="submit"
-      onClick={() => {
-        dispatch(clearCart());
-        router.replace(redirectNav);
-      }}
-    >
-      {pending ? <LoadingDots className="bg-white" /> : buttonName}
-    </button>
-  );
-}
-
-export function ClearCartButton({
-  buttonName,
-  redirect,
-}: {
-  buttonName: string;
-  redirect: string;
-}) {
-  return <SubmitButton buttonName={buttonName} redirectNav={redirect} />;
-}

src/components/checkout/type.ts

@@ -1,24 +0,0 @@
-import { Radio } from "@heroui/radio";
-import { FieldErrors, UseFormRegister } from "react-hook-form";
-
-export type CustomRadioProps = {
-  children: React.ReactNode;
-  description?: string;
-  value: string;
-} & typeof Radio.defaultProps;
-
-export type ShippingMethodType = {
-  method?: string;
-  label?: string;
-  price?: number | string;
-  code?: string;
-};
-
-export type EmailFormValues = { email: string };
-
-export type EmailFormProps = {
-  register: UseFormRegister<EmailFormValues>;
-  errors: FieldErrors<EmailFormValues>;
-  isSubmitting: boolean;
-  isGuest: boolean;
-};

src/utils/hooks/getAddress.ts

@@ -1,55 +0,0 @@
-"use client"
-
-import { CheckoutAddressNode, MappedCheckoutAddress } from "@/types/checkout/type";
-import { useAddress } from "./useAddress";
-import { useEffect } from "react";
-import { AddressDataTypes } from "@/types/types";
-
-export const useAddressesFromApi = (): {
-  billingAddress: MappedCheckoutAddress | null;
-  shippingAddress: MappedCheckoutAddress | null;
-  getAddresses: () => Promise<void>;
-} => {
-  const { addresses: data, getAddresses } = useAddress();
-  
-  const address = data;
-
-
-
-  useEffect(() => {
-    if (!address.length) {
-      getAddresses();
-    }
-  }, [address.length, getAddresses]);
-
-  if (!Array.isArray(address))
-    return { billingAddress: null, shippingAddress: null, getAddresses };
-
-  const billingNode = address.find((a: CheckoutAddressNode) => a?.addressType === "cart_billing");
-
-  const shippingNode = address.find((a: CheckoutAddressNode) => a?.addressType === "cart_shipping");
-
-  const mapNode = (
-    node?: CheckoutAddressNode | AddressDataTypes
-  ): MappedCheckoutAddress | null =>
-    node
-      ? {
-        firstName: node.firstName,
-        lastName: node.lastName,
-        companyName: node.companyName,
-        address: node.address,
-        city: node.city,
-        state: node.state,
-        country: node.country,
-        postcode: node.postcode,
-        email: node.email,
-        phone: node.phone,
-      }
-      : null;
-
-  return {
-    billingAddress:  mapNode(billingNode),
-    shippingAddress: mapNode(shippingNode),
-    getAddresses,
-  };
-};

src/utils/hooks/useAddress.ts

@@ -1,34 +0,0 @@
-"use client";
-
-import { GET_CHECKOUT_ADDRESSES } from "@/graphql";
-import { CheckoutAddressNode, GetCheckoutAddressesData } from "@/types/checkout/type";
-import { useLazyQuery } from "@apollo/client/react";
-import { useCallback } from "react";
-
-export const useAddress = () => {
-  const [fetchAddresses, { data, loading: isLoading, refetch }] = useLazyQuery<GetCheckoutAddressesData>(
-    GET_CHECKOUT_ADDRESSES,
-    {
-      fetchPolicy: "cache-first",
-      notifyOnNetworkStatusChange: true,
-    }
-  );
-
-  const getAddresses = useCallback(async () => {
-    try {
-      await fetchAddresses();
-    } catch (error) {
-      console.error("Error fetching addresses:", error);
-    }
-  }, [fetchAddresses]);
-
-  return {
-    addresses:
-      data?.collectionGetCheckoutAddresses?.edges?.map(
-        (edge: { node: CheckoutAddressNode }) => edge.node
-      ) || [],
-    isLoading,
-    refetch,
-    getAddresses,
-  };
-};