OwlCyberSecurity - MANAGER

Edit File: CheckoutEmirates.tsx

"use client";

import {
  activity,
  userAddressAccess,
  userInfoAccess,
} from "@/redux/features/auth-slice";
import React, {
  useState,
  useEffect,
  useRef,
  FormEvent,
  useTransition,
} from "react";
import { toast } from "sonner";
import { toast as hotToast } from "react-hot-toast";
import { useDispatch, useSelector } from "react-redux";
import ChooseAddressForBasket from "./ChooseAddressForBasket";
import {
  EmirateSelectTotalRial,
  EmirateSelectTotalShipBroker,
  EmirateSelectTotalbuyCost,
  EmirateSelectTotalbuyProfit,
  EmirateSelectItems,
  EmirateSelectTotalPrice,
  removeAllItemsFromEmirate,
  removeFromEmirateBasket,
  updateEmirateCount,
  updateEmiratesCart,
  incrementEmirateCount,
  decrementEmirateCount,
} from "@/redux/features/emirateBasketSlice";
import EmiratesBasketItems from "./emirates/EmiratesBasketItems";
import { useRouter } from "next/navigation";
import Link from "next/link";
import useDetectMobile from "../components/hooks/DetectMobile";
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 CheckoutEmirates() {
  const inputRef = useRef<any>();
  const addressRef = useRef<any>();
  let popupRef = useRef<any>(null);
  const dispatch = useDispatch();
  const router = useRouter();
  const isMobile = useDetectMobile();

const EmiratesCart = useSelector(EmirateSelectItems);
  const totalPrice = useSelector(EmirateSelectTotalPrice);
  const totalRial = useSelector(EmirateSelectTotalRial);
  const totalShipBroker = useSelector(EmirateSelectTotalShipBroker);
  const totalBuyCost = useSelector(EmirateSelectTotalbuyCost);
  const totalBuyProfit = useSelector(EmirateSelectTotalbuyProfit);

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>(1);

const [discountInput, setDiscountInput] = useState("");
  const [showDiscountInput, setShowDiscountInput] = useState(false);
  const [discountCodeError, setDiscountCodeError] = useState(false);
  const [discountCheck, setDiscountCheck] = useState(false);
  const [giftCheck, setGiftCheck] = useState(false);
  const [finalRialAfterDiscount, setFinalRialAfterDiscount] =
    useState<number>();
  const [profitAfterDiscount, setProfitAfterDiscount] = useState<number>();
  const [dicountPercent, setDiscountPercent] = useState<number>();
  const [giftCodeAmount, setGiftCodeAmount] = useState<number>();
  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("");

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

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);
    formdata.append("discount_code", discountInput);
    formdata.append("cart_name", "emirates");
    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 < EmiratesCart.length; i++) {
      formdata.append(`cart[${i}][link]`, EmiratesCart[i].link);
      formdata.append(`cart[${i}][count]`, EmiratesCart[i].count);
      formdata.append(`cart[${i}][weight_unit]`, EmiratesCart[i].weight_unit);
      formdata.append(`cart[${i}][firstweight]`, EmiratesCart[i].firstweight);
      formdata.append(`cart[${i}][exchange_id]`, EmiratesCart[i].exchange_id);
      formdata.append(`cart[${i}][region_id]`, EmiratesCart[i].region_id);
      formdata.append(`cart[${i}][image]`, EmiratesCart[i].image);
      formdata.append(`cart[${i}][name]`, EmiratesCart[i].name);
      formdata.append(`cart[${i}][cost]`, EmiratesCart[i].cost);
      formdata.append(`cart[${i}][description]`, EmiratesCart[i].description);
    }

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

fetch(`${process.env.NEXT_PUBLIC_API_ADDRESS}cart-store`, requestOptions)
      .then((response) => response.json())
      .then((result) => {
        // console.log(result);
        // console.log(charsooqCart);
        if (result.status === 200) {
          dispatch(removeAllItemsFromEmirate([]));
          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);
        }
      })
      .catch((error) => console.log("error", error))
      .finally(() => setLoadingButton(false));
  }

function calculateCount(
    link: any,
    cost: any,
    weight_unit: any,
    exchange_id: any,
    region_id: any,
    firstweight: any,
    count: any,
    type: "increment" | "decrement"
  ) {
    setCountLoading(true);
    var myHeaders = new Headers();
    myHeaders.append("Accept", "application/json");

var formdata = new FormData();
    formdata.append("price", cost);
    formdata.append("weight_unit", weight_unit);
    formdata.append("exchange_id", exchange_id);
    formdata.append("region_id", region_id);
    formdata.append("weight", firstweight);
    formdata.append("count", count);

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

fetch(
      `${process.env.NEXT_PUBLIC_API_ADDRESS}calculator-show`,
      requestOptions
    )
      .then((response) => response.json())
      .then((result) => {
        // console.log(result);
        if (result.status === 200) {
          dispatch(updateEmirateCount({ link, ...result.data.priceRial }));
        }
        if (result.status === 404) {
          toast.error(result.message);
          if (type === "increment") {
            dispatch(decrementEmirateCount(link));
          }
          if (type === "decrement") {
            dispatch(incrementEmirateCount(link));
          }
        }
      })
      .catch((error) => console.log("error", error))
      .finally(() => setCountLoading(false));
  }

function removeItemFromBasket(link: any) {
    dispatch(removeFromEmirateBasket({ link }));
  }

function submitDiscount(e: any) {
    e.preventDefault();
    const token = localStorage.getItem("token");
    const myHeaders = new Headers();
    myHeaders.append("Accept", "application/json");
    myHeaders.append("Authorization", `Bearer ${token}`);

formdata.append(`cart[${i}][exchange_id]`, EmiratesCart[i].exchange_id);
      formdata.append(`cart[${i}][region_id]`, EmiratesCart[i].region_id);

formdata.append(`cart[${i}][cost]`, EmiratesCart[i].cost);
      formdata.append("discount_code", discountInput);
    }

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

fetch(`${process.env.NEXT_PUBLIC_API_ADDRESS}discount`, requestOptions)
      .then((response) => response.json())
      .then((result) => {
        // console.log(result);
        if (result.status === 200) {
          if (result.data.state_discount === "discount_code") {
            setGiftCheck(false);
            setDiscountCheck(true);
            setDiscountCodeError(false);
            setFinalRialAfterDiscount(result.data.finalRialPrice);
            setProfitAfterDiscount(result.data.buyProfit);
            setDiscountPercent(result.data.discount_percent);
          }
          if (result.data.state_discount === "gift_code") {
            //write new code
            setDiscountCheck(false);
            setGiftCheck(true);
            setDiscountCodeError(false);
            setFinalRialAfterDiscount(result.data.finalRialPrice);
            setGiftCodeAmount(result.data.gift_amount);
          }
        } else {
          toast.error(result.message);
          setDiscountCodeError(true);
        }
      })
      .catch((error) => console.error(error));
  }

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

if (EmiratesCart.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={EmiratesCart}
          descInput={descInput}
          setDescInput={setDescInput}
          userAddress={userAddress}
          checkout="emirates"
          setDiscountInput={setDiscountInput}
          setShowDiscountInput={setShowDiscountInput}
          setDiscountCodeError={setDiscountCodeError}
          setDiscountCheck={setDiscountCheck}
          setGiftCheck={setGiftCheck}
        />
      ) : (
        <EmiratesBasketItems
          EmiratesCart={EmiratesCart}
          calculateCount={calculateCount}
          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">
                    {" "}
                    ({EmiratesCart.length})
                  </span>
                </p>
                <span className="flex items-center gap-7 font-IRANSansBold">
                  {countLoading ? (
                    <span className={"dot-loader active"}></span>
                  ) : finalRialAfterDiscount && (discountCheck || giftCheck) ? (
                    finalRialAfterDiscount.toLocaleString()
                  ) : (
                    totalRial.toLocaleString()
                  )}{" "}
                  {process.env.price}
                </span>
              </div>
              {giftCheck ? (
                <>
                  <div className="flex items-center justify-between text-[14px] text-[var(--text-gray)]">
                    <p className="font-IRANSansBold whitespace-nowrap">
                      قبل از اعمال کارت هدیه
                    </p>
                    <div className="w-full flex justify-end gap-1 items-center">
                      <p className="flex justify-end text-[var(--base-red)] font-IRANSansBold line-through text-[12px]">
                        {totalRial.toLocaleString()} {process.env.price}
                      </p>
                    </div>
                  </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>
                      ) : (
                        giftCodeAmount?.toLocaleString()
                      )}{" "}
                      {process.env.price}
                    </span>
                  </div>
                </>
              ) : null}
              <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>
                  ) : (
                    totalShipBroker.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>
                  ) : (
                    totalBuyCost.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>
                  ) : profitAfterDiscount && discountCheck ? (
                    profitAfterDiscount.toLocaleString()
                  ) : (
                    totalBuyProfit.toLocaleString()
                  )}{" "}
                  {process.env.price}
                </span>
              </div>
              {dicountPercent && discountCheck ? (
                <div className="w-full flex justify-between gap-2 items-center text-[12px]">
                  <p className="text-[var(--text-gray)] whitespace-nowrap">
                    کارمزد قبل از تخفیف
                  </p>
                  <div className="w-full flex justify-end gap-1 items-center">
                    <span className="py-0.5 px-2 bg-[var(--base-red)] text-white rounded-3xl">
                      %{dicountPercent}
                    </span>
                    <p className="flex justify-end text-[var(--base-red)] font-IRANSansBold line-through text-[12px]">
                      {totalBuyProfit.toLocaleString()} {process.env.price}
                    </p>
                  </div>
                </div>
              ) : null}
              {discountCheck && profitAfterDiscount ? (
                <div className="flex items-center justify-between text-[14px] text-[var(--text-gray)]">
                  <p>تخفیف شما</p>
                  <span className="flex items-center gap-7">
                    {(totalBuyProfit - profitAfterDiscount).toLocaleString()}{" "}
                    {process.env.price}
                  </span>
                </div>
              ) : null}
            </div>
          </div>
          <div className="product-invoice-content-bottom">
            <div className="flex flex-col gap-[10px] px-2">
              <div className="flex items-center justify-between">
                <p className="text-[var(--text-gray)] text-sm">
                  قیمت کل به درهم
                </p>
                <span className="font-IRANSansBold">
                  {totalPrice.toFixed(2)}{" "}
                  <span className="text-[13px] font-IRANSansBold">درهم</span>{" "}
                </span>
              </div>
              {isMobile ? (
                showAddress ? (
                  <div
                    className={`flex flex-col bg-white border-t border-[var(--light-border)] fixed bottom-0 w-full right-0  ${
                      showDiscountInput ? "h-56" : "h-36"
                    } 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">
                          {" "}
                          ({EmiratesCart.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>
                        ) : finalRialAfterDiscount &&
                          (discountCheck || giftCheck) ? (
                          finalRialAfterDiscount.toLocaleString()
                        ) : (
                          totalRial.toLocaleString()
                        )}{" "}
                        {process.env.price}
                      </span>
                    </div>
                    <div className="w-full flex items-center justify-between px-6">
                      <button
                        onClick={() => setShowDiscountInput(!showDiscountInput)}
                        type="button"
                        className="text-sm p-0 m-0 ml-auto px-6 text-[var(--text-gray)] gap-2"
                      >
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          fill="none"
                          viewBox="0 0 24 24"
                          strokeWidth="1.5"
                          stroke="currentColor"
                          className="h-5 w-5"
                        >
                          <path
                            strokeLinecap="round"
                            strokeLinejoin="round"
                            d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z"
                          />
                        </svg>
                        <p> کد تخفیف یا کارت هدیه دارید؟</p>
                      </button>
                      <div className="flex items-center gap-1">
                        <svg
                          width="24"
                          height="24"
                          viewBox="0 0 24 24"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M12 0C5.37256 0 0 5.37256 0 12C0 17.7019 3.9768 22.475 9.30809 23.6969L23.6969 9.30809C22.475 3.9768 17.7019 0 12 0Z"
                            fill="#FFEDB5"
                          />
                          <path
                            d="M23.9999 11.9989C23.9999 11.0734 23.895 10.1724 23.6966 9.30709L19.1942 4.80469L4.80566 19.1932L9.30806 23.6956C10.1734 23.894 11.0744 23.9989 11.9999 23.9989C18.6274 23.9989 23.9999 18.6263 23.9999 11.9989Z"
                            fill="#FFAD9E"
                          />
                          <path
                            d="M22.174 11.9981L20.4491 13.6787L21.3997 15.8913L19.163 16.784L19.1943 19.1924L16.786 19.1611L15.8933 21.3978L13.6806 20.4472L12 22.172L9.91309 11.9981L12 1.82422L13.6806 3.54909L15.8933 2.59848L16.786 4.83518L19.1943 4.80387L19.163 7.21222L21.3997 8.10491L20.4491 10.3176L22.174 11.9981Z"
                            fill="#C2001B"
                          />
                          <path
                            d="M12.0001 1.82422V22.172L10.3196 20.4472L8.10687 21.3978L7.21417 19.1611L4.80582 19.1924L4.83713 16.784L2.60043 15.8913L3.55104 13.6787L1.82617 11.9981L3.55104 10.3176L2.60043 8.10491L4.83713 7.21222L4.80582 4.80387L7.21417 4.83518L8.10687 2.59848L10.3196 3.54909L12.0001 1.82422Z"
                            fill="#FF0F27"
                          />
                          <path
                            d="M20.6784 11.9989L19.2076 13.4327L20.0179 15.3203L18.1099 16.0815L18.1365 18.1356L16.0824 18.109L15.3212 20.017L13.4335 19.2067L11.9998 20.6775L10.4346 11.9989L11.9998 3.32031L13.4335 4.7911L15.3212 3.98083L16.0824 5.88883L18.1365 5.86223L18.1099 7.91631L20.0179 8.67753L19.2076 10.5652L20.6784 11.9989Z"
                            fill="#FF0F27"
                          />
                          <path
                            d="M11.9999 3.32031V20.6775L10.5662 19.2067L8.67851 20.017L7.91729 18.109L5.8632 18.1356L5.88981 16.0815L3.98181 15.3203L4.79207 13.4327L3.32129 11.9989L4.79207 10.5652L3.98181 8.67753L5.88981 7.91631L5.8632 5.86223L7.91729 5.88883L8.67851 3.98083L10.5662 4.7911L11.9999 3.32031Z"
                            fill="#FF6161"
                          />
                          <path
                            d="M9.35761 11.6002C8.26441 11.6002 7.375 10.7108 7.375 9.61763V9.09589C7.375 8.00269 8.26441 7.11328 9.35761 7.11328C10.4508 7.11328 11.3402 8.00269 11.3402 9.09589V9.61763C11.3402 10.7108 10.4508 11.6002 9.35761 11.6002ZM9.35761 8.15676C8.83978 8.15676 8.41848 8.57806 8.41848 9.09589V9.61763C8.41848 10.1355 8.83978 10.5568 9.35761 10.5568C9.87543 10.5568 10.2967 10.1355 10.2967 9.61763V9.09589C10.2967 8.57801 9.87538 8.15676 9.35761 8.15676Z"
                            fill="white"
                          />
                          <path
                            d="M14.6428 16.8854C13.5496 16.8854 12.6602 15.996 12.6602 14.9028V14.381C12.6602 13.2878 13.5496 12.3984 14.6428 12.3984C15.736 12.3984 16.6254 13.2878 16.6254 14.381V14.9028C16.6254 15.996 15.736 16.8854 14.6428 16.8854ZM14.6428 13.4419C14.1249 13.4419 13.7036 13.8632 13.7036 14.381V14.9028C13.7036 15.4206 14.1249 15.8419 14.6428 15.8419C15.1606 15.8419 15.5819 15.4206 15.5819 14.9028V14.381C15.5819 13.8632 15.1606 13.4419 14.6428 13.4419Z"
                            fill="white"
                          />
                          <path
                            d="M8.63419 14.6293L9.37207 15.3672L15.3652 9.37406L14.6273 8.63617L8.63419 14.6293Z"
                            fill="white"
                          />
                        </svg>
                        <svg
                          width="24"
                          height="24"
                          viewBox="0 0 24 24"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <g clipPath="url(#clip0_4401_15692)">
                            <path
                              d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z"
                              fill="#FEE187"
                            />
                            <path
                              d="M23.9928 12.3962L18.5146 6.91797L9.44674 13.9606L11.5099 16.0238L4.13379 18.0246L9.93321 23.824C10.6046 23.9406 11.2951 24.0018 11.9999 24.0018C18.4953 24.0019 23.7846 18.841 23.9928 12.3962Z"
                              fill="#FFC61B"
                            />
                            <path
                              d="M17.8788 14.4847H6.72717C6.20911 14.4847 5.78906 14.0647 5.78906 13.5466V7.60608C5.78906 7.08802 6.20911 6.66797 6.72717 6.66797H17.8788C18.3968 6.66797 18.8169 7.08802 18.8169 7.60608V13.5466C18.8169 14.0647 18.3969 14.4847 17.8788 14.4847Z"
                              fill="#8BC180"
                            />
                            <path
                              d="M17.8795 6.66797H12.2158V14.4847H17.8796C18.3976 14.4847 18.8177 14.0647 18.8177 13.5466V7.60608C18.8176 7.08802 18.3976 6.66797 17.8795 6.66797Z"
                              fill="#6CAF5F"
                            />
                            <path
                              d="M18.8169 8.00391H5.78906V9.93661H18.8169V8.00391Z"
                              fill="#3F3B3B"
                            />
                            <path
                              d="M18.8178 8.00391H12.2158V9.93661H18.8178V8.00391Z"
                              fill="#272525"
                            />
                            <path
                              d="M16.0897 18.4769H4.93811C4.42005 18.4769 4 18.0568 4 17.5388V11.5983C4 11.0802 4.42005 10.6602 4.93811 10.6602H16.0897C16.6078 10.6602 17.0278 11.0802 17.0278 11.5983V17.5388C17.0278 18.0569 16.6079 18.4769 16.0897 18.4769Z"
                              fill="#477F3C"
                            />
                            <path
                              d="M16.0896 10.6602H10.5791V18.4769H16.0896C16.6077 18.4769 17.0277 18.0568 17.0277 17.5388V11.5983C17.0277 11.0801 16.6078 10.6602 16.0896 10.6602Z"
                              fill="#2E5E24"
                            />
                            <path
                              d="M7.12516 13.9492C7.12516 13.9492 6.98017 15.6885 5.80469 16.4131C5.80469 16.4131 6.92566 16.0286 7.12516 17.025C7.12516 17.025 8.20412 16.2843 7.93033 14.078"
                              fill="#E09112"
                            />
                            <path
                              d="M9.46491 13.9492C9.46491 13.9492 9.6099 15.6885 10.7854 16.4131C10.7854 16.4131 9.66441 16.0286 9.46491 17.025C9.46491 17.025 8.38594 16.2843 8.65974 14.078"
                              fill="#FF5419"
                            />
                            <path
                              d="M4.97559 12.168C4.97559 12.168 5.41954 13.0974 5.03305 14.1925C5.03305 14.1925 5.54835 15.0137 8.0767 14.1925L8.04932 12.7402L4.97559 12.168Z"
                              fill="#FFC61B"
                            />
                            <path
                              d="M8.14114 12.8386C8.14114 12.8386 6.46629 10.9061 5.19415 11.7757C3.92201 12.6452 8.14114 12.8386 8.14114 12.8386Z"
                              fill="#E09112"
                            />
                            <path
                              d="M11.6215 12.1523C11.6215 12.1523 11.1709 13.0963 11.5573 14.1913C11.5573 14.1913 11.042 15.0126 8.51367 14.1913L8.54105 12.739L11.6215 12.1523Z"
                              fill="#EAA22F"
                            />
                            <path
                              d="M8.44922 12.8386C8.44922 12.8386 10.1241 10.9061 11.3962 11.7757C12.6683 12.6452 8.44922 12.8386 8.44922 12.8386Z"
                              fill="#FF5419"
                            />
                            <path
                              d="M8.29538 14.4013C8.79345 14.4013 9.19721 13.9976 9.19721 13.4995C9.19721 13.0014 8.79345 12.5977 8.29538 12.5977C7.79732 12.5977 7.39355 13.0014 7.39355 13.4995C7.39355 13.9976 7.79732 14.4013 8.29538 14.4013Z"
                              fill="#C92F00"
                            />
                            <path
                              d="M8.29492 12.5977C8.79292 12.5977 9.19675 13.0014 9.19675 13.4995C9.19675 13.9975 8.79302 14.4013 8.29492 14.4013V12.5977Z"
                              fill="#930000"
                            />
                          </g>
                          <defs>
                            <clipPath id="clip0_4401_15692">
                              <rect width="24" height="24" fill="white" />
                            </clipPath>
                          </defs>
                        </svg>
                      </div>
                    </div>
                    {showDiscountInput ? (
                      <div className="flex flex-col gap-1 px-6 py-1 w-full">
                        <form
                          onSubmit={submitDiscount}
                          className={`w-full border rounded-md flex flex-row ${
                            discountCodeError
                              ? "border-[var(--base-red)]"
                              : "border-[var(--light-border)]"
                          }`}
                        >
                          <input
                            className="px-2 py-3 w-full border-none flex-1 outline-none rounded-md"
                            type="text"
                            disabled={discountCheck || giftCheck}
                            placeholder="کد تخفیف یا کارت هدیه خود را وارد کنید"
                            onChange={(e) => setDiscountInput(e.target.value)}
                          />
                          <button
                            disabled={
                              !discountInput || discountCheck || giftCheck
                            }
                            type="submit"
                            className="text-sm px-2 font-IRANSansBold text-[var(--light-blue)] disabled:text-gray-400 disabled:bg-[#fafafa] rounded-r-none m-0"
                          >
                            ثبت
                          </button>
                        </form>
                        {discountCodeError ? (
                          <p className="text-xs text-[var(--base-red)] font-IRANSansBold">
                            کد تخفیف یا کارت هدیه وارد شده صحیح نیست یا قبلا
                            استفاده شده است.
                          </p>
                        ) : (
                          discountCheck && (
                            <p className="text-xs font-IRANSansBold text-[var(--base-blue)]">
                              %{dicountPercent} تخفیف از کارمزد برای شما اعمال
                              شد.
                            </p>
                          )
                        )}
                      </div>
                    ) : null}
                    <button
                      type="button"
                      onClick={sendEmiratesBasketToApi}
                      className="add-checkout-button"
                      disabled={!chooseAddress || loadingButton}
                    >
                      {loadingButton ? (
                        <span
                          className={
                            loadingButton
                              ? "button-loader-white active"
                              : "button-loader-white"
                          }
                        ></span>
                      ) : null}
                      <p>
                        {" "}
                        {userInfoRedux?.is_admin
                          ? "ثبت سفارش برای مشتری"
                          : " ثبت و نهایی کردن سفارش"}
                      </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">
                          {" "}
                          ({EmiratesCart.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>
                        ) : (
                          totalRial.toLocaleString()
                        )}{" "}
                        {process.env.price}
                      </span>
                    </div>
                    <button
                      type="button"
                      onClick={continueOnCheckout}
                      className="add-checkout-button"
                    >
                      <p>ادامه ثبت سفارش</p>
                    </button>
                  </div>
                )
              ) : showAddress ? (
                <div className="flex flex-col gap-4">
                  <div className="flex flex-col gap-1">
                    <div className="w-full text-[var(--text-gray)] text-sm flex items-center justify-between">
                      <button type="button" className="p-0 m-0 ml-auto">
                        کد تخفیف یا کارت هدیه دارید؟
                      </button>
                      <div className="flex items-center gap-1">
                        <svg
                          width="24"
                          height="24"
                          viewBox="0 0 24 24"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M12 0C5.37256 0 0 5.37256 0 12C0 17.7019 3.9768 22.475 9.30809 23.6969L23.6969 9.30809C22.475 3.9768 17.7019 0 12 0Z"
                            fill="#FFEDB5"
                          />
                          <path
                            d="M23.9999 11.9989C23.9999 11.0734 23.895 10.1724 23.6966 9.30709L19.1942 4.80469L4.80566 19.1932L9.30806 23.6956C10.1734 23.894 11.0744 23.9989 11.9999 23.9989C18.6274 23.9989 23.9999 18.6263 23.9999 11.9989Z"
                            fill="#FFAD9E"
                          />
                          <path
                            d="M22.174 11.9981L20.4491 13.6787L21.3997 15.8913L19.163 16.784L19.1943 19.1924L16.786 19.1611L15.8933 21.3978L13.6806 20.4472L12 22.172L9.91309 11.9981L12 1.82422L13.6806 3.54909L15.8933 2.59848L16.786 4.83518L19.1943 4.80387L19.163 7.21222L21.3997 8.10491L20.4491 10.3176L22.174 11.9981Z"
                            fill="#C2001B"
                          />
                          <path
                            d="M12.0001 1.82422V22.172L10.3196 20.4472L8.10687 21.3978L7.21417 19.1611L4.80582 19.1924L4.83713 16.784L2.60043 15.8913L3.55104 13.6787L1.82617 11.9981L3.55104 10.3176L2.60043 8.10491L4.83713 7.21222L4.80582 4.80387L7.21417 4.83518L8.10687 2.59848L10.3196 3.54909L12.0001 1.82422Z"
                            fill="#FF0F27"
                          />
                          <path
                            d="M20.6784 11.9989L19.2076 13.4327L20.0179 15.3203L18.1099 16.0815L18.1365 18.1356L16.0824 18.109L15.3212 20.017L13.4335 19.2067L11.9998 20.6775L10.4346 11.9989L11.9998 3.32031L13.4335 4.7911L15.3212 3.98083L16.0824 5.88883L18.1365 5.86223L18.1099 7.91631L20.0179 8.67753L19.2076 10.5652L20.6784 11.9989Z"
                            fill="#FF0F27"
                          />
                          <path
                            d="M11.9999 3.32031V20.6775L10.5662 19.2067L8.67851 20.017L7.91729 18.109L5.8632 18.1356L5.88981 16.0815L3.98181 15.3203L4.79207 13.4327L3.32129 11.9989L4.79207 10.5652L3.98181 8.67753L5.88981 7.91631L5.8632 5.86223L7.91729 5.88883L8.67851 3.98083L10.5662 4.7911L11.9999 3.32031Z"
                            fill="#FF6161"
                          />
                          <path
                            d="M9.35761 11.6002C8.26441 11.6002 7.375 10.7108 7.375 9.61763V9.09589C7.375 8.00269 8.26441 7.11328 9.35761 7.11328C10.4508 7.11328 11.3402 8.00269 11.3402 9.09589V9.61763C11.3402 10.7108 10.4508 11.6002 9.35761 11.6002ZM9.35761 8.15676C8.83978 8.15676 8.41848 8.57806 8.41848 9.09589V9.61763C8.41848 10.1355 8.83978 10.5568 9.35761 10.5568C9.87543 10.5568 10.2967 10.1355 10.2967 9.61763V9.09589C10.2967 8.57801 9.87538 8.15676 9.35761 8.15676Z"
                            fill="white"
                          />
                          <path
                            d="M14.6428 16.8854C13.5496 16.8854 12.6602 15.996 12.6602 14.9028V14.381C12.6602 13.2878 13.5496 12.3984 14.6428 12.3984C15.736 12.3984 16.6254 13.2878 16.6254 14.381V14.9028C16.6254 15.996 15.736 16.8854 14.6428 16.8854ZM14.6428 13.4419C14.1249 13.4419 13.7036 13.8632 13.7036 14.381V14.9028C13.7036 15.4206 14.1249 15.8419 14.6428 15.8419C15.1606 15.8419 15.5819 15.4206 15.5819 14.9028V14.381C15.5819 13.8632 15.1606 13.4419 14.6428 13.4419Z"
                            fill="white"
                          />
                          <path
                            d="M8.63419 14.6293L9.37207 15.3672L15.3652 9.37406L14.6273 8.63617L8.63419 14.6293Z"
                            fill="white"
                          />
                        </svg>
                        <svg
                          width="24"
                          height="24"
                          viewBox="0 0 24 24"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <g clipPath="url(#clip0_4401_15692)">
                            <path
                              d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z"
                              fill="#FEE187"
                            />
                            <path
                              d="M23.9928 12.3962L18.5146 6.91797L9.44674 13.9606L11.5099 16.0238L4.13379 18.0246L9.93321 23.824C10.6046 23.9406 11.2951 24.0018 11.9999 24.0018C18.4953 24.0019 23.7846 18.841 23.9928 12.3962Z"
                              fill="#FFC61B"
                            />
                            <path
                              d="M17.8788 14.4847H6.72717C6.20911 14.4847 5.78906 14.0647 5.78906 13.5466V7.60608C5.78906 7.08802 6.20911 6.66797 6.72717 6.66797H17.8788C18.3968 6.66797 18.8169 7.08802 18.8169 7.60608V13.5466C18.8169 14.0647 18.3969 14.4847 17.8788 14.4847Z"
                              fill="#8BC180"
                            />
                            <path
                              d="M17.8795 6.66797H12.2158V14.4847H17.8796C18.3976 14.4847 18.8177 14.0647 18.8177 13.5466V7.60608C18.8176 7.08802 18.3976 6.66797 17.8795 6.66797Z"
                              fill="#6CAF5F"
                            />
                            <path
                              d="M18.8169 8.00391H5.78906V9.93661H18.8169V8.00391Z"
                              fill="#3F3B3B"
                            />
                            <path
                              d="M18.8178 8.00391H12.2158V9.93661H18.8178V8.00391Z"
                              fill="#272525"
                            />
                            <path
                              d="M16.0897 18.4769H4.93811C4.42005 18.4769 4 18.0568 4 17.5388V11.5983C4 11.0802 4.42005 10.6602 4.93811 10.6602H16.0897C16.6078 10.6602 17.0278 11.0802 17.0278 11.5983V17.5388C17.0278 18.0569 16.6079 18.4769 16.0897 18.4769Z"
                              fill="#477F3C"
                            />
                            <path
                              d="M16.0896 10.6602H10.5791V18.4769H16.0896C16.6077 18.4769 17.0277 18.0568 17.0277 17.5388V11.5983C17.0277 11.0801 16.6078 10.6602 16.0896 10.6602Z"
                              fill="#2E5E24"
                            />
                            <path
                              d="M7.12516 13.9492C7.12516 13.9492 6.98017 15.6885 5.80469 16.4131C5.80469 16.4131 6.92566 16.0286 7.12516 17.025C7.12516 17.025 8.20412 16.2843 7.93033 14.078"
                              fill="#E09112"
                            />
                            <path
                              d="M9.46491 13.9492C9.46491 13.9492 9.6099 15.6885 10.7854 16.4131C10.7854 16.4131 9.66441 16.0286 9.46491 17.025C9.46491 17.025 8.38594 16.2843 8.65974 14.078"
                              fill="#FF5419"
                            />
                            <path
                              d="M4.97559 12.168C4.97559 12.168 5.41954 13.0974 5.03305 14.1925C5.03305 14.1925 5.54835 15.0137 8.0767 14.1925L8.04932 12.7402L4.97559 12.168Z"
                              fill="#FFC61B"
                            />
                            <path
                              d="M8.14114 12.8386C8.14114 12.8386 6.46629 10.9061 5.19415 11.7757C3.92201 12.6452 8.14114 12.8386 8.14114 12.8386Z"
                              fill="#E09112"
                            />
                            <path
                              d="M11.6215 12.1523C11.6215 12.1523 11.1709 13.0963 11.5573 14.1913C11.5573 14.1913 11.042 15.0126 8.51367 14.1913L8.54105 12.739L11.6215 12.1523Z"
                              fill="#EAA22F"
                            />
                            <path
                              d="M8.44922 12.8386C8.44922 12.8386 10.1241 10.9061 11.3962 11.7757C12.6683 12.6452 8.44922 12.8386 8.44922 12.8386Z"
                              fill="#FF5419"
                            />
                            <path
                              d="M8.29538 14.4013C8.79345 14.4013 9.19721 13.9976 9.19721 13.4995C9.19721 13.0014 8.79345 12.5977 8.29538 12.5977C7.79732 12.5977 7.39355 13.0014 7.39355 13.4995C7.39355 13.9976 7.79732 14.4013 8.29538 14.4013Z"
                              fill="#C92F00"
                            />
                            <path
                              d="M8.29492 12.5977C8.79292 12.5977 9.19675 13.0014 9.19675 13.4995C9.19675 13.9975 8.79302 14.4013 8.29492 14.4013V12.5977Z"
                              fill="#930000"
                            />
                          </g>
                          <defs>
                            <clipPath id="clip0_4401_15692">
                              <rect width="24" height="24" fill="white" />
                            </clipPath>
                          </defs>
                        </svg>
                      </div>
                    </div>
                    <form
                      onSubmit={submitDiscount}
                      className={`w-full border rounded-md flex flex-row ${
                        discountCodeError
                          ? "border-[var(--base-red)]"
                          : "border-[var(--light-border)]"
                      }`}
                    >
                      <input
                        disabled={discountCheck || giftCheck}
                        className="px-2 py-3 w-full border-none flex-1 outline-none placeholder:text-sm rounded-md"
                        type="text"
                        placeholder="کد تخفیف یا کارت هدیه خود را وارد کنید"
                        onChange={(e) => setDiscountInput(e.target.value)}
                      />
                      <button
                        disabled={!discountInput || discountCheck || giftCheck}
                        type="submit"
                        className="text-sm px-2 font-IRANSansBold text-[var(--light-blue)] disabled:text-gray-400 disabled:bg-[#fafafa] rounded-r-none m-0"
                      >
                        ثبت
                      </button>
                    </form>
                    {discountCodeError ? (
                      <p className="text-xs text-[var(--base-red)] font-IRANSansBold">
                        کد تخفیف یا کارت هدیه وارد شده صحیح نیست یا قبلا استفاده
                        شده است.
                      </p>
                    ) : (
                      discountCheck && (
                        <p className="text-xs font-IRANSansBold text-[var(--base-blue)]">
                          %{dicountPercent} تخفیف از کارمزد برای شما اعمال شد.
                        </p>
                      )
                    )}
                  </div>
                  <button
                    onClick={sendEmiratesBasketToApi}
                    className="add-checkout-button"
                    disabled={!chooseAddress || loadingButton}
                  >
                    {loadingButton ? (
                      <span
                        className={
                          loadingButton
                            ? "button-loader-white active"
                            : "button-loader-white"
                        }
                      ></span>
                    ) : null}
                    <p>
                      {" "}
                      {userInfoRedux?.is_admin
                        ? "ثبت سفارش برای مشتری"
                        : " ثبت و نهایی کردن سفارش"}
                    </p>
                  </button>
                </div>
              ) : (
                <button
                  type="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>
          </div>
        </div>
      </div>
    </div>
  );
}

export default CheckoutEmirates;