diff --git a/src/ThemeConstants.ts b/src/ThemeConstants.ts index 55403d8..c8a6804 100644 --- a/src/ThemeConstants.ts +++ b/src/ThemeConstants.ts @@ -108,6 +108,7 @@ export const SharedThemeVars = { colorPrimary: colors.primary, fontFamily: "var(--font-roboto)", colorLink: colors.primary, + lineHeight: "140%" // colorItemTextSelected: colors.primary // Menu Item Active Item Color }; diff --git a/src/assets/locals/ar.json b/src/assets/locals/ar.json index 3d651d5..cdbbb4c 100644 --- a/src/assets/locals/ar.json +++ b/src/assets/locals/ar.json @@ -425,12 +425,10 @@ "description": "تقسيم الفاتورة", "splitBill": "تقسيم الفاتورة", "splitBillDescription": "تقسيم الفاتورة", - "splitBillButton": "تقسيم الفاتورة", + "customAmount": "مبلغ مخصص", + "divideEqually": "تقسيم الى حسب العدد", + "payForItems": "دفع للطلبات الخاصة بي", "splitBillButtonDescription": "تقسيم الفاتورة", - "payAsCustomAmount": "دفع كمبلغ مخصص", - "payAsSplitAmount": "دفع كمبلغ مقسم", - "divideTheBillEqually": "تقسيم الفاتورة الى حسب العدد", - "payForYourItems": "دفع للطلبات الخاصة بي", "enterCustomAmount": "أدخل المبلغ المخصص", "amountPlaceholder": "0.00", "divisionPreview": "معاينة التقسيم", diff --git a/src/assets/locals/en.json b/src/assets/locals/en.json index 3730e65..92a169e 100644 --- a/src/assets/locals/en.json +++ b/src/assets/locals/en.json @@ -437,12 +437,10 @@ "description": "Split Bill", "splitBill": "Split Bill", "splitBillDescription": "Split Bill", - "splitBillButton": "Split Bill", + "customAmount": "Custom Amount", + "divideEqually": "Divide Equally", + "payForItems": "Pay for Items", "splitBillButtonDescription": "Split Bill", - "payAsCustomAmount": "Pay as Custom Amount", - "payAsSplitAmount": "Pay as Split Amount", - "divideTheBillEqually": "Divide the Bill Equally", - "payForYourItems": "Pay for Your Items", "enterCustomAmount": "Enter Custom Amount", "amountPlaceholder": "0.00", "divisionPreview": "Division Preview", diff --git a/src/components/Icons/EditIcon.tsx b/src/components/Icons/EditIcon.tsx index 23ac8e8..6bd9304 100644 --- a/src/components/Icons/EditIcon.tsx +++ b/src/components/Icons/EditIcon.tsx @@ -7,23 +7,26 @@ const EditIcon = ({ className, onClick }: EditIconType) => { return ( - - + + + + + + + + ); }; diff --git a/src/components/Icons/RCardIcon.tsx b/src/components/Icons/RCardIcon.tsx new file mode 100644 index 0000000..e8d3797 --- /dev/null +++ b/src/components/Icons/RCardIcon.tsx @@ -0,0 +1,31 @@ +interface RCardIconType { + className?: string; + onClick?: () => void; +} + +const RCardIcon = ({ className, onClick }: RCardIconType) => { + return ( + + + + + ); +}; + +export default RCardIcon; diff --git a/src/components/Icons/cart/CouponHeart.tsx b/src/components/Icons/cart/CouponHeart.tsx index aa8d90e..eb2e0b0 100644 --- a/src/components/Icons/cart/CouponHeart.tsx +++ b/src/components/Icons/cart/CouponHeart.tsx @@ -6,16 +6,16 @@ interface CouponHeartType { const CouponHeartIcon = ({ className, onClick }: CouponHeartType) => { return ( - {t("cart.orderSummary")} + + {t("cart.orderSummary")} + - +
{t("cart.basketTotal")} @@ -67,7 +78,7 @@ export default function OrderSummary() {
)} @@ -75,23 +86,32 @@ export default function OrderSummary() { {t("cart.discount")} - +
{t("cart.tax")} - +
{splitBillAmount > 0 && (
{t("splitBill.splitBillAmount")} - +
)} - +
{t("cart.totalAmount")} diff --git a/src/components/PaymentMethods/PaymentMethods.module.css b/src/components/PaymentMethods/PaymentMethods.module.css index 26fff27..13a97b5 100644 --- a/src/components/PaymentMethods/PaymentMethods.module.css +++ b/src/components/PaymentMethods/PaymentMethods.module.css @@ -27,4 +27,78 @@ top: 1px } +.eCardIcon { + position: relative; + top: 3px; + margin-right: 4px; +} + +/* Make AntD checkbox look like a circular check indicator (scoped via CSS modules) */ +.circleCheckbox :global(.ant-checkbox-inner) { + width: 24px; + height: 24px; + border-radius: 50% !important; + border: 1.5px solid #D5D8DA; + background: transparent; +} + +.circleCheckbox :global(.ant-checkbox-checked .ant-checkbox-inner) { + border-radius: 50% !important; + background: transparent; + border-color: #ffb700; +} + +/* Replace AntD checkmark with a filled inner circle when checked (match SVG) */ +.circleCheckbox :global(.ant-checkbox-inner::after) { + content: ""; + border: 0 !important; + transform: none !important; + width: 0; + height: 0; + left: 50%; + top: 50%; +} + +.circleCheckbox :global(.ant-checkbox-checked .ant-checkbox-inner::after) { + width: 18px; + height: 18px; + margin-left: -9px; + margin-top: -9px; + border-radius: 50%; + background: #ffb700; +} + +/* Apply same circular style to Radio buttons */ +.circleCheckbox :global(.ant-radio-inner) { + width: 24px; + height: 24px; + border-radius: 50% !important; + border: 1.5px solid #D5D8DA; + background: transparent; +} + +.circleCheckbox :global(.ant-radio-checked .ant-radio-inner) { + border-radius: 50% !important; + background: transparent; + border-color: #ffb700; +} + +.circleCheckbox :global(.ant-radio-inner::after) { + content: ""; + border: 0 !important; + transform: none !important; + width: 0; + height: 0; + left: 50%; + top: 50%; +} + +.circleCheckbox :global(.ant-radio-checked .ant-radio-inner::after) { + width: 18px; + height: 18px; + margin-left: -9px; + margin-top: -9px; + border-radius: 50%; + background: #ffb700; +} diff --git a/src/components/PaymentMethods/PaymentMethods.tsx b/src/components/PaymentMethods/PaymentMethods.tsx index d0b1228..1b97846 100644 --- a/src/components/PaymentMethods/PaymentMethods.tsx +++ b/src/components/PaymentMethods/PaymentMethods.tsx @@ -14,15 +14,17 @@ import { colors, ProGray1 } from "../../ThemeConstants"; import ProInputCard from "../ProInputCard/ProInputCard"; import styles from "./PaymentMethods.module.css"; import { OrderType } from "pages/checkout/hooks/types.ts"; +import RCardIcon from "components/Icons/RCardIcon"; const PaymentMethods = () => { const { t } = useTranslation(); const { paymentMethod, orderType } = useAppSelector(selectCart); const dispatch = useAppDispatch(); const grandTotal = useAppSelector(selectGrandTotal); + const { isRTL } = useAppSelector((state) => state.locale); const options: { - label: string; + label: React.ReactNode; value: string; price?: string; icon?: React.ReactNode; @@ -32,23 +34,40 @@ const PaymentMethods = () => { ...(orderType !== OrderType.Gift ? [ { - label: t("checkout.cash"), + label: ( + <> + + $ + + {t("checkout.cash")} + + ), value: "cash", - price: grandTotal.toString(), + price: grandTotal.toFixed(2), style: { color: colors.primary, }, }, ] : []), - // { - // label: t("checkout.creditDebitCard"), - // value: "creditDebitCard", - // price: t("checkout.expiresIn") + ":12/26", - // hideCurrency: true, - // }, + // { + // label: t("checkout.creditDebitCard"), + // value: "creditDebitCard", + // price: t("checkout.expiresIn") + ":12/26", + // hideCurrency: true, + // }, { - label: t("checkout.differentCard"), + label: ( + <> + + {t("checkout.differentCard")} + + ), value: "differentCard", icon: (
@@ -56,7 +75,7 @@ const PaymentMethods = () => {
), hideCurrency: true, - } + }, // { // label: t("checkout.fascanoWallet"), // value: "fascanoWallet", @@ -95,6 +114,7 @@ const PaymentMethods = () => { key={option.value} value={option.value} onClick={() => onPaymentSelect(option.value)} + className={styles.circleCheckbox} style={{ height: 48, borderRadius: 888, diff --git a/src/components/ProHeader/ProHeader.tsx b/src/components/ProHeader/ProHeader.tsx index f20e774..9bd4f17 100644 --- a/src/components/ProHeader/ProHeader.tsx +++ b/src/components/ProHeader/ProHeader.tsx @@ -77,7 +77,20 @@ const ProHeader: FunctionComponent = ({ }} {...other} > - {children} + + {children} +
@@ -96,7 +109,20 @@ const ProHeader: FunctionComponent = ({ }} {...other} > - {children} + + {children} + diff --git a/src/components/ProInputCard/ProInputCard.tsx b/src/components/ProInputCard/ProInputCard.tsx index 0f277e0..8e39b9e 100644 --- a/src/components/ProInputCard/ProInputCard.tsx +++ b/src/components/ProInputCard/ProInputCard.tsx @@ -35,6 +35,7 @@ const ProInputCard: FunctionComponent = ({ fontSize: 18, lineHeight: "140%", letterSpacing: "0%", + color: '#333333', }} > {title} @@ -43,7 +44,7 @@ const ProInputCard: FunctionComponent = ({ {title && typeof title !== "string" && title}
{titleRight}
- + {children} ); diff --git a/src/components/ProPhoneInput.tsx b/src/components/ProPhoneInput.tsx index d4ef6cc..3b688b7 100644 --- a/src/components/ProPhoneInput.tsx +++ b/src/components/ProPhoneInput.tsx @@ -13,6 +13,7 @@ interface ProPhoneInput { getValueCallback?: (value: string) => void; value?: string; onChange?: (value: string) => void; + hiddenLabel?: boolean; } const ProPhoneInput: FunctionComponent = ({ @@ -21,6 +22,7 @@ const ProPhoneInput: FunctionComponent = ({ getValueCallback, value, onChange, + hiddenLabel = true, }) => { const form = useFormInstance(); const { t } = useTranslation(); @@ -29,7 +31,7 @@ const ProPhoneInput: FunctionComponent = ({ return ( = ({ themeName={themeName} placeholder={t("login.mobileNumber")} propName={propName} - label={label} + label={hiddenLabel ? undefined : label} /> ); diff --git a/src/pages/address/address.module.css b/src/pages/address/address.module.css index 38554fe..555666d 100644 --- a/src/pages/address/address.module.css +++ b/src/pages/address/address.module.css @@ -184,6 +184,7 @@ width: 100%; font-size: 16px; box-shadow: none; + border-color: #C0BFC4; } .placeOrderButton { diff --git a/src/pages/cart/cart.module.css b/src/pages/cart/cart.module.css index 418b2b1..1795dfb 100644 --- a/src/pages/cart/cart.module.css +++ b/src/pages/cart/cart.module.css @@ -67,11 +67,6 @@ top: 5px !important; } -.couponApplyIcon { - margin-left: 8px; - font-size: 14px; -} - .donateHandIcon { color: var(--primary); font-size: 24px; @@ -434,11 +429,6 @@ font-size: 14px !important; } - .couponApplyIcon { - margin-left: 10px; - font-size: 16px; - } - .donateHandIcon { font-size: 28px; } @@ -481,11 +471,6 @@ font-size: 16px !important; } - .couponApplyIcon { - margin-left: 12px; - font-size: 18px; - } - .donateHandIcon { font-size: 32px; } @@ -607,6 +592,17 @@ } .deleteIcon { - position: relative; - top: 1px; + position: relative; + top: 1px; +} + +.couponApplyIcon { + position: relative; + top: 1px; +} + +.editIcon { + position: absolute; + top: -7px; + right: 5px; } \ No newline at end of file diff --git a/src/pages/cart/components/CouponCard.tsx b/src/pages/cart/components/CouponCard.tsx index dbab110..0b06a1b 100644 --- a/src/pages/cart/components/CouponCard.tsx +++ b/src/pages/cart/components/CouponCard.tsx @@ -1,6 +1,7 @@ import { Button, Form, Input, message } from "antd"; import CouponHeartIcon from "components/Icons/cart/CouponHeart.tsx"; import ProInputCard from "components/ProInputCard/ProInputCard.tsx"; +import ProText from "components/ProText"; import { selectCart, updateCoupon, @@ -72,13 +73,8 @@ export default function CouponCard() { // // // } - dividerStyle={{ margin: "5px 0 0 0" }} > - + handleCouponSave(coupon)} + icon={} + iconPlacement="end" > - {t("cart.apply")} - + + {t("cart.apply")} + } /> diff --git a/src/pages/cart/components/RewardWaiterCard.tsx b/src/pages/cart/components/RewardWaiterCard.tsx index 1764fdf..4febdc4 100644 --- a/src/pages/cart/components/RewardWaiterCard.tsx +++ b/src/pages/cart/components/RewardWaiterCard.tsx @@ -12,7 +12,6 @@ import styles from "pages/cart/cart.module.css"; import { useState } from "react"; import { useTranslation } from "react-i18next"; import { useAppDispatch, useAppSelector } from "redux/hooks.ts"; -import { colors } from "ThemeConstants.ts"; export default function RewardWaiterCard() { const { t } = useTranslation(); @@ -54,10 +53,32 @@ export default function RewardWaiterCard() {
- - {t("cart.rewardYourWaiter")} - - +
+ + {t("cart.rewardYourWaiter")} + +
+ {t("cart.rewardYourWaiter100")}
@@ -74,41 +95,66 @@ export default function RewardWaiterCard() { style={{ borderRadius: 100, height: 32, - borderColor: "rgba(255, 183, 0, 0.12)", - backgroundColor: colors.primary, - color: colors.primary, - }} - > - - - + diff --git a/src/pages/checkout/components/CheckoutButton.tsx b/src/pages/checkout/components/CheckoutButton.tsx index 14c5a56..ff181bd 100644 --- a/src/pages/checkout/components/CheckoutButton.tsx +++ b/src/pages/checkout/components/CheckoutButton.tsx @@ -58,6 +58,17 @@ export default function CheckoutButton({ form }: { form: FormInstance }) { [orderType], ); + const getSplitButtonTitle = useMemo(() => { + if (selectedSplitWay === "customAmount") { + return t("splitBill.customAmount"); + } else if (selectedSplitWay === "equality") { + return t("splitBill.divideEqually"); + } else if (selectedSplitWay === "payForItems") { + return t("splitBill.payForItems"); + } + return t("checkout.splitBill"); + }, [selectedSplitWay, t]); + return ( <> @@ -66,9 +77,7 @@ export default function CheckoutButton({ form }: { form: FormInstance }) { className={styles.splitBillButton} onClick={handleSplitBillClick} > - {selectedSplitWay - ? t("checkout.removeSplitBill") - : t("checkout.splitBill")} + {getSplitButtonTitle} )} diff --git a/src/pages/checkout/components/CustomerInformationCard.module.css b/src/pages/checkout/components/CustomerInformationCard.module.css index fe695d6..fb5dd7d 100644 --- a/src/pages/checkout/components/CustomerInformationCard.module.css +++ b/src/pages/checkout/components/CustomerInformationCard.module.css @@ -1,3 +1,5 @@ .customerInformationCard { - height: 215px !important; -} \ No newline at end of file + display: flex; + flex-direction: column; + gap: 16px; +} diff --git a/src/pages/checkout/components/CustomerInformationCard.tsx b/src/pages/checkout/components/CustomerInformationCard.tsx index 50473da..b7705da 100644 --- a/src/pages/checkout/components/CustomerInformationCard.tsx +++ b/src/pages/checkout/components/CustomerInformationCard.tsx @@ -16,12 +16,9 @@ export default function CustomerInformationCard() { return ( orderType !== OrderType.Gift && ( <> - -
- + +
+ -
-
- +
diff --git a/src/pages/pay/components/splitBill/CustomAmountChoiceBottomSheet.tsx b/src/pages/pay/components/splitBill/CustomAmountChoiceBottomSheet.tsx index 3d5952f..7924a7b 100644 --- a/src/pages/pay/components/splitBill/CustomAmountChoiceBottomSheet.tsx +++ b/src/pages/pay/components/splitBill/CustomAmountChoiceBottomSheet.tsx @@ -71,7 +71,7 @@ export function CustomAmountChoiceBottomSheet({ {s?.title} diff --git a/src/pages/restaurant/restaurant.module.css b/src/pages/restaurant/restaurant.module.css index d5f0afc..69ccfbf 100644 --- a/src/pages/restaurant/restaurant.module.css +++ b/src/pages/restaurant/restaurant.module.css @@ -975,6 +975,7 @@ } .scheduledOrderIcon { - margin-top: -2px; + position: relative; + top: 1px; font-size: 22px; }