gift: enhance items flow

src/components/CustomBottomSheet/GiftTypeBottomSheet.tsx

@@ -6,6 +6,7 @@ import GiftItemsBtnIcon from "components/Icons/GiftItemsBtnIcon";
 import GiftBalanceBtnIcon from "components/Icons/GiftBalanceBtnIcon";
 import GiftItemsAndBalanceBtnIcon from "components/Icons/GiftItemsAndBalanceBtnIcon";
 import ProText from "components/ProText";
+import { useParams, useNavigate } from "react-router-dom";
 
 interface GiftTypeBottomSheetProps {
   isOpen: boolean;
@@ -13,6 +14,12 @@ interface GiftTypeBottomSheetProps {
   onSave?: () => void;
 }
 
+export enum GiftType {
+  Items = "items",
+  Vouchers = "vouchers",
+  ItemsAndVouchers = "itemsAndVouchers",
+}
+
 export function GiftTypeBottomSheet({
   isOpen,
   onClose,
@@ -20,11 +27,15 @@ export function GiftTypeBottomSheet({
 }: GiftTypeBottomSheetProps) {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
-
+  const { subdomain } = useParams();
-  const handleSave = (giftType: string) => {
+  const navigate = useNavigate();
-    dispatch(updateGiftDetails({ giftType: giftType }));
+  const handleSave = (giftType: GiftType) => {
+    dispatch(updateGiftDetails({ giftType }));
     onClose();
     onSave?.();
+    if (giftType !== GiftType.Vouchers)
+      navigate(`/${subdomain}/menu?orderType=gift`);
+    else navigate(`/${subdomain}/e-gift-cards`);
   };
 
   const handleCancel = () => {
@@ -40,6 +51,7 @@ export function GiftTypeBottomSheet({
     textAlign: "center",
     color: "#86858E",
   };
+
   return (
     <ProBottomSheet
       isOpen={isOpen}
@@ -59,19 +71,22 @@ export function GiftTypeBottomSheet({
           padding: 24,
         }}
       >
-        <div style={{ width: 60 }} onClick={() => handleSave("items")}>
+        <div style={{ width: 60 }} onClick={() => handleSave(GiftType.Items)}>
           <GiftItemsBtnIcon />
           <br />
           <ProText style={textStyle}>{t("gift.items")}</ProText>
         </div>
-        <div style={{ width: 60 }} onClick={() => handleSave("vouchers")}>
+        <div
+          style={{ width: 60 }}
+          onClick={() => handleSave(GiftType.Vouchers)}
+        >
           <GiftBalanceBtnIcon />
           <br />
           <ProText style={textStyle}>{t("gift.balance")}</ProText>
         </div>
         <div
           style={{ width: 60 }}
-          onClick={() => handleSave("itemsAndVouchers")}
+          onClick={() => handleSave(GiftType.ItemsAndVouchers)}
         >
           <GiftItemsAndBalanceBtnIcon />
           <br />

src/pages/CardDetails/CardDetails.tsx

@@ -16,6 +16,7 @@ import TimeEstimateCard from "pages/cart/components/timeEstimate/TimeEstimateCar
 import { useNavigate, useParams } from "react-router-dom";
 import GiftAmountCard from "./components/GiftAmountCard/GiftAmountCard";
 import { GiftAmountBottomSheet } from "./components/GiftAmountBottomSheet";
+import PickupTimeCard from "pages/checkout/components/pickupEstimate/TimeEstimateCard";
 
 export default function CardDetailsPage() {
   const { t } = useTranslation();
@@ -168,7 +169,7 @@ export default function CardDetailsPage() {
             )}
             <ReceivernformationCard />
             <SenderformationCard />
-            <TimeEstimateCard />
+            <PickupTimeCard />
           </Form>
         </Layout.Content>
         <Layout.Footer className={styles.checkoutButtonContainer}>

src/pages/checkout/components/GiftCard.tsx

@@ -15,6 +15,7 @@ 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();
@@ -32,6 +33,8 @@ export function GiftCard() {
   const [isGiftAmountBottomSheetOpen, setIsGiftAmountBottomSheetOpen] =
     useState(false);
 
+  console.log(giftDetails?.giftType);
+
   return (
     <>
       <ProInputCard title={t("address.giftDetails")}>
@@ -108,10 +111,12 @@ export function GiftCard() {
           </div>
           {isRTL ? <BackIcon iconSize={24} /> : <NextIcon iconSize={24} />}
         </div>
+
         <Divider style={{ margin: "10px 0" }} />
 
-        {giftDetails?.giftType === "vouchers" ||
+        {(giftDetails?.giftType === GiftType.Vouchers ||
-          (giftDetails?.giftType === "itemsAndVouchers" && (
+          giftDetails?.giftType === GiftType.ItemsAndVouchers) && (
+          <>
             <div
               className={styles.orderNotes}
               onClick={() => {
@@ -164,11 +169,14 @@ export function GiftCard() {
               </div>
               {isRTL ? <BackIcon iconSize={24} /> : <NextIcon iconSize={24} />}
             </div>
-          ))}
+            {giftDetails?.giftType === GiftType.ItemsAndVouchers && (
-
               <Divider style={{ margin: "10px 0" }} />
-        {giftDetails?.giftType === "items" ||
+            )}
-          (giftDetails?.giftType === "itemsAndVouchers" && (
+          </>
+        )}
+
+        {(giftDetails?.giftType === GiftType.Items ||
+          giftDetails?.giftType === GiftType.ItemsAndVouchers) && (
           <div
             style={{
               display: "flex",
@@ -203,7 +211,7 @@ export function GiftCard() {
             </ProText>
             {isRTL ? <BackIcon /> : <NextIcon />}
           </div>
-          ))}
+        )}
       </ProInputCard>
       <GiftAmountBottomSheet
         isOpen={isGiftAmountBottomSheetOpen}

src/pages/checkout/page.tsx

@@ -85,7 +85,7 @@ export default function CheckoutPage() {
             <OfficeDetails /> */}
             {/* <GiftDetails /> */}
             {/* <BriefMenu /> */}
-            {orderType !== OrderType.Redeem && <CouponCard />}
+            {orderType !== OrderType.Redeem && orderType !== OrderType.Gift && <CouponCard />}
 
             {/* Collection Method */}
             {orderType === OrderType.Pickup && (
@@ -123,7 +123,7 @@ export default function CheckoutPage() {
             )}
 
             {/* Reward Your Waiter */}
-            {orderType !== OrderType.Redeem && <RewardWaiterCard />}
+            {orderType !== OrderType.Redeem && orderType !== OrderType.Gift && <RewardWaiterCard />}
             <BriefMenuCard />
             <Ads1 />
             <OrderSummary />

src/pages/menu/components/MenuFooter/MenuFooter.tsx

@@ -44,13 +44,7 @@ export function MenuFooter() {
           }}
         >
           <Link
-            to={
+            to={totalItems === 0 ? "#" : `/${subdomain}/cart`}
-              totalItems === 0
-                ? "#"
-                : orderType === OrderType.Pay
-                  ? `/${subdomain}/pay`
-                  : `/${subdomain}/cart`
-            }
             onClick={(e) => {
               if (totalItems === 0) {
                 e.preventDefault();
@@ -106,9 +100,7 @@ export function MenuFooter() {
                   margin: "0 10px",
                 }}
               >
-                {orderType === OrderType.Pay
+                {t("menu.viewCart")}
-                  ? t("menu.pay")
-                  : t("menu.viewCart")}
               </ProText>
             </Button>
             <div

src/pages/restaurant/RestaurantServices.tsx

@@ -260,7 +260,6 @@ export default function RestaurantServices() {
         onClose={() => setIsGiftTypeBottomSheetOpen(false)}
         onSave={() => {
           setIsGiftTypeBottomSheetOpen(false);
-          navigate(`/${subdomain}/menu?orderType=${OrderType.Gift}`);
         }}
       />
     </div>