Latest Changes - Logger, Size and Colors

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>

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;
-}

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', {

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),
   }))
 

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}
     >