apply loyalty discount logic

src/components/OrderSummary/OrderSummary.tsx

@@ -3,9 +3,13 @@ import ArabicPrice from "components/ArabicPrice";
 import {
   selectCart,
   selectCartTotal,
+  selectCartTotalWithLoyaltyDiscount,
+  selectHighestPricedLoyaltyItem,
+  selectLoyaltyValidation,
   updateUseLoyaltyPoints,
 } from "features/order/orderSlice";
 import { useTranslation } from "react-i18next";
+import { useGetRestaurantDetailsQuery } from "redux/api/others";
 import { useAppDispatch, useAppSelector } from "redux/hooks";
 import ProText from "../ProText";
 import ProTitle from "../ProTitle";
@@ -16,8 +20,21 @@ export default function OrderSummary() {
   const { useLoyaltyPoints } = useAppSelector(selectCart);
   const dispatch = useAppDispatch();
   const subtotal = useAppSelector(selectCartTotal);
-  const tax = subtotal * 0.1; // 10% tax
-  const total = subtotal + tax;
+  const subtotalWithLoyaltyDiscount = useAppSelector(
+    selectCartTotalWithLoyaltyDiscount,
+  );
+  const loyaltyValidation = useAppSelector(selectLoyaltyValidation);
+  const highestLoyaltyItem = useAppSelector(selectHighestPricedLoyaltyItem);
+
+  const tax = subtotalWithLoyaltyDiscount * 0.1; // 10% tax on discounted amount
+  const total = subtotalWithLoyaltyDiscount + tax;
+  const loyaltyDiscountAmount = subtotal - subtotalWithLoyaltyDiscount;
+
+  const { data: restaurant } = useGetRestaurantDetailsQuery("595");
+  const isHasLoyaltyGift =
+    (restaurant?.loyalty_stamps ?? 0) -
+      (restaurant?.customer_loyalty_points ?? 0) ===
+    0;
 
   return (
     <>
@@ -31,7 +48,7 @@ export default function OrderSummary() {
           </div>
           <div className={styles.summaryRow}>
             <ProText type="secondary">{t("cart.discount")}</ProText>
-            <ArabicPrice price={0} />
+            <ArabicPrice price={loyaltyDiscountAmount} />
           </div>
           <div className={styles.summaryRow}>
             <ProText type="secondary">{t("cart.riderTip")}</ProText>
@@ -45,16 +62,36 @@ export default function OrderSummary() {
             <ArabicPrice price={total} strong />
           </div>
         </Space>
-        <br />
-        <br />
-        <Checkbox
-          checked={useLoyaltyPoints}
-          onChange={(value) => {
-            dispatch(updateUseLoyaltyPoints(value.target.checked));
-          }}
-        >
-          {t("cart.useLoyaltyPoints")}
-        </Checkbox>
+
+        {isHasLoyaltyGift && (
+          <>
+            <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 && (
+          <div style={{ marginTop: 8, color: "green", fontSize: "12px" }}>
+            {t("cart.loyaltyDiscountApplied", {
+              itemName: highestLoyaltyItem.name,
+              amount: Math.round(loyaltyDiscountAmount).toFixed(2),
+            })}
+          </div>
+        )}
       </Card>
     </>
   );