menu: enhnacncements

src/pages/menu/components/AddToCartButton/AddToCartButton.tsx

@@ -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, updateQuantity, removeItem } from "features/order/orderSlice";
+import ProText from "components/ProText";
 
 export function AddToCartButton({ item }: { item: Product }) {
   const { t } = useTranslation();
@@ -22,10 +23,12 @@ export function AddToCartButton({ item }: { item: Product }) {
   const { items } = useAppSelector((state) => state.order);
 
   // Check if product is in cart
-  const isInCart =
-    items
-      .filter((i) => i.id === item.id)
-      .reduce((total, item) => total + item.quantity, 0) > 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 =
@@ -33,6 +36,14 @@ export function AddToCartButton({ item }: { item: Product }) {
     (item.variants && item.variants.length > 0) ||
     (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 handleClick = () => {
     if (restaurant && !restaurant.isOpened) {
       message.warning(t("menu.restaurantIsClosed"));
@@ -46,7 +57,6 @@ export function AddToCartButton({ item }: { item: Product }) {
     }
 
     // If no options, add item directly to cart
-    console.log("hasOptions", hasOptions);
     if (!hasOptions) {
       dispatch(
         addItem({
@@ -66,6 +76,83 @@ 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 isInCart ? (
     <>
       <div
@@ -102,33 +189,49 @@ export function AddToCartButton({ item }: { item: Product }) {
         <Button
           shape="circle"
           iconPosition="start"
-          icon={<MinusOutlined title="add" style={{ color: "black" }} />}
+          icon={<MinusOutlined title="minus" style={{ color: "black" }} />}
           size="small"
-          onClick={handleClick}
+          onClick={handleMinusClick}
           className={styles.addButton}
           style={{
             backgroundColor: "white",
             width: 28,
             height: 28,
             position: "absolute",
-            bottom: 8,
-            right: 64,
+            bottom: 9,
+            right: 70,
             minWidth: 28,
           }}
         />
+        <ProText
+          style={{
+            position: "absolute",
+            bottom: 17,
+            right: 50,
+            fontSize: 14,
+            fontWeight: 700,
+            fontStyle: "Bold",
+            lineHeight: "100%",
+            letterSpacing: "0.06px",
+            textAlign: "center",
+            verticalAlign: "middle",
+          }}
+        >
+          {totalQuantity}
+        </ProText>
         <Button
           shape="circle"
           iconPosition="start"
-          icon={<PlusOutlined title="add" />}
+          icon={<PlusOutlined title="plus" />}
           size="small"
-          onClick={handleClick}
+          onClick={handlePlusClick}
           className={styles.addButton}
           style={{
             backgroundColor: colors.primary,
             width: 28,
             height: 28,
             position: "absolute",
-            bottom: 8,
+            bottom: 9,
             right: 10,
             minWidth: 28,
           }}