From a4826ca5a80e8013b2e96f54017f9a3b569b0449 Mon Sep 17 00:00:00 2001
From: Ben Halverson <benhalverson33@gmail.com>
Date: Sat, 7 Mar 2026 01:46:49 -0800
Subject: [PATCH] wip

---
 src/components/ColorPicker.test.tsx   | 11 +++-
 src/components/ColorPicker.tsx        | 33 ++++++++--
 src/components/ColorPickerV2.tsx      | 89 +++++++++++++++++++++++++++
 src/components/ColorPickerWrapper.tsx | 19 ++++++
 src/config.ts                         |  2 +
 src/context/ColorContext.tsx          |  2 +-
 src/interfaces/colors.ts              | 11 +++-
 src/pages/Product.test.tsx            |  1 +
 src/pages/Product.tsx                 |  4 +-
 9 files changed, 157 insertions(+), 15 deletions(-)
 create mode 100644 src/components/ColorPickerV2.tsx
 create mode 100644 src/components/ColorPickerWrapper.tsx

diff --git a/src/components/ColorPicker.test.tsx b/src/components/ColorPicker.test.tsx
index a3e2429..96fe97f 100644
--- a/src/components/ColorPicker.test.tsx
+++ b/src/components/ColorPicker.test.tsx
@@ -3,12 +3,17 @@ import userEvent from "@testing-library/user-event";
 import { vi } from "vitest";
 import ColorPicker from "../components/ColorPicker";
 import { ColorProvider } from "../context/ColorContext";
-import type { ColorsResponse } from "../interfaces";
 
 vi.mock("../config", () => ({ BASE_URL: "https://example.test" }));
 
-// Mock data for color options
-const mockColors: ColorsResponse[] = [
+// v1 /colors mock response shape
+type V1ColorResponse = {
+  filament: string;
+  hexColor: string;
+  colorTag: string;
+};
+
+const mockColors: V1ColorResponse[] = [
   { filament: "PLA", hexColor: "FF5733", colorTag: "Red" },
   { filament: "PLA", hexColor: "33FF57", colorTag: "Green" },
   { filament: "PLA", hexColor: "3357FF", colorTag: "Blue" },
diff --git a/src/components/ColorPicker.tsx b/src/components/ColorPicker.tsx
index 24d9704..393b646 100644
--- a/src/components/ColorPicker.tsx
+++ b/src/components/ColorPicker.tsx
@@ -16,8 +16,29 @@ const ColorPicker: React.FC<Props> = ({ filamentType }) => {
         if (filamentType) url.searchParams.set("filamentType", filamentType);
 
         const response = await fetch(url.toString());
-        const colors = (await response.json()) as ColorsResponse[];
-        dispatch({ type: "SET_COLOR_OPTIONS", payload: colors });
+
+        // v1 /colors response shape
+        type V1ColorResponse = {
+          filament: string;
+          hexColor: string;
+          colorTag: string;
+        };
+
+        const rawColors = (await response.json()) as V1ColorResponse[];
+
+        const mappedColors: ColorsResponse[] = rawColors.map((c) => ({
+          name: c.filament,
+          provider: "", // not provided by v1 API
+          public: true,
+          available: true,
+          profile: c.colorTag,
+          color: c.filament,
+          hexValue: `#${c.hexColor.replace(/^#/, "")}`,
+          publicId: c.colorTag,
+        }));
+
+        console.log("Fetched colors (v1 mapped):", mappedColors);
+        dispatch({ type: "SET_COLOR_OPTIONS", payload: mappedColors });
       } catch (error) {
         console.error("Failed to fetch colors:", error);
       } finally {
@@ -40,8 +61,8 @@ const ColorPicker: React.FC<Props> = ({ filamentType }) => {
         className="flex items-center space-x-3">
         {colorOptions?.map((colorOption, index) => (
           <Radio
-            key={`${colorOption.hexColor}-${index}`}
-            value={colorOption.hexColor}
+            key={`${colorOption.hexValue}-${index}`}
+            value={colorOption.hexValue}
             className={({ checked }) =>
               `relative -m-0.5 flex cursor-pointer items-center justify-center rounded-full p-0.5 focus:outline-none ${
                 checked ? "ring-2 ring-offset-1 ring-blue-500" : ""
@@ -52,9 +73,9 @@ const ColorPicker: React.FC<Props> = ({ filamentType }) => {
                 <span
                   aria-hidden="true"
                   className="h-8 w-8 rounded-full border border-black border-opacity-10"
-                  style={{ backgroundColor: `#${colorOption.hexColor}` }}
+                  style={{ backgroundColor: `${colorOption.hexValue}` }}
                 />
-                <span className="sr-only">{colorOption.colorTag}</span>
+                <span className="sr-only">{colorOption.color}</span>
                 {checked && (
                   <span
                     className="absolute inset-0 rounded-full ring-2 ring-offset-2"
diff --git a/src/components/ColorPickerV2.tsx b/src/components/ColorPickerV2.tsx
new file mode 100644
index 0000000..334333c
--- /dev/null
+++ b/src/components/ColorPickerV2.tsx
@@ -0,0 +1,89 @@
+import { Radio, RadioGroup } from "@headlessui/react";
+import { useEffect } from "react";
+import { BASE_URL } from "../config";
+import { useColorContext } from "../context/ColorContext";
+import type { ColorsResponse } from "../interfaces";
+
+interface Props {
+  filamentType: string;
+}
+
+// v2 ColorPicker: consumes the new /v2/colors API which already
+// returns data in the ColorsResponse shape.
+const ColorPickerV2: React.FC<Props> = ({ filamentType }) => {
+  const { state, dispatch } = useColorContext();
+  const { colorOptions, isLoading, color } = state;
+
+  useEffect(() => {
+    const fetchColors = async () => {
+      dispatch({ type: "SET_IS_LOADING", payload: true });
+      try {
+        const url = new URL(`${BASE_URL}/v2/colors`);
+        if (filamentType) url.searchParams.set("profile", filamentType);
+
+        const response = await fetch(url.toString());
+
+        type V2ColorsEnvelope = {
+          success: boolean;
+          message: string;
+          data: ColorsResponse[];
+        };
+
+        const json = (await response.json()) as V2ColorsEnvelope;
+        const colors = json.data ?? [];
+
+        console.log("Fetched colors (v2):", colors);
+        dispatch({ type: "SET_COLOR_OPTIONS", payload: colors });
+      } catch (error) {
+        console.error("Failed to fetch v2 colors:", error);
+      } finally {
+        dispatch({ type: "SET_IS_LOADING", payload: false });
+      }
+    };
+
+    if (filamentType) fetchColors();
+  }, [filamentType, dispatch]);
+
+  if (isLoading) return <div>Loading...</div>;
+
+  return (
+    <fieldset aria-label="Choose a color" className="mt-2">
+      <RadioGroup
+        value={color}
+        onChange={(newColor) =>
+          dispatch({ type: "SET_COLOR", payload: newColor })
+        }
+        className="flex items-center space-x-3">
+        {colorOptions?.map((colorOption, index) => (
+          <Radio
+            key={`${colorOption.hexValue}-${index}`}
+            value={colorOption.hexValue}
+            className={({ checked }) =>
+              `relative -m-0.5 flex cursor-pointer items-center justify-center rounded-full p-0.5 focus:outline-none ${
+                checked ? "ring-2 ring-offset-1 ring-blue-500" : ""
+              }`
+            }>
+            {({ checked }) => (
+              <>
+                <span
+                  aria-hidden="true"
+                  className="h-8 w-8 rounded-full border border-black border-opacity-10"
+                  style={{ backgroundColor: `${colorOption.hexValue}` }}
+                />
+                <span className="sr-only">{colorOption.color}</span>
+                {checked && (
+                  <span
+                    className="absolute inset-0 rounded-full ring-2 ring-offset-2"
+                    aria-hidden="true"
+                  />
+                )}
+              </>
+            )}
+          </Radio>
+        ))}
+      </RadioGroup>
+    </fieldset>
+  );
+};
+
+export default ColorPickerV2;
diff --git a/src/components/ColorPickerWrapper.tsx b/src/components/ColorPickerWrapper.tsx
new file mode 100644
index 0000000..3ef4dfd
--- /dev/null
+++ b/src/components/ColorPickerWrapper.tsx
@@ -0,0 +1,19 @@
+import type React from "react";
+import { COLOR_PICKER_VERSION } from "../config";
+import ColorPicker from "./ColorPicker";
+import ColorPickerV2 from "./ColorPickerV2";
+
+interface Props {
+  filamentType: string;
+}
+
+const ColorPickerWrapper: React.FC<Props> = ({ filamentType }) => {
+  if (COLOR_PICKER_VERSION === "v2") {
+    return <ColorPickerV2 filamentType={filamentType} />;
+  }
+
+  // Default to v1 implementation
+  return <ColorPicker filamentType={filamentType} />;
+};
+
+export default ColorPickerWrapper;
diff --git a/src/config.ts b/src/config.ts
index 370afc7..79ef8c1 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -3,9 +3,11 @@ import { z } from "zod";
 const zEnv = z.object({
   VITE_BASE_URL: z.string().url(),
   VITE_DOMAIN: z.string().min(1).max(100),
+  VITE_COLOR_PICKER_VERSION: z.enum(["v1", "v2"]).optional(),
 });
 
 const parsed = zEnv.parse(import.meta.env);
 
 export const BASE_URL = parsed.VITE_BASE_URL;
 export const DOMAIN = parsed.VITE_DOMAIN;
+export const COLOR_PICKER_VERSION = parsed.VITE_COLOR_PICKER_VERSION ?? "v1";
diff --git a/src/context/ColorContext.tsx b/src/context/ColorContext.tsx
index 7406751..4a0c0b4 100644
--- a/src/context/ColorContext.tsx
+++ b/src/context/ColorContext.tsx
@@ -38,7 +38,7 @@ const colorReducer = (state: ColorState, action: ColorAction): ColorState => {
         colorOptions: action.payload,
         color:
           !state.hasInitialized && action.payload.length > 0
-            ? action.payload[0].hexColor
+            ? action.payload[0].hexValue
             : state.color,
         hasInitialized: true,
       };
diff --git a/src/interfaces/colors.ts b/src/interfaces/colors.ts
index d4e825b..a348a1e 100644
--- a/src/interfaces/colors.ts
+++ b/src/interfaces/colors.ts
@@ -2,7 +2,12 @@
  * The response for the /colors endpoint
  */
 export interface ColorsResponse {
-  filament: string;
-  hexColor: string;
-  colorTag: string;
+  name: string;
+  provider: string;
+  public: boolean;
+  available: boolean;
+  profile: string;
+  color: string;
+  hexValue: string;
+  publicId: string;
 }
diff --git a/src/pages/Product.test.tsx b/src/pages/Product.test.tsx
index 7e12b2d..7d77ab4 100644
--- a/src/pages/Product.test.tsx
+++ b/src/pages/Product.test.tsx
@@ -15,6 +15,7 @@ import ProductPage from "./Product";
 vi.mock("../config", () => ({
   BASE_URL: "http://test.local",
   DOMAIN: "http://test.local",
+  COLOR_PICKER_VERSION: "v1",
 }));
 
 vi.mock("../components/PreviewComponent", () => ({
diff --git a/src/pages/Product.tsx b/src/pages/Product.tsx
index 40019fd..5943cfb 100644
--- a/src/pages/Product.tsx
+++ b/src/pages/Product.tsx
@@ -1,7 +1,7 @@
 import { ShoppingBagIcon, UserIcon } from "@heroicons/react/24/outline";
 import { lazy, Suspense, useEffect, useState } from "react";
 import { Link, useParams } from "react-router-dom";
-import ColorPicker from "../components/ColorPicker";
+import ColorPickerWrapper from "../components/ColorPickerWrapper";
 import FilamentDropdown from "../components/FilamentDropdown";
 import Gallery from "../components/Gallery";
 import { BASE_URL } from "../config";
@@ -146,7 +146,7 @@ export default function ProductPage() {
               </div>
               <div>
                 <h2 className="text-sm font-medium text-gray-900">Color</h2>
-                <ColorPicker filamentType={selectedFilament} />
+                <ColorPickerWrapper filamentType={selectedFilament} />
                 <div className="mt-4">
                   <h2 className="text-sm font-medium text-gray-900">
                     Quantity