diff --git a/src/components/CartActionsButtons/CartActionsButtons.module.css b/src/components/CartActionsButtons/CartActionsButtons.module.css index 3969878..157f9b3 100644 --- a/src/components/CartActionsButtons/CartActionsButtons.module.css +++ b/src/components/CartActionsButtons/CartActionsButtons.module.css @@ -83,7 +83,7 @@ color: var(--secondary-background); } -.minusIcon{ +.minusIcon { color: var(--secondary-foreground); } diff --git a/src/components/CartActionsButtons/CartActionsButtons.tsx b/src/components/CartActionsButtons/CartActionsButtons.tsx index 88c8c03..22f0450 100644 --- a/src/components/CartActionsButtons/CartActionsButtons.tsx +++ b/src/components/CartActionsButtons/CartActionsButtons.tsx @@ -134,9 +134,10 @@ export default function CartActionsButtons({ item }: { item: CartItem }) { }), ) } + disabled={item.quantity >= 99} className={styles.addButton} style={{ - backgroundColor: colors.primary, + backgroundColor: "#FFC600", width: 28, height: 28, border: "none", diff --git a/src/components/Icons/PlusIcon.tsx b/src/components/Icons/PlusIcon.tsx index 300039e..dd6d36d 100644 --- a/src/components/Icons/PlusIcon.tsx +++ b/src/components/Icons/PlusIcon.tsx @@ -2,9 +2,10 @@ interface PlusIconType { className?: string; onClick?: () => void; dimesion?: string + color?: string } -const PlusIcon = ({ className, onClick, dimesion }: PlusIconType) => { +const PlusIcon = ({ className, onClick, dimesion, color }: PlusIconType) => { return ( { > void; + dimension?: number; +} + +const RefershIcon = ({ className, onClick, dimension }: RefershIconType) => { + return ( + + + + ); +}; + +export default RefershIcon; diff --git a/src/components/LanguageSwitch/LanguageSwitch.module.css b/src/components/LanguageSwitch/LanguageSwitch.module.css index c965967..47d0723 100644 --- a/src/components/LanguageSwitch/LanguageSwitch.module.css +++ b/src/components/LanguageSwitch/LanguageSwitch.module.css @@ -3,16 +3,25 @@ flex-direction: row; justify-content: end; padding: 0 16px; - gap: 10px; + gap: 8px; position: absolute; top: 50px; z-index: 1000; + right: 0; } :global(.ant-app-rtl) .languageSwitch { left: 0; + right: auto; } -:global(.ant-app-ltr) .languageSwitch { - right: 0; +.refreshIcon { + cursor: pointer; + position: relative; + top: 2px; + margin-right: 3px; +} + +:global(.ant-app-rtl) .refreshIcon { + margin-left: 3px; } diff --git a/src/components/LanguageSwitch/LanguageSwitch.tsx b/src/components/LanguageSwitch/LanguageSwitch.tsx index fe21681..db1423c 100644 --- a/src/components/LanguageSwitch/LanguageSwitch.tsx +++ b/src/components/LanguageSwitch/LanguageSwitch.tsx @@ -6,6 +6,7 @@ import { useDispatch } from "react-redux"; import { useAppSelector } from "redux/hooks"; import ProText from "../ProText"; import styles from "./LanguageSwitch.module.css"; +import RefershIcon from "components/Icons/RefershIcon"; export function LanguageSwitch() { const dispatch = useDispatch(); @@ -23,11 +24,15 @@ export function LanguageSwitch() { }); }; + const refreshPage = () => { + window.location.reload(); + }; + return (
{isPending ? "..." : isRTL ? "English" : "Arabic"} - +
+ +
); } diff --git a/src/features/order/orderSlice.ts b/src/features/order/orderSlice.ts index 58f9e2b..97ce58e 100644 --- a/src/features/order/orderSlice.ts +++ b/src/features/order/orderSlice.ts @@ -113,6 +113,7 @@ export const CART_STORAGE_KEYS = { HIDDEN_SERVICES: "fascano_hidden_services", VISIBLE_SERVICES: "fascano_visible_services", ESTIMATE_WAY: "fascano_estimate_way", + CUSTOMER_NAME: "fascano_customer_name", } as const; // Utility functions for localStorage @@ -201,7 +202,7 @@ const initialState: CartState = { estimateWay: getFromLocalStorage(CART_STORAGE_KEYS.ESTIMATE_WAY, ""), order: getFromLocalStorage(CART_STORAGE_KEYS.ORDER, null), splitBillAmount: 0, - customerName: "", + customerName: getFromLocalStorage(CART_STORAGE_KEYS.CUSTOMER_NAME, ""), totalServices: 8, hiddenServices: 0, visibleServices: 0, @@ -701,6 +702,12 @@ const orderSlice = createSlice({ }, updateCustomerName(state, action: PayloadAction) { state.customerName = action.payload; + if (typeof window !== "undefined") { + localStorage.setItem( + CART_STORAGE_KEYS.CUSTOMER_NAME, + JSON.stringify(state.customerName), + ); + } }, }, }); diff --git a/src/pages/checkout/components/CustomerInformationCard.tsx b/src/pages/checkout/components/CustomerInformationCard.tsx index b7705da..a9ff307 100644 --- a/src/pages/checkout/components/CustomerInformationCard.tsx +++ b/src/pages/checkout/components/CustomerInformationCard.tsx @@ -1,6 +1,10 @@ import ProInputCard from "components/ProInputCard/ProInputCard.tsx"; import ProPhoneInput from "components/ProPhoneInput"; -import { selectCart, updateCustomerName } from "features/order/orderSlice"; +import { + selectCart, + updateCustomerName, + updatePhone, +} from "features/order/orderSlice"; import { OrderType } from "pages/checkout/hooks/types.ts"; import { useTranslation } from "react-i18next"; import { useAppDispatch, useAppSelector } from "redux/hooks"; @@ -9,9 +13,12 @@ import styles from "./CustomerInformationCard.module.css"; export default function CustomerInformationCard() { const { t } = useTranslation(); - const { orderType } = useAppSelector(selectCart); + const { orderType, customerName, phone } = useAppSelector(selectCart); const dispatch = useAppDispatch(); - const customerName = useAppSelector((state) => state.order.customerName); + + const setPhone = (value: string) => { + dispatch(updatePhone(value)); + }; return ( orderType !== OrderType.Gift && ( @@ -30,7 +37,7 @@ export default function CustomerInformationCard() { }} /> - + diff --git a/src/pages/checkout/page.tsx b/src/pages/checkout/page.tsx index 78377c3..83db955 100644 --- a/src/pages/checkout/page.tsx +++ b/src/pages/checkout/page.tsx @@ -24,13 +24,13 @@ import { useEffect } from "react"; export default function CheckoutPage() { const { t } = useTranslation(); const [form] = Form.useForm(); - const { phone, order, orderType, collectionMethod, coupon } = + const { phone, order, orderType, collectionMethod, coupon, customerName } = useAppSelector(selectCart); const { token } = useAppSelector((state) => state.auth); const dispatch = useAppDispatch(); useEffect(() => { - form.setFieldsValue({ coupon, collectionMethod }); - }, [form, phone]); + form.setFieldsValue({ coupon, collectionMethod, phone, customerName }); + }, [form, phone, coupon, collectionMethod, customerName]); return ( <> diff --git a/src/pages/menu/components/AddToCartButton/AddToCartButton.module.css b/src/pages/menu/components/AddToCartButton/AddToCartButton.module.css index 8a7fa1c..157f9b3 100644 --- a/src/pages/menu/components/AddToCartButton/AddToCartButton.module.css +++ b/src/pages/menu/components/AddToCartButton/AddToCartButton.module.css @@ -1,25 +1,93 @@ -.plusIcon { - position: relative; - top: -1px; +.quantityControls { + display: flex; + align-items: center; + background-color: var(--background); + border-radius: 888px; + width: fit-content; } -.addButton { - position: absolute; - z-index: 1; +.quantityLabel { + font-size: 14px; + color: var(--secondary-color); + font-weight: 500; +} + +.quantityInputContainer { + display: flex; + padding: 0 1px; + align-items: center; + border-radius: 888px; + width: 90px; + height: 32px; +} + +.quantityButton { + padding: 0; + width: 28px !important; + height: 28px !important; + display: flex; + align-items: center; + justify-content: center; + color: var(--secondary-background); + background-color: var(--primary); + border-radius: 50%; + transition: all 0.2s ease; +} + +.quantityInput { + text-align: center; + border: none; + box-shadow: none; + font-size: 16px; font-weight: 600; - border: 0; - color: #fff; - font-size: 1rem; + padding: 0; } -.actionRect { - fill: var(--background) !important; +.removeButton { + padding: 4px 0; + height: 32px; + display: flex; + align-items: center; + gap: 4px; + width: 30px; } -.addButton svg rect { - fill: var(--background) !important; +.deleteButtonContainer { + position: absolute; + top: 12px; + right: 12px; + border-radius: 50%; + padding: 8px; + cursor: pointer; + transition: all 0.3s ease; } -:global(.darkApp) .addButton rect { - fill: var(--background) !important; +.deleteIcon { + font-size: 18px; + color: var(--secondary-color); +} + +.cartItemActions :global(.ant-input-number-outlined) { + border: none; + width: 40px; + background-color: inherit; + text-align: center; +} + +.cartItemActions :global(.ant-input-number-input) { + text-align: center !important; +} + +.plusIcon { + margin-bottom: 1px; + color: var(--secondary-background); +} + +.minusIcon { + color: var(--secondary-foreground); +} + +.deleteIcon { + position: relative; + right: 1px; } diff --git a/src/pages/menu/components/AddToCartButton/AddToCartButton.tsx b/src/pages/menu/components/AddToCartButton/AddToCartButton.tsx index 5520023..d60318b 100644 --- a/src/pages/menu/components/AddToCartButton/AddToCartButton.tsx +++ b/src/pages/menu/components/AddToCartButton/AddToCartButton.tsx @@ -1,5 +1,5 @@ import { MinusOutlined, PlusOutlined } from "@ant-design/icons"; -import { Button, message } from "antd"; +import { Button, InputNumber, message } from "antd"; import { useTranslation } from "react-i18next"; import { useNavigate, useParams } from "react-router-dom"; import { useGetRestaurantDetailsQuery } from "redux/api/others"; @@ -8,7 +8,7 @@ import { useAppSelector, useAppDispatch } from "redux/hooks"; import { Product } from "utils/types/appTypes"; import NextIcon from "components/Icons/NextIcon"; import { addItem, removeItem, updateQuantity } from "features/order/orderSlice"; -import ProText from "components/ProText"; +import PlusIcon from "components/Icons/PlusIcon"; export function AddToCartButton({ item }: { item: Product }) { const { t } = useTranslation(); @@ -161,68 +161,66 @@ export function AddToCartButton({ item }: { item: Product }) { return isInCart && !hasOptions ? ( <>
{ + e.stopPropagation(); + e.preventDefault; }} > -
+ ) : ( @@ -246,6 +244,7 @@ export function AddToCartButton({ item }: { item: Product }) { ) } onClick={handleClick} + disabled={!hasOptions && totalQuantity >= 99} className={styles.addButton} style={{ color: "#302E3E", diff --git a/src/pages/menu/components/MenuList/ProductCard.tsx b/src/pages/menu/components/MenuList/ProductCard.tsx index 67289ac..e9a6df6 100644 --- a/src/pages/menu/components/MenuList/ProductCard.tsx +++ b/src/pages/menu/components/MenuList/ProductCard.tsx @@ -2,7 +2,6 @@ import styles from "pages/menu/components/MenuList/ProductCard.module.css"; import { Card, Badge } from "antd"; import ProText from "components/ProText.tsx"; import ArabicPrice from "components/ArabicPrice"; -import { colors } from "ThemeConstants.ts"; import { ItemDescriptionIcons } from "components/ItemDescriptionIcons/ItemDescriptionIcons.tsx"; import ImageWithFallback from "components/ImageWithFallback"; import { Product } from "utils/types/appTypes.ts"; @@ -207,7 +206,14 @@ export default function ProductCard({ item, setIsBottomSheetOpen }: Props) { width={91} height={96} /> - +
+ +
diff --git a/src/pages/menu/menu.module.css b/src/pages/menu/menu.module.css index b172d97..d3a0465 100644 --- a/src/pages/menu/menu.module.css +++ b/src/pages/menu/menu.module.css @@ -171,7 +171,7 @@ } .headerContainer { - margin: 5px 0px; + margin: 5px 0 0 0; } /* Enhanced responsive item description */