@shopify/shop-minis-react 0.17.1 → 0.18.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shopify/shop-minis-react",
   "license": "SEE LICENSE IN LICENSE.txt",
-  "version": "0.17.1",
+  "version": "0.18.0",
   "sideEffects": false,
   "type": "module",
   "engines": {
@@ -63,7 +63,7 @@
     "typescript": ">=5.0.0"
   },
   "dependencies": {
-    "@shopify/shop-minis-platform": "0.15.1",
+    "@shopify/shop-minis-platform": "0.16.0",
     "@tailwindcss/vite": "4.1.8",
     "@tanstack/react-query": "5.86.0",
     "@types/lodash": "4.17.20",

package/src/components/commerce/add-to-cart.test.tsx

@@ -51,6 +51,7 @@ describe('AddToCartButton', () => {
         id: 'gid://shopify/ProductVariant/456',
         title: 'Default',
         isFavorited: false,
+        availableForSale: true,
         price: {
           amount: '10.00',
           currencyCode: 'USD',
@@ -231,6 +232,7 @@ describe('AddToCartButton', () => {
           id: 'gid://shopify/ProductVariant/999',
           title: 'Different',
           isFavorited: false,
+          availableForSale: true,
           price: {
             amount: '15.00',
             currencyCode: 'USD',
@@ -285,4 +287,112 @@ describe('AddToCartButton', () => {
       variantImageUrl: 'https://example.com/variant-image.jpg',
     })
   })
+
+  describe('sold-out state', () => {
+    const soldOutProduct: Product = {
+      ...mockProduct,
+      variants: [
+        {
+          id: 'gid://shopify/ProductVariant/456',
+          title: 'Default',
+          isFavorited: false,
+          availableForSale: false,
+          price: {
+            amount: '10.00',
+            currencyCode: 'USD',
+          },
+        },
+      ],
+    }
+
+    it('shows "Sold out" text when matching variant is not available for sale', () => {
+      render(
+        <AddToCartButton
+          product={soldOutProduct}
+          productVariantId="gid://shopify/ProductVariant/456"
+        />
+      )
+
+      expect(screen.getByText('Sold out')).toBeInTheDocument()
+      expect(screen.queryByText('Add to cart')).not.toBeInTheDocument()
+    })
+
+    it('disables the button when matching variant is sold out', () => {
+      render(
+        <AddToCartButton
+          product={soldOutProduct}
+          productVariantId="gid://shopify/ProductVariant/456"
+        />
+      )
+
+      expect(screen.getByRole('button')).toBeDisabled()
+    })
+
+    it('does not call addToCart when matching variant is sold out', async () => {
+      const user = userEvent.setup()
+
+      render(
+        <AddToCartButton
+          product={soldOutProduct}
+          productVariantId="gid://shopify/ProductVariant/456"
+        />
+      )
+
+      const button = screen.getByRole('button')
+      await user.click(button)
+
+      expect(mockMinisSDK.addToCart).not.toHaveBeenCalled()
+    })
+
+    it('referral products show "View product" and stay clickable even when sold out', async () => {
+      const user = userEvent.setup()
+      const referralSoldOutProduct: Product = {
+        ...soldOutProduct,
+        referral: true,
+      }
+
+      render(
+        <AddToCartButton
+          product={referralSoldOutProduct}
+          productVariantId="gid://shopify/ProductVariant/456"
+        />
+      )
+
+      expect(screen.getByText('View product')).toBeInTheDocument()
+      expect(screen.queryByText('Sold out')).not.toBeInTheDocument()
+
+      const button = screen.getByRole('button')
+      expect(button).toBeEnabled()
+
+      await user.click(button)
+      expect(mockMinisSDK.navigateToProduct).toHaveBeenCalledWith({
+        productId: referralSoldOutProduct.id,
+      })
+      expect(mockMinisSDK.addToCart).not.toHaveBeenCalled()
+    })
+
+    it('falls back to selectedVariant when variants array is missing', () => {
+      const productWithSelectedVariant: Product = {
+        ...mockProduct,
+        variants: undefined,
+        selectedVariant: {
+          id: 'gid://shopify/ProductVariant/456',
+          title: 'Default',
+          isFavorited: false,
+          availableForSale: false,
+          price: {amount: '10.00', currencyCode: 'USD'},
+        },
+      }
+
+      render(
+        <AddToCartButton
+          product={productWithSelectedVariant}
+          productVariantId="gid://shopify/ProductVariant/456"
+        />
+      )
+
+      expect(screen.getByText('Sold out')).toBeInTheDocument()
+      expect(screen.getByRole('button')).toBeDisabled()
+    })
+  })
 })

package/src/components/commerce/add-to-cart.tsx

@@ -41,16 +41,23 @@ export function AddToCartButton({
   const {navigateToProduct} = useShopNavigation()
   const [isAdded, setIsAdded] = useState(false)
   const timeoutRef = React.useRef<number | undefined>(undefined)
-  const {id, referral, variants} = product ?? {}
-
-  const variantImageUrl = variants?.find(
-    variant => variant.id === productVariantId
-  )?.image?.url
+  const {id, referral, variants, selectedVariant} = product ?? {}
+
+  // Look up the matching variant from `variants` first (productLists/savedProducts
+  // path); otherwise fall back to `selectedVariant` (useProduct/useProducts marketplace path).
+  const matchingVariant =
+    variants?.find(variant => variant.id === productVariantId) ??
+    (selectedVariant?.id === productVariantId ? selectedVariant : undefined)
+  const variantImageUrl = matchingVariant?.image?.url
+  const isSoldOut = matchingVariant?.availableForSale === false
+  // Referral products only navigate to the PDP — never gate them on stock so a
+  // sold-out selected variant doesn't strand the user without a way to switch.
+  const isDisabled = disabled || (!referral && isSoldOut)
 
   const {showErrorToast} = useErrorToast()
 
   const handleClick = useCallback(async () => {
-    if (disabled) return
+    if (isDisabled) return
 
     if (id && referral) {
       navigateToProduct({
@@ -95,7 +102,7 @@ export function AddToCartButton({
       console.error('Failed to add to cart:', error)
     }
   }, [
-    disabled,
+    isDisabled,
     id,
     referral,
     isAdded,
@@ -116,13 +123,18 @@ export function AddToCartButton({
     }
   }, [])
 
-  const addToCartText = isAdded ? 'Added to cart' : 'Add to cart'
-  const buttonText = referral ? 'View product' : addToCartText
+  const getButtonText = () => {
+    if (referral) return 'View product'
+    if (isSoldOut) return 'Sold out'
+    if (isAdded) return 'Added to cart'
+    return 'Add to cart'
+  }
+  const buttonText = getButtonText()
 
   return (
     <Button
       onClick={handleClick}
-      disabled={disabled}
+      disabled={isDisabled}
       className={cn(
         'relative overflow-hidden transition-all duration-300',
         className
@@ -131,7 +143,7 @@ export function AddToCartButton({
     >
       <div className="relative flex items-center justify-center">
         <AnimatePresence>
-          {isAdded && (
+          {isAdded && !isSoldOut && (
             <motion.div
               initial={{scale: 0, rotate: -180}}
               animate={{scale: 1, rotate: 0}}
@@ -147,7 +159,12 @@ export function AddToCartButton({
             </motion.div>
           )}
         </AnimatePresence>
-        <span className={cn(isAdded && 'pl-5', 'transition-all duration-300')}>
+        <span
+          className={cn(
+            isAdded && !isSoldOut && 'pl-5',
+            'transition-all duration-300'
+          )}
+        >
           {buttonText}
         </span>
       </div>

package/src/components/commerce/buy-now.test.tsx

@@ -269,4 +269,113 @@ describe('BuyNowButton', () => {
       discountCode: undefined,
     })
   })
+
+  describe('sold-out state', () => {
+    const soldOutProduct: Product = {
+      ...mockProduct,
+      variants: [
+        {
+          id: 'gid://shopify/ProductVariant/456',
+          title: 'Default',
+          isFavorited: false,
+          availableForSale: false,
+          price: {
+            amount: '10.00',
+            currencyCode: 'USD',
+          },
+        },
+      ],
+    }
+
+    it('shows "Sold out" text when matching variant is not available for sale', () => {
+      render(
+        <BuyNowButton
+          product={soldOutProduct}
+          productVariantId="gid://shopify/ProductVariant/456"
+        />
+      )
+
+      expect(screen.getByText('Sold out')).toBeInTheDocument()
+      expect(screen.queryByText('Buy now')).not.toBeInTheDocument()
+    })
+
+    it('referral products show "View product" and stay clickable even when sold out', async () => {
+      const user = userEvent.setup()
+      const referralSoldOutProduct: Product = {
+        ...soldOutProduct,
+        referral: true,
+      }
+
+      render(
+        <BuyNowButton
+          product={referralSoldOutProduct}
+          productVariantId="gid://shopify/ProductVariant/456"
+        />
+      )
+
+      expect(screen.getByText('View product')).toBeInTheDocument()
+      expect(screen.queryByText('Sold out')).not.toBeInTheDocument()
+
+      const button = screen.getByRole('button')
+      expect(button).toBeEnabled()
+
+      await user.click(button)
+      expect(mockMinisSDK.navigateToProduct).toHaveBeenCalledWith({
+        productId: referralSoldOutProduct.id,
+      })
+      expect(mockMinisSDK.buyProduct).not.toHaveBeenCalled()
+    })
+
+    it('falls back to selectedVariant when variants array is missing', () => {
+      const productWithSelectedVariant: Product = {
+        ...mockProduct,
+        variants: undefined,
+        selectedVariant: {
+          id: 'gid://shopify/ProductVariant/456',
+          title: 'Default',
+          isFavorited: false,
+          availableForSale: false,
+          price: {amount: '10.00', currencyCode: 'USD'},
+        },
+      }
+
+      render(
+        <BuyNowButton
+          product={productWithSelectedVariant}
+          productVariantId="gid://shopify/ProductVariant/456"
+        />
+      )
+
+      expect(screen.getByText('Sold out')).toBeInTheDocument()
+      expect(screen.getByRole('button')).toBeDisabled()
+    })
+
+    it('disables the button when matching variant is sold out', () => {
+      render(
+        <BuyNowButton
+          product={soldOutProduct}
+          productVariantId="gid://shopify/ProductVariant/456"
+        />
+      )
+
+      expect(screen.getByRole('button')).toBeDisabled()
+    })
+
+    it('does not call buyProduct when matching variant is sold out', async () => {
+      const user = userEvent.setup()
+
+      render(
+        <BuyNowButton
+          product={soldOutProduct}
+          productVariantId="gid://shopify/ProductVariant/456"
+        />
+      )
+
+      const button = screen.getByRole('button')
+      await user.click(button)
+
+      expect(mockMinisSDK.buyProduct).not.toHaveBeenCalled()
+      expect(mockMinisSDK.navigateToProduct).not.toHaveBeenCalled()
+    })
+  })
 })

package/src/components/commerce/buy-now.tsx

@@ -38,12 +38,22 @@ export function BuyNowButton({
   const {buyProduct} = useShopCartActions()
   const {navigateToProduct} = useShopNavigation()
   const [isPurchasing, setIsPurchasing] = useState(false)
-  const {id, referral} = product ?? {}
+  const {id, referral, variants, selectedVariant} = product ?? {}
+
+  // Look up the matching variant from `variants` first (productLists/savedProducts
+  // path); otherwise fall back to `selectedVariant` (useProduct/useProducts marketplace path).
+  const matchingVariant =
+    variants?.find(variant => variant.id === productVariantId) ??
+    (selectedVariant?.id === productVariantId ? selectedVariant : undefined)
+  const isSoldOut = matchingVariant?.availableForSale === false
+  // Referral products only navigate to the PDP — never gate them on stock so a
+  // sold-out selected variant doesn't strand the user without a way to switch.
+  const isDisabled = disabled || isPurchasing || (!referral && isSoldOut)
 
   const {showErrorToast} = useErrorToast()
 
   const handleClick = useCallback(async () => {
-    if (disabled) return
+    if (isDisabled) return
 
     if (id && referral) {
       navigateToProduct({
@@ -53,8 +63,6 @@ export function BuyNowButton({
       return
     }
 
-    if (isPurchasing) return
-
     try {
       if (id && productVariantId) {
         setIsPurchasing(true)
@@ -73,10 +81,9 @@ export function BuyNowButton({
       setIsPurchasing(false)
     }
   }, [
-    disabled,
+    isDisabled,
     id,
     referral,
-    isPurchasing,
     navigateToProduct,
     productVariantId,
     buyProduct,
@@ -84,10 +91,17 @@ export function BuyNowButton({
     showErrorToast,
   ])
 
+  const getButtonText = () => {
+    if (referral) return 'View product'
+    if (isSoldOut) return 'Sold out'
+    return 'Buy now'
+  }
+  const buttonText = getButtonText()
+
   return (
     <Button
       onClick={handleClick}
-      disabled={disabled || isPurchasing}
+      disabled={isDisabled}
       className={cn('relative overflow-hidden', className)}
       size={size}
       aria-live="polite"
@@ -101,7 +115,7 @@ export function BuyNowButton({
           exit={{opacity: 0, y: -10}}
           transition={{duration: 0.2}}
         >
-          {referral ? 'View product' : 'Buy now'}
+          {buttonText}
         </motion.span>
       </AnimatePresence>
     </Button>

package/src/components/commerce/product-link.test.tsx

@@ -297,6 +297,7 @@ describe('ProductLink', () => {
           id: 'selected-variant-id',
           title: 'Selected Variant',
           isFavorited: false,
+          availableForSale: true,
           price: {amount: '29.99', currencyCode: 'USD'},
           compareAtPrice: null,
           image: null,

package/src/mocks.ts

@@ -479,6 +479,7 @@ export function makeMockActions(): ShopActions {
           id: 'variant-1',
           title: 'Variant 1',
           isFavorited: false,
+          availableForSale: true,
           image: {url: 'https://example.com/variant-1.jpg'},
           price: {amount: '19.99', currencyCode: 'USD'},
           compareAtPrice: {amount: '29.99', currencyCode: 'USD'},
@@ -617,5 +618,11 @@ export const injectMocks = ({force}: {force?: boolean} = {}) => {
       initialUrl: '/',
       platform: 'web',
     }
+    // Mock minisEvents so NavigationManager and event hooks work in dev
+    let listenerId = 0
+    window.minisEvents = {
+      on: () => ++listenerId,
+      off: () => {},
+    }
   }
 }

package/src/test-setup.ts

@@ -43,6 +43,16 @@ global.ResizeObserver = vi.fn().mockImplementation(() => ({
   disconnect: vi.fn(),
 }))
 
+// Mock window.minisEvents (used by NavigationManager)
+let _testListenerId = 0
+Object.defineProperty(window, 'minisEvents', {
+  writable: true,
+  value: {
+    on: () => ++_testListenerId,
+    off: () => {},
+  },
+})
+
 // Set default window size for virtuoso calculations
 Object.defineProperty(window, 'innerHeight', {
   writable: true,

package/src/test-utils.tsx

@@ -128,6 +128,7 @@ export const mockProductVariant = (
   id: 'variant-1',
   title: 'Default Variant',
   isFavorited: false,
+  availableForSale: true,
   price: mockMoney('29.99', 'USD'),
   compareAtPrice: mockMoney('39.99', 'USD'),
   image: mockProductImage(),