Updates

components/product/ProductView/ProductView.tsx

@@ -148,8 +148,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,6 +1,6 @@
 .root {
   composes: root from 'components/ui/Button/Button.module.css';
-  @apply h-12 py-0 px-3 bg-primary text-primary rounded-full mr-3 inline-flex
+  @apply h-12 p-0 bg-primary text-primary rounded-full mr-3 inline-flex
   items-center justify-center cursor-pointer transition duration-150 ease-in-out
    shadow-none border-gray-200 border box-border;
 
@@ -15,6 +15,10 @@
   }
 }
 
+.size {
+  @apply px-3 leading-none;
+}
+
 .color {
   @apply text-black transition duration-150 ease-in-out;
 

components/product/Swatch/Swatch.tsx

@@ -21,14 +21,14 @@ const Swatch: FC<Omit<ButtonProps, 'variant'> & Props> = ({
   active,
   ...props
 }) => {
-  variant = variant?.toLowerCase()
   label = label?.toLowerCase()
+  const isColor = color !== ''
 
   const rootClassName = cn(
     s.root,
     {
       [s.active]: active,
-      [s.size]: variant !== 'color',
+      [s.size]: !isColor,
       [s.color]: color,
       [s.dark]: color ? isDark(color) : false,
     },
@@ -38,17 +38,18 @@ const Swatch: FC<Omit<ButtonProps, 'variant'> & Props> = ({
   return (
     <Button
       className={rootClassName}
-      style={color ? { backgroundColor: color } : {}}
+      style={isColor ? { backgroundColor: color } : {}}
       aria-label="Variant Swatch"
-      {...(variant === 'color' && { title: label })}
+      {...(isColor && { title: label })}
       {...props}
     >
-      {variant === 'color' && active && (
+      {isColor ? (
         <span>
           <Check />
         </span>
+      ) : (
+        label
       )}
-      {variant !== 'color' ? label : null}
     </Button>
   )
 }

framework/commerce/types/product.ts

@@ -28,6 +28,7 @@ export type ProductOptionValues = {
 export type ProductVariant = {
   id: string | number
   options: ProductOption[]
+  availableForSale?: boolean
 }
 
 export type Product = {

framework/shopify/utils/normalize.ts

@@ -37,9 +37,12 @@ const normalizeProductOption = ({
         label: value,
       }
       if (displayName.match(/colou?r/gi)) {
+        const mapedColor = colorMap[value]
+        if (mapedColor) {
           output = {
             ...output,
-          hexColors: [colorMap[value] || value],
+            hexColors: [mapedColor],
+          }
         }
       }
       return output
@@ -56,7 +59,16 @@ const normalizeProductImages = ({ edges }: ImageConnection) =>
 const normalizeProductVariants = ({ edges }: ProductVariantConnection) => {
   return edges?.map(
     ({
-      node: { id, selectedOptions, sku, title, priceV2, compareAtPriceV2 },
+      node: {
+        id,
+        selectedOptions,
+        sku,
+        title,
+        priceV2,
+        compareAtPriceV2,
+        requiresShipping,
+        availableForSale,
+      },
     }) => {
       return {
         id,
@@ -64,7 +76,8 @@ const normalizeProductVariants = ({ edges }: ProductVariantConnection) => {
         sku: sku ?? id,
         price: +priceV2.amount,
         listPrice: +compareAtPriceV2?.amount,
-        requiresShipping: true,
+        requiresShipping,
+        availableForSale,
         options: selectedOptions.map(({ name, value }: SelectedOption) => {
           const options = normalizeProductOption({
             id,

framework/shopify/utils/queries/get-product-query.ts

@@ -3,6 +3,7 @@ const getProductQuery = /* GraphQL */ `
     productByHandle(handle: $slug) {
       id
       handle
+      availableForSale
       title
       productType
       vendor
@@ -33,6 +34,8 @@ const getProductQuery = /* GraphQL */ `
             id
             title
             sku
+            availableForSale
+            requiresShipping
             selectedOptions {
               name
               value