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,7 +74,8 @@ interface CartState {
  totalServices: number;
  hiddenServices: number;
  visibleServices: number;
-}
+  fee: number;
+  }

 // localStorage keys
 export const CART_STORAGE_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>
        )}

@@ -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}
        >