Merge branch 'master' of https://github.com/vercel/commerce into custom-checkout

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'
@@ -122,7 +122,7 @@ const ProductCard: FC<Props> = ({
               <Image
                 alt={product.name || 'Product Image'}
                 className={s.productImage}
-                src={product.images[0].url || placeholderImg}
+                src={product.images[0]?.url || placeholderImg}
                 height={540}
                 width={540}
                 quality="85"

components/product/ProductView/ProductView.tsx

@@ -3,7 +3,7 @@ import Image from 'next/image'
 import { NextSeo } from 'next-seo'
 import s from './ProductView.module.css'
 import { FC, useEffect, useState } from 'react'
-import type { Product } from '@commerce/types'
+import type { Product } from '@commerce/types/product'
 import usePrice from '@framework/product/use-price'
 import { getVariant, SelectedOptions } from '../helpers'
 import { Swatch, ProductSlider } from '@components/product'
@@ -22,6 +22,8 @@ interface Props {
 }
 
 const ProductView: FC<Props> = ({ product, relatedProducts }) => {
+  // TODO: fix this missing argument issue
+  /* @ts-ignore */
   const addItem = useAddItem()
   const { price } = usePrice({
     amount: product.price.value,
@@ -158,8 +160,11 @@ const ProductView: FC<Props> = ({ product, relatedProducts }) => {
               className={s.button}
               onClick={addToCart}
               loading={loading}
+              disabled={variant?.availableForSale === false}
             >
-              Add to Cart
+              {variant?.availableForSale === false
+                ? 'Not Available'
+                : 'Add To Cart'}
             </Button>
           </div>
 

components/product/Swatch/Swatch.tsx

@@ -44,14 +44,15 @@ const Swatch: FC<Omit<ButtonProps, 'variant'> & SwatchProps> = ({
       className={swatchClassName}
       style={color ? { backgroundColor: color } : {}}
       aria-label="Variant Swatch"
+      {...(label && color && { title: label })}
       {...props}
     >
-      {variant === 'color' && active && (
+      {color && active && (
         <span>
           <Check />
         </span>
       )}
-      {variant !== 'color' ? 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) {