Correct Variant Added to Cart

components/product/ProductView/ProductView.tsx

@@ -11,7 +11,7 @@ import { Button, Container, Text } from '@components/ui'
 import usePrice from '@framework/product/use-price'
 import { useAddItem } from '@framework/cart'
 
-import { getCurrentVariant, SelectedOptions } from '../helpers'
+import { getVariant, SelectedOptions } from '../helpers'
 import WishlistButton from '@components/wishlist/WishlistButton'
 
 interface Props {
@@ -27,23 +27,24 @@ const ProductView: FC<Props> = ({ product }) => {
     baseAmount: product.price.retailValue,
     currencyCode: product.price.currencyCode!,
   })
-
   const { openSidebar } = useUI()
-
   const [loading, setLoading] = useState(false)
   const [choices, setChoices] = useState<SelectedOptions>({
     size: null,
     color: null,
   })
 
-  // const variant = getCurrentVariant(product, choices) || product.variants[0]
-  console.log('PRODUCT VIEW', product)
+  // Select the correct variant based on choices
+  const variant = getVariant(product, choices)
+
   const addToCart = async () => {
     setLoading(true)
     try {
       await addItem({
         productId: Number(product.id),
-        variantId: Number(product.variants[0].id), // TODO(bc) send the correct variant
+        variantId: variant
+          ? Number(variant.id)
+          : Number(product.variants[0].id),
       })
       openSidebar()
       setLoading(false)
@@ -108,11 +109,14 @@ const ProductView: FC<Props> = ({ product }) => {
                 <h2 className="uppercase font-medium">{opt.displayName}</h2>
                 <div className="flex flex-row py-4">
                   {opt.values.map((v, i: number) => {
-                    const active = (choices as any)[opt.displayName]
+                    const active = (choices as any)[
+                      opt.displayName.toLowerCase()
+                    ]
+
                     return (
                       <Swatch
                         key={`${opt.id}-${i}`}
-                        active={v.label === active}
+                        active={v.label.toLowerCase() === active}
                         variant={opt.displayName}
                         color={v.hexColors ? v.hexColors[0] : ''}
                         label={v.label}
@@ -120,7 +124,7 @@ const ProductView: FC<Props> = ({ product }) => {
                           setChoices((choices) => {
                             return {
                               ...choices,
-                              [opt.displayName]: v.label,
+                              [opt.displayName.toLowerCase()]: v.label.toLowerCase(),
                             }
                           })
                         }}
@@ -142,6 +146,7 @@ const ProductView: FC<Props> = ({ product }) => {
               className={s.button}
               onClick={addToCart}
               loading={loading}
+              disabled={!variant}
             >
               Add to Cart
             </Button>

components/product/helpers.ts

@@ -1,5 +1,3 @@
-import type { ProductNode } from '@framework/api/operations/get-product'
-
 export type SelectedOptions = {
   size: string | null
   color: string | null
@@ -10,42 +8,18 @@ export type ProductOption = {
   values: any
 }
 
-// Returns the available options of a product
-export function getProductOptions(product: ProductNode) {
-  const options = product.productOptions.edges?.reduce<ProductOption[]>(
-    (arr, edge) => {
-      if (edge?.node.__typename === 'MultipleChoiceOption') {
-        arr.push({
-          displayName: edge.node.displayName.toLowerCase(),
-          values: edge.node.values.edges?.map((edge) => edge?.node),
-        })
-      }
-      return arr
-    },
-    []
-  )
-
-  return options
-}
-
-// Finds a variant in the product that matches the selected options
-export function getCurrentVariant(product: ProductNode, opts: SelectedOptions) {
-  const variant = product.variants.edges?.find((edge) => {
-    const { node } = edge ?? {}
-
+export function getVariant(product: Product, opts: SelectedOptions) {
+  const variant = product.variants.find((variant) => {
     return Object.entries(opts).every(([key, value]) =>
-      node?.productOptions.edges?.find((edge) => {
+      variant.options.find((option) => {
         if (
-          edge?.node.__typename === 'MultipleChoiceOption' &&
-          edge.node.displayName.toLowerCase() === key
+          option.__typename === 'MultipleChoiceOption' &&
+          option.displayName.toLowerCase() === key.toLowerCase()
         ) {
-          return edge.node.values.edges?.find(
-            (valueEdge) => valueEdge?.node.label === value
-          )
+          return option.values.find((v) => v.label.toLowerCase() === value)
         }
       })
     )
   })
-
   return variant
 }