Initial commit

src/pages/split-bill/SplitBillPage.module.css

@@ -0,0 +1,156 @@
+.orderSummary :global(.ant-card-body) {
+  padding: 16px !important;
+}
+
+/* Enhanced responsive order summary */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .orderSummary {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+}
+
+.orderSummary {
+  transition: all 0.3s ease;
+}
+
+/* Enhanced responsive order summary */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .orderSummary {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+}
+
+.summaryRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 16px;
+}
+
+/* Enhanced responsive summary rows */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .summaryRow {
+    padding: 12px 0;
+    font-size: 16px;
+  }
+}
+
+@media (min-width: 1025px) {
+  .summaryRow {
+    padding: 16px 0;
+    font-size: 18px;
+  }
+}
+
+.summaryDivider {
+  margin: 8px 0 !important;
+}
+
+/* Enhanced responsive summary divider */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .summaryDivider {
+    margin: 20px 0 !important;
+  }
+}
+
+@media (min-width: 1025px) {
+  .summaryDivider {
+    margin: 24px 0 !important;
+  }
+}
+
+.totalRow {
+  font-weight: bold;
+  font-size: 16px;
+}
+
+/* Enhanced responsive total row */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .totalRow {
+    font-size: 18px;
+    padding-top: 20px;
+    margin-top: 12px;
+  }
+}
+
+@media (min-width: 1025px) {
+  .totalRow {
+    font-size: 20px;
+    padding-top: 24px;
+    margin-top: 16px;
+  }
+}
+
+.desktopOrderSummary {
+  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+}
+
+.desktopSummaryRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 0;
+  font-size: 16px;
+}
+
+.desktopTotalRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 0;
+  margin-top: 16px;
+}
+
+/* Enhanced responsive animations */
+@media (prefers-reduced-motion: no-preference) {
+  .orderSummary {
+    animation: fadeInUp 0.8s ease-out;
+  }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Enhanced responsive focus states */
+.orderSummary:focus {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+}
+
+@media (min-width: 768px) {
+  .orderSummary:focus {
+    outline-offset: 4px;
+  }
+}
+
+/* Enhanced responsive print styles */
+@media print {
+  .orderSummary {
+    box-shadow: none !important;
+    border: 1px solid #ccc !important;
+  }
+}
+
+/* Enhanced responsive hover effects */
+@media (hover: hover) {
+  .orderSummary:hover {
+    transform: translateY(-2px);
+  }
+
+  .menuItemImage:hover {
+    transform: scale(1.05);
+  }
+
+  [data-theme="dark"] .orderSummary:hover {
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
+  }
+}

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}
+    />
+  );
+}

src/pages/split-bill/page.tsx

@@ -0,0 +1,148 @@
+import { Button } from "antd";
+import PeopleIcon from "components/Icons/PeopleIcon";
+import PaymentMethods from "components/PaymentMethods/PaymentMethods";
+import ProHeader from "components/ProHeader/ProHeader";
+import ProInputCard from "components/ProInputCard/ProInputCard";
+import ProText from "components/ProText";
+import { useTranslation } from "react-i18next";
+import { Link, useParams } from "react-router-dom";
+import { useAppSelector } from "redux/hooks";
+import { ProBlack2 } from "ThemeConstants";
+import PayForActions from "./components/PayForActions";
+import PaymentSummary from "./components/PaymentSummary";
+import TotalPeopleActions from "./components/TotalPeopleActions";
+
+export default function SplitBillPage() {
+  const { t } = useTranslation();
+  const { id } = useParams();
+  const { themeName } = useAppSelector((state) => state.theme);
+
+  return (
+    <>
+      <ProHeader>{t("checkout.splitBill")}</ProHeader>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          height: "82vh",
+          padding: 16,
+          gap: 16,
+          overflow: "auto",
+          scrollbarWidth: "none",
+        }}
+      >
+        <ProInputCard title={t("checkout.splitBill")}>
+          <div
+            style={{ display: "flex", flexDirection: "column", gap: "1rem" }}
+          >
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "row",
+                justifyContent: "space-between",
+                gap: "1rem",
+                padding: 8,
+              }}
+            >
+              <div
+                style={{ display: "flex", flexDirection: "row", gap: "1rem" }}
+              >
+                <Button
+                  type="text"
+                  shape="circle"
+                  style={{
+                    backgroundColor: "rgba(95, 108, 123, 0.05)",
+                    position: "relative",
+                    top: -5,
+                  }}
+                >
+                  <PeopleIcon />
+                </Button>
+                <ProText
+                  style={{
+                    fontSize: "1rem",
+                    marginTop: 2,
+                    color: "rgba(67, 78, 92, 1)",
+                  }}
+                >
+                  {t("checkout.totalPeople")}
+                </ProText>
+              </div>
+
+              <TotalPeopleActions />
+            </div>
+
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "row",
+                justifyContent: "space-between",
+                gap: "1rem",
+                padding: 8,
+              }}
+            >
+              <div
+                style={{ display: "flex", flexDirection: "row", gap: "1rem" }}
+              >
+                <Button
+                  type="text"
+                  shape="circle"
+                  style={{
+                    backgroundColor: "rgba(95, 108, 123, 0.05)",
+                    position: "relative",
+                    top: -5,
+                  }}
+                >
+                  <PeopleIcon />
+                </Button>
+                <ProText
+                  style={{
+                    fontSize: "1rem",
+                    marginTop: 2,
+                    color: "rgba(67, 78, 92, 1)",
+                  }}
+                >
+                  {t("checkout.payFor")}
+                </ProText>
+              </div>
+
+              <PayForActions />
+            </div>
+          </div>
+        </ProInputCard>
+        <PaymentMethods />
+        <PaymentSummary />
+      </div>
+      <div
+        style={{
+          width: "100%",
+          padding: "16px 16px 0",
+          position: "fixed",
+          bottom: 0,
+          left: 0,
+          height: "10vh",
+          display: "flex",
+          flexDirection: "row",
+          justifyContent: "space-around",
+          gap: "1rem",
+          backgroundColor: themeName === "light" ? "white" : ProBlack2,
+        }}
+      >
+        <Link to={`${id}/order`} style={{ width: "100%" }}>
+          <Button
+            type="primary"
+            shape="round"
+            style={{
+              width: "100%",
+              height: 48,
+              marginBottom: 16,
+              boxShadow: "none",
+            }}
+          >
+            {t("checkout.placeOrder")}
+          </Button>
+        </Link>
+      </div>
+    </>
+  );
+}