Normalized Options and Swatches

components/product/ProductView/ProductView.tsx

@@ -25,8 +25,6 @@ interface Props {
 }
 
 const ProductView: FC<Props> = ({ product }) => {
-  console.log(product)
-
   const addItem = useAddItem()
   const { price } = usePrice({
     amount: product.price.value,
@@ -36,8 +34,6 @@ const ProductView: FC<Props> = ({ product }) => {
 
   const { openSidebar } = useUI()
 
-  // const options = getProductOptions(product)
-
   const [loading, setLoading] = useState(false)
   const [choices, setChoices] = useState<SelectedOptions>({
     size: null,
@@ -111,16 +107,16 @@ const ProductView: FC<Props> = ({ product }) => {
 
         <div className={s.sidebar}>
           <section>
-            {/* {options?.map((opt: any) => (
+            {product.options?.map((opt) => (
               <div className="pb-4" key={opt.displayName}>
                 <h2 className="uppercase font-medium">{opt.displayName}</h2>
                 <div className="flex flex-row py-4">
-                  {opt.values.map((v: any, i: number) => {
+                  {opt.values.map((v, i: number) => {
                     const active = (choices as any)[opt.displayName]
 
                     return (
                       <Swatch
-                        key={`${v.entityId}-${i}`}
+                        key={`${opt.id}-${i}`}
                         active={v.label === active}
                         variant={opt.displayName}
                         color={v.hexColors ? v.hexColors[0] : ''}
@@ -138,7 +134,7 @@ const ProductView: FC<Props> = ({ product }) => {
                   })}
                 </div>
               </div>
-            ))} */}
+            ))}
 
             <div className="pb-14 break-words w-full max-w-xl">
               <Text html={product.description} />

framework/bigcommerce/lib/normalize.ts

@@ -8,6 +8,7 @@ export function normalizeProduct(productNode: BCProduct): Product {
     productOptions,
     prices,
     path,
+    options: _,
     ...rest
   } = productNode
 
@@ -29,8 +30,20 @@ export function normalizeProduct(productNode: BCProduct): Product {
           ...rest,
         }))
       : [],
-    productOptions: productOptions.edges
+    options: productOptions.edges
-      ? productOptions.edges.map(({ node }: any) => node)
+      ? productOptions.edges.map(
+          ({
+            node: {
+              entityId,
+              values: { edges },
+              ...rest
+            },
+          }: any) => ({
+            id: entityId,
+            values: edges.map(({ node }: any) => node),
+            ...rest,
+          })
+        )
       : [],
     price: {
       value: prices?.price.value,

framework/types.d.ts

@@ -11,7 +11,19 @@ interface Product extends Entity {
   images: ProductImage[]
   variants: ProductVariant[]
   price: ProductPrice
+  options: ProductOption[]
 }
+
+interface ProductOption extends Entity {
+  displayName: string
+  values: ProductOptionValues[]
+}
+
+interface ProductOptionValues {
+  label: string
+  hexColors?: string[]
+}
+
 interface ProductImage {
   url: string
   alt?: string

tsconfig.json

@@ -26,6 +26,12 @@
       "@framework": ["framework/bigcommerce"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"],
+  "include": [
+    "next-env.d.ts",
+    "./framework/types.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    "**/*.js"
+  ],
   "exclude": ["node_modules"]
 }