enhance loyalty section UI

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/checkout/page.tsx

@@ -23,6 +23,7 @@ import { CarCard } from "./components/CarCard";
 import { CollectWay } from "./components/CollectWay/CollectWay";
 import PickupTimeCard from "./components/pickupEstimate/TimeEstimateCard";
 import VoucherSummary from "pages/redeem/components/VoucherSummary/VoucherSummary";
+import EarnLoyaltyPointsCard from "pages/cart/components/earnLoyaltyPointsCard/EarnLoyaltyPointsCard";
 
 export default function CheckoutPage() {
   const { t } = useTranslation();
@@ -85,7 +86,9 @@ export default function CheckoutPage() {
             <OfficeDetails /> */}
             {/* <GiftDetails /> */}
             {/* <BriefMenu /> */}
-            {orderType !== OrderType.Redeem && orderType !== OrderType.Gift && <CouponCard />}
+            {orderType !== OrderType.Redeem && orderType !== OrderType.Gift && (
+              <CouponCard />
+            )}
 
             {/* Collection Method */}
             {orderType === OrderType.Pickup && (
@@ -123,7 +126,12 @@ export default function CheckoutPage() {
             )}
 
             {/* Reward Your Waiter */}
-            {orderType !== OrderType.Redeem && orderType !== OrderType.Gift && <RewardWaiterCard />}
+            {orderType !== OrderType.Redeem && orderType !== OrderType.Gift && (
+              <RewardWaiterCard />
+            )}
+            {orderType !== OrderType.Redeem && orderType !== OrderType.Gift && (
+              <EarnLoyaltyPointsCard />
+            )}
             <BriefMenuCard />
             <Ads1 />
             <OrderSummary />

src/pages/rewardsAndLoyalty/page.tsx

@@ -7,8 +7,8 @@ import { useNavigate, useParams } from "react-router-dom";
 import styles from "./rewardsAndLoyalty.module.css";
 
 import { OrderType } from "pages/checkout/hooks/types.ts";
-import { useAppSelector } from "redux/hooks";
-import { selectCart } from "features/order/orderSlice";
+import { useAppDispatch, useAppSelector } from "redux/hooks";
+import { selectCart, updateUseLoyaltyPoints } from "features/order/orderSlice";
 import CoinsIcon from "components/Icons/CoinsIcon";
 import ArabicPrice from "components/ArabicPrice";
 import RaiseIcon from "components/Icons/RaiseIcon";
@@ -19,6 +19,7 @@ import dayjs from "dayjs";
 import PopularIcon from "components/Icons/PopularIcon";
 
 export default function RewardsAndLoyalityPage() {
+  const dispatch = useAppDispatch();
   const { t } = useTranslation();
   const navigate = useNavigate();
   const { subdomain } = useParams();
@@ -27,19 +28,17 @@ export default function RewardsAndLoyalityPage() {
   const loyaltyStamps = restaurant?.loyalty_stamps ?? 0;
   const customerLoyaltyPoints = restaurant?.customer_loyalty_points ?? 0;
   const { data: loyaltyHistory } = useGetLoyaltyHistoryQuery();
+  const loyaltyHistories = loyaltyHistory?.filter(
+    (LH) => Number(LH.restaurant_id) === Number(restaurant.restautantId),
+  );
 
-  console.log(loyaltyHistory);
-
-  // Calculate percentage: (customer_loyalty_points / loyalty_stamps) * 100
-  const progressPercent =
-    loyaltyStamps > 0
-      ? Math.min((customerLoyaltyPoints / loyaltyStamps) * 100, 100)
-      : 0;
-
-  const handleCheckout = () => {
-    navigate(`/${subdomain}/menu?orderType=${OrderType.Redeem}`);
+  const handleRedeem = () => {
+    navigate(`/${subdomain}/menu?orderType=${OrderType.DineIn}`);
+    dispatch(updateUseLoyaltyPoints(true));
   };
 
+  const currentStampRound = customerLoyaltyPoints % loyaltyStamps;
+
   return (
     <>
       <Layout>
@@ -49,7 +48,7 @@ export default function RewardsAndLoyalityPage() {
             <Tooltip title="3 done / 3 in progress / 4 to do">
               <div style={{ margin: "47px 47px 20px 47px" }}>
                 <Progress
-                  percent={70}
+                  percent={(currentStampRound / loyaltyStamps) * 100}
                   format={() => (
                     <div
                       style={{
@@ -70,9 +69,7 @@ export default function RewardsAndLoyalityPage() {
                           textAlign: "center",
                         }}
                       >
-                        {Number(customerLoyaltyPoints / loyaltyStamps).toFixed(
-                          0,
-                        )}
+                        {currentStampRound} / {loyaltyStamps}
                       </ProText>
                       <ProText
                         style={{
@@ -332,7 +329,7 @@ export default function RewardsAndLoyalityPage() {
                 type="primary"
                 shape="round"
                 className={styles.checkoutButton}
-                onClick={handleCheckout}
+                onClick={handleRedeem}
                 style={{
                   width: "100%",
                   height: 40,
@@ -349,8 +346,8 @@ export default function RewardsAndLoyalityPage() {
           <ProInputCard title={t("rewardsAndLoyalty.loyaltyHistory")}>
             <Timeline
               items={
-                loyaltyHistory && loyaltyHistory.length > 0
-                  ? loyaltyHistory.map((item: any, index: number) => ({
+                loyaltyHistories && loyaltyHistories.length > 0
+                  ? loyaltyHistories.map((item: any, index: number) => ({
                       content: (
                         <div key={index}>
                           {/* <ProText

src/pages/rewardsAndLoyalty/rewardsAndLoyalty.module.css

@@ -39,7 +39,13 @@
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  background-color: var(--secondary-background);
-  padding: 16px;
+  background-color: var(--background);
   width: 100%;
+  width: 275;
+  opacity: 1;
+  padding-top: 14px;
+  padding-right: 12px;
+  padding-bottom: 14px;
+  padding-left: 12px;
+  margin-top: 12px;
 }