Stock control functionality

app/_components/Globals/Cart.tsx

@@ -88,7 +88,7 @@ const Cart = ({ isCartOpen, setIsCartOpen }: Props) => {
           </div>
           {/* products sections */}
           <div className="overflow-y-auto px-7 mb-auto">
-            {cart?.items.length === 0 || cart === null ? (
+            {cart?.items?.length === 0 || cart === null ? (
               <p>There are no items in your cart yet!</p>
             ) : (
               <>

app/_hooks/useStore.ts

@@ -17,15 +17,25 @@ export function useGlobalState() {
  ****************************************************************************/
 type StateProduct = {
   chosenOptions: { [key: string]: string };
+  chosenOptionsId: string[];
+  chosenVariant: {
+    variantLabel: string | undefined;
+    variantId: string | undefined;
+    variantActive: boolean | undefined;
+    variantStock: number | undefined;
+  };
 };
 
-const stateProduct = atom({
-  chosenOptions: {}
+const stateProduct = atom<StateProduct>({
+  chosenOptions: {},
+  chosenOptionsId: [],
+  chosenVariant: { variantId: '', variantActive: true, variantLabel: '', variantStock: 0 }
 });
 
 export function useProductState(): {
   productState: StateProduct;
   updateProductProp: (property: string, value: unknown) => void;
+  updateProductState: (newState: StateProduct) => void;
 } {
   const [productState, setProductState] = useAtom(stateProduct);
 
@@ -36,7 +46,11 @@ export function useProductState(): {
     });
   };
 
-  return { productState, updateProductProp };
+  const updateProductState = (newState: StateProduct) => {
+    setProductState(newState);
+  };
+
+  return { productState, updateProductProp, updateProductState };
 }
 
 /*****************************************************************************

app/_lib/Store.ts

@@ -127,7 +127,7 @@ class Store {
    * Convert Swell product options to generic format
    ****************************************************************************/
   transformProductOptions(product: SwellProduct) {
-    return product.options.map((option) => ({
+    return product.options?.map((option) => ({
       label: option.name,
       active: option.active,
       values: option.values
@@ -139,9 +139,11 @@ class Store {
    ****************************************************************************/
   transformProductVariants(product: SwellProduct) {
     return product.variants?.results?.map((variant) => ({
+      id: variant.id,
       name: variant.name,
       active: variant.active,
-      value_ids: variant.option_value_ids
+      value_ids: variant.option_value_ids,
+      stock_variant: variant.stock_level
     }));
   }
 

app/_types/Generic/Products.d.ts

@@ -29,9 +29,12 @@ interface ProductOption {
 }
 
 interface Variant {
+  id: string;
   name: string;
   active: boolean;
-  value_ids: string[];
+  value_ids: Record<string, string> | string[];
+  stock_variant: number;
+  variantActive: boolean;
 }
 
 interface GenericProductsList {

app/_types/Swell/Product.d.ts

@@ -103,4 +103,5 @@ interface SwellVariant {
   date_updated: string;
   sku?: string;
   id: string;
+  stock_level: number;
 }

app/_types/Swell/swell-js_index.d.ts

@@ -104,6 +104,7 @@ declare module 'swell-js' {
     variant: { name: string; id: string };
     taxTotal: number;
     product: Product;
+    variant_id: string;
   }
 
   export interface CartItemSnakeCase {
@@ -120,6 +121,7 @@ declare module 'swell-js' {
     variant: { name: string; id: string };
     tax_total: number;
     product: Product;
+    variant_id: string;
   }
 
   export type CartItem = CartItemCamelCase | CartItemSnakeCase;

app/products/[slug]/_components/ProductInfo/AddToCart.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import React, { useEffect, useState } from 'react';
+
 import { IoIosArrowDown, IoIosArrowUp } from 'react-icons/io';
 
 import 'react-toastify/dist/ReactToastify.css';
@@ -30,21 +31,37 @@ const AddToCart = ({ product, isAuthenticated }: ProductProp) => {
   const [productAmount, setProductAmount] = useState(1);
   const [pleaseSelectAllOptions, setPleaseSelectAllOptions] = useState('');
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isDisabled, setIsDisabled] = useState(false);
+
   const { state } = useStore();
   const { productState } = useProductState();
-  const { setCart } = useGlobalState();
+  const { cart, setCart } = useGlobalState();
+
+  const { chosenOptions, chosenVariant } = productState;
+
+  const selectedStock =
+    // if there is variant information, we use the variant stock, otherwise we use the general product stock
+    product.variants && product.variants?.length > 0 ? chosenVariant?.variantStock : product.stock;
 
-  const { chosenOptions } = productState;
+  const productHasVariant = product.variants && product.variants?.length > 0;
 
   useEffect(() => {
     product.options?.length === Object.keys(chosenOptions).length;
     product.options?.length === Object.keys(chosenOptions).length && setPleaseSelectAllOptions('');
+
+    setProductAmount(1);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [chosenOptions, product.options?.length]);
 
+  useEffect(() => {
+    setIsDisabled(productAmount === selectedStock);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [product, productAmount, setProductAmount]);
+
   const addProduct = async ({ product, quantity, toastifyMessage }: AddProductProps) => {
     // Turn on spinner while waiting
     setIsSubmitting(true);
-
     // Add product to cart on Swell
     await swell.cart
       .addItem({
@@ -75,6 +92,26 @@ const AddToCart = ({ product, isAuthenticated }: ProductProp) => {
   };
 
   const handleAddToCart = () => {
+    // to check if the product (with no variant) is in the cart
+    const productInCart = cart && cart?.items?.find((item) => item.product_id.includes(product.id));
+    // to check if the variant is in the cart
+    const variantInCart =
+      cart &&
+      cart?.items?.find((item) =>
+        item.variant_id?.includes(chosenVariant.variantId ? chosenVariant.variantId : '')
+      );
+
+    // to check the stock of the product in the cart
+    if (productInCart && product.stock && productInCart?.quantity + productAmount > product.stock) {
+      return notifyFailure("The amount selected exceeds the stock available. We're sorry.");
+    }
+
+    const variantStock = chosenVariant.variantStock ?? 0;
+
+    if (variantInCart && variantInCart?.quantity + productAmount > variantStock) {
+      return notifyFailure("The amount selected exceeds the stock available. We're sorry.");
+    }
+
     !isSubmitting &&
       void addProduct({
         product: product,
@@ -85,7 +122,7 @@ const AddToCart = ({ product, isAuthenticated }: ProductProp) => {
 
   const buttonLabel = () => {
     if (product.stock === 0) {
-      return 'COMING SOON!';
+      return 'OUT OF STOCK';
     }
     if (isSubmitting) {
       return <Spinner size={6} />;
@@ -96,6 +133,15 @@ const AddToCart = ({ product, isAuthenticated }: ProductProp) => {
     return 'UNAVAILABLE';
   };
 
+  const handleProductAmount = () => {
+    if (selectedStock) {
+      if (productAmount < selectedStock) {
+        setProductAmount(productAmount + 1);
+      }
+      // if there is no stock information, there is no limit
+    } else setProductAmount(productAmount + 1);
+  };
+
   return (
     <>
       <div className="flex flex-wrap gap-4 py-5">
@@ -110,14 +156,32 @@ const AddToCart = ({ product, isAuthenticated }: ProductProp) => {
           />
           <div className="flex flex-col">
             <button
-              className="bg-gray hover:bg-gray-medium border border-gray border-b-0 hover:border-gray-300 p-1"
-              onClick={() => setProductAmount(productAmount + 1)}
+              className={`bg-gray hover:bg-gray-medium border border-gray border-b-0 hover:border-gray-300 p-1 ${
+                isDisabled ||
+                product.stock === 0 ||
+                (productHasVariant && !state.isVariantActive) ||
+                isSubmitting
+                  ? 'opacity-50 hover:bg-gray hover:border-gray-300'
+                  : ''
+              }`}
+              disabled={
+                isDisabled ||
+                product.stock === 0 ||
+                (productHasVariant && !state.isVariantActive) ||
+                isSubmitting
+              }
+              onClick={() => handleProductAmount()}
             >
               <IoIosArrowUp />
             </button>
             <button
               onClick={() => productAmount > 1 && setProductAmount(productAmount - 1)}
-              className="bg-gray hover:bg-gray-medium border border-t-0 border-gray hover:border-gray-300 p-1"
+              disabled={productHasVariant && !state.isVariantActive}
+              className={`bg-gray hover:bg-gray-medium border border-t-0 border-gray hover:border-gray-300 p-1 ${
+                productHasVariant && !state.isVariantActive
+                  ? 'opacity-50 hover:bg-gray hover:border-gray-300'
+                  : ''
+              }`}
             >
               <IoIosArrowDown />
             </button>
@@ -128,8 +192,12 @@ const AddToCart = ({ product, isAuthenticated }: ProductProp) => {
             onClick={() => handleAddToCart()}
             label={buttonLabel()}
             variant="fill"
+            disabled={
+              product.stock === 0 || (productHasVariant && !state.isVariantActive) || isSubmitting
+            }
             className={`font-bold py-3 px-5 md:min-w-[240px] ${
-              state.isVariantActive || (product.options?.length === 0 && product.stock !== 0)
+              (state.isVariantActive && productHasVariant) ||
+              (product.options?.length === 0 && product?.stock !== 0)
                 ? 'bg-black font-quicksand border text-white duration-200 cursor-pointer hover:bg-white hover:text-black'
                 : 'bg-gray-medium text-white font-quicksand border border-gray-medium'
             }`}

app/products/[slug]/_components/ProductInfo/ProductInfo.tsx

@@ -16,11 +16,12 @@ interface ProductProp {
 
 const ProductInfo = async ({ product }: ProductProp) => {
   const auth = await isAuthenticated();
+  const productHasVariant = product.variants && product.variants?.length > 0;
 
   return (
     <div className="w-full space-y-2 mt-5 md:mt-0">
       <ProductTitle title={product.name} />
-      <ProductStock stock={product.stock} />
+      {!productHasVariant && <ProductStock stock={product.stock} />}
       <ProductRating rating={3} />
       <ProductPriceOptions price={product.price} salePrice={product.salePrice} />
       <ProductOptions product={product} />