update loyalty discount calculations

This reverts commit 093d4279d9.

package.json

@@ -37,6 +37,7 @@
     "@typescript-eslint/eslint-plugin": "^7.13.1",
     "@typescript-eslint/parser": "^7.13.1",
     "@vitejs/plugin-react": "^4.3.1",
+    "baseline-browser-mapping": "^2.9.11",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.7",

src/ThemeConstants.ts

@@ -175,8 +175,8 @@ export const themeConfig: ThemeConfig = {
       boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
       padding: 16,
       paddingLG: 16,
-      borderRadius: 24,
-      borderRadiusLG: 24,
+      borderRadius: 16,
+      borderRadiusLG: 16,
     },
     Carousel: {
       colorBgContainer: lightColors["800"],

src/assets/locals/ar.json

@@ -76,7 +76,8 @@
     "room": "الغرفة",
     "office": "المكتب",
     "booking": "الحجز",
-    "scheduledOrder": "الطلب المجدول"
+    "scheduledOrder": "الطلب المجدول",
+    "rewardsAndLoyalty": "المكافأة واللايفور"
   },
   "home": {
     "title": "العنوان",
@@ -91,7 +92,7 @@
       "scheduledOrder": "طلب مجدول"
     },
     "promotion": {
-      "title": "الترويجات",
+      "title": "عرض التفاصيل",
       "description": "احصل على خصم 10% على طلبك الأول"
     }
   },
@@ -129,7 +130,7 @@
     "payDescription": "الدفع",
     "rating": "التقييم ",
     "loyaltyPoints": "نقاط الولاء",
-    "loyaltyDescription": "اشترى {{value}} وجبات واحصل على وجبة مجانية",
+    "loyaltyDescription": "اشترى {{value}} وجبات واحصل على وجبة مجانية!",
     "youMightAlsoLike": "قد تعجبك أيضاً..",
     "choose1": "اختر 1",
     "specialRequest": "طلب خاص",
@@ -164,9 +165,27 @@
     "restaurantIsClosed": "المطعم مغلق",
     "address": "العنوان",
     "openingTimes": "ساعات العمل",
-    "customizable": "قابل للتخصيص"
+    "customizable": "قابل للتخصيص",
+    "youHaveXEarnedRewardsReadyToRedeem": "🎉 لديك {{rewards}} مكافأة مستحقة للاستخدام!",
+    "justXMorePurchasesToUnlockYourFREEItem": "فقط {{cups}} أكثر للفتح الوجبة المجانية!",
+    "youreJustXCupsAwayFromYourNextReward": "🎉 أنت فقط {{cups}} أكثر للحصول على المكافأة التالية!",
+    "callWaiter": "اتصل بالرادير",
+    "balance": "الرصيد",
+    "closed": "مغلق",
+    "sunday": "الأحد",
+    "monday": "الإثنين",
+    "tuesday": "الثلاثاء",
+    "wednesday": "الأربعاء",
+    "thursday": "الخميس",
+    "friday": "الجمعة",
+    "saturday": "السبت",
+    "selectYourTable": "اختر طاولتك",
+    "calledWaiterSuccess": "تم اتصال الرادير بنجاح"
   },
   "cart": {
+    "addSpecialRequestOptional": "إضافة طلب خاص (اختياري)",
+    "continueToGiftDetails": "متابعة إلى تفاصيل الهدية",
+    "continueToGiftDetailsDescription": "يرجى إدخال تفاصيل المستلم والمرسل لمتابعة.",
     "leaveANoteHere": "أي تعليمات خاصة لطلبك..",
     "title": "السلة",
     "emptyCart": "سلة المشتريات فارغة",
@@ -189,6 +208,12 @@
       "cancel": "إلغاء",
       "success": "تم حذف العنصر من سلة المشتريات"
     },
+    "clearCartConfirmation": {
+      "title": "مسح السلة",
+      "content": "هل أنت متأكد أنك تريد مسح السلة؟",
+      "confirm": "مسح",
+      "cancel": "إلغاء"
+    },
     "quantity": "الكمية",
     "price": "السعر",
     "perItem": "للقطعة",
@@ -262,13 +287,19 @@
     "am": "ص",
     "pm": "م",
     "cannotSelectPastDate": "لا يمكنك اختيار تاريخ سابق. يرجى اختيار اليوم أو تاريخ مستقبلي.",
-    "checkRequiredFields": "يرجى التحقق من الحقول المطلوبة"
+    "checkRequiredFields": "يرجى التحقق من الحقول المطلوبة",
+    "loyalty": "ولاء",
+    "vat": "ضريبة القيمة المضافة ({{value}}%))",
+    "otherTaxes": "{{name}} ({{value}}%)"
   },
   "checkout": {
+    "addCarDetails": "إضافة تفاصيل السيارة",
+    "soTheRestaurantCanRecognizeYourCarWhenYouArrive": "لتتمكن المطعم من التعرف على سيارتك عند وصولك.",
     "customerName": "اسم العميل",
     "paymentSummary": "ملخص الدفع",
     "holdayGiftCard": "هدية العيد",
     "messageIncluded": "الرسالة مضمنة",
+    "save": "حفظ",
     "to": "ل",
     "giftSummary": "ملخص الهدية",
     "customerInformation": "تفاصيل العميل",
@@ -293,7 +324,20 @@
     "pleaseEnterPhoneNumber": "يرجى إدخال رقم الهاتف",
     "viewOrder": "عرض الطلب",
     "itemsSummary": "ملخص العناصر",
-    "removeSplitBill": "إزالة التقسيم"
+    "removeSplitBill": "إزالة التقسيم",
+    "cardBalance": "رصيد البطاقة",
+    "collectAtCounter": "استلام في المكتب",
+    "collectAtParking": "استلام في الموقف",
+    "scheduled": "مجدول",
+    "pickupNow": "استلام الآن",
+    "pickupEstimate": "تقدير الاستلام",
+    "today": "اليوم",
+    "change": "تغيير",
+    "pickup": "استلام",
+    "setPickupTime": "تحديد وقت الاستلام",
+    "carPlateNumber": "رقم لوحة السيارة",
+    "noItems": "لا يوجد عناصر في السلة",
+    "thawani": "ثواني"
   },
   "address": {
     "title": "العنوان",
@@ -345,7 +389,9 @@
     "gotIt": "فهمت",
     "howItWorksDescription": "يمكنك إرسال هدية إلى أي شخص عبر التطبيق. يمكنك إرسال هدية إلى أي شخص عبر التطبيق. يمكنك إرسال هدية إلى أي شخص عبر التطبيق. يمكنك إرسال هدية إلى أي شخص عبر التطبيق. يمكنك إرسال هدية إلى أي شخص عبر التطبيق.",
     "senderEmail": "البريد الإلكتروني المرسل",
-    "save": "حفظ"
+    "save": "حفظ",
+    "pleaseEnterRoomNumber": "يرجى إدخال رقم الغرفة",
+    "pleaseEnterOfficeNumber": "يرجى إدخال رقم المكتب"
   },
   "login": {
     "singup/Login": "الدخول / التسجيل",
@@ -374,6 +420,10 @@
     "confirmOTPSuccess": "تم التحقق من رمز التحقق بنجاح"
   },
   "order": {
+    "whosPaidTheirShareSplitBill": "من قام بدفع نصيبه من الفاتورة؟",
+    "seeWhoPaidAndHowMuch": "اعرض من قام بدفع نصيبه من الفاتورة وكم يبلغ نصيبه",
+    "personHasPaid": "قام بدفع نصيبه من الفاتورة",
+    "inviteOthersToBill": "دع الآخرين يدفعوا معك",
     "title": "الطلب",
     "newOrder": "طلب جديد",
     "paymentSummary": "ملخص الدفع",
@@ -434,6 +484,7 @@
     "payButtonDescription": "الدفع للطلب"
   },
   "splitBill": {
+    "serviceFee": "نصيب الخدمة",
     "title": "تقسيم الفاتورة",
     "description": "تقسيم الفاتورة",
     "splitBill": "تقسيم الفاتورة",
@@ -491,6 +542,84 @@
     "eCardAmount": "مبلغ البطاقة الإلكترونية",
     "receiverName": "اسم المستلم",
     "edit": "تعديل",
-    "yourInformation": "تفاصيلك"
+    "yourInformation": "تفاصيلك",
+    "minimumAmountShouldBe1OMR": "يجب أن يكون المبلغ الأدنى 1 OMR",
+    "add": "أضف",
+    "senderNameRequired": "يجب أن يكون اسم المرسل مطلوب",
+    "receiverNameRequired": "يجب أن يكون اسم المستلم مطلوب"
+  },
+  "car": {
+    "addCar": "إضافة سيارة",
+    "selectCar": "اختر السيارة",
+    "addCarDetails": "إضافة تفاصيل السيارة",
+    "brand": "العلامة التجارية",
+    "color": "اللون",
+    "category": "الفئة",
+    "plateNumber": "رقم السيارة"
+  },
+  "redeem": {
+    "title": "استخدم الهدية",
+    "redeem": "استخدم",
+    "redeemDescription": "استخدم بطاقة الهدية",
+    "redeemButton": "استخدم",
+    "redeemButtonDescription": "استخدم بطاقة الهدية",
+    "showThisCodeAtTheRestaurant": "اعرض هذا الرمز في المطعم",
+    "addGiftDetails": "اضف تفاصيل الهدية",
+    "description": "اضف تفاصيل الهدية بالرسالة، ووقت التوصيل، وتفاصيل المستلم.",
+    "checkout": "الدفع",
+    "yourName": "اسمك",
+    "yourPhone": "رقم هاتفك",
+    "keepMyNameSecret": "الاحتفاظ باسمي مخفياً",
+    "receiverInformation": "تفاصيل المستلم",
+    "costumeAmount": "مبلغ البطاقة",
+    "enterCustomOucherAmount": "أدخل مبلغ البطاقة المخصص",
+    "amount": "المبلغ",
+    "eCardAmount": "مبلغ البطاقة الإلكترونية",
+    "receiverName": "اسم المستلم",
+    "edit": "تعديل",
+    "yourInformation": "تفاصيلك",
+    "minimumAmountShouldBe1OMR": "يجب أن يكون المبلغ الأدنى 1 OMR",
+    "add": "إضافة",
+    "senderNameRequired": "يجب أن يكون اسم المرسل مطلوب",
+    "receiverNameRequired": "يجب أن يكون اسم المستلم مطلوب",
+    "includesFreeItemsInThisOrder": "يشمل العناصر المجانية في هذا الطلب",
+    "redeemGiftedItems": "استخدم الهديات",
+    "pending": "قيد المعالجة",
+    "useThisCodeIfScanningNotPossible": "استخدم هذا الرمز إذا كان من المستحيل المسح",
+    "voucherWillBeAppliedAtCheckout": "سيتم تطبيق القسيمة عند الدفع",
+    "yourGiftCardBalance": "رصيد بطاقة الهدية",
+    "redeemNow": "استخدم الآن",
+    "restaurantLocation": "موقع المطعم",
+    "voucherBalance": "رصيد القسيمة",
+    "getDirections": "الحصول على الاتجاهات",
+    "giftedItems": "العناصر المهدية",
+    "viewAll": "عرض الكل",
+    "voucherCodeCopied": "تم نسخ رمز القسيمة",
+    "copyFailed": "فشل نسخ رمز القسيمة"
+  },
+  "rewardsAndLoyalty": {
+    "title": "المكافأة واللايفور",
+    "description": "المكافأة واللايفور",
+    "rewardsAndLoyalty": "المكافأة واللايفور",
+    "rewardsAndLoyaltyDescription": "المكافأة واللايفور",
+    "rewardsAndLoyaltyButton": "المكافأة واللايفور",
+    "rewardsAndLoyaltyButtonDescription": "المكافأة واللايفور",
+    "completedPurchases": "المشتريات المكتملة",
+    "totalPurchased": "المشتريات الكلية",
+    "saved": "المحفوظ",
+    "almosthere": "قريب جدا!",
+    "youreJustXCupsAwayFromYourNextReward": "أنت فقط {{cups}} أكواب بعيد عن المكافأة التالية!",
+    "youCanRedeemDuringTheCheckout": "يمكنك استخدام المكافأة أثناء الدفع",
+    "youCurrentlyHave": "لديك",
+    "freeItems": "عناصر مجانية",
+    "redeemNow": "استخدم الآن",
+    "yourAvailableRewards": "المكافأات المتاحة",
+    "loyaltyHistory": "سجل الولاء",
+    "loyaltyHistoryDescription": "سجل الولاء",
+    "earnedPoints": "حصل على {{points}} نقطة",
+    "order": "الطلب",
+    "yourOrderFrom": "طلبك من {{restaurantName}}",
+    "earned": "حصل على",
+    "xPoints": "{{points}} نقطة"
   }
 }

src/assets/locals/en.json

@@ -76,7 +76,8 @@
     "noMenuItemsAvailable": "No menu items available",
     "restaurantCover": "Restaurant Cover",
     "restaurantLogo": "Restaurant Logo",
-    "scheduledOrder": "Scheduled Order"
+    "scheduledOrder": "Scheduled Order",
+    "rewardsAndLoyalty": "Rewards And Loyalty"
   },
   "home": {
     "title": "title",
@@ -107,7 +108,7 @@
       "scheduledOrder": "Scheduled Order"
     },
     "promotion": {
-      "title": "Promotions",
+      "title": "Show details",
       "description": "Get 10% off your first order"
     }
   },
@@ -143,7 +144,7 @@
     "close": "Close",
     "rating": "Rating ",
     "loyaltyPoints": "Loyalty Points",
-    "loyaltyDescription": "Buy {{value}} meals and get 1 FREE",
+    "loyaltyDescription": "Buy {{value}} meals and get 1 FREE!",
     "choose1": "Choose 1",
     "youMightAlsoLike": "You might also like..",
     "specialRequest": "Special Request",
@@ -176,9 +177,32 @@
     "payDescription": "Pay for your order",
     "address": "Address",
     "openingTimes": "Opening Times",
-    "customizable": "Customizable"
+    "customizable": "Customizable",
+    "youHaveXEarnedRewardsReadyToRedeem": "🎉 You have {{rewards}} rewards ready to redeem!",
+    "justXMorePurchasesToUnlockYourFREEItem": "Just {{cups}} more purchases to unlock your FREE item!",
+    "youreJustXCupsAwayFromYourNextReward": "🎉 You're just {{cups}} stamps away from your next reward!",
+    "callWaiter": "Call Waiter",
+    "balance": "Balance",
+    "closed": "Closed",
+    "sunday": "Sunday",
+    "monday": "Monday",
+    "tuesday": "Tuesday",
+    "wednesday": "Wednesday",
+    "thursday": "Thursday",
+    "friday": "Friday",
+    "saturday": "Saturday",
+    "selectYourTable": "Select your table",
+    "calledWaiterSuccess": "Waiter has been called successfully"
   },
   "cart": {
+    "remainingToPay": "Remaining to Pay",
+    "remainingVoucherAmount": "Remaining Voucher Amount",
+    "voucherApplied": "Voucher Applied",
+    "giftedItems": "Gifted Items",
+    "voucherBalance": "Voucher Balance",
+    "addSpecialRequestOptional": "Add Special Request (Optional)",
+    "continueToGiftDetails": "Continue to Gift Details",
+    "continueToGiftDetailsDescription": "Please fill in the details of the gift recipient and sender to continue.",
     "leaveANoteHere": "Leave a note here..",
     "changeTable": "Change Table",
     "title": "Cart",
@@ -201,6 +225,12 @@
       "cancel": "Cancel",
       "success": ",Item removed from cart"
     },
+    "clearCartConfirmation": {
+      "title": "Clear Cart",
+      "content": "Are you sure you want to clear the cart?",
+      "confirm": "Clear",
+      "cancel": "Cancel"
+    },
     "quantity": "Quantity",
     "price": "Price",
     "perItem": "Per Item",
@@ -273,10 +303,17 @@
     "am": "AM",
     "pm": "PM",
     "cannotSelectPastDate": "You cannot select a past date. Please select today or a future date.",
-    "checkRequiredFields": "Please check required fields"
+    "checkRequiredFields": "Please check required fields",
+    "applyYourAvailableRewardsToGetDiscountsOnItemsInYourCart": "Apply your available rewards to get discounts on items in your cart",
+    "loyalty": "Loyalty",
+    "vat": "Vat ({{value}}%)",
+    "otherTaxes": "{{name}} ({{value}}%)"
   },
   "checkout": {
+    "addCarDetails": "Add Car Details",
+    "soTheRestaurantCanRecognizeYourCarWhenYouArrive": "So the restaurant can recognize your car when you arrive.",
     "customerName": "Customer Name",
+    "save": "Save",
     "paymentSummary": "Payment Summary",
     "orderSummary": "Order Summary",
     "holdayGiftCard": "Holday gift card",
@@ -305,7 +342,21 @@
     "pleaseEnterPhoneNumber": "Please enter phone number",
     "viewOrder": "View Order",
     "itemsSummary": "Items Summary",
-    "removeSplitBill": "Remove Split Bill"
+    "removeSplitBill": "Remove Split Bill",
+    "cardBalance": "Card Balance",
+    "collectAtCounter": "Collect at counter",
+    "collectAtParking": "Collect at parking",
+    "scheduled": "Scheduled",
+    "pickupNow": "Pickup Now",
+    "pickupEstimate": "Pickup Estimate",
+    "now": "Now",
+    "today": "Today",
+    "change": "Change",
+    "pickup": "Pickup",
+    "setPickupTime": "Set Pickup Time",
+    "carPlateNumber": "Car Plate Number",
+    "noItems": "No items in cart",
+    "thawani": "Thawani"
   },
   "address": {
     "title": "Address",
@@ -358,7 +409,9 @@
     "gotIt": "Got It",
     "howItWorksDescription": "The gifted amount will be credited directly to your friend's wallet in the app. The recipient can use the amount to book a session of their choice within the app. The gifted amount is non-refundable and can only be used for booking sessions.",
     "senderEmail": "Sender Email",
-    "save": "Save"
+    "save": "Save",
+    "pleaseEnterRoomNumber": "Please enter room number",
+    "pleaseEnterOfficeNumber": "Please enter office number"
   },
   "login": {
     "singup/Login": "Sing up / Login",
@@ -387,6 +440,10 @@
     "confirmOTPSuccess": "OTP confirmed successfully"
   },
   "order": {
+    "whosPaidTheirShareSplitBill": "Who's paid their share of the split bill?",
+    "seeWhoPaidAndHowMuch": "See who paid and how much",
+    "personHasPaid": "Person has paid",
+    "inviteOthersToBill": "Invite others to bill",
     "title": "Order",
     "newOrder": "New Order",
     "aStaffMemberWillCollectTheCashFromYouAtYourTable": "A staff member will collect the cash from you at your table",
@@ -446,6 +503,7 @@
     "payButtonDescription": "Pay for your order"
   },
   "splitBill": {
+    "serviceFee": "Service Fee",
     "title": "Split Bill",
     "description": "Split Bill",
     "splitBill": "Split Bill",
@@ -503,6 +561,86 @@
     "eCardAmount": "E-Card Amount",
     "receiverName": "Receiver Name",
     "edit": "Edit",
-    "yourInformation": "Your Information"
+    "yourInformation": "Your Information",
+    "minimumAmountShouldBe1OMR": "Minimum amount should be 1 OMR",
+    "add": "Add",
+    "senderNameRequired": "Sender name is required",
+    "receiverNameRequired": "Receiver name is required"
+  },
+  "car": {
+    "addCar": "Add Car",
+    "selectCar": "Select Car",
+    "addCarDetails": "Add Car Details",
+    "brand": "Brand",
+    "color": "Color",
+    "category": "Category",
+    "plateNumber": "Plate Number"
+  },
+  "redeem": {
+    "title": "Redeem Gift",
+    "redeem": "Redeem",
+    "redeemDescription": "Redeem your gift card",
+    "redeemButton": "Redeem",
+    "redeemButtonDescription": "Redeem your gift card",
+    "showThisCodeAtTheRestaurant": "Show this code at the restaurant",
+    "addGiftDetails": "Add Gift Details",
+    "description": "Personalize your gift with a message, delivery timing, and recipient details.",
+    "checkout": "Checkout",
+    "yourName": "Your Name",
+    "yourPhone": "Your Phone",
+    "keepMyNameSecret": "Keep my name secret",
+    "receiverInformation": "Receiver Information",
+    "costumeAmount": "Costume amount",
+    "enterCustomOucherAmount": "Enter custom oucher amount",
+    "amount": "Amount",
+    "eCardAmount": "E-Card Amount",
+    "receiverName": "Receiver Name",
+    "edit": "Edit",
+    "yourInformation": "Your Information",
+    "minimumAmountShouldBe1OMR": "Minimum amount should be 1 OMR",
+    "add": "Add",
+    "senderNameRequired": "Sender name is required",
+    "receiverNameRequired": "Receiver name is required",
+    "includesFreeItemsInThisOrder": "Includes free items in this order",
+    "redeemGiftedItems": "Redeem gifted items",
+    "pending": "Pending",
+    "useThisCodeIfScanningNotPossible": "Use this code if scanning is not possible",
+    "voucherWillBeAppliedAtCheckout": "Voucher will be applied at checkout",
+    "yourGiftCardBalance": "Your gift card balance",
+    "redeemNow": "Redeem Now",
+    "restaurantLocation": "Restaurant Location",
+    "voucherBalance": "Voucher Balance",
+    "getDirections": "Get Directions",
+    "giftedItems": "Gifted Items",
+    "viewAll": "View All",
+    "voucherCodeCopied": "Voucher code copied!",
+    "copyFailed": "Failed to copy voucher code",
+    "hiX": "Hi {{name}}!",
+    "youHaveReceivedAGiftCarFromX": "You have received a gift car from {{name}}!"
+  },
+  "rewardsAndLoyalty": {
+    "title": "Rewards And Loyalty",
+    "description": "Rewards And Loyalty",
+    "rewardsAndLoyalty": "Rewards And Loyalty",
+    "rewardsAndLoyaltyDescription": "Rewards And Loyalty",
+    "rewardsAndLoyaltyButton": "Rewards And Loyalty",
+    "rewardsAndLoyaltyButtonDescription": "Rewards And Loyalty",
+    "completedPurchases": "Completed Purchases",
+    "totalPurchased": "Total Purchased",
+    "saved": "Saved",
+    "almosthere": "Almost here!",
+    "youreJustXCupsAwayFromYourNextReward": "You're just {{cups}} cups away from your next reward!",
+    "youCanRedeemDuringTheCheckout": "You can redeem during the checkout",
+    "youCurrentlyHave": "You currently have",
+    "freeItems": "free items",
+    "redeemNow": "Redeem Now",
+    "yourAvailableRewards": "Your available rewards",
+    "loyaltyHistory": "Loyalty History",
+    "loyaltyHistoryDescription": "Loyalty History",
+    "earnedPoints": "Earned {{points}} points",
+    "order": "Order",
+    "yourOrderFrom": "Your order from {{restaurantName}}",
+    "earned": "Earned",
+    "xPoints": "{{points}} points"
   }
 }

src/components/ArabicPrice/ArabicPrice.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { useAppSelector } from "redux/hooks";
 import ProText from "../ProText";
+import { formatPriceUi } from "utils/helpers";
 
 interface ArabicPriceProps {
   price: number | string;
@@ -25,7 +26,8 @@ const ArabicPrice: React.FC<ArabicPriceProps> = ({
   const { restaurant } = useAppSelector((state) => state.order);
 
   // Format the price to ensure it has 2 decimal places
-  const formattedPrice = typeof price === "number" ? price.toFixed(2) : price;
+  const formattedPrice =
+    typeof price === "number" ? formatPriceUi(price, restaurant?.currency_decimals ?? 3) : price;
   const { textDecoration, ...restStyle } = style;
   const decorationStyle = textDecoration
     ? ({ textDecoration } as React.CSSProperties)

src/components/CartActionsButtons/CartActionsButtons.tsx

@@ -134,9 +134,10 @@ export default function CartActionsButtons({ item }: { item: CartItem }) {
                 }),
               )
             }
+            disabled={item.quantity >= 99}
             className={styles.addButton}
             style={{
-              backgroundColor: colors.primary,
+              backgroundColor: "#FFC600",
               width: 28,
               height: 28,
               border: "none",

src/components/CustomBottomSheet/AddCarBottomSheet.tsx

@@ -0,0 +1,126 @@
+import { Button, Form, Input } from "antd";
+import ProPhoneInput from "components/ProPhoneInput";
+import { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { ProBottomSheet } from "../ProBottomSheet/ProBottomSheet";
+
+const { TextArea } = Input;
+
+interface CarDetailsType {
+  brandId: string;
+  category: string;
+  color: string;
+  plateNumber: string;
+}
+
+interface AddCarBottomSheetProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSave: (value: CarDetailsType) => void;
+}
+
+export function AddCarBottomSheet({
+  isOpen,
+  onClose,
+  onSave,
+}: AddCarBottomSheetProps) {
+  const { t } = useTranslation();
+  const [carForm] = Form.useForm();
+  useEffect(() => {
+    carForm.setFieldsValue({});
+  }, [carForm]);
+
+  const handleSave = () => {
+    onSave(carForm.getFieldsValue());
+    carForm.resetFields();
+    onClose();
+  };
+
+  const handleCancel = () => {
+    carForm.resetFields();
+    onClose();
+  };
+
+  return (
+    <ProBottomSheet
+      isOpen={isOpen}
+      onClose={handleCancel}
+      title={t("car.addCarDetails")}
+      showCloseButton={false}
+      initialSnap={1}
+      height={475}
+      snapPoints={[475]}
+    >
+      <Form
+        layout="vertical"
+        style={{ marginTop: 24}}
+        name="carForm"
+        form={carForm}
+      >
+        <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
+          <Form.Item
+            name="brandId"
+            rules={[{ required: true, message: "" }]}
+            colon={false}
+          >
+            <Input
+              placeholder={t("car.brand")}
+              size="large"
+              style={{ padding: "7px 11px", height: 48, borderRadius: 888 }}
+              autoFocus={false}
+            />
+          </Form.Item>
+
+          <Form.Item
+            name="color"
+            rules={[{ required: true, message: "" }]}
+            colon={false}
+          >
+            <Input
+              placeholder={t("car.color")}
+              size="large"
+              style={{ padding: "7px 11px", height: 48, borderRadius: 888 }}
+              autoFocus={false}
+            />
+          </Form.Item>
+
+          <Form.Item
+            name="category"
+            rules={[{ required: true, message: "" }]}
+            colon={false}
+          >
+            <Input
+              placeholder={t("car.category")}
+              size="large"
+              style={{ padding: "7px 11px", height: 48, borderRadius: 888 }}
+              autoFocus={false}
+            />
+          </Form.Item>
+
+          <Form.Item
+            name="plateNumber"
+            rules={[{ required: true, message: "" }]}
+            colon={false}
+          >
+            <Input
+              placeholder={t("car.plateNumber")}
+              size="large"
+              style={{ padding: "7px 11px", height: 48, borderRadius: 888 }}
+              autoFocus={false}
+            />
+          </Form.Item>
+        </div>
+      </Form>
+
+      <br />
+
+      <Button
+        type="primary"
+        style={{ width: "100%", boxShadow: "none" }}
+        onClick={handleSave}
+      >
+        {t("car.save")}
+      </Button>
+    </ProBottomSheet>
+  );
+}

src/components/CustomBottomSheet/CancelOrderBottomSheet.tsx

@@ -6,7 +6,7 @@ import CancelPopupIcon from "components/Icons/CancelPopupIcon";
 import NextIcon from "components/Icons/NextIcon";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import { useCancelOrderMutation } from "redux/api/others";
 import { useAppSelector } from "redux/hooks";
 import { ProBottomSheet } from "../ProBottomSheet/ProBottomSheet";
@@ -18,7 +18,8 @@ export function CancelOrderBottomSheet() {
   const { t } = useTranslation();
   const [isOpen, setIsOpen] = useState(false);
   const { isRTL } = useAppSelector((state) => state.locale);
-  const { orderId } = useParams();
+  const { orderId, subdomain } = useParams();
+  const navigate = useNavigate();
 
   const [cancelOrder] = useCancelOrderMutation();
 
@@ -31,6 +32,7 @@ export function CancelOrderBottomSheet() {
         message.error(res.error.data.message);
       } else {
         message.success(res.data.message);
+        navigate(`/${subdomain}`);
       }
     });
   };

src/components/CustomBottomSheet/CouponBottomSheet.tsx

@@ -2,6 +2,10 @@ import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { ProBottomSheet } from "../ProBottomSheet/ProBottomSheet";
 import ProRatioGroups from "../ProRatioGroups/ProRatioGroups";
+import { colors } from "ThemeConstants";
+import { updateCoupon } from "features/order/orderSlice";
+import { useAppDispatch } from "redux/hooks";
+import { Button } from "antd";
 
 interface CouponBottomSheetProps {
   isOpen: boolean;
@@ -18,13 +22,14 @@ export function CouponBottomSheet({
 }: CouponBottomSheetProps) {
   const { t } = useTranslation();
   const [value, setValue] = useState(initialValue);
-
+  const dispatch = useAppDispatch();
   useEffect(() => {
     setValue(initialValue);
   }, [initialValue]);
 
   const handleSave = () => {
     onSave(value);
+    dispatch(updateCoupon(value));
     onClose();
   };
 
@@ -38,32 +43,65 @@ export function CouponBottomSheet({
       isOpen={isOpen}
       onClose={handleCancel}
       title={t("cart.coupon")}
-      showCloseButton={false}
       initialSnap={1}
-      height={350}
-      snapPoints={["30vh"]}
+      height={385}
+      snapPoints={[385]}
     >
-      <div>
+      <div style={{ padding: "16px 0" }}>
         <ProRatioGroups
           options={[
             {
               label: "50% off, Min order : SDG 10,000",
-              value: "50",
-              price: "0"
+              value: "7CAB1",
+              price: "7CAB1",
             },
             {
               label: "Buy one get one free, Min order : SDG 5,000",
-              value: "buy",
-              price: "0"
+              value: "7CAB2",
+              price: "7CAB2",
             },
             {
               label: "30% off on select items, Min order : SDG 15,000",
-              value: "30",
-              price: "0"
+              value: "7CABO",
+              price: "7CABO",
             },
           ]}
-          onRatioClick={handleSave}
+          value={value}
+          onRatioClick={(value) => setValue(value)}
+          showDivider={true}
+          optionsStyle={{
+            fontSize: 12,
+            fontWeight: 500,
+            color: "#5F6C7B",
+          }}
+          valueStyle={{
+            fontSize: 12,
+            fontWeight: 500,
+            color: colors.primary,
+          }}
         />
+
+        <div
+          style={{
+            display: "flex",
+            gap: 12,
+            marginTop: 20,
+          }}
+        >
+          <Button
+            type="primary"
+            style={{
+              flex: 1,
+              boxShadow: "none",
+              height: 48,
+              width: "100%",
+            }}
+            onClick={handleSave}
+            disabled={!value}
+          >
+            {t("cart.save")}
+          </Button>
+        </div>
       </div>
     </ProBottomSheet>
   );

src/components/CustomBottomSheet/CustomBottomSheet.module.css

@@ -17,8 +17,6 @@
   width: 100%;
 }
 
-
-
 .serviceIcon path {
   stroke: #ea1f22;
 }
@@ -32,3 +30,96 @@
   width: 24px;
   height: 24px;
 }
+
+/* Make AntD checkbox look like a circular check indicator (scoped via CSS modules) */
+.circleCheckbox :global(.ant-checkbox-inner) {
+  width: 24px;
+  height: 24px;
+  border-radius: 50% !important;
+  border: 1.5px solid #d5d8da;
+  background: transparent;
+}
+
+.circleCheckbox :global(.ant-checkbox-checked .ant-checkbox-inner) {
+  border-radius: 50% !important;
+  background: transparent;
+  border-color: #ffb700;
+}
+
+/* Replace AntD checkmark with a filled inner circle when checked (match SVG) */
+.circleCheckbox :global(.ant-checkbox-inner::after) {
+  content: "";
+  border: 0 !important;
+  transform: none !important;
+  width: 0;
+  height: 0;
+  left: 50%;
+  top: 50%;
+}
+
+:global(.ant-app-rtl) .circleCheckbox :global(.ant-checkbox-inner::after) {
+  left: auto;
+  right: 50%;
+}
+
+.circleCheckbox :global(.ant-checkbox-checked .ant-checkbox-inner::after) {
+  width: 18px;
+  height: 18px;
+  margin-left: -9px;
+  margin-top: -9px;
+  border-radius: 50%;
+  background: #ffb700;
+}
+
+:global(.ant-app-rtl)
+  .circleCheckbox
+  :global(.ant-checkbox-checked .ant-checkbox-inner::after) {
+  margin-left: auto;
+  margin-right: -9px;
+}
+
+/* Apply same circular style to Radio buttons */
+.radioCheckbox :global(.ant-radio-inner) {
+  width: 24px;
+  height: 24px;
+  border-radius: 50% !important;
+  border: 1.5px solid #d5d8da;
+  background: transparent;
+}
+
+.radioCheckbox :global(.ant-radio-checked .ant-radio-inner) {
+  border-radius: 50% !important;
+  background: transparent;
+  border-color: #ffb700;
+}
+
+.radioCheckbox :global(.ant-radio-inner::after) {
+  content: "";
+  border: 0 !important;
+  transform: none !important;
+  width: 0;
+  height: 0;
+  left: 50%;
+  top: 50%;
+}
+
+:global(.ant-app-rtl) .radioCheckbox :global(.ant-radio-inner::after) {
+  left: auto;
+  right: 50%;
+}
+
+.radioCheckbox :global(.ant-radio-checked .ant-radio-inner::after) {
+  width: 18px;
+  height: 18px;
+  margin-left: -9px;
+  margin-top: -9px;
+  border-radius: 50%;
+  background: #ffb700;
+}
+
+:global(.ant-app-rtl)
+  .radioCheckbox
+  :global(.ant-radio-checked .ant-radio-inner::after) {
+  margin-left: auto;
+  margin-right: -9px;
+}

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 handleSave = (giftType: string) => {
-    dispatch(updateGiftDetails({ giftType: giftType }));
+  const { subdomain } = useParams();
+  const navigate = useNavigate();
+  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/components/CustomBottomSheet/GoogleMap.tsx

@@ -1,4 +1,3 @@
-
 import { Status, Wrapper } from "@googlemaps/react-wrapper";
 import { useEffect, useRef, useState } from "react";
 
@@ -74,7 +73,7 @@ function MapComponent({
       });
 
       setMap(newMap);
-      console.log('Map initialized successfully');
+      console.log("Map initialized successfully");
 
       // If we have an initial location, add a marker
       if (initialLocation) {
@@ -148,16 +147,14 @@ function MapComponent({
             geocoder.geocode({ location: { lat, lng } }, (results, status) => {
               if (status === "OK" && results && results[0]) {
                 const address = results[0].formatted_address;
-                console.log(
-                  "Initial marker drag - calling onLocationSelect:",
-                  { lat, lng, address },
-                );
+                console.log("Initial marker drag - calling onLocationSelect:", {
+                  lat,
+                  lng,
+                  address,
+                });
                 onLocationSelect?.(lat, lng, address);
               } else {
-                console.log(
-                  "Geocoding failed on initial marker drag:",
-                  status,
-                );
+                console.log("Geocoding failed on initial marker drag:", status);
                 // Fallback: use coordinates as address if geocoding fails
                 const fallbackAddress = `Location: ${lat.toFixed(6)}, ${lng.toFixed(6)}`;
                 console.log(
@@ -201,19 +198,29 @@ function MapComponent({
 
                 // Get address from coordinates
                 const geocoder = new google.maps.Geocoder();
-                geocoder.geocode({ location: { lat, lng } }, (results, status) => {
+                geocoder.geocode(
+                  { location: { lat, lng } },
+                  (results, status) => {
                     if (status === "OK" && results && results[0]) {
                       const address = results[0].formatted_address;
-                    console.log('Marker drag - calling onLocationSelect:', { lat, lng, address });
+                      console.log("Marker drag - calling onLocationSelect:", {
+                        lat,
+                        lng,
+                        address,
+                      });
                       onLocationSelect?.(lat, lng, address);
                     } else {
-                    console.log('Geocoding failed on drag:', status);
+                      console.log("Geocoding failed on drag:", status);
                       // Fallback: use coordinates as address if geocoding fails
                       const fallbackAddress = `Location: ${lat.toFixed(6)}, ${lng.toFixed(6)}`;
-                    console.log('Using fallback address for drag:', fallbackAddress);
+                      console.log(
+                        "Using fallback address for drag:",
+                        fallbackAddress,
+                      );
                       onLocationSelect?.(lat, lng, fallbackAddress);
                     }
-                });
+                  },
+                );
               }
             });
 
@@ -222,13 +229,17 @@ function MapComponent({
             geocoder.geocode({ location: { lat, lng } }, (results, status) => {
               if (status === "OK" && results && results[0]) {
                 const address = results[0].formatted_address;
-                console.log('Map click - calling onLocationSelect:', { lat, lng, address });
+                console.log("Map click - calling onLocationSelect:", {
+                  lat,
+                  lng,
+                  address,
+                });
                 onLocationSelect?.(lat, lng, address);
               } else {
-                console.log('Geocoding failed on click:', status);
+                console.log("Geocoding failed on click:", status);
                 // Fallback: use coordinates as address if geocoding fails
                 const fallbackAddress = `Location: ${lat.toFixed(6)}, ${lng.toFixed(6)}`;
-                console.log('Using fallback address:', fallbackAddress);
+                console.log("Using fallback address:", fallbackAddress);
                 onLocationSelect?.(lat, lng, fallbackAddress);
               }
             });
@@ -238,6 +249,57 @@ function MapComponent({
     }
   }, [map, onLocationSelect, readOnly, initialLocation]);
 
+  // Update map center and marker when initialLocation changes (after map is initialized)
+  useEffect(() => {
+    if (map && initialLocation) {
+      // Update map center
+      map.setCenter({
+        lat: initialLocation.lat,
+        lng: initialLocation.lng,
+      });
+      map.setZoom(15);
+
+      // Update or create marker
+      if (markerRef.current) {
+        // Update existing marker position
+        markerRef.current.setPosition({
+          lat: initialLocation.lat,
+          lng: initialLocation.lng,
+        });
+      } else {
+        // Create new marker if it doesn't exist
+        const newMarker = new google.maps.Marker({
+          position: { lat: initialLocation.lat, lng: initialLocation.lng },
+          map: map,
+          draggable: !readOnly,
+        });
+        markerRef.current = newMarker;
+
+        // Add drag end listener if not readOnly
+        if (!readOnly && onLocationSelect) {
+          newMarker.addListener("dragend", () => {
+            const position = newMarker.getPosition();
+            if (position) {
+              const lat = position.lat();
+              const lng = position.lng();
+
+              const geocoder = new google.maps.Geocoder();
+              geocoder.geocode({ location: { lat, lng } }, (results, status) => {
+                if (status === "OK" && results && results[0]) {
+                  const address = results[0].formatted_address;
+                  onLocationSelect(lat, lng, address);
+                } else {
+                  const fallbackAddress = `Location: ${lat.toFixed(6)}, ${lng.toFixed(6)}`;
+                  onLocationSelect(lat, lng, fallbackAddress);
+                }
+              });
+            }
+          });
+        }
+      }
+    }
+  }, [map, initialLocation, readOnly, onLocationSelect]);
+
   return (
     <div
       ref={mapRef}

src/components/CustomBottomSheet/OpeningTimesBottomSheet.tsx

@@ -1,22 +1,58 @@
-import { Button } from "antd";
+import { Card } from "antd";
 import { useTranslation } from "react-i18next";
 import { ProBottomSheet } from "../ProBottomSheet/ProBottomSheet";
 import ProText from "components/ProText";
 import ProTitle from "components/ProTitle";
 import { useAppSelector } from "redux/hooks";
+import { useGetOpeningTimesQuery } from "redux/api/others";
+import { useMemo } from "react";
+import TimeIcon from "components/Icons/order/TimeIcon";
 
 interface OpeningTimesBottomSheetProps {
   isOpen: boolean;
   onClose: () => void;
 }
 
-const textStyle: React.CSSProperties = {
-  fontWeight: 400,
-  fontStyle: "Regular",
-  fontSize: 14,
-  lineHeight: "140%",
-  letterSpacing: "0%",
-  marginBottom: 4,
+// Helper function to format time (HH:mm to 12h format)
+const formatTime = (time: string | null | undefined): string => {
+  if (!time) return "";
+
+  // If already in 12h format (contains AM/PM), return as is
+  if (time.includes("AM") || time.includes("PM")) {
+    return time;
+  }
+
+  // Parse 24h format (HH:mm)
+  const [hours, minutes] = time.split(":");
+  const hour24 = parseInt(hours, 10);
+
+  if (isNaN(hour24)) return time;
+
+  const hour12 = hour24 % 12 || 12;
+  const ampm = hour24 >= 12 ? "PM" : "AM";
+  return `${hour12}:${minutes} ${ampm}`;
+};
+
+// Helper function to get time ranges for a day
+const getDayTimes = (
+  openingTimes: any,
+  dayIndex: number,
+): { shift1: string | null; shift2: string | null } => {
+  if (!openingTimes) {
+    return { shift1: null, shift2: null };
+  }
+
+  const from1 = openingTimes[`${dayIndex}_from` as keyof typeof openingTimes];
+  const to1 = openingTimes[`${dayIndex}_to` as keyof typeof openingTimes];
+  const from2 = openingTimes[`2_${dayIndex}_from` as keyof typeof openingTimes];
+  const to2 = openingTimes[`2_${dayIndex}_to` as keyof typeof openingTimes];
+
+  const shift1 =
+    from1 && to1 ? `${formatTime(from1)} - ${formatTime(to1)}` : null;
+  const shift2 =
+    from2 && to2 ? `${formatTime(from2)} - ${formatTime(to2)}` : null;
+
+  return { shift1, shift2 };
 };
 
 export function OpeningTimesBottomSheet({
@@ -26,6 +62,12 @@ export function OpeningTimesBottomSheet({
   const { t } = useTranslation();
   const { isRTL } = useAppSelector((state) => state.locale);
   const { restaurant } = useAppSelector((state) => state.order);
+  const { data: openingTimes } = useGetOpeningTimesQuery(
+    restaurant?.restautantId,
+    {
+      skip: !restaurant?.restautantId,
+    },
+  );
 
   const days = [
     "sunday",
@@ -37,7 +79,11 @@ export function OpeningTimesBottomSheet({
     "saturday",
   ];
   const todayIndex = new Date().getDay();
-  const todayDay = days[todayIndex];
+
+  // Memoize day times to avoid recalculating on every render
+  const dayTimes = useMemo(() => {
+    return days.map((_, index) => getDayTimes(openingTimes, index));
+  }, [openingTimes]);
 
   return (
     <ProBottomSheet
@@ -46,170 +92,205 @@ export function OpeningTimesBottomSheet({
       title={t("menu.openingTimes")}
       showCloseButton={false}
       initialSnap={1}
-      height={445}
-      snapPoints={[445]}
+      height={600}
+      snapPoints={[600]}
     >
       <div
         style={{
           display: "flex",
           flexDirection: "column",
-          padding: 20,
+          padding: "20px 0",
+          gap: 20,
+          maxHeight: "calc(600px - 120px)",
+          overflowY: "auto",
+        }}
+      >
+        {/* Address Section */}
+        <Card
+          bordered={false}
+          style={{
+            backgroundColor: "#f8f9fa",
+            borderRadius: 12,
+            boxShadow: "none",
+          }}
+          bodyStyle={{ padding: "16px" }}
+        >
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              gap: 8,
+            }}
+          >
+            <ProTitle
+              level={5}
+              style={{
+                marginBottom: 0,
+                fontSize: 16,
+                fontWeight: 600,
+                color: "#333",
+              }}
+            >
+              {t("menu.address")}
+            </ProTitle>
+            <ProText
+              type="secondary"
+              style={{
+                fontSize: 14,
+                lineHeight: "20px",
+                color: "#666",
               }}
             >
-        <ProTitle level={5}>{t("menu.address")}</ProTitle>
-        <ProText type="secondary">
               {isRTL ? restaurant?.addressAR : restaurant?.address}
             </ProText>
+          </div>
+        </Card>
 
-        <ProTitle level={5}>{t("menu.openingTimes")}</ProTitle>
-        <div style={{ display: "flex", justifyContent: "space-between" }}>
-          <ProText
-            type="secondary"
+        {/* Opening Times Section */}
+        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+          <div
             style={{
-              ...textStyle,
-              fontWeight: todayDay === "sunday" ? 700 : 400,
+              display: "flex",
+              alignItems: "center",
+              gap: 8,
+              marginBottom: 4,
             }}
           >
-            sunday
-          </ProText>
-          <ProText
-            type="secondary"
+            <TimeIcon color="#333" />
+            <ProTitle
+              level={5}
               style={{
-              ...textStyle,
-              fontWeight: todayDay === "sunday" ? 700 : 400,
+                marginBottom: 0,
+                fontSize: 16,
+                fontWeight: 600,
+                color: "#333",
               }}
             >
-            10:00 AM to 10:00 PM
+              {t("menu.openingTimes")}
+            </ProTitle>
+          </div>
+
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              gap: 8,
+            }}
+          >
+            {days.map((day, index) => {
+              const isToday = index === todayIndex;
+              const { shift1, shift2 } = dayTimes[index];
+              const hasShifts = shift1 || shift2;
+
+              return (
+                <Card
+                  key={day}
+                  bordered
+                  style={{
+                    borderRadius: 12,
+                    borderColor: isToday ? "#1890ff" : "#e8e8e8",
+                    borderWidth: isToday ? 2 : 1,
+                    backgroundColor: isToday ? "#f0f8ff" : "#ffffff",
+                    boxShadow: isToday
+                      ? "0 2px 8px rgba(24, 144, 255, 0.15)"
+                      : "0 1px 2px rgba(0, 0, 0, 0.05)",
+                    transition: "all 0.2s ease",
+                  }}
+                  bodyStyle={{ padding: "14px 16px" }}
+                >
+                  <div
+                    style={{
+                      display: "flex",
+                      justifyContent: "space-between",
+                      alignItems: "center",
+                      gap: 16,
+                    }}
+                  >
+                    <div
+                      style={{
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 12,
+                        flex: 1,
+                      }}
+                    >
+                      {isToday && (
+                        <div
+                          style={{
+                            width: 6,
+                            height: 6,
+                            borderRadius: "50%",
+                            backgroundColor: "#1890ff",
+                            flexShrink: 0,
+                          }}
+                        />
+                      )}
+                      <ProText
+                        style={{
+                          fontSize: 15,
+                          fontWeight: isToday ? 600 : 500,
+                          color: isToday ? "#1890ff" : "#333",
+                          textTransform: "capitalize",
+                        }}
+                      >
+                        {t(`menu.${day}`)}
                       </ProText>
                     </div>
-        <div style={{ display: "flex", justifyContent: "space-between" }}>
+
+                    <div
+                      style={{
+                        display: "flex",
+                        flexDirection: "column",
+                        alignItems: isRTL ? "flex-start" : "flex-end",
+                        gap: shift2 ? 4 : 0,
+                        flex: 1,
+                      }}
+                    >
+                      {hasShifts ? (
+                        <>
+                          <ProText
+                            style={{
+                              fontSize: 14,
+                              fontWeight: isToday ? 500 : 400,
+                              color: isToday ? "#1890ff" : "#666",
+                              lineHeight: "20px",
+                            }}
+                          >
+                            {shift1}
+                          </ProText>
+                          {shift2 && (
+                            <ProText
+                              style={{
+                                fontSize: 14,
+                                fontWeight: isToday ? 500 : 400,
+                                color: isToday ? "#1890ff" : "#666",
+                                lineHeight: "20px",
+                              }}
+                            >
+                              {shift2}
+                            </ProText>
+                          )}
+                        </>
+                      ) : (
                         <ProText
                           type="secondary"
                           style={{
-              ...textStyle,
-              fontWeight: todayDay === "monday" ? 700 : 400,
+                            fontSize: 14,
+                            color: "#999",
+                            fontStyle: "italic",
                           }}
                         >
-            monday
-          </ProText>
-          <ProText
-            type="secondary"
-            style={{
-              ...textStyle,
-              fontWeight: todayDay === "monday" ? 700 : 400,
-            }}
-          >
-            10:00 AM to 10:00 PM
-          </ProText>
-        </div>
-        <div style={{ display: "flex", justifyContent: "space-between"}}>
-          <ProText
-            type="secondary"
-            style={{
-              ...textStyle,
-              fontWeight: todayDay === "tuesday" ? 700 : 400,
-            }}
-          >
-            tuesday
-          </ProText>
-          <ProText
-            type="secondary"
-            style={{
-              ...textStyle,
-              fontWeight: todayDay === "tuesday" ? 700 : 400,
-            }}
-          >
-            10:00 AM to 10:00 PM
-          </ProText>
-        </div>
-        <div style={{ display: "flex", justifyContent: "space-between" }}>
-          <ProText
-            type="secondary"
-            style={{
-              ...textStyle,
-              fontWeight: todayDay === "wednesday" ? 700 : 400,
-            }}
-          >
-            wednesday
-          </ProText>
-          <ProText
-            type="secondary"
-            style={{
-              ...textStyle,
-              fontWeight: todayDay === "wednesday" ? 700 : 400,
-            }}
-          >
-            10:00 AM to 10:00 PM
-          </ProText>
-        </div>
-        <div style={{ display: "flex", justifyContent: "space-between" }}>
-          <ProText
-            type="secondary"
-            style={{
-              ...textStyle,
-              fontWeight: todayDay === "thursday" ? 700 : 400,
-            }}
-          >
-            thursday
-          </ProText>
-          <ProText
-            type="secondary"
-            style={{
-              ...textStyle,
-              fontWeight: todayDay === "thursday" ? 700 : 400,
-            }}
-          >
-            10:00 AM to 10:00 PM
-          </ProText>
-        </div>
-        <div style={{ display: "flex", justifyContent: "space-between" }}>
-          <ProText
-            type="secondary"
-            style={{
-              ...textStyle,
-              fontWeight: todayDay === "friday" ? 700 : 400,
-            }}
-          >
-            friday
-          </ProText>
-          <ProText
-            type="secondary"
-            style={{
-              ...textStyle,
-              fontWeight: todayDay === "friday" ? 700 : 400,
-            }}
-          >
-            10:00 AM to 10:00 PM
-          </ProText>
-        </div>
-        <div style={{ display: "flex", justifyContent: "space-between" }}>
-          <ProText
-            type="secondary"
-            style={{
-              ...textStyle,
-              fontWeight: todayDay === "saturday" ? 700 : 400,
-            }}
-          >
-            saturday
-          </ProText>
-          <ProText
-            type="secondary"
-            style={{
-              ...textStyle,
-              fontWeight: todayDay === "saturday" ? 700 : 400,
-            }}
-          >
-            10:00 AM to 10:00 PM
+                          {t("menu.closed")}
                         </ProText>
+                      )}
+                    </div>
+                  </div>
+                </Card>
+              );
+            })}
+          </div>
         </div>
       </div>
-      <Button
-        type="primary"
-        style={{ width: "100%", height: 48 }}
-        onClick={onClose}
-      >
-        {t("menu.close")}
-      </Button>
     </ProBottomSheet>
   );
 }

src/components/CustomBottomSheet/TipBottomSheet.tsx

@@ -1,23 +1,25 @@
-import { Button, Input } from "antd";
+import { Button, Input, InputNumber } from "antd";
 import WaiterRewardingIcon from "components/Icons/waiter/WaiterRewardingIcon";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { ProBottomSheet } from "../ProBottomSheet/ProBottomSheet";
+import { updateTip } from "features/order/orderSlice";
+import { useAppDispatch } from "redux/hooks";
+import ProText from "components/ProText";
 
 interface TipBottomSheetProps {
   isOpen: boolean;
   onClose: () => void;
   initialValue: string;
-  onSave: (value: string) => void;
 }
 
 export function TipBottomSheet({
   isOpen,
   onClose,
   initialValue,
-  onSave,
 }: TipBottomSheetProps) {
   const { t } = useTranslation();
+  const dispatch = useAppDispatch();
   const [value, setValue] = useState(initialValue);
 
   useEffect(() => {
@@ -25,7 +27,8 @@ export function TipBottomSheet({
   }, [initialValue]);
 
   const handleSave = () => {
-    onSave(value);
+    const numAmount = parseFloat(value) || 0;
+    dispatch(updateTip(numAmount.toString()));
     onClose();
   };
 
@@ -39,10 +42,9 @@ export function TipBottomSheet({
       isOpen={isOpen}
       onClose={handleCancel}
       title={t("cart.tip")}
-      showCloseButton={false}
       initialSnap={1}
-      height={370}
-      snapPoints={[370]}
+      height={380}
+      snapPoints={[380]}
     >
       <div
         style={{
@@ -50,28 +52,43 @@ export function TipBottomSheet({
           flexDirection: "column",
           alignItems: "center",
           justifyContent: "center",
+          gap: 10,
         }}
       >
         <div style={{ marginTop: 20 }}>
           <WaiterRewardingIcon />
         </div>
 
-        <br />
+        <ProText
+          style={{
+            fontWeight: 400,
+            fontStyle: "Regular",
+            fontSize: 16,
+            lineHeight: "140%",
+            letterSpacing: "0%",
+            color: "#333333",
+            textAlign: "left",
+            width: "100%",
+          }}
+        >
+          {t("cart.amount")}
+        </ProText>
 
-        <Input
+        <InputNumber
           value={value}
-          onChange={(e) => setValue(e.target.value)}
+          onChange={(value) => setValue(value?.toString() || "")}
           placeholder={t("cart.amount")}
           autoFocus={false}
           size="large"
+          style={{ height: 48, width: "100%", marginBottom: 8 }}
+          min={"0"}
         />
 
-        <br />
-
         <Button
           type="primary"
           style={{ width: "100%", height: 48 }}
           onClick={handleSave}
+          disabled={value === "" || parseFloat(value) <= 0}
         >
           {t("cart.addTip")}
         </Button>

src/components/CustomBottomSheet/TipDialog.tsx

@@ -2,29 +2,27 @@ import { Button, Input, Modal } from "antd";
 import WaiterRewardingIcon from "components/Icons/waiter/WaiterRewardingIcon";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { useAppDispatch } from "redux/hooks";
+import { updateTip } from "features/order/orderSlice";
 
 interface TipDialogProps {
   isOpen: boolean;
   onClose: () => void;
   initialValue: string;
-  onSave: (value: string) => void;
 }
 
-export function TipDialog({
-  isOpen,
-  onClose,
-  initialValue,
-  onSave,
-}: TipDialogProps) {
+export function TipDialog({ isOpen, onClose, initialValue }: TipDialogProps) {
   const { t } = useTranslation();
   const [value, setValue] = useState(initialValue);
+  const dispatch = useAppDispatch();
 
   useEffect(() => {
     setValue(initialValue);
   }, [initialValue]);
 
   const handleSave = () => {
-    onSave(value);
+    const numAmount = parseFloat(value) || 0;
+    dispatch(updateTip(numAmount.toString()));
     onClose();
   };
 

src/components/Icons/BranchesIcon.tsx

@@ -0,0 +1,63 @@
+interface BranchesIconType {
+  className?: string;
+  onClick?: () => void;
+}
+
+const BranchesIcon = ({ className, onClick }: BranchesIconType) => {
+  return (
+    <svg
+      width="15"
+      height="16"
+      viewBox="0 0 15 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      onClick={onClick}
+    >
+      <path
+        d="M5.40234 3.18555C5.54014 2.593 6.04569 1.00063 7.49875 1.00063C8.95667 1.00063 9.4607 2.60361 9.59656 3.19141"
+        stroke="#333333"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12.7224 15H2.27935C1.70007 15 1.23047 14.5305 1.23047 13.9512V4.23958C1.23047 3.66035 1.70007 3.19075 2.27935 3.19075H12.7224C13.3017 3.19075 13.7713 3.66035 13.7713 4.23958V13.9512C13.7713 14.5305 13.3017 15 12.7224 15Z"
+        stroke="#333333"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M10.4466 8.39983C10.7649 8.92011 10.9482 9.53128 10.9482 10.1851V10.6016H4.05078V10.1851C4.05078 8.2877 5.59476 6.74955 7.4995 6.74955C8.09085 6.74955 8.64745 6.8978 9.13388 7.15906"
+        stroke="#333333"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M2.90234 10.6016H12.0989"
+        stroke="#333333"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M7.5 6.75V5.94196"
+        stroke="#333333"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M10.6209 12.0625H4.37929C4.18146 12.0625 4.0038 11.9419 3.93143 11.7585L3.47656 10.605H11.5236L11.0687 11.7585C10.9964 11.9419 10.8187 12.0625 10.6209 12.0625Z"
+        stroke="#333333"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default BranchesIcon;

src/components/Icons/CoinsIcon.tsx

@@ -0,0 +1,47 @@
+interface CoinsIconType {
+  className?: string;
+  onClick?: () => void;
+}
+
+const CoinsIcon = ({ className, onClick }: CoinsIconType) => {
+  return (
+    <svg
+      width="18"
+      height="18"
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      onClick={onClick}
+    >
+      <path
+        d="M15.8555 9.85547V12.4269C15.8555 13.5412 13.1692 14.9983 9.85547 14.9983C6.54175 14.9983 3.85547 13.5412 3.85547 12.4269V10.284"
+        stroke="#FFC600"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M4.10938 10.5083C4.8508 11.4923 7.14366 12.4154 9.85737 12.4154C13.1711 12.4154 15.8574 11.0388 15.8574 9.85598C15.8574 9.1917 15.0114 8.46398 13.6837 7.95312"
+        stroke="#FFC600"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M13.2852 5.57031V8.14174C13.2852 9.25603 10.5989 10.7132 7.28516 10.7132C3.97144 10.7132 1.28516 9.25603 1.28516 8.14174V5.57031"
+        stroke="#FFC600"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M7.28516 8.12914C10.5989 8.12914 13.2852 6.75257 13.2852 5.56971C13.2852 4.38686 10.5989 3 7.28516 3C3.97144 3 1.28516 4.386 1.28516 5.56971C1.28516 6.75257 3.97144 8.12914 7.28516 8.12914Z"
+        stroke="#FFC600"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default CoinsIcon;

src/components/Icons/CopyIcon.tsx

@@ -0,0 +1,33 @@
+interface CopyIconType {
+  className?: string;
+  onClick?: () => void;
+}
+
+const CopyIcon = ({ className, onClick }: CopyIconType) => {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      onClick={onClick}
+    >
+      <path
+        d="M5.83203 8.05453C5.83203 7.46509 6.06619 6.89979 6.48299 6.48299C6.89979 6.06619 7.46509 5.83203 8.05453 5.83203H15.2762C15.5681 5.83203 15.8571 5.88952 16.1267 6.00121C16.3964 6.1129 16.6414 6.27661 16.8477 6.48299C17.0541 6.68936 17.2178 6.93437 17.3295 7.20402C17.4412 7.47366 17.4987 7.76267 17.4987 8.05453V15.2762C17.4987 15.5681 17.4412 15.8571 17.3295 16.1267C17.2178 16.3964 17.0541 16.6414 16.8477 16.8477C16.6414 17.0541 16.3964 17.2178 16.1267 17.3295C15.8571 17.4412 15.5681 17.4987 15.2762 17.4987H8.05453C7.76267 17.4987 7.47366 17.4412 7.20402 17.3295C6.93437 17.2178 6.68936 17.0541 6.48299 16.8477C6.27661 16.6414 6.1129 16.3964 6.00121 16.1267C5.88952 15.8571 5.83203 15.5681 5.83203 15.2762V8.05453Z"
+        stroke="#A4A3AA"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M3.34333 13.9475C3.0875 13.8021 2.87471 13.5916 2.72658 13.3374C2.57846 13.0832 2.50028 12.7942 2.5 12.5V4.16667C2.5 3.25 3.25 2.5 4.16667 2.5H12.5C13.125 2.5 13.465 2.82083 13.75 3.33333"
+        stroke="#A4A3AA"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default CopyIcon;

src/components/Icons/CupIcon.tsx

@@ -0,0 +1,25 @@
+interface CupIconType {
+  className?: string;
+  onClick?: () => void;
+}
+
+const CupIcon = ({ className, onClick }: CupIconType) => {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      onClick={onClick}
+    >
+      <path
+        d="M4.16797 2.5H16.668C17.11 2.5 17.5339 2.67559 17.8465 2.98816C18.159 3.30072 18.3346 3.72464 18.3346 4.16667V6.66667C18.3346 7.10869 18.159 7.53262 17.8465 7.84518C17.5339 8.15774 17.11 8.33333 16.668 8.33333H15.0013V10.8333C15.0013 11.7174 14.6501 12.5652 14.025 13.1904C13.3999 13.8155 12.552 14.1667 11.668 14.1667H6.66797C5.78391 14.1667 4.93607 13.8155 4.31095 13.1904C3.68582 12.5652 3.33464 11.7174 3.33464 10.8333V3.33333C3.33464 3.11232 3.42243 2.90036 3.57871 2.74408C3.73499 2.5878 3.94695 2.5 4.16797 2.5ZM15.0013 4.16667V6.66667H16.668V4.16667H15.0013ZM1.66797 15.8333H16.668V17.5H1.66797V15.8333Z"
+        fill="#FFB700"
+      />
+    </svg>
+  );
+};
+
+export default CupIcon;

src/components/Icons/DirectionsIcon.tsx

@@ -0,0 +1,25 @@
+interface DirectionsIconType {
+  className?: string;
+  onClick?: () => void;
+}
+
+const DirectionsIcon = ({ className, onClick }: DirectionsIconType) => {
+  return (
+    <svg
+      width="18"
+      height="18"
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      onClick={onClick}
+    >
+      <path
+        d="M7.5 9H10.125V9.975C10.125 10.15 10.2 10.2687 10.35 10.3312C10.5 10.3938 10.6375 10.3625 10.7625 10.2375L12.225 8.775C12.375 8.625 12.45 8.45 12.45 8.25C12.45 8.05 12.375 7.875 12.225 7.725L10.7625 6.2625C10.6375 6.1375 10.5 6.10625 10.35 6.16875C10.2 6.23125 10.125 6.35 10.125 6.525V7.5H6.75C6.5375 7.5 6.3595 7.572 6.216 7.716C6.0725 7.86 6.0005 8.038 6 8.25V10.5C6 10.7125 6.072 10.8907 6.216 11.0347C6.36 11.1788 6.538 11.2505 6.75 11.25C6.962 11.2495 7.14025 11.1775 7.28475 11.034C7.42925 10.8905 7.501 10.7125 7.5 10.5V9ZM9 16.5C8.8125 16.5 8.62825 16.4625 8.44725 16.3875C8.26625 16.3125 8.1005 16.2 7.95 16.05L1.95 10.05C1.8 9.9 1.6875 9.73425 1.6125 9.55275C1.5375 9.37125 1.5 9.187 1.5 9C1.5 8.813 1.5375 8.62875 1.6125 8.44725C1.6875 8.26575 1.8 8.1 1.95 7.95L7.95 1.95C8.1 1.8 8.26575 1.6875 8.44725 1.6125C8.62875 1.5375 8.813 1.5 9 1.5C9.187 1.5 9.3715 1.5375 9.5535 1.6125C9.7355 1.6875 9.901 1.8 10.05 1.95L16.05 7.95C16.2 8.1 16.3125 8.26575 16.3875 8.44725C16.4625 8.62875 16.5 8.813 16.5 9C16.5 9.187 16.4625 9.3715 16.3875 9.5535C16.3125 9.7355 16.2 9.901 16.05 10.05L10.05 16.05C9.9 16.2 9.73425 16.3125 9.55275 16.3875C9.37125 16.4625 9.187 16.5 9 16.5ZM6 12L9 15L15 9L9 3L3 9L6 12Z"
+        fill="#E8B400"
+      />
+    </svg>
+  );
+};
+
+export default DirectionsIcon;

src/components/Icons/GiftIcon.tsx

@@ -0,0 +1,45 @@
+interface GiftIconType {
+  className?: string;
+  onClick?: () => void;
+}
+
+const GiftIcon = ({ className, onClick }: GiftIconType) => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      onClick={onClick}
+    >
+      <path
+        d="M13 4.67188H3C2.44772 4.67188 2 5.11959 2 5.67187V13.0052C2 13.5575 2.44772 14.0052 3 14.0052H13C13.5523 14.0052 14 13.5575 14 13.0052V5.67187C14 5.11959 13.5523 4.67188 13 4.67188Z"
+        stroke="#7950E6"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M2 10.6719H14V13.0052C14 13.2704 13.8946 13.5248 13.7071 13.7123C13.5196 13.8999 13.2652 14.0052 13 14.0052H3C2.73478 14.0052 2.48043 13.8999 2.29289 13.7123C2.10536 13.5248 2 13.2704 2 13.0052V10.6719Z"
+        stroke="#7950E6"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M6.33464 4.66927C7.25511 4.66927 8.0013 3.92308 8.0013 3.0026C8.0013 2.08213 7.25511 1.33594 6.33464 1.33594C5.41416 1.33594 4.66797 2.08213 4.66797 3.0026C4.66797 3.92308 5.41416 4.66927 6.33464 4.66927Z"
+        stroke="#7950E6"
+      />
+      <path
+        d="M9.33333 4.66667C10.0697 4.66667 10.6667 4.06971 10.6667 3.33333C10.6667 2.59695 10.0697 2 9.33333 2C8.59695 2 8 2.59695 8 3.33333C8 4.06971 8.59695 4.66667 9.33333 4.66667Z"
+        stroke="#7950E6"
+      />
+      <path
+        d="M5.66797 6.67188L8.0013 4.67188L10.3346 6.67188"
+        stroke="#7950E6"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default GiftIcon;

src/components/Icons/LoginIcon.tsx

@@ -0,0 +1,27 @@
+interface LoginIconType {
+  className?: string;
+  onClick?: () => void;
+}
+
+const LoginIcon = ({ className, onClick }: LoginIconType) => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      onClick={onClick}
+    >
+      <path
+        d="M10 2H10.8C11.9201 2 12.4802 2 12.908 2.21799C13.2843 2.40973 13.5903 2.71569 13.782 3.09202C14 3.51984 14 4.0799 14 5.2V10.8C14 11.9201 14 12.4802 13.782 12.908C13.5903 13.2843 13.2843 13.5903 12.908 13.782C12.4802 14 11.9201 14 10.8 14H10M6.66667 4.66667L10 8M10 8L6.66667 11.3333M10 8L2 8"
+        stroke="#333333"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default LoginIcon;

src/components/Icons/LoyaltyAndRewardIcon.tsx

@@ -0,0 +1,37 @@
+interface LoyaltyAndRewardIconType {
+  className?: string;
+  onClick?: () => void;
+  color?: string
+}
+
+const LoyaltyAndRewardIcon = ({ className, onClick, color }: LoyaltyAndRewardIconType) => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      onClick={onClick}
+    >
+      <path
+        d="M1.33203 7.9987C1.33203 5.32736 1.33203 3.99203 2.11336 3.16203C2.8947 2.33203 4.15136 2.33203 6.66536 2.33203H9.33203C11.846 2.33203 13.1034 2.33203 13.884 3.16203C14.6647 3.99203 14.6654 5.32736 14.6654 7.9987C14.6654 10.67 14.6654 12.0054 13.884 12.8354C13.1027 13.6654 11.846 13.6654 9.33203 13.6654H6.66536C4.15136 13.6654 2.89403 13.6654 2.11336 12.8354C1.3327 12.0054 1.33203 10.67 1.33203 7.9987Z"
+        stroke={color || "#333333"}
+      />
+      <path
+        d="M4.59189 7.22074C5.21789 6.85541 5.76389 7.00274 6.09189 7.23741C6.22655 7.33341 6.29389 7.38141 6.33322 7.38141C6.37322 7.38141 6.43989 7.33341 6.57455 7.23741C6.90255 7.00274 7.44855 6.85541 8.07455 7.22074C8.89589 7.70074 9.08122 9.28341 7.18789 10.6187C6.82655 10.8727 6.64589 11.0001 6.33322 11.0001C6.02055 11.0001 5.83989 10.8734 5.47922 10.6187C3.58522 9.28341 3.76989 7.70074 4.59189 7.22074Z"
+        stroke={color || "#333333"}
+        strokeLinecap="round"
+      />
+      <path
+        d="M12 11H10"
+        stroke={color || "#333333"}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default LoyaltyAndRewardIcon;

src/components/Icons/MyOrderIcon.tsx

@@ -0,0 +1,27 @@
+interface MyOrderIconType {
+  className?: string;
+  onClick?: () => void;
+}
+
+const MyOrderIcon = ({ className, onClick }: MyOrderIconType) => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      onClick={onClick}
+    >
+      <path
+        d="M10.6656 5.9987V3.9987C10.6656 2.52594 9.4717 1.33203 7.99894 1.33203C6.52618 1.33203 5.33228 2.52594 5.33228 3.9987V5.9987M2.39361 6.90001L1.99361 11.1667C1.87988 12.3798 1.82302 12.9864 2.02431 13.4549C2.20114 13.8665 2.51102 14.2067 2.90429 14.4212C3.35196 14.6654 3.96119 14.6654 5.17964 14.6654H10.8182C12.0367 14.6654 12.6459 14.6654 13.0936 14.4212C13.4869 14.2067 13.7967 13.8665 13.9736 13.4549C14.1749 12.9864 14.118 12.3798 14.0043 11.1667L13.6043 6.90001C13.5082 5.8756 13.4602 5.36339 13.2298 4.97614C13.0269 4.63509 12.7272 4.36211 12.3687 4.19193C11.9616 3.9987 11.4472 3.9987 10.4182 3.9987L5.57964 3.9987C4.55074 3.9987 4.03628 3.9987 3.62922 4.19193C3.27072 4.3621 2.97095 4.63509 2.76805 4.97614C2.53767 5.36339 2.48965 5.87559 2.39361 6.90001Z"
+        stroke="#333333"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default MyOrderIcon;

src/components/Icons/NoteIcon.tsx

@@ -17,10 +17,10 @@ const NoteIcon = ({ className, onClick }: NoteIconType) => {
       <path
         d="M12 16H12.008M12 8V13M3.23005 7.913L7.91005 3.23C8.06005 3.08 8.26005 3 8.48005 3H15.53C15.74 3 15.95 3.08 16.1 3.23L20.77 7.903C20.92 8.053 21 8.253 21 8.473V15.527C21 15.737 20.92 15.947 20.77 16.097L16.1 20.77C15.95 20.92 15.75 21 15.53 21H8.47005C8.36456 21.0011 8.2599 20.9814 8.16208 20.9419C8.06425 20.9025 7.9752 20.844 7.90005 20.77L3.23005 16.097C3.15602 16.0218 3.09759 15.9328 3.05812 15.835C3.01865 15.7371 2.99891 15.6325 3.00005 15.527V8.473C3.00005 8.263 3.08005 8.053 3.23005 7.903V7.913Z"
         stroke="#3D3B4A"
-        stroke-width="1.5"
-        stroke-miterlimit="10"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="1.5"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
     </svg>
   );

src/components/Icons/PlusIcon.tsx

@@ -1,14 +1,15 @@
 interface PlusIconType {
   className?: string;
   onClick?: () => void;
-  dimesion?: string
+  dimension?: string
+  color?: string
 }
 
-const PlusIcon = ({ className, onClick, dimesion }: PlusIconType) => {
+const PlusIcon = ({ className, onClick, dimension, color }: PlusIconType) => {
   return (
     <svg
-      width={dimesion || "16"}
-      height={dimesion || "16"}
+      width={dimension || "16"}
+      height={dimension || "16"}
       viewBox="0 0 16 16"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
@@ -17,7 +18,7 @@ const PlusIcon = ({ className, onClick, dimesion }: PlusIconType) => {
     >
       <path
         d="M7.99992 3.3335V12.6668M3.33325 8.00016H12.6666"
-        stroke="#FFD633"
+        stroke={color || "#FFD633"}
         strokeWidth="1.5"
         strokeLinecap="round"
         strokeLinejoin="round"

src/components/Icons/PopularIcon.tsx

@@ -0,0 +1,51 @@
+interface PopularIconType {
+  className?: string;
+  onClick?: () => void;
+}
+
+const PopularIcon = ({ className, onClick }: PopularIconType) => {
+  return (
+    <svg
+      fill="#FFC600"
+      height="30"
+      width="30"
+      version="1.1"
+      id="Icons"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      viewBox="0 0 32 32"
+      xmlSpace="preserve"
+      className={className}
+      onClick={onClick}
+    >
+      <g>
+        <path
+          d="M12,17c0.8-4.2,1.9-5.3,6.1-6.1c0.5-0.1,0.8-0.5,0.8-1s-0.3-0.9-0.8-1C13.9,8.1,12.8,7,12,2.8C11.9,2.3,11.5,2,11,2
+		c-0.5,0-0.9,0.3-1,0.8C9.2,7,8.1,8.1,3.9,8.9C3.5,9,3.1,9.4,3.1,9.9s0.3,0.9,0.8,1c4.2,0.8,5.3,1.9,6.1,6.1c0.1,0.5,0.5,0.8,1,0.8
+		S11.9,17.4,12,17z"
+        />
+        <path
+          d="M22,24c-2.8-0.6-3.4-1.2-4-4c-0.1-0.5-0.5-0.8-1-0.8s-0.9,0.3-1,0.8c-0.6,2.8-1.2,3.4-4,4c-0.5,0.1-0.8,0.5-0.8,1
+		s0.3,0.9,0.8,1c2.8,0.6,3.4,1.2,4,4c0.1,0.5,0.5,0.8,1,0.8s0.9-0.3,1-0.8c0.6-2.8,1.2-3.4,4-4c0.5-0.1,0.8-0.5,0.8-1
+		S22.4,24.1,22,24z"
+        />
+        <path
+          d="M29.2,14c-2.2-0.4-2.7-0.9-3.1-3.1c-0.1-0.5-0.5-0.8-1-0.8c-0.5,0-0.9,0.3-1,0.8c-0.4,2.2-0.9,2.7-3.1,3.1
+		c-0.5,0.1-0.8,0.5-0.8,1s0.3,0.9,0.8,1c2.2,0.4,2.7,0.9,3.1,3.1c0.1,0.5,0.5,0.8,1,0.8c0.5,0,0.9-0.3,1-0.8
+		c0.4-2.2,0.9-2.7,3.1-3.1c0.5-0.1,0.8-0.5,0.8-1S29.7,14.1,29.2,14z"
+        />
+        <path
+          d="M5.7,22.3C5.4,22,5,21.9,4.6,22.1c-0.1,0-0.2,0.1-0.3,0.2c-0.1,0.1-0.2,0.2-0.2,0.3C4,22.7,4,22.9,4,23s0,0.3,0.1,0.4
+		c0.1,0.1,0.1,0.2,0.2,0.3c0.1,0.1,0.2,0.2,0.3,0.2C4.7,24,4.9,24,5,24c0.1,0,0.3,0,0.4-0.1s0.2-0.1,0.3-0.2
+		c0.1-0.1,0.2-0.2,0.2-0.3C6,23.3,6,23.1,6,23s0-0.3-0.1-0.4C5.9,22.5,5.8,22.4,5.7,22.3z"
+        />
+        <path
+          d="M28,7c0.3,0,0.5-0.1,0.7-0.3C28.9,6.5,29,6.3,29,6s-0.1-0.5-0.3-0.7c-0.1-0.1-0.2-0.2-0.3-0.2c-0.2-0.1-0.5-0.1-0.8,0
+		c-0.1,0-0.2,0.1-0.3,0.2C27.1,5.5,27,5.7,27,6c0,0.3,0.1,0.5,0.3,0.7C27.5,6.9,27.7,7,28,7z"
+        />
+      </g>
+    </svg>
+  );
+};
+
+export default PopularIcon;

src/components/Icons/RaiseIcon.tsx

@@ -0,0 +1,33 @@
+interface RaiseIconType {
+  className?: string;
+  onClick?: () => void;
+}
+
+const RaiseIcon = ({ className, onClick }: RaiseIconType) => {
+  return (
+    <svg
+      width="18"
+      height="18"
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      onClick={onClick}
+    >
+      <path
+        d="M2.25 12.75L6.75 8.25L9.75 11.25L15.75 5.25"
+        stroke="#FFC600"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12.75 5.25H15.75V8.25"
+        stroke="#FFC600"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default RaiseIcon;

src/components/Icons/RefershIcon.tsx

@@ -0,0 +1,29 @@
+interface RefershIconType {
+  className?: string;
+  onClick?: () => void;
+  dimension?: number;
+}
+
+const RefershIcon = ({ className, onClick, dimension }: RefershIconType) => {
+  return (
+    <svg
+      width={dimension || "18"}
+      height={dimension || "18"}
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      onClick={onClick}
+    >
+      <path
+        d="M1.5 7.5C1.5 7.5 1.59099 6.86307 4.22703 4.22703C6.86307 1.59099 11.1369 1.59099 13.773 4.22703C14.7069 5.16099 15.31 6.30054 15.5821 7.5M1.5 7.5V3M1.5 7.5H6M16.5 10.5C16.5 10.5 16.409 11.1369 13.773 13.773C11.1369 16.409 6.86307 16.409 4.22703 13.773C3.29307 12.839 2.69002 11.6995 2.41787 10.5M16.5 10.5V15M16.5 10.5H12"
+        stroke="#5F6C7B"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default RefershIcon;

src/components/Icons/order/InvoiceIcon.tsx

@@ -16,7 +16,7 @@ const InvoiceIcon = ({ className, onClick }: InvoiceIconType) => {
     >
       <path
         d="M7.83317 7.41504H3.83317M5.1665 10.0817H3.83317M9.1665 4.74837H3.83317M11.8332 4.61504V11.5484C11.8332 12.6685 11.8332 13.2285 11.6152 13.6564C11.4234 14.0327 11.1175 14.3386 10.7412 14.5304C10.3133 14.7484 9.75328 14.7484 8.63317 14.7484H4.3665C3.2464 14.7484 2.68635 14.7484 2.25852 14.5304C1.8822 14.3386 1.57624 14.0327 1.38449 13.6564C1.1665 13.2285 1.1665 12.6685 1.1665 11.5484V4.61504C1.1665 3.49493 1.1665 2.93488 1.38449 2.50706C1.57624 2.13073 1.8822 1.82477 2.25852 1.63303C2.68635 1.41504 3.2464 1.41504 4.3665 1.41504H8.63317C9.75328 1.41504 10.3133 1.41504 10.7412 1.63303C11.1175 1.82477 11.4234 2.13073 11.6152 2.50706C11.8332 2.93488 11.8332 3.49493 11.8332 4.61504Z"
-        stroke="#666666"
+        stroke="#333333"
         strokeLinecap="round"
         strokeLinejoin="round"
       />

src/components/Icons/order/RateIcon.tsx

@@ -17,7 +17,7 @@ const RateIcon = ({ className, onClick }: RateIconType) => {
       <path
         d="M26.4351 131.263C18.2009 129.563 9.45442 127.066 4.20797 120.496C-0.552335 114.535 -1.36302 105.7 2.23265 98.9722C7.4747 89.1632 20.3229 84.8319 24.4402 74.5003C27.401 67.0706 24.9679 58.7427 24.4263 50.7633C23.852 42.2992 25.5683 33.5602 30.0859 26.379C34.6035 19.1981 42.0585 13.7282 50.4398 12.4131C62.6515 10.4973 74.6822 17.2329 87.0409 17.0031C101.49 16.7343 113.941 7.17211 127.741 2.8807C135.732 0.395575 144.272 -0.303884 152.561 0.847569C160.267 1.91822 168.283 4.99429 172.479 11.5457C176.514 17.8476 176.178 25.8983 178.116 33.1264C180.159 40.7481 184.913 47.6136 191.329 52.2072C195.925 55.498 201.301 57.6369 205.675 61.218C209.591 64.4246 212.539 68.6589 215.048 73.0551C218.27 78.7035 220.892 84.8722 221.249 91.3654C221.937 103.879 213.897 115.647 203.429 122.538C192.961 129.429 180.37 132.237 167.99 134.188C158.175 135.734 148.289 136.826 138.373 137.458C128.55 138.083 118.471 138.613 108.638 137.94C105.646 137.735 102.889 136.912 99.9902 136.244C96.2772 135.389 92.5503 135.76 88.7856 135.959C78.9527 136.48 69.0879 136.405 59.2637 135.738C49.4395 135.072 39.6552 133.813 29.9831 131.967C28.7985 131.741 27.616 131.506 26.4351 131.263Z"
         fill="#FFB700"
-        fill-opacity="0.12"
+        fillOpacity="0.12"
       />
       <path
         d="M149.572 150H69.6144C67.3832 150 65.5576 148.174 65.5576 145.943V145.546C65.5576 143.315 67.3832 141.489 69.6144 141.489H149.572C151.803 141.489 153.629 143.315 153.629 145.546V145.943C153.629 148.174 151.803 150 149.572 150Z"
@@ -42,22 +42,22 @@ const RateIcon = ({ className, onClick }: RateIconType) => {
       <path
         d="M142.231 13.9854C142.231 10.7734 139.603 8.14526 136.391 8.14526H134.134C114.797 23.8846 96.1683 40.5151 79.0111 58.5438C78.5128 59.0675 78.0168 59.5935 77.5195 60.1188V89.5343C80.7173 86.54 83.9063 83.5363 87.0804 80.5174C88.8163 78.8666 90.5472 77.2104 92.2788 75.5549C108.944 60.8335 125.605 46.108 142.231 31.3423L142.231 13.9854Z"
         fill="#FFB700"
-        fill-opacity="0.12"
+        fillOpacity="0.12"
       />
       <path
         d="M95.8987 119.961C93.5809 122.338 91.2756 124.728 88.9967 127.149C85.3554 131.016 81.8398 134.99 78.3311 138.969C79.3493 140.693 81.2222 141.859 83.3584 141.859H99.6052C101.571 139.656 103.547 137.461 105.543 135.286C111.156 129.168 116.897 123.176 122.743 117.288C129.246 111.064 135.741 104.833 142.23 98.5942V76.4097C137.105 80.4905 132.061 84.6713 127.162 89.03C116.203 98.7802 105.84 109.178 95.8987 119.961Z"
         fill="#FFB700"
-        fill-opacity="0.12"
+        fillOpacity="0.12"
       />
       <path
         d="M142.231 116.867C136.361 122.2 130.579 127.631 124.896 133.164C121.948 136.035 119.027 138.934 116.13 141.858H130.067C132.121 139.96 134.17 138.057 136.206 136.14C138.217 134.247 140.225 132.35 142.231 130.453V116.867Z"
         fill="#FFB700"
-        fill-opacity="0.12"
+        fillOpacity="0.12"
       />
       <path
         d="M114.568 8.14502H100.676C92.7524 14.6636 85.003 21.3827 77.5195 28.407V37.3576C83.8437 32.2819 90.1625 27.196 96.5533 22.2048C102.559 17.5142 108.55 12.811 114.568 8.14502Z"
         fill="#FFB700"
-        fill-opacity="0.12"
+        fillOpacity="0.12"
       />
       <path
         d="M111.138 11.8819C111.138 12.6409 110.523 13.2561 109.764 13.2561C109.005 13.2561 108.39 12.6409 108.39 11.8819C108.39 11.1229 109.005 10.5073 109.764 10.5073C110.523 10.5073 111.138 11.1226 111.138 11.8819Z"

src/components/Icons/order/TimeIcon.tsx

@@ -1,9 +1,10 @@
 interface TimeIconType {
   className?: string;
   onClick?: () => void;
+  color?: string;
 }
 
-const TimeIcon = ({ className, onClick }: TimeIconType) => {
+const TimeIcon = ({ className, onClick, color }: TimeIconType) => {
   return (
     <svg
       width="17"
@@ -17,7 +18,7 @@ const TimeIcon = ({ className, onClick }: TimeIconType) => {
       <g clipPath="url(#clip0_2448_7814)">
         <path
           d="M8.50016 4.08171V8.08171L11.1668 9.41504M15.1668 8.08171C15.1668 11.7636 12.1821 14.7484 8.50016 14.7484C4.81826 14.7484 1.8335 11.7636 1.8335 8.08171C1.8335 4.39981 4.81826 1.41504 8.50016 1.41504C12.1821 1.41504 15.1668 4.39981 15.1668 8.08171Z"
-          stroke="#666666"
+          stroke={color || "#333333"}
           strokeLinecap="round"
           strokeLinejoin="round"
         />

src/components/InputCard.tsx

@@ -8,6 +8,8 @@ interface InputCardProps {
   name: string;
   placeholder: string;
   value: string;
+  required?: boolean;
+  reuireqMessage?: string;
 }
 
 export default function InputCard({
@@ -15,6 +17,8 @@ export default function InputCard({
   name,
   placeholder,
   value,
+  required = false,
+  reuireqMessage = "",
 }: InputCardProps) {
   const dispatch = useAppDispatch();
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -22,11 +26,10 @@ export default function InputCard({
   };
   return (
     <>
-      <ProInputCard title={title} dividerStyle={{ margin: "5px 0 0 0" }}>
+      <ProInputCard title={title}>
         <Form.Item
-          label={title}
           name={name}
-          style={{ position: "relative", top: -5 }}
+          rules={[{ required, message: reuireqMessage }]}
         >
           <Input
             placeholder={placeholder}

src/components/LanguageSwitch/LanguageSwitch.module.css

@@ -3,16 +3,25 @@
   flex-direction: row;
   justify-content: end;
   padding: 0 16px;
-  gap: 10px;
+  gap: 8px;
   position: absolute;
   top: 50px;
   z-index: 1000;
+  right: 0;
 }
 
 :global(.ant-app-rtl) .languageSwitch {
   left: 0;
+  right: auto;
 }
 
-:global(.ant-app-ltr) .languageSwitch {
-  right: 0;
+.refreshIcon {
+  cursor: pointer;
+  position: relative;
+  top: 2px;
+  margin-right: 3px;
+}
+
+:global(.ant-app-rtl) .refreshIcon {
+  margin-left: 3px;
 }

src/components/LanguageSwitch/LanguageSwitch.tsx

@@ -1,4 +1,4 @@
-import { GlobalOutlined, ShakeOutlined } from "@ant-design/icons";
+import { GlobalOutlined } from "@ant-design/icons";
 import { setLocale, setLocalesThunk } from "features/locale/localeSlice";
 import i18n from "i18n/i18n";
 import { useTransition } from "react";
@@ -6,6 +6,7 @@ import { useDispatch } from "react-redux";
 import { useAppSelector } from "redux/hooks";
 import ProText from "../ProText";
 import styles from "./LanguageSwitch.module.css";
+import RefershIcon from "components/Icons/RefershIcon";
 
 export function LanguageSwitch() {
   const dispatch = useDispatch();
@@ -23,11 +24,15 @@ export function LanguageSwitch() {
     });
   };
 
+  const refreshPage = () => {
+    window.location.reload();
+  };
+
   return (
     <div className={styles.languageSwitch}>
       <GlobalOutlined
         style={{
-          color: themeName === "dark" ? "#fff" : "#434E5C",
+          color: themeName === "dark" ? "#fff" : "#333333",
           fontSize: 15,
           marginRight: 3,
           cursor: isPending ? "wait" : "pointer",
@@ -37,23 +42,19 @@ export function LanguageSwitch() {
       />
       <ProText
         style={{
-          color: themeName === "dark" ? "#fff" : "#434E5C",
+          color: themeName === "dark" ? "#fff" : "#333333",
           fontSize: 14,
           marginRight: 3,
           opacity: isPending ? 0.7 : 1,
           [isRTL ? "marginLeft" : "marginRight"]: 3,
         }}
+        onClick={changeLanguage}
       >
         {isPending ? "..." : isRTL ? "English" : "Arabic"}
       </ProText>
-      <ShakeOutlined
-        style={{
-          color: themeName === "dark" ? "#fff" : "#434E5C",
-          fontSize: 15,
-          marginRight: 3,
-          [isRTL ? "marginLeft" : "marginRight"]: 3,
-        }}
-      />
+      <div onClick={refreshPage}>
+        <RefershIcon dimension={18} className={styles.refreshIcon} />
+      </div>
     </div>
   );
 }

src/components/LoyaltyCard/LoyaltyCard.tsx

@@ -1,8 +1,6 @@
 import { Card, Col, Image, Row } from "antd";
-import PresentIcon from "components/Icons/cart/PresentIcon";
 import { useTranslation } from "react-i18next";
 import { Link, useParams } from "react-router-dom";
-import { useGetRestaurantDetailsQuery } from "redux/api/others";
 import { ACCESS_TOKEN } from "utils/constants";
 import { colors } from "ThemeConstants.ts";
 import ProText from "../ProText";
@@ -12,13 +10,13 @@ import { useAppSelector } from "redux/hooks";
 const LoyaltyCard = () => {
   const { t } = useTranslation();
   const { subdomain } = useParams();
-  const { data: restaurant } = useGetRestaurantDetailsQuery(subdomain);
+  const { restaurant } = useAppSelector((state) => state.order);
   const { isRTL } = useAppSelector((state) => state.locale);
   const token = localStorage.getItem(ACCESS_TOKEN);
-  const isHasLoyaltyGift =
-    (restaurant?.loyalty_stamps || 0) -
-      (restaurant?.customer_loyalty_points || 0) <=
-    0;
+  const loyaltyStamps = restaurant?.loyalty_stamps ?? 0;
+  const customerLoyaltyPoints = restaurant?.customer_loyalty_points ?? 0;
+  const remainingToNextReward =
+    loyaltyStamps - (customerLoyaltyPoints % loyaltyStamps);
 
   return (
     <div className={styles.loyaltyContainer}>
@@ -62,8 +60,14 @@ const LoyaltyCard = () => {
               }}
             >
               {token &&
+                customerLoyaltyPoints < loyaltyStamps &&
                 t("menu.loyaltyDescription", {
-                  value: restaurant?.loyalty_stamps ?? 0,
+                  value: loyaltyStamps,
+                })}
+              {token &&
+                customerLoyaltyPoints >= loyaltyStamps &&
+                t("menu.youHaveXEarnedRewardsReadyToRedeem", {
+                  rewards: Math.floor(customerLoyaltyPoints / loyaltyStamps),
                 })}
               {!token && (
                 <div style={{ paddingTop: 4 }}>
@@ -95,21 +99,22 @@ const LoyaltyCard = () => {
               )}
             </ProText>
           </Col>
-          <Col> {isHasLoyaltyGift && <PresentIcon />}</Col>
+          {/* <Col> {isHasLoyaltyGift && <PresentIcon />}</Col> */}
         </Row>
         {token && (
+          <>
             <div
               style={{
                 display: "flex",
                 flexDirection: "row",
                 gap: 12,
-              overflow: "hidden",
+                overflow: "auto",
                 scrollbarWidth: "none",
+                paddingBottom: 12,
               }}
             >
-            {Array.from({ length: restaurant?.loyalty_stamps || 0 }).map(
-              (_, index) => {
-                const currentPoints = restaurant?.customer_loyalty_points || 0;
+              {Array.from({ length: loyaltyStamps }).map((_, index) => {
+                const currentPoints = customerLoyaltyPoints % loyaltyStamps;
                 const isCollected = index < currentPoints;
                 return (
                   <Col key={index}>
@@ -126,9 +131,30 @@ const LoyaltyCard = () => {
                     />
                   </Col>
                 );
-              },
-            )}
+              })}
             </div>
+            <ProText
+              strong
+              style={{
+                fontWeight: 400,
+                fontStyle: "Regular",
+                fontSize: "12px",
+                lineHeight: "140%",
+                letterSpacing: "0%",
+                color:
+                  customerLoyaltyPoints < loyaltyStamps ? "#777580" : "#32AD6D",
+              }}
+            >
+              {customerLoyaltyPoints < loyaltyStamps &&
+                t("menu.justXMorePurchasesToUnlockYourFREEItem", {
+                  cups: remainingToNextReward,
+                })}
+              {customerLoyaltyPoints >= loyaltyStamps &&
+                t("menu.youreJustXCupsAwayFromYourNextReward", {
+                  cups: remainingToNextReward,
+                })}
+            </ProText>
+          </>
         )}
       </Card>
     </div>

src/components/OrderSummary/OrderSummary.module.css

@@ -11,6 +11,7 @@
   justify-content: space-between;
   align-items: center;
   font-size: 16px;
+  min-height: 24px;
 }
 
 .summaryDivider {

src/components/OrderSummary/OrderSummary.tsx

@@ -1,4 +1,4 @@
-import { Card, Checkbox, Divider, Space } from "antd";
+import { Card, Divider, Space, Tag } from "antd";
 import ArabicPrice from "components/ArabicPrice";
 import {
   selectCart,
@@ -6,19 +6,17 @@ import {
   selectDiscountTotal,
   selectGrandTotal,
   selectHighestPricedLoyaltyItem,
-  selectLoyaltyValidation,
-  selectTaxAmount,
-  updateUseLoyaltyPoints,
+  totalTaxes,
 } from "features/order/orderSlice";
 import { OrderType } from "pages/checkout/hooks/types";
 import { useTranslation } from "react-i18next";
 import { useParams } from "react-router-dom";
 import { useGetRestaurantDetailsQuery } from "redux/api/others";
-import { useAppDispatch, useAppSelector } from "redux/hooks";
+import { useAppSelector } from "redux/hooks";
 import ProText from "../ProText";
 import ProTitle from "../ProTitle";
 import styles from "./OrderSummary.module.css";
-import { CSSProperties } from "react";
+import { CSSProperties, useMemo } from "react";
 
 export default function OrderSummary() {
   const { t } = useTranslation();
@@ -26,11 +24,9 @@ export default function OrderSummary() {
   const { subdomain } = useParams();
   const { data: restaurant } = useGetRestaurantDetailsQuery(subdomain);
   const { orderType } = useAppSelector(selectCart);
-  const dispatch = useAppDispatch();
   const subtotal = useAppSelector(selectCartTotal);
-  const loyaltyValidation = useAppSelector(selectLoyaltyValidation);
   const highestLoyaltyItem = useAppSelector(selectHighestPricedLoyaltyItem);
-  const taxAmount = useAppSelector(selectTaxAmount);
+  const totalTaxesAmount = useAppSelector(totalTaxes);
   const grandTotal = useAppSelector(selectGrandTotal);
   const discountAmount = useAppSelector(selectDiscountTotal);
 
@@ -48,6 +44,28 @@ export default function OrderSummary() {
     textAlign: "center",
   };
 
+  const vat = ((restaurant?.vat ?? 0) / 100) * (subtotal - discountAmount) || 0;
+
+  // Calculate individual taxes
+  const taxesList = useMemo(() => {
+    if (!restaurant?.taxes) return [];
+
+    const subtotalAfterDiscount = subtotal - discountAmount;
+
+    return restaurant.taxes
+      .filter((tax) => tax.is_active === 1)
+      .map((tax) => {
+        const amount = ((Number(tax.percentage) || 0) / 100) * subtotalAfterDiscount;
+        return {
+          id: tax.id,
+          name: tax.name,
+          name_local: tax.name_local,
+          percentage: tax.percentage,
+          amount,
+        };
+      });
+  }, [restaurant?.taxes, subtotal, discountAmount]);
+
   return (
     <>
       <Card className={`${styles.orderSummary}`}>
@@ -69,7 +87,7 @@ export default function OrderSummary() {
             <ProText type="secondary" style={titlesStyle}>
               {t("cart.basketTotal")}
             </ProText>
-            <ArabicPrice price={subtotal} style={titlesStyle} />
+            <ArabicPrice price={subtotal} textStyle={titlesStyle} />
           </div>
           {orderType === OrderType.Delivery && (
             <div className={styles.summaryRow}>
@@ -78,36 +96,120 @@ export default function OrderSummary() {
               </ProText>
               <ArabicPrice
                 price={Number(restaurant?.delivery_fees || 0)}
-                style={{ ...titlesStyle, color: "#434E5C" }}
+                textStyle={{ ...titlesStyle, color: "#434E5C" }}
               />
             </div>
           )}
+          {orderType !== OrderType.Redeem && (
             <div className={styles.summaryRow}>
               <ProText type="secondary" style={titlesStyle}>
                 {t("cart.discount")}
               </ProText>
+              <div
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  minHeight: "24px",
+                }}
+              >
+                {isHasLoyaltyGift &&
+                  useLoyaltyPoints &&
+                  highestLoyaltyItem &&
+                  restaurant?.is_loyalty_enabled === 1 ? (
+                  <Tag
+                    color="green"
+                    style={{
+                      backgroundColor: "#EDFEF5",
+                      borderRadius: "4px",
+                      padding: "3px 10px",
+                      fontWeight: 500,
+                      fontStyle: "Medium",
+                      fontSize: 12,
+                      lineHeight: "140%",
+                      letterSpacing: "0%",
+                      placeItems: "center",
+                      margin: "0 10px",
+                      position: "relative",
+                      top: -1,
+                    }}
+                  >
+                    {t("cart.loyalty")}
+                  </Tag>
+                ) : null}
                 <ArabicPrice
-              price={discountAmount}
-              style={{ ...titlesStyle, color: "#434E5C" }}
+                  price={discountAmount + (useLoyaltyPoints && restaurant?.is_loyalty_enabled === 1 ? ((highestLoyaltyItem?.price || 0) * (totalTaxesAmount / 100)) : 0)}
+                  textStyle={{ ...titlesStyle, color: "#434E5C" }}
                 />
               </div>
+            </div>
+          )}
+          {/* {orderType !== OrderType.Redeem && (
             <div className={styles.summaryRow}>
               <ProText type="secondary" style={titlesStyle}>
-              {t("cart.tax")}
+                {t("cart.tip")}
               </ProText>
               <ArabicPrice
-              price={taxAmount || 0}
-              style={{ ...titlesStyle, color: "#434E5C" }}
+                price={tip || 0}
+                textStyle={{ ...titlesStyle, color: "#434E5C" }}
               />
             </div>
-          {splitBillAmount > 0 && (
+          )} */}
+          {orderType === OrderType.Redeem && (
+            <div className={styles.summaryRow}>
+              <ProText type="secondary" style={titlesStyle}>
+                {t("cart.giftedItems")}
+              </ProText>
+              <ArabicPrice
+                price={0}
+                textStyle={{ ...titlesStyle, color: "#434E5C" }}
+              />
+            </div>
+          )}
+          {orderType === OrderType.Redeem && (
+            <div className={styles.summaryRow}>
+              <ProText type="secondary" style={titlesStyle}>
+                {t("cart.voucherApplied")}
+              </ProText>
+              <ArabicPrice
+                price={0}
+                textStyle={{ ...titlesStyle, color: "#32AD6D" }}
+              />
+            </div>
+          )}
+          {orderType !== OrderType.Redeem && restaurant?.vat && (
+            <div className={styles.summaryRow}>
+              <ProText type="secondary" style={titlesStyle}>
+                {t("cart.vat", { value: restaurant.vat })}
+              </ProText>
+              <ArabicPrice
+                price={vat}
+                textStyle={{ ...titlesStyle, color: "#434E5C" }}
+              />
+            </div>
+          )}
+          {orderType !== OrderType.Redeem &&
+            taxesList.map((tax) => (
+              <div key={tax.id} className={styles.summaryRow}>
+                <ProText type="secondary" style={titlesStyle}>
+                  {t("cart.otherTaxes", {
+                    name: tax.name || tax.name_local,
+                    value: tax.percentage,
+                  })}
+                </ProText>
+                <ArabicPrice
+                  price={tax.amount}
+                  textStyle={{ ...titlesStyle, color: "#434E5C" }}
+                />
+              </div>
+            ))}
+          {orderType !== OrderType.Redeem && splitBillAmount > 0 && (
             <div className={styles.summaryRow}>
               <ProText type="secondary" style={titlesStyle}>
                 {t("splitBill.splitBillAmount")}
               </ProText>
               <ArabicPrice
                 price={splitBillAmount}
-                style={{ ...titlesStyle, color: "#434E5C" }}
+                textStyle={{ ...titlesStyle, color: "#434E5C" }}
               />
             </div>
           )}
@@ -124,11 +226,13 @@ export default function OrderSummary() {
                 color: "#333333",
               }}
             >
-              {t("cart.totalAmount")}
+              {orderType === OrderType.Redeem
+                ? t("cart.remainingToPay")
+                : t("cart.totalAmount")}
             </ProText>
             <ArabicPrice
               price={grandTotal}
-              style={{
+              textStyle={{
                 fontWeight: 600,
                 fontStyle: "SemiBold",
                 fontSize: 18,
@@ -139,38 +243,6 @@ export default function OrderSummary() {
             />
           </div>
         </Space>
-
-        {isHasLoyaltyGift && restaurant?.is_loyalty_enabled === 1 && (
-          <>
-            <Checkbox
-              checked={useLoyaltyPoints}
-              onChange={(value) => {
-                dispatch(updateUseLoyaltyPoints(value.target.checked));
-              }}
-              style={{ marginTop: 8 }}
-            >
-              {t("cart.useLoyaltyPoints")}
-            </Checkbox>
-          </>
-        )}
-
-        {isHasLoyaltyGift && loyaltyValidation.errorMessage && (
-          <div style={{ marginTop: 8, color: "red", fontSize: "12px" }}>
-            {t(loyaltyValidation.errorMessage)}
-          </div>
-        )}
-
-        {isHasLoyaltyGift &&
-          useLoyaltyPoints &&
-          highestLoyaltyItem &&
-          restaurant?.is_loyalty_enabled === 1 && (
-            <div style={{ marginTop: 8, color: "green", fontSize: "12px" }}>
-              {t("cart.loyaltyDiscountApplied", {
-                itemName: highestLoyaltyItem.name,
-                amount: Math.round(highestLoyaltyItem.price || 0).toFixed(2),
-              })}
-            </div>
-          )}
       </Card>
     </>
   );

src/components/PaymentDetails/PaymentDetails.tsx

@@ -16,8 +16,31 @@ export default function PaymentDetails({ order }: { order?: Order }) {
         <Divider style={{ margin: "15px 0 15px 0" }} />
         <Space orientation="vertical" style={{ width: "100%" }}>
           <div className={`${styles.summaryRow} ${styles.totalRow}`}>
-            <ProText strong>{t("cart.totalAmount")}</ProText>
-            <ArabicPrice price={order?.total_price || 0} strong />
+            <ProText
+              style={{
+                fontWeight: 600,
+                fontStyle: "SemiBold",
+                fontSize: 16,
+                lineHeight: "140%",
+                letterSpacing: "0%",
+                textAlign: "center",
+                color: "#333333",
+              }}
+            >
+              {t("cart.totalAmount")}
+            </ProText>
+            <ArabicPrice
+              price={order?.total_price || 0}
+              textStyle={{
+                fontWeight: 400,
+                fontStyle: "Regular",
+                fontSize: 16,
+                lineHeight: "140%",
+                letterSpacing: "0%",
+                textAlign: "center",
+                color: "#434E5C",
+              }}
+            />
           </div>
         </Space>
       </Card>

src/components/PaymentMethods/PaymentMethods.tsx

@@ -1,7 +1,7 @@
-import { Form, Radio, Space } from "antd";
+import { Form, Image, Radio, Space } from "antd";
 import { Group } from "antd/es/radio";
 import ArabicPrice from "components/ArabicPrice";
-import DifferentCardIcon from "components/Icons/paymentMethods/DifferentCardIcon";
+// import DifferentCardIcon from "components/Icons/paymentMethods/DifferentCardIcon";
 import ProText from "components/ProText";
 import {
   selectCart,
@@ -14,14 +14,15 @@ import { colors, ProGray1 } from "../../ThemeConstants";
 import ProInputCard from "../ProInputCard/ProInputCard";
 import styles from "./PaymentMethods.module.css";
 import { OrderType } from "pages/checkout/hooks/types.ts";
-import RCardIcon from "components/Icons/RCardIcon";
+import { formatPriceUi } from "utils/helpers";
 
 const PaymentMethods = () => {
   const { t } = useTranslation();
   const { paymentMethod, orderType } = useAppSelector(selectCart);
   const dispatch = useAppDispatch();
   const grandTotal = useAppSelector(selectGrandTotal);
-  const { isRTL } = useAppSelector((state) => state.locale);
+  const { restaurant } = useAppSelector((state) => state.order);
+  // const { isRTL } = useAppSelector((state) => state.locale);
 
   const options: {
     label: React.ReactNode;
@@ -39,16 +40,18 @@ const PaymentMethods = () => {
                 <ProText
                   style={{
                     color: "#E8B400",
-                    [isRTL ? "marginLeft" : "marginRight"]: 4,
+                    // [isRTL ? "marginLeft" : "marginRight"]: 4,
                   }}
                 >
-                  $
+                  {/* $ */}
+                </ProText>
+                <ProText style={{ color: "#5F6C7B" }}>
+                  {t("checkout.cash")}
                 </ProText>
-                <ProText style={{color: '#5F6C7B'}}>{t("checkout.cash")}</ProText>
               </>
             ),
             value: "cash",
-            price: grandTotal.toFixed(2),
+            price: formatPriceUi(grandTotal, restaurant.currency_decimals ?? 3),
             style: {
               color: colors.primary,
             },
@@ -64,14 +67,26 @@ const PaymentMethods = () => {
     {
       label: (
         <>
-          <RCardIcon className={styles.eCardIcon} />
-          <ProText style={{color: '#5F6C7B'}}>{t("checkout.differentCard")}</ProText>
+          {/* <RCardIcon className={styles.eCardIcon} /> */}
+          <ProText style={{ color: "#5F6C7B" }}>
+            {t("checkout.thawani")}
+          </ProText>
         </>
       ),
-      value: "differentCard",
+      value: "thawani",
       icon: (
         <div className={styles.differentCardIcon}>
-          <DifferentCardIcon />
+          <Image
+            preview={false}
+            src={"thawani.png"}
+            alt="thawani"
+            width={24}
+            height={24}
+            style={{
+              position: "relative",
+              bottom: 3,
+            }}
+          />
         </div>
       ),
       hideCurrency: true,

src/components/ProCheckboxGroups/ProCheckboxGroups.tsx

@@ -5,9 +5,14 @@ interface ProCheckboxGroupsProps {
   options: any[];
   value?: string[];
   onChange?: (values: string[]) => void;
+  showPrice?: boolean;
 }
 
-const ProCheckboxGroups = ({ options, ...props }: ProCheckboxGroupsProps) => {
+const ProCheckboxGroups = ({
+  options,
+  showPrice,
+  ...props
+}: ProCheckboxGroupsProps) => {
   return (
     <Checkbox.Group
       {...props}
@@ -15,7 +20,7 @@ const ProCheckboxGroups = ({ options, ...props }: ProCheckboxGroupsProps) => {
         width: "100%",
       }}
     >
-      <Space direction="vertical" style={{ width: "100%" }}>
+      <Space orientation="vertical" style={{ width: "100%" }}>
         {options.map((option: any) => (
           <Checkbox
             key={option.value}
@@ -38,7 +43,9 @@ const ProCheckboxGroups = ({ options, ...props }: ProCheckboxGroupsProps) => {
               >
                 {option.label}
               </ProText>
+              {showPrice && (
                 <ProText style={{ fontSize: "1rem" }}>{option.price}</ProText>
+              )}
             </div>
           </Checkbox>
         ))}

src/components/ProRatioGroups/ProRatioGroups.tsx

@@ -1,4 +1,4 @@
-import { Radio, RadioChangeEvent, Space } from "antd";
+import { Divider, Radio, RadioChangeEvent, Space } from "antd";
 import ProText from "components/ProText";
 import styles from "./ProRatioGroups.module.css";
 
@@ -7,6 +7,9 @@ interface ProRatioGroupsProps {
   onRatioClick?: (value: string) => void;
   onChange?: (e: RadioChangeEvent) => void;
   value?: string;
+  optionsStyle?: React.CSSProperties;
+  valueStyle?: React.CSSProperties;
+  showDivider?: boolean;
 }
 
 const ProRatioGroups = ({
@@ -14,9 +17,13 @@ const ProRatioGroups = ({
   onRatioClick,
   onChange,
   value,
+  optionsStyle,
+  valueStyle,
+  showDivider = false,
   ...props
 }: ProRatioGroupsProps) => {
   const handleChange = (e: RadioChangeEvent) => {
+    console.log(e.target.value);
     // If onChange is provided (from Form.Item), use it
     if (onChange) {
       onChange(e);
@@ -39,6 +46,7 @@ const ProRatioGroups = ({
       >
         <Space orientation="vertical" style={{ width: "100%" }}>
           {options.map((option) => (
+            <>
               <Radio
                 key={option.value}
                 value={option.value}
@@ -51,18 +59,26 @@ const ProRatioGroups = ({
                     justifyContent: "space-between",
                     width: "100%",
                     padding: "8px 0",
+                    placeItems: "center",
                   }}
                 >
                   <ProText
                     style={{
                       fontSize: "1rem",
+                      ...optionsStyle,
                     }}
                   >
                     {option.label}
                   </ProText>
-                <ProText style={{ fontSize: "1rem" }}>{option?.price}</ProText>
+                  <ProText style={{ fontSize: "1rem", ...valueStyle }}>
+                    {option?.price}
+                  </ProText>
                 </div>
               </Radio>
+              {showDivider && options.length !== options.length - 1 && (
+                <Divider style={{ margin: "0 0 16px 0 " }} />
+              )}
+            </>
           ))}
         </Space>
       </Radio.Group>

src/components/privateRoute/PrivateRoute.tsx

@@ -1,47 +0,0 @@
-import { Loader } from "components/Loader/Loader";
-import { Navigate, useParams } from "react-router-dom";
-import { useAppSelector } from "redux/hooks";
-
-export const PrivateRoute = ({
-  children,
-}: // permission,
-{
-  children: JSX.Element;
-  permission?: string;
-}) => {
-  const { token, loading } = useAppSelector((state) => state.auth);
-  const { subdomain } = useParams();
-
-  // const { data: user, isLoading: loadingUser } = useGetSignedUserInfoQuery();
-
-  // useEffect(() => {
-  //   if (user) dispatch(setUser(user));
-  // }, [dispatch, user]);
-
-  if (loading) {
-    return <Loader />;
-  }
-
-  // let newPermissions: any[] = [];
-  // // aggregate the rules from multi
-  // user?.roles?.forEach(
-  //   (r) => (newPermissions = [...newPermissions, ...r.permissions])
-  // );
-
-  // const userHasRequiredPermission = permission
-  //   ? !!newPermissions.find((p) => p.name === permission)
-  //   : true;
-
-  console.log(token);
-  
-
-  if (!token) {
-    return <Navigate to={`/${subdomain}/login`} />;
-  }
-
-  // if (token && !userHasRequiredPermission) {
-  //   return <AccessDenied />; // build your won access denied page (sth like 404)
-  // }
-
-  return children;
-};

src/components/productChoicesCard/ProductChoicesCard.tsx

@@ -0,0 +1,177 @@
+import { Space, Divider } from "antd";
+import ProText from "components/ProText.tsx";
+import styles from "pages/cart/cart.module.css";
+import ArabicPrice from "components/ArabicPrice";
+import ImageWithFallback from "components/ImageWithFallback";
+import CartActionsButtons from "components/CartActionsButtons/CartActionsButtons.tsx";
+import { CartItem } from "utils/types/appTypes.ts";
+import { useAppSelector } from "redux/hooks.ts";
+import useBreakPoint from "hooks/useBreakPoint.ts";
+import { OrderItem } from "pages/checkout/hooks/types.ts";
+
+type ProductChoicesCardProps = {
+  product: CartItem | OrderItem;
+  addDividerAfter: boolean;
+};
+export default function ProductChoicesCard({
+  product,
+  addDividerAfter,
+}: ProductChoicesCardProps) {
+  const { isRTL } = useAppSelector((state) => state.locale);
+  const { isMobile, isTablet } = useBreakPoint();
+
+  const getMenuItemImageStyle = () => {
+    if (isMobile) {
+      return {
+        width: 115,
+        height: 96,
+      };
+    }
+    return {
+      width: 120,
+      height: 120,
+    };
+  };
+
+  return (
+    <div style={{ position: "relative" }}>
+      <Space
+        size="middle"
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          height: "100%",
+        }}
+      >
+        <Space orientation="vertical" size="small">
+          <div style={{}}>
+            <ProText
+              style={{
+                margin: 0,
+                lineClamp: 1,
+                fontSize: isMobile ? 14 : isTablet ? 16 : 18,
+                fontWeight: 600,
+              }}
+            >
+              {product.name}
+            </ProText>
+            <ProText
+              type="secondary"
+              className={`${styles.itemDescription} responsive-text`}
+              style={{
+                margin: 0,
+                lineClamp: 1,
+                padding: isMobile ? "3px 0" : isTablet ? 8 : 10,
+                fontSize: isMobile ? 14 : isTablet ? 18 : 20,
+                display: "-webkit-box",
+                WebkitBoxOrient: "vertical",
+                WebkitLineClamp: 1,
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                wordWrap: "break-word",
+                overflowWrap: "break-word",
+                lineHeight: "1.4",
+                maxHeight: isMobile ? "3em" : isTablet ? "5em" : "7em",
+                fontWeight: 500,
+                letterSpacing: "0.01em",
+                width: "100%",
+              }}
+            >
+              {product.type === "CartItem" &&
+                (isRTL
+                  ? product.variant?.optionsAR.map((o) => o.value).join(", ")
+                  : product.variant?.options.map((o) => o.value).join(", "))}
+              {product.type === "OrderItem" && product.variantName}
+            </ProText>
+
+            {product.extras && (
+              <ProText
+                type="secondary"
+                className={`${styles.itemDescription} responsive-text`}
+                style={{
+                  margin: 0,
+                  lineClamp: 1,
+                  fontSize: isMobile ? 14 : isTablet ? 18 : 20,
+                  display: "-webkit-box",
+                  WebkitBoxOrient: "vertical",
+                  WebkitLineClamp: 1,
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  wordWrap: "break-word",
+                  overflowWrap: "break-word",
+                  lineHeight: "1.4",
+                  maxHeight: isMobile ? "3em" : isTablet ? "5em" : "7em",
+                  fontWeight: 500,
+                  letterSpacing: "0.01em",
+                  width: "100%",
+                }}
+              >
+                {product.extras.map((o) => (
+                  <span key={o.id}>{o.name}</span>
+                ))}
+              </ProText>
+            )}
+
+            {product.type === "CartItem"
+              ? product.extrasgroupnew?.map((o) => (
+                  <ProText
+                    type="secondary"
+                    className={`${styles.itemDescription} responsive-text`}
+                    style={{
+                      margin: 0,
+                      lineClamp: 1,
+                      padding: isMobile ? "3px 0" : isTablet ? 8 : 10,
+                      fontSize: isMobile ? 14 : isTablet ? 18 : 20,
+                      display: "-webkit-box",
+                      WebkitBoxOrient: "vertical",
+                      WebkitLineClamp: 1,
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      wordWrap: "break-word",
+                      overflowWrap: "break-word",
+                      lineHeight: "1.4",
+                      maxHeight: isMobile ? "3em" : isTablet ? "5em" : "7em",
+                      fontWeight: 500,
+                      letterSpacing: "0.01em",
+                      width: "100%",
+                    }}
+                  >
+                    {isRTL ? o.extrasStringAR : o.extrasString}
+                  </ProText>
+                ))
+              : // ToDo
+                product.itemline}
+          </div>
+          <div style={{}}>
+            <ArabicPrice price={product.price} style={{ fontStyle: "bold" }} />
+          </div>
+        </Space>
+        <div style={{ position: "relative" }}>
+          <ImageWithFallback
+            src={product.image}
+            alt={product.name}
+            className={`${styles.menuItemImage} responsive-image`}
+            {...getMenuItemImageStyle()}
+            fallbackSrc={
+              "https://fascano-space.s3.me-central-1.amazonaws.com/uploads/restorants/685a8fc884a8c_large.jpg"
+            }
+          />
+          {product.type === "CartItem" && (
+            <div
+              style={{
+                position: "absolute",
+                right: 3,
+                bottom: 3,
+              }}
+            >
+              <CartActionsButtons item={product} />
+            </div>
+          )}
+        </div>
+      </Space>
+
+      {addDividerAfter && <Divider style={{ margin: "10px 0" }} />}
+    </div>
+  );
+}

src/components/publicRoute/PublicRoute.tsx

@@ -0,0 +1,22 @@
+import { Loader } from "components/Loader/Loader";
+import { Navigate, useParams } from "react-router-dom";
+import { useAppSelector } from "redux/hooks";
+
+export const PublicRoute = ({
+  children,
+}: {
+  children: JSX.Element;
+}) => {
+  const { token, loading } = useAppSelector((state) => state.auth);
+  const { subdomain } = useParams();
+
+  if (loading) {
+    return <Loader />;
+  }
+
+  if (token) {
+    return <Navigate to={`/${subdomain}`} replace />;
+  }
+
+  return children;
+};

src/contexts/ScrollHandlerContext.tsx

@@ -42,12 +42,22 @@ export function ScrollHandlerProvider({ children }: { children: ReactNode }) {
   const scrollToCategory = useCallback((categoryId: number) => {
     const categoryRef = categoryRefs.current?.[categoryId];
     if (categoryRef) {
-      categoryRef.scrollIntoView({
+      // Get the sticky header height (70px when sticky, 0 when not)
+      const stickyHeaderHeight = isCategoriesSticky && categoriesContainerRef.current
+        ? categoriesContainerRef.current.offsetHeight
+        : 0;
+      
+      // Calculate the position of the category element
+      const elementPosition = categoryRef.getBoundingClientRect().top;
+      const offsetPosition = elementPosition + window.pageYOffset - stickyHeaderHeight;
+      
+      // Scroll to the exact position, accounting for sticky header
+      window.scrollTo({
+        top: offsetPosition,
         behavior: "smooth",
-        block: "start",
       });
     }
-  }, []);
+  }, [isCategoriesSticky, categoriesContainerRef]);
 
   return (
     <ScrollHandlerContext.Provider

src/features/order/orderSlice.ts

@@ -113,6 +113,7 @@ export const CART_STORAGE_KEYS = {
   HIDDEN_SERVICES: "fascano_hidden_services",
   VISIBLE_SERVICES: "fascano_visible_services",
   ESTIMATE_WAY: "fascano_estimate_way",
+  CUSTOMER_NAME: "fascano_customer_name",
 } as const;
 
 // Utility functions for localStorage
@@ -201,7 +202,7 @@ const initialState: CartState = {
   estimateWay: getFromLocalStorage(CART_STORAGE_KEYS.ESTIMATE_WAY, ""),
   order: getFromLocalStorage(CART_STORAGE_KEYS.ORDER, null),
   splitBillAmount: 0,
-  customerName: "",
+  customerName: getFromLocalStorage(CART_STORAGE_KEYS.CUSTOMER_NAME, ""),
   totalServices: 8,
   hiddenServices: 0,
   visibleServices: 0,
@@ -363,10 +364,27 @@ const orderSlice = createSlice({
       state.collectionMethod = "";
       state.paymentMethod = "";
       state.loyaltyValidationError = null;
+      state.discount = {
+        value: 0,
+        isGift: false,
+        isDiscount: false,
+      };
+      state.plateCar = "";
+      state.pickupDate = "";
+      state.pickupTime = "";
+      state.pickupType = "";
+      state.estimateWay = "";
+      state.order = null;
+      state.splitBillAmount = 0;
+      state.customerName = "";
       // Clear all cart data from localStorage
       if (typeof window !== "undefined") {
         Object.values(CART_STORAGE_KEYS)
-          .filter((key) => key !== CART_STORAGE_KEYS.ORDER_TYPE)
+          .filter(
+            (key) =>
+              key !== CART_STORAGE_KEYS.ORDER_TYPE &&
+              key !== CART_STORAGE_KEYS.PAYMENT_METHOD,
+          )
           .forEach((key) => {
             localStorage.removeItem(key);
           });
@@ -688,7 +706,8 @@ const orderSlice = createSlice({
       }
     },
     updateOrder(state, action: PayloadAction<any>) {
-      state.order = action.payload;
+      state.order = { ...(state.order || {}), ...action.payload };
+
       if (typeof window !== "undefined") {
         localStorage.setItem(
           CART_STORAGE_KEYS.ORDER,
@@ -701,6 +720,12 @@ const orderSlice = createSlice({
     },
     updateCustomerName(state, action: PayloadAction<string>) {
       state.customerName = action.payload;
+      if (typeof window !== "undefined") {
+        localStorage.setItem(
+          CART_STORAGE_KEYS.CUSTOMER_NAME,
+          JSON.stringify(state.customerName),
+        );
+      }
     },
   },
 });
@@ -746,23 +771,21 @@ export const {
 
 // Tax calculation helper functions
 const calculateTaxAmount = (
-  state: RootState,
   amount: number,
   tax: Tax,
 ): number => {
   const percentage = parseFloat(tax.percentage);
-  return (((state.order.restaurant?.vat || 0) + percentage) * amount) / 100;
+  return (percentage * amount) / 100;
 };
 
 const calculateTotalTax = (
-  state: RootState,
   subtotal: number,
   taxes: Tax[],
 ): number => {
   return taxes
     .filter((tax) => tax.is_active === 1)
     .reduce(
-      (total, tax) => total + calculateTaxAmount(state, subtotal, tax),
+      (total, tax) => total + calculateTaxAmount(subtotal, tax),
       0,
     );
 };
@@ -801,21 +824,31 @@ export const selectLoyaltyItems = createSelector([selectOrderItems], (items) =>
   items.filter((item) => item.isHasLoyalty),
 );
 
+// Tax selectors
+export const selectTaxes = (state: RootState) => state.order.restaurant.taxes;
+export const totalTaxes = (state: RootState) => {
+  const taxes = selectTaxes(state);
+  const totalTaxes = taxes?.reduce((total, tax) => total + parseFloat(tax.percentage), 0) || 0;
+  const vat = (state.order.restaurant?.vat || 0);
+  return totalTaxes + vat;
+};
+
 export const selectHighestPricedLoyaltyItem = (state: RootState) => {
   const loyaltyItems = selectLoyaltyItems(state);
   if (loyaltyItems.length === 0) return null;
-
-  return loyaltyItems.reduce((highest, current) =>
+  const highestItem = loyaltyItems.reduce((highest, current) =>
     current.price > highest.price ? current : highest,
-  );
+  )
+  return highestItem;
 };
 
-export const selectDiscountTotal = (state: RootState) =>
-  (state.order.discount.value / 100) * selectCartTotal(state) +
+export const selectDiscountTotal = (state: RootState) => {
+  return (state.order.discount.value / 100) * selectCartTotal(state) +
     (state.order.useLoyaltyPoints &&
       state.order.restaurant?.is_loyalty_enabled === 1
-    ? selectHighestPricedLoyaltyItem(state)?.price || 0
+      ? ((selectHighestPricedLoyaltyItem(state)?.price || 0))
       : 0);
+}
 
 export const selectLoyaltyValidation = createSelector(
   [(state: RootState) => state.order.useLoyaltyPoints, selectLoyaltyItems],
@@ -830,18 +863,18 @@ export const selectLoyaltyValidation = createSelector(
   }),
 );
 
-// Tax selectors
-export const selectTaxes = (state: RootState) => state.order.restaurant.taxes;
+
 
 export const selectTaxAmount = (state: RootState) => {
   const subtotal = selectCartTotal(state) - selectDiscountTotal(state);
   const taxes = selectTaxes(state);
-  return calculateTotalTax(state, subtotal, taxes || []);
+  return calculateTotalTax(subtotal, taxes || []);
 };
 
 export const selectGrandTotal = (state: RootState) => {
   const totalDiscount = selectDiscountTotal(state);
   const taxAmount = selectTaxAmount(state);
+  const vatAmount = ((state.order.restaurant?.vat || 0) / 100) * (selectCartTotal(state) - selectDiscountTotal(state));
   const subtotal = selectCartTotal(state);
   const deliveryFee =
     state.order.orderType === OrderType.Delivery
@@ -849,11 +882,13 @@ export const selectGrandTotal = (state: RootState) => {
       : 0;
 
   return (
-    subtotal +
-    taxAmount -
+    subtotal -
     totalDiscount +
-    deliveryFee -
-    state.order.splitBillAmount
+    taxAmount +
+    vatAmount -
+    deliveryFee
+    // state.order.splitBillAmount +
+    // Number(state.order.tip)
   );
 };
 

src/hooks/useDetectBarcode.ts

@@ -1,39 +0,0 @@
-import { useEffect, useState } from "react";
-
-export function useDetectBarcode() {
-  const [barcode, setBarcode] = useState<string>("");
-  const [lastBarcode, setLastBarcode] = useState<string>("");
-
-  useEffect(() => {
-    let interval: any;
-
-    const handleKeydown = (evt: any) => {
-      if (interval) clearInterval(interval);
-
-      if (evt.code === "Enter") {
-        if (barcode) handleBarcode(barcode);
-        setBarcode("");
-        return;
-      }
-
-      if (evt.key !== "Shift") setBarcode((prev) => prev + evt.key);
-
-      interval = setInterval(() => setBarcode(""), 20);
-    };
-
-    // Adding the event listener when the component mounts
-    document.addEventListener("keydown", handleKeydown);
-
-    // Cleanup the event listener when the component unmounts
-    return () => {
-      document.removeEventListener("keydown", handleKeydown);
-      if (interval) clearInterval(interval);
-    };
-  }, [barcode]);
-
-  const handleBarcode = (scannedBarcode: string) => {
-    setLastBarcode(scannedBarcode);
-  };
-
-  return lastBarcode;
-}

src/hooks/useRestaurant.ts

@@ -1,17 +1,34 @@
-import { updateRestaurant } from "features/order/orderSlice";
-import { useEffect } from "react";
+import { updateRestaurant, clearCart } from "features/order/orderSlice";
+import { useEffect, useRef } from "react";
 import { useAppDispatch } from "redux/hooks";
 import { RestaurantDetails } from "utils/types/appTypes";
 
 /**
  * Custom hook to automatically load restaurant into Redux store
  * when restaurant data is available
+ * Clears the cart when the restaurant (subdomain) changes
  */
 export const useRestaurant = (restaurant: RestaurantDetails | undefined) => {
   const dispatch = useAppDispatch();
+  const previousRestaurantIdRef = useRef<string | null>(null);
 
   useEffect(() => {
     if (restaurant) {
+      const currentRestaurantId = restaurant.restautantId;
+      
+      // Check if restaurant has changed
+      if (
+        previousRestaurantIdRef.current !== null &&
+        previousRestaurantIdRef.current !== currentRestaurantId
+      ) {
+        // Restaurant changed, clear the cart
+        dispatch(clearCart());
+      }
+      
+      // Update the previous restaurant ID
+      previousRestaurantIdRef.current = currentRestaurantId;
+      
+      // Update restaurant in store
       dispatch(updateRestaurant(restaurant));
     }
   }, [restaurant, dispatch]);

src/hooks/useSwipeUp.ts

@@ -1,52 +0,0 @@
-import { useRef, useState, useCallback } from "react";
-
-type Props = { isEnabled: boolean; swipeAction: () => void };
-
-export default function useSwipeUp({ isEnabled, swipeAction }: Props) {
-  // Swipe detection
-  const startYRef = useRef(0);
-  const [isSwiping, setIsSwiping] = useState(false);
-  const containerRef = useRef<HTMLDivElement>(null);
-  // Touch event handlers for swipe detection
-  const handleTouchStart = useCallback(
-    (e: React.TouchEvent) => {
-      if (!isEnabled) return;
-      startYRef.current = e.touches[0].clientY;
-      setIsSwiping(true);
-    },
-    [isEnabled],
-  );
-
-  /*
-  const handleTouchMove = useCallback(
-    (e: React.TouchEvent) => {
-      if (!isSwiping) return;
-    },
-    [isSwiping],
-  );
-*/
-
-  const handleTouchEnd = useCallback(
-    (e: React.TouchEvent) => {
-      if (!isSwiping || !isEnabled) return;
-
-      const endY = e.changedTouches[0].clientY;
-      const deltaY = startYRef.current - endY;
-      const threshold = 70; // Threshold to detect a swipe up
-
-      if (deltaY > threshold) {
-        // Swipe up detected
-        swipeAction();
-      }
-
-      setIsSwiping(false);
-    },
-    [isSwiping, isEnabled],
-  );
-
-  return {
-    containerRef,
-    handleTouchStart,
-    handleTouchEnd,
-  };
-}

src/hooks/useTranslations.tsx

@@ -1,7 +0,0 @@
-import { useAppSelector } from "redux/hooks";
-
-export function useTranslations() {
-  const { isRTL } = useAppSelector((state) => state.locale);
-  const nameProp = isRTL ? "arabic_name" : "name";
-  return [nameProp] as const ;
-}

src/index.css

@@ -37,6 +37,9 @@
     0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
   --tw-ring-offset-shadow: 0 0 rgba(0, 0, 0, 0);
   --tw-ring-shadow: 0 0 rgba(0, 0, 0, 0);
+
+  --greylight-hover: rgba(234, 234, 234, 1);
+  --variable-collection-PP: rgba(255, 183, 0, 1);
 }
 
 /* Dark theme variables */

src/layouts/app/FooterNav.tsx

@@ -1,13 +0,0 @@
-import { Layout } from 'antd';
-
-const { Footer } = Layout;
-
-type FooterNavProps = React.HTMLAttributes<HTMLDivElement>;
-
-const FooterNav = ({ ...others }: FooterNavProps) => {
-  return (
-    <Footer {...others}>AntD Dashboard © 2023 Created by Design Sparx</Footer>
-  );
-};
-
-export default FooterNav;

src/layouts/app/HeaderMenuDrawer.tsx

@@ -122,7 +122,18 @@ export default function HeaderMenuDrawer() {
                     style={mobileMenuLinkStyle(locale === item.key)}
                   >
                     {item.icon}
-                    <ProText>{item.label.props.children}</ProText>
+                    <ProText
+                      style={{
+                        fontWeight: 500,
+                        fontStyle: "Medium",
+                        fontSize: 12,
+                        lineHeight: "140%",
+                        letterSpacing: 0,
+                        color: "#333333",
+                      }}
+                    >
+                      {item.label.props.children}
+                    </ProText>
                   </div>
                 </div>
               ))}

src/layouts/app/hooks/useHeaderMenu.tsx

@@ -1,13 +1,15 @@
 import {
   BgColorsOutlined,
-    HomeOutlined,
-    LoginOutlined,
+  GlobalOutlined,
   LogoutOutlined,
-    MenuOutlined,
-    TranslationOutlined,
 } from "@ant-design/icons";
+import BranchesIcon from "components/Icons/BranchesIcon";
+import LoginIcon from "components/Icons/LoginIcon";
+import LoyaltyAndRewardIcon from "components/Icons/LoyaltyAndRewardIcon";
+import MyOrderIcon from "components/Icons/MyOrderIcon";
 import { logoutThunk } from "features/auth/authSlice";
 import { setLocale, setLocalesThunk } from "features/locale/localeSlice";
+import { clearCart } from "features/order/orderSlice";
 import { toggleTheme } from "features/theme/themeSlice";
 import i18n from "i18n/i18n";
 import { useTranslation } from "react-i18next";
@@ -28,7 +30,7 @@ export default function useHeaderMenu() {
     {
       key: "language",
       icon: (
-        <TranslationOutlined
+        <GlobalOutlined
           style={{ color: themeName === "dark" ? "white" : "#1f2937" }}
         />
       ),
@@ -58,38 +60,44 @@ export default function useHeaderMenu() {
     },
     {
       key: "orders",
-      icon: (
-        <HomeOutlined
-          style={{ color: themeName === "dark" ? "white" : "#1f2937" }}
-        />
-      ),
+      icon: <MyOrderIcon />,
       label: <Link to={`/${subdomain}/orders`}>{t("common.myOrder")}</Link>,
       onClick: () => {
         navigate(`/${subdomain}/orders`);
       },
     },
     {
-      key: "branches",
-      icon: (
-        <MenuOutlined
-          style={{ color: themeName === "dark" ? "white" : "#1f2937" }}
-        />
+      key: "rewardsAndLoyalty",
+      icon: <LoyaltyAndRewardIcon />,
+      label: (
+        <Link to={`/${subdomain}/rewards-and-loyalty`}>
+          {t("common.rewardsAndLoyalty")}
+        </Link>
       ),
+      onClick: () => {
+        navigate(`/${subdomain}/rewards-and-loyalty`);
+      },
+    },
+    {
+      key: "branches",
+      icon: <BranchesIcon />,
       label: <Link to={`/${subdomain}/menu`}>{t("common.branches")}</Link>,
     },
-    ...(!token ? [{
+    ...(!token
+      ? [
+          {
             key: "login",
-      icon: (
-        <LoginOutlined
-          style={{ color: themeName === "dark" ? "white" : "#1f2937" }}
-        />
-      ),
+            icon: <LoginIcon />,
             label: <Link to={`/${subdomain}/login`}>{t("common.login")}</Link>,
             onClick: () => {
               navigate(`/${subdomain}/login`);
             },
-      }] : []),
-    ...(token ? [{
+          },
+        ]
+      : []),
+    ...(token
+      ? [
+          {
             key: "logout",
             icon: (
               <LogoutOutlined
@@ -99,8 +107,11 @@ export default function useHeaderMenu() {
             label: <div>{t("common.logout")}</div>,
             onClick: () => {
               dispatch(logoutThunk());
+              dispatch(clearCart());
             },
-    }] : []),
+          },
+        ]
+      : []),
   ];
   return { menuItems };
 }

src/layouts/app/useSidebarItems.tsx

@@ -1,70 +0,0 @@
-import { BugFilled } from "@ant-design/icons";
-import { MenuProps } from "antd";
-import { PATHS } from "utils/constants";
-
-// import WarehouseIcon from "components/Icons/WarehouseIcon";
-import { useTranslation } from "react-i18next";
-import { Link } from "react-router-dom";
-
-export default function useSidebarItems() {
-  type MenuItem = Required<MenuProps>["items"][number] & {
-    permission: string;
-    children?: MenuItem[];
-  };
-  const { t } = useTranslation();
-  // const [isAuth] = useAuth();
-  const getItem = (
-    label: React.ReactNode,
-    key: React.Key,
-    permission?: string,
-    icon?: React.ReactNode,
-    children?: MenuItem[],
-    type?: "group"
-  ): MenuItem => {
-    return {
-      key,
-      icon,
-      children,
-      label,
-      type,
-      permission,
-    } as MenuItem;
-  };
-
-  // Recursive function to filter items based on permissions
-  const getGrantedItems = (items: any[]): MenuItem[] => {
-    return items
-      .filter(() => true)// Filter out items without permission
-      .map((item: any) => {
-        if (item.children) {
-          // Recursively filter children
-          return {
-            ...item,
-            children: getGrantedItems(item.children),
-          };
-        }
-        return item;
-      });
-  };
-
-  const items: MenuProps["items"] = [
-    getItem(
-      t("menu"),
-      PATHS.menu,
-      undefined,
-      <div style={{ marginTop: 10 }}>
-        <Link style={{}} to={PATHS.menu}>
-          <BugFilled className="icon-container pos-icon" />
-        </Link>
-      </div>
-    ),
-  ];
-
-  // if we have a menu  with empty children after applying "getGrantedItems"
-  // we going to remove it
-  const grantedItems = getGrantedItems(items).filter(
-    (i) => (i.children && i.children.length !== 0) || !i.children
-  );
-
-  return grantedItems;
-}

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();
@@ -23,15 +24,17 @@ export default function CardDetailsPage() {
   const { giftDetails } = useAppSelector(selectCart);
   const { isRTL } = useAppSelector((state) => state.locale);
   const [currentIndex, setCurrentIndex] = useState(0);
-  const [isGiftAmountBottomSheetOpen, setIsGiftAmountBottomSheetOpen] = useState(false);
+  const [isGiftAmountBottomSheetOpen, setIsGiftAmountBottomSheetOpen] =
+    useState(false);
   const { subdomain } = useParams();
   const navigate = useNavigate();
+  const [form] = Form.useForm();
 
   // Find the initial index based on selected cardId from gift details
   useEffect(() => {
     if (cards && giftDetails?.cardId) {
       const index = cards.findIndex(
-        (card) => card?.id?.toString() === giftDetails.cardId,
+        (card) => card?.id?.toString() === giftDetails.cardId.toString(),
       );
       if (index !== -1) {
         setCurrentIndex(index);
@@ -53,9 +56,29 @@ export default function CardDetailsPage() {
 
   const currentCard = cards && cards.length > 0 ? cards[currentIndex] : null;
 
-  const handleCheckout = useCallback(() => {
+  const handleCheckout = useCallback(async () => {
+    try {
+      await form.validateFields();
       navigate(`/${subdomain}/checkout`);
-  }, [subdomain]);
+    } catch (error) {
+      console.log(error);
+    }
+  }, [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 (
     <>
@@ -73,10 +96,14 @@ export default function CardDetailsPage() {
               gap: 8,
             }}
           >
-          <ProText style={{ fontSize: 16, fontWeight: 600, color: "#333333" }}>
+            <ProText
+              style={{ fontSize: 16, fontWeight: 600, color: "#333333" }}
+            >
               {t("cardDetails.addGiftDetails")}
             </ProText>
-          <ProText style={{ fontSize: 14, fontWeight: 400, color: "#95949C" }}>
+            <ProText
+              style={{ fontSize: 14, fontWeight: 400, color: "#95949C" }}
+            >
               {t("cardDetails.description")}
             </ProText>
           </div>
@@ -131,13 +158,18 @@ export default function CardDetailsPage() {
             </div>
           )}
           <Form
+            form={form}
             layout="vertical"
             style={{ display: "flex", flexDirection: "column", gap: 16 }}
           >
-          {giftDetails?.giftType !== "items" && <GiftAmountCard onOpen={() => setIsGiftAmountBottomSheetOpen(true)} />}
+            {giftDetails?.giftType !== "items" && (
+              <GiftAmountCard
+                onOpen={() => setIsGiftAmountBottomSheetOpen(true)}
+              />
+            )}
             <ReceivernformationCard />
             <SenderformationCard />
-          <TimeEstimateCard />
+            <PickupTimeCard />
           </Form>
         </Layout.Content>
         <Layout.Footer className={styles.checkoutButtonContainer}>
@@ -151,7 +183,10 @@ export default function CardDetailsPage() {
           </Button>
         </Layout.Footer>
       </Layout>
-    <GiftAmountBottomSheet isOpen={isGiftAmountBottomSheetOpen} onClose={() => setIsGiftAmountBottomSheetOpen(false)} />
+      <GiftAmountBottomSheet
+        isOpen={isGiftAmountBottomSheetOpen}
+        onClose={() => setIsGiftAmountBottomSheetOpen(false)}
+      />
     </>
   );
 }

src/pages/CardDetails/components/GiftAmountBottomSheet.tsx

@@ -1,14 +1,9 @@
 import { Button, Form } from "antd";
 import { ProBottomSheet } from "components/ProBottomSheet/ProBottomSheet.tsx";
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 
-import {
-  selectCart,
-  selectGrandTotal,
-  updateGiftDetails,
-  updateSplitBillAmount,
-} from "features/order/orderSlice";
+import { selectCart, updateGiftDetails } from "features/order/orderSlice";
 import { useAppDispatch, useAppSelector } from "redux/hooks";
 import ProText from "components/ProText";
 import { ProInputNumber } from "components/Inputs/ProInputNumber";
@@ -24,9 +19,11 @@ export function GiftAmountBottomSheet({
 }: SplitBillChoiceBottomSheetProps) {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
-  const { giftDetails, } = useAppSelector(selectCart);
+  const { giftDetails } = useAppSelector(selectCart);
   const [amount, setAmount] = useState<string>(
-    giftDetails?.amount && giftDetails?.amount > 0 ? giftDetails?.amount?.toString() : "",
+    giftDetails?.amount && giftDetails?.amount > 0
+      ? giftDetails?.amount?.toString()
+      : "",
   );
 
   const handleSave = () => {
@@ -35,7 +32,6 @@ export function GiftAmountBottomSheet({
     onClose();
   };
 
-
   return (
     <ProBottomSheet
       isOpen={isOpen}
@@ -51,13 +47,12 @@ export function GiftAmountBottomSheet({
     >
       <div
         style={{
-          padding: "20px",
+          padding: "20px 20px 0 20px",
           display: "flex",
           flexDirection: "column",
-          gap: 20,
         }}
       >
-        <div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
+        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
           <ProText
             style={{
               fontWeight: 400,
@@ -65,7 +60,7 @@ export function GiftAmountBottomSheet({
               fontSize: 16,
               lineHeight: "140%",
               letterSpacing: "0%",
-              color:"#333333"
+              color: "#333333",
             }}
           >
             {t("cardDetails.enterCustomOucherAmount")}
@@ -75,12 +70,24 @@ 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}
             />
           </Form.Item>
+          <ProText
+            style={{
+              fontWeight: 500,
+              fontStyle: "Medium",
+              fontSize: 12,
+              lineHeight: "140%",
+              letterSpacing: "0%",
+              color: "#B1B0B6",
+            }}
+          >
+            {t("cardDetails.minimumAmountShouldBe1OMR")}
+          </ProText>
         </div>
       </div>
 

src/pages/CardDetails/components/GiftAmountCard/GiftAmountCard.module.css

@@ -16,3 +16,9 @@
     gap: 8px;
   }
 }
+
+.editIcon {
+  position: absolute;
+  top: -7px;
+  right: 5px;
+}

src/pages/CardDetails/components/GiftAmountCard/GiftAmountCard.tsx

@@ -5,23 +5,52 @@ import styles from "./GiftAmountCard.module.css";
 import ArabicPrice from "components/ArabicPrice";
 import ProText from "components/ProText";
 import EditIcon from "components/Icons/EditIcon";
+import { useAppDispatch, useAppSelector } from "redux/hooks";
+import { updateGiftDetails } from "features/order/orderSlice";
+import { useState, useEffect, useMemo } from "react";
 
 export default function GiftAmountCard({ onOpen }: { onOpen: () => void }) {
   const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+  const { giftDetails } = useAppSelector((state) => state.order);
+  const [selectedAmount, setSelectedAmount] = useState<number | null>(null);
+
+  useEffect(() => {
+    const amount = giftDetails?.amount;
+    if (amount === 10 || amount === 20 || amount === 30) {
+      setSelectedAmount(amount);
+    } else {
+      setSelectedAmount(null);
+    }
+  }, [giftDetails?.amount]);
+
+  const handleAmountClick = (amount: number) => {
+    setSelectedAmount(amount);
+    dispatch(updateGiftDetails({ amount }));
+  };
+
+  const isDefaultAmount = useMemo(() => {
+    const amount = giftDetails?.amount;
+    return amount === 10 || amount === 20 || amount === 30;
+  }, [giftDetails?.amount]);
 
   return (
     <ProInputCard title={t("cardDetails.eCardAmount")}>
       <div className={styles.customerInformationCard}>
         <Button
+          onClick={() => handleAmountClick(10)}
           style={{
             borderRadius: 100,
             height: 40,
             border: "none",
-            backgroundColor: "#5F6C7B0D",
+            backgroundColor:
+              selectedAmount === 10 && isDefaultAmount
+                ? "#FFB7001F"
+                : "#5F6C7B0D",
           }}
         >
           <ArabicPrice
-            price={10.00}
+            price={10.0}
             textStyle={{
               fontWeight: 500,
               fontStyle: "Medium",
@@ -29,20 +58,27 @@ export default function GiftAmountCard({ onOpen }: { onOpen: () => void }) {
               lineHeight: "140%",
               letterSpacing: "0%",
               textAlign: "center",
-              color: "#5F6C7B",
+              color:
+                selectedAmount === 10 && isDefaultAmount
+                  ? "#CC9300"
+                  : "#5F6C7B",
             }}
           />
         </Button>
         <Button
+          onClick={() => handleAmountClick(20)}
           style={{
             borderRadius: 100,
             height: 40,
             border: "none",
-            backgroundColor: "#5F6C7B0D",
+            backgroundColor:
+              selectedAmount === 20 && isDefaultAmount
+                ? "#FFB7001F"
+                : "#5F6C7B0D",
           }}
         >
           <ArabicPrice
-            price={20.00}
+            price={20.0}
             textStyle={{
               fontWeight: 500,
               fontStyle: "Medium",
@@ -50,20 +86,27 @@ export default function GiftAmountCard({ onOpen }: { onOpen: () => void }) {
               lineHeight: "140%",
               letterSpacing: "0%",
               textAlign: "center",
-              color: "#5F6C7B",
+              color:
+                selectedAmount === 20 && isDefaultAmount
+                  ? "#CC9300"
+                  : "#5F6C7B",
             }}
           />
         </Button>
         <Button
+          onClick={() => handleAmountClick(30)}
           style={{
             borderRadius: 100,
             height: 40,
             border: "none",
-            backgroundColor: "#5F6C7B0D",
+            backgroundColor:
+              selectedAmount === 30 && isDefaultAmount
+                ? "#FFB7001F"
+                : "#5F6C7B0D",
           }}
         >
           <ArabicPrice
-            price={30.00}
+            price={30.0}
             textStyle={{
               fontWeight: 500,
               fontStyle: "Medium",
@@ -71,7 +114,10 @@ export default function GiftAmountCard({ onOpen }: { onOpen: () => void }) {
               lineHeight: "140%",
               letterSpacing: "0%",
               textAlign: "center",
-              color: "#5F6C7B",
+              color:
+                selectedAmount === 30 && isDefaultAmount
+                  ? "#CC9300"
+                  : "#5F6C7B",
             }}
           />
         </Button>
@@ -83,23 +129,36 @@ export default function GiftAmountCard({ onOpen }: { onOpen: () => void }) {
           width: "100%",
           height: 40,
           border: "none",
-          backgroundColor: "#030014",
+          backgroundColor:
+            giftDetails?.amount && !isDefaultAmount ? "#FFB7001F" : "#030014",
         }}
-        icon={<EditIcon className={styles.editIcon} color="#FFF" />}
+        icon={
+          giftDetails?.amount && !isDefaultAmount ? (
+            <EditIcon
+              className={styles.editIcon}
+              color={
+                giftDetails?.amount && !isDefaultAmount ? "#CC9300" : "#FFF"
+              }
+            />
+          ) : undefined
+        }
         iconPlacement="start"
         onClick={onOpen}
       >
         <ProText
           style={{
-            color: "#FFF",
+            color: giftDetails?.amount && !isDefaultAmount ? "#CC9300" : "#FFF",
             fontWeight: 500,
             fontStyle: "Medium",
             fontSize: 14,
             lineHeight: "140%",
             letterSpacing: "0%",
+            textAlign: "center",
           }}
         >
-          {t("cardDetails.costumeAmount")}
+          {giftDetails?.amount && !isDefaultAmount
+            ? giftDetails?.amount
+            : t("cardDetails.costumeAmount")}
         </ProText>
       </Button>
     </ProInputCard>

src/pages/CardDetails/components/ReceivernformationCard/ReceivernformationCard.tsx

@@ -15,7 +15,7 @@ export default function ReceivernformationCard() {
   return (
     <ProInputCard title={t("cardDetails.receiverInformation")}>
       <div className={styles.customerInformationCard}>
-        <Form.Item name="receiverName">
+        <Form.Item name="receiverName" rules={[{ required: true, message: t("cardDetails.receiverNameRequired") }]}>
           <Input
             placeholder={t("cardDetails.receiverName")}
             size="large"

src/pages/CardDetails/components/SenderformationCard/SenderformationCard.tsx

@@ -15,7 +15,12 @@ export default function SenderformationCard() {
   return (
     <ProInputCard title={t("cardDetails.yourInformation")}>
       <div className={styles.customerInformationCard}>
-        <Form.Item name="senderName">
+        <Form.Item
+          name="senderName"
+          rules={[
+            { required: true, message: t("cardDetails.senderNameRequired") },
+          ]}
+        >
           <Input
             placeholder={t("cardDetails.yourName")}
             size="large"

src/pages/EGiftCards/components/ECardList.tsx

@@ -57,6 +57,8 @@ export default function ECardList() {
           display: "grid",
           gridTemplateColumns: "1fr 1fr",
           padding: "8px",
+          placeItems: "center",
+          gap: "8px",
         }}
       >
         {eGiftCards?.map((card: EGiftCard) => (

src/pages/address/page.tsx

@@ -64,9 +64,9 @@ export default function AddressPage() {
             name="loginForm"
             form={form}
           >
+            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
               <div style={{ display: "flex", gap: 10 }}>
                 <Form.Item
-                label={t("floor")}
                   name="floor"
                   rules={[{ required: true, message: "" }]}
                   style={{ width: "100%" }}
@@ -81,7 +81,6 @@ export default function AddressPage() {
                   />
                 </Form.Item>{" "}
                 <Form.Item
-                label={t("address.aptNumber")}
                   name="apt"
                   rules={[{ required: true, message: "" }]}
                   style={{ width: "100%" }}
@@ -97,7 +96,6 @@ export default function AddressPage() {
                 </Form.Item>
               </div>
               <Form.Item
-              label={t("address.street")}
                 name="street"
                 rules={[{ required: true, message: "" }]}
               >
@@ -111,7 +109,6 @@ export default function AddressPage() {
                 />
               </Form.Item>
               <Form.Item
-              label={t("address.additionalDirection")}
                 name="additional"
                 rules={[{ required: true, message: "" }]}
               >
@@ -125,10 +122,7 @@ export default function AddressPage() {
                 />
               </Form.Item>
 
-            <ProPhoneInput label={t("address.mobileNumber")} propName="phone" />
-
               <Form.Item
-              label={t("address.addressLabel")}
                 name="addressLabel"
                 rules={[{ required: true, message: "" }]}
               >
@@ -141,6 +135,7 @@ export default function AddressPage() {
                   autoFocus={false}
                 />
               </Form.Item>
+            </div>
           </Form>
         </Card>
       </div>

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 {
@@ -601,12 +602,16 @@
   top: 1px;
 }
 
-.editIcon {
+.editIconOnSide {
   position: absolute;
   top: -7px;
   right: 5px;
 }
 
+.editIconMiddle {
+  position: relative;
+}
+
 :global(.ant-app-rtl) .editIcon {
   right: auto;
   left: 5px;

src/pages/cart/components/CartMobileTabletLayout.tsx

@@ -1,9 +1,6 @@
-import { Card, Divider, Space, Layout, Button } from "antd";
-import ArabicPrice from "components/ArabicPrice";
-import CartActionsButtons from "components/CartActionsButtons/CartActionsButtons.tsx";
-import ImageWithFallback from "components/ImageWithFallback";
+import { Card, Divider, Space, Layout, Button, Popconfirm } from "antd";
+
 import ProHeader from "components/ProHeader/ProHeader.tsx";
-import ProText from "components/ProText.tsx";
 import ProTitle from "components/ProTitle.tsx";
 import { clearCart, selectCart } from "features/order/orderSlice.ts";
 import styles from "pages/cart/cart.module.css";
@@ -20,9 +17,10 @@ import SpecialRequestCard from "pages/cart/components/specialRequest/SpecialRequ
 import TableNumberCard from "pages/cart/components/TableNumberCard.tsx";
 import { OrderType } from "pages/checkout/hooks/types";
 import { useTranslation } from "react-i18next";
-import { Variant } from "utils/types/appTypes";
 import DeleteIcon from "components/Icons/DeleteIcon";
 import PlusIcon from "components/Icons/PlusIcon";
+import { GiftItemsCard } from "pages/redeem/components/GiftItemsCard";
+import ProductChoicesCard from "components/productChoicesCard/ProductChoicesCard.tsx";
 
 interface CartMobileTabletLayoutProps {
   form: FormInstance;
@@ -35,23 +33,10 @@ export default function CartMobileTabletLayout({
   const { items, orderType } = useAppSelector(selectCart);
   const { isRTL } = useAppSelector((state) => state.locale);
   const { subdomain } = useParams();
-  const { pickup_type } = useAppSelector((state) => state.order.restaurant);
   const { isMobile, isTablet } = useBreakPoint();
   const getResponsiveClass = () => (isTablet ? "tablet" : "mobile");
   const navigate = useNavigate();
   const dispatch = useAppDispatch();
-  const getMenuItemImageStyle = () => {
-    if (isMobile) {
-      return {
-        width: 115,
-        height: 96,
-      };
-    }
-    return {
-      width: 120,
-      height: 120,
-    };
-  };
 
   return (
     <Layout>
@@ -68,6 +53,8 @@ export default function CartMobileTabletLayout({
           {(orderType === OrderType.DineIn ||
             orderType === OrderType.ToOffice) && <TableNumberCard />}
 
+          {orderType === OrderType.Redeem && <GiftItemsCard isCart={true} />}
+
           <div className={`${styles.cartContent} ${getResponsiveClass()}`}>
             <Card className={styles.cartItem}>
               <div
@@ -98,6 +85,17 @@ export default function CartMobileTabletLayout({
                   </ProTitle>
                 </div>
 
+                <Popconfirm
+                  title={t("cart.clearCartConfirmation.title")}
+                  description={t("cart.clearCartConfirmation.content")}
+                  onConfirm={() => {
+                    dispatch(clearCart());
+                  }}
+                  okText={t("cart.clearCartConfirmation.confirm")}
+                  cancelText={t("cart.clearCartConfirmation.cancel")}
+                  okButtonProps={{ danger: true }}
+                  placement={isRTL ? "left" : "right"}
+                >
                   <Button
                     shape="circle"
                     iconPlacement="start"
@@ -115,122 +113,19 @@ export default function CartMobileTabletLayout({
                       height: 32,
                       border: "1px solid #DEDEE0",
                     }}
-                  onClick={() => {
-                    dispatch(clearCart());
-                  }}
                   />
+                </Popconfirm>
               </div>
 
               {items.length >= 1 && (
                 <Divider style={{ margin: "8px 0px 12px 0px" }} />
               )}
               {items.map((item, index) => (
-                <div key={index} style={{ position: "relative" }}>
-                  <Space
-                    size="middle"
-                    style={{
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "space-between",
-                      height: "100%",
-                    }}
-                  >
-                    <Space orientation="vertical" size="small">
-                      <div
-                        style={{
-                          position: "absolute",
-                          top: 0,
-                          [isRTL ? "right" : "left"]: 0,
-                        }}
-                      >
-                        <ProText
-                          style={{
-                            margin: 0,
-                            lineClamp: 1,
-                            fontSize: isMobile ? 14 : isTablet ? 16 : 18,
-                            fontWeight: 600,
-                          }}
-                        >
-                          {item.name}{" "}
-                          <span
-                            style={{
-                              fontWeight: 400,
-                            }}
-                          >
-                            {isRTL
-                              ? (item.variant as Variant)?.optionsAR?.[0]?.value
-                              : (item.variant as Variant)?.options?.[0]?.value}
-                          </span>
-                        </ProText>
-                        <br />
-                        <ProText
-                          type="secondary"
-                          className={`${styles.itemDescription} responsive-text`}
-                          style={{
-                            margin: 0,
-                            lineClamp: 1,
-                            padding: isMobile ? "3px 0" : isTablet ? 8 : 10,
-                            fontSize: isMobile ? 14 : isTablet ? 18 : 20,
-                            display: "-webkit-box",
-                            WebkitBoxOrient: "vertical",
-                            WebkitLineClamp: 1,
-                            overflow: "hidden",
-                            textOverflow: "ellipsis",
-                            wordWrap: "break-word",
-                            overflowWrap: "break-word",
-                            lineHeight: "1.4",
-                            maxHeight: isMobile
-                              ? "3em"
-                              : isTablet
-                                ? "5em"
-                                : "7em",
-                            fontWeight: 500,
-                            letterSpacing: "0.01em",
-                            width: "55%",
-                          }}
-                        >
-                          {item.description}
-                        </ProText>
-                      </div>
-                      <div
-                        style={{
-                          position: "absolute",
-                          bottom: index !== items.length - 1 ? 16 : 3,
-                          [isRTL ? "right" : "left"]: 0,
-                        }}
-                      >
-                        <ArabicPrice
-                          price={item.price}
-                          style={{ fontStyle: "bold" }}
+                <ProductChoicesCard
+                  key={index}
+                  product={{ ...item, type: "CartItem" }}
+                  addDividerAfter={index !== items.length - 1}
                 />
-                      </div>
-                    </Space>
-                    <div style={{ position: "relative" }}>
-                      <ImageWithFallback
-                        src={item.image}
-                        alt={item.name}
-                        className={`${styles.menuItemImage} responsive-image`}
-                        {...getMenuItemImageStyle()}
-                        fallbackSrc={
-                          "https://fascano-space.s3.me-central-1.amazonaws.com/uploads/restorants/685a8fc884a8c_large.jpg"
-                        }
-                      />
-                      <div
-                        style={{
-                          position: "absolute",
-                          right: 3,
-                          bottom: 3,
-                        }}
-                      >
-                        <CartActionsButtons item={item} />
-                      </div>
-                    </div>
-                  </Space>
-
-                  {index !== items.length - 1 && (
-                    <Divider style={{ margin: "10px 0" }} />
-                  )}
-                </div>
               ))}
               <Button
                 style={{ width: "100%", marginTop: 24, color: "#4C4A58" }}
@@ -242,18 +137,18 @@ export default function CartMobileTabletLayout({
                   );
                 }}
               >
-                <PlusIcon dimesion="18" /> {t("cart.addMore")}
+                <PlusIcon dimension="18" /> {t("cart.addMore")}
               </Button>
             </Card>
           </div>
 
-          <YouMightAlsoLike />
+          {/* <YouMightAlsoLike /> */}
 
           <SpecialRequestCard />
 
           {/* Car Plate*/}
-          {((orderType === OrderType.Pickup && pickup_type === "car") ||
-            orderType === OrderType.ScheduledOrder) && <CarPlateCard />}
+          {/* {((orderType === OrderType.Pickup && pickup_type === "car") ||
+            orderType === OrderType.ScheduledOrder) && <CarPlateCard />} */}
 
           {/* Estimate Time */}
           {/* {(orderType === OrderType.Pickup ||

src/pages/cart/components/CouponCard.tsx

@@ -1,5 +1,9 @@
 import { Button, Form, Input, message } from "antd";
+import { CloseCircleOutlined } from "@ant-design/icons";
+import { CouponBottomSheet } from "components/CustomBottomSheet/CouponBottomSheet";
+import { CouponDialog } from "components/CustomBottomSheet/CouponDialog";
 import CouponHeartIcon from "components/Icons/cart/CouponHeart.tsx";
+import DonateIcon from "components/Icons/cart/DonateIcon";
 import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
 import ProText from "components/ProText";
 import {
@@ -7,20 +11,24 @@ import {
   updateCoupon,
   updateDiscount,
 } from "features/order/orderSlice.ts";
+import useBreakPoint from "hooks/useBreakPoint";
 import styles from "pages/cart/cart.module.css";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useGetDiscountMutation } from "redux/api/others";
 import { useAppDispatch, useAppSelector } from "redux/hooks.ts";
+import { colors } from "ThemeConstants";
 
 export default function CouponCard() {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
-  const { restaurant } = useAppSelector((state) => state.order);
+  const { restaurant, discount } = useAppSelector((state) => state.order);
   const { coupon } = useAppSelector(selectCart);
-  // const { isDesktop } = useBreakPoint();
+  const { isDesktop } = useBreakPoint();
   const [getDiscount] = useGetDiscountMutation();
+  const [isCouponOpen, setIsCouponOpen] = useState(false);
 
-  // const [isCouponOpen, setIsCouponOpen] = useState(false);
+  const isDiscountApplied = discount.value > 0 || discount.isDiscount || discount.isGift;
 
   const handleCouponSave = (value: string) => {
     getDiscount({
@@ -43,36 +51,48 @@ export default function CouponCard() {
       });
   };
 
-  // const handleCouponClose = () => {
-  //   setIsCouponOpen(false);
-  // };
+  const handleCouponClose = () => {
+    setIsCouponOpen(false);
+  };
+
+  const handleClearDiscount = () => {
+    dispatch(updateCoupon(""));
+    dispatch(
+      updateDiscount({
+        value: 0,
+        isGift: false,
+        isDiscount: false,
+      }),
+    );
+    message.success(t("cart.couponRemoved") || "Coupon removed");
+  };
 
   return (
     <>
       <ProInputCard
         title={t("cart.couponCode")}
-        // titleRight={
-        //   <div
-        //     style={{
-        //       display: "flex",
-        //       flexDirection: "row",
-        //       alignItems: "center",
-        //       gap: 10,
-        //     }}
-        //     onClick={() => setIsCouponOpen(true)}
-        //   >
-        //     <ProText
-        //       style={{
-        //         color: colors.primary,
-        //         fontSize: 14,
-        //         cursor: "pointer",
-        //       }}
-        //     >
-        //       {t("cart.viewOffers")}
-        //     </ProText>
-        //     <DonateIcon />
-        //   </div>
-        // }
+        titleRight={
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "row",
+              alignItems: "center",
+              gap: 10,
+            }}
+            onClick={() => setIsCouponOpen(true)}
+          >
+            <ProText
+              style={{
+                color: colors.primary,
+                fontSize: 14,
+                cursor: "pointer",
+              }}
+            >
+              {t("cart.viewOffers")}
+            </ProText>
+            <DonateIcon />
+          </div>
+        }
       >
         <Form.Item name="coupon">
           <Input
@@ -80,10 +100,21 @@ export default function CouponCard() {
             size="large"
             autoFocus={false}
             style={{ padding: "7px 11px", height: 48 }}
+            value={coupon}
             onChange={(e) => {
               dispatch(updateCoupon(e.target.value));
             }}
             suffix={
+              isDiscountApplied ? (
+                <CloseCircleOutlined
+                  onClick={handleClearDiscount}
+                  style={{
+                    fontSize: 18,
+                    color: "#999",
+                    cursor: "pointer",
+                  }}
+                />
+              ) : (
                 <Button
                   style={{
                     width: 100,
@@ -107,11 +138,12 @@ export default function CouponCard() {
                     {t("cart.apply")}
                   </ProText>
                 </Button>
+              )
             }
           />
         </Form.Item>
       </ProInputCard>
-      {/* {isDesktop ? (
+      {isDesktop ? (
         <CouponDialog
           isOpen={isCouponOpen}
           onClose={handleCouponClose}
@@ -125,7 +157,7 @@ export default function CouponCard() {
           initialValue={coupon}
           onSave={handleCouponSave}
         />
-      )} */}
+      )}
     </>
   );
 }

src/pages/cart/components/RewardWaiterCard.tsx

@@ -5,11 +5,10 @@ import { TipDialog } from "components/CustomBottomSheet/TipDialog.tsx";
 import DonateHandIcon from "components/Icons/cart/DonateHandIcon.tsx";
 import EditIcon from "components/Icons/EditIcon.tsx";
 import ProText from "components/ProText.tsx";
-import ProTitle from "components/ProTitle.tsx";
 import { selectCart, updateTip } from "features/order/orderSlice.ts";
 import useBreakPoint from "hooks/useBreakPoint.ts";
 import styles from "pages/cart/cart.module.css";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useAppDispatch, useAppSelector } from "redux/hooks.ts";
 
@@ -18,12 +17,18 @@ export default function RewardWaiterCard() {
   const dispatch = useAppDispatch();
   const { tip } = useAppSelector(selectCart);
   const { isDesktop } = useBreakPoint();
+  const [selectedTip, setSelectedTip] = useState<number | null>(parseFloat(tip));
 
   const [isTipOpen, setIsTipOpen] = useState(false);
 
-  const handleTipSave = (value: string) => {
-    dispatch(updateTip(value));
-    message.success(t("cart.tip") + " " + t("updatedSuccessfully"));
+  const isDefaultTip = useMemo(() => {
+    const amount = parseFloat(tip);
+    return amount === 0.5 || amount === 1.0 || amount === 3.0;
+  }, [tip]);
+
+  const handleTipClick = (value: number) => {
+    setSelectedTip(value);
+    dispatch(updateTip(value.toString()));
   };
 
   const handleTipClose = () => {
@@ -86,9 +91,9 @@ export default function RewardWaiterCard() {
         <Divider style={{ margin: "15px 0 15px 0" }} />
         <div
           style={{
-            display: "flex",
-            flexDirection: "row",
-            justifyContent: "space-around",
+            display: "grid",
+            gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
+            gap: 16,
           }}
         >
           <Button
@@ -96,8 +101,11 @@ export default function RewardWaiterCard() {
               borderRadius: 100,
               height: 32,
               border: "none",
-              backgroundColor: "#5F6C7B0D",
+              backgroundColor:
+                selectedTip === 0.5 && isDefaultTip ? "#FFB7001F" : "#5F6C7B0D",
             }}
+            iconPlacement="end"
+            onClick={() => handleTipClick(0.5)}
           >
             <ArabicPrice
               price={0.5}
@@ -108,7 +116,8 @@ export default function RewardWaiterCard() {
                 lineHeight: "140%",
                 letterSpacing: "0%",
                 textAlign: "center",
-                color: "#5F6C7B",
+                color:
+                  selectedTip === 0.5 && isDefaultTip ? "#CC9300" : "#5F6C7B",
               }}
             />
           </Button>
@@ -117,8 +126,10 @@ export default function RewardWaiterCard() {
               borderRadius: 100,
               height: 32,
               border: "none",
-              backgroundColor: "#5F6C7B0D",
+              backgroundColor:
+                selectedTip === 1 && isDefaultTip ? "#FFB7001F" : "#5F6C7B0D",
             }}
+            onClick={() => handleTipClick(1)}
           >
             <ArabicPrice
               price={1.0}
@@ -129,7 +140,8 @@ export default function RewardWaiterCard() {
                 lineHeight: "140%",
                 letterSpacing: "0%",
                 textAlign: "center",
-                color: "#5F6C7B",
+                color:
+                  selectedTip === 1 && isDefaultTip ? "#CC9300" : "#5F6C7B",
               }}
             />
           </Button>
@@ -137,14 +149,21 @@ export default function RewardWaiterCard() {
             style={{
               borderRadius: 100,
               height: 32,
-              border: "none",
-              backgroundColor: "#FFB7001F",
+              backgroundColor: tip && !isDefaultTip ? "#FFB7001F" : "inherit",
+              border: tip && !isDefaultTip ? "none" : "1px solid #C0BFC4",
             }}
-            icon={<EditIcon className={styles.editIcon} />}
-            iconPlacement="end"
+            icon={
+              <EditIcon
+                className={styles.editIcon}
+                color={tip && !isDefaultTip ? "#CC9300" : "#3D3B4A"}
+              />
+            }
+            iconPlacement="start"
+            onClick={() => setIsTipOpen(true)}
           >
+            {tip && !isDefaultTip ? (
               <ArabicPrice
-              price={3.0}
+                price={parseFloat(tip)}
                 textStyle={{
                   fontWeight: 500,
                   fontStyle: "Medium",
@@ -155,6 +174,21 @@ export default function RewardWaiterCard() {
                   color: "#CC9300",
                 }}
               />
+            ) : (
+              <ProText
+                style={{
+                  color: "#CC9300",
+                  fontWeight: 500,
+                  fontStyle: "Medium",
+                  fontSize: 14,
+                  lineHeight: "140%",
+                  letterSpacing: "0%",
+                  textAlign: "center",
+                }}
+              >
+                {t("cart.other")}
+              </ProText>
+            )}
           </Button>
         </div>
       </Card>
@@ -163,14 +197,12 @@ export default function RewardWaiterCard() {
           isOpen={isTipOpen}
           onClose={handleTipClose}
           initialValue={tip}
-          onSave={handleTipSave}
         />
       ) : (
         <TipBottomSheet
           isOpen={isTipOpen}
           onClose={handleTipClose}
           initialValue={tip}
-          onSave={handleTipSave}
         />
       )}
     </>

src/pages/cart/components/TableNumberCard.tsx

@@ -64,11 +64,6 @@ export default function TableNumberCard() {
       >
         {isEditing || table === "" ? (
           <Form.Item
-            label={
-              orderType === OrderType.DineIn
-                ? t("cart.tableNumber")
-                : t("cart.selectCompany")
-            }
             name="table"
             required
             rules={[
@@ -81,7 +76,6 @@ export default function TableNumberCard() {
               },
             ]}
             initialValue={table}
-            style={{ position: "relative", top: -5 }}
           >
             <Select
               value={table}
@@ -103,9 +97,8 @@ export default function TableNumberCard() {
                 borderRadius: 888,
               }}
               onChange={(value) => {
-                console.log(value);
                 dispatch(updateTables(value));
-                setIsEditing(false);
+                if(value) setIsEditing(false);
               }}
               onClear={() => {
                 dispatch(removeTable());

src/pages/cart/components/earnLoyaltyPointsCard/EarnLoyaltyPointsCard.module.css

@@ -0,0 +1,10 @@
+.useLoyaltyPointsContainer {
+  gap: 20px;
+  border-radius: 16px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  background-color: var(--secondary-background);
+  width: 100%;
+}

src/pages/cart/components/earnLoyaltyPointsCard/EarnLoyaltyPointsCard.tsx

@@ -0,0 +1,67 @@
+import { Button, Form, Switch } from "antd";
+import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
+import { useTranslation } from "react-i18next";
+import { useAppDispatch, useAppSelector } from "redux/hooks.ts";
+import { selectCart, updateUseLoyaltyPoints } from "features/order/orderSlice";
+import ProText from "components/ProText";
+import styles from "./EarnLoyaltyPointsCard.module.css";
+
+export default function EarnLoyaltyPointsCard() {
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+  const { useLoyaltyPoints } = useAppSelector(selectCart);
+
+  return (
+    <>
+      <ProInputCard title={t("cart.loyalty")}>
+        <Form.Item name="useLoyaltyPoints">
+          <div className={styles.useLoyaltyPointsContainer}>
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                gap: 4,
+                width: "100%",
+              }}
+            >
+              <ProText
+                style={{
+                  fontWeight: 500,
+                  fontStyle: "Medium",
+                  fontSize: 14,
+                  lineHeight: "140%",
+                  letterSpacing: "0%",
+                  color: "#333333",
+                }}
+              >
+                {t("cart.useLoyaltyPoints")}
+              </ProText>
+
+              <ProText
+                style={{
+                  fontWeight: 400,
+                  fontStyle: "Regular",
+                  fontSize: 12,
+                  lineHeight: "140%",
+                  letterSpacing: "0%",
+                  color: "#777580",
+                }}
+              >
+                {t(
+                  "cart.applyYourAvailableRewardsToGetDiscountsOnItemsInYourCart",
+                )}
+              </ProText>
+            </div>
+            <Switch
+              autoFocus={false}
+              checked={useLoyaltyPoints}
+              onClick={() => {
+                dispatch(updateUseLoyaltyPoints(!useLoyaltyPoints));
+              }}
+            />
+          </div>
+        </Form.Item>
+      </ProInputCard>
+    </>
+  );
+}

src/pages/cart/components/specialRequest/SpecialRequestCard.tsx

@@ -29,7 +29,7 @@ export default function SpecialRequestCard() {
   return (
     <>
       <ProInputCard
-        title={t("cart.specialRequest")}
+        title={t("cart.addSpecialRequestOptional")}
         dividerStyle={{ margin: "5px 0 0 0" }}
       >
         <Form.Item name="specialRequest" style={{ marginTop: 12 }}>

src/pages/cart/components/youMayLike/YouMightAlsoLike.tsx

@@ -106,7 +106,7 @@ export default function YouMightAlsoLike() {
           price: item.price,
           image: item.image,
           description: item.description,
-          variant: "None",
+          variant: undefined,
           isHasLoyalty: item.isHasLoyalty,
           no_of_stamps_give: item.no_of_stamps_give,
         },
@@ -117,17 +117,6 @@ export default function YouMightAlsoLike() {
 
   return (
     <>
-      <div className={styles.youMightAlsoLikeTitle}>
-        <ProText
-          strong
-          style={{
-            fontSize: isMobile ? 18 : isTablet ? 18 : 20,
-          }}
-        >
-          {t("cart.youMightAlsoLike")}
-        </ProText>
-      </div>
-
       <div
         style={{
           position: "relative",

src/pages/checkout/checkout.module.css

@@ -0,0 +1,13 @@
+.carCard {
+  gap: 20px;
+  opacity: 1;
+  border-radius: 6px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.plusIcon {
+  position: relative;
+  top: 2px;
+}

src/pages/checkout/components/AddressSummary.tsx

@@ -106,6 +106,8 @@ export const AddressSummary = () => {
     return null;
   }
 
+  console.log(location);
+
   return (
     <>
       <Card

src/pages/checkout/components/BriefMenuCard.tsx

@@ -32,14 +32,13 @@ export default function BriefMenuCard() {
     <>
       <ProInputCard
         title={t("checkout.orderSummary")}
-        dividerStyle={{ margin: "5px 0 0 0" }}
+        dividerStyle={{ margin: "3px 0 16px 0" }}
       >
         <div
           style={{
             display: "flex",
             flexDirection: "row",
             justifyContent: "space-between",
-            padding: "16px 0",
           }}
           onClick={() => {
             if (orderId && location.pathname.includes("/order/")) {

src/pages/checkout/components/CarBottomSheet.tsx

@@ -0,0 +1,149 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { ProBottomSheet } from "components/ProBottomSheet/ProBottomSheet";
+import { colors } from "ThemeConstants";
+import { Button, Card } from "antd";
+import CarRatioGroups from "./CarRatioGroups/CarRatioGroups";
+import PlusIcon from "components/Icons/PlusIcon";
+import styles from "../checkout.module.css";
+import { AddCarBottomSheet } from "components/CustomBottomSheet/AddCarBottomSheet";
+import { updatePlateCar } from "features/order/orderSlice";
+import { useAppDispatch } from "redux/hooks";
+
+interface CarBottomSheetProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function CarBottomSheet({ isOpen, onClose }: CarBottomSheetProps) {
+  const { t } = useTranslation();
+  const [value, setValue] = useState<string | null>(null);
+  const [isAddCarOpen, setIsAddCarOpen] = useState(false);
+  const dispatch = useAppDispatch();
+
+  const handleCancel = () => {
+    setValue(null);
+    onClose();
+  };
+
+  const handleSave = () => {
+    dispatch(updatePlateCar(value || ""));
+    onClose();
+  };
+
+  const handleAddCarClick = () => {
+    setIsAddCarOpen(true);
+  };
+
+  const handleAddCarClose = () => {
+    setIsAddCarOpen(false);
+    // Reopen CarBottomSheet when AddCarBottomSheet closes
+    // The parent component should handle reopening, but we'll ensure state is correct
+  };
+
+  const handleAddCarSave = () => {
+    dispatch(updatePlateCar(value || ""));
+    // After saving, close AddCarBottomSheet which will trigger reopening CarBottomSheet
+    setIsAddCarOpen(false);
+  };
+
+  // Show AddCarBottomSheet when it's open, otherwise show CarBottomSheet
+  if (isAddCarOpen) {
+    return (
+      <AddCarBottomSheet
+        isOpen={isAddCarOpen}
+        onClose={handleAddCarClose}
+        onSave={handleAddCarSave}
+      />
+    );
+  }
+
+  return (
+    <ProBottomSheet
+      isOpen={isOpen}
+      onClose={handleCancel}
+      title={t("checkout.addCarDetails")}
+      initialSnap={1}
+      height={575}
+      snapPoints={[575]}
+    >
+      <Card title={t("car.selectCar")} style={{ marginTop: 24 }}>
+        <CarRatioGroups
+          options={[
+            {
+              label: "",
+              value: "7CAB1",
+              price: "7CAB1",
+            },
+            {
+              label: "Buy one get one free, Min order : SDG 5,000",
+              value: "7CAB2",
+              price: "7CAB2",
+            },
+            {
+              label: "30% off on select items, Min order : SDG 15,000",
+              value: "7CABO",
+              price: "7CABO",
+            },
+          ]}
+          value={value || undefined}
+          onRatioClick={(value) => setValue(value)}
+          optionsStyle={{
+            fontSize: 12,
+            fontWeight: 500,
+            color: "#5F6C7B",
+          }}
+          valueStyle={{
+            fontSize: 12,
+            fontWeight: 500,
+            color: colors.primary,
+          }}
+        />
+        <Button
+          style={{
+            fontWeight: 600,
+            fontStyle: "SemiBold",
+            fontSize: 14,
+            lineHeight: "140%",
+            letterSpacing: 0,
+            width: "100%",
+            color: "#5F6C7B",
+            marginTop: 16,
+          }}
+          onClick={handleAddCarClick}
+          icon={
+            <PlusIcon
+              color="#5F6C7B"
+              dimension="16"
+              className={styles.plusIcon}
+            />
+          }
+        >
+          {t("car.addCar")}
+        </Button>
+      </Card>
+
+      <div
+        style={{
+          display: "flex",
+          gap: 12,
+          marginTop: 20,
+        }}
+      >
+        <Button
+          type="primary"
+          style={{
+            flex: 1,
+            boxShadow: "none",
+            height: 48,
+            width: "100%",
+          }}
+          onClick={handleSave}
+          disabled={!value}
+        >
+          {t("checkout.save")}
+        </Button>
+      </div>
+    </ProBottomSheet>
+  );
+}

src/pages/checkout/components/CarCard.tsx

@@ -0,0 +1,121 @@
+import ProText from "components/ProText";
+import { useTranslation } from "react-i18next";
+import { useAppSelector } from "redux/hooks";
+import BackIcon from "components/Icons/BackIcon";
+import NextIcon from "components/Icons/NextIcon";
+import CarIcon from "components/Icons/CarIcon";
+import { Button, Card } from "antd";
+import styles from "../checkout.module.css";
+import { useState } from "react";
+import { CarBottomSheet } from "./CarBottomSheet";
+
+export function CarCard() {
+  const { t } = useTranslation();
+  const { isRTL } = useAppSelector((state) => state.locale);
+  const [isCarBottomSheetOpen, setIsCarBottomSheetOpen] = useState(false);
+  const { plateCar } = useAppSelector((state) => state.order);
+
+  return (
+    <>
+      <Card
+        onClick={() => {
+          setIsCarBottomSheetOpen(true);
+        }}
+      >
+        <div className={styles.carCard}>
+          <Button
+            shape="circle"
+            icon={<CarIcon />}
+            style={{
+              backgroundColor: "var(--background)",
+              border: "none",
+              width: 32,
+              height: 32,
+              minWidth: 32,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              boxShadow: "0 0 10px 0 rgba(0, 0, 0, 0.1)",
+            }}
+          />
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              gap: 4,
+              width: "100%",
+            }}
+          >
+            <ProText
+              style={{
+                fontWeight: 500,
+                fontStyle: "Medium",
+                fontSize: 18,
+                lineHeight: "140%",
+                color: "#333333",
+              }}
+            >
+              {t("checkout.addCarDetails")}
+            </ProText>
+
+            {plateCar ? (
+              <div
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 10,
+                  marginTop: 6,
+                }}
+              >
+                <ProText
+                  style={{
+                    fontWeight: 400,
+                    fontStyle: "Regular",
+                    fontSize: 16,
+                    lineHeight: "140%",
+                    color: "#777580",
+                  }}
+                >{t("checkout.carPlateNumber")}:</ProText>
+                <div
+                  style={{
+                    backgroundColor: "#FFC600",
+                    color: "#333333",
+                    padding: "3px 14px",
+                    borderRadius: "20px",
+                    fontSize: 15,
+                    fontWeight: 600,
+                    fontStyle: "SemiBold",
+                    letterSpacing: "0.8px",
+                    display: "inline-flex",
+                    alignItems: "center",
+                    boxShadow: "0 2px 6px rgba(255, 198, 0, 0.25)",
+                    fontFamily: "monospace",
+                  }}
+                >
+                  {plateCar}
+                </div>
+              </div>
+            ) : (
+              <ProText
+                style={{
+                  fontWeight: 400,
+                  fontStyle: "Regular",
+                  fontSize: 16,
+                  lineHeight: "140%",
+                  color: "#777580",
+                }}
+              >
+                {t("checkout.soTheRestaurantCanRecognizeYourCarWhenYouArrive")}
+              </ProText>
+            )}
+          </div>
+          {isRTL ? <BackIcon iconSize={24} /> : <NextIcon iconSize={24} />}
+        </div>
+      </Card>
+      <CarBottomSheet
+        isOpen={isCarBottomSheetOpen}
+        onClose={() => setIsCarBottomSheetOpen(false)}
+      />
+    </>
+  );
+}

src/pages/checkout/components/CarRatioGroups/CarRatioGroups.module.css

@@ -0,0 +1,122 @@
+.proRatioGroups :global(.ant-radio-wrapper:last-child) {
+  width: 100% !important;
+}
+
+.proRatioGroups :global(.ant-radio-label) {
+  width: 100% !important;
+}
+
+/* radio.module.css */
+.proRatioGroups :global(.ant-radio-inner) {
+  width: 24px !important;
+  height: 24px !important;
+  border-radius: 30px !important;
+}
+
+.proRatioGroups :global(.ant-radio) {
+  width: 24px !important;
+  height: 24px !important;
+}
+
+.circleCheckbox {
+  border: 1px solid #5f6c7b1f;
+  height: 62px;
+  justify-content: space-between;
+  opacity: 1;
+  border-radius: 888px;
+  padding: 8px 12px;
+  border-width: 1px;
+}
+
+/* Make AntD checkbox look like a circular check indicator (scoped via CSS modules) */
+.circleCheckbox :global(.ant-checkbox-inner) {
+  width: 24px;
+  height: 24px;
+  border-radius: 50% !important;
+  border: 1.5px solid #d5d8da;
+  background: transparent;
+}
+
+.circleCheckbox :global(.ant-checkbox-checked .ant-checkbox-inner) {
+  border-radius: 50% !important;
+  background: transparent;
+  border-color: #ffb700;
+}
+
+/* Replace AntD checkmark with a filled inner circle when checked (match SVG) */
+.circleCheckbox :global(.ant-checkbox-inner::after) {
+  content: "";
+  border: 0 !important;
+  transform: none !important;
+  width: 0;
+  height: 0;
+  left: 50%;
+  top: 50%;
+}
+
+:global(.ant-app-rtl) .circleCheckbox :global(.ant-checkbox-inner::after) {
+  left: auto;
+  right: 50%;
+}
+
+.circleCheckbox :global(.ant-checkbox-checked .ant-checkbox-inner::after) {
+  width: 18px;
+  height: 18px;
+  margin-left: -9px;
+  margin-top: -9px;
+  border-radius: 50%;
+  background: #ffb700;
+}
+
+:global(.ant-app-rtl)
+  .circleCheckbox
+  :global(.ant-checkbox-checked .ant-checkbox-inner::after) {
+  margin-left: auto;
+  margin-right: -9px;
+}
+
+/* Apply same circular style to Radio buttons */
+.circleCheckbox :global(.ant-radio-inner) {
+  width: 24px;
+  height: 24px;
+  border-radius: 50% !important;
+  border: 1.5px solid #d5d8da;
+  background: transparent;
+}
+
+.circleCheckbox :global(.ant-radio-checked .ant-radio-inner) {
+  border-radius: 50% !important;
+  background: transparent;
+  border-color: #ffb700;
+}
+
+.circleCheckbox :global(.ant-radio-inner::after) {
+  content: "";
+  border: 0 !important;
+  transform: none !important;
+  width: 0;
+  height: 0;
+  left: 50%;
+  top: 50%;
+}
+
+:global(.ant-app-rtl) .circleCheckbox :global(.ant-radio-inner::after) {
+  left: auto;
+  right: 50%;
+}
+
+.circleCheckbox :global(.ant-radio-checked .ant-radio-inner::after) {
+  width: 18px;
+  height: 18px;
+  margin-left: -9px;
+  margin-top: -9px;
+  border-radius: 50%;
+  background: #ffb700;
+}
+
+:global(.ant-app-rtl)
+  .circleCheckbox
+  :global(.ant-radio-checked .ant-radio-inner::after) {
+  margin-left: auto;
+  margin-right: -9px;
+}

src/pages/checkout/components/CarRatioGroups/CarRatioGroups.tsx

@@ -0,0 +1,130 @@
+import { Button, Card, Divider, Radio, RadioChangeEvent, Space } from "antd";
+import ProText from "components/ProText";
+import styles from "./CarRatioGroups.module.css";
+import { useTranslation } from "react-i18next";
+import CarIcon from "components/Icons/CarIcon";
+
+interface CarRatioGroupsProps {
+  options: { label: string; value: string; price?: string }[];
+  onRatioClick?: (value: string) => void;
+  onChange?: (e: RadioChangeEvent) => void;
+  value?: string;
+  optionsStyle?: React.CSSProperties;
+  valueStyle?: React.CSSProperties;
+  showDivider?: boolean;
+}
+
+const CarRatioGroups = ({
+  options,
+  onRatioClick,
+  onChange,
+  value,
+  optionsStyle,
+  valueStyle,
+  showDivider = false,
+  ...props
+}: CarRatioGroupsProps) => {
+  const handleChange = (e: RadioChangeEvent) => {
+    // If onChange is provided (from Form.Item), use it
+    if (onChange) {
+      onChange(e);
+    }
+    // Also call onRatioClick if provided (for backward compatibility)
+    if (onRatioClick) {
+      onRatioClick(e.target.value);
+    }
+  };
+
+  return (
+      <div className={styles.proRatioGroups}>
+        <Radio.Group
+          style={{
+            width: "100%",
+          }}
+          value={value}
+          onChange={handleChange}
+          {...props}
+        >
+          <Space orientation="vertical" style={{ width: "100%", gap: 16 }}>
+            {options.map((option) => (
+              <>
+                <Radio
+                  key={option.value}
+                  value={option.value}
+                  className={styles.circleCheckbox}
+                >
+                  <div
+                    style={{
+                      display: "flex",
+                      flexDirection: "row",
+                      justifyContent: "space-between",
+                    }}
+                  >
+                    <div
+                      style={{ display: "flex", flexDirection: "row", gap: 12 }}
+                    >
+                      <div
+                        style={{
+                          display: "flex",
+                          flexDirection: "column",
+                          gap: 4,
+                          width: "100%",
+                          justifyContent: "center",
+                          textAlign: "left",
+                        }}
+                      >
+                        <ProText
+                          style={{
+                            fontWeight: 500,
+                            fontStyle: "Medium",
+                            fontSize: 12,
+                            lineHeight: "140%",
+                            color: "#333333",
+                          }}
+                        >
+                          Optima
+                        </ProText>
+
+                        <ProText
+                          style={{
+                            fontWeight: 400,
+                            fontStyle: "Regular",
+                            fontSize: 12,
+                            lineHeight: "140%",
+                            color: "#777580",
+                          }}
+                        >
+                          42322, blue
+                        </ProText>
+                      </div>
+                    </div>
+
+                    <Button
+                      shape="circle"
+                      icon={<CarIcon />}
+                      style={{
+                        backgroundColor: "var(--background)",
+                        border: "none",
+                        width: 32,
+                        height: 32,
+                        minWidth: 32,
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        boxShadow: "0 0 10px 0 rgba(0, 0, 0, 0.1)",
+                      }}
+                    />
+                  </div>
+                </Radio>
+                {showDivider && options.length !== options.length - 1 && (
+                  <Divider style={{ margin: "0 0 16px 0 " }} />
+                )}
+              </>
+            ))}
+          </Space>
+        </Radio.Group>
+      </div>
+  );
+};
+
+export default CarRatioGroups;

src/pages/checkout/components/CheckoutButton.tsx

@@ -1,4 +1,4 @@
-import { Button, FormInstance, Layout } from "antd";
+import { Button, FormInstance, Layout, message } from "antd";
 import { selectCart, updateSplitBillAmount } from "features/order/orderSlice";
 import { OrderType } from "pages/checkout/hooks/types.ts";
 import { useCallback, useMemo, useState } from "react";
@@ -10,14 +10,17 @@ import { EqualltyChoiceBottomSheet } from "pages/pay/components/splitBill/Equall
 import { SplitBillChoiceBottomSheet } from "pages/pay/components/splitBill/SplitBillChoiceBottomSheet";
 import { CustomAmountChoiceBottomSheet } from "pages/pay/components/splitBill/CustomAmountChoiceBottomSheet";
 import { PayForYourItemsChoiceBottomSheet } from "pages/pay/components/splitBill/PayForYourItemsChoiceBottomSheet";
+import useGidtAmount from "../hooks/useGidtAmount";
+import { GiftType } from "components/CustomBottomSheet/GiftTypeBottomSheet";
 
 type SplitWay = "customAmount" | "equality" | "payForItems" | null;
 
 export default function CheckoutButton({ form }: { form: FormInstance }) {
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
-  const { orderType } = useAppSelector(selectCart);
+  const { orderType, giftDetails, items } = useAppSelector(selectCart);
   const { handleCreateOrder } = useOrder();
+  const { handleCreateGiftAmount } = useGidtAmount();
   const [selectedSplitWay, setSelectedSplitWay] = useState<SplitWay>(null);
   const [
     isSplitBillChoiceBottomSheetOpen,
@@ -47,11 +50,22 @@ export default function CheckoutButton({ form }: { form: FormInstance }) {
   const handlePlaceOrderClick = useCallback(async () => {
     try {
       await form.validateFields();
+      if (
+        orderType === OrderType.Gift &&
+        giftDetails?.giftType === GiftType.Vouchers
+      ) {
+        handleCreateGiftAmount();
+      } else {
+        if (items.length > 0) {
           handleCreateOrder();
+        } else {
+          message.error(t("checkout.noItems"));
+        }
+      }
     } catch (error) {
       console.log(error);
     }
-  }, [handleCreateOrder, form]);
+  }, [handleCreateOrder, handleCreateGiftAmount, form, orderType, giftDetails]);
 
   const shouldShowSplitBill = useMemo(
     () => orderType === OrderType.DineIn,

src/pages/checkout/components/CollectWay/CollectWay.module.css

@@ -0,0 +1,65 @@
+.collectWay {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: 16px;
+  background-color: #ebebec;
+  height: 44;
+  border-radius: 888px;
+  padding: 4px;
+  opacity: 1;
+}
+
+.activeButton {
+  background-color: #030014;
+  color: #ffffff;
+  height: 36px;
+  border: none !important;
+  width: 100%;
+  transition: none !important;
+}
+
+.activeButton:hover,
+.activeButton:focus,
+.activeButton:active,
+.activeButton:focus-visible {
+  background-color: #030014 !important;
+  color: #ffffff !important;
+  border: none !important;
+  box-shadow: none !important;
+  outline: none !important;
+  transform: none !important;
+  opacity: 1 !important;
+}
+
+.activeButton::before,
+.activeButton::after {
+  display: none !important;
+}
+
+.inactiveButton {
+  background-color: #ebebec;
+  color: #595764;
+  height: 36px;
+  border: none !important;
+  width: 100%;
+  transition: none !important;
+}
+
+.inactiveButton:hover,
+.inactiveButton:focus,
+.inactiveButton:active,
+.inactiveButton:focus-visible {
+  background-color: #ebebec !important;
+  color: #595764 !important;
+  border: none !important;
+  box-shadow: none !important;
+  outline: none !important;
+  transform: none !important;
+  opacity: 1 !important;
+}
+
+.inactiveButton::before,
+.inactiveButton::after {
+  display: none !important;
+}

src/pages/checkout/components/CollectWay/CollectWay.tsx

@@ -0,0 +1,34 @@
+import { Button } from "antd";
+import styles from "./CollectWay.module.css";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+export const CollectWay = (): JSX.Element => {
+  const { t } = useTranslation();
+  const [activeButton, setActiveButton] = useState<string>("counter");
+
+  return (
+    <div className={styles.collectWay}>
+      <Button
+        className={
+          activeButton === "counter"
+            ? styles.activeButton
+            : styles.inactiveButton
+        }
+        onClick={() => setActiveButton("counter")}
+      >
+        {t("checkout.collectAtCounter")}
+      </Button>
+      <Button
+        className={
+          activeButton === "parking"
+            ? styles.activeButton
+            : styles.inactiveButton
+        }
+        onClick={() => setActiveButton("parking")}
+      >
+        {t("checkout.collectAtParking")}
+      </Button>
+    </div>
+  );
+};

src/pages/checkout/components/CustomerInformationCard.tsx

@@ -1,6 +1,10 @@
 import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
 import ProPhoneInput from "components/ProPhoneInput";
-import { selectCart, updateCustomerName } from "features/order/orderSlice";
+import {
+  selectCart,
+  updateCustomerName,
+  updatePhone,
+} from "features/order/orderSlice";
 import { OrderType } from "pages/checkout/hooks/types.ts";
 import { useTranslation } from "react-i18next";
 import { useAppDispatch, useAppSelector } from "redux/hooks";
@@ -9,9 +13,12 @@ import styles from "./CustomerInformationCard.module.css";
 
 export default function CustomerInformationCard() {
   const { t } = useTranslation();
-  const { orderType } = useAppSelector(selectCart);
+  const { orderType, customerName, phone } = useAppSelector(selectCart);
   const dispatch = useAppDispatch();
-  const customerName = useAppSelector((state) => state.order.customerName);
+
+  const setPhone = (value: string) => {
+    dispatch(updatePhone(value));
+  };
 
   return (
     orderType !== OrderType.Gift && (
@@ -30,7 +37,7 @@ export default function CustomerInformationCard() {
                 }}
               />
             </Form.Item>
-            <ProPhoneInput propName="phone" />
+            <ProPhoneInput propName="phone" value={phone} onChange={setPhone} />
           </div>
         </ProInputCard>
       </>

src/pages/checkout/components/GiftCard.tsx

@@ -11,9 +11,11 @@ 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";
+import { GiftType } from "components/CustomBottomSheet/GiftTypeBottomSheet";
 
 export function GiftCard() {
   const { t } = useTranslation();
@@ -28,13 +30,34 @@ export function GiftCard() {
   const totalItems = useMemo(() => {
     return items.length || 0;
   }, [items]);
+  const [isGiftAmountBottomSheetOpen, setIsGiftAmountBottomSheetOpen] =
+    useState(false);
+
+  console.log(giftDetails?.giftType);
 
   return (
     <>
       <ProInputCard title={t("address.giftDetails")}>
-        <div className={styles.orderNotes}>
-          <Image src={currentCard?.imageURL} height={42} width={64} style={{height: 42, width: 64}} />
-          <div style={{ display: "flex", flexDirection: "column", gap: 4, width: "100%" }}>
+        <div
+          className={styles.orderNotes}
+          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,
@@ -88,9 +111,72 @@ export function GiftCard() {
           </div>
           {isRTL ? <BackIcon iconSize={24} /> : <NextIcon iconSize={24} />}
         </div>
+
         <Divider style={{ margin: "10px 0" }} />
 
-        {giftDetails?.giftType === "items" && (
+        {(giftDetails?.giftType === GiftType.Vouchers ||
+          giftDetails?.giftType === 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>
+            {giftDetails?.giftType === GiftType.ItemsAndVouchers && (
+              <Divider style={{ margin: "10px 0" }} />
+            )}
+          </>
+        )}
+
+        {(giftDetails?.giftType === GiftType.Items ||
+          giftDetails?.giftType === GiftType.ItemsAndVouchers) && (
           <div
             style={{
               display: "flex",
@@ -126,57 +212,11 @@ export function GiftCard() {
             {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/components/pickupEstimate/BottomSheet.tsx

@@ -0,0 +1,31 @@
+import { ProBottomSheet } from "components/ProBottomSheet/ProBottomSheet.tsx";
+import PickupEstimateContent from "pages/checkout/components/pickupEstimate/Content.tsx";
+import { useTranslation } from "react-i18next";
+
+interface PickupEstimateBottomSheetProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSave: (date: string, time: string) => void;
+}
+
+export function PickupEstimateBottomSheet({
+  isOpen,
+  onClose,
+  onSave,
+}: PickupEstimateBottomSheetProps) {
+  const { t } = useTranslation();
+
+  return (
+    <ProBottomSheet
+      isOpen={isOpen}
+      onClose={onClose}
+      title={t("checkout.setPickupTime")}
+      showCloseButton={true}
+      initialSnap={1}
+      height={550}
+      snapPoints={[550]}
+    >
+      <PickupEstimateContent onSave={onSave} onClose={onClose} />
+    </ProBottomSheet>
+  );
+}

src/pages/checkout/components/pickupEstimate/Content.tsx

@@ -0,0 +1,340 @@
+import { Button } from "antd";
+import dayjs from "dayjs";
+import { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import Picker from "components/WheelPicker";
+import { SERVER_DATE_FORMAT } from "utils/constants.ts";
+
+interface PickupEstimateContentProps {
+  onSave: (date: string, time: string) => void;
+  onClose: () => void;
+}
+
+export default function PickupEstimateContent({
+  onSave,
+  onClose,
+}: PickupEstimateContentProps) {
+  const { t } = useTranslation();
+
+  // Generate day options: Today, Tomorrow, then formatted dates (90 days total for scrolling)
+  const dayOptions = useMemo(() => {
+    const options = [];
+    const today = dayjs();
+
+    // Today
+    options.push({
+      value: "today",
+      label: "Today",
+      date: today.format(SERVER_DATE_FORMAT),
+    });
+
+    // Tomorrow
+    options.push({
+      value: "tomorrow",
+      label: "Tomorrow",
+      date: today.add(1, "day").format(SERVER_DATE_FORMAT),
+    });
+
+    // Next days with formatted dates (up to 90 days total for smooth scrolling)
+    for (let i = 2; i < 90; i++) {
+      const date = today.add(i, "day");
+      const formatted = date.toDate().toLocaleDateString("en-US", {
+        weekday: "long",
+        month: "long",
+        day: "numeric",
+      });
+      options.push({
+        value: `day-${i}`,
+        label: formatted,
+        date: date.format(SERVER_DATE_FORMAT),
+      });
+    }
+
+    return options;
+  }, []);
+
+  // Generate time options: Now, then time slots (5 items total)
+  const timeOptions = useMemo(() => {
+    const options = [];
+    const now = dayjs();
+
+    // Now option
+    options.push({
+      value: "now",
+      label: "Now",
+      time: now.format("HH:mm"),
+    });
+
+    // Calculate next 15-minute interval (always the next one, even if we're on a boundary)
+    const currentMinute = now.minute();
+    let nextMinute = Math.floor(currentMinute / 15) * 15 + 15;
+    let nextHour = now.hour();
+
+    if (nextMinute >= 60) {
+      nextMinute = 0;
+      nextHour += 1;
+      if (nextHour >= 24) {
+        nextHour = 0;
+      }
+    }
+
+    // Generate next 4 time slots (15-minute intervals)
+    let hour = nextHour;
+    let minute = nextMinute;
+
+    for (let i = 0; i < 96; i++) {
+      const time = dayjs().hour(hour).minute(minute).second(0);
+      const formatted = time.format("h:mm A");
+
+      options.push({
+        value: `time-${i}`,
+        label: formatted,
+        time: time.format("HH:mm"),
+      });
+
+      // Calculate next interval
+      minute += 15;
+      if (minute >= 60) {
+        minute = 0;
+        hour += 1;
+        if (hour >= 24) {
+          hour = 0;
+        }
+      }
+    }
+
+    return options;
+  }, []);
+
+  const [selectedDay, setSelectedDay] = useState<string>("today");
+  const [selectedTime, setSelectedTime] = useState<string>("now");
+
+  const handlePickerChange = (value: { day?: string; time?: string }) => {
+    console.log(value);
+    if (value.day !== undefined) {
+      setSelectedDay(value.day);
+    }
+    if (value.time !== undefined) {
+      setSelectedTime(value.time);
+    }
+  };
+
+  const handleSave = () => {
+    const selectedDayOption = dayOptions.find(
+      (opt) => opt.value === selectedDay,
+    );
+    const selectedTimeOption = timeOptions.find(
+      (opt) => opt.value === selectedTime,
+    );
+
+    if (selectedDayOption && selectedTimeOption) {
+      onSave(selectedDayOption.date, selectedTimeOption.time);
+      onClose();
+    }
+  };
+
+  const handleTouchStart = (e: React.TouchEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+  };
+
+  const handleTouchMove = (e: React.TouchEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+  };
+
+  const handleTouchEnd = (e: React.TouchEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+  };
+
+  const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+  };
+
+  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+  };
+
+  const handleMouseUp = (e: React.MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+  };
+
+  const handleWheel = (e: React.WheelEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+  };
+
+  return (
+    <>
+      <div
+        style={{
+          marginTop: 30,
+          display: "flex",
+          flexDirection: "column",
+        }}
+        onTouchStart={handleTouchStart}
+        onTouchMove={handleTouchMove}
+        onTouchEnd={handleTouchEnd}
+        onMouseDown={handleMouseDown}
+        onMouseMove={handleMouseMove}
+        onMouseUp={handleMouseUp}
+        onWheel={handleWheel}
+      >
+        {/* Day and Time Pickers - Same Row */}
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "row",
+            gap: "8px",
+            marginBottom: 30,
+          }}
+        >
+          {/* Day Picker */}
+          <div style={{ width: "60%" }}>
+            <Picker
+              value={{ day: selectedDay }}
+              onChange={(value) => handlePickerChange(value)}
+              width="100%"
+              height={250}
+              style={{
+                position: "relative",
+                display: "flex",
+                backgroundColor: "var(--secondary-background)",
+                overflow: "hidden",
+                width: "100%",
+                height: 250,
+                border: "none",
+                borderRadius: "8px",
+              }}
+              aria-selected={false}
+            >
+              <Picker.Column
+                name="day"
+                style={{
+                  flex: 1,
+                  backgroundColor: "var(--secondary-background)",
+                }}
+              >
+                {dayOptions.map((option) => (
+                  <Picker.Item key={option.value} value={option.value}>
+                    {({ selected }) => (
+                      <div
+                        style={{
+                          fontWeight: selected ? "600" : "400",
+                          color: selected
+                            ? "var(--foreground)"
+                            : "var(--text-color-gray)",
+                          fontSize: "16px",
+                          padding: "9px 0",
+                          textAlign: "center",
+                          opacity: selected ? 1 : 0.7,
+                          transition: "all 0.2s ease",
+                          lineHeight: "1.2",
+                          height: 36,
+                          width: "100%",
+                          backgroundColor: selected
+                            ? "var(--background)"
+                            : "transparent",
+                          borderRadius: selected ? "4px" : "0",
+                          margin: selected ? "2px 4px" : "0",
+                        }}
+                      >
+                        {option.label}
+                      </div>
+                    )}
+                  </Picker.Item>
+                ))}
+              </Picker.Column>
+            </Picker>
+          </div>
+
+          {/* Time Picker */}
+          <div style={{ width: "40%" }}>
+            <Picker
+              value={{ time: selectedTime }}
+              onChange={(value) => handlePickerChange(value)}
+              width="100%"
+              height={250}
+              style={{
+                position: "relative",
+                display: "flex",
+                backgroundColor: "var(--secondary-background)",
+                overflow: "hidden",
+                width: "100%",
+                height: 250,
+                border: "none",
+                borderRadius: "8px",
+              }}
+              aria-selected={false}
+            >
+              <Picker.Column
+                name="time"
+                style={{
+                  flex: 1,
+                  backgroundColor: "var(--secondary-background)",
+                }}
+              >
+                {timeOptions.map((option) => (
+                  <Picker.Item key={option.value} value={option.value}>
+                    {({ selected }) => (
+                      <div
+                        style={{
+                          fontWeight: selected ? "600" : "400",
+                          color: selected
+                            ? "var(--foreground)"
+                            : "var(--text-color-gray)",
+                          fontSize: "16px",
+                          padding: "9px 0",
+                          textAlign: "center",
+                          opacity: selected ? 1 : 0.7,
+                          transition: "all 0.2s ease",
+                          lineHeight: "1.2",
+                          height: 36,
+                          width: "100%",
+                          backgroundColor: selected
+                            ? "var(--background)"
+                            : "transparent",
+                          borderRadius: selected ? "4px" : "0",
+                          margin: selected ? "2px 4px" : "0",
+                        }}
+                      >
+                        {option.label}
+                      </div>
+                    )}
+                  </Picker.Item>
+                ))}
+              </Picker.Column>
+            </Picker>
+          </div>
+        </div>
+      </div>
+
+      {/* Save Button */}
+      <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+        <Button
+          type="primary"
+          onClick={handleSave}
+          style={{
+            width: "100%",
+            height: 48,
+            fontSize: 16,
+            fontWeight: 600,
+            backgroundColor: "var(--primary)",
+            border: "none",
+          }}
+        >
+          {t("checkout.scheduled")}
+        </Button>
+        <Button
+          onClick={handleSave}
+          style={{
+            width: "100%",
+            height: 48,
+            fontSize: 16,
+            fontWeight: 600,
+            border: "1px solid ##C0BFC4",
+          }}
+        >
+          {t("checkout.pickupNow")}
+        </Button>
+      </div>
+    </>
+  );
+}

src/pages/checkout/components/pickupEstimate/Dialog.tsx

@@ -0,0 +1,27 @@
+import { Modal } from "antd";
+import { useTranslation } from "react-i18next";
+
+import PickupEstimateContent from "pages/checkout/components/pickupEstimate/Content.tsx";
+
+interface PickupEstimateDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSave: (date: string, time: string) => void;
+}
+
+export function PickupEstimateDialog({ isOpen, onClose, onSave }: PickupEstimateDialogProps) {
+  const { t } = useTranslation();
+
+  return (
+    <Modal
+      title={t("checkout.pickupEstimate")}
+      open={isOpen}
+      onCancel={onClose}
+      footer={[]}
+      width={500}
+      destroyOnHidden
+    >
+      <PickupEstimateContent onSave={onSave} onClose={onClose} />
+    </Modal>
+  );
+}

src/pages/checkout/components/pickupEstimate/TimeEstimateCard.module.css

@@ -0,0 +1,27 @@
+.timeButton {
+  height: 32px !important;
+  width: 100% !important;
+  border-radius: 888px !important;
+  font-weight: 600 !important;
+  font-size: 16 !important;
+  border: none;
+  background-color: rgba(95, 108, 123, 0.05);
+  color: rgba(95, 108, 123, 1);
+  box-shadow: none;
+}
+
+.toggleButton {
+  height: 32px !important;
+  border-radius: 888px !important;
+  font-weight: 600 !important;
+  font-size: 16 !important;
+  border: none;
+  background-color: rgba(95, 108, 123, 0.05);
+  color: rgba(95, 108, 123, 1);
+  box-shadow: none;
+}
+
+.active {
+  background-color: rgba(255, 183, 0, 0.12) !important;
+  color: rgba(204, 147, 0, 1) !important;
+}

src/pages/checkout/components/pickupEstimate/TimeEstimateCard.tsx

@@ -0,0 +1,106 @@
+import useFormInstance from "antd/es/form/hooks/useFormInstance";
+import TimeIcon from "components/Icons/order/TimeIcon";
+import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
+import ProText from "components/ProText";
+import {
+  selectCart,
+  updatePickupDate,
+  updatePickupTime,
+} from "features/order/orderSlice";
+import useBreakPoint from "hooks/useBreakPoint.ts";
+import { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { useAppDispatch, useAppSelector } from "redux/hooks";
+import { PickupEstimateDialog } from "./Dialog";
+import { PickupEstimateBottomSheet } from "./BottomSheet";
+
+export default function PickupTimeCard() {
+  const dispatch = useAppDispatch();
+  const { t } = useTranslation();
+  const form = useFormInstance();
+  const { isDesktop } = useBreakPoint();
+  const { pickupTime, pickupDate } = useAppSelector(selectCart);
+  const [isEstimateTimeOpen, setIsEstimateTimeOpen] = useState(false);
+
+  const handleEstimateTimeSave = (date: string, time: string) => {
+    form.setFieldsValue({ pickupTime: time, pickupDate: date });
+    dispatch(updatePickupTime(time));
+    dispatch(updatePickupDate(date));
+  };
+
+  const handleEstimateTimeClose = () => {
+    setIsEstimateTimeOpen(false);
+  };
+
+  useEffect(() => {
+    form.setFieldsValue({ pickupTime, pickupDate });
+  }, [pickupTime, pickupDate]);
+
+  return (
+    <>
+      <ProInputCard
+        title={t("checkout.pickup")}
+        titleRight={
+          <ProText
+            onClick={() => setIsEstimateTimeOpen(true)}
+            style={{
+              fontWeight: 500,
+              fontStyle: "Medium",
+              fontSize: 14,
+              lineHeight: "140%",
+              letterSpacing: "0%",
+              color: "#FFB700",
+              cursor: "pointer",
+            }}
+          >
+            {t("checkout.change")}
+          </ProText>
+        }
+      >
+        <span style={{ position: "relative", top: 3 }}>
+          <TimeIcon color="#777580" />
+        </span>
+        <ProText
+          style={{
+            fontWeight: 400,
+            fontStyle: "Regular",
+            fontSize: 16,
+            lineHeight: "140%",
+            letterSpacing: "0%",
+            color: "#777580",
+            padding: "0 2px 0 4px",
+          }}
+        >
+          {pickupTime}
+        </ProText>
+        <ProText
+          style={{
+            fontWeight: 400,
+            fontStyle: "Regular",
+            fontSize: 16,
+            lineHeight: "140%",
+            letterSpacing: "0%",
+            color: "#777580",
+            padding: "0 2px",
+          }}
+        >
+          (Est. 10-15 minutes)
+        </ProText>
+      </ProInputCard>
+
+      {isDesktop ? (
+        <PickupEstimateDialog
+          isOpen={isEstimateTimeOpen}
+          onClose={handleEstimateTimeClose}
+          onSave={handleEstimateTimeSave}
+        />
+      ) : (
+        <PickupEstimateBottomSheet
+          isOpen={isEstimateTimeOpen}
+          onClose={handleEstimateTimeClose}
+          onSave={handleEstimateTimeSave}
+        />
+      )}
+    </>
+  );
+}

src/pages/checkout/hooks/types.ts

@@ -1,6 +1,3 @@
-import { Variant } from "pages/orders/types";
-import { Extra3 } from "utils/types/appTypes";
-
 export interface OrderDetails {
   orderItems: OrderItem[];
   order: Order;
@@ -18,7 +15,18 @@ export interface OrderDetails {
   itemsImagePrefix: string;
 }
 
-export interface OrderItem {
+type OrderVariant = {
+  id: number;
+  price: number;
+  options: string;
+  local_name: string;
+  optionsArray: { id: number; name: string }[];
+  OptionsList: string;
+  extras: any[];
+};
+
+export type OrderItem = {
+  type: "OrderItem";
   id: number;
   is_loyalty_used: number;
   no_of_stamps_give: number;
@@ -31,16 +39,19 @@ export interface OrderItem {
   image: string;
   imageName: string;
   variantName: string;
-  variantLocalName?: string;
+  variantLocalName: string;
   extras: any[];
+  descriptionEN: string;
+  descriptionAR: string;
   itemline: string;
   itemlineAR: string;
   itemlineAREN: string;
-  extrasgroups: any[];
+  extrasgroups: string[];
+  extragroupnew: any[];
   itemComment: string;
-  variant?: Variant;
+  variant: OrderVariant;
   itemExtras: any[];
-  AvaiilableVariantExtras: Extra3[];
+  AvaiilableVariantExtras: any[];
   isPrinted: number;
   category_id: number;
   pos_order_id: string;
@@ -56,7 +67,7 @@ export interface OrderItem {
   pricing_method: string;
   is_already_paid: number;
   hash_item: string;
-}
+};
 
 export interface Order {
   id: number;
@@ -246,5 +257,6 @@ export enum OrderType {
   ToRoom = "room",
   ToOffice = "office",
   Booking = "booking",
-  Pay = "pay"
+  Pay = "pay",
+  Redeem = "redeem",
 }

src/pages/checkout/hooks/useGidtAmount.ts

@@ -0,0 +1,82 @@
+import { message } from "antd";
+import {
+  clearCart,
+  selectCart,
+  selectGrandTotal,
+} from "features/order/orderSlice";
+import { useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { useNavigate, useParams } from "react-router-dom";
+import { useCreateGiftAmountMutation } from "redux/api/others";
+import { useAppDispatch, useAppSelector } from "redux/hooks";
+import { PAYMENT_CONFIRMATION_URL } from "utils/constants";
+
+export default function useGidtAmount() {
+  const dispatch = useAppDispatch();
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+  const { subdomain } = useParams();
+  const restaurantID = localStorage.getItem("restaurantID");
+  const { giftDetails } = useAppSelector(selectCart);
+
+  const orderPrice = useAppSelector(selectGrandTotal);
+
+  const [createGiftAmount] = useCreateGiftAmountMutation();
+
+  const handleCreateGiftAmount = useCallback(() => {
+    const loadingMessageKey = "create-order-loader";
+    message.loading({
+      content: t("order.creatingOrder", {
+        defaultValue: "Creating order...",
+      }),
+      key: loadingMessageKey,
+      duration: 0,
+    });
+
+    createGiftAmount({
+      sender_name: giftDetails?.senderName,
+      sender_phone: giftDetails?.senderPhone,
+      sender_email: giftDetails?.senderEmail,
+      receiver_name: giftDetails?.receiverName,
+      receiver_phone: giftDetails?.receiverPhone,
+      special_message: giftDetails?.message,
+      keep_name_secret: giftDetails?.isSecret,
+      restaurant_id: restaurantID,
+      order_amount: orderPrice,
+      gift_card_id: giftDetails?.cardId,
+    }).then((res: unknown) => {
+      message.destroy(loadingMessageKey);
+      const mutationResult = res as {
+        data?: { result?: { orderID?: string } };
+        error?: { data?: { message?: string } };
+      };
+      if (mutationResult.error)
+        message.error(
+          mutationResult.error.data?.message || t("order.createOrderFailed"),
+        );
+      else {
+        const redirectMessageKey = "order-redirect-loader";
+
+        message.loading({
+          content: t("order.redirectingToPayment", {
+            defaultValue: "Redirecting to payment...",
+          }),
+          key: redirectMessageKey,
+          duration: 0,
+        });
+        window.location.href = `${PAYMENT_CONFIRMATION_URL}/${mutationResult.data?.result?.orderID}`;
+        dispatch(clearCart());
+      }
+    });
+  }, [
+    createGiftAmount,
+    orderPrice,
+    giftDetails,
+    restaurantID,
+    t,
+    navigate,
+    subdomain,
+    dispatch,
+  ]);
+  return { handleCreateGiftAmount };
+}

src/pages/checkout/hooks/useOrder.ts

@@ -2,6 +2,8 @@ import { message } from "antd";
 import {
   clearCart,
   selectCart,
+  selectCartTotal,
+  selectDiscountTotal,
   selectGrandTotal,
   selectHighestPricedLoyaltyItem,
 } from "features/order/orderSlice";
@@ -39,12 +41,16 @@ export default function useOrder() {
     pickupTime,
     pickupDate,
     pickupType,
+    giftDetails,
     order,
-  } = useAppSelector(selectCart);
+    restaurant,
+  } = useAppSelector((state) => state.order);
   const highestLoyaltyItem = useAppSelector(selectHighestPricedLoyaltyItem);
   const { useLoyaltyPoints } = useAppSelector(selectCart);
 
   const orderPrice = useAppSelector(selectGrandTotal);
+  const subtotal = useAppSelector(selectCartTotal);
+  const discountAmount = useAppSelector(selectDiscountTotal);
 
   const [createOrder] = useCreateOrderMutation();
 
@@ -70,7 +76,7 @@ export default function useOrder() {
     });
 
     createOrder({
-      phone: mobilenumber || phone || order?.senderPhone,
+      phone: mobilenumber || phone || giftDetails?.senderPhone,
       comment: specialRequest,
       delivery_method: getDeliveryMethod(),
       timeslot: "",
@@ -87,12 +93,11 @@ export default function useOrder() {
         order_item_comment: i.comment || "",
         variant: (i.variant as Variant)?.id || "",
       })),
-      office_no: order?.officeNumber || "",
-      room_no: order?.roomNumber || "",
-      vatvalue: 0,
+      office_no: order?.officeNumber,
+      room_no: order?.roomNumber,
       ...(discount.isDiscount ? { couponID: coupon } : {}),
       ...(discount.isGift ? { discountGiftCode: coupon } : {}),
-      discountAmount: discount.value || 0,
+      discountAmount: discountAmount || 0,
       paymentType: "cod",
       uuid: user_uuid,
       pickup_comments: "",
@@ -110,15 +115,25 @@ export default function useOrder() {
           ? `${location?.lat},${location?.lng}`
           : "",
       delivery_address: location?.address,
+      vatvalue: ((restaurant?.vat || 0) / 100) * (subtotal - discountAmount),
+      taxes:
+        restaurant?.taxes
+          ?.filter((t) => t.is_active === 1)
+          .map((t) => ({
+            tax_id: t.id,
+            percentage: t.percentage,
+            amount:
+              ((Number(t.percentage) || 0) / 100) * (subtotal - discountAmount),
+          })) || [],
       ...(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,
           }
         : {}),
@@ -135,8 +150,9 @@ export default function useOrder() {
           );
         else {
           const redirectMessageKey = "order-redirect-loader";
+         
           if (
-            orderType === OrderType.Gift &&
+            localStorage.getItem("fascano_payment_method")?.toString() === '"thawani"' &&
             mutationResult.data?.result?.orderID
           ) {
             message.loading({
@@ -173,7 +189,7 @@ export default function useOrder() {
     orderType,
     restaurantID,
     items,
-    order,
+    giftDetails,
     discount.isDiscount,
     discount.isGift,
     discount.value,
@@ -187,6 +203,14 @@ export default function useOrder() {
     location?.lat,
     location?.lng,
     location?.address,
+    order,
+    pickupTime,
+    pickupDate,
+    plateCar,
+    pickupType,
+    discountAmount,
+    subtotal,
+    restaurant,
     t,
     navigate,
     subdomain,

src/pages/checkout/page.tsx

@@ -1,36 +1,51 @@
-import { Form, Layout } from "antd";
 import InputCard from "components/InputCard";
 import OrderSummary from "components/OrderSummary/OrderSummary";
 import PaymentMethods from "components/PaymentMethods/PaymentMethods";
 import ProHeader from "components/ProHeader/ProHeader";
-import { selectCart, updateCollectionMethod } from "features/order/orderSlice";
+import { selectCart } from "features/order/orderSlice";
 import { useTranslation } from "react-i18next";
-import { useAppDispatch, useAppSelector } from "redux/hooks";
+import { useAppSelector } from "redux/hooks";
 import styles from "../address/address.module.css";
 import { AddressSummary } from "./components/AddressSummary";
 import CheckoutButton from "./components/CheckoutButton";
 import { GiftCard } from "./components/GiftCard";
 import { OrderType } from "./hooks/types";
-import RewardWaiterCard from "pages/cart/components/RewardWaiterCard";
-import ProInputCard from "components/ProInputCard/ProInputCard";
-import ProRatioGroups from "components/ProRatioGroups/ProRatioGroups";
 import CouponCard from "pages/cart/components/CouponCard";
 import BriefMenuCard from "./components/BriefMenuCard";
 import CustomerInformationCard from "./components/CustomerInformationCard";
-import Ads1 from "components/Ads/Ads1";
-import TimeEstimateCard from "pages/cart/components/timeEstimate/TimeEstimateCard";
 import { useEffect } from "react";
+import { CarCard } from "./components/CarCard";
+import { CollectWay } from "./components/CollectWay/CollectWay";
+import PickupTimeCard from "./components/pickupEstimate/TimeEstimateCard";
+import VoucherSummary from "pages/redeem/components/VoucherSummary/VoucherSummary";
+import EarnLoyaltyPointsCard from "pages/cart/components/earnLoyaltyPointsCard/EarnLoyaltyPointsCard";
+import { Form, Layout } from "antd";
 
 export default function CheckoutPage() {
   const { t } = useTranslation();
   const [form] = Form.useForm();
-  const { phone, order, orderType, collectionMethod, coupon } =
-    useAppSelector(selectCart);
+  const {
+    phone,
+    order,
+    orderType,
+    collectionMethod,
+    coupon,
+    customerName,
+    tip,
+    restaurant,
+  } = useAppSelector(selectCart);
   const { token } = useAppSelector((state) => state.auth);
-  const dispatch = useAppDispatch();
   useEffect(() => {
-    form.setFieldsValue({ coupon, collectionMethod });
-  }, [form, phone]);
+    form.setFieldsValue({
+      coupon,
+      collectionMethod,
+      phone,
+      customerName,
+      tip,
+      officeNumber: order?.officeNumber,
+      roomNumber: order?.roomNumber,
+    });
+  }, [form, phone, coupon, collectionMethod, customerName, tip]);
 
   return (
     <>
@@ -44,8 +59,11 @@ export default function CheckoutPage() {
         <Layout>
           <ProHeader>{t("checkout.title")}</ProHeader>
           <Layout.Content className={styles.checkoutContainer}>
+            {orderType === OrderType.Pickup && <CollectWay />}
             {(orderType === OrderType.Pickup ||
-              orderType === OrderType.ScheduledOrder) && <TimeEstimateCard />}
+              orderType === OrderType.ScheduledOrder) && <PickupTimeCard />}
+
+            {orderType === OrderType.Pickup && <CarCard />}
             {orderType === OrderType.Gift && <GiftCard />}
             <PaymentMethods />
             {!token && <CustomerInformationCard />}
@@ -56,6 +74,8 @@ export default function CheckoutPage() {
                 name="roomNumber"
                 placeholder={t("address.roomNo")}
                 value={order?.roomNumber}
+                required
+                reuireqMessage={t("address.pleaseEnterRoomNumber")}
               />
             )}
             {orderType === OrderType.ToOffice && (
@@ -64,17 +84,22 @@ export default function CheckoutPage() {
                 name="officeNumber"
                 placeholder={t("address.officeNo")}
                 value={order?.officeNumber}
+                required
+                reuireqMessage={t("address.pleaseEnterOfficeNumber")}
               />
             )}
+            {orderType === OrderType.Redeem && <VoucherSummary />}
             {/* {orderType === OrderType.Gift && <GiftCard />} */}
             {/* <RoomDetails />
             <OfficeDetails /> */}
             {/* <GiftDetails /> */}
             {/* <BriefMenu /> */}
+            {orderType !== OrderType.Redeem && orderType !== OrderType.Gift && (
               <CouponCard />
+            )}
 
             {/* Collection Method */}
-            {orderType === OrderType.Pickup && (
+            {/* {orderType === OrderType.Pickup && (
               <ProInputCard title={t("cart.collectionMethod")}>
                 <Form.Item
                   name="collectionMethod"
@@ -106,12 +131,21 @@ export default function CheckoutPage() {
                   />
                 </Form.Item>
               </ProInputCard>
-            )}
+            )} */}
 
             {/* Reward Your Waiter */}
+            {/* {orderType !== OrderType.Redeem && orderType !== OrderType.Gift && (
               <RewardWaiterCard />
+            )} */}
+            {orderType !== OrderType.Redeem &&
+            orderType !== OrderType.Gift &&
+            restaurant?.is_loyalty_enabled === 1 &&
+            (restaurant?.customer_loyalty_points ?? 0) >
+              (restaurant?.loyalty_stamps ?? 0) ? (
+              <EarnLoyaltyPointsCard />
+            ) : null}
             <BriefMenuCard />
-            <Ads1 />
+            {/* <Ads1 /> */}
             <OrderSummary />
           </Layout.Content>
 

src/pages/login/page.tsx

@@ -13,13 +13,14 @@ import "react-phone-input-2/lib/style.css";
 import { useNavigate, useParams } from "react-router-dom";
 import { useSendOtpMutation } from "redux/api/auth";
 import { useGetRestaurantDetailsQuery } from "redux/api/others";
-import { useAppSelector } from "redux/hooks";
+import { useAppDispatch, useAppSelector } from "redux/hooks";
 import { colors, DisabledColor, ProGray1 } from "ThemeConstants";
 import { default_image } from "utils/constants";
 import styles from "./login.module.css";
 import { Layout } from "antd";
 import ProHeader from "components/ProHeader/ProHeader";
 import useBreakPoint from "hooks/useBreakPoint";
+import { updateCustomerName } from "features/order/orderSlice";
 
 export default function LoginPage() {
   const { t } = useTranslation();
@@ -32,7 +33,7 @@ export default function LoginPage() {
     skip: !subdomain,
   });
   const { isTablet } = useBreakPoint();
-
+  const dispatch = useAppDispatch();
   // const [phone, setPhone] = useState<string>("");
   const [selectedDate, setSelectedDate] = useState<string>("");
   const [isOpen, setIsOpen] = useState(false);
@@ -113,6 +114,10 @@ export default function LoginPage() {
                   height: 50,
                   fontSize: 14,
                 }}
+                onBlur={(e) => {
+                  dispatch(updateCustomerName(e.target.value));
+                }}
+                disabled={isLoading}
               />
             </Form.Item>
 

src/pages/menu/components/AddToCartButton/AddToCartButton.module.css

@@ -1,25 +1,93 @@
-.plusIcon {
-  position: relative;
-  top: -1px;
+.quantityControls {
+  display: flex;
+  align-items: center;
+  background-color: var(--background);
+  border-radius: 888px;
+  width: fit-content;
 }
 
-.addButton {
-  position: absolute;
-  z-index: 1;
+.quantityLabel {
+  font-size: 14px;
+  color: var(--secondary-color);
+  font-weight: 500;
+}
+
+.quantityInputContainer {
+  display: flex;
+  padding: 0 1px;
+  align-items: center;
+  border-radius: 888px;
+  width: 90px;
+  height: 32px;
+}
+
+.quantityButton {
+  padding: 0;
+  width: 28px !important;
+  height: 28px !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--secondary-background);
+  background-color: var(--primary);
+  border-radius: 50%;
+  transition: all 0.2s ease;
+}
+
+.quantityInput {
+  text-align: center;
+  border: none;
+  box-shadow: none;
+  font-size: 16px;
   font-weight: 600;
-  border: 0;
-  color: #fff;
-  font-size: 1rem;
+  padding: 0;
 }
 
-.actionRect {
-  fill: var(--background) !important;
+.removeButton {
+  padding: 4px 0;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  width: 30px;
 }
 
-.addButton svg rect {
-  fill: var(--background) !important;
+.deleteButtonContainer {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  border-radius: 50%;
+  padding: 8px;
+  cursor: pointer;
+  transition: all 0.3s ease;
 }
 
-:global(.darkApp) .addButton rect {
-  fill: var(--background) !important;
+.deleteIcon {
+  font-size: 18px;
+  color: var(--secondary-color);
+}
+
+.cartItemActions :global(.ant-input-number-outlined) {
+  border: none;
+  width: 40px;
+  background-color: inherit;
+  text-align: center;
+}
+
+.cartItemActions :global(.ant-input-number-input) {
+  text-align: center !important;
+}
+
+.plusIcon {
+  margin-bottom: 1px;
+  color: var(--secondary-background);
+}
+
+.minusIcon {
+  color: var(--secondary-foreground);
+}
+
+.deleteIcon {
+  position: relative;
+  right: 1px;
 }

src/pages/menu/components/AddToCartButton/AddToCartButton.tsx

@@ -1,5 +1,5 @@
 import { MinusOutlined, PlusOutlined } from "@ant-design/icons";
-import { Button, message } from "antd";
+import { Button, InputNumber, message } from "antd";
 import { useTranslation } from "react-i18next";
 import { useNavigate, useParams } from "react-router-dom";
 import { useGetRestaurantDetailsQuery } from "redux/api/others";
@@ -8,7 +8,7 @@ import { useAppSelector, useAppDispatch } from "redux/hooks";
 import { Product } from "utils/types/appTypes";
 import NextIcon from "components/Icons/NextIcon";
 import { addItem, removeItem, updateQuantity } from "features/order/orderSlice";
-import ProText from "components/ProText";
+import PlusIcon from "components/Icons/PlusIcon";
 
 export function AddToCartButton({ item }: { item: Product }) {
   const { t } = useTranslation();
@@ -38,7 +38,7 @@ export function AddToCartButton({ item }: { item: Product }) {
   // Find basic cart item (no variants/extras) - the one added by quick add
   const basicCartItem = cartItemsForProduct.find(
     (cartItem) =>
-      (!cartItem.variant || cartItem.variant === "None") &&
+      !cartItem.variant &&
       (!cartItem.extras || cartItem.extras.length === 0) &&
       (!cartItem.extrasgroupnew || cartItem.extrasgroupnew.length === 0),
   );
@@ -67,7 +67,7 @@ export function AddToCartButton({ item }: { item: Product }) {
             price: item.price,
             image: item.image,
             description: item.description,
-            variant: "None",
+            variant: undefined,
             isHasLoyalty: item.isHasLoyalty,
             no_of_stamps_give: item.no_of_stamps_give,
           },
@@ -145,7 +145,7 @@ export function AddToCartButton({ item }: { item: Product }) {
             price: item.price,
             image: item.image,
             description: item.description,
-            variant: "None",
+            variant: undefined,
             isHasLoyalty: item.isHasLoyalty,
             no_of_stamps_give: item.no_of_stamps_give,
           },
@@ -158,24 +158,24 @@ export function AddToCartButton({ item }: { item: Product }) {
     }
   };
 
-  return isInCart && !hasOptions ? (
-    <>
+  return (
     <div
-        className={styles.addButton}
-        style={{
-          width: 90,
-          height: 30,
-          position: "absolute",
-          bottom: 3,
-          [isRTL ? "left" : "right"]: 1,
-          background: "#FAFAFA",
-          borderRadius: 888,
+      className={styles.cartItemActions}
+      onClick={(e) => {
+        e.stopPropagation();
+        e.preventDefault;
       }}
     >
+      {isInCart && !hasOptions ? (
+        <>
+          <div className={styles.quantityControls}>
+            <div className={styles.quantityInputContainer}>
               <Button
                 shape="circle"
                 iconPlacement="start"
-          icon={<MinusOutlined title="minus" style={{ color: "black" }} />}
+                icon={
+                  <MinusOutlined title="minus" style={{ color: "black" }} />
+                }
                 size="small"
                 onClick={handleMinusClick}
                 className={styles.addButton}
@@ -183,57 +183,49 @@ export function AddToCartButton({ item }: { item: Product }) {
                   backgroundColor: "white",
                   width: 28,
                   height: 28,
-            position: "absolute",
-            bottom: 1,
-            [isRTL ? "left" : "right"]: 60,
-            minWidth: 28,
                   border: "none",
                 }}
               />
-        <ProText
-          style={{
-            position: "absolute",
-            bottom: 7,
-            [isRTL ? "left" : "right"]: 45,
-            fontSize: 14,
-            fontWeight: 700,
-            fontStyle: "Bold",
-            lineHeight: "100%",
-            letterSpacing: "0.06px",
-            textAlign: "center",
-            verticalAlign: "middle",
+              <InputNumber
+                min={1}
+                max={99}
+                value={totalQuantity}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  e.preventDefault;
                 }}
-        >
-          {totalQuantity}
-        </ProText>
+                onChange={(value: number | null) =>
+                  dispatch(
+                    updateQuantity({
+                      id: item.id,
+                      uniqueId: basicCartItem?.uniqueId || "",
+                      quantity: value || 1,
+                    }),
+                  )
+                }
+                size="small"
+                controls={false}
+                className={styles.quantityInput}
+                name="id"
+              />
               <Button
                 shape="circle"
                 iconPlacement="start"
-          icon={<PlusOutlined title="plus" />}
+                icon={<PlusIcon color="#FFF" />}
                 size="small"
                 onClick={handlePlusClick}
+                disabled={totalQuantity >= 99}
                 className={styles.addButton}
                 style={{
                   backgroundColor: "#FFC600",
                   width: 28,
                   height: 28,
-            position: "absolute",
-            bottom: 1,
-            [isRTL ? "left" : "right"]: 2,
-            minWidth: 28,
                 }}
               />
             </div>
+          </div>
         </>
       ) : (
-    <div
-      style={{
-        position: "absolute",
-        bottom: -11,
-        [isRTL ? "left" : "right"]: -2,
-        borderRadius: "50%",
-      }}
-    >
         <Button
           shape="circle"
           iconPlacement="start"
@@ -246,6 +238,7 @@ export function AddToCartButton({ item }: { item: Product }) {
             )
           }
           onClick={handleClick}
+          disabled={!hasOptions && totalQuantity >= 99}
           className={styles.addButton}
           style={{
             color: "#302E3E",
@@ -253,13 +246,14 @@ export function AddToCartButton({ item }: { item: Product }) {
             width: 28,
             height: 28,
             position: "absolute",
-          bottom: 16,
-          [isRTL ? "left" : "right"]: 7,
+            [isRTL ? "left" : "right"]: -87,
+            bottom: 3,
             minWidth: 28,
             boxShadow:
               "0px 1px 2px 0px #8585851A, 0px 3px 3px 0px #85858517, -1px 7px 4px 0px #8585850D, -1px 13px 5px 0px #85858503, -2px 20px 6px 0px #85858500",
           }}
         />
+      )}
     </div>
   );
 }

src/pages/menu/components/BackButton.tsx

@@ -1,15 +1,21 @@
 import { Button } from "antd";
 import BackIcon from "components/Icons/BackIcon";
 import NextIcon from "components/Icons/NextIcon";
+import { useNavigate } from "react-router-dom";
 import { useAppSelector } from "redux/hooks";
 
 interface BackButtonProps {
-  navigateBack?: boolean; // true = use router.back(), false = just clear state
+  customRoute?: string;
 }
 
-export default function BackButton({ navigateBack = true }: BackButtonProps) {
+export default function BackButton({ customRoute }: BackButtonProps) {
+  const router = useNavigate();
   const handleBack = () => {
-    if (navigateBack) window.history.back();
+    if (customRoute) {
+      router(customRoute);
+    } else {
+      router(-1);
+    }
   };
   const { isRTL } = useAppSelector((state) => state.locale);