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/assets/locals/ar.json
+++ b/src/assets/locals/ar.json
@@ -287,7 +287,8 @@
    "pleaseSelectPaymentMethod": "يرجى اختيار طريقة الدفع",
    "pleaseEnterPhoneNumber": "يرجى إدخال رقم الهاتف",
    "viewOrder": "عرض الطلب",
-    "itemsSummary": "ملخص العناصر"
+    "itemsSummary": "ملخص العناصر",
+    "removeSplitBill": "إزالة التقسيم"
  },
  "address": {
    "title": "العنوان",
@@ -436,7 +437,7 @@
    "yourAmount": "مبلغك",
    "selectedTotal": "المجموع المحدد",
    "splitBillAmount": "مبلغ تقسيم الفاتورة",
-    "removeSplit": "إزالة التقسيم",
+    "cancelSplit": "إلغاء التقسيم",
    "amount": "المبلغ",
    "howMuchWouldYouLikeToPay": "كم مبلغ تريد دفعه؟",
    "confirm": "تأكيد",
@@ -447,6 +448,7 @@
    "payWithQR": "دفع باستخدام الكود الباري",
    "cancel": "إلغاء",
    "done": "تم",
-    "inviteEveryonePayingWithYou": "دع الجميع يدفعوا معك"
+    "inviteEveryonePayingWithYou": "دع الجميع يدفعوا معك",
+    "includesAllOfTaxesCharges": "يشمل جميع الضرائب والرسوم"
  }
 }
--- a/src/assets/locals/en.json
+++ b/src/assets/locals/en.json
@@ -297,7 +297,8 @@
    "pleaseSelectPaymentMethod": "Please select payment method",
    "pleaseEnterPhoneNumber": "Please enter phone number",
    "viewOrder": "View Order",
-    "itemsSummary": "Items Summary"
+    "itemsSummary": "Items Summary",
+    "removeSplitBill": "Remove Split Bill"
  },
  "address": {
    "title": "Address",
@@ -448,7 +449,7 @@
    "yourAmount": "Your Amount",
    "selectedTotal": "Selected Total",
    "splitBillAmount": "Split Bill Amount",
-    "removeSplit": "Remove Split",
+    "cancelSplit": "Cancel Split",
    "amount": "Amount",
    "howMuchWouldYouLikeToPay": "How much would you like to pay?",
    "confirm": "Confirm",
@@ -459,6 +460,7 @@
    "payWithQR": "Pay with QR",
    "cancel": "Cancel",
    "done": "Done",
-    "inviteEveryonePayingWithYou": "Invite everyone paying with you"
+    "inviteEveryonePayingWithYou": "Invite everyone paying with you",
+    "includesAllOfTaxesCharges": "includes all of taxes charges"
  }
 }
--- a/src/components/ArabicPrice/ArabicPrice.tsx
+++ b/src/components/ArabicPrice/ArabicPrice.tsx
@@ -9,6 +9,7 @@ interface ArabicPriceProps {
  type?: "secondary" | "success" | "warning" | "danger";
  className?: string;
  hideCurrency?: boolean;
+  textStyle?: React.CSSProperties;
 }

 const ArabicPrice: React.FC<ArabicPriceProps> = ({
@@ -18,6 +19,7 @@ const ArabicPrice: React.FC<ArabicPriceProps> = ({
  type,
  className,
  hideCurrency = false,
+  textStyle = {},
 }) => {
  const { isRTL } = useAppSelector((state) => state.locale);
  const { restaurant } = useAppSelector((state) => state.order);
@@ -49,6 +51,7 @@ const ArabicPrice: React.FC<ArabicPriceProps> = ({
              lineHeight: 1,
              fontSize: "14px",
              ...(decorationStyle ?? {}),
+              ...textStyle,
            }}
          >
            {formattedPrice}
@@ -62,6 +65,7 @@ const ArabicPrice: React.FC<ArabicPriceProps> = ({
              position: "relative",
              top: -3,
              ...(decorationStyle ?? {}),
+              ...textStyle,
            }}
          >
            {isRTL ? restaurant.local_currency : restaurant.global_currency}
@@ -76,6 +80,7 @@ const ArabicPrice: React.FC<ArabicPriceProps> = ({
              display: "inline-block",
              fontSize: "14px",
              ...(decorationStyle ?? {}),
+              ...textStyle,
            }}
          >
            {formattedPrice}
@@ -88,13 +93,16 @@ const ArabicPrice: React.FC<ArabicPriceProps> = ({
              lineHeight: 1,
              display: "inline-block",
              ...(decorationStyle ?? {}),
+              ...textStyle,
            }}
          >
            {isRTL ? restaurant.local_currency : restaurant.global_currency}
          </span>
        </>
      ) : (
-        <span style={decorationStyle}>{formattedPrice}</span>
+        <span style={{ ...decorationStyle, ...textStyle }}>
+          {formattedPrice}
+        </span>
      )}
    </ProText>
  );
--- a/src/components/CustomBottomSheet/CancelOrderBottomSheet.tsx
+++ b/src/components/CustomBottomSheet/CancelOrderBottomSheet.tsx
@@ -122,7 +122,7 @@ export function CancelOrderBottomSheet() {
          >
            <Button
              type="primary"
-              style={{ width: "100%", height: 50, color: "#FFF" }}
+              style={{ width: "100%", height: 48, color: "#FFF" }}
              onClick={handleKeepOrder}
            >
              {t("order.keepOrder")}
@@ -132,7 +132,7 @@ export function CancelOrderBottomSheet() {
              type="primary"
              style={{
                width: "100%",
-                height: 50,
+                height: 48,
                color: "#ea1f22",
                borderColor: "#ea1f22",
                backgroundColor: "#fff",
--- a/src/components/CustomBottomSheet/DatePickerBottomSheet.tsx
+++ b/src/components/CustomBottomSheet/DatePickerBottomSheet.tsx
@@ -277,7 +277,7 @@ export default function DatePickerBottomSheet({

        <Button
          type="primary"
-          style={{ width: "100%", height: 50, marginTop: 10 }}
+          style={{ width: "100%", height: 48, marginTop: 10 }}
          onClick={handleConfirm}
        >
          {t("common.confirm")}
--- a/src/components/CustomBottomSheet/InfoButtonSheet.tsx
+++ b/src/components/CustomBottomSheet/InfoButtonSheet.tsx
@@ -50,7 +50,7 @@ export function InfoButtonSheet({
        <ProText type="secondary" style={{textAlign:"center"}}>{description}</ProText>
      </div>
      <br />
-      <Button type="primary" style={{ width: "100%", boxShadow: "none" }} onClick={handleSave}>
+      <Button type="primary" style={{ width: "100%", boxShadow: "none", height: 48 }} onClick={handleSave}>
        {t("address.gotIt")}
      </Button>
    </ProBottomSheet>
--- a/src/components/CustomBottomSheet/MapBottomSheet.module.css
+++ b/src/components/CustomBottomSheet/MapBottomSheet.module.css
@@ -62,5 +62,5 @@

 .actionButton {
  flex: 1;
-  height: 50px;
+  height: 48px;
 }
--- a/src/components/CustomBottomSheet/OpeningTimesBottomSheet.tsx
+++ b/src/components/CustomBottomSheet/OpeningTimesBottomSheet.tsx
@@ -205,7 +205,7 @@ export function OpeningTimesBottomSheet({
      </div>
      <Button
        type="primary"
-        style={{ width: "100%", height: 50 }}
+        style={{ width: "100%", height: 48 }}
        onClick={onClose}
      >
        {t("menu.close")}
--- a/src/components/CustomBottomSheet/RateBottomSheet.tsx
+++ b/src/components/CustomBottomSheet/RateBottomSheet.tsx
@@ -231,7 +231,7 @@ export function RateBottomSheet() {
              type="primary"
              style={{
                width: "100%",
-                height: 50,
+                height: 48,
                color: colors.primary,
                borderColor: colors.primary,
                backgroundColor: "#fff",
--- a/src/components/CustomBottomSheet/TipBottomSheet.tsx
+++ b/src/components/CustomBottomSheet/TipBottomSheet.tsx
@@ -70,7 +70,7 @@ export function TipBottomSheet({

        <Button
          type="primary"
-          style={{ width: "100%", height: 50 }}
+          style={{ width: "100%", height: 48 }}
          onClick={handleSave}
        >
          {t("cart.addTip")}
--- a/src/components/Inputs/ProInputNumber.tsx
+++ b/src/components/Inputs/ProInputNumber.tsx
@@ -0,0 +1,20 @@
+import { InputNumber, InputNumberProps } from "antd";
+
+export const ProInputNumber = (props: InputNumberProps) => {
+  return (
+    <InputNumber
+      style={{
+        fontFamily: "Outfit",
+        fontWeight: 400,
+        fontStyle: "Regular",
+        fontSize: 12,
+        lineHeight: "140%",
+        letterSpacing: "0%",
+        height: 48,
+        width: "100%",
+      }}
+      min={"0"}
+      {...props}
+    />
+  );
+};
--- a/src/components/ProBottomSheet/ProBottomSheet.tsx
+++ b/src/components/ProBottomSheet/ProBottomSheet.tsx
@@ -213,7 +213,9 @@ export function ProBottomSheet({
    bottom: 0,
    height: snapPoints[currentSnap] || height,
    backgroundColor:
-      themeName === "dark" ? darkColors.bgColor : lightColors.bgColor,
+      themeName === "dark"
+        ? darkColors.secondaryBgColor
+        : lightColors.secondaryBgColor,
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    boxShadow:
@@ -259,7 +261,9 @@ export function ProBottomSheet({
    overflow: "auto",
    padding: "0 20px",
    backgroundColor:
-      themeName === "dark" ? darkColors.bgColor : lightColors.bgColor,
+      themeName === "dark"
+        ? darkColors.secondaryBgColor
+        : lightColors.secondaryBgColor,
    color: themeName === "dark" ? "#ffffff" : "#000000",
    ...contentStyle,
  };
--- a/src/features/order/orderSlice.ts
+++ b/src/features/order/orderSlice.ts
@@ -74,6 +74,7 @@ interface CartState {
  totalServices: number;
  hiddenServices: number;
  visibleServices: number;
+  fee: number;
  }

 // localStorage keys
@@ -198,6 +199,7 @@ const initialState: CartState = {
  totalServices: 8,
  hiddenServices: 0,
  visibleServices: 0,
+  fee: 0,
 };

 const orderSlice = createSlice({
@@ -209,6 +211,7 @@ const orderSlice = createSlice({
    },
    updateRestaurant(state, action: PayloadAction<Partial<RestaurantDetails>>) {
      state.restaurant = action.payload;
+      state.fee = Number(action.payload.delivery_fees || 0);
      state.visibleServices = [
        action.payload.dineIn,
        action.payload.delivery,
--- 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>
        )}

--- 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,6 +58,14 @@ 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
@@ -65,8 +74,8 @@ export function CustomAmountChoiceBottomSheet({
      title={t("splitBill.payAsCustomAmount")}
      showCloseButton={true}
      initialSnap={1}
-        height={430}
-        snapPoints={[430]}
+      height={425}
+      snapPoints={[425]}
      contentStyle={{
        padding: 0,
      }}
@@ -79,7 +88,7 @@ export function CustomAmountChoiceBottomSheet({
          gap: 20,
        }}
      >
-          <div>
+        <div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
          <ProText
            style={{
              fontWeight: 400,
@@ -91,12 +100,8 @@ export function CustomAmountChoiceBottomSheet({
          >
            {t("splitBill.howMuchWouldYouLikeToPay")}
          </ProText>
-            <Form.Item
-              label={t("splitBill.amount")}
-              name="amount"
-              style={{ position: "relative", top: -5 }}
-            >
-              <InputNumber
+          <Form.Item name="amount">
+            <ProInputNumber
              value={amount}
              onChange={(value) => {
                setAmount(value?.toString() || "");
@@ -104,8 +109,6 @@ export function CustomAmountChoiceBottomSheet({
              }}
              placeholder={t("splitBill.amount")}
              max={(grandTotal + splitBillAmount).toString()}
-                min={"0"}
-                style={{ width: "100%", fontSize: "1rem" }}
            />
          </Form.Item>
        </div>
@@ -128,18 +131,16 @@ export function CustomAmountChoiceBottomSheet({
        }}
      >
        <div className={styles.summaryRow}>
-            <ProText
-              style={{
-                fontWeight: 400,
-                fontStyle: "Regular",
-                fontSize: 14,
-                lineHeight: "140%",
-                letterSpacing: "0%",
-              }}
-            >
+          <ProText style={taxesChargesStyle}>
            {t("splitBill.totalBill")}
          </ProText>
-            <ArabicPrice price={previewTotalBill} />
+          <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
@@ -153,8 +154,14 @@ export function CustomAmountChoiceBottomSheet({
          >
            {t("splitBill.remainingToPay")}
          </ProText>
-            <ArabicPrice price={Math.max(0, previewRemaining)} />
+          <ArabicPrice
+            price={Math.max(0, previewRemaining)}
+            textStyle={taxesChargesStyle}
+          />
        </div>
+        <ProText style={taxesChargesStyle}>
+          {t("splitBill.includesAllOfTaxesCharges")}
+        </ProText>
      </div>

      <div
@@ -171,16 +178,18 @@ export function CustomAmountChoiceBottomSheet({
            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",
+            height: 48,
          }}
          onClick={handleSave}
          disabled={!amount || parseFloat(amount) <= 0}
--- 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}
        >