Fix partial shop variant availability (#1127)

Author: tannerlinsley

src/components/shop/ProductDrawer.tsx

@@ -2,9 +2,10 @@ import * as React from 'react'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { twMerge } from 'tailwind-merge'
 import { getProduct } from '~/utils/shop.functions'
-import type {
-  ProductDetail,
-  ProductDetailVariant,
+import {
+  hasAvailableVariant,
+  type ProductDetail,
+  type ProductDetailVariant,
 } from '~/utils/shopify-queries'
 import { formatMoney } from '~/utils/shopify-format'
 import { resolveShopProductColor, shopColorContrast } from '~/utils/shop-color'
@@ -474,15 +475,16 @@ function DrawerContent({
                         Select {option.name}
                       </option>
                       {option.values.map((value) => {
-                        const match = findMatchingVariant(
-                          variants,
-                          getCandidate(value),
-                        )
                         return (
                           <option
                             key={value}
                             value={value}
-                            disabled={!match?.availableForSale}
+                            disabled={
+                              !hasAvailableVariant(
+                                variants,
+                                getCandidate(value),
+                              )
+                            }
                           >
                             {value}
                           </option>
@@ -505,11 +507,10 @@ function DrawerContent({
                     <div className="flex flex-wrap gap-1.5">
                       {option.values.map((value) => {
                         const isSelected = selected[option.name] === value
-                        const match = findMatchingVariant(
+                        const isUnavailable = !hasAvailableVariant(
                           variants,
                           getCandidate(value),
                         )
-                        const isUnavailable = !match?.availableForSale
                         return (
                           <ShopSize
                             key={value}
@@ -545,11 +546,10 @@ function DrawerContent({
                   <div className="flex flex-wrap gap-1.5">
                     {option.values.map((value) => {
                       const isSelected = selected[option.name] === value
-                      const match = findMatchingVariant(
+                      const isUnavailable = !hasAvailableVariant(
                         variants,
                         getCandidate(value),
                       )
-                      const isUnavailable = !match?.availableForSale
                       const hex = resolveShopProductColor(value)
                       return (
                         <ShopChip

src/routes/shop.products.$handle.tsx

@@ -19,6 +19,7 @@ import {
 import { useAddToCart } from '~/hooks/useCart'
 import { getProduct } from '~/utils/shop.functions'
 import {
+  hasAvailableVariant,
   type ProductDetail,
   type ProductDetailVariant,
 } from '~/utils/shopify-queries'
@@ -336,15 +337,13 @@ function VariantSelector({
                   Select {option.name}
                 </option>
                 {option.values.map((value) => {
-                  const match = findAvailableVariant(
-                    variants,
-                    getCandidate(value),
-                  )
                   return (
                     <option
                       key={value}
                       value={value}
-                      disabled={!match?.availableForSale}
+                      disabled={
+                        !hasAvailableVariant(variants, getCandidate(value))
+                      }
                     >
                       {value}
                     </option>
@@ -361,11 +360,10 @@ function VariantSelector({
               >
                 {option.values.map((value) => {
                   const isSelected = selected[option.name] === value
-                  const match = findAvailableVariant(
+                  const isUnavailable = !hasAvailableVariant(
                     variants,
                     getCandidate(value),
                   )
-                  const isUnavailable = !match?.availableForSale
                   const handleClick = () => handleChange(value)
                   if (isSizeOption) {
                     return (
@@ -519,18 +517,6 @@ function findMatchingVariant(
   )
 }
 
-function findAvailableVariant(
-  variants: Array<ProductDetailVariant>,
-  selected: Record<string, string>,
-): ProductDetailVariant | undefined {
-  return variants.find((variant) =>
-    variant.selectedOptions.every(
-      (option) =>
-        !selected[option.name] || selected[option.name] === option.value,
-    ),
-  )
-}
-
 function ProductJsonLd({
   product,
   selectedVariant,

src/utils/shopify-queries.ts

@@ -255,6 +255,22 @@ export type ProductDetailVariant = Pick<
   image: Pick<StorefrontImage, 'url' | 'altText' | 'width' | 'height'> | null
 }
 
+export function hasAvailableVariant(
+  variants: Array<
+    Pick<ProductDetailVariant, 'availableForSale' | 'selectedOptions'>
+  >,
+  selected: Record<string, string>,
+): boolean {
+  return variants.some(
+    (variant) =>
+      variant.availableForSale &&
+      variant.selectedOptions.every(
+        (option) =>
+          !selected[option.name] || selected[option.name] === option.value,
+      ),
+  )
+}
+
 export type ProductDetail = Pick<
   Product,
   'id' | 'handle' | 'title' | 'descriptionHtml'

tests/shopify-variant.test.ts

@@ -0,0 +1,46 @@
+import assert from 'node:assert/strict'
+import { test } from 'node:test'
+import { hasAvailableVariant } from '../src/utils/shopify-queries'
+
+const variants = [
+  {
+    availableForSale: false,
+    selectedOptions: [
+      { name: 'Color', value: 'Black' },
+      { name: 'Size', value: 'Small' },
+    ],
+  },
+  {
+    availableForSale: true,
+    selectedOptions: [
+      { name: 'Color', value: 'Black' },
+      { name: 'Size', value: 'Large' },
+    ],
+  },
+  {
+    availableForSale: false,
+    selectedOptions: [
+      { name: 'Color', value: 'Blue' },
+      { name: 'Size', value: 'Large' },
+    ],
+  },
+]
+
+test('partial selections stay available when any matching variant is in stock', () => {
+  assert.equal(hasAvailableVariant(variants, { Color: 'Black' }), true)
+})
+
+test('complete selections only match the selected variant', () => {
+  assert.equal(
+    hasAvailableVariant(variants, { Color: 'Black', Size: 'Small' }),
+    false,
+  )
+  assert.equal(
+    hasAvailableVariant(variants, { Color: 'Black', Size: 'Large' }),
+    true,
+  )
+})
+
+test('partial selections are unavailable when all matches are sold out', () => {
+  assert.equal(hasAvailableVariant(variants, { Color: 'Blue' }), false)
+})