update footer BS height & enhnace custom split bill BS styles

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": "يشمل جميع الضرائب والرسوم"
   }
 }

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

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>
   );

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",

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")}

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>

src/components/CustomBottomSheet/MapBottomSheet.module.css

@@ -62,5 +62,5 @@
 
 .actionButton {
   flex: 1;
-  height: 50px;
+  height: 48px;
 }

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")}

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",

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")}

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

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,
   };

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,

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>

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

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
+    <ProBottomSheet
-        isOpen={isOpen}
+      isOpen={isOpen}
-        onClose={onClose}
+      onClose={onClose}
-        title={t("splitBill.payAsCustomAmount")}
+      title={t("splitBill.payAsCustomAmount")}
-        showCloseButton={true}
+      showCloseButton={true}
-        initialSnap={1}
+      initialSnap={1}
-        height={430}
+      height={425}
-        snapPoints={[430]}
+      snapPoints={[425]}
-        contentStyle={{
+      contentStyle={{
-          padding: 0,
+        padding: 0,
+      }}
+    >
+      <div
+        style={{
+          padding: "20px",
+          display: "flex",
+          flexDirection: "column",
+          gap: 20,
         }}
       >
-        <div
+        <div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
-          style={{
+          <ProText
-            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
             style={{
-              flex: 1,
+              fontWeight: 400,
-              backgroundColor: "#FEEDED",
+              fontStyle: "Regular",
-              color: "#DD4143",
+              fontSize: 16,
-              boxShadow: "none",
+              lineHeight: "140%",
-              border: "none",
+              letterSpacing: "0%",
             }}
-            onClick={handleRemoveSplitWay}
           >
-            {t("splitBill.removeSplit")}
+            {t("splitBill.howMuchWouldYouLikeToPay")}
-          </Button>
+          </ProText>
-          <Button
+          <Form.Item name="amount">
-            type="primary"
+            <ProInputNumber
-            style={{
+              value={amount}
-              flex: 1,
+              onChange={(value) => {
-              boxShadow: "none",
+                setAmount(value?.toString() || "");
-            }}
+                dispatch(updateSplitBillAmount(Number(value) || 0));
-            onClick={handleSave}
+              }}
-            disabled={!amount || parseFloat(amount) <= 0}
+              placeholder={t("splitBill.amount")}
-          >
+              max={(grandTotal + splitBillAmount).toString()}
-            {t("splitBill.confirm")}
+            />
-          </Button>
+          </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>
   );
 }

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")}

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