gift: enhacnements

src/assets/locals/ar.json

@@ -295,7 +295,8 @@
     "pleaseEnterPhoneNumber": "يرجى إدخال رقم الهاتف",
     "viewOrder": "عرض الطلب",
     "itemsSummary": "ملخص العناصر",
-    "removeSplitBill": "إزالة التقسيم"
+    "removeSplitBill": "إزالة التقسيم",
+    "cardBalance": "رصيد البطاقة"
   },
   "address": {
     "title": "العنوان",

src/assets/locals/en.json

@@ -307,7 +307,8 @@
     "pleaseEnterPhoneNumber": "Please enter phone number",
     "viewOrder": "View Order",
     "itemsSummary": "Items Summary",
-    "removeSplitBill": "Remove Split Bill"
+    "removeSplitBill": "Remove Split Bill",
+    "cardBalance": "Card Balance"
   },
   "address": {
     "title": "Address",

src/pages/CardDetails/CardDetails.tsx

@@ -64,6 +64,21 @@ export default function CardDetailsPage() {
     }
   }, [subdomain, form, navigate]);
 
+  useEffect(() => {
+    form.setFieldsValue({
+      receiverName: giftDetails?.receiverName,
+      senderName: giftDetails?.senderName,
+      senderPhone: giftDetails?.senderPhone,
+      senderEmail: giftDetails?.senderEmail,
+      receiverPhone: giftDetails?.receiverPhone,
+      message: giftDetails?.message,
+      amount: giftDetails?.amount,
+      cardId: giftDetails?.cardId,
+      giftType: giftDetails?.giftType,
+      isSecret: giftDetails?.isSecret,
+    });
+  }, [giftDetails?.receiverName, giftDetails?.senderName, form]);
+
   return (
     <>
       <Layout>

src/pages/CardDetails/components/GiftAmountBottomSheet.tsx

@@ -75,7 +75,7 @@ export function GiftAmountBottomSheet({
               value={amount}
               onChange={(value) => {
                 setAmount(value?.toString() || "");
-                dispatch(updateSplitBillAmount(Number(value) || 0));
+                dispatch(updateGiftDetails({ amount: Number(value) || 0 }));
               }}
               placeholder={t("cardDetails.amount")}
               min={0}

src/pages/cart/cart.module.css

@@ -3,6 +3,7 @@
   transition: all 0.3s ease;
   overflow: auto;
   scrollbar-width: none;
+  height: calc(92vh - 80px);
 }
 
 .cartLayout {

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}>
+        <div
-          <Image src={currentCard?.imageURL} height={42} width={64} style={{height: 42, width: 64}} />
+          className={styles.orderNotes}
-          <div style={{ display: "flex", flexDirection: "column", gap: 4, width: "100%" }}>
+          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,7 +110,65 @@ export function GiftCard() {
         </div>
         <Divider style={{ margin: "10px 0" }} />
 
-        {giftDetails?.giftType === "items" && (
+        {giftDetails?.giftType === "vouchers" ||
+          (giftDetails?.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>
+          ))}
+
+        <Divider style={{ margin: "10px 0" }} />
+        {giftDetails?.giftType === "items" ||
+          (giftDetails?.giftType === "itemsAndVouchers" && (
             <div
               style={{
                 display: "flex",
@@ -125,58 +203,12 @@ export function GiftCard() {
               </ProText>
               {isRTL ? <BackIcon /> : <NextIcon />}
             </div>
-        )}
+          ))}
-
-        {giftDetails?.giftType === "vouchers" && (
-          <div className={styles.orderNotes}>
-            <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.giftSummary")}
-              </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>
-        )}
       </ProInputCard>
+      <GiftAmountBottomSheet
+        isOpen={isGiftAmountBottomSheetOpen}
+        onClose={() => setIsGiftAmountBottomSheetOpen(false)}
+      />
     </>
   );
 }

src/pages/checkout/hooks/useOrder.ts

@@ -39,6 +39,7 @@ export default function useOrder() {
     pickupTime,
     pickupDate,
     pickupType,
+    giftDetails,
     order,
   } = useAppSelector(selectCart);
   const highestLoyaltyItem = useAppSelector(selectHighestPricedLoyaltyItem);
@@ -70,7 +71,7 @@ export default function useOrder() {
     });
 
     createOrder({
-      phone: mobilenumber || phone || order?.senderPhone,
+      phone: mobilenumber || phone || giftDetails?.senderPhone,
       comment: specialRequest,
       delivery_method: getDeliveryMethod(),
       timeslot: "",
@@ -112,13 +113,13 @@ export default function useOrder() {
       delivery_address: location?.address,
       ...(orderType === OrderType.Gift
         ? {
-            receiverName: order?.receiverName,
+            receiverName: giftDetails?.receiverName,
-            receiverPhone: order?.receiverPhone,
+            receiverPhone: giftDetails?.receiverPhone,
-            specialMessage: order?.message,
+            specialMessage: giftDetails?.message,
-            keepNameSecret: order?.isSecret,
+            keepNameSecret: giftDetails?.isSecret,
-            senderEmail: order?.senderEmail,
+            senderEmail: giftDetails?.senderEmail,
-            senderPhone: order?.senderPhone,
+            senderPhone: giftDetails?.senderPhone,
-            senderName: order?.senderName,
+            senderName: giftDetails?.senderName,
             dineType: orderType,
           }
         : {}),
@@ -173,7 +174,7 @@ export default function useOrder() {
     orderType,
     restaurantID,
     items,
-    order,
+    giftDetails,
     discount.isDiscount,
     discount.isGift,
     discount.value,