Adding ProductOptions Component and more helpers

components/product/ProductCard/ProductCard.module.css

@@ -1,7 +1,7 @@
 .root {
   @apply relative max-h-full w-full box-border overflow-hidden
   bg-no-repeat bg-center bg-cover transition-transform
-  ease-linear cursor-pointer inline-block;
+  ease-linear cursor-pointer inline-block bg-accent-1;
   height: 100% !important;
 
   &:hover {

components/product/ProductOptions/ProductOptions.tsx

@@ -0,0 +1,51 @@
+import { Swatch } from '@components/product'
+import type { ProductOption } from '@commerce/types/product'
+import { SelectedOptions } from '../helpers'
+
+interface ProductOptionsProps {
+  options: ProductOption[]
+  selectedOptions: SelectedOptions
+  setSelectedOptions: React.Dispatch<React.SetStateAction<SelectedOptions>>
+}
+
+const ProductOptions: React.FC<ProductOptionsProps> = ({
+  options,
+  selectedOptions,
+  setSelectedOptions,
+}) => {
+  return (
+    <div>
+      {options.map((opt) => (
+        <div className="pb-4" key={opt.displayName}>
+          <h2 className="uppercase font-medium text-sm tracking-wide">
+            {opt.displayName}
+          </h2>
+          <div className="flex flex-row py-4">
+            {opt.values.map((v, i: number) => {
+              const active = selectedOptions[opt.displayName.toLowerCase()]
+              return (
+                <Swatch
+                  key={`${opt.id}-${i}`}
+                  active={v.label.toLowerCase() === active}
+                  variant={opt.displayName}
+                  color={v.hexColors ? v.hexColors[0] : ''}
+                  label={v.label}
+                  onClick={() => {
+                    setSelectedOptions((selectedOptions) => {
+                      return {
+                        ...selectedOptions,
+                        [opt.displayName.toLowerCase()]: v.label.toLowerCase(),
+                      }
+                    })
+                  }}
+                />
+              )
+            })}
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default ProductOptions

components/product/ProductOptions/index.ts

@@ -0,0 +1 @@
+export { default } from './ProductOptions'

components/product/ProductView/ProductView.tsx

@@ -5,47 +5,46 @@ import s from './ProductView.module.css'
 import { FC, useEffect, useState } from 'react'
 import type { Product } from '@commerce/types/product'
 import usePrice from '@framework/product/use-price'
-import { getVariant, SelectedOptions } from '../helpers'
+import {
-import { Swatch, ProductSlider } from '@components/product'
+  getProductVariant,
-import { Button, Container, Text, useUI } from '@components/ui'
+  selectDefaultOptionFromProduct,
+  SelectedOptions,
+} from '../helpers'
 import { useAddItem } from '@framework/cart'
-import Rating from '@components/ui/Rating'
+import { WishlistButton } from '@components/wishlist'
-import Collapse from '@components/ui/Collapse'
+import { ProductSlider, ProductCard, ProductOptions } from '@components/product'
-import ProductCard from '@components/product/ProductCard'
+import {
-import WishlistButton from '@components/wishlist/WishlistButton'
+  Button,
+  Container,
+  Text,
+  useUI,
+  Rating,
+  Collapse,
+} from '@components/ui'
 
-interface Props {
+interface ProductViewProps {
-  children?: any
   product: Product
-  relatedProducts: Product[]
   className?: string
+  relatedProducts: Product[]
+  children?: React.ReactNode
 }
 
-const ProductView: FC<Props> = ({ product, relatedProducts }) => {
+const ProductView: FC<ProductViewProps> = ({ product, relatedProducts }) => {
-  // TODO: fix this missing argument issue
+  const { openSidebar } = useUI()
-  /* @ts-ignore */
+  const [loading, setLoading] = useState(false)
+  const [selectedOptions, setSelectedOptions] = useState<SelectedOptions>({})
   const addItem = useAddItem()
   const { price } = usePrice({
     amount: product.price.value,
     baseAmount: product.price.retailPrice,
     currencyCode: product.price.currencyCode!,
   })
-  const { openSidebar } = useUI()
-  const [loading, setLoading] = useState(false)
-  const [choices, setChoices] = useState<SelectedOptions>({})
 
   useEffect(() => {
-    // Selects the default option
+    selectDefaultOptionFromProduct(product, setSelectedOptions)
-    product.variants[0].options?.forEach((v) => {
-      setChoices((choices) => ({
-        ...choices,
-        [v.displayName.toLowerCase()]: v.values[0].label.toLowerCase(),
-      }))
-    })
   }, [])
 
-  const variant = getVariant(product, choices)
+  const variant = getProductVariant(product, selectedOptions)
-
   const addToCart = async () => {
     setLoading(true)
     try {
@@ -84,9 +83,7 @@ const ProductView: FC<Props> = ({ product, relatedProducts }) => {
           <div className={s.nameBox}>
             <h1 className={s.name}>{product.name}</h1>
             <div className={s.price}>
-              {price}
+              {`${price} ${product.price?.currencyCode}`}
-              {` `}
-              {product.price?.currencyCode}
             </div>
           </div>
 
@@ -116,43 +113,15 @@ const ProductView: FC<Props> = ({ product, relatedProducts }) => {
           )}
         </div>
         <div className={s.sidebar}>
-          <section>
+          <ProductOptions
-            {product.options?.map((opt) => (
+            options={product.options}
-              <div className="pb-4" key={opt.displayName}>
+            selectedOptions={selectedOptions}
-                <h2 className="uppercase font-medium text-sm tracking-wide">
+            setSelectedOptions={setSelectedOptions}
-                  {opt.displayName}
+          />
-                </h2>
+          <Text
-                <div className="flex flex-row py-4">
+            className="pb-4 break-words w-full max-w-xl"
-                  {opt.values.map((v, i: number) => {
+            html={product.descriptionHtml || product.description}
-                    const active = (choices as any)[
-                      opt.displayName.toLowerCase()
-                    ]
-
-                    return (
-                      <Swatch
-                        key={`${opt.id}-${i}`}
-                        active={v.label.toLowerCase() === active}
-                        variant={opt.displayName}
-                        color={v.hexColors ? v.hexColors[0] : ''}
-                        label={v.label}
-                        onClick={() => {
-                          setChoices((choices) => {
-                            return {
-                              ...choices,
-                              [opt.displayName.toLowerCase()]: v.label.toLowerCase(),
-                            }
-                          })
-                        }}
           />
-                    )
-                  })}
-                </div>
-              </div>
-            ))}
-            <div className="pb-4 break-words w-full max-w-xl">
-              <Text html={product.descriptionHtml || product.description} />
-            </div>
-          </section>
           <div className="flex flex-row justify-between items-center">
             <Rating value={2} />
             <div className="text-accent-6 pr-1 font-medium select-none">
@@ -173,13 +142,12 @@ const ProductView: FC<Props> = ({ product, relatedProducts }) => {
                 : 'Add To Cart'}
             </Button>
           </div>
-
           <div className="mt-6">
-            <Collapse title="Details">
+            <Collapse title="Care">
               This is a limited edition production run. Printing starts when the
               drop ends.
             </Collapse>
-            <Collapse title="Care">
+            <Collapse title="Details">
               This is a limited edition production run. Printing starts when the
               drop ends. Reminder: Bad Boys For Life. Shipping may take 10+ days
               due to COVID-19.

components/product/helpers.ts

@@ -1,7 +1,8 @@
 import type { Product } from '@commerce/types/product'
 export type SelectedOptions = Record<string, string | null>
+import { Dispatch, SetStateAction } from 'react'
 
-export function getVariant(product: Product, opts: SelectedOptions) {
+export function getProductVariant(product: Product, opts: SelectedOptions) {
   const variant = product.variants.find((variant) => {
     return Object.entries(opts).every(([key, value]) =>
       variant.options.find((option) => {
@@ -16,3 +17,16 @@ export function getVariant(product: Product, opts: SelectedOptions) {
   })
   return variant
 }
+
+export function selectDefaultOptionFromProduct(
+  product: Product,
+  updater: Dispatch<SetStateAction<SelectedOptions>>
+) {
+  // Selects the default option
+  product.variants[0].options?.forEach((v) => {
+    updater((choices) => ({
+      ...choices,
+      [v.displayName.toLowerCase()]: v.values[0].label.toLowerCase(),
+    }))
+  })
+}

components/product/index.ts

@@ -2,3 +2,4 @@ export { default as Swatch } from './Swatch'
 export { default as ProductView } from './ProductView'
 export { default as ProductCard } from './ProductCard'
 export { default as ProductSlider } from './ProductSlider'
+export { default as ProductOptions } from './ProductOptions'