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

order: add progress timer

Browse Source
This commit is contained in:
Mohammed Al-yaseen
2025-12-17 22:44:05 +03:00
parent 9a3608d5ab
commit 02e1e42496
6 changed files with 302 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,4 @@
import { MinusOutlined, PlusOutlined } from "@ant-design/icons";
import { PlusOutlined } from "@ant-design/icons";
import { Button, message } from "antd";
import { useTranslation } from "react-i18next";
import { useNavigate, useParams } from "react-router-dom";
@@ -8,8 +8,7 @@ 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, updateQuantity, removeItem } from "features/order/orderSlice";
import ProText from "components/ProText";
import { addItem } from "features/order/orderSlice";
export function AddToCartButton({ item }: { item: Product }) {
const { t } = useTranslation();
@@ -20,15 +19,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 =
@@ -37,12 +36,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) {
@@ -76,86 +75,124 @@ export function AddToCartButton({ item }: { item: Product }) {
}
};
const handleMinusClick = () => {
if (restaurant && !restaurant.isOpened) {
message.warning(t("menu.restaurantIsClosed"));
return;
}
// 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));
// 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 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 ? (
<>
<div
size="small"
onClick={handleClick}
className={styles.addButton}
style={{
backgroundColor: colors.primary,
width: 36,
height: 36,
position: "absolute",
bottom: 6,
[isRTL ? "left" : "right"]: 6,
}}
/>
</div>
);
/* <div
className={styles.addButton}
style={{
width: 107,
@@ -236,48 +273,7 @@ export function AddToCartButton({ item }: { item: Product }) {
minWidth: 28,
}}
/>
</div>
</div>
</>
) : (
<>
<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}
className={styles.addButton}
style={{
backgroundColor: colors.primary,
width: 36,
height: 36,
position: "absolute",
bottom: 6,
[isRTL ? "left" : "right"]: 6,
}}
/>
</div>
</>
);
*/
}