Merge tag '6.7.0' into cornerstone-update-6.7.0

sacred-art · Nov 16, 2023 · 41dd571 · 41dd571
2 parents 6eb97e0 + 208a0cc
commit 41dd571
Show file tree

Hide file tree

Showing 52 changed files with 1,684 additions and 1,060 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Draft
 
+## 6.7.0 (11-03-2022)
+- Fixed escaping on created store account confirm message. [#2265]https://github.com/bigcommerce/cornerstone/pull/2265
+- Migrate Cornerstone to new "Hide Price From Guests" functionality [#2262](https://github.com/bigcommerce/cornerstone/pull/2262)
+- Add Accelerated buttons container into 'add to cart' popup on product details page [#2264](https://github.com/bigcommerce/cornerstone/pull/2264)
+- Made PDP wallet buttons container hidden in cases when the product is not purchasable or out of stock [#2267](https://github.com/bigcommerce/cornerstone/pull/2267)
+- Updated PayPal Accelerated Checkout default button styles [#2268](https://github.com/bigcommerce/cornerstone/pull/2268)
+- Add logic to collect Product Details data and send it to the BC App stencil template through custom event [#2270](https://github.com/bigcommerce/cornerstone/pull/2270)
+- Allow quantity of "0" in cart to remove item [#2266](https://github.com/bigcommerce/cornerstone/pull/2266)
+- Fix the issue with getting product details data if the product details form is valid on page load [#2271](https://github.com/bigcommerce/cornerstone/pull/2271)
+- Delay validation on account signup, message form, and account edit page [#2274](https://github.com/bigcommerce/cornerstone/pull/2274)
+- Update key render-blocking resources to be preloaded via HTTP headers/Early Hints [#2261](https://github.com/bigcommerce/cornerstone/pull/2261)
+
 ## 6.6.1 (09-14-2022)
 
 ## 6.6.0 (09-13-2022)

diff --git a/assets/js/theme/account.js b/assets/js/theme/account.js
@@ -318,7 +318,7 @@ export default class Account extends PageManager {
         const formEditSelector = 'form[data-edit-account-form]';
         const editValidator = nod({
             submit: '${formEditSelector} input[type="submit"]',
-            delay: 0,
+            delay: 900,
         });
         const emailSelector = `${formEditSelector} [data-field-type="EmailAddress"]`;
         const $emailElement = $(emailSelector);
@@ -396,15 +396,17 @@ export default class Account extends PageManager {
             }
 
             event.preventDefault();
-            const earliestError = $('span.form-inlineMessage:first').prev('input');
-            earliestError.focus();
+            setTimeout(() => {
+                const earliestError = $('span.form-inlineMessage:first').prev('input');
+                earliestError.focus();
+            }, 900);
         });
     }
 
     registerInboxValidation($inboxForm) {
         const inboxValidator = nod({
             submit: 'form[data-inbox-form] input[type="submit"]',
-            delay: 0,
+            delay: 900,
         });
 
         inboxValidator.add([
@@ -445,8 +447,11 @@ export default class Account extends PageManager {
             }
 
             event.preventDefault();
-            const earliestError = $('span.form-inlineMessage:first').prev('input');
-            earliestError.focus();
+
+            setTimeout(() => {
+                const earliestError = $('span.form-inlineMessage:first').prev('input');
+                earliestError.focus();
+            }, 900);
         });
     }
 }
diff --git a/assets/js/theme/auth.js b/assets/js/theme/auth.js
@@ -111,7 +111,7 @@ export default class Auth extends PageManager {
         const validationModel = validation($createAccountForm, this.context);
         const createAccountValidator = nod({
             submit: `${this.formCreateSelector} input[type='submit']`,
-            delay: 0,
+            delay: 900,
         });
         const $stateElement = $('[data-field-type="State"]');
         const emailSelector = `${this.formCreateSelector} [data-field-type='EmailAddress']`;
@@ -182,8 +182,10 @@ export default class Auth extends PageManager {
             return;
         }
         event.preventDefault();
-        const earliestError = $('span.form-inlineMessage:first').prev('input');
-        earliestError.focus();
+        setTimeout(() => {
+            const earliestError = $('span.form-inlineMessage:first').prev('input');
+            earliestError.focus();
+        }, 900);
     }
 
     /**

diff --git a/assets/js/theme/cart.js b/assets/js/theme/cart.js
@@ -78,7 +78,7 @@ export default class Cart extends PageManager {
         let invalidEntry;
 
         // Does not quality for min/max quantity
-        if (!newQty) {
+        if (!Number.isInteger(newQty)) {
             invalidEntry = $el.val();
             $el.val(oldQty);
             return showAlertModal(this.context.invalidEntryMessage.replace('[ENTRY]', invalidEntry));

diff --git a/assets/js/theme/common/faceted-search.js b/assets/js/theme/common/faceted-search.js
@@ -2,7 +2,7 @@ import { hooks, api } from '@bigcommerce/stencil-utils';
 import _ from 'lodash';
 import Url from 'url';
 import urlUtils from './utils/url-utils';
-import modalFactory from '../global/modal';
+import modalFactory, { ModalEvents } from '../global/modal';
 import collapsibleFactory from './collapsible';
 import { Validators } from './utils/form-utils';
 import nod from './nod';

diff --git a/assets/js/theme/common/product-details-base.js b/assets/js/theme/common/product-details-base.js
@@ -187,6 +187,7 @@ export default class ProductDetailsBase {
                 $input: $('[name=qty\\[\\]]', $scope),
             },
             $bulkPricing: $('.productView-info-bulkPricing', $scope),
+            $walletButtons: $('[data-add-to-cart-wallet-buttons]', $scope),
         };
     }
 
@@ -256,6 +257,7 @@ export default class ProductDetailsBase {
         }
 
         this.updateDefaultAttributesForOOS(data);
+        this.updateWalletButtonsView(data);
 
         // If Bulk Pricing rendered HTML is available
         if (data.bulk_discount_rates && content) {
@@ -351,6 +353,20 @@ export default class ProductDetailsBase {
         }
     }
 
+    updateWalletButtonsView(data) {
+        this.toggleWalletButtonsVisibility(data.purchasable && data.instock);
+    }
+
+    toggleWalletButtonsVisibility(shouldShow) {
+        const viewModel = this.getViewModel(this.$scope);
+
+        if (shouldShow) {
+            viewModel.$walletButtons.show();
+        } else {
+            viewModel.$walletButtons.hide();
+        }
+    }
+
     enableAttribute($attribute, behavior, outOfStockMessage) {
         if (this.getAttributeType($attribute) === 'set-select') {
             return this.enableSelectOptionAttribute($attribute, behavior, outOfStockMessage);

diff --git a/assets/js/theme/common/product-details.js b/assets/js/theme/common/product-details.js
@@ -28,6 +28,12 @@ export default class ProductDetails extends ProductDetailsBase {
 
         const $form = $('form[data-cart-item-add]', $scope);
 
+        if ($form[0].checkValidity()) {
+            this.updateProductDetailsData();
+        } else {
+            this.toggleWalletButtonsVisibility(false);
+        }
+
         this.addToCartValidator = nod({
             submit: $form.find('input#form-action-addToCart'),
             tap: announceInputErrorMessage,
@@ -259,6 +265,7 @@ export default class ProductDetails extends ProductDetailsBase {
             const productAttributesContent = response.content || {};
             this.updateProductAttributes(productAttributesData);
             this.updateView(productAttributesData, productAttributesContent);
+            this.updateProductDetailsData();
             bannerUtils.dispatchProductBannerEvent(productAttributesData);
 
             if (!this.checkIsQuickViewChild($form)) {
@@ -361,6 +368,8 @@ export default class ProductDetails extends ProductDetailsBase {
             viewModel.quantity.$text.text(qty);
             // perform validation after updating product quantity
             this.addToCartValidator.performCheck();
+
+            this.updateProductDetailsData();
         });
 
         // Prevent triggering quantity change when pressing enter
@@ -372,6 +381,10 @@ export default class ProductDetails extends ProductDetailsBase {
                 event.preventDefault();
             }
         });
+
+        this.$scope.on('keyup', '.form-input--incrementTotal', () => {
+            this.updateProductDetailsData();
+        });
     }
 
     /**
@@ -535,4 +548,39 @@ export default class ProductDetails extends ProductDetailsBase {
         super.updateProductAttributes(data);
         this.showProductImage(data.image);
     }
+
+    updateProductDetailsData() {
+        const $form = $('form[data-cart-item-add]');
+        const formDataItems = $form.serializeArray();
+
+        const productDetails = {};
+
+        for (const formDataItem of formDataItems) {
+            const { name, value } = formDataItem;
+
+            if (name === 'product_id') {
+                productDetails.productId = Number(value);
+            }
+
+            if (name === 'qty[]') {
+                productDetails.quantity = Number(value);
+            }
+
+            if (name.match(/attribute/)) {
+                const productOption = {
+                    optionId: Number(name.match(/\d+/g)[0]),
+                    optionValue: value,
+                };
+
+                productDetails.optionSelections = productDetails?.optionSelections
+                    ? [...productDetails.optionSelections, productOption]
+                    : [productOption];
+            }
+        }
+
+        document.dispatchEvent(new CustomEvent('onProductUpdate', {
+            bubbles: true,
+            detail: { productDetails },
+        }));
+    }
 }
diff --git a/assets/scss/components/stencil/cart/_cart.scss b/assets/scss/components/stencil/cart/_cart.scss
@@ -295,6 +295,10 @@ $card-preview-zoom-bottom-offset:       6rem;
         display: inline-block;
     }
 
+    &__label {
+        display: inline-block;
+    }
+
     + .definitionList {
         margin-top: spacing("quarter");
     }

diff --git a/assets/scss/components/stencil/heroCarousel/_heroCarousel.scss b/assets/scss/components/stencil/heroCarousel/_heroCarousel.scss
@@ -363,6 +363,36 @@
             }
         }
     }
+
+    .slick-slide {
+        &.is-square-image-type {
+            .heroCarousel-image-wrapper {
+                height: 100vw;
+            }
+        }
+
+        &.is-vertical-image-type {
+            .heroCarousel-image-wrapper {
+                height: 110vw;
+            }
+        }
+
+        &.is-square-image-type,
+        &.is-vertical-image-type {
+            .heroCarousel-image-wrapper {
+                @include breakpoint("small") {
+                    height: 56.25vw;
+                }
+            }
+        }
+
+        &.is-image-error {
+            .heroCarousel-image-wrapper {
+                background: url("../img/hero-carousel-image-load-error.svg") center center no-repeat;
+                background-size: contain;    
+            }
+        }
+    }
 }
 
 .heroCarousel-slide {

diff --git a/assets/scss/components/stencil/navPages/_navPages.scss b/assets/scss/components/stencil/navPages/_navPages.scss
@@ -299,6 +299,24 @@
         }
     }
 
+    &.is-open,
+    .collapsible-icon-wrapper.is-open {
+        svg {
+            fill: $navPage-subMenu-item--is-highlighted-color;
+            stroke: $navPage-subMenu-item--is-highlighted-color;
+        }
+    }
+
+    &:hover,
+    &.activePage {
+        color: $navPage-subMenu-item--is-highlighted-color;
+
+        svg {
+            fill: $navPage-subMenu-item--is-highlighted-color;
+            stroke: $navPage-subMenu-item--is-highlighted-color;
+        }
+    }
+
     // turn a highlight into a button
     &.highlightPage {
         background-color: black;

diff --git a/assets/scss/components/stencil/previewCart/_previewCart.scss b/assets/scss/components/stencil/previewCart/_previewCart.scss
@@ -78,6 +78,10 @@
     margin-top: spacing("single");
 }
 
+.previewCartCheckout-acceleratedCheckoutButtons {
+    width: 100%;
+}
+
 .previewCartCheckout-additionalCheckoutButtons {
     p {
         float: none !important; // 1

diff --git a/assets/scss/components/stencil/productView/_productView.scss b/assets/scss/components/stencil/productView/_productView.scss
@@ -290,6 +290,10 @@
         color: stencilColor("color-textSecondary--hover");
     }
 
+    &:hover {
+        color: stencilColor("color-textSecondary--hover");
+    }
+
     &--new {
         padding: 0;
     }
@@ -446,6 +450,20 @@
         }
     }
 
+    .add-to-cart-wallet-buttons {
+        margin-top: spacing("half");
+
+        button {
+            color: stencilColor("color-textSecondary");
+            display: block;
+            padding: spacing("quarter") 0;
+            text-align: center;
+            text-decoration: underline;
+            vertical-align: middle;
+            width: 100%;
+        }
+    }
+
     .add-to-cart-wallet-buttons {
         margin-top: spacing("half");
 
@@ -473,8 +491,8 @@
                 color: stencilColor("color-textSecondary--hover");
             }
 
-            @include breakpoint("large") {
-                margin-right: spacing("half");
+            &:hover {
+                color: stencilColor("color-textSecondary--hover");
             }
         }
 

diff --git a/assets/scss/layouts/products/_productSaleBadges.scss b/assets/scss/layouts/products/_productSaleBadges.scss
@@ -217,6 +217,10 @@
     background: stencilColor("color_hover_product_sold_out_badges");
 }
 
+.product:hover .sold-out-flag-sash {
+    background: stencilColor("color_hover_product_sold_out_badges");
+}
+
 .product {
     overflow: hidden;
 }
diff --git a/config.json b/config.json
@@ -1,6 +1,6 @@
 {
   "name": "Midwest Nice",
-  "version": "6.6.1",
+  "version": "6.7.0",
   "template_engine": "handlebars_v4",
   "meta": {
     "price": 0,
@@ -321,7 +321,6 @@
     "color_hover_product_sold_out_badges": "#000000",
     "focusTooltip-textColor": "#ffffff",
     "focusTooltip-backgroundColor": "#313440",
-    "restrict_to_login": false,
     "swatch_option_size": "22x22",
     "social_icon_placement_top": false,
     "social_icon_placement_bottom": "bottom_none",
@@ -334,7 +333,9 @@
     "pdp-non-sale-price-label": "",
     "pdp-retail-price-label": "",
     "pdp-custom-fields-tab-label": "",
-    "paymentbuttons-paypal-accelerated-checkout-color": "black",
+    "paymentbuttons-paypal-accelerated-checkout-color": "#444",
+    "paymentbuttons-paypal-accelerated-content-font-family": "Montserrat, Arial, Helvetica, sans-serif",
+    "paymentbuttons-paypal-accelerated-content-font-weight": "400",
     "paymentbuttons-paypal-accelerated-content-color": "white",
     "paymentbuttons-paypal-accelerated-content-label": "checkout",
     "paymentbuttons-paypal-accelerated-border-color": "black",

diff --git a/lang/da.json b/lang/da.json
@@ -258,7 +258,7 @@
         "heading": "Ny konto",
         "created": {
             "heading": "Din konto er blevet oprettet",
-            "intro": "Tak, fordi du oprettede din konto på {store_name}. Dine kontooplysninger er blevet sendt til <strong>{email}</strong>",
+            "intro": "Tak, fordi du oprettede din konto på {store_name}. Dine kontooplysninger er blevet sendt til {email}",
             "continue": "Fortsæt med at handle"
         },
         "recaptcha_title": "Google recaptcha"