refactor calculation code

- implement fee
- centralize the code

src/pages/split-bill/components/PayForActions.tsx

@@ -2,15 +2,20 @@ import ActionsButtons from "components/ActionsButtons/ActionsButtons";
 import { selectCart, setTmp } from "features/order/orderSlice";
 import { useAppDispatch, useAppSelector } from "redux/hooks";
 
+interface SplitBillTmp {
+  totalPeople?: number;
+  payFor?: number;
+}
+
 export default function PayForActions() {
   const dispatch = useAppDispatch();
   const { tmp } = useAppSelector(selectCart);
 
   return (
     <ActionsButtons
-      quantity={tmp?.payFor || 1}
-      setQuantity={(value) => dispatch(setTmp({ ...tmp, payFor: value }))}
-      max={tmp?.totalPeople || 10}
+      quantity={(tmp as SplitBillTmp)?.payFor || 1}
+      setQuantity={(value) => dispatch(setTmp({ ...(tmp as SplitBillTmp), payFor: value }))}
+      max={(tmp as SplitBillTmp)?.totalPeople || 10}
       min={1}
     />
   );

src/pages/split-bill/components/PaymentSummary.tsx

@@ -1,23 +1,27 @@
 import { Card, Divider, Space } from "antd";
 import ArabicPrice from "components/ArabicPrice";
 import ProText from "components/ProText";
-import { selectCart, selectCartTotal } from "features/order/orderSlice";
+import {
+    selectCart,
+    selectGrandTotal
+} from "features/order/orderSlice";
 import { useTranslation } from "react-i18next";
 import { useAppSelector } from "redux/hooks";
 import { ProGray1 } from "ThemeConstants";
 import styles from "../SplitBillPage.module.css";
 
+interface SplitBillTmp {
+  totalPeople?: number;
+  payFor?: number;
+}
+
 export default function PaymentSummary() {
   const { t } = useTranslation();
   const { tmp } = useAppSelector(selectCart);
-  const getTotal = useAppSelector(selectCartTotal);
+  const total = useAppSelector(selectGrandTotal);
 
-  const subtotal = getTotal;
-  const tax = subtotal * 0.1; // 10% tax
-  const total = subtotal + tax;
-
-  const costPerPerson = total / (tmp?.totalPeople || 1);
-  const remainingAmount = total - (tmp?.payFor || 1) * costPerPerson;
+  const costPerPerson = total / ((tmp as SplitBillTmp)?.totalPeople || 1);
+  const remainingAmount = total - ((tmp as SplitBillTmp)?.payFor || 1) * costPerPerson;
 
   return (
     <Card className={`${styles.orderSummary}`}>