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()}`}
>
<Space
direction="vertical"
orientation="vertical"
size={isMobile ? "middle" : isTablet ? "large" : "large"}
style={{ width: "100%", gap: 16 }}
>
@@ -134,7 +134,7 @@ export default function CartMobileTabletLayout({
height: "100%",
}}
>
<Space direction="vertical" size="small">
<Space orientation="vertical" size="small">
<div
style={{
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 { useTranslation } from "react-i18next";
import { useNavigate, useParams } from "react-router-dom";
@@ -8,7 +8,8 @@ import styles from "./AddToCartButton.module.css";
import { useAppSelector, useAppDispatch } from "redux/hooks";
import { Product } from "utils/types/appTypes";
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 }) {
const { t } = useTranslation();
@@ -19,15 +20,15 @@ export function AddToCartButton({ item }: { item: Product }) {
const { data: restaurant } = useGetRestaurantDetailsQuery(subdomain, {
skip: !subdomain,
});
// const { items } = useAppSelector((state) => state.order);
const { items } = useAppSelector((state) => state.order);
// Check if product is in cart
// const cartItemsForProduct = items.filter((i) => i.id === item.id);
// const totalQuantity = cartItemsForProduct.reduce(
// (total, item) => total + item.quantity,
// 0,
// );
// const isInCart = totalQuantity > 0;
const cartItemsForProduct = items.filter((i) => i.id === item.id);
const totalQuantity = cartItemsForProduct.reduce(
(total, item) => total + item.quantity,
0,
);
const isInCart = totalQuantity > 0;
// Check if item has extras, variants, or groups
const hasOptions =
@@ -36,12 +37,12 @@ export function AddToCartButton({ item }: { item: Product }) {
(item.theExtrasGroups && item.theExtrasGroups.length > 0);
// Find basic cart item (no variants/extras) - the one added by quick add
// const basicCartItem = cartItemsForProduct.find(
// (cartItem) =>
// (!cartItem.variant || cartItem.variant === "None") &&
// (!cartItem.extras || cartItem.extras.length === 0) &&
// (!cartItem.extrasgroupnew || cartItem.extrasgroupnew.length === 0),
// );
const basicCartItem = cartItemsForProduct.find(
(cartItem) =>
(!cartItem.variant || cartItem.variant === "None") &&
(!cartItem.extras || cartItem.extras.length === 0) &&
(!cartItem.extrasgroupnew || cartItem.extrasgroupnew.length === 0),
);
const handleClick = () => {
if (restaurant && !restaurant.isOpened) {
@@ -75,157 +76,101 @@ export function AddToCartButton({ item }: { item: Product }) {
}
};
// const handleMinusClick = () => {
// if (restaurant && !restaurant.isOpened) {
// message.warning(t("menu.restaurantIsClosed"));
// return;
// }
// if (basicCartItem && basicCartItem.uniqueId) {
// if (basicCartItem.quantity > 1) {
// // Decrease quantity
// dispatch(
// updateQuantity({
// id: basicCartItem.id,
// uniqueId: basicCartItem.uniqueId,
// quantity: basicCartItem.quantity - 1,
// }),
// );
// } else {
// // Remove item if quantity is 1
// dispatch(removeItem(basicCartItem.uniqueId));
// }
// } else if (cartItemsForProduct.length > 0) {
// // If no basic item found but items exist, remove the first one
// const firstItem = cartItemsForProduct[0];
// if (firstItem.uniqueId) {
// if (firstItem.quantity > 1) {
// dispatch(
// updateQuantity({
// id: firstItem.id,
// uniqueId: firstItem.uniqueId,
// quantity: firstItem.quantity - 1,
// }),
// );
// } else {
// 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} />
)
const handleMinusClick = () => {
if (restaurant && !restaurant.isOpened) {
message.warning(t("menu.restaurantIsClosed"));
return;
}
size="small"
onClick={handleClick}
className={styles.addButton}
style={{
backgroundColor: colors.primary,
width: 36,
height: 36,
position: "absolute",
bottom: 6,
[isRTL ? "left" : "right"]: 6,
}}
/>
</div>
if (basicCartItem && basicCartItem.uniqueId) {
if (basicCartItem.quantity > 1) {
// Decrease quantity
dispatch(
updateQuantity({
id: basicCartItem.id,
uniqueId: basicCartItem.uniqueId,
quantity: basicCartItem.quantity - 1,
}),
);
/* <div
} else {
// Remove item if quantity is 1
dispatch(removeItem(basicCartItem.uniqueId));
}
} else if (cartItemsForProduct.length > 0) {
// If no basic item found but items exist, remove the first one
const firstItem = cartItemsForProduct[0];
if (firstItem.uniqueId) {
if (firstItem.quantity > 1) {
dispatch(
updateQuantity({
id: firstItem.id,
uniqueId: firstItem.uniqueId,
quantity: firstItem.quantity - 1,
}),
);
} else {
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 isInCart && !hasOptions ? (
<>
<div
className={styles.addButton}
style={{
width: 107,
height: 45,
width: 90,
height: 30,
position: "absolute",
bottom: -5,
[isRTL ? "left" : "right"]: -4,
bottom: 3,
[isRTL ? "left" : "right"]: 1,
backgroundColor: "var(--secondary-background)",
borderRadius: 888,
opacity: 0.8,
}}
>
<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
shape="circle"
iconPosition="start"
iconPlacement="start"
icon={<MinusOutlined title="minus" style={{ color: "black" }} />}
size="small"
onClick={handleMinusClick}
@@ -235,16 +180,17 @@ export function AddToCartButton({ item }: { item: Product }) {
width: 28,
height: 28,
position: "absolute",
bottom: 9,
[isRTL ? "left" : "right"]: 70,
bottom: 1,
[isRTL ? "left" : "right"]: 60,
minWidth: 28,
border: "none",
}}
/>
<ProText
style={{
position: "absolute",
bottom: 17,
[isRTL ? "left" : "right"]: 50,
bottom: 7,
[isRTL ? "left" : "right"]: 45,
fontSize: 14,
fontWeight: 700,
fontStyle: "Bold",
@@ -258,7 +204,7 @@ export function AddToCartButton({ item }: { item: Product }) {
</ProText>
<Button
shape="circle"
iconPosition="start"
iconPlacement="start"
icon={<PlusOutlined title="plus" />}
size="small"
onClick={handlePlusClick}
@@ -268,12 +214,45 @@ export function AddToCartButton({ item }: { item: Product }) {
width: 28,
height: 28,
position: "absolute",
bottom: 9,
[isRTL ? "left" : "right"]: 10,
bottom: 1,
[isRTL ? "left" : "right"]: 3,
minWidth: 28,
}}
/>
</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}
style={{
borderRadius: 8,
height: 148,
height: item.description ? 148 : 120,
overflow: "hide",
width: "100%",
boxShadow: "none",
@@ -188,13 +188,13 @@ export default function ProductCard({ item }: Props) {
? styles.popularMenuItemImageTablet
: styles.popularMenuItemImageDesktop
}`}
width={90}
height={90}
width={92}
height={92}
/>
<AddToCartButton item={item} />
</Badge>
</div>
</div>
<AddToCartButton item={item} />
</Card>
</div>