OrderSummary: add use loyalty points checkbox

src/assets/locals/ar.json

@@ -227,7 +227,8 @@
     "pleaseAddItemsToCart": "يرجى إضافة عناصر إلى السلة",
     "pleaseSelectEstimateTime": "يرجى اختيار وقت التقديم",
     "pleaseSelectTable": "يرجى اختيار رقم الطاولة",
-    "pleaseSelectCollectionMethod": "يرجى اختيار طريقة الاستلام"
+    "pleaseSelectCollectionMethod": "يرجى اختيار طريقة الاستلام",
+    "useLoyaltyPoints": "استخدام نقاط الولاء"
   },
   "checkout": {
     "title": "الدفع",

src/assets/locals/en.json

@@ -237,7 +237,8 @@
     "pleaseAddItemsToCart": "Please add items to your cart",
     "pleaseSelectEstimateTime": "Please select estimate time",
     "pleaseSelectTable": "Please select table",
-    "pleaseSelectCollectionMethod": "Please select collection method"
+    "pleaseSelectCollectionMethod": "Please select collection method",
+    "useLoyaltyPoints": "Use Loyalty Points"
   },
   "checkout": {
     "title": "Checkout",

src/components/OrderSummary/OrderSummary.tsx

@@ -1,14 +1,20 @@
-import { Card, Divider, Space } from "antd";
+import { Card, Checkbox, Divider, Space } from "antd";
 import ArabicPrice from "components/ArabicPrice";
-import { selectCartTotal } from "features/order/orderSlice";
+import {
+  selectCart,
+  selectCartTotal,
+  updateUseLoyaltyPoints,
+} from "features/order/orderSlice";
 import { useTranslation } from "react-i18next";
-import { useAppSelector } from "redux/hooks";
+import { useAppDispatch, useAppSelector } from "redux/hooks";
 import ProText from "../ProText";
 import ProTitle from "../ProTitle";
 import styles from "./OrderSummary.module.css";
 
 export default function OrderSummary() {
   const { t } = useTranslation();
+  const { useLoyaltyPoints } = useAppSelector(selectCart);
+  const dispatch = useAppDispatch();
   const subtotal = useAppSelector(selectCartTotal);
   const tax = subtotal * 0.1; // 10% tax
   const total = subtotal + tax;
@@ -33,10 +39,22 @@ export default function OrderSummary() {
           </div>
           <Divider className={styles.summaryDivider} />
           <div className={`${styles.summaryRow} ${styles.totalRow}`}>
-            <ProText strong type="secondary">{t("cart.totalAmount")}</ProText>
+            <ProText strong type="secondary">
+              {t("cart.totalAmount")}
+            </ProText>
             <ArabicPrice price={total} strong />
           </div>
         </Space>
+        <br />
+        <br />
+        <Checkbox
+          checked={useLoyaltyPoints}
+          onChange={(value) => {
+            dispatch(updateUseLoyaltyPoints(value.target.checked));
+          }}
+        >
+          {t("cart.useLoyaltyPoints")}
+        </Checkbox>
       </Card>
     </>
   );

src/features/order/orderSlice.ts

@@ -52,6 +52,7 @@ interface CartState {
   phone: string;
   paymentMethod: string;
   orderType: string;
+  useLoyaltyPoints: boolean;
 }
 
 // localStorage keys
@@ -72,6 +73,7 @@ export const CART_STORAGE_KEYS = {
   PHONE: 'fascano_phone',
   PAYMENT_METHOD: 'fascano_payment_method',
   ORDER_TYPE: 'fascano_order_type',
+  USE_LOYALTY_POINTS: 'fascano_use_loyalty_points',
 } as const;
 
 // Utility functions for localStorage
@@ -105,6 +107,7 @@ const initialState: CartState = {
   phone: getFromLocalStorage(CART_STORAGE_KEYS.PHONE, ""),
   paymentMethod: getFromLocalStorage(CART_STORAGE_KEYS.PAYMENT_METHOD, ""),
   orderType: getFromLocalStorage(CART_STORAGE_KEYS.ORDER_TYPE, ""),
+  useLoyaltyPoints: getFromLocalStorage(CART_STORAGE_KEYS.USE_LOYALTY_POINTS, false),
 };
 
 const orderSlice = createSlice({
@@ -308,6 +311,14 @@ const orderSlice = createSlice({
         localStorage.setItem(CART_STORAGE_KEYS.ORDER_TYPE, JSON.stringify(state.orderType));
       }
     },
+    updateUseLoyaltyPoints(state, action: PayloadAction<boolean>) {
+      state.useLoyaltyPoints = action.payload;
+      
+      // Sync to localStorage
+      if (typeof window !== 'undefined') {
+        localStorage.setItem(CART_STORAGE_KEYS.USE_LOYALTY_POINTS, JSON.stringify(state.useLoyaltyPoints));
+      }
+    },
   },
 });
 
@@ -333,6 +344,7 @@ export const {
   updatePhone,
   updatePaymentMethod,
   updateOrderType,
+  updateUseLoyaltyPoints,
   reset,
 } = orderSlice.actions;
 

src/pages/cart/components/CartMobileTabletLayout.tsx

@@ -41,7 +41,6 @@ export default function CartMobileTabletLayout({
   const { t } = useTranslation();
   const { items, collectionMethod, orderType } = useAppSelector(selectCart);
   const { id } = useParams();
-
   const { isMobile, isTablet } = useBreakPoint();
 
   const getResponsiveClass = () => (isTablet ? "tablet" : "mobile");