diff --git a/src/pages/address/address.module.css b/src/pages/address/address.module.css index 8c21d99..e07cbd3 100644 --- a/src/pages/address/address.module.css +++ b/src/pages/address/address.module.css @@ -169,6 +169,7 @@ gap: 1rem; background-color: var(--secondary-background); box-shadow: none; + z-index: 999; } .splitBillButton { diff --git a/src/pages/product/components/ActionsButtons/ActionsButtons.module.css b/src/pages/product/components/ActionsButtons/ActionsButtons.module.css new file mode 100644 index 0000000..e50e351 --- /dev/null +++ b/src/pages/product/components/ActionsButtons/ActionsButtons.module.css @@ -0,0 +1,90 @@ +.quantityControls { + display: flex; + align-items: center; + border-radius: 888px; + width: fit-content; +} + +.quantityLabel { + font-size: 14px; + color: var(--secondary-color); + font-weight: 500; +} + +.quantityInputContainer { + display: flex; + align-items: center; + padding: 0 1px; + border-radius: 888px; + width: 140px; + height: 48px; +} + +.quantityButton { + padding: 0; + width: 25px; + height: 48px; + display: flex; + align-items: center; + justify-content: center; + color: var(--secondary-color); + transition: all 0.2s ease; +} + +.quantityInput { + text-align: center; + border: none; + box-shadow: none; + font-size: 16px; + font-weight: 600; +} + +.removeButton { + padding: 4px 0; + height: 48px; + display: flex; + align-items: center; + gap: 4px; + width: 30px; +} + +.deleteButtonContainer { + position: absolute; + top: 12px; + right: 12px; + background-color: var(--primary); + border-radius: 50%; + padding: 8px; + cursor: pointer; + transition: all 0.3s ease; +} + +.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: #1F1C2E; +} + +.minusIcon { + color: var(--secondary-foreground); +} + +.deleteIcon { + position: relative; + right: 1px; +} diff --git a/src/pages/product/components/ActionsButtons/ActionsButtons.tsx b/src/pages/product/components/ActionsButtons/ActionsButtons.tsx new file mode 100644 index 0000000..0c753da --- /dev/null +++ b/src/pages/product/components/ActionsButtons/ActionsButtons.tsx @@ -0,0 +1,125 @@ +import { MinusOutlined, PlusOutlined } from "@ant-design/icons"; +import { Button, Grid, InputNumber, Popconfirm } from "antd"; +import DeleteIcon from "components/Icons/DeleteIcon"; +import { useTranslation } from "react-i18next"; +import { useAppSelector } from "redux/hooks"; +import styles from "./ActionsButtons.module.css"; +import { colors } from "ThemeConstants"; + +const { useBreakpoint } = Grid; + +export default function ActionsButtons({ + quantity, + setQuantity, + max, + min, +}: { + quantity: number; + setQuantity: (quantity: number) => void; + max?: number; + min?: number; +}) { + const { t } = useTranslation(); + const { xs } = useBreakpoint(); // Default to desktop + const { isRTL } = useAppSelector((state) => state.locale); // Default to LTR + + const getPopconfirmOverlayStyle = () => ({ + width: xs ? "280px" : "auto", + maxWidth: "320px", + ".antPopconfirmMessageTitle": { + fontSize: xs ? "14px" : "16px", + paddingRight: xs ? "24px" : "0", + }, + ".antPopconfirmMessageContent": { + fontSize: xs ? "13px" : "14px", + marginTop: "4px", + }, + ".antPopconfirmButtons": { + marginTop: "12px", + ".ant-btn": { + fontSize: xs ? "13px" : "14px", + height: xs ? "28px" : "32px", + padding: xs ? "0 12px" : "4px 15px", + }, + }, + }); + + return ( +
+
+
+ {quantity > 0 ? ( +
+
+
+ ); +} diff --git a/src/pages/product/components/ProductFooter.tsx b/src/pages/product/components/ProductFooter.tsx index 138f165..47c7374 100644 --- a/src/pages/product/components/ProductFooter.tsx +++ b/src/pages/product/components/ProductFooter.tsx @@ -1,12 +1,7 @@ -import { - LeftOutlined, - RightOutlined, - ShoppingCartOutlined, -} from "@ant-design/icons"; -import { Button, Form, Input, message, Row } from "antd"; +import { ShoppingCartOutlined } from "@ant-design/icons"; +import { Button, Form, message, Row } from "antd"; import { addItem } from "features/order/orderSlice"; import useBreakPoint from "hooks/useBreakPoint"; -import { BottomSheet } from "pages/cart/components/specialRequest/BottomSheet.tsx"; import { useMemo, useState } from "react"; import { useTranslation } from "react-i18next"; import { useAppDispatch, useAppSelector } from "redux/hooks"; @@ -15,6 +10,9 @@ import { Extra, Product, Variant } from "utils/types/appTypes"; import styles from "../product.module.css"; import { useGetRestaurantDetailsQuery } from "redux/api/others"; import { useParams } from "react-router-dom"; +import TextArea from "antd/es/input/TextArea"; +import ProText from "components/ProText"; +import ActionsButtons from "./ActionsButtons/ActionsButtons"; export default function ProductFooter({ product, @@ -24,6 +22,7 @@ export default function ProductFooter({ selectedGroups, quantity, onClose, + setQuantity, }: { product: Product; isValid?: boolean; @@ -32,11 +31,11 @@ export default function ProductFooter({ selectedGroups: Record; quantity: number; onClose?: () => void; + setQuantity: (quantity: number) => void; }) { const { t } = useTranslation(); const dispatch = useAppDispatch(); const { themeName } = useAppSelector((state) => state.theme); - const [isSpecialRequestOpen, setIsSpecialRequestOpen] = useState(false); const { isMobile, isDesktop } = useBreakPoint(); const { isRTL } = useAppSelector((state) => state.locale); const [specialRequest, setSpecialRequest] = useState(""); @@ -122,14 +121,6 @@ export default function ProductFooter({ } }; - const handleSpecialRequestSave = (value: string) => { - setSpecialRequest(value); - }; - - const handleSpecialRequestClose = () => { - setIsSpecialRequestOpen(false); - }; - return ( <>
+ {t("cart.specialRequest")} + +