gift: update UI and voucher & items BS

src/assets/locals/ar.json

@@ -453,5 +453,11 @@
     "shareLink": "شارك الرابط",
     "shareLinkDescription": "يمكن للأصدقاء مسح الكود الباري أو استخدام الرابط لعرض الفاتورة ودفع نصيبهم بأمان من هاتفهم.",
     "shareThisToSplitTheBill": "شارك هذا لتقسيم الفاتورة"
+  },
+  "gift": {
+    "items": "هدية العناصر",
+    "balance": "هدية الرصيد",
+    "itemsAndBalance": "العناصر والرصيد",
+    "selectGiftType": "اختر نوع الهدية"
   }
 }

src/assets/locals/en.json

@@ -465,5 +465,11 @@
     "shareLink": "Share Link",
     "shareLinkDescription": "Your friends can scan the QR code or use the link to view the bill and pay their share securely from their phone.",
     "shareThisToSplitTheBill": "Share this to split the bill"
+  },
+  "gift": {
+    "items": "Gift Items",
+    "balance": "Gift Balance",
+    "itemsAndBalance": "Items and Balance",
+    "selectGiftType": "Select Gift Type"
   }
 }

src/components/CustomBottomSheet/GiftTypeBottomSheet.tsx

@@ -0,0 +1,83 @@
+import { useTranslation } from "react-i18next";
+import { ProBottomSheet } from "../ProBottomSheet/ProBottomSheet";
+import { updateGiftType } from "features/order/orderSlice";
+import { useAppDispatch } from "redux/hooks";
+import GiftItemsBtnIcon from "components/Icons/GiftItemsBtnIcon";
+import GiftBalanceBtnIcon from "components/Icons/GiftBalanceBtnIcon";
+import GiftItemsAndBalanceBtnIcon from "components/Icons/GiftItemsAndBalanceBtnIcon";
+import ProText from "components/ProText";
+
+interface GiftTypeBottomSheetProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSave?: () => void;
+}
+
+export function GiftTypeBottomSheet({
+  isOpen,
+  onClose,
+  onSave,
+}: GiftTypeBottomSheetProps) {
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+
+  const handleSave = (value: string) => {
+    dispatch(updateGiftType(value));
+    onClose();
+    onSave?.();
+  };
+
+  const handleCancel = () => {
+    onClose();
+  };
+
+  const textStyle: React.CSSProperties = {
+    fontWeight: 500,
+    fontStyle: "Medium",
+    fontSize: 14,
+    lineHeight: "140%",
+    letterSpacing: "0%",
+    textAlign: "center",
+    color: "#86858E",
+  };
+  return (
+    <ProBottomSheet
+      isOpen={isOpen}
+      onClose={handleCancel}
+      title={t("gift.selectGiftType")}
+      showCloseButton={false}
+      initialSnap={1}
+      height={260}
+      snapPoints={[260]}
+    >
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "row",
+          gap: 10,
+          justifyContent: "space-between",
+          padding: 24,
+        }}
+      >
+        <div style={{ width: 60 }} onClick={() => handleSave("items")}>
+          <GiftItemsBtnIcon />
+          <br />
+          <ProText style={textStyle}>{t("gift.items")}</ProText>
+        </div>
+        <div style={{ width: 60 }} onClick={() => handleSave("vouchers")}>
+          <GiftBalanceBtnIcon />
+          <br />
+          <ProText style={textStyle}>{t("gift.balance")}</ProText>
+        </div>
+        <div
+          style={{ width: 60 }}
+          onClick={() => handleSave("itemsAndVouchers")}
+        >
+          <GiftItemsAndBalanceBtnIcon />
+          <br />
+          <ProText style={textStyle}>{t("gift.itemsAndBalance")}</ProText>
+        </div>
+      </div>
+    </ProBottomSheet>
+  );
+}

src/components/Icons/GiftBalanceBtnIcon.tsx

@@ -0,0 +1,60 @@
+interface GiftBalanceBtnIconType {
+  className?: string;
+  onClick?: () => void;
+  dimension?: string;
+}
+
+const GiftBalanceBtnIcon = ({
+  className,
+  onClick,
+  dimension,
+}: GiftBalanceBtnIconType) => {
+  return (
+    <svg
+      width={dimension || "60"}
+      height={dimension || "60"}
+      viewBox="0 0 60 60"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      onClick={onClick}
+    >
+      <rect x="0.5" y="0.5" width="59" height="59" rx="29.5" fill="white" />
+      <rect
+        x="0.5"
+        y="0.5"
+        width="59"
+        height="59"
+        rx="29.5"
+        stroke="url(#paint0_linear_1528_31202)"
+      />
+      <path
+        d="M16.25 30C16.25 24.8149 16.25 22.2216 17.8615 20.6115C19.473 19.0014 22.0649 19 27.25 19H32.75C37.9351 19 40.5284 19 42.1385 20.6115C43.7486 22.223 43.75 24.8149 43.75 30C43.75 35.1851 43.75 37.7784 42.1385 39.3885C40.527 40.9986 37.9351 41 32.75 41H27.25C22.0649 41 19.4716 41 17.8615 39.3885C16.2514 37.777 16.25 35.1851 16.25 30Z"
+        stroke="#FFC600"
+        strokeWidth="1.5"
+      />
+      <path
+        opacity="0.5"
+        d="M27.25 35.5H21.75M32.75 35.5H30.6875M16.25 27.25H43.75"
+        stroke="#FFC600"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_1528_31202"
+          x1="60"
+          y1="-2.86102e-06"
+          x2="-132"
+          y2="194"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#FFFCF5" />
+          <stop offset="0.454842" stopColor="#FFD466" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+};
+
+export default GiftBalanceBtnIcon;

src/components/Icons/GiftItemsAndBalanceBtnIcon.tsx

@@ -0,0 +1,74 @@
+interface GiftItemsAndBalanceBtnIconType {
+  className?: string;
+  onClick?: () => void;
+  dimension?: string;
+}
+
+const GiftItemsAndBalanceBtnIcon = ({
+  className,
+  onClick,
+  dimension,
+}: GiftItemsAndBalanceBtnIconType) => {
+  return (
+    <svg
+      width={dimension || "60"}
+      height={dimension || "60"}
+      viewBox="0 0 60 60"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      onClick={onClick}
+    >
+      <rect x="0.5" y="0.5" width="59" height="59" rx="29.5" fill="white" />
+      <rect
+        x="0.5"
+        y="0.5"
+        width="59"
+        height="59"
+        rx="29.5"
+        stroke="url(#paint0_linear_1528_31188)"
+      />
+      <path
+        d="M35.1562 40.6562C33.9374 40.6563 32.7305 40.4162 31.6045 39.9498C30.4784 39.4833 29.4553 38.7997 28.5934 37.9378C27.7316 37.076 27.0479 36.0528 26.5815 34.9268C26.1151 33.8007 25.875 32.5938 25.875 31.375C25.875 30.1562 26.1151 28.9493 26.5815 27.8232C27.0479 26.6972 27.7316 25.674 28.5934 24.8122C29.4553 23.9503 30.4784 23.2667 31.6045 22.8002C32.7305 22.3338 33.9374 22.0937 35.1562 22.0938"
+        stroke="#FFC600"
+        strokeLinecap="round"
+      />
+      <path
+        d="M19.6875 22.0938V27.25M19.6875 40.6562V30.3438M17.1094 27.25H22.2656M22.7812 22.0938V26.5818C22.7812 31.5978 16.5938 31.5978 16.5938 26.5818V22.0938"
+        stroke="#FFC600"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M31.375 31.25C31.375 28.6574 31.375 27.3608 32.1807 26.5557C32.9865 25.7507 34.2824 25.75 36.875 25.75H39.625C42.2176 25.75 43.5142 25.75 44.3192 26.5557C45.1243 27.3615 45.125 28.6574 45.125 31.25C45.125 33.8426 45.125 35.1392 44.3192 35.9442C43.5135 36.7493 42.2176 36.75 39.625 36.75H36.875C34.2824 36.75 32.9858 36.75 32.1807 35.9442C31.3757 35.1385 31.375 33.8426 31.375 31.25Z"
+        stroke="#FFC600"
+      />
+      <g opacity="0.5">
+        <path
+          d="M36.875 34H34.125ZM39.625 34H38.5938ZM31.375 29.875H45.125Z"
+          fill="white"
+        />
+        <path
+          d="M36.875 34H34.125M39.625 34H38.5938M31.375 29.875H45.125"
+          stroke="#FFC600"
+          strokeLinecap="round"
+        />
+      </g>
+      <defs>
+        <linearGradient
+          id="paint0_linear_1528_31188"
+          x1="60"
+          y1="-2.86102e-06"
+          x2="-132"
+          y2="194"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#FFFCF5" />
+          <stop offset="0.454842" stopColor="#FFD466" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+};
+
+export default GiftItemsAndBalanceBtnIcon;

src/components/Icons/GiftItemsBtnIcon.tsx

@@ -0,0 +1,67 @@
+interface GiftItemsBtnIconType {
+  className?: string;
+  onClick?: () => void;
+  dimension?: string;
+}
+
+const GiftItemsBtnIcon = ({
+  className,
+  onClick,
+  dimension,
+}: GiftItemsBtnIconType) => {
+  return (
+    <svg
+      width={dimension || "60"}
+      height={dimension || "60"}
+      viewBox="0 0 60 60"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      onClick={onClick}
+    >
+      <rect x="0.5" y="0.5" width="59" height="59" rx="29.5" fill="white" />
+      <rect
+        x="0.5"
+        y="0.5"
+        width="59"
+        height="59"
+        rx="29.5"
+        stroke="url(#paint0_linear_1528_12064)"
+      />
+      <path
+        d="M42.375 36.875C40.5516 36.875 38.803 36.1507 37.5136 34.8614C36.2243 33.572 35.5 31.8234 35.5 30C35.5 28.1766 36.2243 26.428 37.5136 25.1386C38.803 23.8493 40.5516 23.125 42.375 23.125"
+        stroke="#FFC600"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+      <path
+        d="M42.375 42.375C40.7499 42.375 39.1407 42.0549 37.6393 41.433C36.1379 40.8111 34.7737 39.8996 33.6246 38.7504C32.4754 37.6013 31.5639 36.2371 30.942 34.7357C30.3201 33.2343 30 31.6251 30 30C30 28.3749 30.3201 26.7657 30.942 25.2643C31.5639 23.7629 32.4754 22.3987 33.6246 21.2496C34.7737 20.1004 36.1379 19.1889 37.6393 18.567C39.1407 17.9451 40.7499 17.625 42.375 17.625"
+        stroke="#FFC600"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+      <path
+        d="M21.75 17.625V24.5M21.75 42.375V28.625M18.3125 24.5H25.1875M25.875 17.625V23.609C25.875 30.297 17.625 30.297 17.625 23.609V17.625"
+        stroke="#FFC600"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_1528_12064"
+          x1="60"
+          y1="-2.86102e-06"
+          x2="-132"
+          y2="194"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#FFFCF5" />
+          <stop offset="0.454842" stopColor="#FFD466" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+};
+
+export default GiftItemsBtnIcon;

src/features/order/orderSlice.ts

@@ -33,6 +33,7 @@ export interface GiftDetailsType {
   senderPhone: string;
   senderEmail: string;
   isSecret: boolean;
+  cardId: string;
 }
 
 interface DiscountData {
@@ -75,6 +76,8 @@ interface CartState {
   hiddenServices: number;
   visibleServices: number;
   fee: number;
+  giftType: string;
+
 }
 
 // localStorage keys
@@ -108,6 +111,7 @@ export const CART_STORAGE_KEYS = {
   TOTAL_SERVICES: "fascano_total_services",
   HIDDEN_SERVICES: "fascano_hidden_services",
   VISIBLE_SERVICES: "fascano_visible_services",
+  GIFT_TYPE: "fascano_gift_type",
 } as const;
 
 // Utility functions for localStorage
@@ -200,6 +204,7 @@ const initialState: CartState = {
   hiddenServices: 0,
   visibleServices: 0,
   fee: 0,
+  giftType: getFromLocalStorage(CART_STORAGE_KEYS.GIFT_TYPE, ""),
 };
 
 const orderSlice = createSlice({
@@ -681,6 +686,9 @@ const orderSlice = createSlice({
     updateCustomerName(state, action: PayloadAction<string>) {
       state.customerName = action.payload;
     },
+    updateGiftType(state, action: PayloadAction<string>) {
+      state.giftType = action.payload;
+    },
   },
 });
 
@@ -720,6 +728,7 @@ export const {
   updateOrder,
   updateSplitBillAmount,
   updateCustomerName,
+  updateGiftType,
 } = orderSlice.actions;
 
 // Tax calculation helper functions

src/pages/EGiftCards/EGiftCards.tsx

@@ -0,0 +1,24 @@
+import { Layout, Spin } from "antd";
+import PaymentMethods from "components/PaymentMethods/PaymentMethods";
+import ProHeader from "components/ProHeader/ProHeader";
+import { useTranslation } from "react-i18next";
+import styles from "../address/address.module.css";
+import ECardButton from "./components/ECardButton";
+import { useGetEGiftCardsQuery } from "redux/api/others";
+import ECardList from "./components/ECardList";
+
+export default function EGiftCardsPage() {
+  const { t } = useTranslation();
+  const { data: eGiftCards, isLoading } = useGetEGiftCardsQuery();
+
+  return (
+    <Layout>
+      <ProHeader>{t("checkout.title")}</ProHeader>
+      <Layout.Content className={styles.checkoutContainer}>
+        <PaymentMethods />
+        {isLoading ? <Spin /> : <ECardList eGiftCards={eGiftCards || []} />}
+      </Layout.Content>
+      <ECardButton />
+    </Layout>
+  );
+}

src/pages/EGiftCards/components/ECardButton.tsx

@@ -0,0 +1,37 @@
+import { Button, Layout, message } from "antd";
+import { useTranslation } from "react-i18next";
+import styles from "../../address/address.module.css";
+import { useCallback } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { selectCart } from "features/order/orderSlice";
+import { useAppSelector } from "redux/hooks";
+
+export default function ECardButton() {
+  const { t } = useTranslation();
+  const { subdomain } = useParams();
+  const navigate = useNavigate();
+  const { giftDetails } = useAppSelector(selectCart);
+
+  const handleSelectCard = useCallback(() => {
+    if (giftDetails?.cardId) {
+      navigate(`/${subdomain}/cardDetails/${giftDetails?.cardId}`);
+    } else {
+      message.error(t("gift.pleaseSelectCard"));
+    }
+  }, [navigate, subdomain, giftDetails?.cardId]);
+
+  return (
+    <>
+      <Layout.Footer className={styles.checkoutButtonContainer}>
+        <Button
+          type="primary"
+          shape="round"
+          className={styles.placeOrderButton}
+          onClick={handleSelectCard}
+        >
+          {t("checkout.placeOrder")}
+        </Button>
+      </Layout.Footer>
+    </>
+  );
+}

src/pages/EGiftCards/components/ECardList.tsx

@@ -0,0 +1,14 @@
+import { Card, Image } from "antd";
+import { EGiftCard } from "../type";
+
+export default function ECardList({ eGiftCards }: { eGiftCards: EGiftCard[] }) {
+  return (
+    <>
+      {eGiftCards.map((card: EGiftCard) => (
+        <Card key={card.id}>
+          <Image src={card.imageURL} alt={card.image} />
+        </Card>
+      ))}
+    </>
+  );
+}

src/pages/EGiftCards/type.ts

@@ -0,0 +1,9 @@
+export interface EGiftCard {
+  id: number;
+  image: string;
+  restorant_id: number | null;
+  is_available: number;
+  created_at: string;
+  updated_at: string;
+  imageURL: string;
+}

src/pages/cart/components/cartFooter/CartFooter.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from "react-i18next";
 import { Link, useNavigate, useParams } from "react-router-dom";
 import { useAppSelector } from "redux/hooks.ts";
 import styles from "./footer.module.css";
+import { OrderType } from "pages/checkout/hooks/types";
 
 interface CartFooterProps {
   form: FormInstance;
@@ -63,7 +64,9 @@ export default function CartFooter({ form }: CartFooterProps) {
         }}
         onClick={handleCheckoutClick}
       >
-        {t("cart.checkout")}
+        {orderType === OrderType.Gift
+          ? t("cart.continueToGiftDetails")
+          : t("cart.checkout")}
       </Button>
     </Layout.Footer>
   );

src/pages/restaurant/RestaurantServices.tsx

@@ -1,4 +1,3 @@
-import { ScheduleFilled } from "@ant-design/icons";
 import { Card } from "antd";
 import BackIcon from "components/Icons/BackIcon";
 import DeliveryIcon from "components/Icons/DeliveryIcon";
@@ -11,21 +10,26 @@ import ToRoomIcon from "components/Icons/ToRoomIcon";
 import { updateOrderType } from "features/order/orderSlice";
 import { OrderType } from "pages/checkout/hooks/types.ts";
 import { useTranslation } from "react-i18next";
-import { Link, useParams } from "react-router-dom";
+import { Link, useNavigate, useParams } from "react-router-dom";
 import { useGetRestaurantDetailsQuery } from "redux/api/others";
 import { useAppDispatch, useAppSelector } from "redux/hooks";
 import styles from "./restaurant.module.css";
 import ScheduleOrderIcon from "components/Icons/ScheduleOrderIcon";
 import ProText from "components/ProText";
+import { GiftTypeBottomSheet } from "components/CustomBottomSheet/GiftTypeBottomSheet";
+import { useState } from "react";
 
 export default function RestaurantServices() {
   const { t } = useTranslation();
   const { isRTL } = useAppSelector((state) => state.locale);
   const { subdomain } = useParams();
+  const navigate = useNavigate();
   const dispatch = useAppDispatch();
   const { data: restaurant } = useGetRestaurantDetailsQuery(subdomain, {
     skip: !subdomain,
   });
+  const [isGiftTypeBottomSheetOpen, setIsGiftTypeBottomSheetOpen] =
+    useState(false);
 
   const {
     dineIn,
@@ -188,12 +192,19 @@ export default function RestaurantServices() {
   return (
     <div className={getGridClass()}>
       {services?.map((s) => {
+        const isGift = s?.id === OrderType.Gift;
         return (
           <Link
-            to={s?.href}
+            to={isGift ? "#" : s?.href}
             key={s?.id}
-            onClick={() => {
+            onClick={(e) => {
+              if (isGift) {
+                e.preventDefault();
                 dispatch(updateOrderType(s?.id));
+                setIsGiftTypeBottomSheetOpen(true);
+              } else {
+                dispatch(updateOrderType(s?.id));
+              }
             }}
             style={{
               width: "100%",
@@ -225,7 +236,7 @@ export default function RestaurantServices() {
                       lineHeight: "140%",
                       letterSpacing: "0%",
                       verticalAlign: "middle",
-                      color: "#434E5C"
+                      color: "#434E5C",
                     }}
                   >
                     {s?.title}
@@ -242,6 +253,14 @@ export default function RestaurantServices() {
           </Link>
         );
       })}
+      <GiftTypeBottomSheet
+        isOpen={isGiftTypeBottomSheetOpen}
+        onClose={() => setIsGiftTypeBottomSheetOpen(false)}
+        onSave={() => {
+          setIsGiftTypeBottomSheetOpen(false);
+          navigate(`/${subdomain}/menu?orderType=${OrderType.Gift}`);
+        }}
+      />
     </div>
   );
 }

src/pages/restaurant/restaurant.module.css

@@ -145,7 +145,7 @@
     display: grid;
     gap: 16px;
     padding: 0 1rem;
-    margin: 10px 0;
+    margin: 24px 0 10px 0;
   }
 }
 

src/redux/api/others.ts

@@ -9,6 +9,7 @@ import {
   RESTAURANT_DETAILS_URL,
   TABLES_URL,
   USER_DETAILS_URL,
+  EGIFT_CARDS_URL,
 } from "utils/constants";
 
 import { OrderDetails } from "pages/checkout/hooks/types";
@@ -19,6 +20,7 @@ import {
   UserType,
 } from "utils/types/appTypes";
 import { baseApi } from "./apiSlice";
+import { EGiftCard } from "pages/EGiftCards/type";
 
 export const branchApi = baseApi.injectEndpoints({
   endpoints: (builder) => ({
@@ -31,7 +33,7 @@ export const branchApi = baseApi.injectEndpoints({
         },
       }),
       transformResponse: (response: any) => {
-        return response?.result?.restaurants?.[0]
+        return response?.result?.restaurants?.[0];
       },
       providesTags: ["Restaurant"],
     }),
@@ -160,6 +162,15 @@ export const branchApi = baseApi.injectEndpoints({
       }),
       invalidatesTags: ["Orders", "Restaurant"],
     }),
+    getEGiftCards: builder.query<EGiftCard[], void>({
+      query: () => ({
+        url: EGIFT_CARDS_URL,
+        method: "GET",
+      }),
+      transformResponse: (response: any) => {
+        return response.result;
+      },
+    }),
   }),
 });
 export const {
@@ -173,4 +184,5 @@ export const {
   useGetDiscountMutation,
   useRateOrderMutation,
   useGetUserDetailsQuery,
+  useGetEGiftCardsQuery,
 } = branchApi;

src/utils/constants.ts

@@ -108,3 +108,4 @@ export const SEND_OTP_URL = `${API_BASE_URL}sendOtp`;
 export const CONFIRM_OTP_URL = `${API_BASE_URL}confirmOtp`;
 export const PAYMENT_CONFIRMATION_URL = `https://menu.fascano.com/payment/confirmation`;
 export const DISCOUNT_URL = `${BASE_URL}getDiscount`;
+export const EGIFT_CARDS_URL = `${BASE_URL}gift/cards`;