OwlCyberSecurity - MANAGER

Edit File: ChooseAddressForBasket.tsx

"use client";

import { userAddressAccess, userInfoAccess } from "@/redux/features/auth-slice";
import { AddressDataType, AllUserInfoType, AmazonCartType } from "@/typing";
import Link from "next/link";
import React, { useEffect, useRef, useState, FormEvent } from "react";
import { useSelector } from "react-redux";
import Modal from "../components/Modal";
import { checkLang } from "@/app/components/validation/CheckLang";

interface PageProps {
  setChooseAddress: any;
  chooseAddress: any;
  amazonCart: AmazonCartType[] | any;
  setShowAddress: any;
  descInput: any;
  setDescInput: any;
  userAddress: any;
  checkout: string;
  setDiscountInput: any;
  setShowDiscountInput: any;
  setDiscountCodeError: any;
  setDiscountCheck: any;
  setGiftCheck?: any;
}

function ChooseAddressForBasket({
  setChooseAddress,
  chooseAddress,
  amazonCart,
  setShowAddress,
  descInput,
  setDescInput,
  userAddress,
  checkout,
  setDiscountInput,
  setShowDiscountInput,
  setDiscountCodeError,
  setDiscountCheck,
  setGiftCheck,
}: PageProps) {
  const [showPopup, setShowPopup] = useState<boolean>(false);
  let popupRef = useRef<any>(null);
  const userInfoRedux: any = useSelector<AllUserInfoType>(userInfoAccess);

const [state, setState] = useState<any>([]);
  const address2 = useSelector(userAddressAccess);

const [showDesc, setShowDesc] = useState(false);

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

function getAddress() {
    const token = localStorage.getItem("token");
    var myHeaders = new Headers();
    myHeaders.append("Accept", "application/json");
    myHeaders.append("Authorization", `Bearer ${token}`);

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

fetch(`${process.env.NEXT_PUBLIC_API_ADDRESS}address-index`, requestOptions)
      .then((response) => response.json())
      .then((result) => {
        // console.log(result);
        if (result.status === 200) {
          setState(result.data.state);
        }
      })
      .catch((error) => console.log("error", error));
  }
  useEffect(() => {
    getAddress();
  }, []);
  return (
    <div className="checkout-content-right-section">
      <Modal mounted={showPopup} setMounted={setShowPopup}>
        <div
          ref={popupRef}
          className="flex flex-col bg-white shadow-lg w-full max-w-[95vw] md:max-w-[420px] rounded-md p-2"
        >
          <div className="flex flex-col">
            <div className=" pr-[20px] pt-[20px] pb-[10px] flex items-center justify-between border-b border-[var(--very-light-border)]">
              <div className="flex flex-col gap-2">
                <h4 className="font-IRANSansBold text-[18px]">توضیحات</h4>
                <p className="text-[var(--text-gray)] text-[14px]">
                  توضیحات تکمیلی درباره سبد خرید خود وارد کنید.
                </p>
              </div>
              <span
                onClick={() => setShowPopup(false)}
                className="text-[var(--text-gray)] text-[30px] font-light text-end pl-3 cursor-pointer"
              >
                &times;
              </span>
            </div>

<form
              onSubmit={(e) => {
                e.preventDefault();
                setShowDesc(true);
                setShowPopup(false);
              }}
              className="p-[20px] flex flex-col gap-[40px]"
              action=""
            >
              <div className="flex flex-col gap-2">
                <label
                  className="font-IRANSansBold text-[#4D4D4D]"
                  htmlFor="desc"
                >
                  توضیحات
                </label>
                <textarea
                  name="desc"
                  id="desc"
                  rows={2}
                  placeholder="توضیحات خود را اینجا بنویسید."
                  value={descInput}
                  onChange={(e) => setDescInput(e.target.value)}
                ></textarea>
              </div>
              <button
                type="submit"
                className="bg-[var(--base-blue)] text-white text-[14px] w-full"
              >
                <p>ثبت و ادامه</p>
              </button>
            </form>
          </div>
        </div>
      </Modal>
      <div className="flex items-center justify-between border-b pb-3">
        <div className="flex items-center text-[18px] justify-between w-full">
          <h3 className="font-IRANSansBold">
            {userInfoRedux?.is_admin ? "اطلاعات مشتری" : "آدرس و اطلاعات شما"}
          </h3>
          {!userInfoRedux?.is_admin && (
            <Link
              href="/dashboard/profile?address=true&callbackRoute=checkout"
              className="text-[var(--base-blue)] text-[14px] underline cursor-pointer font-IRANSansBold"
            >
              افزودن آدرس جدید
            </Link>
          )}
        </div>
      </div>
      <div>
        {userInfoRedux?.is_admin
          ? null
          : address2
          ? address2.map((item: AddressDataType) => (
              <div
                key={item.id}
                onClick={() => {
                  setChooseAddress(item.id);
                }}
                className="flex flex-col gap-3 border-b py-[15px] cursor-pointer"
              >
                <div className="flex items-center gap-2">
                  <span
                    className={`flex items-center justify-center w-5 h-5  rounded-[50%] flex-none ${
                      chooseAddress === item.id
                        ? "bg-[var(--base-blue)]"
                        : "bg-gray-300"
                    }`}
                  >
                    {chooseAddress === item.id ? (
                      <span
                        className={`block w-2.5 h-2.5  rounded-[50%] bg-white`}
                      ></span>
                    ) : null}
                  </span>
                  <p className="font-IRANSansBold text-[14px]">
                    {item.content}
                  </p>
                </div>
                <div className="flex items-center justify-between md:justify-evenly">
                  <div className="flex items-center gap-2">
                    <svg
                      width="15"
                      height="17"
                      viewBox="0 0 15 17"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M7.66715 0.130859C6.21453 0.130892 4.79465 0.562336 3.58757 1.37047C2.3805 2.17861 1.44063 3.32702 0.887155 4.67007C0.333682 6.01312 0.191546 7.49028 0.478775 8.91422C0.766004 10.3382 1.46966 11.6447 2.50049 12.6682L5.12915 15.0955C5.80481 15.7569 6.71197 16.1284 7.65744 16.1309C8.60292 16.1334 9.51202 15.7667 10.1912 15.1089L12.8525 12.6495C13.878 11.6239 14.5764 10.3173 14.8594 8.89479C15.1423 7.4723 14.9971 5.99784 14.4421 4.65788C13.887 3.31792 12.9471 2.17262 11.7412 1.36682C10.5353 0.561023 9.11752 0.130905 7.66715 0.130859V0.130859ZM11.9285 11.6889L9.27249 14.1429C8.83577 14.5543 8.25778 14.7825 7.65776 14.7802C7.05774 14.778 6.48147 14.5456 6.04782 14.1309L3.42449 11.7069C2.72679 11.0092 2.21193 10.1501 1.92551 9.20593C1.63908 8.26171 1.58995 7.26143 1.78245 6.29369C1.97494 5.32595 2.40314 4.42061 3.02909 3.65788C3.65505 2.89515 4.45945 2.29857 5.37105 1.92097C6.28264 1.54337 7.27329 1.39642 8.25524 1.49313C9.23719 1.58985 10.1801 1.92723 11.0006 2.47541C11.821 3.02359 12.4935 3.76564 12.9587 4.63583C13.4238 5.50602 13.6671 6.47749 13.6672 7.46419C13.6701 8.24822 13.518 9.02508 13.2196 9.75011C12.9212 10.4751 12.4824 11.134 11.9285 11.6889ZM10.8072 5.23953L8.80715 3.85219C8.47208 3.62066 8.07444 3.49664 7.66715 3.49664C7.25986 3.49664 6.86223 3.62066 6.52715 3.85219L4.52715 5.23953C4.26176 5.42364 4.04491 5.66929 3.89514 5.95547C3.74537 6.24166 3.66715 6.55986 3.66715 6.88286V9.13086C3.66715 9.57289 3.84275 9.99681 4.15531 10.3094C4.46787 10.6219 4.89179 10.7975 5.33382 10.7975H10.0005C10.4425 10.7975 10.8664 10.6219 11.179 10.3094C11.4916 9.99681 11.6672 9.57289 11.6672 9.13086V6.88286C11.6672 6.55986 11.5889 6.24166 11.4392 5.95547C11.2894 5.66929 11.0725 5.42364 10.8072 5.23953ZM10.3338 9.13086C10.3338 9.21927 10.2987 9.30405 10.2362 9.36656C10.1737 9.42908 10.0889 9.46419 10.0005 9.46419H9.00049V8.13086C9.00049 7.95405 8.93025 7.78448 8.80523 7.65946C8.6802 7.53443 8.51063 7.46419 8.33382 7.46419H7.00049C6.82368 7.46419 6.65411 7.53443 6.52908 7.65946C6.40406 7.78448 6.33382 7.95405 6.33382 8.13086V9.46419H5.33382C5.24542 9.46419 5.16063 9.42908 5.09812 9.36656C5.03561 9.30405 5.00049 9.21927 5.00049 9.13086V6.88286C5.00045 6.77516 5.02651 6.66904 5.07643 6.57361C5.12636 6.47817 5.19866 6.39625 5.28715 6.33486L7.28715 4.94753C7.39896 4.87064 7.53146 4.82948 7.66715 4.82948C7.80285 4.82948 7.93535 4.87064 8.04715 4.94753L10.0472 6.33486C10.1356 6.39625 10.208 6.47817 10.2579 6.57361C10.3078 6.66904 10.3339 6.77516 10.3338 6.88286V9.13086Z"
                        fill="#BDBDBD"
                      />
                    </svg>

<span className="text-[var(--text-gray)]">
                      {
                        state.find((test: any) => test.id === item.state_id)
                          ?.title
                      }
                    </span>
                  </div>
                  {item.postalcode ? (
                    <div className="flex items-center gap-2">
                      <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-[#BDBDBD]"
                      >
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"
                        />
                      </svg>
                      <span className="text-[var(--text-gray)]">
                        {item.postalcode}
                      </span>
                    </div>
                  ) : null}
                </div>
              </div>
            ))
          : null}
        {/* {!userInfoRedux.name ? (
          <div className="mt-3">
            <span className="error-message">
              مشخصات کاربری خود را تکمیل کنید.
            </span>
          </div>
        ) : null} */}
        {/* {userAddress.length !== 0 ? (
          !chooseAddress ? (
            <div className="mt-3">
              <span className="error-message">یک آدرس انتخاب کنید.</span>
            </div>
          ) : null
        ) : null} */}
        {/* {userAddress.length === 0 ? (
          <div className="mt-3">
            <span className="error-message">حداقل یک آدرس وارد کنید.</span>
          </div>
        ) : null} */}
      </div>
      {showDesc ? (
        <div className="flex flex-col gap-3 border-b border-[var(--very-light-border)] py-[20px]">
          <div className="flex items-center justify-between">
            <p className="font-IRANSansBold">توضیحات</p>
            <p
              onClick={() => setShowDesc((prev) => !prev)}
              className="font-IRANSansBold text-[var(--base-blue)] text-[14px] underline cursor-pointer text-end col-end-4"
            >
              ویرایش توضیحات
            </p>
          </div>
          <p className="text-[var(--text-gray)] text-[14px] break-words">
            {descInput}
          </p>
        </div>
      ) : null}
      {showDesc ? null : (
        <div className="my-4">
          <form
            action=""
            onSubmit={(e) => {
              e.preventDefault();
              if (descInput) {
                setShowDesc(true);
              }
            }}
          >
            <label
              className={`need text-[14px] ${
                descInput
                  ? "text-[var(--base-blue)] font-IRANSansBold"
                  : "text-[var(--text-gray)]"
              }`}
              htmlFor="add-desc"
            >
              افزودن توضیحات{" "}
              <span className=" font-IRANSansBold">(اختیاری)</span>
            </label>
            <div className="flex flex-col md:flex-col gap-4">
              <textarea
                name="add-desc"
                id="add-desc"
                rows={3}
                placeholder="توضیحات خود را اینجا بنویسید."
                value={descInput}
                onChange={(e) => setDescInput(e.target.value)}
              ></textarea>
              <button
                className="bg-[var(--base-blue)] text-white m-0 mr-auto md:mb-auto w-auto"
                type="submit"
              >
                ثبت توضیحات
              </button>
            </div>
          </form>
        </div>
      )}
      <div className="grid grid-cols-3 gap-3 mt-3">
        {amazonCart.slice(0, 2).map((item: AmazonCartType, i: number) => (
          <div
            // href={`/product/${item.asin}`}
            key={i}
            className={`flex flex-col gap-1 items-center justify-between shadow-lg p-[10px] rounded-[12px] text-[14px] col-start-1 col-end-4 lg:col-start-auto lg:col-end-auto ${
              checkLang(item.name) ? "rtl" : "ltr"
            }`}
          >
            <img
              className="object-contain max-h-[110px] flex-grow mb-2"
              src={item.image}
              alt={item.name}
            />
            <p className="font-IRANSansBold line-clamp-2 break-words row-end-2 lg:row-end-auto w-full">
              {item.name}
            </p>
            <span className="font-IRANSansBold">{item.count} عدد</span>
            <span className="text-[var(--text-gray)]">{deliveryTime()}</span>
          </div>
        ))}
        {/* {showDesc ? null : (
          <p
            onClick={() => setShowPopup((prev) => !prev)}
            className="font-IRANSansBold text-[var(--base-blue)] text-[14px] underline cursor-pointer text-start md:text-end md:col-end-4 whitespace-nowrap"
          >
            افزودن توضیحات
          </p>
        )} */}
        {amazonCart
          .slice(2, amazonCart.length)
          .map((item: AmazonCartType, i: number) => (
            <div
              // href={`/product/${item.asin}`}
              key={i}
              className={`flex flex-col gap-1 items-center justify-between shadow-lg p-[10px] rounded-[12px] text-[14px] col-start-1 col-end-4 lg:col-start-auto lg:col-end-auto ${
                checkLang(item.name) ? "rtl" : "ltr"
              }`}
            >
              <img
                className="object-contain max-h-[110px] flex-grow mb-2"
                src={item.image}
                alt={item.name}
              />
              <p className="font-IRANSansBold line-clamp-2 break-words row-end-2 lg:row-end-auto w-full">
                {item.name}
              </p>
              <span className="font-IRANSansBold">{item.count} عدد</span>
              <span className="text-[var(--text-gray)]">{deliveryTime()}</span>
            </div>
          ))}
        <p
          onClick={() => {
            setShowAddress(false);
            setDiscountInput("");
            setShowDiscountInput(false);
            setDiscountCodeError(false);
            setDiscountCheck(false);
            if (setGiftCheck) {
              console.log("test");
              setGiftCheck(false);
            }
          }}
          className="font-IRANSansBold text-[var(--base-blue)] text-[14px] underline cursor-pointer text-end col-end-4 flex items-end justify-end"
        >
          بازگشت
        </p>
      </div>
    </div>
  );
}

export default ChooseAddressForBasket;