Fix category & color normalization

components/product/Swatch/Swatch.tsx

@@ -44,16 +44,17 @@ const Swatch: FC<Omit<ButtonProps, 'variant'> & SwatchProps> = ({
       className={swatchClassName}
       style={color ? { backgroundColor: color } : {}}
       aria-label="Variant Swatch"
+      {...(label && color && { title: label })}
       {...props}
     >
-      {variant === 'color' && active && (
+      {color && active && (
         <span>
           <Check />
         </span>
       )}
-      {variant !== 'color' ? label : null}
+      {!color ? label : null}
     </Button>
   )
 }
 
-export default Swatch
+export default Swatch

framework/shopify/utils/normalize.ts

@@ -14,6 +14,7 @@ import {
   ProductOption,
   Page as ShopifyPage,
   PageEdge,
+  Collection,
 } from '../schema'
 import { colorMap } from '@lib/colors'
 
@@ -38,7 +39,7 @@ const normalizeProductOption = ({
         label: value,
       }
       if (displayName.match(/colou?r/gi)) {
-        const mapedColor = colorMap[value]
+        const mapedColor = colorMap[value.toLowerCase().replace(/ /g, '')]
         if (mapedColor) {
           output = {
             ...output,
@@ -183,10 +184,13 @@ export const normalizePage = (
 export const normalizePages = (edges: PageEdge[], locale: string): Page[] =>
   edges?.map((edge) => normalizePage(edge.node, locale))
 
-export const normalizeCategory = (category: any): Category => ({
+export const normalizeCategory = ({
-  id: category.id,
+  title: name,
-  name: category.name,
+  handle,
-  slug: category.handle,
+  id,
-  path: `/${category.handle}`,
+}: Collection): Category => ({
+  id,
+  name,
+  slug: handle,
+  path: `/${handle}`,
 })
-

tsconfig.json

@@ -22,8 +22,8 @@
       "@components/*": ["components/*"],
       "@commerce": ["framework/commerce"],
       "@commerce/*": ["framework/commerce/*"],
-      "@framework": ["framework/bigcommerce"],
+      "@framework": ["framework/shopify"],
-      "@framework/*": ["framework/bigcommerce/*"]
+      "@framework/*": ["framework/shopify/*"]
     }
   },
   "include": ["next-env.d.ts", "**/*.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"],