From cfe181ac41d78cadb4df188c4558f6f2d6943fdd Mon Sep 17 00:00:00 2001
From: Victor Gerbrands <victorgerbrands@gmail.com>
Date: Wed, 3 May 2023 14:56:55 +0200
Subject: [PATCH] feat: variant selector

---
 app/[page]/page.tsx                     |  2 --
 components/product/variant-selector.tsx |  1 +
 lib/medusa/index.ts                     | 36 ++++++++++++++++++-------
 lib/medusa/types.ts                     | 10 ++++---
 4 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/app/[page]/page.tsx b/app/[page]/page.tsx
index 37ebb0b04..00e118f37 100644
--- a/app/[page]/page.tsx
+++ b/app/[page]/page.tsx
@@ -12,7 +12,6 @@ export async function generateMetadata({
 }: {
   params: { page: string };
 }): Promise<Metadata> {
-  console.log(params);
   const page: any = null;
 
   if (!page) return notFound();
@@ -36,7 +35,6 @@ export async function generateMetadata({
 }
 
 export default async function Page({ params }: { params: { page: string } }) {
-  console.log(params);
   const page: any = null;
 
   if (!page) return notFound();
diff --git a/components/product/variant-selector.tsx b/components/product/variant-selector.tsx
index 2f95d06af..a555aeb7d 100644
--- a/components/product/variant-selector.tsx
+++ b/components/product/variant-selector.tsx
@@ -90,6 +90,7 @@ export function VariantSelector({
         {option.values.map((value) => {
           // Base option params on selected variant params.
           const optionParams = new URLSearchParams(selectedVariantParams);
+
           // Update the params using the current option to reflect how the url would change.
           optionParams.set(option.name.toLowerCase(), value);
 
diff --git a/lib/medusa/index.ts b/lib/medusa/index.ts
index c4d3cae30..2dcd272ab 100644
--- a/lib/medusa/index.ts
+++ b/lib/medusa/index.ts
@@ -9,7 +9,8 @@ import {
   Product,
   ProductCollection,
   ProductOption,
-  ProductVariant
+  ProductVariant,
+  SelectedOption
 } from './types';
 
 // const endpoint = `${process.env.MEDUSA_BACKEND_API!}`;
@@ -84,11 +85,12 @@ const reshapeProduct = (product: MedusaProduct): Product => {
     altText: product.images?.[0]?.id ?? ''
   };
   const availableForSale = true;
-  const variants = product.variants.map((variant) => reshapeProductVariant(variant));
+  const variants = product.variants.map((variant) =>
+    reshapeProductVariant(variant, product.options)
+  );
 
   let options;
   product.options && (options = product.options.map((option) => reshapeProductOption(option)));
-  // console.log({ options });
 
   return {
     ...product,
@@ -117,14 +119,28 @@ const reshapeProductOption = (productOption: MedusaProductOption): ProductOption
   };
 };
 
-const reshapeProductVariant = (productVariant: MedusaProductVariant): ProductVariant => {
-  console.log({ productVariant });
-  const availableForSale = !!productVariant.inventory_quantity;
-  const selectedOptions =
-    productVariant.options?.map((option) => ({
-      name: option.option?.title ?? '',
+const mapOptionIds = (productOptions: MedusaProductOption[]) => {
+  const map: Record<string, string> = {};
+  productOptions.forEach((option) => {
+    map[option.id] = option.title;
+  });
+  return map;
+};
+
+const reshapeProductVariant = (
+  productVariant: MedusaProductVariant,
+  productOptions?: MedusaProductOption[]
+): ProductVariant => {
+  let selectedOptions: SelectedOption[] = [];
+  if (productOptions && productVariant.options) {
+    const optionIdMap = mapOptionIds(productOptions);
+    selectedOptions = productVariant.options.map((option) => ({
+      name: optionIdMap[option.option_id] ?? '',
       value: option.value
-    })) || [];
+    }));
+  }
+  const availableForSale = !!productVariant.inventory_quantity;
+
   const price = {
     amount: productVariant.prices?.[0]?.amount.toString() ?? '',
     currencyCode: productVariant.prices?.[0]?.currency_code ?? ''
diff --git a/lib/medusa/types.ts b/lib/medusa/types.ts
index 8640d117b..c282a9c31 100644
--- a/lib/medusa/types.ts
+++ b/lib/medusa/types.ts
@@ -159,13 +159,15 @@ export type MedusaProductVariant = {
 
 export type ProductVariant = MedusaProductVariant & {
   availableForSale: boolean;
-  selectedOptions: {
-    name: string;
-    value: string;
-  }[];
+  selectedOptions: SelectedOption[];
   price: Money;
 };
 
+export type SelectedOption = {
+  name: string;
+  value: string;
+};
+
 export type MedusaProductOption = {
   id: string;
   title: string;