OrderSummary: add use loyalty points checkbox

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>
     </>
   );