From 831ffa52bd47d8e7d81ceec84b02dbe74212b2ba Mon Sep 17 00:00:00 2001
From: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com>
Date: Tue, 19 Jan 2021 15:04:25 +0200
Subject: [PATCH] fix(storefront): BCTHEME-384 When default option is out of
 stock add to cart button does not populate for in stock options (#1955)

---
 CHANGELOG.md                                  |  1 +
 .../js/theme/common/product-details-base.js   |  6 ++
 .../amp/products/product-options.html         |  4 +-
 .../components/products/add-to-cart.html      | 84 ++++++++++---------
 .../components/products/product-view.html     |  4 +-
 5 files changed, 55 insertions(+), 44 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 163c68c7dd..7e10315255 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- Fixed case when default option is out of stock add to cart button does not populate for in stock options. [#1955](https://github.com/bigcommerce/cornerstone/pull/1955)
 - Dots on carousel should have similar colours as other slider controls. [#1958](https://github.com/bigcommerce/cornerstone/pull/1958)
 - PDP - Fixed Empty "Description" Hiding All Tabs When in Tab View. [#1947](https://github.com/bigcommerce/cornerstone/pull/1947)
 - Added custom event for product price change on PDP page. [#1948](https://github.com/bigcommerce/cornerstone/pull/1948)
diff --git a/assets/js/theme/common/product-details-base.js b/assets/js/theme/common/product-details-base.js
index 82659d2046..71982946e7 100644
--- a/assets/js/theme/common/product-details-base.js
+++ b/assets/js/theme/common/product-details-base.js
@@ -264,6 +264,12 @@ export default class ProductDetailsBase {
         } else if (typeof (data.bulk_discount_rates) !== 'undefined') {
             viewModel.$bulkPricing.html('');
         }
+
+        const addToCartWrapper = $('#add-to-cart-wrapper');
+
+        if (addToCartWrapper.is(':hidden') && data.purchasable) {
+            addToCartWrapper.show();
+        }
     }
 
     /**
diff --git a/templates/components/amp/products/product-options.html b/templates/components/amp/products/product-options.html
index 372911a367..13c41a7300 100644
--- a/templates/components/amp/products/product-options.html
+++ b/templates/components/amp/products/product-options.html
@@ -8,9 +8,7 @@
                     {{{dynamicComponent 'components/products/options'}}}
                 {{/each}}
             </div>
-            {{#if product.can_purchase}}
-                {{> components/products/add-to-cart}}
-            {{/if}}
+            {{> components/products/add-to-cart}}
             <div class="loadingOverlay"></div>
         </form>
     </div>
diff --git a/templates/components/products/add-to-cart.html b/templates/components/products/add-to-cart.html
index 9ff3ade1d3..acc0ef2118 100644
--- a/templates/components/products/add-to-cart.html
+++ b/templates/components/products/add-to-cart.html
@@ -1,43 +1,51 @@
-{{#if theme_settings.show_product_quantity_box}}
-    <div class="form-field form-field--increments">
-        <label class="form-label form-label--alternate"
-               for="qty[]">{{lang 'products.quantity'}}</label>
-            <div class="form-increment" data-quantity-change>
-                <button class="button button--icon" data-action="dec">
-                    <span class="is-srOnly">{{lang 'products.quantity_decrease'}}</span>
-                    <i class="icon" aria-hidden="true">
-                        <svg>
-                            <use xlink:href="#icon-keyboard-arrow-down"/>
-                        </svg>
-                    </i>
-                </button>
-                <input class="form-input form-input--incrementTotal"
-                       id="qty[]"
-                       name="qty[]"
-                       type="tel"
-                       value="{{#if product.min_purchase_quantity}}{{product.min_purchase_quantity}}{{else}}1{{/if}}"
-                       data-quantity-min="{{product.min_purchase_quantity}}"
-                       data-quantity-max="{{product.max_purchase_quantity}}"
-                       min="1"
-                       pattern="[0-9]*"
-                       aria-live="polite">
-                <button class="button button--icon" data-action="inc">
-                    <span class="is-srOnly">{{lang 'products.quantity_increase'}}</span>
-                    <i class="icon" aria-hidden="true">
-                        <svg>
-                            <use xlink:href="#icon-keyboard-arrow-up"/>
-                        </svg>
-                    </i>
-                </button>
-            </div>
-    </div>
-{{/if}}
+<div id="add-to-cart-wrapper" {{#unless product.can_purchase}}style="display: none"{{/unless}}>
+    {{#if theme_settings.show_product_quantity_box}}
+        <div class="form-field form-field--increments">
+            <label class="form-label form-label--alternate"
+                   for="qty[]">{{lang 'products.quantity'}}</label>
+                <div class="form-increment" data-quantity-change>
+                    <button class="button button--icon" data-action="dec">
+                        <span class="is-srOnly">{{lang 'products.quantity_decrease'}}</span>
+                        <i class="icon" aria-hidden="true">
+                            <svg>
+                                <use xlink:href="#icon-keyboard-arrow-down"/>
+                            </svg>
+                        </i>
+                    </button>
+                    <input class="form-input form-input--incrementTotal"
+                           id="qty[]"
+                           name="qty[]"
+                           type="tel"
+                           value="{{#if product.min_purchase_quantity}}{{product.min_purchase_quantity}}{{else}}1{{/if}}"
+                           data-quantity-min="{{product.min_purchase_quantity}}"
+                           data-quantity-max="{{product.max_purchase_quantity}}"
+                           min="1"
+                           pattern="[0-9]*"
+                           aria-live="polite">
+                    <button class="button button--icon" data-action="inc">
+                        <span class="is-srOnly">{{lang 'products.quantity_increase'}}</span>
+                        <i class="icon" aria-hidden="true">
+                            <svg>
+                                <use xlink:href="#icon-keyboard-arrow-up"/>
+                            </svg>
+                        </i>
+                    </button>
+                </div>
+        </div>
+    {{/if}}
 
-<div class="alertBox productAttributes-message" style="display:none">
-    <div class="alertBox-column alertBox-icon">
-        <icon glyph="ic-success" class="icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path></svg></icon>
+    <div class="alertBox productAttributes-message" style="display:none">
+        <div class="alertBox-column alertBox-icon">
+            <icon glyph="ic-success" class="icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path></svg></icon>
+        </div>
+        <p class="alertBox-column alertBox-message"></p>
     </div>
-    <p class="alertBox-column alertBox-message"></p>
+    {{#or customer (if theme_settings.restrict_to_login '!==' true)}}
+        <div class="form-action" role="status" aria-live="polite">
+            <input id="form-action-addToCart" data-wait-message="{{lang 'products.adding_to_cart'}}" class="button button--primary" type="submit"
+                value="{{#if product.pre_order}}{{lang 'products.pre_order'}}{{else}}{{lang 'products.add_to_cart'}}{{/if}}">
+        </div>
+    {{/or}}
 </div>
 {{#or customer (if theme_settings.restrict_to_login '!==' true)}}
     <div class="form-action">
diff --git a/templates/components/products/product-view.html b/templates/components/products/product-view.html
index a3c9b2c951..cfe9ba6118 100644
--- a/templates/components/products/product-view.html
+++ b/templates/components/products/product-view.html
@@ -230,9 +230,7 @@ <h2 class="productView-brand"{{#if schema}} itemprop="brand" itemscope itemtype=
                         <span data-product-stock>{{product.stock_level}}</span>
                     </label>
                 </div>
-                {{#if product.can_purchase}}
-                    {{> components/products/add-to-cart}}
-                {{/if}}
+                {{> components/products/add-to-cart}}
                 {{#if product.out_of_stock}}
                     {{#if product.out_of_stock_message}}
                         {{> components/common/alert/alert-error product.out_of_stock_message}}