Initial commit

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

@@ -0,0 +1,17 @@
+import ActionsButtons from "components/ActionsButtons/ActionsButtons";
+import { selectCart, setTmp } from "features/order/orderSlice";
+import { useAppDispatch, useAppSelector } from "redux/hooks";
+
+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}
+      min={1}
+    />
+  );
+}

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

@@ -0,0 +1,46 @@
+import { Card, Divider, Space } from "antd";
+import ArabicPrice from "components/ArabicPrice";
+import ProText from "components/ProText";
+import { selectCart, selectCartTotal } from "features/order/orderSlice";
+import { useTranslation } from "react-i18next";
+import { useAppSelector } from "redux/hooks";
+import styles from "../SplitBillPage.module.css";
+
+export default function PaymentSummary() {
+  const { t } = useTranslation();
+  const { tmp } = useAppSelector(selectCart);
+  const getTotal = useAppSelector(selectCartTotal);
+  const { isRTL } = useAppSelector((state) => state.locale);
+
+  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;
+
+  return (
+    <Card className={`${styles.orderSummary}`}>
+      <Space direction="vertical" style={{ width: "100%" }}>
+        <div className={styles.summaryRow}>
+          <ProText style={{ color: "rgba(67, 78, 92, 1)" }}>
+            {t("checkout.remainingAmount")}
+          </ProText>
+          <ArabicPrice 
+            price={remainingAmount} 
+            style={{ color: "rgba(67, 78, 92, 1)" }}
+          />
+        </div>
+
+        <Divider className={styles.summaryDivider} />
+        <div className={`${styles.summaryRow} ${styles.totalRow}`}>
+          <ProText strong>{t("checkout.totalAmount")}</ProText>
+          <ArabicPrice 
+            price={total} 
+            strong
+          />
+        </div>
+      </Space>
+    </Card>
+  );
+}

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

@@ -0,0 +1,17 @@
+import ActionsButtons from "components/ActionsButtons/ActionsButtons";
+import { selectCart, setTmp } from "features/order/orderSlice";
+import { useAppDispatch, useAppSelector } from "redux/hooks";
+
+export default function TotalPeopleActions() {
+  const dispatch = useAppDispatch();
+  const { tmp } = useAppSelector(selectCart);
+
+  return (
+    <ActionsButtons
+      quantity={tmp?.totalPeople || 1}
+      setQuantity={(value) => dispatch(setTmp({ ...tmp, totalPeople: value }))}
+      max={10}
+      min={1}
+    />
+  );
+}