From 78f1227a3df078080a0568c15b324db4dc5d7920 Mon Sep 17 00:00:00 2001 From: Mohammed Al-yaseen Date: Thu, 1 Jan 2026 16:16:25 +0300 Subject: [PATCH] gift: enhacnements --- src/assets/locals/ar.json | 3 +- src/assets/locals/en.json | 3 +- src/pages/CardDetails/CardDetails.tsx | 15 ++ .../components/GiftAmountBottomSheet.tsx | 2 +- src/pages/cart/cart.module.css | 1 + src/pages/checkout/components/GiftCard.tsx | 170 +++++++++++------- src/pages/checkout/hooks/useOrder.ts | 19 +- 7 files changed, 132 insertions(+), 81 deletions(-) diff --git a/src/assets/locals/ar.json b/src/assets/locals/ar.json index 3009354..3197ecb 100644 --- a/src/assets/locals/ar.json +++ b/src/assets/locals/ar.json @@ -295,7 +295,8 @@ "pleaseEnterPhoneNumber": "يرجى إدخال رقم الهاتف", "viewOrder": "عرض الطلب", "itemsSummary": "ملخص العناصر", - "removeSplitBill": "إزالة التقسيم" + "removeSplitBill": "إزالة التقسيم", + "cardBalance": "رصيد البطاقة" }, "address": { "title": "العنوان", diff --git a/src/assets/locals/en.json b/src/assets/locals/en.json index 18407fc..20de8dd 100644 --- a/src/assets/locals/en.json +++ b/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", diff --git a/src/pages/CardDetails/CardDetails.tsx b/src/pages/CardDetails/CardDetails.tsx index e347d76..2f823b2 100644 --- a/src/pages/CardDetails/CardDetails.tsx +++ b/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 ( <> diff --git a/src/pages/CardDetails/components/GiftAmountBottomSheet.tsx b/src/pages/CardDetails/components/GiftAmountBottomSheet.tsx index b38bb5e..9881f71 100644 --- a/src/pages/CardDetails/components/GiftAmountBottomSheet.tsx +++ b/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} diff --git a/src/pages/cart/cart.module.css b/src/pages/cart/cart.module.css index 01bd80b..72281f2 100644 --- a/src/pages/cart/cart.module.css +++ b/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 { diff --git a/src/pages/checkout/components/GiftCard.tsx b/src/pages/checkout/components/GiftCard.tsx index c80c1b7..b54159b 100644 --- a/src/pages/checkout/components/GiftCard.tsx +++ b/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 ( <> -
- -
+
{ + navigate(`/${subdomain}/card-details`); + }} + > + +
- {giftDetails?.giftType === "items" && ( -
{ - navigate(`/${subdomain}/cart`); - }} - > - { + setIsGiftAmountBottomSheetOpen(true); }} > - - - - {t("checkout.viewOrder")} ( {totalItems} {t("cart.items")} ) - - {isRTL ? : } -
- )} + +
+
+ + {t("checkout.cardBalance")} + - {giftDetails?.giftType === "vouchers" && ( -
-
- + + + +
+ {isRTL ? : }
+ ))} + + + {giftDetails?.giftType === "items" || + (giftDetails?.giftType === "itemsAndVouchers" && (
{ + navigate(`/${subdomain}/cart`); }} > - {t("checkout.giftSummary")} - - - - + + + + {t("checkout.viewOrder")} ( {totalItems} {t("cart.items")} ) + {isRTL ? : }
- {isRTL ? : } -
- )} + ))} + setIsGiftAmountBottomSheetOpen(false)} + /> ); } diff --git a/src/pages/checkout/hooks/useOrder.ts b/src/pages/checkout/hooks/useOrder.ts index 2a022ac..39f6256 100644 --- a/src/pages/checkout/hooks/useOrder.ts +++ b/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, - receiverPhone: order?.receiverPhone, - specialMessage: order?.message, - keepNameSecret: order?.isSecret, - senderEmail: order?.senderEmail, - senderPhone: order?.senderPhone, - senderName: order?.senderName, + receiverName: giftDetails?.receiverName, + receiverPhone: giftDetails?.receiverPhone, + specialMessage: giftDetails?.message, + keepNameSecret: giftDetails?.isSecret, + senderEmail: giftDetails?.senderEmail, + senderPhone: giftDetails?.senderPhone, + senderName: giftDetails?.senderName, dineType: orderType, } : {}), @@ -173,7 +174,7 @@ export default function useOrder() { orderType, restaurantID, items, - order, + giftDetails, discount.isDiscount, discount.isGift, discount.value,