From a42c67a898ccc07117827fab8bbc67592ea24735 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Sat, 17 Oct 2020 09:07:02 -0300
Subject: [PATCH] Latest Changes - Logger, Size and Colors

---
 .../product/ProductView/ProductView.tsx       | 46 +++++------
 components/product/Swatch/Swatch.module.css   | 18 +----
 components/product/Swatch/Swatch.tsx          | 21 ++---
 components/product/helpers.ts                 |  5 +-
 components/ui/Button/Button.tsx               |  2 +
 lib/bigcommerce/api/fragments/product.ts      | 31 ++++---
 .../api/utils/fetch-graphql-api.ts            |  2 +
 lib/logger.ts                                 |  5 ++
 package.json                                  |  2 +
 pages/ui.tsx                                  |  5 +-
 yarn.lock                                     | 80 ++++++++++++++++++-
 11 files changed, 147 insertions(+), 70 deletions(-)
 create mode 100644 lib/logger.ts

diff --git a/components/product/ProductView/ProductView.tsx b/components/product/ProductView/ProductView.tsx
index c4c8fccbb..887f606c7 100644
--- a/components/product/ProductView/ProductView.tsx
+++ b/components/product/ProductView/ProductView.tsx
@@ -20,9 +20,6 @@ interface Choices {
   color?: string | null
 }
 
-const COLORS: Colors[] = ['pink', 'black', 'white']
-const SIZES = ['s', 'm', 'l', 'xl', 'xxl']
-
 const ProductView: FC<Props> = ({ product, className }) => {
   const options = getProductOptions(product)
   console.log(options)
@@ -39,7 +36,6 @@ const ProductView: FC<Props> = ({ product, className }) => {
 
   const addToCart = async () => {
     setLoading(true)
-
     try {
       await addItem({
         productId: product.entityId,
@@ -48,7 +44,6 @@ const ProductView: FC<Props> = ({ product, className }) => {
       openSidebar()
       setLoading(false)
     } catch (err) {
-      // Error err.
       setLoading(false)
     }
   }
@@ -86,9 +81,11 @@ const ProductView: FC<Props> = ({ product, className }) => {
             {product.prices?.price.currencyCode}
           </div>
         </div>
+
         <div className="flex-1 px-24 pb-0 relative fit  box-border">
           <div className="absolute z-10 inset-0 flex items-center justify-center">
             <ProductSlider>
+              {/** TODO: Change with Image Component */}
               {product.images.edges?.map((image, i) => (
                 <img
                   className="w-full object-cover"
@@ -98,16 +95,14 @@ const ProductView: FC<Props> = ({ product, className }) => {
               ))}
             </ProductSlider>
           </div>
-
           <div className="absolute z-10 bottom-10 left-1/2 transform -translate-x-1/2 inline-block">
             <img src="/slider-arrows.png" />
           </div>
-
           <div className={s.squareBg}></div>
         </div>
 
         <div className="flex-1 flex flex-col pt-24">
-          {options?.map((opt) => (
+          {options?.map((opt: any) => (
             <section className="pb-4">
               <h2 className="uppercase font-medium">{opt.displayName}</h2>
               <div className="flex flex-row py-4">
@@ -115,14 +110,15 @@ const ProductView: FC<Props> = ({ product, className }) => {
                   return (
                     <Swatch
                       key={v.entityId}
-                      label={v.label}
                       active={v.label === activeColor}
                       variant={opt.displayName}
+                      color={v.hexColors ? v.hexColors[0] : ''}
+                      label={v.label}
                       onClick={() =>
                         setChoices((choices) => {
                           return {
                             ...choices,
-                            [opt.displayName.toLowerCase()]: v.label,
+                            [opt.displayName]: v.label,
                           }
                         })
                       }
@@ -130,24 +126,22 @@ const ProductView: FC<Props> = ({ product, className }) => {
                   )
                 })}
               </div>
+              <div className="pb-12">
+                <div
+                  className="break-words"
+                  dangerouslySetInnerHTML={{ __html: product.description }}
+                />
+                <Button
+                  type="button"
+                  className={s.button}
+                  onClick={addToCart}
+                  loading={loading}
+                >
+                  Add to Cart
+                </Button>
+              </div>
             </section>
           ))}
-          <section className="pb-12">
-            <div
-              className="break-words"
-              dangerouslySetInnerHTML={{ __html: product.description }}
-            />
-          </section>
-          <section className="">
-            <Button
-              type="button"
-              className={s.button}
-              onClick={addToCart}
-              loading={loading}
-            >
-              Add to Cart
-            </Button>
-          </section>
         </div>
       </div>
     </Container>
diff --git a/components/product/Swatch/Swatch.module.css b/components/product/Swatch/Swatch.module.css
index 5542aa125..6062e34f8 100644
--- a/components/product/Swatch/Swatch.module.css
+++ b/components/product/Swatch/Swatch.module.css
@@ -1,5 +1,5 @@
 .root {
-  @apply h-12 w-12 bg-primary text-base rounded-full mr-3 inline-flex
+  @apply h-12 w-12 bg-primary text-primary rounded-full mr-3 inline-flex
   items-center justify-center cursor-pointer transition duration-75 ease-in-out
   p-0 shadow-none border-gray-200 border box-border;
 }
@@ -11,19 +11,3 @@
 .root:hover {
   @apply transform scale-110 bg-hover;
 }
-
-.colorViolet {
-  @apply bg-violet !important;
-}
-
-.colorPink {
-  @apply bg-pink !important;
-}
-
-.colorBlack {
-  @apply bg-black !important;
-}
-
-.colorWhite {
-  @apply bg-white text-black !important;
-}
diff --git a/components/product/Swatch/Swatch.tsx b/components/product/Swatch/Swatch.tsx
index ef1bc223b..7b9919005 100644
--- a/components/product/Swatch/Swatch.tsx
+++ b/components/product/Swatch/Swatch.tsx
@@ -5,16 +5,18 @@ import { Colors } from '@components/ui/types'
 import { Check } from '@components/icon'
 import Button, { ButtonProps } from '@components/ui/Button'
 
-interface Props extends ButtonProps {
-  className?: string
-  children?: any
+interface Props {
   active?: boolean
+  children?: any
+  className?: string
   label?: string
   variant?: 'size' | 'color' | string
+  color?: string
 }
 
-const Swatch: FC<Props> = ({
+const Swatch: FC<Props & ButtonProps> = ({
   className,
+  color,
   label,
   variant = 'size',
   active,
@@ -22,22 +24,21 @@ const Swatch: FC<Props> = ({
 }) => {
   variant = variant?.toLowerCase()
   label = label?.toLowerCase()
-
+  console.log(variant)
   const rootClassName = cn(
     s.root,
     {
       [s.active]: active,
       [s.size]: variant === 'size',
-      [s.colorPink]: label === 'pink',
-      [s.colorWhite]: label === 'white',
-      [s.colorBlack]: label === 'black',
-      [s.colorViolet]: label === 'violet',
     },
     className
   )
 
   return (
-    <Button className={rootClassName}>
+    <Button
+      className={rootClassName}
+      style={color ? { backgroundColor: color } : {}}
+    >
       {variant === 'color' && active && (
         <span
           className={cn('absolute', {
diff --git a/components/product/helpers.ts b/components/product/helpers.ts
index a67266b07..414aa6019 100644
--- a/components/product/helpers.ts
+++ b/components/product/helpers.ts
@@ -1,8 +1,9 @@
 import type { Product } from '@lib/bigcommerce/api/operations/get-product'
 
 export function getProductOptions(product: Product) {
-  const options = product.options.edges?.map(({ node }: any) => ({
-    displayName: node.displayName,
+  console.log(product)
+  const options = product.productOptions.edges?.map(({ node }: any) => ({
+    displayName: node.displayName.toLowerCase(),
     values: node.values.edges?.map(({ node }: any) => node),
   }))
 
diff --git a/components/ui/Button/Button.tsx b/components/ui/Button/Button.tsx
index 92fe93eb3..9d4213612 100644
--- a/components/ui/Button/Button.tsx
+++ b/components/ui/Button/Button.tsx
@@ -32,6 +32,7 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
     width,
     Component = 'button',
     loading = false,
+    style = {},
     ...rest
   } = props
   const ref = useRef<typeof Component>(null)
@@ -63,6 +64,7 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
       {...buttonProps}
       style={{
         width,
+        ...style,
       }}
       data-active={isPressed ? '' : undefined}
     >
diff --git a/lib/bigcommerce/api/fragments/product.ts b/lib/bigcommerce/api/fragments/product.ts
index 48859c9c4..d047e147a 100644
--- a/lib/bigcommerce/api/fragments/product.ts
+++ b/lib/bigcommerce/api/fragments/product.ts
@@ -9,6 +9,24 @@ export const responsiveImageFragment = /* GraphQL */ `
     isDefault
   }
 `
+export const multipleChoiceFragment = /* GraphQL */ `
+  fragment swatchOption on SwatchOptionValue {
+    isDefault
+    hexColors
+  }
+
+  fragment multipleChoiceOption on MultipleChoiceOption {
+    entityId
+    values {
+      edges {
+        node {
+          label
+          ...swatchOption
+        }
+      }
+    }
+  }
+`
 
 export const productInfoFragment = /* GraphQL */ `
   fragment productInfo on Product {
@@ -46,24 +64,17 @@ export const productInfoFragment = /* GraphQL */ `
         }
       }
     }
-    options {
+    productOptions {
       edges {
         node {
           entityId
           displayName
-          isRequired
-          values {
-            edges {
-              node {
-                entityId
-                label
-              }
-            }
-          }
+          ...multipleChoiceOption
         }
       }
     }
   }
 
   ${responsiveImageFragment}
+  ${multipleChoiceFragment}
 `
diff --git a/lib/bigcommerce/api/utils/fetch-graphql-api.ts b/lib/bigcommerce/api/utils/fetch-graphql-api.ts
index 506e27d4c..26246249c 100644
--- a/lib/bigcommerce/api/utils/fetch-graphql-api.ts
+++ b/lib/bigcommerce/api/utils/fetch-graphql-api.ts
@@ -1,10 +1,12 @@
 import { CommerceAPIFetchOptions } from 'lib/commerce/api'
 import { getConfig } from '..'
+import log from '@lib/logger'
 
 export default async function fetchGraphqlApi<Q, V = any>(
   query: string,
   { variables, preview }: CommerceAPIFetchOptions<V> = {}
 ): Promise<Q> {
+  log.warn(query)
   const config = getConfig()
   const res = await fetch(config.commerceUrl + (preview ? '/preview' : ''), {
     method: 'POST',
diff --git a/lib/logger.ts b/lib/logger.ts
new file mode 100644
index 000000000..0871a3177
--- /dev/null
+++ b/lib/logger.ts
@@ -0,0 +1,5 @@
+import bunyan from 'bunyan'
+
+const log = bunyan.createLogger({ name: 'Next.js - Commerce' })
+
+export default log
diff --git a/package.json b/package.json
index 9065b6c22..ca288630a 100644
--- a/package.json
+++ b/package.json
@@ -21,9 +21,11 @@
   "dependencies": {
     "@headlessui/react": "^0.2.0",
     "@tailwindcss/ui": "^0.6.2",
+    "@types/bunyan": "^1.8.6",
     "@types/classnames": "^2.2.10",
     "@types/react-swipeable-views": "^0.13.0",
     "animate.css": "^4.1.1",
+    "bunyan": "^1.8.14",
     "classnames": "^2.2.6",
     "cookie": "^0.4.1",
     "js-cookie": "^2.2.1",
diff --git a/pages/ui.tsx b/pages/ui.tsx
index 3dc92f4dc..8e0ee3642 100644
--- a/pages/ui.tsx
+++ b/pages/ui.tsx
@@ -1,8 +1,5 @@
-import { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
-import { useRouter } from 'next/router'
-import Link from 'next/link'
 import { Layout } from '@components/core'
-import { Container, Grid, Skeleton } from '@components/ui'
+import { Container, Skeleton } from '@components/ui'
 export default function Search() {
   return (
     <Container>
diff --git a/yarn.lock b/yarn.lock
index ab7db8d46..c749e9a09 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2095,6 +2095,13 @@
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82"
   integrity sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==
 
+"@types/bunyan@^1.8.6":
+  version "1.8.6"
+  resolved "https://registry.yarnpkg.com/@types/bunyan/-/bunyan-1.8.6.tgz#6527641cca30bedec5feb9ab527b7803b8000582"
+  integrity sha512-YiozPOOsS6bIuz31ilYqR5SlLif4TBWsousN2aCWLi5233nZSX19tFbcQUPdR7xJ8ypPyxkCGNxg0CIV5n9qxQ==
+  dependencies:
+    "@types/node" "*"
+
 "@types/classnames@^2.2.10":
   version "2.2.10"
   resolved "https://registry.yarnpkg.com/@types/classnames/-/classnames-2.2.10.tgz#cc658ca319b6355399efc1f5b9e818f1a24bf999"
@@ -2970,6 +2977,16 @@ bufferutil@^4.0.1:
   dependencies:
     node-gyp-build "~3.7.0"
 
+bunyan@^1.8.14:
+  version "1.8.14"
+  resolved "https://registry.yarnpkg.com/bunyan/-/bunyan-1.8.14.tgz#3d8c1afea7de158a5238c7cb8a66ab6b38dd45b4"
+  integrity sha512-LlahJUxXzZLuw/hetUQJmRgZ1LF6+cr5TPpRj6jf327AsiIq2jhYEH4oqUUkVKTor+9w2BT3oxVwhzE5lw9tcg==
+  optionalDependencies:
+    dtrace-provider "~0.8"
+    moment "^2.19.3"
+    mv "~2"
+    safe-json-stringify "~1"
+
 bytes@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.0.tgz#f6cf7933a360e0588fa9fde85651cdc7f805d1f6"
@@ -3857,6 +3874,13 @@ dotenv@^8.2.0:
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.2.0.tgz#97e619259ada750eea3e4ea3e26bceea5424b16a"
   integrity sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw==
 
+dtrace-provider@~0.8:
+  version "0.8.8"
+  resolved "https://registry.yarnpkg.com/dtrace-provider/-/dtrace-provider-0.8.8.tgz#2996d5490c37e1347be263b423ed7b297fb0d97e"
+  integrity sha512-b7Z7cNtHPhH9EJhNNbbeqTcXB8LGFFZhq1PGgEvpeHlzd36bhbdTWoE/Ba/YguqpBSlAPKnARWhVlhunCMwfxg==
+  dependencies:
+    nan "^2.14.0"
+
 duplexer3@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/duplexer3/-/duplexer3-0.1.4.tgz#ee01dd1cac0ed3cbc7fdbea37dc0a8f1ce002ce2"
@@ -4426,6 +4450,17 @@ glob-to-regexp@^0.4.1:
   resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e"
   integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==
 
+glob@^6.0.1:
+  version "6.0.4"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-6.0.4.tgz#0f08860f6a155127b2fadd4f9ce24b1aab6e4d22"
+  integrity sha1-DwiGD2oVUSey+t1PnOJLGqtuTSI=
+  dependencies:
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "2 || 3"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
 glob@^7.0.0, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6:
   version "7.1.6"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
@@ -5675,7 +5710,7 @@ minimalistic-crypto-utils@^1.0.0, minimalistic-crypto-utils@^1.0.1:
   resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a"
   integrity sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo=
 
-minimatch@3.0.4, minimatch@^3.0.4:
+"minimatch@2 || 3", minimatch@3.0.4, minimatch@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
   integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
@@ -5752,6 +5787,18 @@ mkdirp@^1.0.3, mkdirp@^1.0.4:
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
   integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
 
+mkdirp@~0.5.1:
+  version "0.5.5"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def"
+  integrity sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==
+  dependencies:
+    minimist "^1.2.5"
+
+moment@^2.19.3:
+  version "2.29.1"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
+  integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
+
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
@@ -5767,11 +5814,25 @@ mute-stream@0.0.8:
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d"
   integrity sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==
 
+mv@~2:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/mv/-/mv-2.1.1.tgz#ae6ce0d6f6d5e0a4f7d893798d03c1ea9559b6a2"
+  integrity sha1-rmzg1vbV4KT32JN5jQPB6pVZtqI=
+  dependencies:
+    mkdirp "~0.5.1"
+    ncp "~2.0.0"
+    rimraf "~2.4.0"
+
 nan@^2.12.1:
   version "2.14.1"
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.1.tgz#d7be34dfa3105b91494c3147089315eff8874b01"
   integrity sha512-isWHgVjnFjh2x2yuJ/tj3JbwoHu3UC2dX5G/88Cm24yB6YopVgxvBObDY7n5xW6ExmFhJpSEQqFPvq9zaXc8Jw==
 
+nan@^2.14.0:
+  version "2.14.2"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.2.tgz#f5376400695168f4cc694ac9393d0c9585eeea19"
+  integrity sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==
+
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@@ -5796,6 +5857,11 @@ native-url@0.3.4:
   dependencies:
     querystring "^0.2.0"
 
+ncp@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ncp/-/ncp-2.0.0.tgz#195a21d6c46e361d2fb1281ba38b91e9df7bdbb3"
+  integrity sha1-GVoh1sRuNh0vsSgbo4uR6d9727M=
+
 neo-async@2.6.1:
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.1.tgz#ac27ada66167fa8849a6addd837f6b189ad2081c"
@@ -7313,6 +7379,13 @@ rimraf@^3.0.2:
   dependencies:
     glob "^7.1.3"
 
+rimraf@~2.4.0:
+  version "2.4.5"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.4.5.tgz#ee710ce5d93a8fdb856fb5ea8ff0e2d75934b2da"
+  integrity sha1-7nEM5dk6j9uFb7Xqj/Di11k0sto=
+  dependencies:
+    glob "^6.0.1"
+
 ripemd160@^2.0.0, ripemd160@^2.0.1:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-2.0.2.tgz#a1c1a6f624751577ba5d07914cbc92850585890c"
@@ -7348,6 +7421,11 @@ safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
   integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
 
+safe-json-stringify@~1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/safe-json-stringify/-/safe-json-stringify-1.2.0.tgz#356e44bc98f1f93ce45df14bcd7c01cda86e0afd"
+  integrity sha512-gH8eh2nZudPQO6TytOvbxnuhYBOvDBBLW52tz5q6X58lJcd/tkmqFR+5Z9adS8aJtURSXWThWy/xJtJwixErvg==
+
 safe-regex@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/safe-regex/-/safe-regex-1.1.0.tgz#40a3669f3b077d1e943d44629e157dd48023bf2e"