diff --git a/.changeset/big-plants-do.md b/.changeset/big-plants-do.md new file mode 100644 index 0000000000..6fa8d332fc --- /dev/null +++ b/.changeset/big-plants-do.md @@ -0,0 +1,5 @@ +--- +"@bigcommerce/catalyst-core": minor +--- + +Add a check for variant stock levels on add to cart button diff --git a/core/components/add-to-cart-button/fragment.ts b/core/components/add-to-cart-button/fragment.ts index 8337135dd4..ad120a10cc 100644 --- a/core/components/add-to-cart-button/fragment.ts +++ b/core/components/add-to-cart-button/fragment.ts @@ -3,6 +3,7 @@ import { graphql } from '~/client/graphql'; export const AddToCartButtonFragment = graphql(` fragment AddToCartButtonFragment on Product { inventory { + hasVariantInventory isInStock } availabilityV2 { diff --git a/core/components/add-to-cart-button/index.tsx b/core/components/add-to-cart-button/index.tsx index c852ded2b8..ee46c1acd4 100644 --- a/core/components/add-to-cart-button/index.tsx +++ b/core/components/add-to-cart-button/index.tsx @@ -20,8 +20,11 @@ export const AddToCartButton = ({ }) => { const t = useTranslations('Components.AddToCartButton'); + const noParentOrVariantStock = + !product.inventory.isInStock && !product.inventory.hasVariantInventory; + const isProductDisabled = - product.availabilityV2.status === 'Unavailable' || !product.inventory.isInStock; + product.availabilityV2.status === 'Unavailable' || noParentOrVariantStock; const buttonText = () => { if (product.availabilityV2.status === 'Unavailable') { @@ -32,7 +35,7 @@ export const AddToCartButton = ({ return t('preorder'); } - if (!product.inventory.isInStock) { + if (noParentOrVariantStock) { return t('outOfStock'); }