From a42c67a898ccc07117827fab8bbc67592ea24735 Mon Sep 17 00:00:00 2001 From: Belen Curcio 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 = ({ product, className }) => { const options = getProductOptions(product) console.log(options) @@ -39,7 +36,6 @@ const ProductView: FC = ({ product, className }) => { const addToCart = async () => { setLoading(true) - try { await addItem({ productId: product.entityId, @@ -48,7 +44,6 @@ const ProductView: FC = ({ product, className }) => { openSidebar() setLoading(false) } catch (err) { - // Error err. setLoading(false) } } @@ -86,9 +81,11 @@ const ProductView: FC = ({ product, className }) => { {product.prices?.price.currencyCode} +
+ {/** TODO: Change with Image Component */} {product.images.edges?.map((image, i) => ( = ({ product, className }) => { ))}
-
-
- {options?.map((opt) => ( + {options?.map((opt: any) => (

{opt.displayName}

@@ -115,14 +110,15 @@ const ProductView: FC = ({ product, className }) => { return ( setChoices((choices) => { return { ...choices, - [opt.displayName.toLowerCase()]: v.label, + [opt.displayName]: v.label, } }) } @@ -130,24 +126,22 @@ const ProductView: FC = ({ product, className }) => { ) })}
+
+
+ +
))} -
-
-
-
- -
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 = ({ +const Swatch: FC = ({ className, + color, label, variant = 'size', active, @@ -22,22 +24,21 @@ const Swatch: FC = ({ }) => { 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 ( -