refactor calculation code

- implement fee
- centralize the code

src/components/OrderSummary/OrderSummary.tsx

@@ -3,11 +3,13 @@ import ArabicPrice from "components/ArabicPrice";
 import {
   selectCart,
   selectCartTotal,
-  selectCartTotalWithLoyaltyDiscount,
+  selectGrandTotal,
   selectHighestPricedLoyaltyItem,
   selectLoyaltyValidation,
+  selectTaxAmount,
   updateUseLoyaltyPoints,
 } from "features/order/orderSlice";
+import { OrderType } from "pages/checkout/hooks/types";
 import { useTranslation } from "react-i18next";
 import { useGetRestaurantDetailsQuery } from "redux/api/others";
 import { useAppDispatch, useAppSelector } from "redux/hooks";
@@ -18,19 +20,15 @@ import styles from "./OrderSummary.module.css";
 export default function OrderSummary() {
   const { t } = useTranslation();
   const { useLoyaltyPoints } = useAppSelector(selectCart);
+  const { data: restaurant } = useGetRestaurantDetailsQuery("595");
+  const { orderType } = useAppSelector(selectCart);
   const dispatch = useAppDispatch();
   const subtotal = useAppSelector(selectCartTotal);
-  const subtotalWithLoyaltyDiscount = useAppSelector(
-    selectCartTotalWithLoyaltyDiscount,
-  );
   const loyaltyValidation = useAppSelector(selectLoyaltyValidation);
   const highestLoyaltyItem = useAppSelector(selectHighestPricedLoyaltyItem);
+  const taxAmount = useAppSelector(selectTaxAmount);
+  const grandTotal = useAppSelector(selectGrandTotal);
 
-  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) <=
@@ -46,20 +44,24 @@ export default function OrderSummary() {
             <ProText type="secondary">{t("cart.basketTotal")}</ProText>
             <ArabicPrice price={subtotal} />
           </div>
+          {orderType != OrderType.DineIn && <div className={styles.summaryRow}>
+            <ProText type="secondary">{t("cart.deliveryFee")}</ProText>
+            <ArabicPrice price={Number(restaurant?.delivery_fees || 0)} />
+          </div>}
           <div className={styles.summaryRow}>
             <ProText type="secondary">{t("cart.discount")}</ProText>
-            <ArabicPrice price={loyaltyDiscountAmount} />
+            <ArabicPrice price={highestLoyaltyItem?.price || 0} />
           </div>
           <div className={styles.summaryRow}>
-            <ProText type="secondary">{t("cart.riderTip")}</ProText>
-            <ArabicPrice price={tax} />
+            <ProText type="secondary">{t("cart.tax")}</ProText>
+            <ArabicPrice price={taxAmount || 0} />
           </div>
           <Divider className={styles.summaryDivider} />
           <div className={`${styles.summaryRow} ${styles.totalRow}`}>
             <ProText strong type="secondary">
               {t("cart.totalAmount")}
             </ProText>
-            <ArabicPrice price={total} strong />
+            <ArabicPrice price={grandTotal} />
           </div>
         </Space>
 
@@ -88,7 +90,7 @@ export default function OrderSummary() {
           <div style={{ marginTop: 8, color: "green", fontSize: "12px" }}>
             {t("cart.loyaltyDiscountApplied", {
               itemName: highestLoyaltyItem.name,
-              amount: Math.round(loyaltyDiscountAmount).toFixed(2),
+              amount: Math.round(highestLoyaltyItem.price || 0).toFixed(2),
             })}
           </div>
         )}