feat(storefront): SD-10935 Update behaviour to delay displaying the alert message until all required product options are selected

bc-alexsaiannyi · bc-alexsaiannyi · commit 5687d256e37f · 2025-01-22T19:48:31.000+01:00
diff --git 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
+- Update behaviour to delay displaying the alert message until all required product options are selected [#2535](https://github.com/bigcommerce/cornerstone/pull/2535)
 
 ## 6.16.0 (01-15-2025)
 - Remove escaping of "=" symbol for <head> for blog and brand [#2528](https://github.com/bigcommerce/cornerstone/pull/2528)
diff --git a/assets/js/theme/common/product-details-base.js b/assets/js/theme/common/product-details-base.js
@@ -223,11 +223,16 @@ export default class ProductDetailsBase {
     /**
      * Update the view of price, messages, SKU and stock options when a product option changes
      * @param  {Object} data Product attribute data
+     * @param  {Object} content Product attribute content
+     * @param  {Boolean} shouldMessageAppear indicates if product attributes form has no validity problems
+     * and message can be shown to User
      */
-    updateView(data, content = null) {
+    updateView(data, content, shouldMessageAppear = true) {
         const viewModel = this.getViewModel(this.$scope);
 
-        this.showMessageBox(data.stock_message || data.purchasing_message);
+        if (shouldMessageAppear) {
+            this.showMessageBox(data.stock_message || data.purchasing_message);
+        }
 
         if (data.price instanceof Object) {
             this.updatePriceView(viewModel, data.price);
diff --git a/assets/js/theme/common/product-details.js b/assets/js/theme/common/product-details.js
@@ -255,6 +255,7 @@ export default class ProductDetails extends ProductDetailsBase {
         const $changedOption = $(event.target);
         const $form = $changedOption.parents('form');
         const productId = $('[name="product_id"]', $form).val();
+        const isFormValid = $form[0].checkValidity();
 
         // Do not trigger an ajax request if it's a file or if the browser doesn't support FormData
         if ($changedOption.attr('type') === 'file' || window.FormData === undefined) {
@@ -264,8 +265,9 @@ export default class ProductDetails extends ProductDetailsBase {
         utils.api.productAttributes.optionChange(productId, $form.serialize(), 'products/bulk-discount-rates', (err, response) => {
             const productAttributesData = response.data || {};
             const productAttributesContent = response.content || {};
+
             this.updateProductAttributes(productAttributesData);
-            this.updateView(productAttributesData, productAttributesContent);
+            this.updateView(productAttributesData, productAttributesContent, isFormValid);
             this.updateProductDetailsData();
             bannerUtils.dispatchProductBannerEvent(productAttributesData);
 
