OwlCyberSecurity - MANAGER

Edit File: CheckoutCharsooq.tsx

"use client";

import { useRouter } from "next/navigation";
import React, {
  FormEvent,
  useEffect,
  useRef,
  useState,
  useTransition,
} from "react";
import { useDispatch, useSelector } from "react-redux";
import useDetectMobile from "../components/hooks/DetectMobile";
import {
  charsooqSelectItems,
  charsooqSelectTotalPrice,
  removeAllItemsFromCharsooq,
  removeFromCharsooqBasket,
  updateCharsooqCart,
} from "@/redux/features/charsooqBasketSlice";
import {
  activity,
  userAddressAccess,
  userInfoAccess,
} from "@/redux/features/auth-slice";
import { toast } from "sonner";
import { toast as hotToast } from "react-hot-toast";
import Link from "next/link";
import ChooseAddressForBasket from "./ChooseAddressForBasket";
import CharsooqBasketItems from "./charsooq/CharsooqBasketItems";
import Modal from "../components/Modal";
import LoginForm from "../login/LoginForm";
import { AllUserInfoType } from "@/typing";
import { Dialog, DialogContent, DialogHeader } from "@/components/ui/dialog";
import { useDebouncedCallback } from "use-debounce";
import { ScrollArea } from "@/components/ui/scroll-area";
import { DirectionProvider } from "@radix-ui/react-direction";

function CheckoutCharsooq() {
  const inputRef = useRef<any>();
  const addressRef = useRef<any>();
  let popupRef = useRef<any>(null);
  const dispatch = useDispatch();
  const router = useRouter();
  const isMobile = useDetectMobile();

const charsooqCart = useSelector(charsooqSelectItems);
  const totalPrice = useSelector(charsooqSelectTotalPrice);
  // const totalItemprice = useSelector(charsooqSelectTotalIetmPrice);
  // const totalShippingCost = useSelector(charsooqSelectTotalShoppingCost);

const userActivity = useSelector(activity);
  const userInfoRedux: any = useSelector<AllUserInfoType>(userInfoAccess);
  const userAddress = useSelector(userAddressAccess);

const [isPending, startTransition] = useTransition();
  const [showPopup, setShowPopup] = useState<boolean>(false);
  const [loadingButton, setLoadingButton] = useState(false);
  const [countLoading, setCountLoading] = useState(false);
  const [showAddress, setShowAddress] = useState(false);
  const [chooseAddress, setChooseAddress] = useState<any>();
  const [openDialog, setOpenDialog] = useState(false);
  const [userMobile, setUserMobile] = useState("");
  const [fillUserAddress, setFillUserAddress] = useState([]);
  const [userId, setUserId] = useState<Number | any>();
  const [openSuggest, setOpenSuggest] = useState(false);
  const [inputLoading, setInputLoading] = useState(false);
  const [suggestionData, setSuggestionData] = useState([]);
  const [chooseAdminAddressId, setChooseAdminAdressId] = useState("");
  const [chooseAdminAddress, setChooseAdminAdress] = useState("");

const [showAdminAddress, setShowAdminAdress] = useState(false);

const [descInput, setDescInput] = useState("");

const [discountInput, setDiscountInput] = useState("");
  const [showDiscountInput, setShowDiscountInput] = useState(false);
  const [discountCodeError, setDiscountCodeError] = useState(false);
  const [discountCheck, setDiscountCheck] = useState(false);

useEffect(() => {
    let handler: any = (e: FormEvent<HTMLDivElement>) => {
      if (inputRef?.current && !inputRef.current.contains(e.target)) {
        setOpenSuggest(false);
      }
    };
    document.addEventListener("mousedown", handler);
    return () => {
      document.removeEventListener("mousedown", handler);
    };
  }, [inputRef, openSuggest]);

useEffect(() => {
    let handler: any = (e: FormEvent<HTMLDivElement>) => {
      if (addressRef?.current && !addressRef.current.contains(e.target)) {
        setShowAdminAdress(false);
      }
    };
    document.addEventListener("mousedown", handler);
    return () => {
      document.removeEventListener("mousedown", handler);
    };
  }, [addressRef, showAdminAddress]);

const searchUsers = (e: React.ChangeEvent<HTMLInputElement>) => {
    setUserMobile(e.target.value);
    setOpenSuggest(true);
    setInputLoading(true);
    handleSearchUsers(e.target.value);
  };

function sendBasketFunction(isAdmin: boolean) {
    setLoadingButton(true);
    const token = localStorage.getItem("token");
    var myHeaders = new Headers();
    myHeaders.append("Accept", "application/json");
    myHeaders.append("Authorization", `Bearer ${token}`);

var formdata = new FormData();
    formdata.append(
      "address_id",
      isAdmin ? chooseAdminAddressId : chooseAddress
    );
    formdata.append("description", descInput);
    if (isAdmin) {
      formdata.append("phone_number", userMobile);
      // formdata.append("userAddress", fillUserAddress);
      formdata.append("user_id", userId);
    }
    // formdata.append("totalprice", totalPrice);

for (let i = 0; i < charsooqCart.length; i++) {
      // formdata.append(`cart[${i}][id]`, charsooqCart[i].id);
      formdata.append(`cart[${i}][slug]`, charsooqCart[i].slug);
      formdata.append(`cart[${i}][count]`, charsooqCart[i].count);
      formdata.append(`cart[${i}][link]`, charsooqCart[i].link);
      formdata.append(`cart[${i}][name]`, charsooqCart[i].name);
      formdata.append(`cart[${i}][cost]`, charsooqCart[i].cost);
      formdata.append(`cart[${i}][firstweight]`, charsooqCart[i].weight);
      formdata.append(
        `cart[${i}][description]`,
        `${charsooqCart[i].size ? `سایز ${charsooqCart[i].size}, ` : ""}${
          charsooqCart[i].color ? `رنگ ${charsooqCart[i].color}, ` : ""
        }${charsooqCart[i].description}`
      );
      formdata.append(`cart[${i}][image]`, charsooqCart[i].image);
      formdata.append(
        `cart[${i}][singleitemfullprice]`,
        charsooqCart[i].singleitemfullprice
      );
    }

var requestOptions = {
      method: "POST",
      headers: myHeaders,
      body: formdata,
    };

fetch(
      `${process.env.NEXT_PUBLIC_API_ADDRESS}store-products-offer`,
      requestOptions
    )
      .then((response) => response.json())
      .then((result) => {
        // console.log(result);
        // console.log(charsooqCart);
        if (result.status === 200) {
          dispatch(removeAllItemsFromCharsooq([]));
          if (!isAdmin) {
            router.push(`/checkout/${result.data.code}`);
          }
          if (isAdmin) {
            toast.success(
              `سفارش مشتری با شماره سفارش ${result.data.code} ثبت شد.`
            );
          }
        }
        if (result.status === 401) {
          hotToast.custom((t) => (
            <div
              className={`${
                t.visible ? "animate-enter" : "animate-leave"
              } max-w-md w-full bg-white shadow-lg rounded-lg pointer-events-auto flex ring-1 ring-black ring-opacity-5`}
            >
              <div className="flex-1 w-0 p-4">
                <div className="flex items-start">
                  <div className="flex-shrink-0 pt-0.5">
                    <img
                      className="h-10 w-10 rounded-full"
                      src="/assets/images/icons/logo2.png"
                      alt=""
                    />
                  </div>
                  <div className="ml-3 flex-1">
                    <p className="text-sm font-IRANSansBold">کاربر گرامی!</p>
                    <p className="mt-1 text-sm">{result.message}</p>
                  </div>
                </div>
              </div>
              <div className="flex border-l border-gray-200">
                <Link
                  href="/dashboard/profile?callbackRoute=checkout"
                  onClick={() => {
                    toast.dismiss(t.id);
                  }}
                  className="text-sm text-[var(--base-blue)] font-IRANSansBold underline ml-4 flex items-center justify-center"
                >
                  برو به پروفایل
                </Link>
              </div>
            </div>
          ));
        }
        if (result.status === 422) {
          toast.error(result.message);
        }
        if (result.status === 403) {
          toast.error(result.message);
          location.reload();
        }
        if (result.status === 404) {
          toast.error(result.message);
        } else {
          // console.log(result);
        }
      })
      .catch((error) => console.log("error", error))
      .finally(() => setLoadingButton(false));
  }

function payByPayping(isAdmin: boolean) {
    setLoadingButton(true);
    const token = localStorage.getItem("token");
    var myHeaders = new Headers();
    myHeaders.append("Accept", "application/json");
    myHeaders.append("Authorization", `Bearer ${token}`);

var formdata = new FormData();
    formdata.append(
      "address_id",
      isAdmin ? chooseAdminAddressId : chooseAddress
    );
    formdata.append("description", descInput);
    formdata.append("source", "web");
    if (isAdmin) {
      formdata.append("phone_number", userMobile);
      // formdata.append("userAddress", fillUserAddress);
      formdata.append("user_id", userId);
    }
    // formdata.append("totalprice", totalPrice);

var requestOptions = {
      method: "POST",
      headers: myHeaders,
      body: formdata,
    };

fetch(
      `${process.env.NEXT_PUBLIC_API_ADDRESS}store-products-offer-payping`,
      requestOptions
    )
      .then((response) => response.json())
      .then((result) => {
        // console.log(result);
        // console.log(charsooqCart);
        if (result.status === 200) {
          if (!isAdmin) {
            if (result.data.address.status === 200) {
              dispatch(removeAllItemsFromCharsooq([]));
              router.push(result.data.address.data);
              toast.success("لینک با موفقیت ساخته شد.\n\n لطفا کمی صبر کنید.");
            } else {
              toast.error(result.data.address.message);
              dispatch(removeAllItemsFromCharsooq([]));
              router.push(`/dashboard/orders`);
            }
          }
          if (isAdmin) {
            toast.success(
              `سفارش مشتری با شماره سفارش ${result.data.code} ثبت شد.`
            );
          }
        }
        if (result.status === 401) {
          hotToast.custom((t) => (
            <div
              className={`${
                t.visible ? "animate-enter" : "animate-leave"
              } max-w-md w-full bg-white shadow-lg rounded-lg pointer-events-auto flex ring-1 ring-black ring-opacity-5`}
            >
              <div className="flex-1 w-0 p-4">
                <div className="flex items-start">
                  <div className="flex-shrink-0 pt-0.5">
                    <img
                      className="h-10 w-10 rounded-full"
                      src="/assets/images/icons/logo2.png"
                      alt=""
                    />
                  </div>
                  <div className="ml-3 flex-1">
                    <p className="text-sm font-IRANSansBold">کاربر گرامی!</p>
                    <p className="mt-1 text-sm">{result.message}</p>
                  </div>
                </div>
              </div>
              <div className="flex border-l border-gray-200">
                <Link
                  href="/dashboard/profile?callbackRoute=checkout"
                  onClick={() => {
                    toast.dismiss(t.id);
                  }}
                  className="text-sm text-[var(--base-blue)] font-IRANSansBold underline ml-4 flex items-center justify-center"
                >
                  برو به پروفایل
                </Link>
              </div>
            </div>
          ));
        }
        if (result.status === 422) {
          toast.error(result.message);
        }
        if (result.status === 403) {
          toast.error(result.message);
          location.reload();
        }
        if (result.status === 404) {
          toast.error(result.message);
        } else {
          // console.log(result);
        }
      })
      .catch((error) => console.log("error", error))
      .finally(() => setLoadingButton(false));
  }

function removeItemFromBasket(id: any) {
    dispatch(removeFromCharsooqBasket({ id }));
  }

useEffect(() => {
    window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
  }, [showAddress]);

if (charsooqCart.length === 0) {
    return (
      <div className="flex flex-col gap-[20px] items-center justify-center m-auto">
        <img src="/assets/images/icons/ghost-404.png" alt="" />
        <p> سبد محصولات چارسوق شما خالی می باشد.</p>
      </div>
    );
  }

return (
    <div className="flex flex-col md:flex-row bg-white rounded-2xl shadow-lg">
      <Dialog open={openDialog} onOpenChange={setOpenDialog}>
        <DialogContent>
          <DialogHeader>
            <p className="text-start font-IRANSansBold text-lg">
              ثبت سفارش مشتری
            </p>
          </DialogHeader>
          <form
            // ref={formRef}
            onSubmit={() => sendBasketFunction(true)}
            className="flex flex-col gap-4"
          >
            <div className="flex flex-col gap-2">
              <p className="text-[var(--text-gray)]">
                اطلاعات مشتری را کامل کنید:
              </p>
              <div className="w-full flex ltr justify-center items-center"></div>
            </div>

<div className="flex flex-col gap-1">
              <label
                className="text-[15px] text-[var(--text-gray)]"
                htmlFor="user-mobile"
              >
                شماره موبایل کاربر را وارد و انتخاب کنید:
              </label>
              <span className="text-sm">
                (کاربر حتما باید در سایت ثبت شده باشد.)
              </span>
              <div ref={inputRef} className="relative flex-1 z-10">
                <input
                  onClick={() => {
                    if (userMobile.trim()) {
                      setOpenSuggest(true);
                    }
                  }}
                  className="w-full p-2 placeholder:text-sm rounded-md border border-[var(--light-border)] outline-none"
                  type="text"
                  id="user-mobile"
                  name="user-mobile"
                  placeholder="حداقل 7 شماره را وارد کنید تا نمایش داده شود"
                  onChange={searchUsers}
                  value={userMobile}
                />
                {openSuggest &&
                  (!inputLoading ? (
                    <div className="mega-menu-content absolute min-w-fit bg-white w-full p-0 left-0 right-0 top-8 shadow-lg border border-[var(--very-light-border)] rounded-b-md max-h-[calc(var(--radix-navigation-menu-viewport-height)-4rem)] overflow-y-auto">
                      <div className="w-full flex flex-col px-2 py-1">
                        {suggestionData.length > 0 ? (
                          <div className="flex flex-col gap-1 w-full">
                            <div className="flex flex-col gap-1 pb-1">
                              <DirectionProvider dir="rtl">
                                <ScrollArea className="h-48 w-full">
                                  <div className="flex flex-col gap-1">
                                    {suggestionData.length === 0 ? (
                                      <div>
                                        <p>کاربری یافت نشد.</p>
                                      </div>
                                    ) : (
                                      suggestionData.map((item: any) => (
                                        <div
                                          key={item.id}
                                          onClick={() => {
                                            setUserMobile(item.cell_number);
                                            setUserId(item.id);
                                            setOpenSuggest(false);
                                            setFillUserAddress(item.address);
                                          }}
                                          className="flex gap-2 items-start border-b hover:text-[var(--base-blue)] hover:bg-gray-100 cursor-pointer last:border-none py-2"
                                        >
                                          <div className="w-4">
                                            <svg
                                              xmlns="http://www.w3.org/2000/svg"
                                              fill="none"
                                              viewBox="0 0 24 24"
                                              strokeWidth={1.5}
                                              stroke="currentColor"
                                              className="w-4 h-4 text-[var(--base-blue)]"
                                            >
                                              <path
                                                strokeLinecap="round"
                                                strokeLinejoin="round"
                                                d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
                                              />
                                            </svg>
                                          </div>
                                          <div className="flex flex-col gap-1 w-full">
                                            <p className="line-clamp-1 font-IRANSansBold">
                                              {item.name
                                                ? item.name
                                                : "بدون نام کاربری"}
                                            </p>

<p className="text-sm">
                                              با شماره موبایل{" "}
                                              <span className="font-IRANSansBold text-[var(--base-blue)]">
                                                {item.cell_number}
                                              </span>
                                            </p>
                                          </div>
                                        </div>
                                      ))
                                    )}
                                  </div>
                                </ScrollArea>
                              </DirectionProvider>
                            </div>
                          </div>
                        ) : (
                          <div className="py-2">
                            <p className="font-IRANSansBold">
                              کاربری یافت نشد.
                            </p>
                          </div>
                        )}
                      </div>
                    </div>
                  ) : userMobile.length > 6 ? (
                    <div className="absolute min-w-fit bg-white w-full p-2 left-0 right-0 top-8 shadow-lg border border-[var(--very-light-border)] rounded-b-md text-sm">
                      <p>در حال جستجو...</p>
                    </div>
                  ) : (
                    <div className="absolute min-w-fit bg-white w-full p-2 left-0 right-0 top-8 shadow-lg border border-[var(--very-light-border)] rounded-b-md text-sm">
                      <p>حداقل 7 کاراکتر اجباری است.</p>
                    </div>
                  ))}
              </div>
            </div>

<div className="flex flex-col gap-1">
              <label
                className="text-[15px] text-[var(--text-gray)]"
                htmlFor="address"
              >
                آدرس:
              </label>
              <div ref={addressRef} className="relative flex-1">
                <textarea
                  onClick={() => {
                    if (userMobile.trim()) {
                      setShowAdminAdress(true);
                    }
                  }}
                  className="p-2 rounded-md border border-[var(--light-border)] outline-none"
                  id="address"
                  name="address"
                  rows={4}
                  placeholder="آدرس کاربر را وارد کنید."
                  value={chooseAdminAddress}
                  readOnly
                />
                {suggestionData.length !== 0 && showAdminAddress && (
                  <div className="mega-menu-content absolute min-w-fit bg-white w-full p-0 left-0 right-0 top-20 shadow-lg border border-[var(--very-light-border)] rounded-b-md max-h-[calc(var(--radix-navigation-menu-viewport-height)-4rem)] overflow-y-auto">
                    <div className="w-full flex flex-col px-2 py-1">
                      {fillUserAddress.length > 0 ? (
                        <div className="flex flex-col gap-1 w-full">
                          <div className="flex flex-col gap-1 pb-1">
                            <DirectionProvider dir="rtl">
                              <ScrollArea className="h-40 w-full">
                                <div className="flex flex-col gap-1">
                                  {suggestionData.length === 0 ? (
                                    <div>
                                      <p>آدرسی برای این کاربر یافت نشد.</p>
                                    </div>
                                  ) : (
                                    fillUserAddress.map((item: any) => (
                                      <div
                                        key={item.id}
                                        onClick={() => {
                                          setChooseAdminAdressId(item.id);
                                          setChooseAdminAdress(item.name);
                                          setShowAdminAdress(false);
                                        }}
                                        className="flex gap-2 items-start border-b hover:text-[var(--base-blue)] hover:bg-gray-100 cursor-pointer last:border-none py-2"
                                      >
                                        <div className="w-4">
                                          <svg
                                            xmlns="http://www.w3.org/2000/svg"
                                            fill="none"
                                            viewBox="0 0 24 24"
                                            strokeWidth={1.5}
                                            stroke="currentColor"
                                            className="w-4 h-4 text-[var(--base-blue)]"
                                          >
                                            <path
                                              strokeLinecap="round"
                                              strokeLinejoin="round"
                                              d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
                                            />
                                          </svg>
                                        </div>
                                        <div className="flex flex-col gap-1 w-full">
                                          <p className="font-IRANSansBold">
                                            {item.name
                                              ? item.name
                                              : "بدون آدرس"}
                                          </p>
                                        </div>
                                      </div>
                                    ))
                                  )}
                                </div>
                              </ScrollArea>
                            </DirectionProvider>
                          </div>
                        </div>
                      ) : userId ? (
                        <div className="py-2">
                          <p className="font-IRANSansBold">
                            آدرسی برای این کاربر یافت نشد.
                          </p>
                        </div>
                      ) : (
                        <div className="py-2">
                          <p className="font-IRANSansBold">
                            کاربری انتخاب نشده.
                          </p>
                        </div>
                      )}
                    </div>
                  </div>
                )}
              </div>
            </div>

<div className="w-full flex flex-col gap-2">
              <button
                aria-disabled={isPending}
                disabled={isPending || !chooseAdminAddressId || !userMobile}
                className="w-full bg-[var(--base-blue)] text-white"
                type="submit"
              >
                {isPending ? (
                  <div className="mr-4" role="status">
                    <svg
                      aria-hidden="true"
                      className="w-5 h-5 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600"
                      viewBox="0 0 100 101"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
                        fill="currentColor"
                      />
                      <path
                        d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
                        fill="currentFill"
                      />
                    </svg>
                    <span className="sr-only">Loading...</span>
                  </div>
                ) : (
                  "ثبت و نهایی کردن سفارش"
                )}
              </button>
              <button
                onClick={() => {
                  // setPreviews([]);
                  // setImageSendToApi([]);
                  setOpenDialog(false);
                }}
                className="w-full border border-[var(--light-border)] text-[var(--text-gray)]"
                type="reset"
              >
                انصراف
              </button>
            </div>
          </form>
        </DialogContent>
      </Dialog>
      <Modal mounted={showPopup} setMounted={setShowPopup}>
        <div
          ref={popupRef}
          className="flex flex-col bg-white shadow-lg max-w-[95vw] md:max-w-[420px] rounded-md"
        >
          <span
            onClick={() => setShowPopup(false)}
            className="text-[var(--text-gray)] text-[30px] font-light text-end pl-3 cursor-pointer h-[27px]"
          >
            &times;
          </span>
          <div className="flex flex-col">
            <div className="login-page-content">
              <LoginForm setShowPopup={setShowPopup} />
            </div>
          </div>
        </div>
      </Modal>
      {showAddress ? (
        <ChooseAddressForBasket
          setChooseAddress={setChooseAddress}
          setShowAddress={setShowAddress}
          chooseAddress={chooseAddress}
          amazonCart={charsooqCart}
          descInput={descInput}
          setDescInput={setDescInput}
          userAddress={userAddress}
          checkout="charsooq"
          setDiscountInput={setDiscountInput}
          setShowDiscountInput={setShowDiscountInput}
          setDiscountCodeError={setDiscountCodeError}
          setDiscountCheck={setDiscountCheck}
        />
      ) : (
        <CharsooqBasketItems
          charsooqCart={charsooqCart}
          removeItemFromBasket={removeItemFromBasket}
        />
      )}
      <div className="checkout-content-single-payments">
        <div className="product-invoice-container sticky top-[140px]">
          <div className="product-invoice-content-top">
            <div className="flex flex-col gap-[10px] px-2">
              <div className="flex items-center justify-between">
                <p className="font-IRANSansBold">
                  قیمت کل
                  <span className="font-IRANSansBold">
                    {" "}
                    ({charsooqCart.length})
                  </span>
                </p>
                <span className="flex items-center gap-7 font-IRANSansBold">
                  {countLoading ? (
                    <span className={"dot-loader active"}></span>
                  ) : (
                    totalPrice.toLocaleString()
                  )}{" "}
                  {process.env.price}
                </span>
              </div>
              {/* <div className="flex items-center justify-between text-[14px] text-[var(--text-gray)]">
                <p>قیمت کالاها</p>
                <span className="flex items-center gap-7">
                  {countLoading ? (
                    <span className={"dot-loader active"}></span>
                  ) : (
                    totalItemprice.toLocaleString()
                  )}{" "}
                  {process.env.price}
                </span>
              </div> */}
              {/* <div className="flex items-center justify-between text-[14px] text-[var(--text-gray)]">
                <p>هزینه ارسال</p>
                <span className="flex items-center gap-7">
                  {countLoading ? (
                    <span className={"dot-loader active"}></span>
                  ) : (
                    totalShippingCost.toLocaleString()
                  )}{" "}
                  {process.env.price}
                </span>
              </div> */}
            </div>
          </div>
          <div className="product-invoice-content-bottom">
            <div className="flex flex-col gap-[10px] px-2">
              {isMobile ? (
                showAddress ? (
                  <div className="flex flex-col bg-white border-t border-[var(--light-border)] fixed bottom-0 w-full right-0 h-28 z-20">
                    <div className="flex items-center justify-between px-6 pt-3">
                      <p className="font-IRANSansBold">
                        قیمت کالا ها
                        <span className="font-IRANSansBold text-sm md:text-base">
                          {" "}
                          ({charsooqCart.length})
                        </span>
                      </p>
                      <span className="flex items-center gap-7 font-IRANSansBold pl-14 text-sm md:text-base">
                        {countLoading ? (
                          <span className={"dot-loader active"}></span>
                        ) : (
                          totalPrice.toLocaleString()
                        )}{" "}
                        {process.env.price}
                      </span>
                    </div>
                    <button
                      onClick={sendcharsooqBasketToApi}
                      className="add-checkout-button"
                      disabled={loadingButton}
                    >
                      {loadingButton ? (
                        <span
                          className={
                            loadingButton
                              ? "button-loader-white active"
                              : "button-loader-white"
                          }
                        ></span>
                      ) : null}
                      <p> ثبت و نهایی کردن سفارش</p>
                    </button>
                  </div>
                ) : (
                  <div className="flex flex-col bg-white border-t border-[var(--light-border)] fixed bottom-0 w-full right-0 h-28 z-20">
                    <div className="flex items-center justify-between px-6 pt-3">
                      <p className="font-IRANSansBold">
                        قیمت کل
                        <span className="font-IRANSansBold text-sm md:text-base">
                          {" "}
                          ({charsooqCart.length})
                        </span>
                      </p>
                      <span className="flex items-center gap-7 font-IRANSansBold pl-14 text-sm md:text-base">
                        {countLoading ? (
                          <span className={"dot-loader active"}></span>
                        ) : (
                          totalPrice.toLocaleString()
                        )}{" "}
                        {process.env.price}
                      </span>
                    </div>

<button
                      onClick={continueOnCheckout}
                      className="add-checkout-button"
                    >
                      <p>ادامه ثبت سفارش</p>
                    </button>
                  </div>
                )
              ) : showAddress ? (
                <button
                  onClick={sendcharsooqBasketToApi}
                  className="add-checkout-button"
                  disabled={loadingButton}
                >
                  {loadingButton ? (
                    <span
                      className={
                        loadingButton
                          ? "button-loader-white active"
                          : "button-loader-white"
                      }
                    ></span>
                  ) : null}
                  <p>
                    {userInfoRedux?.is_admin
                      ? "ثبت سفارش برای مشتری"
                      : " ثبت و نهایی کردن سفارش"}
                  </p>
                </button>
              ) : (
                <button
                  onClick={continueOnCheckout}
                  className="add-checkout-button"
                >
                  <p>ادامه ثبت سفارش</p>
                </button>
              )}
              <div className="flex flex-col gap-2 border border-[var(--light-blue)] p-3 rounded-[8px] bg-[#EFF9FF]">
                <div className="flex items-center gap-[5px] text-[14px]">
                  <svg
                    width="21"
                    height="20"
                    viewBox="0 0 21 20"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <g clipPath="url(#clip0_1129_22009)">
                      <path
                        d="M16.3333 4.16634H14.5833C14.3899 3.22585 13.8782 2.3808 13.1344 1.77361C12.3906 1.16642 11.4602 0.83422 10.5 0.833008H4.66667C3.562 0.834331 2.50296 1.27374 1.72185 2.05486C0.940735 2.83597 0.501323 3.89501 0.5 4.99967L0.5 12.4997C0.502095 13.246 0.754615 13.9701 1.21711 14.5559C1.67961 15.1417 2.32533 15.5553 3.05083 15.7305C2.9723 16.1476 2.98572 16.5767 3.09016 16.988C3.19459 17.3993 3.38753 17.7829 3.6555 18.112C3.92347 18.441 4.26001 18.7077 4.64166 18.8932C5.0233 19.0788 5.44084 19.1789 5.86514 19.1864C6.28944 19.194 6.71029 19.1089 7.0983 18.937C7.48631 18.7652 7.83215 18.5107 8.11168 18.1914C8.3912 17.8721 8.59768 17.4957 8.71671 17.0883C8.83574 16.681 8.86445 16.2526 8.80083 15.833H12.2025C12.1811 15.9709 12.1696 16.1101 12.1683 16.2497C12.1683 17.0232 12.4756 17.7651 13.0226 18.3121C13.5696 18.8591 14.3115 19.1663 15.085 19.1663C15.8585 19.1663 16.6004 18.8591 17.1474 18.3121C17.6944 17.7651 18.0017 17.0232 18.0017 16.2497C18.0007 16.0754 17.9837 15.9016 17.9508 15.7305C18.676 15.555 19.3214 15.1412 19.7835 14.5555C20.2457 13.9697 20.498 13.2458 20.5 12.4997V8.33301C20.4987 7.22835 20.0593 6.16931 19.2782 5.38819C18.497 4.60708 17.438 4.16766 16.3333 4.16634ZM18.8333 8.33301V9.16634H14.6667V5.83301H16.3333C16.9964 5.83301 17.6323 6.0964 18.1011 6.56524C18.5699 7.03408 18.8333 7.66997 18.8333 8.33301ZM2.16667 12.4997V4.99967C2.16667 4.33663 2.43006 3.70075 2.8989 3.23191C3.36774 2.76307 4.00363 2.49967 4.66667 2.49967H10.5C11.163 2.49967 11.7989 2.76307 12.2678 3.23191C12.7366 3.70075 13 4.33663 13 4.99967V14.1663H3.83333C3.39131 14.1663 2.96738 13.9907 2.65482 13.6782C2.34226 13.3656 2.16667 12.9417 2.16667 12.4997ZM7.16667 16.2497C7.16667 16.5812 7.03497 16.8991 6.80055 17.1336C6.56613 17.368 6.24819 17.4997 5.91667 17.4997C5.58515 17.4997 5.2672 17.368 5.03278 17.1336C4.79836 16.8991 4.66667 16.5812 4.66667 16.2497C4.66718 16.1073 4.69343 15.9661 4.74417 15.833H7.08917C7.1399 15.9661 7.16615 16.1073 7.16667 16.2497ZM15.0833 17.4997C14.7518 17.4997 14.4339 17.368 14.1995 17.1336C13.965 16.8991 13.8333 16.5812 13.8333 16.2497C13.8337 16.1072 13.86 15.9661 13.9108 15.833H16.2558C16.3067 15.9661 16.333 16.1072 16.3333 16.2497C16.3333 16.5812 16.2016 16.8991 15.9672 17.1336C15.7328 17.368 15.4149 17.4997 15.0833 17.4997ZM17.1667 14.1663H14.6667V10.833H18.8333V12.4997C18.8333 12.9417 18.6577 13.3656 18.3452 13.6782C18.0326 13.9907 17.6087 14.1663 17.1667 14.1663Z"
                        fill="#2FA9FF"
                      />
                    </g>
                    <defs>
                      <clipPath id="clip0_1129_22009">
                        <rect
                          width="20"
                          height="20"
                          fill="white"
                          transform="translate(0.5)"
                        />
                      </clipPath>
                    </defs>
                  </svg>
                  <p className="font-IRANSansBold">ارسال رایگان</p>
                </div>
                <p className="text-[14px]">
                  هزینه ارسال محصولات چارسوق رایگان میباشد
                </p>
              </div>

<div className="flex flex-col gap-2 border border-[var(--light-blue)] p-3 rounded-[8px] bg-[#EFF9FF]">
                <div className="flex items-center gap-[5px] text-[14px]">
                  <svg
                    width="21"
                    height="20"
                    viewBox="0 0 21 20"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <g clipPath="url(#clip0_1129_22009)">
                      <path
                        d="M16.3333 4.16634H14.5833C14.3899 3.22585 13.8782 2.3808 13.1344 1.77361C12.3906 1.16642 11.4602 0.83422 10.5 0.833008H4.66667C3.562 0.834331 2.50296 1.27374 1.72185 2.05486C0.940735 2.83597 0.501323 3.89501 0.5 4.99967L0.5 12.4997C0.502095 13.246 0.754615 13.9701 1.21711 14.5559C1.67961 15.1417 2.32533 15.5553 3.05083 15.7305C2.9723 16.1476 2.98572 16.5767 3.09016 16.988C3.19459 17.3993 3.38753 17.7829 3.6555 18.112C3.92347 18.441 4.26001 18.7077 4.64166 18.8932C5.0233 19.0788 5.44084 19.1789 5.86514 19.1864C6.28944 19.194 6.71029 19.1089 7.0983 18.937C7.48631 18.7652 7.83215 18.5107 8.11168 18.1914C8.3912 17.8721 8.59768 17.4957 8.71671 17.0883C8.83574 16.681 8.86445 16.2526 8.80083 15.833H12.2025C12.1811 15.9709 12.1696 16.1101 12.1683 16.2497C12.1683 17.0232 12.4756 17.7651 13.0226 18.3121C13.5696 18.8591 14.3115 19.1663 15.085 19.1663C15.8585 19.1663 16.6004 18.8591 17.1474 18.3121C17.6944 17.7651 18.0017 17.0232 18.0017 16.2497C18.0007 16.0754 17.9837 15.9016 17.9508 15.7305C18.676 15.555 19.3214 15.1412 19.7835 14.5555C20.2457 13.9697 20.498 13.2458 20.5 12.4997V8.33301C20.4987 7.22835 20.0593 6.16931 19.2782 5.38819C18.497 4.60708 17.438 4.16766 16.3333 4.16634ZM18.8333 8.33301V9.16634H14.6667V5.83301H16.3333C16.9964 5.83301 17.6323 6.0964 18.1011 6.56524C18.5699 7.03408 18.8333 7.66997 18.8333 8.33301ZM2.16667 12.4997V4.99967C2.16667 4.33663 2.43006 3.70075 2.8989 3.23191C3.36774 2.76307 4.00363 2.49967 4.66667 2.49967H10.5C11.163 2.49967 11.7989 2.76307 12.2678 3.23191C12.7366 3.70075 13 4.33663 13 4.99967V14.1663H3.83333C3.39131 14.1663 2.96738 13.9907 2.65482 13.6782C2.34226 13.3656 2.16667 12.9417 2.16667 12.4997ZM7.16667 16.2497C7.16667 16.5812 7.03497 16.8991 6.80055 17.1336C6.56613 17.368 6.24819 17.4997 5.91667 17.4997C5.58515 17.4997 5.2672 17.368 5.03278 17.1336C4.79836 16.8991 4.66667 16.5812 4.66667 16.2497C4.66718 16.1073 4.69343 15.9661 4.74417 15.833H7.08917C7.1399 15.9661 7.16615 16.1073 7.16667 16.2497ZM15.0833 17.4997C14.7518 17.4997 14.4339 17.368 14.1995 17.1336C13.965 16.8991 13.8333 16.5812 13.8333 16.2497C13.8337 16.1072 13.86 15.9661 13.9108 15.833H16.2558C16.3067 15.9661 16.333 16.1072 16.3333 16.2497C16.3333 16.5812 16.2016 16.8991 15.9672 17.1336C15.7328 17.368 15.4149 17.4997 15.0833 17.4997ZM17.1667 14.1663H14.6667V10.833H18.8333V12.4997C18.8333 12.9417 18.6577 13.3656 18.3452 13.6782C18.0326 13.9907 17.6087 14.1663 17.1667 14.1663Z"
                        fill="#2FA9FF"
                      />
                    </g>
                    <defs>
                      <clipPath id="clip0_1129_22009">
                        <rect
                          width="20"
                          height="20"
                          fill="white"
                          transform="translate(0.5)"
                        />
                      </clipPath>
                    </defs>
                  </svg>
                  <p className="font-IRANSansBold">در صورت اتمام موجودی</p>
                </div>
                <p className="text-[14px]">
                  در صورتی که به دلیل اتمام موجودی یا تمام شدن تخفیف، کالای مورد
                  نظرتان خریداری نشد، وجه مربوطه تا 24 الی 48 ساعت به حساب تان
                  واریز می گردد.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default CheckoutCharsooq;