Merge branch 'master' into arzafran/ui-tweaks

components/product/ProductCard/ProductCard.tsx

@@ -1,9 +1,10 @@
-import { FC, ReactNode, Component } from 'react'
+import React, { FC, ReactNode, Component } from 'react'
 import cn from 'classnames'
-import Image from 'next/image'
 import Link from 'next/link'
 import type { ProductNode } from '@lib/bigcommerce/api/operations/get-all-products'
-import { Heart } from '@components/icon'
+import usePrice from '@lib/bigcommerce/use-price'
+import { Heart } from '@components/icons'
+import { EnhancedImage } from '@components/core'
 import s from './ProductCard.module.css'
 
 interface Props {
@@ -25,6 +26,11 @@ const ProductCard: FC<Props> = ({
   priority,
 }) => {
   const src = p.images.edges?.[0]?.node.urlOriginal!
+  const { price } = usePrice({
+    amount: p.prices?.price?.value,
+    baseAmount: p.prices?.retailPrice?.value,
+    currencyCode: p.prices?.price?.currencyCode!,
+  })
 
   if (variant === 'slim') {
     return (
@@ -34,8 +40,9 @@ const ProductCard: FC<Props> = ({
             {p.name}
           </span>
         </div>
-        <Image
-          src={src}
+        <EnhancedImage
+          src={p.images.edges?.[0]?.node.urlOriginal!}
+          alt={p.name}
           width={imgWidth}
           height={imgHeight}
           priority={priority}
@@ -56,14 +63,15 @@ const ProductCard: FC<Props> = ({
             <h3 className={s.productTitle}>
               <span>{p.name}</span>
             </h3>
-            <span className={s.productPrice}>${p.prices?.price.value}</span>
+            <span className={s.productPrice}>{price}</span>
           </div>
           <div className={s.wishlistButton}>
             <Heart />
           </div>
         </div>
         <div className={cn(s.imageContainer)}>
-          <Image
+          <EnhancedImage
+            alt={p.name}
             className={cn('w-full object-cover', s['product-image'])}
             src={src}
             width={imgWidth}

components/product/ProductSlider/ProductSlider.tsx

@@ -19,10 +19,15 @@ const ProductSlider: FC = ({ children }) => {
 
   return (
     <div className={s.root}>
-      <button className={cn(s.leftControl, s.control)} onClick={slider?.prev} />
+      <button
+        className={cn(s.leftControl, s.control)}
+        onClick={slider?.prev}
+        aria-label="Previous Product Image"
+      />
       <button
         className={cn(s.rightControl, s.control)}
         onClick={slider?.next}
+        aria-label="Next Product Image"
       />
       <div
         ref={ref}
@@ -50,6 +55,7 @@ const ProductSlider: FC = ({ children }) => {
           {[...Array(slider.details().size).keys()].map((idx) => {
             return (
               <button
+                aria-label="Position indicator"
                 key={idx}
                 className={cn(s.positionIndicator, {
                   [s.positionIndicatorActive]: currentSlide === idx,

components/product/ProductView/ProductView.module.css

@@ -53,10 +53,10 @@
 }
 
 .sidebar {
-  @apply flex flex-col col-span-1 mx-auto max-w-8xl px-6 w-full;
+  @apply flex flex-col col-span-1 mx-auto max-w-8xl px-6 w-full h-full;
 
   @screen lg {
-    @apply col-span-6 pt-20;
+    @apply col-span-6 py-24 justify-between;
   }
 }
 

components/product/ProductView/ProductView.tsx

@@ -4,10 +4,11 @@ import Image from 'next/image'
 import { NextSeo } from 'next-seo'
 
 import s from './ProductView.module.css'
-import { Heart } from '@components/icon'
+import { Heart } from '@components/icons'
 import { useUI } from '@components/ui/context'
-import { Button, Container } from '@components/ui'
 import { Swatch, ProductSlider } from '@components/product'
+import { Button, Container } from '@components/ui'
+import { HTMLContent } from '@components/core'
 
 import useAddItem from '@lib/bigcommerce/cart/use-add-item'
 import type { ProductNode } from '@lib/bigcommerce/api/operations/get-product'
@@ -77,10 +78,11 @@ const ProductView: FC<Props> = ({ product, className }) => {
           <div className={s.sliderContainer}>
             <ProductSlider>
               {product.images.edges?.map((image, i) => (
-                <div key={image?.node.urlXL} className={s.imageContainer}>
+                <div key={image?.node.urlOriginal} className={s.imageContainer}>
                   <Image
+                    alt={product.name}
                     className={s.img}
-                    src={image?.node.urlXL!}
+                    src={image?.node.urlOriginal!}
                     width={1050}
                     height={1050}
                     priority={i === 0}
@@ -110,7 +112,6 @@ const ProductView: FC<Props> = ({ product, className }) => {
                         label={v.label}
                         onClick={() => {
                           setChoices((choices) => {
-                            console.log(choices)
                             return {
                               ...choices,
                               [opt.displayName]: v.label,
@@ -123,21 +124,22 @@ const ProductView: FC<Props> = ({ product, className }) => {
                 </div>
               </div>
             ))}
-            <div className="pb-12">
-              <div
-                className="pb-14 break-words w-full"
-                dangerouslySetInnerHTML={{ __html: product.description }}
-              />
-              <Button
-                type="button"
-                className={s.button}
-                onClick={addToCart}
-                loading={loading}
-              >
-                Add to Cart
-              </Button>
+
+            <div className="pb-14 break-words w-full max-w-xl">
+              <HTMLContent html={product.description} />
             </div>
           </section>
+          <div>
+            <Button
+              aria-label="Add to Cart"
+              type="button"
+              className={s.button}
+              onClick={addToCart}
+              loading={loading}
+            >
+              Add to Cart
+            </Button>
+          </div>
         </div>
 
         {/* TODO make it work */}

components/product/Swatch/Swatch.tsx

@@ -1,7 +1,7 @@
 import cn from 'classnames'
 import { FC } from 'react'
 import s from './Swatch.module.css'
-import { Check } from '@components/icon'
+import { Check } from '@components/icons'
 import Button, { ButtonProps } from '@components/ui/Button'
 import { isDark } from '@lib/colors'
 interface Props {
@@ -39,6 +39,7 @@ const Swatch: FC<Props & ButtonProps> = ({
     <Button
       className={rootClassName}
       style={color ? { backgroundColor: color } : {}}
+      aria-label="Variant Swatch"
       {...props}
     >
       {variant === 'color' && active && (

components/product/helpers.ts

@@ -1,7 +1,6 @@
 import type { ProductNode } from '@lib/bigcommerce/api/operations/get-product'
 
 export function getProductOptions(product: ProductNode) {
-  // console.log(product)
   const options = product.productOptions.edges?.map(({ node }: any) => ({
     displayName: node.displayName.toLowerCase(),
     values: node.values.edges?.map(({ node }: any) => node),

components/product/types.ts

@@ -1 +0,0 @@
-import { Colors } from '@components/ui/types'