feat(storefront): BCTHEME-306 show price range on option selection

bigcommerce · Jan 5, 2021 · fd47019 · fd47019
1 parent babdd27
commit fd47019
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- Added narrow down pricing during option selections [#1924](https://github.com/bigcommerce/cornerstone/pull/1924)
 
 ## 5.0.0 (12-14-2020)
 - Parse HTML entities in jsContext. [#1917](https://github.com/bigcommerce/cornerstone/pull/1917)

diff --git a/assets/js/test-unit/theme/common/payment-method.spec.js b/assets/js/test-unit/theme/common/payment-method.spec.js
@@ -127,7 +127,7 @@ describe('PaymentMethod', () => {
 
             it('should have valid input expiration date', () => {
                 const callback = jasmine.createSpy();
-                const validator = { add: ({ validate }) => validate(callback, '12/20') };
+                const validator = { add: ({ validate }) => validate(callback, '12/25') };
                 Validators.setExpirationValidation(validator, 'selector');
 
                 expect(callback).toHaveBeenCalledWith(true);

diff --git a/assets/js/theme/common/product-details-base.js b/assets/js/theme/common/product-details-base.js
@@ -274,13 +274,19 @@ export default class ProductDetailsBase {
         this.clearPricingNotFound(viewModel);
 
         if (price.with_tax) {
+            const updatedPrice = price.price_range ?
+                `${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(price.with_tax.formatted);
+            viewModel.$priceWithTax.html(updatedPrice);
         }
 
         if (price.without_tax) {
+            const updatedPrice = price.price_range ?
+                `${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(price.without_tax.formatted);
+            viewModel.$priceWithoutTax.html(updatedPrice);
         }
 
         if (price.rrp_with_tax) {