Merge branch 'master' of github.com:vercel/commerce into outgrow-reaction-commerce-provider

Signed-off-by: Loan Laux <loan@outgrow.io>

components/product/ProductCard/ProductCard.tsx

@@ -1,7 +1,7 @@
 import { FC } from 'react'
 import cn from 'classnames'
 import Link from 'next/link'
-import type { Product } from '@commerce/types'
+import type { Product } from '@commerce/types/product'
 import s from './ProductCard.module.css'
 import Image, { ImageProps } from 'next/image'
 import WishlistButton from '@components/wishlist/WishlistButton'

components/product/ProductView/ProductView.tsx

@@ -5,7 +5,7 @@ import { FC, useEffect, useState } from 'react'
 import s from './ProductView.module.css'
 import { Swatch, ProductSlider } from '@components/product'
 import { Button, Container, Text, useUI } from '@components/ui'
-import type { Product } from '@commerce/types'
+import type { Product } from '@commerce/types/product'
 import usePrice from '@framework/product/use-price'
 import { useAddItem } from '@framework/cart'
 import { getVariant, SelectedOptions } from '../helpers'
@@ -18,6 +18,8 @@ interface Props {
 }
 
 const ProductView: FC<Props> = ({ product }) => {
+  // TODO: fix this missing argument issue
+  /* @ts-ignore */
   const addItem = useAddItem()
   const { price } = usePrice({
     amount: product.price.value,
@@ -132,7 +134,8 @@ const ProductView: FC<Props> = ({ product }) => {
                           setChoices((choices) => {
                             return {
                               ...choices,
-                              [opt.displayName.toLowerCase()]: v.label.toLowerCase(),
+                              [opt.displayName.toLowerCase()]:
+                                v.label.toLowerCase(),
                             }
                           })
                         }}
@@ -154,8 +157,11 @@ const ProductView: FC<Props> = ({ product }) => {
               className={s.button}
               onClick={addToCart}
               loading={loading}
+              disabled={variant?.availableForSale === false}
             >
-              Add to Cart
+              {variant?.availableForSale === false
+                ? 'Not Available'
+                : 'Add To Cart'}
             </Button>
           </div>
         </div>

components/product/Swatch/Swatch.module.css

@@ -1,33 +1,52 @@
-.root {
+.swatch {
+  box-sizing: border-box;
   composes: root from 'components/ui/Button/Button.module.css';
   @apply h-12 w-12 bg-primary text-primary rounded-full mr-3 inline-flex
   items-center justify-center cursor-pointer transition duration-150 ease-in-out
   p-0 shadow-none border-gray-200 border box-border;
+  margin-right: calc(0.75rem - 1px);
+  overflow: hidden;
+}
 
-  & > span {
-    @apply absolute;
-  }
+.swatch::before,
+.swatch::after {
+  box-sizing: border-box;
+}
 
-  &:hover {
-    @apply transform scale-110 bg-hover;
-  }
+.swatch:hover {
+  @apply transform scale-110 bg-hover;
+}
+
+.swatch > span {
+  @apply absolute;
 }
 
 .color {
   @apply text-black transition duration-150 ease-in-out;
+}
 
-  &:hover {
-    @apply text-black;
-  }
+.color :hover {
+  @apply text-black;
+}
 
-  &.dark,
-  &.dark:hover {
-    color: white !important;
-  }
+.color.dark,
+.color.dark:hover {
+  color: white !important;
 }
 
 .active {
-  &.size {
-    @apply border-accents-9 border-2;
-  }
+  @apply border-accents-9 border-2;
+  padding-right: 1px;
+  padding-left: 1px;
+}
+
+.textLabel {
+  @apply w-auto px-4;
+  min-width: 3rem;
+}
+
+.active.textLabel {
+  @apply border-accents-9 border-2;
+  padding-right: calc(1rem - 1px);
+  padding-left: calc(1rem - 1px);
 }

components/product/Swatch/Swatch.tsx

@@ -4,50 +4,55 @@ import s from './Swatch.module.css'
 import { Check } from '@components/icons'
 import Button, { ButtonProps } from '@components/ui/Button'
 import { isDark } from '@lib/colors'
-interface Props {
+interface SwatchProps {
   active?: boolean
   children?: any
   className?: string
-  label?: string
   variant?: 'size' | 'color' | string
   color?: string
+  label?: string | null
 }
 
-const Swatch: FC<Omit<ButtonProps, 'variant'> & Props> = ({
+const Swatch: FC<Omit<ButtonProps, 'variant'> & SwatchProps> = ({
   className,
   color = '',
-  label,
+  label = null,
   variant = 'size',
   active,
   ...props
 }) => {
   variant = variant?.toLowerCase()
-  label = label?.toLowerCase()
 
-  const rootClassName = cn(
-    s.root,
+  if (label) {
+    label = label?.toLowerCase()
+  }
+
+  const swatchClassName = cn(
+    s.swatch,
     {
       [s.active]: active,
       [s.size]: variant === 'size',
       [s.color]: color,
       [s.dark]: color ? isDark(color) : false,
+      [s.textLabel]: !color && label && label.length > 3,
     },
     className
   )
 
   return (
     <Button
-      className={rootClassName}
+      className={swatchClassName}
       style={color ? { backgroundColor: color } : {}}
       aria-label="Variant Swatch"
+      {...(label && color && { title: label })}
       {...props}
     >
-      {variant === 'color' && active && (
+      {color && active && (
         <span>
           <Check />
         </span>
       )}
-      {variant === 'size' ? label : null}
+      {!color ? label : null}
     </Button>
   )
 }

components/product/helpers.ts

@@ -1,4 +1,4 @@
-import type { Product } from '@commerce/types'
+import type { Product } from '@commerce/types/product'
 export type SelectedOptions = Record<string, string | null>
 
 export function getVariant(product: Product, opts: SelectedOptions) {