OwlCyberSecurity - MANAGER

Edit File: OtherSearchContent.tsx

"use client";
import React, {
  useState,
  useRef,
  useEffect,
  useTransition,
  FormEvent,
} from "react";
// import SelectUnitBox from "../components/SelectUnitBox";
// import Input from "../components/Input";
import { isValidUrl } from "../components/validation/isValidUrl";
import { toast } from "sonner";
import { toast as hotToast } from "react-hot-toast";
// import AddToOtherBasketButton from "../components/AddToOtherBasketButton";
import { PersianDigitToEnglish } from "../components/PersianDigitToEnglish";
// import SelectPriceBox from "../components/SelectPriceBox";
import Link from "next/link";
import { useSelector } from "react-redux";
import { activity, userInfoAccess } from "@/redux/features/auth-slice";
import { useRouter, useSearchParams } from "next/navigation";

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
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";
import { Button } from "@/components/ui/button";

function OtherSearchContent() {
  const inputRef = useRef<any>();
  const addressRef = useRef<any>();
  const searchParams = useSearchParams();
  const searchInputRef = useRef<any>();
  const router = useRouter();
  const userActivity = useSelector(activity);
  const userInfoRedux: any = useSelector<AllUserInfoType>(userInfoAccess);
  const [loadingButton, setLoadingButton] = useState(false);
  const [finalLoadingBtn, setFinalLoadingBtn] = useState(false);

const [searchInput, setSearchInput] = useState<any>(
    searchParams.get("url") ? window.location.search.slice(5) : ""
  );
  const [isPending, startTransition] = useTransition();
  const [priceInput, setPriceInput] = useState("100");
  const [wieghtInput, setWeightInput] = useState<number | any>(100);
  const [amountInput, setAmountInput] = useState("گرم");
  const [unitPrice, setUnitPrice] = useState("دلار آمریکا");
  const [QtyInput, setQtyInput] = useState<any>(1);
  const [disableInput, setDisableInput] = useState(false);
  const [calculateInfo, setCalculateInfo] = useState(false);

const [weightUnits, setWeightUnits] = useState([]);
  const [priceUnits, setPriceUnits] = useState<any>([]);
  const [selectItem, setSelectItem] = useState("دلار آمریکا");

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

const [calculateData, setCalculateData] = useState<any>();

const [discountInput, setDiscountInput] = useState("");
  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 scrollToTop = () => {
    window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
  };

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 getUnitsData() {
    var myHeaders = new Headers();
    myHeaders.append("Accept", "application/json");

var requestOptions = {
      method: "GET",
      headers: myHeaders,
    };

fetch(
      `${process.env.NEXT_PUBLIC_API_ADDRESS}calculator-index`,
      requestOptions
    )
      .then((response) => response.json())
      .then((result) => {
        // console.log(result);
        if (result.status === 200) {
          setWeightUnits(result.data.weight);
          setPriceUnits(result.data.exchanges);
        }
      })
      .catch((error) => console.log("error", error));
  }

useEffect(() => {
    getUnitsData();
  }, []);

function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    // console.log(priceUnits.find((item: any) => item.name === unitPrice).id);
    if (
      !searchInput ||
      !priceInput ||
      !wieghtInput ||
      !amountInput ||
      !QtyInput
    ) {
      toast.error("پر کردن همه فیلد ها اجباری می باشد.");
    } else {
      if (isValidUrl(searchInput)) {
        setLoadingButton(true);

var myHeaders = new Headers();
        myHeaders.append("Accept", "application/json");

var formdata = new FormData();
        formdata.append("price", priceInput);
        formdata.append("weight_unit", amountInput);
        formdata.append(
          "exchange_id",
          priceUnits.find((item: any) => item.name === unitPrice).id
        );
        formdata.append("region_id", "1");
        formdata.append("weight", wieghtInput);
        formdata.append("count", QtyInput);

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) {
              // console.log("success");
              setCalculateData(result.data.priceRial);
              setCalculateInfo(true);
              setDisableInput(true);
            } else {
              toast.error(result.message);
            }
          })
          .catch((error) => console.log("error", error))
          .finally(() => setLoadingButton(false));
      } else {
        toast.error("لینک نامعتبر است.");
      }
    }
  }

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 : "1");
    formdata.append("description", descInput);
    formdata.append("discount_code", discountInput);
    formdata.append("cart_name", "other");
    if (isAdmin) {
      formdata.append("phone_number", userMobile);
      formdata.append("user_id", userId);
    }
    formdata.append(`cart[0][link]`, searchInput);
    formdata.append(`cart[0][count]`, QtyInput);
    formdata.append(`cart[0][weight_unit]`, amountInput);
    formdata.append(`cart[0][firstweight]`, wieghtInput);
    formdata.append(
      `cart[0][exchange_id]`,
      priceUnits.find((item: any) => item.name === unitPrice).id
    );
    formdata.append(`cart[0][region_id]`, "1");
    formdata.append(`cart[0][image]`, "/assets/images/icons/charsooq-logo.png");
    formdata.append(`cart[0][name]`, searchInput);
    formdata.append(`cart[0][cost]`, priceInput);
    formdata.append(`cart[0][description]`, descInput);

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) {
          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 submitDiscount(e: any) {
    e.preventDefault();
    const token = localStorage.getItem("token");
    const myHeaders = new Headers();
    myHeaders.append("Accept", "application/json");
    myHeaders.append("Authorization", `Bearer ${token}`);

const formdata = new FormData();

formdata.append(`cart[0][count]`, QtyInput);
    formdata.append(`cart[0][weight_unit]`, amountInput);
    formdata.append(`cart[0][firstweight]`, wieghtInput);

formdata.append(
      `cart[0][exchange_id]`,
      priceUnits.find((item: any) => item.name === unitPrice).id
    );
    formdata.append(`cart[0][region_id]`, "1");

formdata.append(`cart[0][cost]`, priceInput);
    formdata.append("discount_code", discountInput);
    formdata.append("cart_name", "other");

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));
  }

return (
    <div className="mt-5 px-2.5 md:px-5 w-full flex flex-col">
      <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>

<input
              className="border-none w-full outline-none disabled:bg-white disabled:cursor-not-allowed"
              ref={searchInputRef}
              type="text"
              name="foreignInputSearch"
              placeholder="لینک کالای خود را از هر سایتی بدون محدودیت وارد کنید ..."
              value={searchInput}
              onChange={(e) => setSearchInput(e.target.value)}
              disabled={disableInput}
              autoComplete="off"
            />
          </div>
        </div>
        <div
          // onSubmit={handleSubmit}
          className="flex flex-col sm:flex-row items-end justify-between gap-8 mt-5 w-full"
        >
          <div className="flex flex-col lg:flex-row gap-4 justify-start items-end w-full">
            <div className="basis-1/3 w-full flex flex-col gap-1">
              <label
                className={`text-[14px] ${
                  priceInput
                    ? "text-[var(--base-blue)] font-IRANSansBold"
                    : "text-[var(--text-gray)]"
                } ${+priceInput <= 0 ? "text-[var(--base-red)]" : ""}`}
                htmlFor="price-input"
              >
                قیمت({unitPrice})
              </label>
              <div className="border rounded-[8px] flex items-center">
                <div className="flex items-center gap-3 px-1 md:px-2 border-l basis-1/2">
                  <svg
                    width="22"
                    height="22"
                    viewBox="0 0 20 20"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                    className="w-5 h-5 md:w-6 md:h-6 text-[var(--light-blue)]"
                  >
                    <g clipPath="url(#clip0_1364_15747)">
                      <path
                        d="M15.8333 16.6668H4.16667C3.062 16.6655 2.00296 16.2261 1.22185 15.445C0.440735 14.6639 0.00132321 13.6048 0 12.5002L0 7.50016C0.00132321 6.3955 0.440735 5.33646 1.22185 4.55535C2.00296 3.77423 3.062 3.33482 4.16667 3.3335H15.8333C16.938 3.33482 17.997 3.77423 18.7782 4.55535C19.5593 5.33646 19.9987 6.3955 20 7.50016V12.5002C19.9987 13.6048 19.5593 14.6639 18.7782 15.445C17.997 16.2261 16.938 16.6655 15.8333 16.6668ZM4.16667 5.00016C3.50363 5.00016 2.86774 5.26356 2.3989 5.7324C1.93006 6.20124 1.66667 6.83712 1.66667 7.50016V12.5002C1.66667 13.1632 1.93006 13.7991 2.3989 14.2679C2.86774 14.7368 3.50363 15.0002 4.16667 15.0002H15.8333C16.4964 15.0002 17.1323 14.7368 17.6011 14.2679C18.0699 13.7991 18.3333 13.1632 18.3333 12.5002V7.50016C18.3333 6.83712 18.0699 6.20124 17.6011 5.7324C17.1323 5.26356 16.4964 5.00016 15.8333 5.00016H4.16667ZM10 13.3335C9.34073 13.3335 8.69626 13.138 8.1481 12.7717C7.59994 12.4055 7.17269 11.8849 6.9204 11.2758C6.66811 10.6667 6.6021 9.99647 6.73072 9.34986C6.85933 8.70326 7.1768 8.10932 7.64298 7.64314C8.10915 7.17697 8.7031 6.8595 9.3497 6.73088C9.9963 6.60226 10.6665 6.66827 11.2756 6.92056C11.8847 7.17286 12.4053 7.6001 12.7716 8.14826C13.1378 8.69643 13.3333 9.34089 13.3333 10.0002C13.3333 10.8842 12.9821 11.7321 12.357 12.3572C11.7319 12.9823 10.8841 13.3335 10 13.3335ZM10 8.3335C9.67036 8.3335 9.34813 8.43124 9.07405 8.61438C8.79997 8.79752 8.58635 9.05781 8.4602 9.36236C8.33405 9.6669 8.30105 10.002 8.36536 10.3253C8.42967 10.6486 8.5884 10.9456 8.82149 11.1787C9.05458 11.4118 9.35155 11.5705 9.67485 11.6348C9.99815 11.6991 10.3333 11.6661 10.6378 11.54C10.9423 11.4138 11.2026 11.2002 11.3858 10.9261C11.5689 10.652 11.6667 10.3298 11.6667 10.0002C11.6667 9.55814 11.4911 9.13421 11.1785 8.82165C10.8659 8.50909 10.442 8.3335 10 8.3335ZM4.16667 6.66683C4.00185 6.66683 3.84073 6.7157 3.70369 6.80727C3.56665 6.89884 3.45984 7.02899 3.39677 7.18126C3.33369 7.33353 3.31719 7.50109 3.34935 7.66274C3.3815 7.82439 3.46087 7.97287 3.57741 8.08942C3.69395 8.20596 3.84244 8.28533 4.00409 8.31748C4.16574 8.34964 4.3333 8.33314 4.48557 8.27006C4.63784 8.20699 4.76799 8.10018 4.85956 7.96314C4.95113 7.8261 5 7.66498 5 7.50016C5 7.27915 4.9122 7.06719 4.75592 6.91091C4.59964 6.75463 4.38768 6.66683 4.16667 6.66683ZM15 7.50016C15 7.66498 15.0489 7.8261 15.1404 7.96314C15.232 8.10018 15.3622 8.20699 15.5144 8.27006C15.6667 8.33314 15.8343 8.34964 15.9959 8.31748C16.1576 8.28533 16.306 8.20596 16.4226 8.08942C16.5391 7.97287 16.6185 7.82439 16.6507 7.66274C16.6828 7.50109 16.6663 7.33353 16.6032 7.18126C16.5402 7.02899 16.4333 6.89884 16.2963 6.80727C16.1593 6.7157 15.9982 6.66683 15.8333 6.66683C15.6123 6.66683 15.4004 6.75463 15.2441 6.91091C15.0878 7.06719 15 7.27915 15 7.50016ZM4.16667 11.6668C4.00185 11.6668 3.84073 11.7157 3.70369 11.8073C3.56665 11.8988 3.45984 12.029 3.39677 12.1813C3.33369 12.3335 3.31719 12.5011 3.34935 12.6627C3.3815 12.8244 3.46087 12.9729 3.57741 13.0894C3.69395 13.206 3.84244 13.2853 4.00409 13.3175C4.16574 13.3496 4.3333 13.3331 4.48557 13.2701C4.63784 13.207 4.76799 13.1002 4.85956 12.9631C4.95113 12.8261 5 12.665 5 12.5002C5 12.2791 4.9122 12.0672 4.75592 11.9109C4.59964 11.7546 4.38768 11.6668 4.16667 11.6668ZM15 12.5002C15 12.665 15.0489 12.8261 15.1404 12.9631C15.232 13.1002 15.3622 13.207 15.5144 13.2701C15.6667 13.3331 15.8343 13.3496 15.9959 13.3175C16.1576 13.2853 16.306 13.206 16.4226 13.0894C16.5391 12.9729 16.6185 12.8244 16.6507 12.6627C16.6828 12.5011 16.6663 12.3335 16.6032 12.1813C16.5402 12.029 16.4333 11.8988 16.2963 11.8073C16.1593 11.7157 15.9982 11.6668 15.8333 11.6668C15.6123 11.6668 15.4004 11.7546 15.2441 11.9109C15.0878 12.0672 15 12.2791 15 12.5002Z"
                        fill="#2fa9ff"
                      />
                    </g>
                    <defs>
                      <clipPath id="clip0_1364_15747">
                        <rect width="20" height="20" fill="white" />
                      </clipPath>
                    </defs>
                  </svg>
                  <input
                    className="placeholder:text-sm outline-none py-[10px] bg-transparent w-full text-[14px] md:text-[16px] border-none"
                    type="text"
                    name="price-input"
                    id="price-input"
                    placeholder={`مبلغ(${unitPrice})`}
                    value={priceInput}
                    onChange={(e) => {
                      const regex = /^[0-9\b+۰+۱+۲+۳+۴+۵+۶+۷+۸+۹+.]+$/;
                      if (e.target.value === "" || regex.test(e.target.value)) {
                        setPriceInput(PersianDigitToEnglish(e.target.value));
                      }
                    }}
                    dir={priceInput ? "ltr" : "rtl"}
                    disabled={disableInput}
                  />
                </div>
                <Select
                  value={selectItem}
                  onValueChange={(value) => {
                    setSelectItem(value);
                    setUnitPrice(value);
                  }}
                  disabled={disableInput}
                  name="currency-input"
                >
                  <SelectTrigger className="border-none overflow-hidden basis-1/2">
                    <SelectValue placeholder="یک واحد را انتخاب کنید." />
                  </SelectTrigger>
                  <SelectContent className="">
                    {priceUnits?.map((item: any, i: number) => (
                      <SelectItem
                        className="border-b last:border-none p-2"
                        value={item.name}
                        key={item.id}
                      >
                        {item.name}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            </div>

<div className="basis-2/3 flex flex-col md:flex-row items-end gap-4 w-full">
              <div className="basis-2/3 w-full flex flex-col gap-1">
                <label
                  htmlFor="weight-input"
                  className={`text-[14px] whitespace-nowrap ${
                    wieghtInput && amountInput
                      ? "text-[var(--base-blue)] font-IRANSansBold"
                      : "text-[var(--text-gray)]"
                  } ${+wieghtInput <= 0 ? "text-[var(--base-red)]" : ""}`}
                >
                  وزن(اگر وزن محصول را نمیدانید 100 گرم وارد کنید.)
                </label>
                <div className="border rounded-[8px] flex items-center">
                  <div className="flex items-center gap-3 px-1 md:px-2 border-l basis-1/2">
                    <svg
                      width="20"
                      height="20"
                      viewBox="0 0 20 20"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                      className="w-5 h-5 md:w-6 md:h-6 text-[var(--light-blue)]"
                    >
                      <path
                        d="M15.835 1.67494H13.7201C13.1441 1.01841 12.4038 0.527072 11.5751 0.251419C10.7463 -0.0242334 9.85918 -0.0742605 9.00473 0.106479C7.9641 0.318691 7.02336 0.870362 6.3301 1.67494H4.17358C3.06941 1.67626 2.01085 2.11547 1.23009 2.89624C0.449325 3.677 0.0101117 4.73556 0.00878906 5.83972L0.00878906 15.8352C0.0101117 16.9394 0.449325 17.9979 1.23009 18.7787C2.01085 19.5595 3.06941 19.9987 4.17358 20H15.835C16.9391 19.9987 17.9977 19.5595 18.7785 18.7787C19.5592 17.9979 19.9984 16.9394 19.9998 15.8352V5.83972C19.9984 4.73556 19.5592 3.677 18.7785 2.89624C17.9977 2.11547 16.9391 1.67626 15.835 1.67494ZM10.0043 1.67494C10.8879 1.67494 11.7354 2.02597 12.3602 2.65081C12.9851 3.27565 13.3361 4.12311 13.3361 5.00677C13.3361 5.22768 13.2484 5.43955 13.0921 5.59576C12.9359 5.75197 12.7241 5.83972 12.5032 5.83972H10.7273L11.5303 4.6361C11.6529 4.4523 11.6974 4.22732 11.6542 4.01066C11.6109 3.794 11.4833 3.6034 11.2995 3.48079C11.1157 3.35818 10.8907 3.31361 10.6741 3.35688C10.4574 3.40015 10.2668 3.52772 10.1442 3.71152L8.72569 5.83972H7.50541C7.28449 5.83972 7.07263 5.75197 6.91642 5.59576C6.76021 5.43955 6.67245 5.22768 6.67245 5.00677C6.67245 4.12311 7.02348 3.27565 7.64832 2.65081C8.27316 2.02597 9.12062 1.67494 10.0043 1.67494ZM18.3339 15.8352C18.3339 16.498 18.0706 17.1336 17.6019 17.6022C17.1333 18.0708 16.4977 18.3341 15.835 18.3341H4.17358C3.51083 18.3341 2.87524 18.0708 2.40661 17.6022C1.93798 17.1336 1.6747 16.498 1.6747 15.8352V5.83972C1.6747 5.17698 1.93798 4.54138 2.40661 4.07276C2.87524 3.60413 3.51083 3.34085 4.17358 3.34085H5.33389C5.11807 3.93207 5.00728 4.55647 5.00653 5.18585C5.00719 5.8009 5.25181 6.39056 5.68671 6.82546C6.12161 7.26036 6.71128 7.50498 7.32632 7.50564H12.6822C13.2795 7.51113 13.8554 7.28415 14.2883 6.87269C14.7212 6.46123 14.9772 5.89754 15.002 5.3008C15.0104 4.63647 14.9137 3.97499 14.7155 3.34085H15.835C16.4977 3.34085 17.1333 3.60413 17.6019 4.07276C18.0706 4.54138 18.3339 5.17698 18.3339 5.83972V15.8352Z"
                        fill="#2FA9FF"
                      />
                    </svg>
                    <input
                      className="outline-none py-[10px] bg-transparent w-full text-[14px] md:text-[16px] border-none"
                      type="text"
                      name="weight-input"
                      id="weight-input"
                      placeholder="وزن"
                      value={wieghtInput}
                      onChange={(e) => {
                        const regex = /^[0-9\b+۰+۱+۲+۳+۴+۵+۶+۷+۸+۹+.]+$/;
                        if (
                          e.target.value === "" ||
                          regex.test(e.target.value)
                        ) {
                          setWeightInput(PersianDigitToEnglish(e.target.value));
                        }
                      }}
                      dir={wieghtInput ? "ltr" : "rtl"}
                      disabled={disableInput}
                    />
                  </div>
                  {/* <SelectUnitBox
                amountInput={amountInput}
                setAmountInput={setAmountInput}
                units={weightUnits}
                disableInput={disableInput}
              /> */}
                  <Select
                    value={amountInput}
                    onValueChange={(value) => setAmountInput(value)}
                    disabled={disableInput}
                    name="amount-input"
                  >
                    <SelectTrigger className="border-none overflow-hidden basis-1/2">
                      <SelectValue placeholder="یک واحد را انتخاب کنید." />
                    </SelectTrigger>
                    <SelectContent className="">
                      {weightUnits?.map((item: any, i: number) => (
                        <SelectItem
                          className="border-b last:border-none p-2"
                          value={item.title}
                          key={item.id}
                        >
                          {item.title}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              </div>

<div className="basis-1/3 w-full flex flex-col gap-1">
                <label
                  className={`text-[14px] ${
                    QtyInput
                      ? "text-[var(--base-blue)] font-IRANSansBold"
                      : "text-[var(--text-gray)]"
                  } ${+QtyInput <= 0 ? "text-[var(--base-red)]" : ""}`}
                  htmlFor="qty-input"
                >
                  تعداد
                </label>
                <div className="w-full flex items-center gap-3 border rounded-md pr-1 md:pr-2">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    strokeWidth="1.5"
                    stroke="currentColor"
                    className="w-5 h-5 md:w-6 md:h-6 text-[var(--light-blue)]"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5l-3.9 19.5m-2.1-19.5l-3.9 19.5"
                    />
                  </svg>
                  <input
                    className="border-none outline-none py-[10px] pl-5 bg-transparent rounded-[8px] w-full text-[14px] md:text-[16px] text-center"
                    type="text"
                    name="qty-input"
                    id="qty-input"
                    placeholder="تعداد"
                    value={QtyInput}
                    onChange={(e) => {
                      const regex = /^[0-9\b+۰+۱+۲+۳+۴+۵+۶+۷+۸+۹]+$/;
                      if (e.target.value === "" || regex.test(e.target.value)) {
                        setQtyInput(PersianDigitToEnglish(e.target.value));
                      }
                    }}
                    dir={QtyInput ? "ltr" : "rtl"}
                    disabled={disableInput}
                  />
                </div>
              </div>
            </div>
          </div>
          {disableInput ? (
            <div
              className="w-full md:w-auto flex items-center justify-center bg-[var(--base-blue)] hover:bg-[#0038a0] hover:text-white text-gray-100 rounded-md !py-2.5 !px-8 md:!px-4 h-auto m-0 cursor-pointer whitespace-nowrap text-center transition-all duration-75"
              onClick={() => {
                setDisableInput(false);
                setCalculateInfo(false);
                setDiscountInput("");
                setDiscountCodeError(false);
                setDiscountCheck(false);
                setGiftCheck(false);
                scrollToTop();
              }}
            >
              <p>محاسبه مجدد قیمت</p>
            </div>
          ) : (
            <Button
              className="w-full md:w-auto flex !gap-1 bg-[var(--base-blue)] hover:bg-[#0038a0] hover:text-white text-gray-100 rounded-md !py-2.5 !px-8 md:!px-4 h-auto m-0"
              variant="ghost"
              type="submit"
              disabled={disableInput}
            >
              {loadingButton ? (
                <span
                  className={
                    loadingButton
                      ? "button-loader-white active"
                      : "button-loader-white"
                  }
                ></span>
              ) : null}
              <div className="flex items-center gap-1">
                <p className="text-sm md:text-base">محاسبه گر قیمت</p>
                <span className="text-sm">(تقریبی)</span>
              </div>
            </Button>
          )}
        </div>
      </form>

{calculateInfo ? (
        <div className="flex flex-col w-full gap-[15px] mt-[15px]">
          <div className="flex items-center w-full">
            <p
              style={{ minWidth: "100px" }}
              className="text-[var(--text-gray)]"
            >
              نتیجه جستجو
            </p>
            <span className="w-full h-[1px] bg-[var(--very-light-border)]"></span>
          </div>
          <div className="flex flex-col md:items-center md:flex-row gap-[15px]">
            <div className="basis-1/3 flex flex-col gap-[15px]">
              <div className="flex items-center justify-between gap-3">
                <p className="font-IRANSansBold text-[14px] md:text-[16px] whitespace-nowrap">
                  قیمت کل کالا
                </p>
                <p className="font-IRANSansBold text-[14px] md:text-[16px] whitespace-nowrap">
                  {finalRialAfterDiscount && (discountCheck || giftCheck)
                    ? finalRialAfterDiscount?.toLocaleString()
                    : calculateData.finalRialPrice.toLocaleString()}{" "}
                  <span className="font-light text-[13px]">
                    {process.env.price}
                  </span>{" "}
                </p>
              </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]">
                        {finalRialAfterDiscount &&
                          giftCodeAmount &&
                          (
                            finalRialAfterDiscount + giftCodeAmount
                          )?.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">
                      {giftCodeAmount?.toLocaleString()}

{process.env.price}
                    </span>
                  </div>
                </>
              ) : null}
              <div className="flex items-center justify-between">
                <p className="text-[var(--text-gray)] text-[14px] md:text-[16px]">
                  قیمت به {selectItem}
                </p>
                <p className="text-[14px] md:text-[16px]">
                  {priceInput}{" "}
                  <span className="font-light text-[13px]">{selectItem}</span>{" "}
                </p>
              </div>
            </div>
            <div className="basis-1/3 flex flex-col gap-[15px] pl-0 md:pl-[15px] md:border-l md:border-r md:pr-[15px] border-[var(--very-light-border)]">
              <div className="flex items-center justify-between">
                <p className="text-[var(--text-gray)] text-[14px] md:text-[16px]">
                  هزینه خرید
                </p>
                <p className="text-[14px] md:text-[16px]">
                  {calculateData.buyCost.toLocaleString()}{" "}
                  <span className="font-light text-[13px]">
                    {process.env.price}
                  </span>{" "}
                </p>
              </div>
              <div className="flex items-center justify-between">
                <p className="text-[var(--text-gray)] text-[14px] md:text-[16px]">
                  هزینه کارمزد
                </p>
                <p className="text-[14px] md:text-[16px]">
                  {profitAfterDiscount && discountCheck
                    ? profitAfterDiscount.toLocaleString()
                    : calculateData.buyProfit.toLocaleString()}{" "}
                  <span className="font-light text-[13px]">
                    {process.env.price}
                  </span>{" "}
                </p>
              </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]">
                      {calculateData.buyProfit.toLocaleString()}{" "}
                      {process.env.price}
                    </p>
                  </div>
                </div>
              ) : null}
              <div className="flex items-center justify-between gap-3">
                <p className="text-[var(--text-gray)] text-[14px] md:text-[16px] whitespace-nowrap">
                  هزینه حمل و نقل
                </p>
                <p className="text-[14px] md:text-[16px] whitespace-nowrap">
                  {calculateData.shipBroker.toLocaleString()}{" "}
                  <span className="font-light text-[13px]">
                    {process.env.price}
                  </span>{" "}
                </p>
              </div>
            </div>
            <div className="basis-1/3 flex flex-col gap-[15px] pl-0 md:pl-[15px] justify-between">
              <div className="flex flex-col gap-1">
                <div className="w-full text-[var(--text-gray)] text-sm flex items-center justify-between">
                  <label
                    htmlFor="discount-code"
                    className="text-sm p-0 m-0 text-[var(--base-blue)] gap-2 flex items-center"
                  >
                    <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>
                  </label>
                  <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>
                <div className="flex flex-col gap-1">
                  <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-r-md"
                      type="text"
                      id="discount-code"
                      name="discount-code"
                      disabled={discountCheck || giftCheck}
                      placeholder="کد تخفیف یا کارت هدیه خود را وارد کنید"
                      onChange={(e) => setDiscountInput(e.target.value)}
                    />
                    <button
                      disabled={!discountInput || discountCheck}
                      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>
              </div>
              <div>
                {discountCheck && profitAfterDiscount ? (
                  <div className="flex items-center justify-between text-[14px] text-[var(--text-gray)]">
                    <p>تخفیف شما</p>
                    <span className="flex items-center gap-7">
                      {(
                        calculateData.buyProfit - profitAfterDiscount
                      ).toLocaleString()}{" "}
                      {process.env.price}
                    </span>
                  </div>
                ) : null}
              </div>
            </div>
          </div>
          <div className="flex flex-col lg:flex-row items-center justify-between gap-[20px] w-full">
            <input
              className="basis-3/4 p-[12px] outline-none rounded-[8px] w-full"
              type="text"
              name="description-input"
              placeholder="توضیحات خود را برای این محصول اضافه کنید (اختیاری)"
              value={descInput}
              onChange={(e) => setDescInput(e.target.value)}
              autoComplete="off"
            />
            <div className="basis-1/4 h-28 bg-white md:h-auto w-full fixed md:static bottom-0 flex flex-col border-t border-[var(--light-border)] right-0 z-20">
              <div className="flex md:hidden items-center justify-between px-6 pt-3">
                <p className="font-IRANSansBold">قیمت کالا</p>
                <span className="flex items-center gap-7 font-IRANSansBold pl-14 text-sm md:text-base">
                  {calculateData.finalRialPrice.toLocaleString()}

{process.env.price}
                </span>
              </div>
              <button
                onClick={sendItemToApi}
                className="bg-[var(--base-green)] text-white w-[90%] md:w-full bottom-0 flex items-center gap-4 text-base p-3"
                style={{ backgroundColor: "var(--base-green)" }}
              >
                {finalLoadingBtn ? (
                  <span
                    className={
                      finalLoadingBtn
                        ? "button-loader-white active"
                        : "button-loader-white"
                    }
                  ></span>
                ) : null}
                <p>
                  {" "}
                  {userInfoRedux?.is_admin
                    ? "ثبت سفارش برای مشتری"
                    : " ثبت و نهایی کردن سفارش"}
                </p>
              </button>
            </div>
            {/* <AddToOtherBasketButton
              link={searchInput}
              weight_unit={amountInput}
              firstweight={wieghtInput}
              exchange_id={1}
              region_id={1}
              cost={priceInput}
              buyCost={calculateData.buyCost}
              buyProfit={calculateData.buyProfit}
              shipBroker={calculateData.shipBroker}
              count={QtyInput}
              description={descInput}
              singleitemfullprice={calculateData.finalRialPrice}
            /> */}
          </div>
          {/* <p
            onClick={() => {
              setDisableInput(false);
              setCalculateInfo(false);
              setDiscountInput("");
              setDiscountCodeError(false);
              setDiscountCheck(false);
              scrollToTop();
            }}
            className="font-IRANSansBold text-[var(--base-blue)] text-[14px] underline cursor-pointer text-end col-end-4"
          >
            محاسبه مجدد قیمت
          </p> */}
        </div>
      ) : null}
    </div>
  );
}

export default OtherSearchContent;