fix(storefront): BCTHEME-11 hide product options that are out of stock on cart

CHANGELOG.md

@@ -3,6 +3,7 @@
 - HTML Entity displayed as is via system/error message on a Storefront. [#1888](https://github.com/bigcommerce/cornerstone/pull/1888)
 
 ## Draft
+- Fixed an issue with dispaying options that are out of stock for product on Cart. [#1911](https://github.com/bigcommerce/cornerstone/pull/1911)
 - Shoppers are not anchor-linked to reviews on PDPs if product description tabs are enabled. [#1883](https://github.com/bigcommerce/cornerstone/pull/1883)
 - Fixed text contrast for brand name on Cart page. [#1882](https://github.com/bigcommerce/cornerstone/pull/1882)
 - Add sufficient contrast for Upsell Banners in Cornerstone Theme according to AA Standard. [#1891](https://github.com/bigcommerce/cornerstone/pull/1891)

assets/js/theme/cart.js

@@ -1,13 +1,15 @@
 import PageManager from './page-manager';
-import _ from 'lodash';
+import { bind, debounce } from 'lodash';
 import giftCertCheck from './common/gift-certificate-validator';
 import utils from '@bigcommerce/stencil-utils';
 import ShippingEstimator from './cart/shipping-estimator';
 import { defaultModal, modalTypes } from './global/modal';
 import swal from './global/sweet-alert';
+import CartItemDetails from './common/cart-item-details';
 
 export default class Cart extends PageManager {
     onReady() {
+        this.$modal = null;
         this.$cartContent = $('[data-cart-content]');
         this.$cartMessages = $('[data-cart-status]');
         this.$cartTotals = $('[data-cart-totals]');
@@ -125,30 +127,40 @@ export default class Cart extends PageManager {
         });
     }
 
-    cartEditOptions(itemId) {
+    cartEditOptions(itemId, productId) {
+        const context = { productForChangeId: productId, ...this.context };
         const modal = defaultModal();
+
+        if (this.$modal === null) {
+            this.$modal = $('#modal');
+        }
+
         const options = {
             template: 'cart/modals/configure-product',
         };
 
         modal.open();
+        this.$modal.find('.modal-content').addClass('hide-content');
 
         utils.api.productAttributes.configureInCart(itemId, options, (err, response) => {
             modal.updateContent(response.content);
+            const $productOptionsContainer = $('[data-product-attributes-wrapper]', this.$modal);
+            const modalBodyReservedHeight = $productOptionsContainer.outerHeight();
+            $productOptionsContainer.css('height', modalBodyReservedHeight);
+
+            this.productDetails = new CartItemDetails(this.$modal, context);
 
             this.bindGiftWrappingForm();
 
             modal.setupFocusableElements(modalTypes.CART_CHANGE_PRODUCT);
         });
 
         utils.hooks.on('product-option-change', (event, currentTarget) => {
-            const $changedOption = $(currentTarget);
-            const $form = $changedOption.parents('form');
+            const $form = $(currentTarget).find('form');
             const $submit = $('input.button', $form);
             const $messageBox = $('.alertMessageBox');
-            const item = $('[name="item_id"]', $form).attr('value');
 
-            utils.api.productAttributes.optionChange(item, $form.serialize(), (err, result) => {
+            utils.api.productAttributes.optionChange(productId, $form.serialize(), (err, result) => {
                 const data = result.data || {};
 
                 if (err) {
@@ -213,9 +225,9 @@ export default class Cart extends PageManager {
 
     bindCartEvents() {
         const debounceTimeout = 400;
-        const cartUpdate = _.bind(_.debounce(this.cartUpdate, debounceTimeout), this);
-        const cartUpdateQtyTextChange = _.bind(_.debounce(this.cartUpdateQtyTextChange, debounceTimeout), this);
-        const cartRemoveItem = _.bind(_.debounce(this.cartRemoveItem, debounceTimeout), this);
+        const cartUpdate = bind(debounce(this.cartUpdate, debounceTimeout), this);
+        const cartUpdateQtyTextChange = bind(debounce(this.cartUpdateQtyTextChange, debounceTimeout), this);
+        const cartRemoveItem = bind(debounce(this.cartRemoveItem, debounceTimeout), this);
         let preVal;
 
         // cart update
@@ -257,10 +269,10 @@ export default class Cart extends PageManager {
 
         $('[data-item-edit]', this.$cartContent).on('click', event => {
             const itemId = $(event.currentTarget).data('itemEdit');
-
+            const productId = $(event.currentTarget).data('productId');
             event.preventDefault();
             // edit item in cart
-            this.cartEditOptions(itemId);
+            this.cartEditOptions(itemId, productId);
         });
     }
 

assets/js/theme/common/cart-item-details.js

@@ -0,0 +1,143 @@
+import utils from '@bigcommerce/stencil-utils';
+import ProductDetailsBase, { optionChangeDecorator } from './product-details-base';
+import { isEmpty } from 'lodash';
+import { isBrowserIE, convertIntoArray } from './utils/ie-helpers';
+
+export default class CartItemDetails extends ProductDetailsBase {
+    constructor($scope, context, productAttributesData = {}) {
+        super($scope, context);
+
+        const $form = $('#CartEditProductFieldsForm', this.$scope);
+        const $productOptionsElement = $('[data-product-attributes-wrapper]', $form);
+        const hasOptions = $productOptionsElement.html().trim().length;
+        const hasDefaultOptions = $productOptionsElement.find('[data-default]').length;
+
+        $productOptionsElement.on('change', e => {
+            this.setProductVariant();
+        });
+
+        const optionChangeCallback = optionChangeDecorator.call(this, hasDefaultOptions);
+
+        // Update product attributes. Also update the initial view in case items are oos
+        // or have default variant properties that change the view
+        if ((isEmpty(productAttributesData) || hasDefaultOptions) && hasOptions) {
+            const productId = this.context.productForChangeId;
+
+            utils.api.productAttributes.optionChange(productId, $form.serialize(), 'products/bulk-discount-rates', optionChangeCallback);
+        } else {
+            this.updateProductAttributes(productAttributesData);
+        }
+    }
+
+    setProductVariant() {
+        const unsatisfiedRequiredFields = [];
+        const options = [];
+
+        $.each($('[data-product-attribute]'), (index, value) => {
+            const optionLabel = value.children[0].innerText;
+            const optionTitle = optionLabel.split(':')[0].trim();
+            const required = optionLabel.toLowerCase().includes('required');
+            const type = value.getAttribute('data-product-attribute');
+
+            if ((type === 'input-file' || type === 'input-text' || type === 'input-number') && value.querySelector('input').value === '' && required) {
+                unsatisfiedRequiredFields.push(value);
+            }
+
+            if (type === 'textarea' && value.querySelector('textarea').value === '' && required) {
+                unsatisfiedRequiredFields.push(value);
+            }
+
+            if (type === 'date') {
+                const isSatisfied = Array.from(value.querySelectorAll('select')).every((select) => select.selectedIndex !== 0);
+
+                if (isSatisfied) {
+                    const dateString = Array.from(value.querySelectorAll('select')).map((x) => x.value).join('-');
+                    options.push(`${optionTitle}:${dateString}`);
+
+                    return;
+                }
+
+                if (required) {
+                    unsatisfiedRequiredFields.push(value);
+                }
+            }
+
+            if (type === 'set-select') {
+                const select = value.querySelector('select');
+                const selectedIndex = select.selectedIndex;
+
+                if (selectedIndex !== 0) {
+                    options.push(`${optionTitle}:${select.options[selectedIndex].innerText}`);
+
+                    return;
+                }
+
+                if (required) {
+                    unsatisfiedRequiredFields.push(value);
+                }
+            }
+
+            if (type === 'set-rectangle' || type === 'set-radio' || type === 'swatch' || type === 'input-checkbox' || type === 'product-list') {
+                const checked = value.querySelector(':checked');
+                if (checked) {
+                    const getSelectedOptionLabel = () => {
+                        const productVariantslist = convertIntoArray(value.children);
+                        const matchLabelForCheckedInput = inpt => inpt.dataset.productAttributeValue === checked.value;
+                        return productVariantslist.filter(matchLabelForCheckedInput)[0];
+                    };
+                    if (type === 'set-rectangle' || type === 'set-radio' || type === 'product-list') {
+                        const label = isBrowserIE ? getSelectedOptionLabel().innerText.trim() : checked.labels[0].innerText;
+                        if (label) {
+                            options.push(`${optionTitle}:${label}`);
+                        }
+                    }
+
+                    if (type === 'swatch') {
+                        const label = isBrowserIE ? getSelectedOptionLabel().children[0] : checked.labels[0].children[0];
+                        if (label) {
+                            options.push(`${optionTitle}:${label.title}`);
+                        }
+                    }
+
+                    if (type === 'input-checkbox') {
+                        options.push(`${optionTitle}:Yes`);
+                    }
+
+                    return;
+                }
+
+                if (type === 'input-checkbox') {
+                    options.push(`${optionTitle}:No`);
+                }
+
+                if (required) {
+                    unsatisfiedRequiredFields.push(value);
+                }
+            }
+        });
+
+        let productVariant = unsatisfiedRequiredFields.length === 0 ? options.sort().join(', ') : 'unsatisfied';
+        const view = $('.modal-header-title');
+
+        if (productVariant) {
+            productVariant = productVariant === 'unsatisfied' ? '' : productVariant;
+            if (view.attr('data-event-type')) {
+                view.attr('data-product-variant', productVariant);
+            } else {
+                const productName = view.html().match(/'(.*?)'/)[1];
+                const card = $(`[data-name="${productName}"]`);
+                card.attr('data-product-variant', productVariant);
+            }
+        }
+    }
+
+    /**
+     * Hide or mark as unavailable out of stock attributes if enabled
+     * @param  {Object} data Product attribute data
+     */
+    updateProductAttributes(data) {
+        super.updateProductAttributes(data);
+
+        this.$scope.find('.modal-content').removeClass('hide-content');
+    }
+}