From 9cba22369a215d093f075045842128e2190b72ed Mon Sep 17 00:00:00 2001
From: Ramirockuai <ramiro.rgr@gmail.com>
Date: Mon, 19 Dec 2022 23:45:03 -0600
Subject: [PATCH 1/2] CSS Handle for unavailable items

Adding a new css handle when item is unavailable
---
 react/components/SkuContent.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/react/components/SkuContent.tsx b/react/components/SkuContent.tsx
index 852c492..be8a54d 100644
--- a/react/components/SkuContent.tsx
+++ b/react/components/SkuContent.tsx
@@ -7,7 +7,7 @@ import useProduct from 'vtex.product-context/useProduct'
 import { useProductDispatch } from 'vtex.product-context/ProductDispatchContext'
 import classNames from 'classnames'
 
-const CSS_HANDLES = ['skuContentWrapper', 'selectedSkuContentWrapper'] as const
+const CSS_HANDLES = ['skuContentWrapper', 'selectedSkuContentWrapper', 'unavailable'] as const
 
 interface Props {
   product: Product
@@ -24,6 +24,10 @@ const SkuContent = ({ item, product, children }: Props) => {
       dispatch({ type: 'SET_SELECTED_ITEM', args: { item: item } })
     }
   }
+  let available = 0;
+  item.sellers.forEach((seller) => {
+    available += seller.commertialOffer.AvailableQuantity;
+  });
   const containerClasses = classNames(
     'ba mb3 pa5',
     handles.skuContentWrapper,
@@ -34,6 +38,10 @@ const SkuContent = ({ item, product, children }: Props) => {
     {
       [`bw1 b--blue ${handles.selectedSkuContentWrapper}`]:
         selectedItem.itemId == item.itemId,
+    },
+    {
+      [`${handles.unavailable}`]:
+      available == 0,
     }
   )
   return (

From d782f26dbebc4bb7b515403c32c1accd3e92cd11 Mon Sep 17 00:00:00 2001
From: Ramirockuai <ramiro.rgr@gmail.com>
Date: Tue, 20 Dec 2022 00:09:17 -0600
Subject: [PATCH 2/2] add new css handle to docs/README.md

---
 docs/README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/README.md b/docs/README.md
index c6b2e22..7899dd2 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -377,6 +377,7 @@ In order to apply CSS customizations in this and other blocks, follow the instru
 | `specificationsTableSpecificationHeading` |
 | `specificationsTabsContainer`             |
 | `specificationsTitle`                     |
+| `unavailable`                             |
 
 <!-- DOCS-IGNORE:start -->