working on new button in menu

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

@@ -1,42 +1,180 @@
-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";
-import { useAppSelector } from "redux/hooks.ts";
 import { useGetRestaurantDetailsQuery } from "redux/api/others";
 import { colors } from "ThemeConstants.ts";
 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";
 
-export function AddToCartButton() {
-  const { isRTL } = useAppSelector((state) => state.locale);
+export function AddToCartButton({ item }: { item: Product }) {
   const { t } = useTranslation();
 
   const { subdomain } = useParams();
   const navigate = useNavigate();
+  const dispatch = useAppDispatch();
   const { data: restaurant } = useGetRestaurantDetailsQuery(subdomain, {
     skip: !subdomain,
   });
+  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;
+
+  // Check if item has extras, variants, or groups
+  const hasOptions =
+    (item.extras && item.extras.length > 0) ||
+    (item.variants && item.variants.length > 0) ||
+    (item.theExtrasGroups && item.theExtrasGroups.length > 0);
 
   const handleClick = () => {
     if (restaurant && !restaurant.isOpened) {
       message.warning(t("menu.restaurantIsClosed"));
       return;
     }
-    navigate(`/${subdomain}/menu`);
+
+    // If item has options, navigate to product details page
+    if (hasOptions) {
+      navigate(`/${subdomain}/product/${item.id}`);
+      return;
+    }
+
+    // If no options, add item directly to cart
+    console.log("hasOptions", hasOptions);
+    if (!hasOptions) {
+      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,
+        }),
+      );
+    }
   };
 
-  return (
-    <Button
-      shape="round"
-      title="add"
-      iconPosition="start"
-      icon={<PlusOutlined title="add" className={styles.plusIcon} />}
-      size="small"
-      onClick={handleClick}
-      className={`${styles.addButton} ${isRTL ? styles.addButtonRTL : styles.addButtonLTR}`}
-      style={{ backgroundColor: colors.primary }}
-    >
-      {t("common.add")}
-    </Button>
+  return isInCart ? (
+    <>
+      <div
+        className={styles.addButton}
+        style={{
+          width: 107,
+          height: 45,
+          position: "absolute",
+          bottom: -5,
+          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
+          shape="circle"
+          iconPosition="start"
+          icon={<MinusOutlined title="add" style={{ color: "black" }} />}
+          size="small"
+          onClick={handleClick}
+          className={styles.addButton}
+          style={{
+            backgroundColor: "white",
+            width: 28,
+            height: 28,
+            position: "absolute",
+            bottom: 8,
+            right: 64,
+            minWidth: 28,
+          }}
+        />
+        <Button
+          shape="circle"
+          iconPosition="start"
+          icon={<PlusOutlined title="add" />}
+          size="small"
+          onClick={handleClick}
+          className={styles.addButton}
+          style={{
+            backgroundColor: colors.primary,
+            width: 28,
+            height: 28,
+            position: "absolute",
+            bottom: 8,
+            right: 10,
+            minWidth: 28,
+          }}
+        />
+      </div>
+    </>
+  ) : (
+    <>
+      <div
+        style={{
+          width: 48,
+          height: 48,
+          position: "absolute",
+          bottom: -11,
+          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,
+            right: 6,
+          }}
+        />
+      </div>
+    </>
   );
 }