From dccc5ef430b4191aee9ce6cd55289e9264b37d64 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 11 Jan 2021 14:13:29 -0300
Subject: [PATCH] slug

---
 .../product/ProductCard/ProductCard.tsx       |  6 ++--
 .../product/ProductView/ProductView.tsx       | 15 ++++++----
 framework/bigcommerce/lib/normalize.ts        | 29 ++++++++++++-------
 framework/types.d.ts                          |  4 +--
 4 files changed, 34 insertions(+), 20 deletions(-)

diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx
index b3c061a5c..658476e7d 100644
--- a/components/product/ProductCard/ProductCard.tsx
+++ b/components/product/ProductCard/ProductCard.tsx
@@ -57,11 +57,11 @@ const ProductCard: FC<Props> = ({
                   {product.price.currencyCode}
                 </span>
               </div>
-              {/* <WishlistButton
+              <WishlistButton
                 className={s.wishlistButton}
                 productId={product.id}
-                variant={product.variant[0]!}
-              /> */}
+                variant={product.variants[0]}
+              />
             </div>
             <div className={s.imageContainer}>
               {product?.images && (
diff --git a/components/product/ProductView/ProductView.tsx b/components/product/ProductView/ProductView.tsx
index b5aafd0b1..4f9844fcc 100644
--- a/components/product/ProductView/ProductView.tsx
+++ b/components/product/ProductView/ProductView.tsx
@@ -25,21 +25,26 @@ interface Props {
 }
 
 const ProductView: FC<Props> = ({ product }) => {
+  console.log(product)
+
   const addItem = useAddItem()
   const { price } = usePrice({
     amount: product.price.value,
     baseAmount: product.price.retailValue,
     currencyCode: product.price.currencyCode!,
   })
+
   const { openSidebar } = useUI()
-  const options = getProductOptions(product)
+
+  // const options = getProductOptions(product)
+
   const [loading, setLoading] = useState(false)
   const [choices, setChoices] = useState<SelectedOptions>({
     size: null,
     color: null,
   })
 
-  const variant = getCurrentVariant(product, choices) || product.variants[0]
+  // const variant = getCurrentVariant(product, choices) || product.variants[0]
 
   const addToCart = async () => {
     setLoading(true)
@@ -106,7 +111,7 @@ const ProductView: FC<Props> = ({ product }) => {
 
         <div className={s.sidebar}>
           <section>
-            {options?.map((opt: any) => (
+            {/* {options?.map((opt: any) => (
               <div className="pb-4" key={opt.displayName}>
                 <h2 className="uppercase font-medium">{opt.displayName}</h2>
                 <div className="flex flex-row py-4">
@@ -133,7 +138,7 @@ const ProductView: FC<Props> = ({ product }) => {
                   })}
                 </div>
               </div>
-            ))}
+            ))} */}
 
             <div className="pb-14 break-words w-full max-w-xl">
               <Text html={product.description} />
@@ -146,7 +151,7 @@ const ProductView: FC<Props> = ({ product }) => {
               className={s.button}
               onClick={addToCart}
               loading={loading}
-              disabled={!variant}
+              // disabled={!variant}
             >
               Add to Cart
             </Button>
diff --git a/framework/bigcommerce/lib/normalize.ts b/framework/bigcommerce/lib/normalize.ts
index 0e3dbc128..73c477d9a 100644
--- a/framework/bigcommerce/lib/normalize.ts
+++ b/framework/bigcommerce/lib/normalize.ts
@@ -13,16 +13,25 @@ export function normalizeProduct(productNode: BCProduct): Product {
 
   return {
     path,
-    slug: path?.slice(1, -1),
-    images: images?.edges?.map(
-      ({ node: { urlOriginal, altText, ...rest } }: any) => ({
-        url: urlOriginal,
-        alt: altText,
-        ...rest,
-      })
-    ),
-    variants: variants?.edges?.map(({ node }: any) => node),
-    productOptions: productOptions?.edges?.map(({ node }: any) => node),
+    slug: path?.replace(/^\/+|\/+$/g, ''),
+    images: images.edges
+      ? images.edges.map(
+          ({ node: { urlOriginal, altText, ...rest } }: any) => ({
+            url: urlOriginal,
+            alt: altText,
+            ...rest,
+          })
+        )
+      : [],
+    variants: variants.edges
+      ? variants.edges.map(({ node: { entityId, ...rest } }: any) => ({
+          id: entityId,
+          ...rest,
+        }))
+      : [],
+    productOptions: productOptions.edges
+      ? productOptions.edges.map(({ node }: any) => node)
+      : [],
     price: {
       value: prices?.price.value,
       currencyCode: prices?.price.currencyCode,
diff --git a/framework/types.d.ts b/framework/types.d.ts
index 1342071dd..b189d26b6 100644
--- a/framework/types.d.ts
+++ b/framework/types.d.ts
@@ -8,8 +8,8 @@ interface Product extends Entity {
   description: string
   slug: string
   path?: string
-  images: ProductImage[] | any[] | undefined
-  variants: ProductVariant[] | any[] | null | undefined
+  images: ProductImage[]
+  variants: ProductVariant[]
   price: ProductPrice
 }
 interface ProductImage {