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,10 +287,21 @@
     "am": "ص",
     "pm": "م",
     "cannotSelectPastDate": "لا يمكنك اختيار تاريخ سابق. يرجى اختيار اليوم أو تاريخ مستقبلي.",
-    "checkRequiredFields": "يرجى التحقق من الحقول المطلوبة"
+    "checkRequiredFields": "يرجى التحقق من الحقول المطلوبة",
+    "loyalty": "ولاء",
+    "vat": "ضريبة القيمة المضافة ({{value}}%))",
+    "otherTaxes": "{{name}} ({{value}}%)"
   },
   "checkout": {
+    "addCarDetails": "إضافة تفاصيل السيارة",
+    "soTheRestaurantCanRecognizeYourCarWhenYouArrive": "لتتمكن المطعم من التعرف على سيارتك عند وصولك.",
     "customerName": "اسم العميل",
+    "paymentSummary": "ملخص الدفع",
+    "holdayGiftCard": "هدية العيد",
+    "messageIncluded": "الرسالة مضمنة",
+    "save": "حفظ",
+    "to": "ل",
+    "giftSummary": "ملخص الهدية",
     "customerInformation": "تفاصيل العميل",
     "title": "الدفع",
     "cash": "كاش",
@@ -288,7 +324,20 @@
     "pleaseEnterPhoneNumber": "يرجى إدخال رقم الهاتف",
     "viewOrder": "عرض الطلب",
     "itemsSummary": "ملخص العناصر",
-    "removeSplitBill": "إزالة التقسيم"
+    "removeSplitBill": "إزالة التقسيم",
+    "cardBalance": "رصيد البطاقة",
+    "collectAtCounter": "استلام في المكتب",
+    "collectAtParking": "استلام في الموقف",
+    "scheduled": "مجدول",
+    "pickupNow": "استلام الآن",
+    "pickupEstimate": "تقدير الاستلام",
+    "today": "اليوم",
+    "change": "تغيير",
+    "pickup": "استلام",
+    "setPickupTime": "تحديد وقت الاستلام",
+    "carPlateNumber": "رقم لوحة السيارة",
+    "noItems": "لا يوجد عناصر في السلة",
+    "thawani": "ثواني"
   },
   "address": {
     "title": "العنوان",
@@ -340,7 +389,9 @@
     "gotIt": "فهمت",
     "howItWorksDescription": "يمكنك إرسال هدية إلى أي شخص عبر التطبيق. يمكنك إرسال هدية إلى أي شخص عبر التطبيق. يمكنك إرسال هدية إلى أي شخص عبر التطبيق. يمكنك إرسال هدية إلى أي شخص عبر التطبيق. يمكنك إرسال هدية إلى أي شخص عبر التطبيق.",
     "senderEmail": "البريد الإلكتروني المرسل",
-    "save": "حفظ"
+    "save": "حفظ",
+    "pleaseEnterRoomNumber": "يرجى إدخال رقم الغرفة",
+    "pleaseEnterOfficeNumber": "يرجى إدخال رقم المكتب"
   },
   "login": {
     "singup/Login": "الدخول / التسجيل",
@@ -369,7 +420,17 @@
     "confirmOTPSuccess": "تم التحقق من رمز التحقق بنجاح"
   },
   "order": {
+    "whosPaidTheirShareSplitBill": "من قام بدفع نصيبه من الفاتورة؟",
+    "seeWhoPaidAndHowMuch": "اعرض من قام بدفع نصيبه من الفاتورة وكم يبلغ نصيبه",
+    "personHasPaid": "قام بدفع نصيبه من الفاتورة",
+    "inviteOthersToBill": "دع الآخرين يدفعوا معك",
     "title": "الطلب",
+    "newOrder": "طلب جديد",
+    "paymentSummary": "ملخص الدفع",
+    "aStaffMemberWillCollectTheCashFromYouAtYourTable": "سيجمع موظف المطعم المال منك عند طاولتك",
+    "orderSummary": "ملخص الطلب",
+    "cashPaymentConfirmed": "تم الدفع بالكاش بنجاح",
+    "callWaiter": "اتصل بالخادم",
     "yourOrder": "طلبك",
     "done": "تم",
     "yourOrderFromFascanoRestaurant": "طلبك من مطعم فاسكانو",
@@ -423,6 +484,7 @@
     "payButtonDescription": "الدفع للطلب"
   },
   "splitBill": {
+    "serviceFee": "نصيب الخدمة",
     "title": "تقسيم الفاتورة",
     "description": "تقسيم الفاتورة",
     "splitBill": "تقسيم الفاتورة",
@@ -473,7 +535,91 @@
     "yourName": "اسمك",
     "yourPhone": "رقم هاتفك",
     "keepMyNameSecret": "الاحتفاظ باسمي مخفياً",
-    "receiverInformation": "تفاصيل المستلم",  
-    "costumeAmount": "مبلغ البطاقة"
+    "receiverInformation": "تفاصيل المستلم",
+    "costumeAmount": "مبلغ البطاقة",
+    "enterCustomOucherAmount": "أدخل مبلغ البطاقة المخصص",
+    "amount": "المبلغ",
+    "eCardAmount": "مبلغ البطاقة الإلكترونية",
+    "receiverName": "اسم المستلم",
+    "edit": "تعديل",
+    "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,10 +177,34 @@
     "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",
     "emptyCart": "Cart is empty",
     "emptyCartMessage": "Looks like you haven't added any items to your cart yet. Start exploring our menu to find delicious meals!",
@@ -200,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",
@@ -272,10 +303,23 @@
     "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",
+    "messageIncluded": "Message included",
+    "to": "To",
+    "giftSummary": "Gift Summary",
     "customerInformation": "Customer Information",
     "title": "Checkout",
     "cash": "Cash",
@@ -298,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",
@@ -351,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",
@@ -380,7 +440,15 @@
     "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",
+    "cashPaymentConfirmed": "Cash payment confirmed",
+    "callWaiter": "Call Waiter",
     "yourOrder": "Your Order",
     "done": "Done",
     "yourOrderFromFascanoRestaurant": "Your order from Fascano restaurant",
@@ -435,6 +503,7 @@
     "payButtonDescription": "Pay for your order"
   },
   "splitBill": {
+    "serviceFee": "Service Fee",
     "title": "Split Bill",
     "description": "Split Bill",
     "splitBill": "Split Bill",
@@ -486,6 +555,92 @@
     "yourPhone": "Your Phone",
     "keepMyNameSecret": "Keep my name secret",
     "receiverInformation": "Receiver Information",
-    "costumeAmount": "Costume amount"
+    "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"
+  },
+  "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/Ads/Ads1.tsx

@@ -27,8 +27,12 @@ export default function Ads1({ className }: { className?: string }) {
       >
         <ProTitle
           style={{
-            marginTop: 5,
-            fontSize: 14,
+            fontFamily: "Roboto",
+            fontWeight: 600,
+            fontStyle: "SemiBold",
+            fontSize: 16,
+            lineHeight: "100%",
+            letterSpacing: "2%",
           }}
         >
           {t("home.promotion.description")}
@@ -38,6 +42,7 @@ export default function Ads1({ className }: { className?: string }) {
           style={{
             marginTop: 5,
             fontSize: 14,
+            color:"#00AC17"
           }}
         >
           {t("home.promotion.title")}

src/components/Ads/Ads2.module.css

@@ -63,7 +63,7 @@
 }
 
 .adsCard :global(.ant-card-body) {
-  padding: 8px !important;
+  padding: 10px !important;
 }
 
 :global(.darkApp) .adsCard {

src/components/Ads/Ads2.tsx

@@ -8,11 +8,7 @@ import { useTranslation } from "react-i18next";
 import { useAppSelector } from "redux/hooks";
 import styles from "./Ads2.module.css";
 
-export default function Ads2({
-  className,
-}: {
-  className?: string;
-}) {
+export default function Ads2({ className }: { className?: string }) {
   const { t } = useTranslation();
   const { isRTL } = useAppSelector((state) => state.locale);
 
@@ -26,8 +22,12 @@ export default function Ads2({
       <Card className={styles.adsCard}>
         <ProTitle
           style={{
-            marginTop: 5,
-            fontSize: 14,
+            fontFamily: "Roboto",
+            fontWeight: 600,
+            fontStyle: "SemiBold",
+            fontSize: 16,
+            lineHeight: "100%",
+            letterSpacing: "2%",
           }}
         >
           {t("home.promotion.description")}
@@ -37,9 +37,10 @@ export default function Ads2({
           style={{
             marginTop: 5,
             fontSize: 14,
+            color: "#00AC17",
           }}
         >
-          {t("home.promotion.title")}
+          {t("home.showDetails")}
         </ProText>
 
         <div

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.module.css

@@ -83,7 +83,7 @@
   color: var(--secondary-background);
 }
 
-.minusIcon{
+.minusIcon {
   color: var(--secondary-foreground);
 }
 

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,23 +17,6 @@
   width: 100%;
 }
 
-.rateServiceCard{
-  width: 100%;
-  height: 48px;
-  display: flex;
-  justify-content: center;
-  padding: 12px 18px !important;
-  row-gap: 10px;
-  transition: all 0.3s ease;
-  border-radius: 50px;
-}
-
-.rateServiceCard :global(.ant-card-body) {
-  padding: 0px !important;
-  text-align: start;
-  width: 100%;
-}
-
 .serviceIcon path {
   stroke: #ea1f22;
 }
@@ -47,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

@@ -1,11 +1,12 @@
 import { useTranslation } from "react-i18next";
 import { ProBottomSheet } from "../ProBottomSheet/ProBottomSheet";
-import { updateGiftType } from "features/order/orderSlice";
+import { updateGiftDetails } from "features/order/orderSlice";
 import { useAppDispatch } from "redux/hooks";
 import GiftItemsBtnIcon from "components/Icons/GiftItemsBtnIcon";
 import GiftBalanceBtnIcon from "components/Icons/GiftBalanceBtnIcon";
 import GiftItemsAndBalanceBtnIcon from "components/Icons/GiftItemsAndBalanceBtnIcon";
 import ProText from "components/ProText";
+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 = (value: string) => {
-    dispatch(updateGiftType(value));
+  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(
@@ -198,22 +195,32 @@ function MapComponent({
               if (position) {
                 const lat = position.lat();
                 const lng = position.lng();
-                
+
                 // Get address from coordinates
                 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;
-                    console.log('Marker drag - calling onLocationSelect:', { lat, lng, address });
-                    onLocationSelect?.(lat, lng, address);
-                  } else {
-                    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);
-                    onLocationSelect?.(lat, lng, fallbackAddress);
-                  }
-                });
+                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,
+                      });
+                      onLocationSelect?.(lat, lng, address);
+                    } else {
+                      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,
+                      );
+                      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",
         }}
       >
-        <ProTitle level={5}>{t("menu.address")}</ProTitle>
-        <ProText type="secondary">
-          {isRTL ? restaurant?.addressAR : restaurant?.address}
-        </ProText>
+        {/* 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",
+              }}
+            >
+              {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={{
+                marginBottom: 0,
+                fontSize: 16,
+                fontWeight: 600,
+                color: "#333",
+              }}
+            >
+              {t("menu.openingTimes")}
+            </ProTitle>
+          </div>
+
+          <div
             style={{
-              ...textStyle,
-              fontWeight: todayDay === "sunday" ? 700 : 400,
+              display: "flex",
+              flexDirection: "column",
+              gap: 8,
             }}
           >
-            10:00 AM to 10:00 PM
-          </ProText>
-        </div>
-        <div style={{ display: "flex", justifyContent: "space-between" }}>
-          <ProText
-            type="secondary"
-            style={{
-              ...textStyle,
-              fontWeight: todayDay === "monday" ? 700 : 400,
-            }}
-          >
-            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
-          </ProText>
+            {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",
+                        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={{
+                            fontSize: 14,
+                            color: "#999",
+                            fontStyle: "italic",
+                          }}
+                        >
+                          {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/CardAmountIcon.tsx

@@ -0,0 +1,55 @@
+interface CardAmountIconType {
+  className?: string;
+  onClick?: () => void;
+}
+
+const CardAmountIcon = ({ className, onClick }: CardAmountIconType) => {
+  return (
+    <svg
+      width="64"
+      height="42"
+      viewBox="0 0 64 42"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      onClick={onClick}
+    >
+      <rect width="64" height="42" rx="4" fill="#FAFAFA" />
+      <path
+        opacity="0.5"
+        d="M26 18H30"
+        stroke="#E8B400"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M40.833 19H38.231C36.446 19 35 20.343 35 22C35 23.657 36.447 25 38.23 25H40.833C40.917 25 40.958 25 40.993 24.998C41.533 24.965 41.963 24.566 41.998 24.065C42 24.033 42 23.994 42 23.917V20.083C42 20.006 42 19.967 41.998 19.935C41.962 19.434 41.533 19.035 40.993 19.002C40.958 19 40.917 19 40.833 19Z"
+        stroke="#4C4A58"
+        stroke-width="1.5"
+      />
+      <path
+        d="M40.965 19C40.887 17.128 40.637 15.98 39.828 15.172C38.657 14 36.771 14 33 14H30C26.229 14 24.343 14 23.172 15.172C22.001 16.344 22 18.229 22 22C22 25.771 22 27.657 23.172 28.828C24.344 29.999 26.229 30 30 30H33C36.771 30 38.657 30 39.828 28.828C40.637 28.02 40.888 26.872 40.965 25"
+        stroke="#4C4A58"
+        stroke-width="1.5"
+      />
+      <path
+        opacity="0.5"
+        d="M26 13.9999L29.735 11.5229C30.2604 11.1816 30.8735 11 31.5 11C32.1265 11 32.7396 11.1816 33.265 11.5229L37 13.9999"
+        stroke="#E8B400"
+        stroke-width="1.5"
+        stroke-linecap="round"
+      />
+      <path
+        opacity="0.5"
+        d="M37.9922 22H38.0012"
+        stroke="#E8B400"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default CardAmountIcon;

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

@@ -0,0 +1,29 @@
+interface NoteIconType {
+  className?: string;
+  onClick?: () => void;
+}
+
+const NoteIcon = ({ className, onClick }: NoteIconType) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      onClick={onClick}
+    >
+      <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"
+        strokeWidth="1.5"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default NoteIcon;

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/ScheduleOrderIcon.tsx

@@ -14,7 +14,7 @@ const ScheduleOrderIcon = ({ className, onClick }: ScheduleOrderIconType) => {
       className={className}
       onClick={onClick}
     >
-      <g clip-path="url(#clip0_1498_49735)">
+      <g clipPath="url(#clip0_1498_49735)">
         <path
           d="M4.96953 0.0218744C4.91016 0.0281248 4.71953 0.0625 4.54766 0.0968752C2.56328 0.490624 0.925781 1.9375 0.282031 3.86562C0.0507812 4.5625 0.0195312 4.7875 0.0195312 5.67188C0.0195312 6.55625 0.0507812 6.78125 0.282031 7.47188C1.01016 9.65937 3.01016 11.2125 5.26328 11.3406C5.62891 11.3625 6.28516 11.3344 6.41016 11.2969C6.46641 11.2781 6.46953 11.3 6.46953 12.1469C6.46953 12.8 6.47891 13.0312 6.51016 13.0656C6.52891 13.0938 7.57578 13.7625 8.83203 14.5562C10.6133 15.6813 11.1414 16 11.2195 16C11.2914 16 11.9695 15.6562 13.5727 14.8094C14.8133 14.1531 15.8633 13.5844 15.907 13.5406L15.9852 13.4688L15.9945 11.2219L16.0008 8.975L15.932 8.89375C15.8758 8.82812 13.1227 7.30625 11.6039 6.49687C11.3789 6.37813 11.2883 6.31563 11.2977 6.28125C11.3352 6.14375 11.3477 5.50313 11.3164 5.1875C11.2414 4.43125 11.0664 3.8125 10.7539 3.17188C9.92266 1.48125 8.34766 0.328125 6.47578 0.046875C6.19453 0.00312519 5.26328 -0.00937462 4.96953 0.0218744ZM6.29141 0.546875C8.26016 0.80625 9.92266 2.16875 10.5445 4.03438C10.757 4.66875 10.7977 4.93437 10.7945 5.6875C10.7914 6.05625 10.7789 6.4 10.7602 6.45C10.7289 6.55 10.7477 6.54062 8.06328 7.95937C7.26328 8.38125 6.57891 8.75625 6.54141 8.79063C6.46953 8.85313 6.46953 8.85938 6.46953 9.8125V10.7719L6.22891 10.7937C5.82266 10.8281 5.25703 10.8156 4.91953 10.7656C2.21641 10.3625 0.253906 7.86562 0.528906 5.17812C0.657031 3.95625 1.16016 2.89687 2.02891 2.03125C2.24766 1.81563 2.54766 1.55312 2.69766 1.44687C3.27578 1.04062 4.02266 0.724999 4.70703 0.596875C5.27578 0.490624 5.74766 0.474999 6.29141 0.546875ZM13.2883 8.01562L15.1852 9.04375L14.6695 9.32188L14.157 9.6L12.2258 8.54375C11.1664 7.9625 10.2727 7.47188 10.2414 7.45C10.1914 7.41875 10.2508 7.37813 10.6945 7.14687L11.2039 6.87813L11.2977 6.93437C11.3508 6.9625 12.2445 7.45 13.2883 8.01562ZM11.7664 8.85625L13.8914 10.0219L13.9008 10.6156L13.907 11.2062L13.6258 11.3844L13.3445 11.5594V10.9906C13.3445 10.5437 13.3352 10.4062 13.3008 10.3562C13.2758 10.3187 12.3195 9.78125 11.1758 9.15625C10.0289 8.53125 9.09453 8.00938 9.09453 8C9.09453 7.98125 9.59453 7.69063 9.62578 7.69063C9.63516 7.69063 10.5977 8.2125 11.7664 8.85625ZM10.5477 9.41875L12.5352 10.4938L12.3383 10.6031C11.5164 11.0531 11.2414 11.1906 11.1945 11.1719C11.0164 11.1062 7.29141 8.97813 7.31328 8.95625C7.36953 8.9 8.48828 8.31875 8.52266 8.32812C8.54453 8.33437 9.45391 8.825 10.5477 9.41875ZM9.33516 10.7406L10.9352 11.6406L10.9383 13.4625V15.2875L10.8477 15.2281C10.7977 15.1969 9.90703 14.6313 8.86328 13.9688L6.97266 12.7656L6.96953 11.0875V9.40937L7.35391 9.625C7.56328 9.74375 8.45391 10.2469 9.33516 10.7406ZM15.4383 11.3531V13.2062L15.2289 13.3187C15.1102 13.3812 14.307 13.8062 13.4383 14.2656C12.5695 14.725 11.7727 15.15 11.6664 15.2094L11.4695 15.3156V13.4937V11.6719L12.1352 11.3094L12.7977 10.9437L12.8133 11.5344C12.8289 12.0875 12.832 12.1281 12.8977 12.1906C12.9383 12.2313 13.0039 12.2594 13.057 12.2594C13.1539 12.2594 14.2727 11.6625 14.3508 11.5719C14.382 11.5344 14.3945 11.3312 14.407 10.7844L14.4227 10.0469L14.9227 9.775C15.1977 9.625 15.4258 9.5 15.432 9.5C15.4352 9.5 15.4383 10.3344 15.4383 11.3531Z"
           fill="#434E5C"

src/components/Icons/SuccessIcon.tsx

@@ -0,0 +1,33 @@
+interface SuccessIconType {
+  className?: string;
+  onClick?: () => void;
+}
+
+const SuccessIcon = ({ className, onClick }: SuccessIconType) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      onClick={onClick}
+    >
+      <path
+        d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
+        stroke="#32AD6D"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M8.5 12.5L10.5 14.5L15.5 9.5"
+        stroke="#32AD6D"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default SuccessIcon;

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/NewRateIcon.tsx

@@ -0,0 +1,26 @@
+interface NewRateIconType {
+  className?: string;
+  onClick?: () => void;
+}
+
+const NewRateIcon = ({ className, onClick }: NewRateIconType) => {
+  return (
+    <svg
+      width="28"
+      height="28"
+      viewBox="0 0 28 28"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      onClick={onClick}
+    >
+      <circle cx="14" cy="14" r="13.5" fill="black" />
+      <path
+        d="M19.2216 16.509C19.2946 16.436 19.3814 16.3995 19.4819 16.3995C19.5824 16.3995 19.6691 16.436 19.7421 16.509L20.9376 17.709C21.0106 17.782 21.0471 17.8705 21.0471 17.9745C21.0471 18.0785 21.0106 18.167 20.9376 18.24C20.8646 18.313 20.7761 18.3495 20.6721 18.3495C20.5681 18.3495 20.4796 18.313 20.4066 18.24L19.2066 17.0438C19.1336 16.9707 19.0996 16.8817 19.1046 16.7767C19.1096 16.6718 19.1491 16.5825 19.2216 16.509ZM19.7406 7.79775C19.8136 7.87075 19.8501 7.95975 19.8501 8.06475C19.8501 8.16975 19.8136 8.259 19.7406 8.3325L18.5444 9.528C18.4714 9.601 18.3846 9.6375 18.2841 9.6375C18.1836 9.6375 18.0969 9.601 18.0239 9.528C17.9509 9.455 17.9144 9.366 17.9144 9.261C17.9144 9.156 17.9509 9.06675 18.0239 8.99325L19.2096 7.79775C19.2826 7.72425 19.3711 7.6875 19.4751 7.6875C19.5791 7.6875 19.6676 7.72425 19.7406 7.79775ZM8.25963 7.812C8.33263 7.739 8.42188 7.7025 8.52737 7.7025C8.63238 7.7025 8.72162 7.739 8.79512 7.812L9.99062 8.997C10.0636 9.0705 10.1001 9.15925 10.1001 9.26325C10.1001 9.36675 10.0636 9.45525 9.99062 9.52875C9.91762 9.60175 9.82837 9.63825 9.72287 9.63825C9.61787 9.63825 9.52887 9.60175 9.45587 9.52875L8.25963 8.3325C8.18663 8.2595 8.15012 8.17275 8.15012 8.07225C8.15012 7.97175 8.18663 7.885 8.25963 7.812ZM8.77937 16.524C8.85237 16.597 8.88887 16.6838 8.88887 16.7843C8.88887 16.8847 8.85237 16.9715 8.77937 17.0445L7.58312 18.24C7.51012 18.313 7.42337 18.3495 7.32287 18.3495C7.22237 18.3495 7.13562 18.313 7.06262 18.24C6.98962 18.167 6.95312 18.0778 6.95312 17.9723C6.95312 17.8668 6.98962 17.7775 7.06262 17.7045L8.24762 16.509C8.32112 16.436 8.40987 16.4017 8.51387 16.4062C8.61737 16.4113 8.70587 16.451 8.77937 16.524ZM14.0001 17.4945L10.6139 19.527C10.5339 19.5665 10.4599 19.5825 10.3919 19.575C10.3234 19.567 10.2569 19.5435 10.1924 19.5045C10.1279 19.4645 10.0789 19.408 10.0454 19.335C10.0119 19.261 10.0089 19.1813 10.0364 19.0958L10.9341 15.2925L7.94687 12.7095C7.87937 12.6545 7.83737 12.5887 7.82087 12.5122C7.80387 12.4363 7.81087 12.363 7.84187 12.2925C7.87287 12.222 7.91412 12.1647 7.96562 12.1207C8.01712 12.0767 8.08713 12.047 8.17563 12.0315L12.1019 11.6985L13.6379 8.0865C13.6719 8.004 13.7209 7.9445 13.7849 7.908C13.8489 7.8715 13.9206 7.8535 14.0001 7.854C14.0796 7.8545 14.1516 7.87275 14.2161 7.90875C14.2806 7.94475 14.3294 8.00425 14.3624 8.08725L15.9126 11.6992L19.8389 12.0322C19.9274 12.0472 19.9974 12.0772 20.0489 12.1222C20.1009 12.1657 20.1424 12.2228 20.1734 12.2933C20.2044 12.3637 20.2114 12.437 20.1944 12.513C20.1774 12.5895 20.1351 12.6553 20.0676 12.7102L17.0811 15.2933L17.9781 19.1108C18.0061 19.1963 18.0031 19.2735 17.9691 19.3425C17.9351 19.4115 17.8861 19.4657 17.8221 19.5052C17.7576 19.5442 17.6914 19.5675 17.6234 19.575C17.5549 19.583 17.4806 19.5673 17.4006 19.5278L14.0001 17.4945Z"
+        fill="white"
+      />
+    </svg>
+  );
+};
+
+export default NewRateIcon;

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",
-              scrollbarWidth: "none",
-            }}
-          >
-            {Array.from({ length: restaurant?.loyalty_stamps || 0 }).map(
-              (_, index) => {
-                const currentPoints = restaurant?.customer_loyalty_points || 0;
+          <>
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "row",
+                gap: 12,
+                overflow: "auto",
+                scrollbarWidth: "none",
+                paddingBottom: 12,
+              }}
+            >
+              {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>
+              })}
+            </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,10 +11,11 @@
   justify-content: space-between;
   align-items: center;
   font-size: 16px;
+  min-height: 24px;
 }
 
 .summaryDivider {
-  margin: 8px 0 !important;
+  margin: 0 !important;
 }
 
 .totalRow {

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,17 +24,15 @@ 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);
 
   const isHasLoyaltyGift =
     (restaurant?.loyalty_stamps ?? 0) -
-      (restaurant?.customer_loyalty_points ?? 0) <=
+    (restaurant?.customer_loyalty_points ?? 0) <=
     0;
 
   const titlesStyle: CSSProperties = {
@@ -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,40 +96,124 @@ export default function OrderSummary() {
               </ProText>
               <ArabicPrice
                 price={Number(restaurant?.delivery_fees || 0)}
-                style={{ ...titlesStyle, color: "#434E5C" }}
+                textStyle={{ ...titlesStyle, color: "#434E5C" }}
               />
             </div>
           )}
-          <div className={styles.summaryRow}>
-            <ProText type="secondary" style={titlesStyle}>
-              {t("cart.discount")}
-            </ProText>
-            <ArabicPrice
-              price={discountAmount}
-              style={{ ...titlesStyle, color: "#434E5C" }}
-            />
-          </div>
-          <div className={styles.summaryRow}>
-            <ProText type="secondary" style={titlesStyle}>
-              {t("cart.tax")}
-            </ProText>
-            <ArabicPrice
-              price={taxAmount || 0}
-              style={{ ...titlesStyle, color: "#434E5C" }}
-            />
-          </div>
-          {splitBillAmount > 0 && (
+          {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 + (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.tip")}
+              </ProText>
+              <ArabicPrice
+                price={tip || 0}
+                textStyle={{ ...titlesStyle, color: "#434E5C" }}
+              />
+            </div>
+          )} */}
+          {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>
           )}
-          <Divider className={styles.summaryDivider} style={{ margin: "0" }} />
+          <Divider className={styles.summaryDivider} />
           <div className={`${styles.summaryRow} ${styles.totalRow}`}>
             <ProText
               style={{
@@ -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,39 +243,6 @@ export default function OrderSummary() {
             />
           </div>
         </Space>
-
-        {isHasLoyaltyGift && restaurant?.is_loyalty_enabled === 1 && (
-          <>
-            <br />
-            <br />
-            <Checkbox
-              checked={useLoyaltyPoints}
-              onChange={(value) => {
-                dispatch(updateUseLoyaltyPoints(value.target.checked));
-              }}
-            >
-              {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

@@ -12,12 +12,35 @@ export default function PaymentDetails({ order }: { order?: Order }) {
   return (
     <>
       <Card className={`${styles.orderSummary}`}>
-        <ProTitle style={{ fontSize: 18 }}>{t("cart.orderSummary")}</ProTitle>
+        <ProTitle style={{ fontSize: 18 }}>{t("cart.paymentSummary")}</ProTitle>
         <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>
-              <ProText style={{ fontSize: "1rem" }}>{option.price}</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,30 +46,39 @@ const ProRatioGroups = ({
       >
         <Space orientation="vertical" style={{ width: "100%" }}>
           {options.map((option) => (
-            <Radio
-              key={option.value}
-              value={option.value}
-              className={styles.circleCheckbox}
-            >
-              <div
-                style={{
-                  display: "flex",
-                  flexDirection: "row",
-                  justifyContent: "space-between",
-                  width: "100%",
-                  padding: "8px 0",
-                }}
+            <>
+              <Radio
+                key={option.value}
+                value={option.value}
+                className={styles.circleCheckbox}
               >
-                <ProText
+                <div
                   style={{
-                    fontSize: "1rem",
+                    display: "flex",
+                    flexDirection: "row",
+                    justifyContent: "space-between",
+                    width: "100%",
+                    padding: "8px 0",
+                    placeItems: "center",
                   }}
                 >
-                  {option.label}
-                </ProText>
-                <ProText style={{ fontSize: "1rem" }}>{option?.price}</ProText>
-              </div>
-            </Radio>
+                  <ProText
+                    style={{
+                      fontSize: "1rem",
+                      ...optionsStyle,
+                    }}
+                  >
+                    {option.label}
+                  </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

@@ -26,6 +26,7 @@ export interface OfficeDetailsType {
 }
 
 export interface GiftDetailsType {
+  amount: number;
   receiverName: string;
   receiverPhone: string;
   message: string;
@@ -33,7 +34,8 @@ export interface GiftDetailsType {
   senderPhone: string;
   senderEmail: string;
   isSecret: boolean;
-  cardId: string;
+  cardId: number;
+  giftType: "items" | "vouchers" | "itemsAndVouchers";
 }
 
 interface DiscountData {
@@ -53,7 +55,7 @@ interface CartState {
   giftDetails: GiftDetailsType | null;
   coupon: string;
   tip: string;
-  tables: string[];
+  table: string;
   estimateTime: Date;
   estimateTimeDate: Date;
   estimateTimeTime: string;
@@ -69,6 +71,7 @@ interface CartState {
   pickupDate: string;
   pickupTime: string;
   pickupType: string;
+  estimateWay: string;
   order: any;
   splitBillAmount: number;
   customerName: string;
@@ -76,7 +79,6 @@ interface CartState {
   hiddenServices: number;
   visibleServices: number;
   fee: number;
-  giftType: string;
 }
 
 // localStorage keys
@@ -110,7 +112,8 @@ export const CART_STORAGE_KEYS = {
   TOTAL_SERVICES: "fascano_total_services",
   HIDDEN_SERVICES: "fascano_hidden_services",
   VISIBLE_SERVICES: "fascano_visible_services",
-  GIFT_TYPE: "fascano_gift_type",
+  ESTIMATE_WAY: "fascano_estimate_way",
+  CUSTOMER_NAME: "fascano_customer_name",
 } as const;
 
 // Utility functions for localStorage
@@ -150,7 +153,7 @@ const initialState: CartState = {
   giftDetails: getFromLocalStorage(CART_STORAGE_KEYS.GIFT_DETAILS, null),
   coupon: getFromLocalStorage(CART_STORAGE_KEYS.COUPON, ""),
   tip: getFromLocalStorage(CART_STORAGE_KEYS.TIP, ""),
-  tables: getFromLocalStorage(CART_STORAGE_KEYS.TABLES, []),
+  table: getFromLocalStorage(CART_STORAGE_KEYS.TABLES, ""),
   estimateTime: new Date(
     getFromLocalStorage(
       CART_STORAGE_KEYS.ESTIMATE_TIME,
@@ -196,14 +199,14 @@ const initialState: CartState = {
   pickupDate: getFromLocalStorage(CART_STORAGE_KEYS.PICKUP_DATE, ""),
   pickupTime: getFromLocalStorage(CART_STORAGE_KEYS.PICKUP_TIME, ""),
   pickupType: getFromLocalStorage(CART_STORAGE_KEYS.PICKUP_TYPE, ""),
+  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,
   fee: 0,
-  giftType: getFromLocalStorage(CART_STORAGE_KEYS.GIFT_TYPE, ""),
 };
 
 const orderSlice = createSlice({
@@ -350,7 +353,7 @@ const orderSlice = createSlice({
       state.phone = "";
       state.coupon = "";
       state.tip = "";
-      state.tables = [];
+      state.table = "";
       state.location = null;
       state.roomDetails = null;
       state.officeDetails = null;
@@ -361,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);
           });
@@ -408,19 +428,19 @@ const orderSlice = createSlice({
         localStorage.setItem(CART_STORAGE_KEYS.TIP, JSON.stringify(state.tip));
       }
     },
-    updateTables(state, action: PayloadAction<string[]>) {
-      state.tables = action.payload;
+    updateTables(state, action: PayloadAction<string>) {
+      state.table = action.payload;
 
       // Sync to localStorage
       if (typeof window !== "undefined") {
         localStorage.setItem(
           CART_STORAGE_KEYS.TABLES,
-          JSON.stringify(state.tables),
+          JSON.stringify(state.table),
         );
       }
     },
     removeTable(state) {
-      state.tables = [];
+      state.table = "";
 
       // Sync to localStorage
       if (typeof window !== "undefined") {
@@ -676,8 +696,18 @@ const orderSlice = createSlice({
         );
       }
     },
+    updateEstimateWay(state, action: PayloadAction<string>) {
+      state.estimateWay = action.payload;
+      if (typeof window !== "undefined") {
+        localStorage.setItem(
+          CART_STORAGE_KEYS.ESTIMATE_WAY,
+          JSON.stringify(state.estimateWay),
+        );
+      }
+    },
     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,
@@ -690,9 +720,12 @@ const orderSlice = createSlice({
     },
     updateCustomerName(state, action: PayloadAction<string>) {
       state.customerName = action.payload;
-    },
-    updateGiftType(state, action: PayloadAction<string>) {
-      state.giftType = action.payload;
+      if (typeof window !== "undefined") {
+        localStorage.setItem(
+          CART_STORAGE_KEYS.CUSTOMER_NAME,
+          JSON.stringify(state.customerName),
+        );
+      }
     },
   },
 });
@@ -730,31 +763,29 @@ export const {
   updatePickupDate,
   updatePickupTime,
   updatePickUpType,
+  updateEstimateWay,
   updateOrder,
   updateSplitBillAmount,
   updateCustomerName,
-  updateGiftType,
 } = orderSlice.actions;
 
 // 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,
     );
 };
@@ -793,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) +
-  (state.order.useLoyaltyPoints &&
-  state.order.restaurant?.is_loyalty_enabled === 1
-    ? selectHighestPricedLoyaltyItem(state)?.price || 0
-    : 0);
+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))
+      : 0);
+}
 
 export const selectLoyaltyValidation = createSelector(
   [(state: RootState) => state.order.useLoyaltyPoints, selectLoyaltyItems],
@@ -822,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
@@ -841,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

@@ -71,7 +71,7 @@ export default function HeaderMenuDrawer() {
         open={mobileMenuOpen}
         styles={{
           body: {
-          padding: 0,
+            padding: 0,
           },
           header: {
             padding: "5px 24px",
@@ -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,
-    LogoutOutlined,
-    MenuOutlined,
-    TranslationOutlined,
+  BgColorsOutlined,
+  GlobalOutlined,
+  LogoutOutlined,
 } 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,49 +60,58 @@ 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 ? [{
-      key: "login",
-      icon: (
-        <LoginOutlined
-          style={{ color: themeName === "dark" ? "white" : "#1f2937" }}
-        />
-      ),
-      label: <Link to={`/${subdomain}/login`}>{t("common.login")}</Link>,
-      onClick: () => {
-        navigate(`/${subdomain}/login`);
-      },
-      }] : []),
-    ...(token ? [{
-      key: "logout",
-      icon: (
-        <LogoutOutlined
-          style={{ color: themeName === "dark" ? "white" : "#1f2937" }}
-        />
-      ),
-      label: <div>{t("common.logout")}</div>,
-      onClick: () => {
-        dispatch(logoutThunk());
-      },
-    }] : []),
+    ...(!token
+      ? [
+          {
+            key: "login",
+            icon: <LoginIcon />,
+            label: <Link to={`/${subdomain}/login`}>{t("common.login")}</Link>,
+            onClick: () => {
+              navigate(`/${subdomain}/login`);
+            },
+          },
+        ]
+      : []),
+    ...(token
+      ? [
+          {
+            key: "logout",
+            icon: (
+              <LogoutOutlined
+                style={{ color: themeName === "dark" ? "white" : "#1f2937" }}
+              />
+            ),
+            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

@@ -15,6 +15,8 @@ import SenderformationCard from "./components/SenderformationCard/Senderformatio
 import TimeEstimateCard from "pages/cart/components/timeEstimate/TimeEstimateCard";
 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();
@@ -22,14 +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 { 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);
@@ -51,103 +56,137 @@ export default function CardDetailsPage() {
 
   const currentCard = cards && cards.length > 0 ? cards[currentIndex] : null;
 
-  const handleCheckout = useCallback(() => {
-    navigate(`/${subdomain}/checkout`);
-  }, [subdomain]);
+  const handleCheckout = useCallback(async () => {
+    try {
+      await form.validateFields();
+      navigate(`/${subdomain}/checkout`);
+    } 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 (
-    <Layout>
-      <ProHeader>{t("cardDetails.title")}</ProHeader>
-      <Layout.Content className={styles.checkoutContainer}>
-        <div
-          style={{
-            textAlign: "center",
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            justifyContent: "center",
-            margin: "50px 28px 35px 28px",
-            gap: 8,
-          }}
-        >
-          <ProText style={{ fontSize: 16, fontWeight: 600, color: "#333333" }}>
-            {t("cardDetails.addGiftDetails")}
-          </ProText>
-          <ProText style={{ fontSize: 14, fontWeight: 400, color: "#95949C" }}>
-            {t("cardDetails.description")}
-          </ProText>
-        </div>
-        {isLoading || !currentCard ? (
-          <div className={cardStyles.carouselContainer}>
-            <Skeleton.Avatar
-              active
-              size={40}
-              shape="circle"
-              style={{ flexShrink: 0 }}
-            />
-            <div className={cardStyles.cardWrapper}>
-              <Skeleton.Image
+    <>
+      <Layout>
+        <ProHeader>{t("cardDetails.title")}</ProHeader>
+        <Layout.Content className={styles.checkoutContainer}>
+          <div
+            style={{
+              textAlign: "center",
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+              margin: "50px 28px 35px 28px",
+              gap: 8,
+            }}
+          >
+            <ProText
+              style={{ fontSize: 16, fontWeight: 600, color: "#333333" }}
+            >
+              {t("cardDetails.addGiftDetails")}
+            </ProText>
+            <ProText
+              style={{ fontSize: 14, fontWeight: 400, color: "#95949C" }}
+            >
+              {t("cardDetails.description")}
+            </ProText>
+          </div>
+          {isLoading || !currentCard ? (
+            <div className={cardStyles.carouselContainer}>
+              <Skeleton.Avatar
                 active
-                style={{
-                  width: 205,
-                  height: 134,
-                  borderRadius: 8,
-                }}
+                size={40}
+                shape="circle"
+                style={{ flexShrink: 0 }}
+              />
+              <div className={cardStyles.cardWrapper}>
+                <Skeleton.Image
+                  active
+                  style={{
+                    width: 205,
+                    height: 134,
+                    borderRadius: 8,
+                  }}
+                />
+              </div>
+              <Skeleton.Avatar
+                active
+                size={40}
+                shape="circle"
+                style={{ flexShrink: 0 }}
               />
             </div>
-            <Skeleton.Avatar
-              active
-              size={40}
-              shape="circle"
-              style={{ flexShrink: 0 }}
-            />
-          </div>
-        ) : (
-          <div className={cardStyles.carouselContainer}>
-            <Button
-              type="text"
-              className={cardStyles.arrowButton}
-              onClick={isRTL ? handleNext : handlePrevious}
-              icon={<BackIcon iconSize={24} />}
-            />
-            <div className={cardStyles.cardWrapper}>
-              <Image
-                src={currentCard.imageURL}
-                alt={currentCard.image}
-                width={205}
-                height={134}
-                className={cardStyles.cardImage}
+          ) : (
+            <div className={cardStyles.carouselContainer}>
+              <Button
+                type="text"
+                className={cardStyles.arrowButton}
+                onClick={isRTL ? handleNext : handlePrevious}
+                icon={<BackIcon iconSize={24} />}
+              />
+              <div className={cardStyles.cardWrapper}>
+                <Image
+                  src={currentCard.imageURL}
+                  alt={currentCard.image}
+                  width={205}
+                  height={134}
+                  className={cardStyles.cardImage}
+                />
+              </div>
+              <Button
+                type="text"
+                className={cardStyles.arrowButton}
+                onClick={isRTL ? handlePrevious : handleNext}
+                icon={<NextIcon iconSize={24} />}
               />
             </div>
-            <Button
-              type="text"
-              className={cardStyles.arrowButton}
-              onClick={isRTL ? handlePrevious : handleNext}
-              icon={<NextIcon iconSize={24} />}
-            />
-          </div>
-        )}
-        <Form
-          layout="vertical"
-          style={{ display: "flex", flexDirection: "column", gap: 16 }}
-        >
-          <GiftAmountCard />
-          <ReceivernformationCard />
-          <SenderformationCard />
-          <TimeEstimateCard />
-        </Form>
-      </Layout.Content>
-      <Layout.Footer className={styles.checkoutButtonContainer}>
-        <Button
-          type="primary"
-          shape="round"
-          className={styles.checkoutButton}
-          onClick={handleCheckout}
-        >
-          {t("cardDetails.checkout")}
-        </Button>
-      </Layout.Footer>
-    </Layout>
+          )}
+          <Form
+            form={form}
+            layout="vertical"
+            style={{ display: "flex", flexDirection: "column", gap: 16 }}
+          >
+            {giftDetails?.giftType !== "items" && (
+              <GiftAmountCard
+                onOpen={() => setIsGiftAmountBottomSheetOpen(true)}
+              />
+            )}
+            <ReceivernformationCard />
+            <SenderformationCard />
+            <PickupTimeCard />
+          </Form>
+        </Layout.Content>
+        <Layout.Footer className={styles.checkoutButtonContainer}>
+          <Button
+            type="primary"
+            shape="round"
+            className={styles.checkoutButton}
+            onClick={handleCheckout}
+          >
+            {t("cardDetails.checkout")}
+          </Button>
+        </Layout.Footer>
+      </Layout>
+      <GiftAmountBottomSheet
+        isOpen={isGiftAmountBottomSheetOpen}
+        onClose={() => setIsGiftAmountBottomSheetOpen(false)}
+      />
+    </>
   );
 }

src/pages/CardDetails/components/GiftAmountBottomSheet.tsx

@@ -0,0 +1,116 @@
+import { Button, Form } from "antd";
+import { ProBottomSheet } from "components/ProBottomSheet/ProBottomSheet.tsx";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import { selectCart, updateGiftDetails } from "features/order/orderSlice";
+import { useAppDispatch, useAppSelector } from "redux/hooks";
+import ProText from "components/ProText";
+import { ProInputNumber } from "components/Inputs/ProInputNumber";
+
+interface SplitBillChoiceBottomSheetProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function GiftAmountBottomSheet({
+  isOpen,
+  onClose,
+}: SplitBillChoiceBottomSheetProps) {
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+  const { giftDetails } = useAppSelector(selectCart);
+  const [amount, setAmount] = useState<string>(
+    giftDetails?.amount && giftDetails?.amount > 0
+      ? giftDetails?.amount?.toString()
+      : "",
+  );
+
+  const handleSave = () => {
+    const numAmount = parseFloat(amount) || 0;
+    dispatch(updateGiftDetails({ amount: numAmount }));
+    onClose();
+  };
+
+  return (
+    <ProBottomSheet
+      isOpen={isOpen}
+      onClose={onClose}
+      title={t("cardDetails.customAmount")}
+      showCloseButton={true}
+      initialSnap={1}
+      height={295}
+      snapPoints={[295]}
+      contentStyle={{
+        padding: 0,
+      }}
+    >
+      <div
+        style={{
+          padding: "20px 20px 0 20px",
+          display: "flex",
+          flexDirection: "column",
+        }}
+      >
+        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+          <ProText
+            style={{
+              fontWeight: 400,
+              fontStyle: "Regular",
+              fontSize: 16,
+              lineHeight: "140%",
+              letterSpacing: "0%",
+              color: "#333333",
+            }}
+          >
+            {t("cardDetails.enterCustomOucherAmount")}
+          </ProText>
+          <Form.Item name="amount">
+            <ProInputNumber
+              value={amount}
+              onChange={(value) => {
+                setAmount(value?.toString() || "");
+                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>
+
+      <div
+        style={{
+          display: "flex",
+          gap: 12,
+          margin: 20,
+        }}
+      >
+        <Button
+          type="primary"
+          style={{
+            flex: 1,
+            boxShadow: "none",
+            height: 48,
+          }}
+          onClick={handleSave}
+          disabled={!amount || parseFloat(amount) <= 0}
+        >
+          {t("cardDetails.add")}
+        </Button>
+      </div>
+    </ProBottomSheet>
+  );
+}

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() {
+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.eGiftCardAmount")}>
+    <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() {
               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() {
               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() {
               lineHeight: "140%",
               letterSpacing: "0%",
               textAlign: "center",
-              color: "#5F6C7B",
+              color:
+                selectedAmount === 30 && isDefaultAmount
+                  ? "#CC9300"
+                  : "#5F6C7B",
             }}
           />
         </Button>
@@ -83,22 +129,36 @@ export default function GiftAmountCard() {
           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

@@ -5,7 +5,6 @@ import { useTranslation } from "react-i18next";
 import { useAppDispatch, useAppSelector } from "redux/hooks";
 import { Checkbox, Form, Input } from "antd";
 import styles from "./SenderformationCard.module.css";
-import TextArea from "antd/es/input/TextArea";
 import ProText from "components/ProText";
 
 export default function SenderformationCard() {
@@ -14,9 +13,14 @@ export default function SenderformationCard() {
   const { giftDetails } = useAppSelector(selectCart);
 
   return (
-    <ProInputCard title={t("cardDetails.receiverInformation")}>
+    <ProInputCard title={t("cardDetails.yourInformation")}>
       <div className={styles.customerInformationCard}>
-        <Form.Item name="receiverName">
+        <Form.Item
+          name="senderName"
+          rules={[
+            { required: true, message: t("cardDetails.senderNameRequired") },
+          ]}
+        >
           <Input
             placeholder={t("cardDetails.yourName")}
             size="large"
@@ -29,7 +33,7 @@ export default function SenderformationCard() {
           />
         </Form.Item>
         <ProPhoneInput
-          propName="yourPhone"
+          propName="senderPhone"
           value={giftDetails?.senderPhone}
           onChange={(e) => {
             dispatch(updateGiftDetails({ senderPhone: e }));

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,30 +64,70 @@ export default function AddressPage() {
             name="loginForm"
             form={form}
           >
-            <div style={{ display: "flex", gap: 10 }}>
+            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
+              <div style={{ display: "flex", gap: 10 }}>
+                <Form.Item
+                  name="floor"
+                  rules={[{ required: true, message: "" }]}
+                  style={{ width: "100%" }}
+                >
+                  <Input
+                    placeholder={t("address.floor")}
+                    style={{
+                      fontSize: 14,
+                      height: 50,
+                    }}
+                    autoFocus={false}
+                  />
+                </Form.Item>{" "}
+                <Form.Item
+                  name="apt"
+                  rules={[{ required: true, message: "" }]}
+                  style={{ width: "100%" }}
+                >
+                  <Input
+                    placeholder={t("address.aptNumber")}
+                    style={{
+                      fontSize: 14,
+                      height: 50,
+                    }}
+                    autoFocus={false}
+                  />
+                </Form.Item>
+              </div>
               <Form.Item
-                label={t("floor")}
-                name="floor"
+                name="street"
                 rules={[{ required: true, message: "" }]}
-                style={{ width: "100%" }}
               >
                 <Input
-                  placeholder={t("address.floor")}
+                  placeholder={t("address.street")}
                   style={{
                     fontSize: 14,
                     height: 50,
                   }}
                   autoFocus={false}
                 />
-              </Form.Item>{" "}
+              </Form.Item>
               <Form.Item
-                label={t("address.aptNumber")}
-                name="apt"
+                name="additional"
                 rules={[{ required: true, message: "" }]}
-                style={{ width: "100%" }}
               >
                 <Input
-                  placeholder={t("address.aptNumber")}
+                  placeholder={t("address.additionalDirection")}
+                  style={{
+                    fontSize: 14,
+                    height: 50,
+                  }}
+                  autoFocus={false}
+                />
+              </Form.Item>
+
+              <Form.Item
+                name="addressLabel"
+                rules={[{ required: true, message: "" }]}
+              >
+                <Input
+                  placeholder={t("address.addressLabel")}
                   style={{
                     fontSize: 14,
                     height: 50,
@@ -96,51 +136,6 @@ export default function AddressPage() {
                 />
               </Form.Item>
             </div>
-            <Form.Item
-              label={t("address.street")}
-              name="street"
-              rules={[{ required: true, message: "" }]}
-            >
-              <Input
-                placeholder={t("address.street")}
-                style={{
-                  fontSize: 14,
-                  height: 50,
-                }}
-                autoFocus={false}
-              />
-            </Form.Item>
-            <Form.Item
-              label={t("address.additionalDirection")}
-              name="additional"
-              rules={[{ required: true, message: "" }]}
-            >
-              <Input
-                placeholder={t("address.additionalDirection")}
-                style={{
-                  fontSize: 14,
-                  height: 50,
-                }}
-                autoFocus={false}
-              />
-            </Form.Item>
-
-            <ProPhoneInput label={t("address.mobileNumber")} propName="phone" />
-
-            <Form.Item
-              label={t("address.addressLabel")}
-              name="addressLabel"
-              rules={[{ required: true, message: "" }]}
-            >
-              <Input
-                placeholder={t("address.addressLabel")}
-                style={{
-                  fontSize: 14,
-                  height: 50,
-                }}
-                autoFocus={false}
-              />
-            </Form.Item>
           </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/CarPlateCard.tsx

@@ -2,17 +2,16 @@ import { Form, Input } from "antd";
 import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
 import { updatePlateCar } from "features/order/orderSlice";
 import { useTranslation } from "react-i18next";
-import { useAppDispatch, useAppSelector } from "redux/hooks";
+import { useAppDispatch } from "redux/hooks";
 
 export default function CarPlateCard() {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
 
-  const plateCar = useAppSelector((state) => state.order.plateCar);
   return (
     <>
       <ProInputCard title={t("cart.plateNumber")}>
-        <Form.Item name="plateNumber">
+        <Form.Item name="plateCar">
           <Input
             placeholder={t("cart.plateNumber")}
             size="large"
@@ -27,7 +26,6 @@ export default function CarPlateCard() {
               lineHeight: "140%",
               letterSpacing: 0,
             }}
-            value={plateCar}
             onChange={(e) => {
               dispatch(updatePlateCar(e.target.value));
             }}

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";
@@ -18,12 +15,12 @@ import CarPlateCard from "pages/cart/components/CarPlateCard.tsx";
 import CartFooter from "pages/cart/components/cartFooter/CartFooter.tsx";
 import SpecialRequestCard from "pages/cart/components/specialRequest/SpecialRequestCard.tsx";
 import TableNumberCard from "pages/cart/components/TableNumberCard.tsx";
-import TimeEstimateCard from "pages/cart/components/timeEstimate/TimeEstimateCard.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;
@@ -36,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>
@@ -69,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
@@ -99,139 +85,47 @@ export default function CartMobileTabletLayout({
                   </ProTitle>
                 </div>
 
-                <Button
-                  shape="circle"
-                  iconPlacement="start"
-                  icon={
-                    <DeleteIcon
-                      className={styles.deleteIcon}
-                      color={"#C0BFC4"}
-                      dimension={16}
-                    />
-                  }
-                  size="small"
-                  className={styles.addButton}
-                  style={{
-                    width: 32,
-                    height: 32,
-                    border: "1px solid #DEDEE0",
-                  }}
-                  onClick={() => {
+                <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"
+                    icon={
+                      <DeleteIcon
+                        className={styles.deleteIcon}
+                        color={"#C0BFC4"}
+                        dimension={16}
+                      />
+                    }
+                    size="small"
+                    className={styles.addButton}
+                    style={{
+                      width: 32,
+                      height: 32,
+                      border: "1px solid #DEDEE0",
+                    }}
+                  />
+                </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" }}
-                        />
-                      </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>
+                <ProductChoicesCard
+                  key={index}
+                  product={{ ...item, type: "CartItem" }}
+                  addDividerAfter={index !== items.length - 1}
+                />
               ))}
               <Button
                 style={{ width: "100%", marginTop: 24, color: "#4C4A58" }}
@@ -243,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,38 +100,50 @@ export default function CouponCard() {
             size="large"
             autoFocus={false}
             style={{ padding: "7px 11px", height: 48 }}
+            value={coupon}
             onChange={(e) => {
               dispatch(updateCoupon(e.target.value));
             }}
             suffix={
-              <Button
-                style={{
-                  width: 100,
-                  height: 32,
-                  borderRadius: 100,
-                  backgroundColor: "#333333",
-                  color: "white",
-                  fontWeight: 500,
-                  fontStyle: "Medium",
-                  fontSize: 14,
-                  lineHeight: "140%",
-                  letterSpacing: "0%"
-                }}
-                onClick={() => handleCouponSave(coupon)}
-                icon={<CouponHeartIcon className={styles.couponApplyIcon} />}
-                iconPlacement="end"
-              >
-                <ProText
-                  style={{ position: "relative", top: -1, color: "white" }}
+              isDiscountApplied ? (
+                <CloseCircleOutlined
+                  onClick={handleClearDiscount}
+                  style={{
+                    fontSize: 18,
+                    color: "#999",
+                    cursor: "pointer",
+                  }}
+                />
+              ) : (
+                <Button
+                  style={{
+                    width: 100,
+                    height: 32,
+                    borderRadius: 100,
+                    backgroundColor: "#333333",
+                    color: "white",
+                    fontWeight: 500,
+                    fontStyle: "Medium",
+                    fontSize: 14,
+                    lineHeight: "140%",
+                    letterSpacing: "0%"
+                  }}
+                  onClick={() => handleCouponSave(coupon)}
+                  icon={<CouponHeartIcon className={styles.couponApplyIcon} />}
+                  iconPlacement="end"
                 >
-                  {t("cart.apply")}
-                </ProText>
-              </Button>
+                  <ProText
+                    style={{ position: "relative", top: -1, color: "white" }}
+                  >
+                    {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,24 +149,46 @@ 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)}
           >
-            <ArabicPrice
-              price={3.0}
-              textStyle={{
-                fontWeight: 500,
-                fontStyle: "Medium",
-                fontSize: 14,
-                lineHeight: "140%",
-                letterSpacing: "0%",
-                textAlign: "center",
-                color: "#CC9300",
-              }}
-            />
+            {tip && !isDefaultTip ? (
+              <ArabicPrice
+                price={parseFloat(tip)}
+                textStyle={{
+                  fontWeight: 500,
+                  fontStyle: "Medium",
+                  fontSize: 14,
+                  lineHeight: "140%",
+                  letterSpacing: "0%",
+                  textAlign: "center",
+                  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

@@ -1,5 +1,6 @@
 import { Form, Select } from "antd";
 import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
+import ProText from "components/ProText";
 import {
   removeTable,
   selectCart,
@@ -7,14 +8,16 @@ import {
 } from "features/order/orderSlice.ts";
 import styles from "pages/cart/cart.module.css";
 import { OrderType } from "pages/checkout/hooks/types";
+import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useGetTablesQuery } from "redux/api/others";
 import { useAppDispatch, useAppSelector } from "redux/hooks.ts";
 
 export default function TableNumberCard() {
   const { t } = useTranslation();
-  const { tables, orderType } = useAppSelector(selectCart);
+  const { table, orderType } = useAppSelector(selectCart);
   const dispatch = useAppDispatch();
+  const [isEditing, setIsEditing] = useState(false);
   const { data: tableList } = useGetTablesQuery(
     {
       restaurantID: localStorage.getItem("restaurantID") || "",
@@ -25,6 +28,12 @@ export default function TableNumberCard() {
     },
   );
 
+  const selectedTableName = useMemo(() => {
+    if (!table || !tableList) return table;
+    const foundTable = tableList.find((t: any) => t.id === table);
+    return foundTable?.name || table;
+  }, [table, tableList]);
+
   return (
     <>
       <ProInputCard
@@ -33,58 +42,83 @@ export default function TableNumberCard() {
             ? t("cart.tableNumber")
             : t("cart.selectCompany")
         }
+        titleRight={
+          orderType === OrderType.DineIn ? (
+            <ProText
+              onClick={() => setIsEditing(true)}
+              style={{
+                fontWeight: 500,
+                fontStyle: "Medium",
+                fontSize: 14,
+                lineHeight: "140%",
+                letterSpacing: "0%",
+                color: "#FFB700",
+                cursor: "pointer",
+              }}
+            >
+              {t("cart.changeTable")}
+            </ProText>
+          ) : undefined
+        }
         className={styles.tableNumberCard}
-        dividerStyle={{ margin: "5px 0 0 0" }}
       >
-        <Form.Item
-          label={
-            orderType === OrderType.DineIn
-              ? t("cart.tableNumber")
-              : t("cart.selectCompany")
-          }
-          name="tables"
-          required
-          rules={[
-            {
-              required: true,
-              message:
+        {isEditing || table === "" ? (
+          <Form.Item
+            name="table"
+            required
+            rules={[
+              {
+                required: true,
+                message:
+                  orderType === OrderType.DineIn
+                    ? t("cart.pleaseSelectTable")
+                    : t("cart.pleaseSelectCompany"),
+              },
+            ]}
+            initialValue={table}
+          >
+            <Select
+              value={table}
+              // mode="multiple"
+              placeholder={
                 orderType === OrderType.DineIn
-                  ? t("cart.pleaseSelectTable")
-                  : t("cart.pleaseSelectCompany"),
-            },
-          ]}
-          initialValue={tables}
-          style={{ position: "relative", top: -5 }}
-        >
-          <Select
-            value={tables[0]}
-            // mode="multiple"
-            placeholder={
-              orderType === OrderType.DineIn
-                ? t("cart.tableNumber")
-                : t("cart.selectCompany")
-            }
-            size="large"
-            options={tableList?.map((table: any) => ({
-              label: table.name,
-              value: table.id,
-            }))}
+                  ? t("cart.tableNumber")
+                  : t("cart.selectCompany")
+              }
+              size="large"
+              options={tableList?.map((table: any) => ({
+                label: table.name,
+                value: table.id,
+              }))}
+              style={{
+                width: "100%",
+                height: 50,
+                fontSize: 12,
+                borderRadius: 888,
+              }}
+              onChange={(value) => {
+                dispatch(updateTables(value));
+                if(value) setIsEditing(false);
+              }}
+              onClear={() => {
+                dispatch(removeTable());
+              }}
+              allowClear
+            />
+          </Form.Item>
+        ) : (
+          <ProText
             style={{
-              width: "100%",
-              height: 50,
-              fontSize: 12,
-              borderRadius: 888,
+              fontWeight: 500,
+              fontStyle: "Medium",
+              fontSize: 18,
+              lineHeight: "140%",
+              letterSpacing: "0%",
             }}
-            onChange={(value) => {
-              console.log(value);
-              dispatch(updateTables([value as string]));
-            }}
-            onClear={() => {
-              dispatch(removeTable());
-            }}
-            allowClear
-          />
-        </Form.Item>
+          >
+            {selectedTableName}
+          </ProText>
+        )}
       </ProInputCard>
     </>
   );

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/timeEstimate/TimeEstimateCard.tsx

@@ -4,6 +4,8 @@ import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
 import ProRatioGroups from "components/ProRatioGroups/ProRatioGroups.tsx";
 import dayjs from "dayjs";
 import {
+  selectCart,
+  updateEstimateWay,
   updatePickupDate,
   updatePickupTime,
   updatePickUpType,
@@ -11,9 +13,9 @@ import {
 import useBreakPoint from "hooks/useBreakPoint.ts";
 import { BottomSheet } from "pages/cart/components/timeEstimate/BottomSheet.tsx";
 import { Dialog } from "pages/cart/components/timeEstimate/Dialog.tsx";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import { useAppDispatch } from "redux/hooks";
+import { useAppDispatch, useAppSelector } from "redux/hooks";
 import { SERVER_DATE_FORMAT, UI_TIME_FORMAT } from "utils/constants.ts";
 
 export default function TimeEstimateCard() {
@@ -21,7 +23,7 @@ export default function TimeEstimateCard() {
   const { t } = useTranslation();
   const form = useFormInstance();
   const { isDesktop } = useBreakPoint();
-  const [estimateWay, setEstimateWay] = useState("now");
+  const { estimateWay } = useAppSelector(selectCart);
   const [isEstimateTimeOpen, setIsEstimateTimeOpen] = useState(false);
 
   const handleEstimateTimeSave = (date: string, time: string) => {
@@ -34,6 +36,13 @@ export default function TimeEstimateCard() {
     setIsEstimateTimeOpen(false);
   };
 
+  useEffect(() => {
+    form.setFieldsValue({ estimateWay });
+  }, [estimateWay]);
+
+  console.log(estimateWay);
+  
+
   return (
     <>
       <ProInputCard title={t("cart.estimateTime")}>
@@ -52,16 +61,16 @@ export default function TimeEstimateCard() {
             value={estimateWay}
             onRatioClick={(value) => {
               if (value === "now") {
-                setEstimateWay(value);
+                dispatch(updateEstimateWay(value));
                 handleEstimateTimeSave(
                   dayjs().format(SERVER_DATE_FORMAT),
                   dayjs().format(UI_TIME_FORMAT),
                 );
                 dispatch(updatePickUpType("now"));
               } else {
-                setEstimateWay(value);
-                setIsEstimateTimeOpen(true);
+                dispatch(updateEstimateWay(value));
                 dispatch(updatePickUpType(""));
+                setIsEstimateTimeOpen(true);
               }
             }}
           />

src/pages/cart/components/youMayLike/YouMayAlsoLike.module.css

@@ -10,6 +10,7 @@
   padding: 0;
   scroll-behavior: smooth;
   scrollbar-width: none;
+  gap: 16px;
 }
 
 :global(.darkApp) .youMightAlsoLikeContainer path {

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

@@ -1,10 +1,8 @@
 import { PlusOutlined } from "@ant-design/icons";
-import { Space } from "antd";
 import ArabicPrice from "components/ArabicPrice";
 import BackIcon from "components/Icons/BackIcon";
 import NextIcon from "components/Icons/NextIcon";
 import ImageWithFallback from "components/ImageWithFallback";
-import { ItemDescriptionIcons } from "components/ItemDescriptionIcons/ItemDescriptionIcons.tsx";
 import ProText from "components/ProText.tsx";
 import { menuItems } from "data/menuItems.ts";
 import { addItem } from "features/order/orderSlice.ts";
@@ -12,10 +10,10 @@ import useBreakPoint from "hooks/useBreakPoint";
 import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useAppDispatch, useAppSelector } from "redux/hooks.ts";
-import { colors } from "ThemeConstants.ts";
 import { default_image } from "utils/constants.ts";
 import { Product } from "utils/types/appTypes.ts";
 import styles from "./YouMayAlsoLike.module.css";
+import ProInputCard from "components/ProInputCard/ProInputCard";
 
 export default function YouMightAlsoLike() {
   const { t } = useTranslation();
@@ -108,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,
         },
@@ -119,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",
@@ -182,114 +169,98 @@ export default function YouMightAlsoLike() {
           </button>
         )}
 
-        <div ref={containerRef} className={styles.youMightAlsoLikeContainer}>
-          {menuItems.map((item: Product) => (
-            <div key={item.id}>
-              <div
-                style={{
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "center",
-                  justifyContent: "space-between",
-                  width: isMobile ? "120px" : isTablet ? "120px" : "140px",
-                  position: "relative",
-                  overflow: "hidden",
-                }}
-              >
+        <ProInputCard
+          title={t("cart.youMightAlsoLike")}
+          dividerStyle={{ margin: "3px 0 16px 0" }}
+        >
+          <div className={styles.youMightAlsoLikeContainer}>
+            {menuItems.map((item: Product) => (
+              <div key={item.id}>
                 <div
                   style={{
-                    width: isMobile ? 28 : 24,
-                    height: isMobile ? 28 : 24,
-                    borderRadius: "50%",
-                    top: isMobile ? 65 : isTablet ? 60 : 80,
-                    position: "absolute",
-                    [isRTL ? "left" : "right"]: isMobile ? 10 : 20,
                     display: "flex",
-                    flexDirection: "row",
-                    justifyContent: "center",
-                    cursor: "pointer",
-                    backgroundColor: "white",
-                    zIndex: 999,
+                    flexDirection: "column",
+                    justifyContent: "space-between",
+                    position: "relative",
+                    overflow: "hidden",
                   }}
                 >
-                  <PlusOutlined
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      handleQuickAdd(item);
-                    }}
+                  <div
                     style={{
-                      color: colors.primary,
-                      fontSize: isMobile ? 14 : 16,
+                      width: isMobile ? 28 : 24,
+                      height: isMobile ? 28 : 24,
+                      borderRadius: "50%",
+                      top: isMobile ? 65 : isTablet ? 60 : 80,
+                      position: "absolute",
+                      [isRTL ? "left" : "right"]: isMobile ? 3 : 20,
+                      display: "flex",
+                      flexDirection: "row",
+                      justifyContent: "center",
+                      cursor: "pointer",
+                      backgroundColor: "white",
+                      zIndex: 999,
                     }}
-                  />
-                </div>
-
-                <ImageWithFallback
-                  src={item.image}
-                  alt={item.name}
-                  className={`${styles.popularMenuItemImage} ${
-                    isMobile
-                      ? styles.popularMenuItemImageMobile
-                      : isTablet
-                        ? styles.popularMenuItemImageTablet
-                        : styles.popularMenuItemImageDesktop
-                  }`}
-                  width={isMobile ? 106 : isTablet ? 90 : 110}
-                  height={isMobile ? 96 : isTablet ? 90 : 110}
-                  fallbackSrc={default_image}
-                />
-
-                <Space
-                  direction="vertical"
-                  size="small"
-                  style={{
-                    flex: 1,
-                    rowGap: 0,
-                  }}
-                >
-                  <div style={{ height: 25 }}>
-                    <ProText
-                      style={{
-                        whiteSpace: "nowrap",
-                        overflow: "hidden",
-                        textOverflow: "ellipsis",
-                        padding: isMobile ? 3 : isTablet ? "0 8px" : "0 10px",
-                        fontSize: isMobile ? 12 : isTablet ? 14 : 16,
-                        width: isMobile ? 80 : isTablet ? 100 : 120,
-                        display: "inline-block",
-                        fontWeight: 500,
-                        fontStyle: "Medium",
-                        lineHeight: "140%",
-                        letterSpacing: "0%",
-                        marginTop: 8,
+                  >
+                    <PlusOutlined
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleQuickAdd(item);
                       }}
-                    >
-                      {item.name}
-                    </ProText>
+                      style={{
+                        color: "#302E3E",
+                        fontSize: isMobile ? 14 : 16,
+                      }}
+                    />
                   </div>
 
+                  <ImageWithFallback
+                    src={item.image}
+                    alt={item.name}
+                    className={`${styles.popularMenuItemImage} ${
+                      isMobile
+                        ? styles.popularMenuItemImageMobile
+                        : isTablet
+                          ? styles.popularMenuItemImageTablet
+                          : styles.popularMenuItemImageDesktop
+                    }`}
+                    width={isMobile ? 106 : isTablet ? 90 : 110}
+                    height={isMobile ? 96 : isTablet ? 90 : 110}
+                    fallbackSrc={default_image}
+                  />
+
                   <ArabicPrice
                     price={item.price}
+                    textStyle={{
+                      fontWeight: 500,
+                      fontStyle: "Medium",
+                      fontSize: 12,
+                      lineHeight: "140%",
+                      letterSpacing: "0%",
+                      padding: isRTL ? "8px 2px 0 0" : "8px 0 0 2px",
+                      color: "#595764",
+                    }}
+                  />
+                  <ProText
                     style={{
-                      margin: 0,
-                      WebkitLineClamp: 1,
-                      WebkitBoxOrient: "vertical",
+                      whiteSpace: "nowrap",
                       overflow: "hidden",
                       textOverflow: "ellipsis",
                       padding: isMobile ? 3 : isTablet ? "0 8px" : "0 10px",
                       fontSize: isMobile ? 12 : isTablet ? 14 : 16,
+                      width: isMobile ? 80 : isTablet ? 100 : 120,
                       fontWeight: 600,
                       fontStyle: "SemiBold",
                       lineHeight: "140%",
                       letterSpacing: "0%",
-                      marginTop: 4,
                     }}
-                  />
-                </Space>
+                  >
+                    {item.name}
+                  </ProText>
+                </div>
               </div>
-            </div>
-          ))}
-        </div>
+            ))}
+          </div>
+        </ProInputCard>
       </div>
     </>
   );

src/pages/cart/page.tsx

@@ -10,11 +10,11 @@ import { useAppSelector } from "redux/hooks";
 export default function CartPage() {
   const { isDesktop } = useBreakPoint();
   const [form] = Form.useForm();
-  const { specialRequest, coupon } = useAppSelector(selectCart);
+  const { specialRequest, plateCar } = useAppSelector(selectCart);
 
   useEffect(() => {
-    form.setFieldsValue({ specialRequest, coupon });
-  }, [form, specialRequest, coupon]);
+    form.setFieldsValue({ specialRequest, plateCar });
+  }, [form, specialRequest, plateCar]);
 
   // Prevent keyboard from appearing automatically on mobile
   useEffect(() => {

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

@@ -31,15 +31,14 @@ export default function BriefMenuCard() {
   return (
     <>
       <ProInputCard
-        title={t("checkout.itemsSummary")}
-        dividerStyle={{ margin: "5px 0 0 0" }}
+        title={t("checkout.orderSummary")}
+        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();
-      handleCreateOrder();
+      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

@@ -1,116 +1,222 @@
-import { Checkbox, Form, Input } from "antd";
+import { Divider, Image } from "antd";
 import ProInputCard from "components/ProInputCard/ProInputCard";
-import ProPhoneInput from "components/ProPhoneInput";
 import ProText from "components/ProText";
-import {
-  selectCart,
-  updateGiftDetails,
-  updateOrder,
-} from "features/order/orderSlice";
+import { selectCart } from "features/order/orderSlice";
+import { EGiftCard } from "pages/CardDetails/type";
 import { useTranslation } from "react-i18next";
-import { useAppDispatch, useAppSelector } from "redux/hooks";
-
-const { TextArea } = Input;
+import { useGetEGiftCardsQuery } from "redux/api/others";
+import { useAppSelector } from "redux/hooks";
+import styles from "./GiftDetails.module.css";
+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, 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();
-  const { order } = useAppSelector(selectCart);
-  const dispatch = useAppDispatch();
+  const { giftDetails, items } = useAppSelector(selectCart);
+  const { data: cards } = useGetEGiftCardsQuery();
+  const currentCard = cards?.find(
+    (card: EGiftCard) => card.id == giftDetails?.cardId,
+  );
+  const navigate = useNavigate();
+  const { subdomain } = useParams();
+  const { isRTL } = useAppSelector((state) => state.locale);
+  const totalItems = useMemo(() => {
+    return items.length || 0;
+  }, [items]);
+  const [isGiftAmountBottomSheetOpen, setIsGiftAmountBottomSheetOpen] =
+    useState(false);
+
+  console.log(giftDetails?.giftType);
+
   return (
     <>
       <ProInputCard title={t("address.giftDetails")}>
-        <ProPhoneInput
-          propName="receiverPhone"
-          label={t("address.receiverPhone")}
-          value={order?.receiverPhone}
-          onChange={(e) => {
-            dispatch(updateGiftDetails({ receiverPhone: e }));
+        <div
+          className={styles.orderNotes}
+          onClick={() => {
+            navigate(`/${subdomain}/card-details`);
           }}
-        />
-
-        <Form.Item name="message" label={t("address.message")}>
-          <TextArea
-            placeholder={t("address.message")}
-            size="large"
-            style={{
-              fontSize: 14,
-              borderRadius: 10,
-            }}
-            rows={2}
-            autoFocus={false}
-            value={order?.message}
-            onChange={(e) => {
-              dispatch(updateGiftDetails({ message: e.target.value }));
-            }}
-          />
-        </Form.Item>
-
-        <Form.Item
-          name="senderName"
-          label={t("address.senderName")}
-          rules={[{ required: true, message: "" }]}
-          colon={false}
         >
-          <Input
-            placeholder={t("address.senderName")}
-            size="large"
-            style={{
-              fontSize: 14,
-              height: 50,
-            }}
-            autoFocus={false}
-            value={order?.senderName}
-            onChange={(e) => {
-              dispatch(updateGiftDetails({ senderName: e.target.value }));
-            }}
+          <Image
+            src={currentCard?.imageURL}
+            height={42}
+            width={64}
+            style={{ height: 42, width: 64 }}
           />
-        </Form.Item>
-
-        <ProPhoneInput
-          propName="senderPhone"
-          label={t("address.senderPhone")}
-          value={order?.senderPhone}
-          onChange={(e) => {
-            dispatch(updateGiftDetails({ senderPhone: e }));
-          }}
-        />
-
-        <Form.Item
-          name="senderEmail"
-          label={t("address.senderEmail")}
-          rules={[{ required: true, message: "" }]}
-          colon={false}
-        >
-          <Input
-            placeholder={t("address.senderEmail")}
-            size="large"
+          <div
             style={{
-              fontSize: 14,
-              height: 50,
-            }}
-            autoFocus={false}
-            value={order?.senderEmail}
-            onChange={(e) => {
-              dispatch(updateGiftDetails({ senderEmail: e.target.value }));
-            }}
-          />
-        </Form.Item>
-
-        <Form.Item name="isSecret" colon={false}>
-          <Checkbox
-            style={{
-              fontSize: 14,
-            }}
-            autoFocus={false}
-            checked={order?.isSecret}
-            onChange={(e) => {
-              dispatch(updateGiftDetails({ isSecret: e.target.checked }));
+              display: "flex",
+              flexDirection: "column",
+              gap: 4,
+              width: "100%",
             }}
           >
-            <ProText>{t("address.keepMyNameSecret")}</ProText>
-          </Checkbox>
-        </Form.Item>
+            <ProText
+              style={{
+                fontWeight: 500,
+                fontStyle: "Medium",
+                fontSize: 14,
+                lineHeight: "140%",
+                letterSpacing: "0%",
+                color: "#333333",
+              }}
+            >
+              {t("checkout.giftSummary")}
+            </ProText>
+            <ProText
+              style={{
+                fontWeight: 400,
+                fontStyle: "Regular",
+                fontSize: 12,
+                lineHeight: "140%",
+                letterSpacing: "0%",
+                color: "#5F6C7B",
+              }}
+            >
+              {t("checkout.holdayGiftCard")} - {t("checkout.messageIncluded")}
+            </ProText>
+            <div style={{ display: "flex", flexDirection: "row", gap: 4 }}>
+              <ProText
+                style={{
+                  fontWeight: 400,
+                  fontStyle: "Regular",
+                  fontSize: 12,
+                  lineHeight: "140%",
+                  letterSpacing: "0%",
+                  color: "#040F35",
+                }}
+              >
+                {t("checkout.to")} :
+              </ProText>
+              <ProText
+                style={{
+                  fontWeight: 400,
+                  fontStyle: "Regular",
+                  fontSize: 12,
+                  lineHeight: "140%",
+                  letterSpacing: "0%",
+                  color: "#5F6C7B",
+                }}
+              >
+                {giftDetails?.receiverName}
+              </ProText>
+            </div>
+          </div>
+          {isRTL ? <BackIcon iconSize={24} /> : <NextIcon iconSize={24} />}
+        </div>
+
+        <Divider style={{ margin: "10px 0" }} />
+
+        {(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",
+              flexDirection: "row",
+              justifyContent: "space-between",
+            }}
+            onClick={() => {
+              navigate(`/${subdomain}/cart`);
+            }}
+          >
+            <ProText
+              style={{
+                fontWeight: 400,
+                fontStyle: "Regular",
+                fontSize: 12,
+                lineHeight: "140%",
+                letterSpacing: "0%",
+                color: "#777580",
+                cursor: "pointer",
+              }}
+            >
+              <span
+                style={{
+                  [isRTL ? "marginLeft" : "marginRight"]: 5,
+                  position: "relative",
+                  top: 3.5,
+                }}
+              >
+                <InvoiceIcon />
+              </span>
+              {t("checkout.viewOrder")} ( {totalItems} {t("cart.items")} )
+            </ProText>
+            {isRTL ? <BackIcon /> : <NextIcon />}
+          </div>
+        )}
       </ProInputCard>
+      <GiftAmountBottomSheet
+        isOpen={isGiftAmountBottomSheetOpen}
+        onClose={() => setIsGiftAmountBottomSheetOpen(false)}
+      />
     </>
   );
 }

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

@@ -46,3 +46,13 @@
     opacity: 0.15;
   }
 }
+
+.orderNotes {
+  gap: 20px;
+  opacity: 1;
+  border-radius: 6px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}