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,46 +169,49 @@ export function GiftCard() {
               </div>
               {isRTL ? <BackIcon iconSize={24} /> : <NextIcon iconSize={24} />}
             </div>
-          ))}
+            {giftDetails?.giftType === GiftType.ItemsAndVouchers && (
+              <Divider style={{ margin: "10px 0" }} />
+            )}
+          </>
+        )}
 
-        <Divider style={{ margin: "10px 0" }} />
+        {(giftDetails?.giftType === GiftType.Items ||
-        {giftDetails?.giftType === "items" ||
+          giftDetails?.giftType === GiftType.ItemsAndVouchers) && (
-          (giftDetails?.giftType === "itemsAndVouchers" && (
+          <div
-            <div
+            style={{
+              display: "flex",
+              flexDirection: "row",
+              justifyContent: "space-between",
+            }}
+            onClick={() => {
+              navigate(`/${subdomain}/cart`);
+            }}
+          >
+            <ProText
               style={{
-                display: "flex",
+                fontWeight: 400,
-                flexDirection: "row",
+                fontStyle: "Regular",
-                justifyContent: "space-between",
+                fontSize: 12,
-              }}
+                lineHeight: "140%",
-              onClick={() => {
+                letterSpacing: "0%",
-                navigate(`/${subdomain}/cart`);
+                color: "#777580",
+                cursor: "pointer",
               }}
             >
-              <ProText
+              <span
                 style={{
-                  fontWeight: 400,
+                  [isRTL ? "marginLeft" : "marginRight"]: 5,
-                  fontStyle: "Regular",
+                  position: "relative",
-                  fontSize: 12,
+                  top: 3.5,
-                  lineHeight: "140%",
-                  letterSpacing: "0%",
-                  color: "#777580",
-                  cursor: "pointer",
                 }}
               >
-                <span
+                <InvoiceIcon />
-                  style={{
+              </span>
-                    [isRTL ? "marginLeft" : "marginRight"]: 5,
+              {t("checkout.viewOrder")} ( {totalItems} {t("cart.items")} )
-                    position: "relative",
+            </ProText>
-                    top: 3.5,
+            {isRTL ? <BackIcon /> : <NextIcon />}
-                  }}
+          </div>
-                >
+        )}
-                  <InvoiceIcon />
-                </span>
-                {t("checkout.viewOrder")} ( {totalItems} {t("cart.items")} )
-              </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>