diff --git a/src/assets/locals/ar.json b/src/assets/locals/ar.json index 1f9d573..0b55f19 100644 --- a/src/assets/locals/ar.json +++ b/src/assets/locals/ar.json @@ -166,6 +166,7 @@ "customizable": "قابل للتخصيص" }, "cart": { + "leaveANoteHere": "أي تعليمات خاصة لطلبك..", "title": "السلة", "emptyCart": "سلة المشتريات فارغة", "emptyCartMessage": "يبدو أنك لم تضيف أي عناصر إلى سلة المشتريات بعد. ابدأ في استكشاف قائمتنا للعثور على وجبات لذيذة!", @@ -263,6 +264,8 @@ "checkRequiredFields": "يرجى التحقق من الحقول المطلوبة" }, "checkout": { + "customerName": "اسم العميل", + "customerInformation": "تفاصيل العميل", "title": "الدفع", "cash": "كاش", "creditDebitCard": "بطاقة ائتمان/ائتمان", diff --git a/src/assets/locals/en.json b/src/assets/locals/en.json index 6439615..a9fd4aa 100644 --- a/src/assets/locals/en.json +++ b/src/assets/locals/en.json @@ -178,6 +178,7 @@ "customizable": "Customizable" }, "cart": { + "leaveANoteHere": "Leave a note here..", "title": "Cart", "emptyCart": "Cart is empty", "emptyCartMessage": "Looks like you haven't added any items to your cart yet. Start exploring our menu to find delicious meals!", @@ -273,6 +274,8 @@ "checkRequiredFields": "Please check required fields" }, "checkout": { + "customerName": "Customer Name", + "customerInformation": "Customer Information", "title": "Checkout", "cash": "Cash", "creditDebitCard": "Credit/Debit Card", diff --git a/src/components/CartActionsButtons/CartActionsButtons.tsx b/src/components/CartActionsButtons/CartActionsButtons.tsx index 74392c7..88c8c03 100644 --- a/src/components/CartActionsButtons/CartActionsButtons.tsx +++ b/src/components/CartActionsButtons/CartActionsButtons.tsx @@ -104,7 +104,7 @@ export default function CartActionsButtons({ item }: { item: CartItem }) { )} dispatch( diff --git a/src/components/CustomBottomSheet/TipBottomSheet.tsx b/src/components/CustomBottomSheet/TipBottomSheet.tsx index 2cfffdc..e07987f 100644 --- a/src/components/CustomBottomSheet/TipBottomSheet.tsx +++ b/src/components/CustomBottomSheet/TipBottomSheet.tsx @@ -42,7 +42,7 @@ export function TipBottomSheet({ showCloseButton={false} initialSnap={1} height={370} - snapPoints={["30vh"]} + snapPoints={[370]} >
- +
+ +

diff --git a/src/components/Icons/DeleteIcon.tsx b/src/components/Icons/DeleteIcon.tsx index 9fcc4d6..3b6c0af 100644 --- a/src/components/Icons/DeleteIcon.tsx +++ b/src/components/Icons/DeleteIcon.tsx @@ -1,22 +1,26 @@ interface DeleteIconType { className?: string; onClick?: () => void; + color?: string; + dimension?: number; } -const DeleteIcon = ({ className, onClick }: DeleteIconType) => { +const DeleteIcon = ({ className, onClick, color, dimension }: DeleteIconType) => { return ( ); diff --git a/src/components/Icons/PlusIcon.tsx b/src/components/Icons/PlusIcon.tsx index 40d4864..300039e 100644 --- a/src/components/Icons/PlusIcon.tsx +++ b/src/components/Icons/PlusIcon.tsx @@ -1,13 +1,14 @@ interface PlusIconType { className?: string; onClick?: () => void; + dimesion?: string } -const PlusIcon = ({ className, onClick }: PlusIconType) => { +const PlusIcon = ({ className, onClick, dimesion }: PlusIconType) => { return ( diff --git a/src/components/PaymentMethods/PaymentMethods.tsx b/src/components/PaymentMethods/PaymentMethods.tsx index 39e66e5..d0b1228 100644 --- a/src/components/PaymentMethods/PaymentMethods.tsx +++ b/src/components/PaymentMethods/PaymentMethods.tsx @@ -88,7 +88,7 @@ const PaymentMethods = () => { }} size="large" > - + {options.map((option) => (
{ value={option.value} onClick={() => onPaymentSelect(option.value)} style={{ - height: 50, + height: 48, borderRadius: 888, border: "1px solid #DDD", padding: 16, diff --git a/src/components/ProPhoneInput.tsx b/src/components/ProPhoneInput.tsx index 554fc20..d4ef6cc 100644 --- a/src/components/ProPhoneInput.tsx +++ b/src/components/ProPhoneInput.tsx @@ -86,7 +86,7 @@ export const PhoneInputWrapper = ({ const inputStyle = useMemo( () => ({ borderRadius: 1000, - height: 50, + height: 48, width: "100%", color: themeName === "light" ? "#000" : "#FFF", backgroundColor: themeName === "light" ? "#FFF" : ProBlack1, diff --git a/src/components/ProRatioGroups/ProRatioGroups.tsx b/src/components/ProRatioGroups/ProRatioGroups.tsx index d0ac9b7..2438da4 100644 --- a/src/components/ProRatioGroups/ProRatioGroups.tsx +++ b/src/components/ProRatioGroups/ProRatioGroups.tsx @@ -37,9 +37,15 @@ const ProRatioGroups = ({ onChange={handleChange} {...props} > - + {options.map((option) => ( - +
) { state.splitBillAmount = action.payload; }, + updateCustomerName(state, action: PayloadAction) { + state.customerName = action.payload; + }, }, }); @@ -675,6 +680,7 @@ export const { updatePickUpType, updateOrder, updateSplitBillAmount, + updateCustomerName, } = orderSlice.actions; // Tax calculation helper functions diff --git a/src/pages/cart/cart.module.css b/src/pages/cart/cart.module.css index d04c309..418b2b1 100644 --- a/src/pages/cart/cart.module.css +++ b/src/pages/cart/cart.module.css @@ -605,3 +605,8 @@ outline: 2px solid #ffffff; outline-offset: 2px; } + +.deleteIcon { + position: relative; + top: 1px; +} \ No newline at end of file diff --git a/src/pages/cart/components/CarPlateCard.tsx b/src/pages/cart/components/CarPlateCard.tsx index 9debadd..770d639 100644 --- a/src/pages/cart/components/CarPlateCard.tsx +++ b/src/pages/cart/components/CarPlateCard.tsx @@ -24,7 +24,7 @@ export default function CarPlateCard() { placeholder={t("cart.plateNumber")} size="large" autoFocus={false} - style={{ padding: "7px 11px", height: 50, borderRadius: 888 }} + style={{ padding: "7px 11px", height: 48, borderRadius: 888 }} value={plateCar} onChange={(e) => { dispatch(updatePlateCar(e.target.value)); diff --git a/src/pages/cart/components/CartMobileTabletLayout.tsx b/src/pages/cart/components/CartMobileTabletLayout.tsx index 607e176..8e1640c 100644 --- a/src/pages/cart/components/CartMobileTabletLayout.tsx +++ b/src/pages/cart/components/CartMobileTabletLayout.tsx @@ -1,5 +1,4 @@ -import { PlusOutlined } from "@ant-design/icons"; -import { Card, Divider, Space, Layout } from "antd"; +import { Card, Divider, Space, Layout, Button } from "antd"; import ArabicPrice from "components/ArabicPrice"; import CartActionsButtons from "components/CartActionsButtons/CartActionsButtons.tsx"; import ImageWithFallback from "components/ImageWithFallback"; @@ -9,8 +8,7 @@ import ProTitle from "components/ProTitle.tsx"; import { selectCart } from "features/order/orderSlice.ts"; import styles from "pages/cart/cart.module.css"; import YouMightAlsoLike from "pages/cart/components/youMayLike/YouMightAlsoLike.tsx"; -import { Link, useParams } from "react-router-dom"; -import { colors } from "ThemeConstants.ts"; +import { Link, useNavigate, useParams } from "react-router-dom"; import { useAppSelector } from "redux/hooks.ts"; @@ -18,13 +16,14 @@ import { FormInstance } from "antd"; import useBreakPoint from "hooks/useBreakPoint.ts"; import CarPlateCard from "pages/cart/components/CarPlateCard.tsx"; import CartFooter from "pages/cart/components/cartFooter/CartFooter.tsx"; -import CouponCard from "pages/cart/components/CouponCard.tsx"; import SpecialRequestCard from "pages/cart/components/specialRequest/SpecialRequestCard.tsx"; import TableNumberCard from "pages/cart/components/TableNumberCard.tsx"; import TimeEstimateCard from "pages/cart/components/timeEstimate/TimeEstimateCard.tsx"; import { OrderType } from "pages/checkout/hooks/types"; import { useTranslation } from "react-i18next"; import { Variant } from "utils/types/appTypes"; +import DeleteIcon from "components/Icons/DeleteIcon"; +import PlusIcon from "components/Icons/PlusIcon"; interface CartMobileTabletLayoutProps { form: FormInstance; @@ -39,8 +38,8 @@ export default function CartMobileTabletLayout({ const { subdomain } = useParams(); const { pickup_type } = useAppSelector((state) => state.order.restaurant); const { isMobile, isTablet } = useBreakPoint(); - const getResponsiveClass = () => (isTablet ? "tablet" : "mobile"); + const navigate = useNavigate(); const getMenuItemImageStyle = () => { if (isMobile) { @@ -82,11 +81,21 @@ export default function CartMobileTabletLayout({ >
- + {t("cart.yourOrder")}
@@ -100,25 +109,29 @@ export default function CartMobileTabletLayout({ textAlign: "end", }} > -
+ } + size="small" + className={styles.addButton} style={{ - color: colors.primary, + width: 32, + height: 32, + border: "1px solid #DEDEE0", }} - > - - {t("cart.addMore")} -
+ />
{items.length >= 1 && ( - + )} {items.map((item, index) => (
@@ -230,6 +243,16 @@ export default function CartMobileTabletLayout({ )}
))} +
diff --git a/src/pages/cart/components/CouponCard.tsx b/src/pages/cart/components/CouponCard.tsx index c6c7078..dbab110 100644 --- a/src/pages/cart/components/CouponCard.tsx +++ b/src/pages/cart/components/CouponCard.tsx @@ -83,7 +83,7 @@ export default function CouponCard() { placeholder={t("cart.couponCode")} size="large" autoFocus={false} - style={{ padding: "7px 11px", height: 50 }} + style={{ padding: "7px 11px", height: 48 }} onChange={(e) => { dispatch(updateCoupon(e.target.value)); }} diff --git a/src/pages/cart/components/specialRequest/SpecialRequestCard.module.css b/src/pages/cart/components/specialRequest/SpecialRequestCard.module.css index 00b207d..e34b639 100644 --- a/src/pages/cart/components/specialRequest/SpecialRequestCard.module.css +++ b/src/pages/cart/components/specialRequest/SpecialRequestCard.module.css @@ -1,5 +1,12 @@ .inputField { - height: 50px; + border-radius: 8px !important; + justify-content: space-between; + padding-top: 12px; + padding-right: 16px; + padding-bottom: 12px; + padding-left: 16px; + opacity: 1; + border-width: 1px; } .editButton { diff --git a/src/pages/cart/components/specialRequest/SpecialRequestCard.tsx b/src/pages/cart/components/specialRequest/SpecialRequestCard.tsx index d73dad1..24a315c 100644 --- a/src/pages/cart/components/specialRequest/SpecialRequestCard.tsx +++ b/src/pages/cart/components/specialRequest/SpecialRequestCard.tsx @@ -9,13 +9,13 @@ import { useState } from "react"; import { useTranslation } from "react-i18next"; import { useAppDispatch, useAppSelector } from "redux/hooks.ts"; import styles from "./SpecialRequestCard.module.css"; +import TextArea from "antd/es/input/TextArea"; export default function SpecialRequestCard() { const { t } = useTranslation(); const { isDesktop } = useBreakPoint(); const dispatch = useAppDispatch(); const { specialRequest } = useAppSelector(selectCart); - const { isRTL } = useAppSelector((state) => state.locale); const [isSpecialRequestOpen, setIsSpecialRequestOpen] = useState(false); const handleSpecialRequestSave = (value: string) => { @@ -32,12 +32,8 @@ export default function SpecialRequestCard() { title={t("cart.specialRequest")} dividerStyle={{ margin: "5px 0 0 0" }} > - - + {/* {t("cart.editNote")} {isRTL ? : } } + /> */} +