web-menu-react-version/src/pages/menu/components/AddToCartButton/AddToCartButton.tsx

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 { 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, removeItem, updateQuantity } from "features/order/orderSlice";
import ProText from "components/ProText";

export function AddToCartButton({ item }: { item: Product }) {
  const { t } = useTranslation();
  const { isRTL } = useAppSelector((state) => state.locale);
  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 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 =
    (item.extras && item.extras.length > 0) ||
    (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"));
      return;
    }

    // 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
    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,
        }),
      );
    }
  };

  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 && !hasOptions ? (
    <>
      <div
        className={styles.addButton}
        style={{
          width: 90,
          height: 30,
          position: "absolute",
          bottom: 3,
          [isRTL ? "left" : "right"]: 1,
          backgroundColor: "var(--secondary-background)",
          borderRadius: 888,
          opacity: 0.8,
        }}
      >
        <Button
          shape="circle"
          iconPlacement="start"
          icon={<MinusOutlined title="minus" style={{ color: "black" }} />}
          size="small"
          onClick={handleMinusClick}
          className={styles.addButton}
          style={{
            backgroundColor: "white",
            width: 28,
            height: 28,
            position: "absolute",
            bottom: 1,
            [isRTL ? "left" : "right"]: 60,
            minWidth: 28,
            border: "none",
          }}
        />
        <ProText
          style={{
            position: "absolute",
            bottom: 7,
            [isRTL ? "left" : "right"]: 45,
            fontSize: 14,
            fontWeight: 700,
            fontStyle: "Bold",
            lineHeight: "100%",
            letterSpacing: "0.06px",
            textAlign: "center",
            verticalAlign: "middle",
          }}
        >
          {totalQuantity}
        </ProText>
        <Button
          shape="circle"
          iconPlacement="start"
          icon={<PlusOutlined title="plus" />}
          size="small"
          onClick={handlePlusClick}
          className={styles.addButton}
          style={{
            backgroundColor: colors.primary,
            width: 28,
            height: 28,
            position: "absolute",
            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>
  );
}