Fix sold out item

components/product/ProductView/ProductView.tsx

@@ -146,8 +146,12 @@ const ProductView: FC<Props> = ({ product }) => {
               className={s.button}
               onClick={addToCart}
               loading={loading}
+              disabled={variant?.availableForSale === false}
             >
-              Add to Cart
+              {variant?.isInStock === false &&
+              variant?.availableForSale === false
+                ? 'Sold Out'
+                : 'Add To Cart'}
             </Button>
           </div>
         </div>

framework/commerce/types.ts

@@ -190,6 +190,10 @@ interface ProductImage {
 interface ProductVariant2 {
   id: string | number
   options: ProductOption[]
+  // Indicates whether this product variant is in stock.
+  isInStock?: boolean
+  // Indicates if the product variant is available for sale.
+  availableForSale?: boolean
 }
 
 interface ProductPrice {

framework/shopify/customer/use-customer.tsx

@@ -10,11 +10,14 @@ export const handler: SWRHook<Customer | null> = {
     query: getCustomerQuery,
   },
   async fetcher({ options, fetch }) {
-    const data = await fetch<any | null>({
+    const customerAccessToken = getCustomerToken()
-      ...options,
+    if (customerAccessToken) {
-      variables: { customerAccessToken: getCustomerToken() },
+      const data = await fetch<any | null>({
-    })
+        ...options,
-    return data.customer ?? null
+        variables: { customerAccessToken },
+      })
+      return data.customer
+    }
   },
   useHook: ({ useData }) => (input) => {
     return useData({

framework/shopify/utils/checkout-to-cart.ts

@@ -27,22 +27,15 @@ export type CheckoutPayload =
   | CheckoutQuery
 
 const checkoutToCart = (checkoutPayload?: Maybe<CheckoutPayload>): Cart => {
-  if (!checkoutPayload) {
-    throw new CommerceError({
-      message: 'Missing checkout payload from response',
-    })
-  }
-
-  const checkout = checkoutPayload?.checkout
   throwUserErrors(checkoutPayload?.checkoutUserErrors)
 
-  if (!checkout) {
+  if (!checkoutPayload?.checkout) {
     throw new CommerceError({
       message: 'Missing checkout object from response',
     })
   }
 
-  return normalizeCart(checkout)
+  return normalizeCart(checkoutPayload?.checkout)
 }
 
 export default checkoutToCart

framework/shopify/utils/get-search-variables.ts

@@ -10,11 +10,11 @@ export const getSearchVariables = ({
   let query = ''
 
   if (search) {
-    query += `product_type:${search} OR title:${search} OR tag:${search}`
+    query += `product_type:${search} OR title:${search} OR tag:${search} `
   }
 
   if (brandId) {
-    query += `${search ? ' AND ' : ''}vendor:${brandId}`
+    query += `${search ? 'AND ' : ''}vendor:${brandId}`
   }
 
   return {

framework/shopify/utils/normalize.ts

@@ -53,7 +53,17 @@ 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,
+        quantityAvailable,
+      },
     }) => {
       return {
         id,
@@ -61,7 +71,9 @@ const normalizeProductVariants = ({ edges }: ProductVariantConnection) => {
         sku: sku ?? id,
         price: +priceV2.amount,
         listPrice: +compareAtPriceV2?.amount,
-        requiresShipping: true,
+        requiresShipping,
+        availableForSale,
+        isInStock: Number(quantityAvailable) > 0,
         options: selectedOptions.map(({ name, value }: SelectedOption) => {
           const options = normalizeProductOption({
             id,

framework/shopify/utils/queries/get-all-products-query.ts

@@ -7,6 +7,7 @@ edges {
   node {
     id
     title
+    availableForSale
     vendor
     handle
     description

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

@@ -33,6 +33,9 @@ const getProductQuery = /* GraphQL */ `
             id
             title
             sku
+            availableForSale
+            quantityAvailable
+            requiresShipping
             selectedOptions {
               name
               value