From e730f0a356c45a4a697f3c7e87e5b575354ad644 Mon Sep 17 00:00:00 2001
From: bc-yevhenii-buliuk <yevhenii.buliuk@bigcommerce.com>
Date: Tue, 24 Sep 2024 15:35:36 +0300
Subject: [PATCH] fix(storefront): BCTHEME-1941 Cornerstone changes to support
 inc/ex tax price lists on PDP

---
 CHANGELOG.md                                  |   1 +
 .../js/theme/common/product-details-base.js   |  24 ++-
 .../components/products/price-range.html      |   8 +-
 templates/components/products/price.html      | 152 +++++++++---------
 4 files changed, 97 insertions(+), 88 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index cae441a18e..48a63d2cbe 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## Draft
+- Cornerstone changes to support inc/ex tax price lists on PDP [#2486](https://github.com/bigcommerce/cornerstone/pull/2486)
 - High severity security issue [#2477](https://github.com/bigcommerce/cornerstone/pull/2477)
 - Date Field Modifier - February showing 30th and 31st [#2473](https://github.com/bigcommerce/cornerstone/pull/2473)
 - Adding mobile nav dropdown focusTrap [#2465](https://github.com/bigcommerce/cornerstone/pull/2465)
diff --git a/assets/js/theme/common/product-details-base.js b/assets/js/theme/common/product-details-base.js
index 6927d48046..547a0a8bb5 100644
--- a/assets/js/theme/common/product-details-base.js
+++ b/assets/js/theme/common/product-details-base.js
@@ -15,13 +15,13 @@ const optionsTypesMap = {
     PRODUCT_LIST: 'product-list',
 };
 
-export function optionChangeDecorator(areDefaultOtionsSet) {
+export function optionChangeDecorator(areDefaultOptionsSet) {
     return (err, response) => {
         const attributesData = response.data || {};
         const attributesContent = response.content || {};
 
         this.updateProductAttributes(attributesData);
-        if (areDefaultOtionsSet) {
+        if (areDefaultOptionsSet) {
             this.updateView(attributesData, attributesContent);
         } else {
             this.updateDefaultAttributesForOOS(attributesData);
@@ -145,8 +145,14 @@ export default class ProductDetailsBase {
      */
     getViewModel($scope) {
         return {
-            $priceWithTax: $('[data-product-price-with-tax]', $scope),
-            $priceWithoutTax: $('[data-product-price-without-tax]', $scope),
+            priceWithTax: {
+                $div: $('.price--withTax', $scope),
+                $span: $('[data-product-price-with-tax]', $scope),
+            },
+            priceWithoutTax: {
+                $div: $('.price--withoutTax', $scope),
+                $span: $('[data-product-price-without-tax]', $scope),
+            },
             rrpWithTax: {
                 $div: $('.rrp-price--withTax', $scope),
                 $span: $('[data-product-rrp-with-tax]', $scope),
@@ -210,6 +216,8 @@ export default class ProductDetailsBase {
         viewModel.priceSaved.$div.hide();
         viewModel.priceNowLabel.$span.hide();
         viewModel.priceLabel.$span.hide();
+        viewModel.priceWithTax.$div.hide();
+        viewModel.priceWithoutTax.$div.hide();
     }
 
     /**
@@ -223,6 +231,8 @@ export default class ProductDetailsBase {
 
         if (data.price instanceof Object) {
             this.updatePriceView(viewModel, data.price);
+        } else {
+            this.clearPricingNotFound(viewModel);
         }
 
         if (data.weight instanceof Object) {
@@ -292,7 +302,8 @@ export default class ProductDetailsBase {
                 `${price.price_range.min.with_tax.formatted} - ${price.price_range.max.with_tax.formatted}`
                 : price.with_tax.formatted;
             viewModel.priceLabel.$span.show();
-            viewModel.$priceWithTax.html(updatedPrice);
+            viewModel.priceWithTax.$div.show();
+            viewModel.priceWithTax.$span.html(updatedPrice);
         }
 
         if (price.without_tax) {
@@ -300,7 +311,8 @@ export default class ProductDetailsBase {
                 `${price.price_range.min.without_tax.formatted} - ${price.price_range.max.without_tax.formatted}`
                 : price.without_tax.formatted;
             viewModel.priceLabel.$span.show();
-            viewModel.$priceWithoutTax.html(updatedPrice);
+            viewModel.priceWithoutTax.$div.show();
+            viewModel.priceWithoutTax.$span.html(updatedPrice);
         }
 
         if (price.rrp_with_tax) {
diff --git a/templates/components/products/price-range.html b/templates/components/products/price-range.html
index cdd6fc4636..9ff2a12c26 100644
--- a/templates/components/products/price-range.html
+++ b/templates/components/products/price-range.html
@@ -36,7 +36,7 @@
             {{price.non_sale_price_with_tax.formatted}}
         </span>
     </div>
-    <div class="price-section price-section--withTax">
+    <div class="price-section price-section--withTax price--withTax">
         <span class="price-label">{{theme_settings.pdp-price-label}}</span>
         <span class="price-now-label" style="display: none;">
             {{> components/products/price-label
@@ -44,7 +44,7 @@
                 fallback=(lang "page_builder.pdp-sale-price-label")
             }}
         </span>
-        <span data-product-price-with-tax class="price price--withTax">{{price.price_range.min.with_tax.formatted}} - {{price.price_range.max.with_tax.formatted}}</span>
+        <span data-product-price-with-tax class="price">{{price.price_range.min.with_tax.formatted}} - {{price.price_range.max.with_tax.formatted}}</span>
         {{#and price.price_range.min.without_tax price.price_range.max.without_tax}}
             <abbr title="{{lang 'products.including_tax'}}">{{lang 'products.price_with_tax' tax_label=price.price_range.min.tax_label}}</abbr>
         {{/and}}
@@ -88,7 +88,7 @@
             {{price.non_sale_price_without_tax.formatted}}
         </span>
     </div>
-    <div class="price-section price-section--withoutTax{{#and price_range.min.with_tax price_range.max.with_tax}} price-section--minor{{/and}}">
+    <div class="price-section price-section--withoutTax price--withoutTax{{#and price_range.min.with_tax price_range.max.with_tax}} price-section--minor{{/and}}">
         <span class="price-label">{{theme_settings.pdp-price-label}}</span>
         <span class="price-now-label" style="display: none;">
             {{> components/products/price-label
@@ -96,7 +96,7 @@
                 fallback=(lang "page_builder.pdp-sale-price-label")
             }}
         </span>
-        <span data-product-price-without-tax class="price price--withoutTax">{{price.price_range.min.without_tax.formatted}} - {{price.price_range.max.without_tax.formatted}}</span>
+        <span data-product-price-without-tax class="price">{{price.price_range.min.without_tax.formatted}} - {{price.price_range.max.without_tax.formatted}}</span>
         {{#and price.price_range.min.with_tax price.price_range.max.with_tax}}
             <abbr title="{{lang 'products.excluding_tax'}}">{{lang 'products.price_without_tax' tax_label=price.price_range.min.tax_label}}</abbr>
         {{/and}}
diff --git a/templates/components/products/price.html b/templates/components/products/price.html
index d5e6126325..507b6468e5 100644
--- a/templates/components/products/price.html
+++ b/templates/components/products/price.html
@@ -7,84 +7,80 @@
 {{#and price.price_range (if theme_settings.price_ranges '==' true)}}
     {{> components/products/price-range price=price}}
 {{else}}
-    {{#if price.with_tax}}
-        <div class="price-section price-section--withTax rrp-price--withTax" {{#unless price.rrp_with_tax}}style="display: none;"{{/unless}}>
-            <span>
-                {{> components/products/price-label
-                    label_value=theme_settings.pdp-retail-price-label
-                    fallback=(lang "page_builder.pdp-retail-price-label")
-                }}
-            </span>
-            <span data-product-rrp-with-tax class="price price--rrp">
-                {{price.rrp_with_tax.formatted}}
-            </span>
-        </div>
-        <div class="price-section price-section--withTax non-sale-price--withTax" {{#unless price.non_sale_price_with_tax}}style="display: none;"{{/unless}}>
-            <span>
-                {{> components/products/price-label
-                    label_value=theme_settings.pdp-non-sale-price-label
-                    fallback=(lang "page_builder.pdp-non-sale-price-label")
-                }}
-            </span>
-            <span data-product-non-sale-price-with-tax class="price price--non-sale">
-                {{price.non_sale_price_with_tax.formatted}}
-            </span>
-        </div>
-        <div class="price-section price-section--withTax">
-            <span class="price-label" {{#if price.non_sale_price_with_tax}}style="display: none;"{{/if}}>
-                {{theme_settings.pdp-price-label}}
-            </span>
-            <span class="price-now-label" {{#unless price.non_sale_price_with_tax}}style="display: none;"{{/unless}}>
-                {{> components/products/price-label
-                    label_value=theme_settings.pdp-sale-price-label
-                    fallback=(lang "page_builder.pdp-sale-price-label")
-                }}
-            </span>
-            <span data-product-price-with-tax class="price price--withTax">{{price.with_tax.formatted}}</span>
-            {{#if price.without_tax}}
-                <abbr title="{{lang 'products.including_tax'}}">{{lang 'products.price_with_tax' tax_label=price.tax_label}}</abbr>
-            {{/if}}
-        </div>
-    {{/if}}
-    {{#if price.without_tax}}
-        <div class="price-section price-section--withoutTax rrp-price--withoutTax{{#if price.with_tax}} price-section--minor{{/if}}" {{#unless price.rrp_without_tax}}style="display: none;"{{/unless}}>
-            <span>
-                {{> components/products/price-label
-                    label_value=theme_settings.pdp-retail-price-label
-                    fallback=(lang "page_builder.pdp-retail-price-label")
-                }}
-            </span>
-            <span data-product-rrp-price-without-tax class="price price--rrp">
-                {{price.rrp_without_tax.formatted}}
-            </span>
-        </div>
-        <div class="price-section price-section--withoutTax non-sale-price--withoutTax{{#if price.with_tax}} price-section--minor{{/if}}" {{#unless price.non_sale_price_without_tax}}style="display: none;"{{/unless}}>
-            <span>
-                {{> components/products/price-label
-                    label_value=theme_settings.pdp-non-sale-price-label
-                    fallback=(lang "page_builder.pdp-non-sale-price-label")
-                }}
-            </span>
-            <span data-product-non-sale-price-without-tax class="price price--non-sale">
-                {{price.non_sale_price_without_tax.formatted}}
-            </span>
-        </div>
-        <div class="price-section price-section--withoutTax">
-            <span class="price-label" {{#if price.non_sale_price_without_tax}}style="display: none;"{{/if}}>
-                {{theme_settings.pdp-price-label}}
-            </span>
-            <span class="price-now-label" {{#unless price.non_sale_price_without_tax}}style="display: none;"{{/unless}}>
-                {{> components/products/price-label
-                    label_value=theme_settings.pdp-sale-price-label
-                    fallback=(lang "page_builder.pdp-sale-price-label")
-                }}
-            </span>
-            <span data-product-price-without-tax class="price price--withoutTax{{#if price.with_tax}} price-section--minor{{/if}}">{{price.without_tax.formatted}}</span>
-            {{#if price.with_tax}}
-                <abbr title="{{lang 'products.excluding_tax'}}">{{lang 'products.price_without_tax' tax_label=price.tax_label}}</abbr>
-            {{/if}}
-        </div>
-    {{/if}}
+    <div class="price-section price-section--withTax rrp-price--withTax" {{#unless price.rrp_with_tax}}style="display: none;"{{/unless}}>
+        <span>
+            {{> components/products/price-label
+                label_value=theme_settings.pdp-retail-price-label
+                fallback=(lang "page_builder.pdp-retail-price-label")
+            }}
+        </span>
+        <span data-product-rrp-with-tax class="price price--rrp">
+            {{price.rrp_with_tax.formatted}}
+        </span>
+    </div>
+    <div class="price-section price-section--withTax non-sale-price--withTax" {{#unless price.non_sale_price_with_tax}}style="display: none;"{{/unless}}>
+        <span>
+            {{> components/products/price-label
+                label_value=theme_settings.pdp-non-sale-price-label
+                fallback=(lang "page_builder.pdp-non-sale-price-label")
+            }}
+        </span>
+        <span data-product-non-sale-price-with-tax class="price price--non-sale">
+            {{price.non_sale_price_with_tax.formatted}}
+        </span>
+    </div>
+    <div class="price-section price-section--withTax price--withTax" {{#unless price.with_tax}}style="display: none;{{/unless}}>
+        <span class="price-label" {{#if price.non_sale_price_with_tax}}style="display: none;"{{/if}}>
+            {{theme_settings.pdp-price-label}}
+        </span>
+        <span class="price-now-label" {{#unless price.non_sale_price_with_tax}}style="display: none;"{{/unless}}>
+            {{> components/products/price-label
+                label_value=theme_settings.pdp-sale-price-label
+                fallback=(lang "page_builder.pdp-sale-price-label")
+            }}
+        </span>
+        <span data-product-price-with-tax class="price">{{price.with_tax.formatted}}</span>
+        {{#if price.without_tax}}
+            <abbr title="{{lang 'products.including_tax'}}">{{lang 'products.price_with_tax' tax_label=price.tax_label}}</abbr>
+        {{/if}}
+    </div>
+    <div class="price-section price-section--withoutTax rrp-price--withoutTax{{#if price.with_tax}} price-section--minor{{/if}}" {{#unless price.rrp_without_tax}}style="display: none;"{{/unless}}>
+        <span>
+            {{> components/products/price-label
+                label_value=theme_settings.pdp-retail-price-label
+                fallback=(lang "page_builder.pdp-retail-price-label")
+            }}
+        </span>
+        <span data-product-rrp-price-without-tax class="price price--rrp">
+            {{price.rrp_without_tax.formatted}}
+        </span>
+    </div>
+    <div class="price-section price-section--withoutTax non-sale-price--withoutTax{{#if price.with_tax}} price-section--minor{{/if}}" {{#unless price.non_sale_price_without_tax}}style="display: none;"{{/unless}}>
+        <span>
+            {{> components/products/price-label
+                label_value=theme_settings.pdp-non-sale-price-label
+                fallback=(lang "page_builder.pdp-non-sale-price-label")
+            }}
+        </span>
+        <span data-product-non-sale-price-without-tax class="price price--non-sale">
+            {{price.non_sale_price_without_tax.formatted}}
+        </span>
+    </div>
+    <div class="price-section price-section--withoutTax price--withoutTax" {{#unless price.without_tax}}style="display: none;"{{/unless}}>
+        <span class="price-label" {{#if price.non_sale_price_without_tax}}style="display: none;"{{/if}}>
+            {{theme_settings.pdp-price-label}}
+        </span>
+        <span class="price-now-label" {{#unless price.non_sale_price_without_tax}}style="display: none;"{{/unless}}>
+            {{> components/products/price-label
+                label_value=theme_settings.pdp-sale-price-label
+                fallback=(lang "page_builder.pdp-sale-price-label")
+            }}
+        </span>
+        <span data-product-price-without-tax class="price{{#if price.with_tax}} price-section--minor{{/if}}">{{price.without_tax.formatted}}</span>
+        {{#if price.with_tax}}
+            <abbr title="{{lang 'products.excluding_tax'}}">{{lang 'products.price_without_tax' tax_label=price.tax_label}}</abbr>
+        {{/if}}
+    </div>
     {{#if page_type '===' 'product'}}
          <div class="price-section price-section--saving price" {{#unless price.saved}}style="display: none;"{{/unless}}>
                 <span class="price">{{lang 'products.you_save_opening_text'}}</span>