From 632d6b5b141cd63386d3a13d5280cc7174f4f2f6 Mon Sep 17 00:00:00 2001
From: dumblole <move2234@gmail.com>
Date: Fri, 5 Oct 2018 18:53:28 -0400
Subject: [PATCH 1/6] Added vailableForSale to graphQL query of the file
 src/components/Store/ProductListings.js

---
 src/components/Store/ProductListings.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Store/ProductListings.js b/src/components/Store/ProductListings.js
index 82f2b3b5..da7006b5 100644
--- a/src/components/Store/ProductListings.js
+++ b/src/components/Store/ProductListings.js
@@ -30,6 +30,7 @@ export default () => (
                 shopifyId
                 title
                 price
+                availableForSale
               }
               images {
                 id

From 1cc90a0d302105c88af1658fba84e8fdc340d96f Mon Sep 17 00:00:00 2001
From: dumblole <move2234@gmail.com>
Date: Fri, 5 Oct 2018 18:54:44 -0400
Subject: [PATCH 2/6] Added disabled={!variant.availableForSale} to option
 element for disabling sizes of products that were disabled

---
 src/components/ProductPreview/AddToCart.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ProductPreview/AddToCart.js b/src/components/ProductPreview/AddToCart.js
index e85e8323..5a6e59b3 100644
--- a/src/components/ProductPreview/AddToCart.js
+++ b/src/components/ProductPreview/AddToCart.js
@@ -120,7 +120,7 @@ export default class AddToCart extends Component {
                     Choose Size
                   </option>
                   {variants.map(variant => (
-                    <option value={variant.shopifyId} key={variant.shopifyId}>
+                    <option disabled={!variant.availableForSale} value={variant.shopifyId} key={variant.shopifyId}>
                       {variant.title}
                     </option>
                   ))}

From 804c4eb6d861c785fea4e45afcc48baaaa99f9e4 Mon Sep 17 00:00:00 2001
From: dumblole <move2234@gmail.com>
Date: Fri, 5 Oct 2018 19:00:39 -0400
Subject: [PATCH 3/6] Added disable for items that don't have other variants.
 ex. Large, XLarge.

---
 src/components/ProductPreview/AddToCart.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ProductPreview/AddToCart.js b/src/components/ProductPreview/AddToCart.js
index 5a6e59b3..f4dfec96 100644
--- a/src/components/ProductPreview/AddToCart.js
+++ b/src/components/ProductPreview/AddToCart.js
@@ -140,7 +140,7 @@ export default class AddToCart extends Component {
               onChange={this.handleChange}
               value={this.state.quantity}
             />
-            <Button type="submit">Add to Cart</Button>
+            <Button type="submit" disabled={(variants.length <= 1 && !variants.availableForSale)}>Add to Cart</Button>
           </Form>
         )}
       </StoreContext.Consumer>

From 84bcce3a3677813cb3ebef2478363fb8603baa6b Mon Sep 17 00:00:00 2001
From: dumblole <move2234@gmail.com>
Date: Fri, 5 Oct 2018 19:25:11 -0400
Subject: [PATCH 4/6] I thought I could just query available for sale but turns
 out it was an object... Makes sense

---
 src/components/ProductPreview/AddToCart.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ProductPreview/AddToCart.js b/src/components/ProductPreview/AddToCart.js
index f4dfec96..85d7dd92 100644
--- a/src/components/ProductPreview/AddToCart.js
+++ b/src/components/ProductPreview/AddToCart.js
@@ -140,7 +140,7 @@ export default class AddToCart extends Component {
               onChange={this.handleChange}
               value={this.state.quantity}
             />
-            <Button type="submit" disabled={(variants.length <= 1 && !variants.availableForSale)}>Add to Cart</Button>
+            <Button type="submit" disabled={((variants.length <= 1) && variants[0].availableForSale)}>Add to Cart</Button>
           </Form>
         )}
       </StoreContext.Consumer>

From 769e3e425b05dfa65fe7f2daff69503d15b1549e Mon Sep 17 00:00:00 2001
From: dumblole <move2234@gmail.com>
Date: Fri, 5 Oct 2018 19:28:41 -0400
Subject: [PATCH 5/6] Forgot that disabled disables when true so I had to add a
 !

---
 src/components/ProductPreview/AddToCart.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ProductPreview/AddToCart.js b/src/components/ProductPreview/AddToCart.js
index 85d7dd92..4ba96aca 100644
--- a/src/components/ProductPreview/AddToCart.js
+++ b/src/components/ProductPreview/AddToCart.js
@@ -140,7 +140,7 @@ export default class AddToCart extends Component {
               onChange={this.handleChange}
               value={this.state.quantity}
             />
-            <Button type="submit" disabled={((variants.length <= 1) && variants[0].availableForSale)}>Add to Cart</Button>
+            <Button type="submit" disabled={((variants.length <= 1) && !variants[0].availableForSale)}>Add to Cart</Button>
           </Form>
         )}
       </StoreContext.Consumer>

From bb7a25e4f20c1630bc1812551f4769f8d750a221 Mon Sep 17 00:00:00 2001
From: Jason Lengstorf <jason@gatsbyjs.com>
Date: Mon, 8 Oct 2018 11:41:02 -0700
Subject: [PATCH 6/6] feat: update button text when out of stock

---
 src/components/ProductPreview/AddToCart.js | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/components/ProductPreview/AddToCart.js b/src/components/ProductPreview/AddToCart.js
index 4ba96aca..358c7cfb 100644
--- a/src/components/ProductPreview/AddToCart.js
+++ b/src/components/ProductPreview/AddToCart.js
@@ -100,13 +100,21 @@ export default class AddToCart extends Component {
 
   render() {
     const { variants } = this.props;
-    const id = this.props.productId.substring(58, 64)
+    const id = this.props.productId.substring(58, 64);
+    const hasVariants = variants.length > 1;
+
+    /*
+     * For products without variants, we disable the whole Add to Cart button
+     * and change the text. This flag prevents us from duplicating the logic in
+     * multiple places.
+     */
+    const isOutOfStock = !hasVariants && !variants[0].availableForSale;
 
     return (
       <StoreContext.Consumer>
         {({ addVariantToCart }) => (
           <Form onSubmit={this.handleSubmit(addVariantToCart)}>
-            {variants.length > 1 && (
+            {hasVariants && (
               <>
                 <HiddenLabel htmlFor={`variant_${id}`}>Choose a size:</HiddenLabel>
                 <Size
@@ -128,7 +136,7 @@ export default class AddToCart extends Component {
                 <HiddenLabel htmlFor="quantity">Quantity:</HiddenLabel>
               </>
             )}
-            {variants.length <= 1 && (
+            {!hasVariants && (
               <VisibleLabel htmlFor={`quantity_${id}`}>Quantity:</VisibleLabel>
             )}
             <Quantity
@@ -140,7 +148,9 @@ export default class AddToCart extends Component {
               onChange={this.handleChange}
               value={this.state.quantity}
             />
-            <Button type="submit" disabled={((variants.length <= 1) && !variants[0].availableForSale)}>Add to Cart</Button>
+            <Button type="submit" disabled={isOutOfStock}>
+              {isOutOfStock ? 'Out of Stock' : 'Add to Cart'}
+            </Button>
           </Form>
         )}
       </StoreContext.Consumer>