Select variant in product page

components/product/ProductView/ProductView.tsx

@@ -4,7 +4,6 @@ import Image from 'next/image'
 import { NextSeo } from 'next-seo'
 
 import s from './ProductView.module.css'
-import { Heart } from '@components/icons'
 import { useUI } from '@components/ui/context'
 import { Swatch, ProductSlider } from '@components/product'
 import { Button, Container } from '@components/ui'
@@ -12,7 +11,11 @@ import { HTMLContent } from '@components/core'
 
 import useAddItem from '@lib/bigcommerce/cart/use-add-item'
 import type { ProductNode } from '@lib/bigcommerce/api/operations/get-product'
-import { getProductOptions } from '../helpers'
+import {
+  getCurrentVariant,
+  getProductOptions,
+  ProductOptions,
+} from '../helpers'
 import WishlistButton from '@components/wishlist/WishlistButton'
 
 interface Props {
@@ -21,16 +24,17 @@ interface Props {
   product: ProductNode
 }
 
-const ProductView: FC<Props> = ({ product, className }) => {
+const ProductView: FC<Props> = ({ product }) => {
   const addItem = useAddItem()
   const { openSidebar } = useUI()
   const options = getProductOptions(product)
   const [loading, setLoading] = useState(false)
-
-  const [choices, setChoices] = useState<Record<string, any>>({
+  const [choices, setChoices] = useState<ProductOptions>({
     size: null,
     color: null,
   })
+  const variant =
+    getCurrentVariant(product, choices) || product.variants.edges?.[0]
 
   const addToCart = async () => {
     setLoading(true)
@@ -102,7 +106,7 @@ const ProductView: FC<Props> = ({ product, className }) => {
                 <h2 className="uppercase font-medium">{opt.displayName}</h2>
                 <div className="flex flex-row py-4">
                   {opt.values.map((v: any, i: number) => {
-                    const active = choices[opt.displayName]
+                    const active = (choices as any)[opt.displayName]
 
                     return (
                       <Swatch
@@ -137,6 +141,7 @@ const ProductView: FC<Props> = ({ product, className }) => {
               className={s.button}
               onClick={addToCart}
               loading={loading}
+              disabled={!variant}
             >
               Add to Cart
             </Button>

components/product/helpers.ts

@@ -1,10 +1,51 @@
 import type { ProductNode } from '@lib/bigcommerce/api/operations/get-product'
 
+export type SelectedOptions = {
+  size: string | null
+  color: string | null
+}
+
+export type ProductOption = {
+  displayName: string
+  values: any
+}
+
+// Returns the available options of a product
 export function getProductOptions(product: ProductNode) {
-  const options = product.productOptions.edges?.map(({ node }: any) => ({
-    displayName: node.displayName.toLowerCase(),
-    values: node.values.edges?.map(({ node }: any) => node),
-  }))
+  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 ?? {}
+
+    return Object.entries(opts).every(([key, value]) =>
+      node?.productOptions.edges?.find((edge) => {
+        if (
+          edge?.node.__typename === 'MultipleChoiceOption' &&
+          edge.node.displayName.toLowerCase() === key
+        ) {
+          return edge.node.values.edges?.find(
+            (valueEdge) => valueEdge?.node.label === value
+          )
+        }
+      })
+    )
+  })
+
+  return variant
+}