update footer BS height & enhnace custom split bill BS styles

2025-12-28 10:34:13 +03:00
parent b261f3508f
commit 85636630e3
18 changed files with 203 additions and 162 deletions
--- a/src/pages/cart/components/specialRequest/BottomSheet.tsx
+++ b/src/pages/cart/components/specialRequest/BottomSheet.tsx
@@ -55,7 +55,7 @@ export function BottomSheet({

        <br />

-        <Button type="primary" style={{ width: "100%" }} onClick={handleSave}>
+        <Button type="primary" style={{ width: "100%", height: 48 }} onClick={handleSave}>
          {t("cart.save")}
        </Button>
      </div>
--- a/src/pages/checkout/components/CheckoutButton.tsx
+++ b/src/pages/checkout/components/CheckoutButton.tsx
@@ -44,17 +44,6 @@ export default function CheckoutButton({ form }: { form: FormInstance }) {
    dispatch(updateSplitBillAmount(0));
  }, [dispatch]);

-  const getSplitButtonTitle = useMemo(() => {
-    if (selectedSplitWay === "customAmount") {
-      return t("splitBill.payAsCustomAmount");
-    } else if (selectedSplitWay === "equality") {
-      return t("splitBill.divideTheBillEqually");
-    } else if (selectedSplitWay === "payForItems") {
-      return t("splitBill.payForYourItems");
-    }
-    return t("checkout.splitBill");
-  }, [selectedSplitWay, t]);
-
  const handlePlaceOrderClick = useCallback(async () => {
    try {
      await form.validateFields();
@@ -77,7 +66,9 @@ export default function CheckoutButton({ form }: { form: FormInstance }) {
            className={styles.splitBillButton}
            onClick={handleSplitBillClick}
          >
-            {getSplitButtonTitle}
+            {selectedSplitWay
+              ? t("checkout.removeSplitBill")
+              : t("checkout.splitBill")}
          </Button>
        )}

@@ -90,7 +81,7 @@ export default function CheckoutButton({ form }: { form: FormInstance }) {
          {t("checkout.placeOrder")}
        </Button>
      </Layout.Footer>
-      
+
      <SplitBillChoiceBottomSheet
        isOpen={isSplitBillChoiceBottomSheetOpen}
        onClose={() => setIsSplitBillChoiceBottomSheetOpen(false)}
--- a/src/pages/pay/components/splitBill/CustomAmountChoiceBottomSheet.tsx
+++ b/src/pages/pay/components/splitBill/CustomAmountChoiceBottomSheet.tsx
@@ -1,4 +1,4 @@
-import { Button, Form, InputNumber } from "antd";
+import { Button, Form } from "antd";
 import { ProBottomSheet } from "components/ProBottomSheet/ProBottomSheet.tsx";
 import { useState, useEffect } from "react";
 import { useTranslation } from "react-i18next";
@@ -12,6 +12,7 @@ import { useAppDispatch, useAppSelector } from "redux/hooks";
 import ProText from "components/ProText";
 import ArabicPrice from "components/ArabicPrice";
 import styles from "./SplitBill.module.css";
+import { ProInputNumber } from "components/Inputs/ProInputNumber";

 interface SplitBillChoiceBottomSheetProps {
  isOpen: boolean;
@@ -26,7 +27,7 @@ export function CustomAmountChoiceBottomSheet({
 }: SplitBillChoiceBottomSheetProps) {
  const { t } = useTranslation();
  const dispatch = useAppDispatch();
-  const { splitBillAmount } = useAppSelector(selectCart);
+  const { splitBillAmount, fee } = useAppSelector(selectCart);
  const grandTotal = useAppSelector(selectGrandTotal);
  const [amount, setAmount] = useState<string>(
    splitBillAmount > 0 ? splitBillAmount.toString() : "",
@@ -57,137 +58,145 @@ export function CustomAmountChoiceBottomSheet({
  // Preview: total bill stays the same, remaining = original - current amount being typed
  const previewTotalBill = originalTotalBill;
  const previewRemaining = originalTotalBill - currentAmount;
+  const taxesChargesStyle = {
+    fontWeight: 400,
+    fontStyle: "Regular",
+    fontSize: 12,
+    lineHeight: "140%",
+    letterSpacing: "0%",
+    color: "#777580",
+  };

  return (
-      <ProBottomSheet
-        isOpen={isOpen}
-        onClose={onClose}
-        title={t("splitBill.payAsCustomAmount")}
-        showCloseButton={true}
-        initialSnap={1}
-        height={430}
-        snapPoints={[430]}
-        contentStyle={{
-          padding: 0,
+    <ProBottomSheet
+      isOpen={isOpen}
+      onClose={onClose}
+      title={t("splitBill.payAsCustomAmount")}
+      showCloseButton={true}
+      initialSnap={1}
+      height={425}
+      snapPoints={[425]}
+      contentStyle={{
+        padding: 0,
+      }}
+    >
+      <div
+        style={{
+          padding: "20px",
+          display: "flex",
+          flexDirection: "column",
+          gap: 20,
        }}
      >
-        <div
-          style={{
-            padding: "20px",
-            display: "flex",
-            flexDirection: "column",
-            gap: 20,
-          }}
-        >
-          <div>
-            <ProText
-              style={{
-                fontWeight: 400,
-                fontStyle: "Regular",
-                fontSize: 16,
-                lineHeight: "140%",
-                letterSpacing: "0%",
-              }}
-            >
-              {t("splitBill.howMuchWouldYouLikeToPay")}
-            </ProText>
-            <Form.Item
-              label={t("splitBill.amount")}
-              name="amount"
-              style={{ position: "relative", top: -5 }}
-            >
-              <InputNumber
-                value={amount}
-                onChange={(value) => {
-                  setAmount(value?.toString() || "");
-                  dispatch(updateSplitBillAmount(Number(value) || 0));
-                }}
-                placeholder={t("splitBill.amount")}
-                max={(grandTotal + splitBillAmount).toString()}
-                min={"0"}
-                style={{ width: "100%", fontSize: "1rem" }}
-              />
-            </Form.Item>
-          </div>
-        </div>
-
-        <div
-          style={{
-            display: "flex",
-            flexDirection: "column",
-            backgroundColor: "var(--background)",
-            padding: "20px",
-            opacity: 1,
-            gap: 8,
-            borderTopLeftRadius: 24,
-            borderTopRightRadius: 24,
-            paddingTop: 12,
-            paddingRight: 24,
-            paddingBottom: 24,
-            paddingLeft: 24,
-          }}
-        >
-          <div className={styles.summaryRow}>
-            <ProText
-              style={{
-                fontWeight: 400,
-                fontStyle: "Regular",
-                fontSize: 14,
-                lineHeight: "140%",
-                letterSpacing: "0%",
-              }}
-            >
-              {t("splitBill.totalBill")}
-            </ProText>
-            <ArabicPrice price={previewTotalBill} />
-          </div>
-          <div className={styles.summaryRow}>
-            <ProText
-              style={{
-                fontWeight: 400,
-                fontStyle: "Regular",
-                fontSize: 14,
-                lineHeight: "140%",
-                letterSpacing: "0%",
-              }}
-            >
-              {t("splitBill.remainingToPay")}
-            </ProText>
-            <ArabicPrice price={Math.max(0, previewRemaining)} />
-          </div>
-        </div>
-
-        <div
-          style={{
-            display: "flex",
-            gap: 12,
-            margin: 20,
-          }}
-        >
-          <Button
+        <div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
+          <ProText
            style={{
-              flex: 1,
-              backgroundColor: "#FEEDED",
-              color: "#DD4143",
-              boxShadow: "none",
-              border: "none",
+              fontWeight: 400,
+              fontStyle: "Regular",
+              fontSize: 16,
+              lineHeight: "140%",
+              letterSpacing: "0%",
            }}
-            onClick={handleRemoveSplitWay}
          >
-            {t("splitBill.removeSplit")}
-          </Button>
-          <Button
-            type="primary"
-            style={{
-              flex: 1,
-              boxShadow: "none",
-            }}
-            onClick={handleSave}
-            disabled={!amount || parseFloat(amount) <= 0}
-          >
-            {t("splitBill.confirm")}
-          </Button>
+            {t("splitBill.howMuchWouldYouLikeToPay")}
+          </ProText>
+          <Form.Item name="amount">
+            <ProInputNumber
+              value={amount}
+              onChange={(value) => {
+                setAmount(value?.toString() || "");
+                dispatch(updateSplitBillAmount(Number(value) || 0));
+              }}
+              placeholder={t("splitBill.amount")}
+              max={(grandTotal + splitBillAmount).toString()}
+            />
+          </Form.Item>
        </div>
-      </ProBottomSheet>
+      </div>
+
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          backgroundColor: "var(--background)",
+          padding: "20px",
+          opacity: 1,
+          gap: 8,
+          borderTopLeftRadius: 24,
+          borderTopRightRadius: 24,
+          paddingTop: 12,
+          paddingRight: 24,
+          paddingBottom: 24,
+          paddingLeft: 24,
+        }}
+      >
+        <div className={styles.summaryRow}>
+          <ProText style={taxesChargesStyle}>
+            {t("splitBill.totalBill")}
+          </ProText>
+          <ArabicPrice price={previewTotalBill} textStyle={taxesChargesStyle} />
+        </div>
+        <div className={styles.summaryRow}>
+          <ProText style={taxesChargesStyle}>
+            {t("splitBill.serviceFee")}
+          </ProText>
+          <ArabicPrice price={fee} textStyle={taxesChargesStyle} />
+        </div>
+        <div className={styles.summaryRow}>
+          <ProText
+            style={{
+              fontWeight: 400,
+              fontStyle: "Regular",
+              fontSize: 14,
+              lineHeight: "140%",
+              letterSpacing: "0%",
+            }}
+          >
+            {t("splitBill.remainingToPay")}
+          </ProText>
+          <ArabicPrice
+            price={Math.max(0, previewRemaining)}
+            textStyle={taxesChargesStyle}
+          />
+        </div>
+        <ProText style={taxesChargesStyle}>
+          {t("splitBill.includesAllOfTaxesCharges")}
+        </ProText>
+      </div>
+
+      <div
+        style={{
+          display: "flex",
+          gap: 12,
+          margin: 20,
+        }}
+      >
+        <Button
+          style={{
+            flex: 1,
+            backgroundColor: "#FEEDED",
+            color: "#DD4143",
+            boxShadow: "none",
+            border: "none",
+            height: 48,
+          }}
+          onClick={handleRemoveSplitWay}
+        >
+          {t("splitBill.cancelSplit")}
+        </Button>
+        <Button
+          type="primary"
+          style={{
+            flex: 1,
+            boxShadow: "none",
+            height: 48,
+          }}
+          onClick={handleSave}
+          disabled={!amount || parseFloat(amount) <= 0}
+        >
+          {t("splitBill.confirm")}
+        </Button>
+      </div>
+    </ProBottomSheet>
  );
 }
--- a/src/pages/pay/components/splitBill/EqualltyChoiceBottomSheet.tsx
+++ b/src/pages/pay/components/splitBill/EqualltyChoiceBottomSheet.tsx
@@ -325,14 +325,15 @@ export function EqualltyChoiceBottomSheet({
              color: "#DD4143",
              boxShadow: "none",
              border: "none",
+              height: 48,
            }}
            onClick={handleRemoveSplitWay}
          >
-            {t("splitBill.removeSplit")}
+            {t("splitBill.cancelSplit")}
          </Button>
          <Button
            type="primary"
-            style={{ flex: 1, boxShadow: "none" }}
+            style={{ flex: 1, boxShadow: "none", height: 48 }}
            onClick={handleSave}
          >
            {t("cart.save")}
--- a/src/pages/pay/components/splitBill/PayForYourItemsChoiceBottomSheet.tsx
+++ b/src/pages/pay/components/splitBill/PayForYourItemsChoiceBottomSheet.tsx
@@ -205,14 +205,15 @@ export function PayForYourItemsChoiceBottomSheet({
            color: "#DD4143",
            boxShadow: "none",
            border: "none",
+            height: 48,
          }}
          onClick={handleRemoveSplitWay}
        >
-          {t("splitBill.removeSplit")}
+          {t("splitBill.cancelSplit")}
        </Button>
        <Button
          type="primary"
-          style={{ flex: 1, boxShadow: "none" }}
+          style={{ flex: 1, boxShadow: "none", height: 48 }}
          onClick={handleSave}
          disabled={selectedTotal === 0}
        >