fascano/web-menu-react-version-
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

menu: enhnace product actions styles

Browse Source
This commit is contained in:
Mohammed Al-yaseen
2025-12-19 00:01:32 +03:00
parent 58b2258339
commit e43675d018
3 changed files with 151 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/pages/cart/components/CartMobileTabletLayout.tsx
View File

@@ -69,7 +69,7 @@ export default function CartMobileTabletLayout({
className={`${styles.cartContainer} '${styles.cartLayout}' ${getResponsiveClass()}`} className={`${styles.cartContainer} '${styles.cartLayout}' ${getResponsiveClass()}`}
> >
<Space <Space
direction="vertical" orientation="vertical"
size={isMobile ? "middle" : isTablet ? "large" : "large"} size={isMobile ? "middle" : isTablet ? "large" : "large"}
style={{ width: "100%", gap: 16 }} style={{ width: "100%", gap: 16 }}
> >
@@ -134,7 +134,7 @@ export default function CartMobileTabletLayout({
height: "100%", height: "100%",
}} }}
> >
<Space direction="vertical" size="small"> <Space orientation="vertical" size="small">
<div <div
style={{ style={{
position: "absolute", position: "absolute",

309
src/pages/menu/components/AddToCartButton/AddToCartButton.tsx
View File

@@ -1,4 +1,4 @@
import { PlusOutlined } from "@ant-design/icons"; import { MinusOutlined, PlusOutlined } from "@ant-design/icons";
import { Button, message } from "antd"; import { Button, message } from "antd";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useNavigate, useParams } from "react-router-dom"; import { useNavigate, useParams } from "react-router-dom";
@@ -8,7 +8,8 @@ import styles from "./AddToCartButton.module.css";
import { useAppSelector, useAppDispatch } from "redux/hooks"; import { useAppSelector, useAppDispatch } from "redux/hooks";
import { Product } from "utils/types/appTypes"; import { Product } from "utils/types/appTypes";
import NextIcon from "components/Icons/NextIcon"; import NextIcon from "components/Icons/NextIcon";
import { addItem } from "features/order/orderSlice"; import { addItem, removeItem, updateQuantity } from "features/order/orderSlice";
import ProText from "components/ProText";
export function AddToCartButton({ item }: { item: Product }) { export function AddToCartButton({ item }: { item: Product }) {
const { t } = useTranslation(); const { t } = useTranslation();
@@ -19,15 +20,15 @@ export function AddToCartButton({ item }: { item: Product }) {
const { data: restaurant } = useGetRestaurantDetailsQuery(subdomain, { const { data: restaurant } = useGetRestaurantDetailsQuery(subdomain, {
skip: !subdomain, skip: !subdomain,
}); });
// const { items } = useAppSelector((state) => state.order); const { items } = useAppSelector((state) => state.order);
// Check if product is in cart // Check if product is in cart
// const cartItemsForProduct = items.filter((i) => i.id === item.id); const cartItemsForProduct = items.filter((i) => i.id === item.id);
// const totalQuantity = cartItemsForProduct.reduce( const totalQuantity = cartItemsForProduct.reduce(
// (total, item) => total + item.quantity, (total, item) => total + item.quantity,
// 0, 0,
// ); );
// const isInCart = totalQuantity > 0; const isInCart = totalQuantity > 0;
// Check if item has extras, variants, or groups // Check if item has extras, variants, or groups
const hasOptions = const hasOptions =
@@ -36,12 +37,12 @@ export function AddToCartButton({ item }: { item: Product }) {
(item.theExtrasGroups && item.theExtrasGroups.length > 0); (item.theExtrasGroups && item.theExtrasGroups.length > 0);
// Find basic cart item (no variants/extras) - the one added by quick add // Find basic cart item (no variants/extras) - the one added by quick add
// const basicCartItem = cartItemsForProduct.find( const basicCartItem = cartItemsForProduct.find(
// (cartItem) => (cartItem) =>
// (!cartItem.variant || cartItem.variant === "None") && (!cartItem.variant || cartItem.variant === "None") &&
// (!cartItem.extras || cartItem.extras.length === 0) && (!cartItem.extras || cartItem.extras.length === 0) &&
// (!cartItem.extrasgroupnew || cartItem.extrasgroupnew.length === 0), (!cartItem.extrasgroupnew || cartItem.extrasgroupnew.length === 0),
// ); );
const handleClick = () => { const handleClick = () => {
if (restaurant && !restaurant.isOpened) { if (restaurant && !restaurant.isOpened) {
@@ -75,157 +76,101 @@ export function AddToCartButton({ item }: { item: Product }) {
} }
}; };
// const handleMinusClick = () => { const handleMinusClick = () => {
// if (restaurant && !restaurant.isOpened) { if (restaurant && !restaurant.isOpened) {
// message.warning(t("menu.restaurantIsClosed")); message.warning(t("menu.restaurantIsClosed"));
// return; return;
// } }
// if (basicCartItem && basicCartItem.uniqueId) { if (basicCartItem && basicCartItem.uniqueId) {
// if (basicCartItem.quantity > 1) { if (basicCartItem.quantity > 1) {
// // Decrease quantity // Decrease quantity
// dispatch( dispatch(
// updateQuantity({ updateQuantity({
// id: basicCartItem.id, id: basicCartItem.id,
// uniqueId: basicCartItem.uniqueId, uniqueId: basicCartItem.uniqueId,
// quantity: basicCartItem.quantity - 1, quantity: basicCartItem.quantity - 1,
// }), }),
// ); );
// } else { } else {
// // Remove item if quantity is 1 // Remove item if quantity is 1
// dispatch(removeItem(basicCartItem.uniqueId)); dispatch(removeItem(basicCartItem.uniqueId));
// } }
// } else if (cartItemsForProduct.length > 0) { } else if (cartItemsForProduct.length > 0) {
// // If no basic item found but items exist, remove the first one // If no basic item found but items exist, remove the first one
// const firstItem = cartItemsForProduct[0]; const firstItem = cartItemsForProduct[0];
// if (firstItem.uniqueId) { if (firstItem.uniqueId) {
// if (firstItem.quantity > 1) { if (firstItem.quantity > 1) {
// dispatch( dispatch(
// updateQuantity({ updateQuantity({
// id: firstItem.id, id: firstItem.id,
// uniqueId: firstItem.uniqueId, uniqueId: firstItem.uniqueId,
// quantity: firstItem.quantity - 1, quantity: firstItem.quantity - 1,
// }), }),
// ); );
// } else { } else {
// dispatch(removeItem(firstItem.uniqueId)); dispatch(removeItem(firstItem.uniqueId));
// }
// }
// }
// };
// const handlePlusClick = () => {
// if (restaurant && !restaurant.isOpened) {
// message.warning(t("menu.restaurantIsClosed"));
// return;
// }
// if (basicCartItem && basicCartItem.uniqueId) {
// // Increase quantity of existing basic item
// dispatch(
// updateQuantity({
// id: basicCartItem.id,
// uniqueId: basicCartItem.uniqueId,
// quantity: basicCartItem.quantity + 1,
// }),
// );
// } else if (!hasOptions) {
// // Add new basic item if no options
// dispatch(
// addItem({
// item: {
// id: Number(item.id),
// name: item.name,
// price: item.price,
// image: item.image,
// description: item.description,
// variant: "None",
// isHasLoyalty: item.isHasLoyalty,
// no_of_stamps_give: item.no_of_stamps_give,
// },
// quantity: 1,
// }),
// );
// } else {
// // If has options, navigate to product page
// navigate(`/${subdomain}/product/${item.id}`);
// }
// };
return (
<div
style={{
width: 48,
height: 48,
position: "absolute",
bottom: -11,
[isRTL ? "left" : "right"]: -2,
backgroundColor: "var(--background)",
borderRadius: "50%",
}}
>
<Button
shape="circle"
iconPosition="start"
icon={
hasOptions ? (
<NextIcon
className={styles.plusIcon}
iconColor="#fff"
iconSize={16}
/>
) : (
<PlusOutlined title="add" className={styles.plusIcon} />
)
} }
size="small" }
onClick={handleClick} }
};
const handlePlusClick = () => {
if (restaurant && !restaurant.isOpened) {
message.warning(t("menu.restaurantIsClosed"));
return;
}
if (basicCartItem && basicCartItem.uniqueId) {
// Increase quantity of existing basic item
dispatch(
updateQuantity({
id: basicCartItem.id,
uniqueId: basicCartItem.uniqueId,
quantity: basicCartItem.quantity + 1,
}),
);
} else if (!hasOptions) {
// Add new basic item if no options
dispatch(
addItem({
item: {
id: Number(item.id),
name: item.name,
price: item.price,
image: item.image,
description: item.description,
variant: "None",
isHasLoyalty: item.isHasLoyalty,
no_of_stamps_give: item.no_of_stamps_give,
},
quantity: 1,
}),
);
} else {
// If has options, navigate to product page
navigate(`/${subdomain}/product/${item.id}`);
}
};
return isInCart && !hasOptions ? (
<>
<div
className={styles.addButton} className={styles.addButton}
style={{ style={{
backgroundColor: colors.primary, width: 90,
width: 36, height: 30,
height: 36,
position: "absolute", position: "absolute",
bottom: 6, bottom: 3,
[isRTL ? "left" : "right"]: 6, [isRTL ? "left" : "right"]: 1,
}} backgroundColor: "var(--secondary-background)",
/> borderRadius: 888,
</div> opacity: 0.8,
);
/* <div
className={styles.addButton}
style={{
width: 107,
height: 45,
position: "absolute",
bottom: -5,
[isRTL ? "left" : "right"]: -4,
}} }}
> >
<svg
width="107"
height="45"
viewBox="0 0 107 45"
fill="none"
xmlns="http://www.w3.org/2000/svg"
style={{
position: "absolute",
top: 0,
left: 0,
width: "100%",
height: "100%",
}}
>
<rect
width="107"
height="45"
rx="22.5"
className={styles.actionRect}
/>
</svg>
<Button <Button
shape="circle" shape="circle"
iconPosition="start" iconPlacement="start"
icon={<MinusOutlined title="minus" style={{ color: "black" }} />} icon={<MinusOutlined title="minus" style={{ color: "black" }} />}
size="small" size="small"
onClick={handleMinusClick} onClick={handleMinusClick}
@@ -235,16 +180,17 @@ export function AddToCartButton({ item }: { item: Product }) {
width: 28, width: 28,
height: 28, height: 28,
position: "absolute", position: "absolute",
bottom: 9, bottom: 1,
[isRTL ? "left" : "right"]: 70, [isRTL ? "left" : "right"]: 60,
minWidth: 28, minWidth: 28,
border: "none",
}} }}
/> />
<ProText <ProText
style={{ style={{
position: "absolute", position: "absolute",
bottom: 17, bottom: 7,
[isRTL ? "left" : "right"]: 50, [isRTL ? "left" : "right"]: 45,
fontSize: 14, fontSize: 14,
fontWeight: 700, fontWeight: 700,
fontStyle: "Bold", fontStyle: "Bold",
@@ -258,7 +204,7 @@ export function AddToCartButton({ item }: { item: Product }) {
</ProText> </ProText>
<Button <Button
shape="circle" shape="circle"
iconPosition="start" iconPlacement="start"
icon={<PlusOutlined title="plus" />} icon={<PlusOutlined title="plus" />}
size="small" size="small"
onClick={handlePlusClick} onClick={handlePlusClick}
@@ -268,12 +214,45 @@ export function AddToCartButton({ item }: { item: Product }) {
width: 28, width: 28,
height: 28, height: 28,
position: "absolute", position: "absolute",
bottom: 9, bottom: 1,
[isRTL ? "left" : "right"]: 10, [isRTL ? "left" : "right"]: 3,
minWidth: 28, minWidth: 28,
}} }}
/> />
</div> </div>
</> </>
*/ ) : (
<div
style={{
position: "absolute",
bottom: -11,
[isRTL ? "left" : "right"]: -2,
borderRadius: "50%",
}}
>
<Button
shape="circle"
iconPlacement="start"
size="small"
icon={
hasOptions ? (
<NextIcon iconColor="#fff" iconSize={16} />
) : (
<PlusOutlined title="add" />
)
}
onClick={handleClick}
className={styles.addButton}
style={{
backgroundColor: colors.primary,
width: 28,
height: 28,
position: "absolute",
bottom: 16,
[isRTL ? "left" : "right"]: 7,
minWidth: 28,
}}
/>
</div>
);
} }

8
src/pages/menu/components/MenuList/ProductCard.tsx
View File

@@ -48,7 +48,7 @@ export default function ProductCard({ item }: Props) {
key={item.id} key={item.id}
style={{ style={{
borderRadius: 8, borderRadius: 8,
height: 148, height: item.description ? 148 : 120,
overflow: "hide", overflow: "hide",
width: "100%", width: "100%",
boxShadow: "none", boxShadow: "none",
@@ -188,13 +188,13 @@ export default function ProductCard({ item }: Props) {
? styles.popularMenuItemImageTablet ? styles.popularMenuItemImageTablet
: styles.popularMenuItemImageDesktop : styles.popularMenuItemImageDesktop
}`} }`}
width={90} width={92}
height={90} height={92}
/> />
<AddToCartButton item={item} />
</Badge> </Badge>
</div> </div>
</div> </div>
<AddToCartButton item={item} />
</Card> </Card>
</div> </div>