From 1680c3ce4d3568ee9ef849e5a6eb6972b87b1f32 Mon Sep 17 00:00:00 2001
From: Kevin Green <kevin@ctrlaltdel.world>
Date: Mon, 4 Sep 2023 16:09:38 -0700
Subject: [PATCH] rebuild the color picker using colorType

---
 app/queries/sanity.js                     | 20 ++++++++++-----
 app/routes/($locale).products.$handle.jsx |  6 ++---
 cms/schemas/documents/productVariant.js   | 13 ++--------
 cms/schemas/objects/shopifyProduct.js     | 31 ++++++++++++-----------
 4 files changed, 34 insertions(+), 36 deletions(-)

diff --git a/app/queries/sanity.js b/app/queries/sanity.js
index c290f98..724f7b8 100644
--- a/app/queries/sanity.js
+++ b/app/queries/sanity.js
@@ -169,17 +169,23 @@ const productQuery = groq`
     ...,
     variants[]-> {
       ...,
-      'pattern': pattern[0] {
+      'pattern': pattern-> {
         _type,
         _key,
-        _type == 'color' => {
-          'color': hex,
-        },
-        _type == 'image' => {
-          'image': asset-> {
-            ...
+        ...,
+        'colorType': colorType[0] {
+          _type,
+          _key,
+          _type == 'color' => {
+            'color': hex,
+          },
+          _type == 'module.image' => {
+            'image': image.asset-> {
+              ...
+            }
           }
         }
+        
       }
     }
   }
diff --git a/app/routes/($locale).products.$handle.jsx b/app/routes/($locale).products.$handle.jsx
index 11ce04e..6936b33 100644
--- a/app/routes/($locale).products.$handle.jsx
+++ b/app/routes/($locale).products.$handle.jsx
@@ -59,7 +59,6 @@ export const loader = async ({ params, context, request }) => {
   }
 
   const sanityProduct = await context.sanity.fetch(QUERY_PRODUCT(handle))
-
   const selectedVariant = product.selectedVariant ?? product?.variants?.nodes[0]
 
   return json({
@@ -174,6 +173,7 @@ export default function ProductHandle() {
                     const matchedPattern = sanityProduct.store.variants.find(variant => {
                       return variant.store.title == value
                     })
+                    console.log('matchedPattern', matchedPattern.pattern.colorType)
                     optionParams.set(name, value)
                     return (
                       /* Use the `active` state to conditionally style the active item. */
@@ -181,9 +181,9 @@ export default function ProductHandle() {
                           key={value}
                           preventScrollReset
                           style={{
-                            backgroundImage: matchedPattern.pattern?.image ? `url(${matchedPattern.pattern?.image?.url})` : 'none',
+                            backgroundImage: matchedPattern.pattern?.colorType?.image ? `url(${matchedPattern.pattern?.colorType?.image?.url})` : 'none',
                             backgroundSize: 'cover',
-                            backgroundColor: matchedPattern.pattern?.color,
+                            backgroundColor: matchedPattern.pattern?.colorType?.color,
                           }}
                           aria-label={`${name}: ${value}`}
                           to={`${pathname}?${optionParams.toString()}`}
diff --git a/cms/schemas/documents/productVariant.js b/cms/schemas/documents/productVariant.js
index fb0c32d..86177af 100644
--- a/cms/schemas/documents/productVariant.js
+++ b/cms/schemas/documents/productVariant.js
@@ -44,18 +44,9 @@ export default defineType({
     defineField({
       title: 'Pattern',
       name: 'pattern',
-      type: 'array',
+      type: 'reference',
+      to: { type: 'colorType' },
       group: 'editorial',
-      of: [{
-        type: 'color',
-        name: 'color',
-        title: 'Color'
-      }, {
-        type: 'image',
-        name: 'image',
-        title: 'Image'
-      }],
-      validation: Rule => Rule.required().max(1),
     }),
     // Shopify product variant
     defineField({
diff --git a/cms/schemas/objects/shopifyProduct.js b/cms/schemas/objects/shopifyProduct.js
index 3d18037..cb4a076 100644
--- a/cms/schemas/objects/shopifyProduct.js
+++ b/cms/schemas/objects/shopifyProduct.js
@@ -31,6 +31,21 @@ export default defineField({
     },
   ],
   fields: [
+    // Variants
+    defineField({
+      fieldset: 'variants',
+      name: 'variants',
+      title: 'Variants',
+      type: 'array',
+      of: [
+        {
+          title: 'Variant',
+          type: 'reference',
+          weak: true,
+          to: [{type: 'productVariant'}],
+        },
+      ],
+    }),
     // Created at
     defineField({
       fieldset: 'status',
@@ -194,20 +209,6 @@ export default defineField({
         },
       ],
     }),
-    // Variants
-    defineField({
-      fieldset: 'variants',
-      name: 'variants',
-      title: 'Variants',
-      type: 'array',
-      of: [
-        {
-          title: 'Variant',
-          type: 'reference',
-          weak: true,
-          to: [{type: 'productVariant'}],
-        },
-      ],
-    }),
+
   ],
 })