commerce/components/product/helpers.ts

import type { Product } from '@commerce/types'

export type SelectedOptions = {
  size: string | null
  color: string | null
}

export function getVariant(product: Product, opts: SelectedOptions) {
  const variant = product.variants.find((variant) => {
    return Object.entries(opts).every(([key, value]) =>
      variant.options.find((option) => {
        if (
          option.__typename === 'MultipleChoiceOption' &&
          option.displayName.toLowerCase() === key.toLowerCase()
        ) {
          return option.values.find((v) => v.label.toLowerCase() === value)
        } else if (!value) {
          return !variant.options.filter(
            ({ displayName }) => displayName.toLowerCase() === key
          ).length
        }
      })
    )
  })
  return variant
}