Merge remote-tracking branch 'upstream/master'

Author: mahlingam

.gitignore

@@ -21,3 +21,4 @@ _site
 .jekyll-metadata
 /test/build
 config.json
+/.vscode

CHANGELOG.md

@@ -1,29 +1,55 @@
 # Changelog
 
+### v2.1.7 (July 13, 2020)
+
+- Update product set component to use the correct container node when in non-iFrame mode [#680](https://github.com/Shopify/buy-button-js/pull/680)
+
+### v2.1.6 (July 8, 2020)
+
+- Fixed disabled button css class [#681](https://github.com/shopify/buy-button-js/pull/681)
+- Show discount code within the cart when discount title is unavailable [#686](https://github.com/Shopify/buy-button-js/pull/686)
+- Prevent adding multiple close modal event listeners [#692](https://github.com/shopify/buy-button-js/pull/692)
+
+### v2.1.5 (July 7, 2020)
+
+- Updated `JS Buy SDK` to `v2.11.0`, which uses Storefront API version [2020-07](https://shopify.dev/concepts/about-apis/versioning/release-notes/2020-07) ([#699](https://github.com/Shopify/buy-button-js/pull/699))
+
+### v2.1.4 (July 7, 2020)
+
+- Updated changelog for [v2.1.3](https://github.com/Shopify/buy-button-js/pull/685)
+
 ### v2.1.3 (May 12, 2020)
+
 - Updated `JS Buy SDK` to `v2.10.0`, which uses Storefront API version [2020-04](https://shopify.dev/concepts/about-apis/versioning/release-notes/2020-04) ([#684](https://github.com/Shopify/buy-button-js/pull/684))
 
 ### v2.1.2 (April 6, 2020)
+
 - Updated code of conduct report link ([#678](https://github.com/Shopify/buy-button-js/pull/678))
 
 ### v2.1.1 (March 23, 2020)
+
 - Updated `JS Buy SDK` to `v2.9.2` ([#674](https://github.com/Shopify/buy-button-js/pull/674))
   - This update ensures that checkouts and content returned from Storefront API/JS Buy SDK will be in the store's primary language.
 
 ### v2.1.0 (January 9, 2020)
+
 - Add unit pricing to the product component ([#671](https://github.com/Shopify/buy-button-js/pull/671))
 
 ### v2.0.0 (November 19, 2019)
+
 - Defer creation of checkout until a variant is added to cart ([#657](https://github.com/Shopify/buy-button-js/pull/657))
   - The cart component's model will now be null until a variant has been added to the cart
 
 ### v1.0.4 (October 9, 2019)
+
 - Changed text-rendering to auto for select elements to prevent Safari 13 from crashing ([#653](https://github.com/Shopify/buy-button-js/pull/653))
 
 ### v1.0.3 (October 8, 2019)
+
 - Fix product set's `trackingInfo` to return tracking information for each product in set ([#651](https://github.com/Shopify/buy-button-js/pull/651))
 
 ### v1.0.2 (September 24, 2019)
+
 - Add `openCheckout` user event ([#647](https://github.com/Shopify/buy-button-js/pull/647))
 - Fixed pagination error for product set buy buttons ([#645](https://github.com/Shopify/buy-button-js/pull/645))
 - Tracker related updates:
@@ -32,16 +58,18 @@
   - Updated tracking info values and added addtional properties ([#645](https://github.com/Shopify/buy-button-js/pull/645))
 
 ### v1.0.1 (September 10, 2019)
+
 - Fix how ShopifyBuy.UI is set ([#643](https://github.com/Shopify/buy-button-js/pull/643))
 
 ### v1.0.0 (September 5, 2019)
+
 - Add support for automatic discounts in the `lineItem` component ([#640](https://github.com/Shopify/buy-button-js/pull/640))
   - Add `priceWithDiscounts` contents option and enable by default
   - Disable `price` contents option by default
   - Add `priceWithDiscounts` to the order array
   - Add `priceWithDiscounts`, `fullPrice`, `discount`, and `discountIcon` styles
   - Update default `price` styles to account for its position inside the `priceWithDiscounts` container
-- Add support for automatic discounts in the `cart` component ([#640](https://github.com/Shopify/buy-button-js/pull/640))  
+- Add support for automatic discounts in the `cart` component ([#640](https://github.com/Shopify/buy-button-js/pull/640))
   - Add `discounts` contents option and enable by default
   - Add `discount`, `discountText`, `discountIcon`, `discountAmount`, and `cartScrollWithDiscounts` styles
 - Update layout of `lineItem` component to position variant title below product title ([#640](https://github.com/Shopify/buy-button-js/pull/640))
@@ -55,6 +83,7 @@
   - Android: 4.4+
 
 ### v0.12.0 (August 15, 2019)
+
 - Bump various npm dependencies, notably the following major updates: ([#633](https://github.com/Shopify/buy-button-js/pull/633))
   - `babel/core` | `babel/cli` | `babel/runtime` : v7.x
   - `core-js`: v3.1.4
@@ -67,6 +96,7 @@
 - Fix missing double quotes around classes in options template ([#636](https://github.com/Shopify/buy-button-js/pull/636))
 
 ### v0.11.0 (March 29, 2019)
+
 - Bump `shopify-buy` dependency to v2.2.0.
 - Asserts `lineItemsSubtotalPrice` is exposed.
 - Add a `formattedLineItemsSubtotal` field to cart view model. The new field consists in a sum of all line items prices without any discount, taxes or shipping rates applications.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopify/buy-button-js",
-  "version": "2.1.3",
+  "version": "2.1.7",
   "browserslist": [
     "last 2 Chrome versions",
     "last 2 Firefox versions",
@@ -105,7 +105,7 @@
     "morphdom": "2.5.5",
     "mustache": "3.0.1",
     "node-sass": "4.12.0",
-    "shopify-buy": "2.10.0",
+    "shopify-buy": "2.11.0",
     "uglify-js": "3.6.0"
   }
 }

src/components/cart.js

@@ -7,6 +7,7 @@ import formatMoney from '../utils/money';
 import CartView from '../views/cart';
 import CartUpdater from '../updaters/cart';
 import {addClassToElement} from '../utils/element-class';
+import {removeTrapFocus} from '../utils/focus';
 
 export const NO_IMG_URL = '//sdks.shopifycdn.com/buy-button/latest/no-image.jpg';
 
@@ -98,8 +99,9 @@ export default class Cart extends Component {
         const targetSelection = discount.discountApplication.targetSelection;
         if (LINE_ITEM_TARGET_SELECTIONS.indexOf(targetSelection) > -1) {
           const discountAmount = discount.allocatedAmount.amount;
+          const discountDisplayText = discount.discountApplication.title || discount.discountApplication.code;
           discountAcc.totalDiscount += discountAmount;
-          discountAcc.discounts.push({discount: `${discount.discountApplication.title} (-${formatMoney(discountAmount, this.moneyFormat)})`});
+          discountAcc.discounts.push({discount: `${discountDisplayText} (-${formatMoney(discountAmount, this.moneyFormat)})`});
         }
         return discountAcc;
       }, {
@@ -112,9 +114,10 @@ export default class Cart extends Component {
       data.formattedPrice = formattedPrice;
 
       data.classes = this.classes;
+      data.text = this.config.lineItem.text;
       data.lineItemImage = this.imageForLineItem(data);
       data.variantTitle = data.variant.title === 'Default Title' ? '' : data.variant.title;
-      return acc + this.childTemplate.render({data}, (output) => `<div id="${lineItem.id}" class=${this.classes.lineItem.lineItem}>${output}</div>`);
+      return acc + this.childTemplate.render({data}, (output) => `<li id="${lineItem.id}" class=${this.classes.lineItem.lineItem}>${output}</li>`);
     }, '');
   }
 
@@ -133,6 +136,7 @@ export default class Cart extends Component {
       discounts: this.cartDiscounts,
       contents: this.options.contents,
       cartNote: this.cartNote,
+      cartNoteId: this.cartNoteId,
     });
   }
 
@@ -163,7 +167,8 @@ export default class Cart extends Component {
         }
 
         if (discountValue > 0) {
-          discountArr.push({text: discount.title, amount: `-${formatMoney(discountValue, this.moneyFormat)}`});
+          const discountDisplayText = discount.title || discount.code;
+          discountArr.push({text: discountDisplayText, amount: `-${formatMoney(discountValue, this.moneyFormat)}`});
         }
       }
       return discountArr;
@@ -185,6 +190,10 @@ export default class Cart extends Component {
     return this.model && this.model.note;
   }
 
+  get cartNoteId() {
+    return `CartNote-${Date.now()}`;
+  }
+
   get wrapperClass() {
     return this.isVisible ? 'is-active' : '';
   }
@@ -289,6 +298,7 @@ export default class Cart extends Component {
   close() {
     this.isVisible = false;
     this.view.render();
+    removeTrapFocus(this.view.wrapper);
   }
 
   /**
@@ -297,7 +307,7 @@ export default class Cart extends Component {
   open() {
     this.isVisible = true;
     this.view.render();
-    this.view.setFocus();
+    this.setFocus();
   }
 
   /**
@@ -308,7 +318,7 @@ export default class Cart extends Component {
     this.isVisible = visible || !this.isVisible;
     this.view.render();
     if (this.isVisible) {
-      this.view.setFocus();
+      this.setFocus();
     }
   }
 
@@ -424,7 +434,9 @@ export default class Cart extends Component {
         this.updateCache(this.model.lineItems);
         this.view.render();
         this.toggles.forEach((toggle) => toggle.view.render());
-        this.view.setFocus();
+        if (!openCart) {
+          this.setFocus();
+        }
         return checkout;
       });
     } else {
@@ -439,7 +451,9 @@ export default class Cart extends Component {
         this.updateCache(this.model.lineItems);
         this.view.render();
         this.toggles.forEach((toggle) => toggle.view.render());
-        this.view.setFocus();
+        if (!openCart) {
+          this.setFocus();
+        }
         return checkout;
       });
     }
@@ -475,4 +489,10 @@ export default class Cart extends Component {
       sku: null,
     };
   }
+
+  setFocus() {
+    setTimeout(() => {
+      this.view.setFocus();
+    }, 0);
+  }
 }

src/components/modal.js

@@ -44,6 +44,7 @@ export default class Modal extends Component {
     return Object.assign({}, this.globalConfig, {
       node: this.productWrapper,
       options: merge({}, this.config),
+      modalProduct: true,
     });
   }
 

src/components/product-set.js

@@ -225,6 +225,10 @@ export default class ProductSet extends Component {
       }),
     });
 
+    if (this.config.productSet.iframe === false) {
+      productConfig.node = this.node.querySelector(`.${this.classes.productSet.products}`);
+    }
+
     const promises = this.model.products.map((productModel) => {
       const product = new Product(productConfig, this.props);
       this.products.push(product);

src/components/product.js

@@ -82,6 +82,7 @@ export default class Product extends Component {
     this.selectedVariant = {};
     this.selectedOptions = {};
     this.selectedImage = null;
+    this.modalProduct = Boolean(config.modalProduct);
     this.updater = new ProductUpdater(this);
     this.view = new ProductView(this);
   }
@@ -186,7 +187,7 @@ export default class Product extends Component {
    * @return {String}
    */
   get formattedCompareAtPrice() {
-    if (!this.selectedVariant || !this.selectedVariant.compareAtPriceV2) {
+    if (!this.hasCompareAtPrice) {
       return '';
     }
     return formatMoney(this.selectedVariant.compareAtPriceV2.amount, this.globalConfig.moneyFormat);
@@ -252,7 +253,10 @@ export default class Product extends Component {
       quantityClass: this.quantityClass,
       priceClass: this.priceClass,
       formattedPrice: this.formattedPrice,
+      priceAccessibilityLabel: this.priceAccessibilityLabel,
+      hasCompareAtPrice: this.hasCompareAtPrice,
       formattedCompareAtPrice: this.formattedCompareAtPrice,
+      compareAtPriceAccessibilityLabel: this.compareAtPriceAccessibilityLabel,
       showUnitPrice: this.showUnitPrice,
       formattedUnitPrice: this.formattedUnitPrice,
       formattedUnitPriceBaseUnit: this.formattedUnitPriceBaseUnit,
@@ -274,7 +278,7 @@ export default class Product extends Component {
   }
 
   get buttonClass() {
-    const disabledClass = this.buttonEnabled ? '' : this.classes.disabled;
+    const disabledClass = this.buttonEnabled ? '' : this.classes.product.disabled;
     const quantityClass = this.options.contents.buttonWithQuantity ? this.classes.product.buttonBesideQty : '';
     return `${disabledClass} ${quantityClass}`;
   }
@@ -331,7 +335,7 @@ export default class Product extends Component {
   }
 
   get priceClass() {
-    return this.selectedVariant && this.selectedVariant.compareAtPriceV2 ? this.classes.product.loweredPrice : '';
+    return this.hasCompareAtPrice ? this.classes.product.loweredPrice : '';
   }
 
   get isButton() {
@@ -381,9 +385,11 @@ export default class Product extends Component {
       return '';
     }
 
-    return this.decoratedOptions.reduce((acc, option) => {
+    const uniqueId = Date.now();
+    return this.decoratedOptions.reduce((acc, option, index) => {
       const data = merge(option, this.options.viewData);
       data.classes = this.classes;
+      data.selectId = `Option-${uniqueId}-${index}`;
       data.onlyOption = (this.model.options.length === 1);
       return acc + this.childTemplate.render({data});
     }, '');
@@ -646,7 +652,7 @@ export default class Product extends Component {
       this.props.closeModal();
       this._userEvent('addVariantToCart');
       this.props.tracker.trackMethod(this.cart.addVariantToCart.bind(this), 'Update Cart', this.selectedVariantTrackingInfo)(this.selectedVariant, this.selectedQuantity);
-      if (this.iframe) {
+      if (!this.modalProduct) {
         this.props.setActiveEl(target);
       }
     } else if (this.options.buttonDestination === 'modal') {
@@ -841,4 +847,15 @@ export default class Product extends Component {
     return altText || this.model.title;
   }
 
+  get priceAccessibilityLabel() {
+    return this.hasCompareAtPrice ? this.options.text.salePriceAccessibilityLabel : this.options.text.regularPriceAccessibilityLabel;
+  }
+
+  get compareAtPriceAccessibilityLabel() {
+    return this.hasCompareAtPrice ? this.options.text.regularPriceAccessibilityLabel : '';
+  }
+
+  get hasCompareAtPrice() {
+    return Boolean(this.selectedVariant && this.selectedVariant.compareAtPriceV2);
+  }
 }

src/components/toggle.js

@@ -36,6 +36,7 @@ export default class CartToggle extends Component {
 
   toggleCart(evt) {
     evt.stopPropagation();
+    this.props.setActiveEl(this.view.node);
     this.props.cart.toggleVisibility();
   }
 }

src/defaults/components.js

@@ -82,6 +82,8 @@ const defaults = {
       unavailable: 'Unavailable',
       unitPriceAccessibilityLabel: 'Unit price',
       unitPriceAccessibilitySeparator: 'per',
+      regularPriceAccessibilityLabel: 'Regular price',
+      salePriceAccessibilityLabel: 'Sale price',
     },
   },
   modalProduct: {
@@ -237,6 +239,7 @@ const defaults = {
       currency: 'CAD',
       notice: 'Shipping and discount codes are added at checkout.',
       noteDescription: 'Special instructions for seller',
+      closeAccessibilityLabel: 'Close cart',
     },
   },
   lineItem: {
@@ -276,6 +279,11 @@ const defaults = {
       quantityIncrement: 'shopify-buy__quantity-increment',
       quantityDecrement: 'shopify-buy__quantity-decrement',
     },
+    text: {
+      quantityInputAccessibilityLabel: 'Quantity',
+      quantityDecrementAccessibilityLabel: 'Reduce item quantity by one',
+      quantityIncrementAccessibilityLabel: 'Increase item quantity by one',
+    },
   },
   toggle: {
     templates: toggleTemplates,

src/styles/embeds/sass/components/product.css

@@ -115,7 +115,7 @@
   font-size: 12px;
   text-decoration: line-through;
   padding-left: 5px;
-  opacity: 0.65;
+  opacity: 0.76;
 }
 
 .shopify-buy__product__unit-price {

src/styles/embeds/sass/components/select.css

@@ -4,7 +4,6 @@
   box-sizing: border-box;
   position: relative;
   background: var(--color-white);
-  overflow: hidden;
   vertical-align: bottom;
 }