web-menu-react-version-/src/pages/checkout/components/GiftCard.tsx

import { Divider, Image } from "antd";
import ProInputCard from "components/ProInputCard/ProInputCard";
import ProText from "components/ProText";
import { selectCart } from "features/order/orderSlice";
import { EGiftCard } from "pages/CardDetails/type";
import { useTranslation } from "react-i18next";
import { useGetEGiftCardsQuery } from "redux/api/others";
import { useAppSelector } from "redux/hooks";
import styles from "./GiftDetails.module.css";
import { useNavigate, useParams } from "react-router-dom";
import InvoiceIcon from "components/Icons/order/InvoiceIcon";
import BackIcon from "components/Icons/BackIcon";
import NextIcon from "components/Icons/NextIcon";
import { useMemo, useState } from "react";
import CardAmountIcon from "components/Icons/CardAmountIcon";
import ArabicPrice from "components/ArabicPrice";
import { GiftAmountBottomSheet } from "pages/CardDetails/components/GiftAmountBottomSheet";
import { GiftType } from "components/CustomBottomSheet/GiftTypeBottomSheet";

export function GiftCard() {
  const { t } = useTranslation();
  const { giftDetails, items } = useAppSelector(selectCart);
  const { data: cards } = useGetEGiftCardsQuery();
  const currentCard = cards?.find(
    (card: EGiftCard) => card.id == giftDetails?.cardId,
  );
  const navigate = useNavigate();
  const { subdomain } = useParams();
  const { isRTL } = useAppSelector((state) => state.locale);
  const totalItems = useMemo(() => {
    return items.length || 0;
  }, [items]);
  const [isGiftAmountBottomSheetOpen, setIsGiftAmountBottomSheetOpen] =
    useState(false);

  console.log(giftDetails?.giftType);

  return (
    <>
      <ProInputCard title={t("address.giftDetails")}>
        <div
          className={styles.orderNotes}
          onClick={() => {
            navigate(`/${subdomain}/card-details`);
          }}
        >
          <Image
            src={currentCard?.imageURL}
            height={42}
            width={64}
            style={{ height: 42, width: 64 }}
          />
          <div
            style={{
              display: "flex",
              flexDirection: "column",
              gap: 4,
              width: "100%",
            }}
          >
            <ProText
              style={{
                fontWeight: 500,
                fontStyle: "Medium",
                fontSize: 14,
                lineHeight: "140%",
                letterSpacing: "0%",
                color: "#333333",
              }}
            >
              {t("checkout.giftSummary")}
            </ProText>
            <ProText
              style={{
                fontWeight: 400,
                fontStyle: "Regular",
                fontSize: 12,
                lineHeight: "140%",
                letterSpacing: "0%",
                color: "#5F6C7B",
              }}
            >
              {t("checkout.holdayGiftCard")} - {t("checkout.messageIncluded")}
            </ProText>
            <div style={{ display: "flex", flexDirection: "row", gap: 4 }}>
              <ProText
                style={{
                  fontWeight: 400,
                  fontStyle: "Regular",
                  fontSize: 12,
                  lineHeight: "140%",
                  letterSpacing: "0%",
                  color: "#040F35",
                }}
              >
                {t("checkout.to")} :
              </ProText>
              <ProText
                style={{
                  fontWeight: 400,
                  fontStyle: "Regular",
                  fontSize: 12,
                  lineHeight: "140%",
                  letterSpacing: "0%",
                  color: "#5F6C7B",
                }}
              >
                {giftDetails?.receiverName}
              </ProText>
            </div>
          </div>
          {isRTL ? <BackIcon iconSize={24} /> : <NextIcon iconSize={24} />}
        </div>

        <Divider style={{ margin: "10px 0" }} />

        {(giftDetails?.giftType === GiftType.Vouchers ||
          giftDetails?.giftType === GiftType.ItemsAndVouchers) && (
          <>
            <div
              className={styles.orderNotes}
              onClick={() => {
                setIsGiftAmountBottomSheetOpen(true);
              }}
            >
              <div
                style={{
                  height: 42,
                  width: 64,
                  backgroundColor: "var(--background)",
                  borderRadius: 8,
                }}
              >
                <CardAmountIcon />
              </div>
              <div
                style={{
                  display: "flex",
                  flexDirection: "column",
                  gap: 4,
                  width: "100%",
                }}
              >
                <ProText
                  style={{
                    fontWeight: 500,
                    fontStyle: "Medium",
                    fontSize: 14,
                    lineHeight: "140%",
                    letterSpacing: "0%",
                    color: "#777580",
                  }}
                >
                  {t("checkout.cardBalance")}
                </ProText>

                <ProText
                  style={{
                    fontWeight: 500,
                    fontStyle: "Medium",
                    fontSize: 14,
                    lineHeight: "140%",
                    letterSpacing: "0%",
                    color: "#333333",
                  }}
                >
                  <ArabicPrice price={giftDetails?.amount || 0} />
                </ProText>
              </div>
              {isRTL ? <BackIcon iconSize={24} /> : <NextIcon iconSize={24} />}
            </div>
            {giftDetails?.giftType === GiftType.ItemsAndVouchers && (
              <Divider style={{ margin: "10px 0" }} />
            )}
          </>
        )}

        {(giftDetails?.giftType === GiftType.Items ||
          giftDetails?.giftType === GiftType.ItemsAndVouchers) && (
          <div
            style={{
              display: "flex",
              flexDirection: "row",
              justifyContent: "space-between",
            }}
            onClick={() => {
              navigate(`/${subdomain}/cart`);
            }}
          >
            <ProText
              style={{
                fontWeight: 400,
                fontStyle: "Regular",
                fontSize: 12,
                lineHeight: "140%",
                letterSpacing: "0%",
                color: "#777580",
                cursor: "pointer",
              }}
            >
              <span
                style={{
                  [isRTL ? "marginLeft" : "marginRight"]: 5,
                  position: "relative",
                  top: 3.5,
                }}
              >
                <InvoiceIcon />
              </span>
              {t("checkout.viewOrder")} ( {totalItems} {t("cart.items")} )
            </ProText>
            {isRTL ? <BackIcon /> : <NextIcon />}
          </div>
        )}
      </ProInputCard>
      <GiftAmountBottomSheet
        isOpen={isGiftAmountBottomSheetOpen}
        onClose={() => setIsGiftAmountBottomSheetOpen(false)}
      />
    </>
  );
}