From 85636630e30714e49943b62c28cbd640d76b1a6b Mon Sep 17 00:00:00 2001 From: Mohammed Al-yaseen Date: Sun, 28 Dec 2025 10:34:13 +0300 Subject: [PATCH] update footer BS height & enhnace custom split bill BS styles --- src/assets/locals/ar.json | 8 +- src/assets/locals/en.json | 8 +- src/components/ArabicPrice/ArabicPrice.tsx | 10 +- .../CancelOrderBottomSheet.tsx | 4 +- .../DatePickerBottomSheet.tsx | 2 +- .../CustomBottomSheet/InfoButtonSheet.tsx | 2 +- .../MapBottomSheet.module.css | 2 +- .../OpeningTimesBottomSheet.tsx | 2 +- .../CustomBottomSheet/RateBottomSheet.tsx | 2 +- .../CustomBottomSheet/TipBottomSheet.tsx | 2 +- src/components/Inputs/ProInputNumber.tsx | 20 ++ .../ProBottomSheet/ProBottomSheet.tsx | 8 +- src/features/order/orderSlice.ts | 5 +- .../components/specialRequest/BottomSheet.tsx | 2 +- .../checkout/components/CheckoutButton.tsx | 17 +- .../CustomAmountChoiceBottomSheet.tsx | 261 +++++++++--------- .../splitBill/EqualltyChoiceBottomSheet.tsx | 5 +- .../PayForYourItemsChoiceBottomSheet.tsx | 5 +- 18 files changed, 203 insertions(+), 162 deletions(-) create mode 100644 src/components/Inputs/ProInputNumber.tsx diff --git a/src/assets/locals/ar.json b/src/assets/locals/ar.json index 2fb8d6b..43e3470 100644 --- 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": "يشمل جميع الضرائب والرسوم" } } diff --git a/src/assets/locals/en.json b/src/assets/locals/en.json index ab8ef87..eba3a52 100644 --- 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" } } diff --git a/src/components/ArabicPrice/ArabicPrice.tsx b/src/components/ArabicPrice/ArabicPrice.tsx index a902264..4cf9585 100644 --- 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 = ({ @@ -18,6 +19,7 @@ const ArabicPrice: React.FC = ({ 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 = ({ lineHeight: 1, fontSize: "14px", ...(decorationStyle ?? {}), + ...textStyle, }} > {formattedPrice} @@ -62,6 +65,7 @@ const ArabicPrice: React.FC = ({ position: "relative", top: -3, ...(decorationStyle ?? {}), + ...textStyle, }} > {isRTL ? restaurant.local_currency : restaurant.global_currency} @@ -76,6 +80,7 @@ const ArabicPrice: React.FC = ({ display: "inline-block", fontSize: "14px", ...(decorationStyle ?? {}), + ...textStyle, }} > {formattedPrice} @@ -88,13 +93,16 @@ const ArabicPrice: React.FC = ({ lineHeight: 1, display: "inline-block", ...(decorationStyle ?? {}), + ...textStyle, }} > {isRTL ? restaurant.local_currency : restaurant.global_currency} ) : ( - {formattedPrice} + + {formattedPrice} + )} ); diff --git a/src/components/CustomBottomSheet/CancelOrderBottomSheet.tsx b/src/components/CustomBottomSheet/CancelOrderBottomSheet.tsx index 4c13355..39d8359 100644 --- a/src/components/CustomBottomSheet/CancelOrderBottomSheet.tsx +++ b/src/components/CustomBottomSheet/CancelOrderBottomSheet.tsx @@ -122,7 +122,7 @@ export function CancelOrderBottomSheet() { > diff --git a/src/components/CustomBottomSheet/MapBottomSheet.module.css b/src/components/CustomBottomSheet/MapBottomSheet.module.css index cb960fd..9dba323 100644 --- 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; } diff --git a/src/components/CustomBottomSheet/OpeningTimesBottomSheet.tsx b/src/components/CustomBottomSheet/OpeningTimesBottomSheet.tsx index d0a71b1..2167847 100644 --- a/src/components/CustomBottomSheet/OpeningTimesBottomSheet.tsx +++ b/src/components/CustomBottomSheet/OpeningTimesBottomSheet.tsx @@ -205,7 +205,7 @@ export function OpeningTimesBottomSheet({ diff --git a/src/pages/checkout/components/CheckoutButton.tsx b/src/pages/checkout/components/CheckoutButton.tsx index 7d86431..14c5a56 100644 --- 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")} )} @@ -90,7 +81,7 @@ export default function CheckoutButton({ form }: { form: FormInstance }) { {t("checkout.placeOrder")} - + setIsSplitBillChoiceBottomSheetOpen(false)} diff --git a/src/pages/pay/components/splitBill/CustomAmountChoiceBottomSheet.tsx b/src/pages/pay/components/splitBill/CustomAmountChoiceBottomSheet.tsx index d313909..3d5952f 100644 --- 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( 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 ( - +
-
-
- - {t("splitBill.howMuchWouldYouLikeToPay")} - - - { - setAmount(value?.toString() || ""); - dispatch(updateSplitBillAmount(Number(value) || 0)); - }} - placeholder={t("splitBill.amount")} - max={(grandTotal + splitBillAmount).toString()} - min={"0"} - style={{ width: "100%", fontSize: "1rem" }} - /> - -
-
- -
-
- - {t("splitBill.totalBill")} - - -
-
- - {t("splitBill.remainingToPay")} - - -
-
- -
- - + {t("splitBill.howMuchWouldYouLikeToPay")} + + + { + setAmount(value?.toString() || ""); + dispatch(updateSplitBillAmount(Number(value) || 0)); + }} + placeholder={t("splitBill.amount")} + max={(grandTotal + splitBillAmount).toString()} + /> +
- +
+ +
+
+ + {t("splitBill.totalBill")} + + +
+
+ + {t("splitBill.serviceFee")} + + +
+
+ + {t("splitBill.remainingToPay")} + + +
+ + {t("splitBill.includesAllOfTaxesCharges")} + +
+ +
+ + +
+ ); } diff --git a/src/pages/pay/components/splitBill/EqualltyChoiceBottomSheet.tsx b/src/pages/pay/components/splitBill/EqualltyChoiceBottomSheet.tsx index 8081d65..d0ec453 100644 --- 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")}