gift: enhacnements

src/pages/checkout/components/GiftCard.tsx

@@ -11,9 +11,10 @@ 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 } from "react";
+import { useMemo, useState } from "react";
 import CardAmountIcon from "components/Icons/CardAmountIcon";
 import ArabicPrice from "components/ArabicPrice";
+import { GiftAmountBottomSheet } from "pages/CardDetails/components/GiftAmountBottomSheet";
 
 export function GiftCard() {
   const { t } = useTranslation();
@@ -28,13 +29,32 @@ export function GiftCard() {
   const totalItems = useMemo(() => {
     return items.length || 0;
   }, [items]);
+  const [isGiftAmountBottomSheetOpen, setIsGiftAmountBottomSheetOpen] =
+    useState(false);
 
   return (
     <>
       <ProInputCard title={t("address.giftDetails")}>
-        <div className={styles.orderNotes}>
-          <Image src={currentCard?.imageURL} height={42} width={64} style={{height: 42, width: 64}} />
-          <div style={{ display: "flex", flexDirection: "column", gap: 4, width: "100%" }}>
+        <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,
@@ -90,93 +110,105 @@ export function GiftCard() {
         </div>
         <Divider style={{ margin: "10px 0" }} />
 
-        {giftDetails?.giftType === "items" && (
-          <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",
+        {giftDetails?.giftType === "vouchers" ||
+          (giftDetails?.giftType === "itemsAndVouchers" && (
+            <div
+              className={styles.orderNotes}
+              onClick={() => {
+                setIsGiftAmountBottomSheetOpen(true);
               }}
             >
-              <span
+              <div
                 style={{
-                  [isRTL ? "marginLeft" : "marginRight"]: 5,
-                  position: "relative",
-                  top: 3.5,
+                  height: 42,
+                  width: 64,
+                  backgroundColor: "var(--background)",
+                  borderRadius: 8,
                 }}
               >
-                <InvoiceIcon />
-              </span>
-              {t("checkout.viewOrder")} ( {totalItems} {t("cart.items")} )
-            </ProText>
-            {isRTL ? <BackIcon /> : <NextIcon />}
-          </div>
-        )}
+                <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>
 
-        {giftDetails?.giftType === "vouchers" && (
-          <div className={styles.orderNotes}>
-            <div
-              style={{
-                height: 42,
-                width: 64,
-                backgroundColor: "var(--background)",
-                borderRadius: 8,
-              }}
-            >
-              <CardAmountIcon />
+                <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>
+          ))}
+
+        <Divider style={{ margin: "10px 0" }} />
+        {giftDetails?.giftType === "items" ||
+          (giftDetails?.giftType === "itemsAndVouchers" && (
             <div
               style={{
                 display: "flex",
-                flexDirection: "column",
-                gap: 4,
-                width: "100%",
+                flexDirection: "row",
+                justifyContent: "space-between",
+              }}
+              onClick={() => {
+                navigate(`/${subdomain}/cart`);
               }}
             >
               <ProText
                 style={{
-                  fontWeight: 500,
-                  fontStyle: "Medium",
-                  fontSize: 14,
+                  fontWeight: 400,
+                  fontStyle: "Regular",
+                  fontSize: 12,
                   lineHeight: "140%",
                   letterSpacing: "0%",
                   color: "#777580",
+                  cursor: "pointer",
                 }}
               >
-                {t("checkout.giftSummary")}
-              </ProText>
-
-              <ProText
-                style={{
-                  fontWeight: 500,
-                  fontStyle: "Medium",
-                  fontSize: 14,
-                  lineHeight: "140%",
-                  letterSpacing: "0%",
-                  color: "#333333",
-                }}
-              >
-                <ArabicPrice price={giftDetails?.amount || 0} />
+                <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>
-            {isRTL ? <BackIcon iconSize={24} /> : <NextIcon iconSize={24} />}
-          </div>
-        )}
+          ))}
       </ProInputCard>
+      <GiftAmountBottomSheet
+        isOpen={isGiftAmountBottomSheetOpen}
+        onClose={() => setIsGiftAmountBottomSheetOpen(false)}
+      />
     </>
   );
 }