From 8ea3be656ed772d24c78f7d6a44dd2f508e9f1ef Mon Sep 17 00:00:00 2001
From: "alex.saiannyi" <alexander.saiannyi@bigcommerce.com>
Date: Tue, 4 Aug 2020 18:50:54 +0300
Subject: [PATCH] BCTHEME154: fix issue with add product to cart on ie11

---
 CHANGELOG.md                               |  1 +
 assets/js/polyfills.js                     |  2 ++
 assets/js/theme/common/product-details.js  | 10 ++++++++--
 assets/js/theme/common/utils/ie-helpers.js |  3 +++
 package-lock.json                          |  7 ++++++-
 package.json                               |  1 +
 6 files changed, 21 insertions(+), 3 deletions(-)
 create mode 100644 assets/js/theme/common/utils/ie-helpers.js

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 41e73e6226..e5a25d406c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- Fixed failing to add product to cart on IE11 [#1762](https://github.com/bigcommerce/cornerstone/pull/1762)
 
 ## 4.9.0 (07-28-2020)
 - Added correct alt text on image change in product view. [#1747](https://github.com/bigcommerce/cornerstone/pull/1747)
diff --git a/assets/js/polyfills.js b/assets/js/polyfills.js
index e10f2ce49f..bc90531c83 100644
--- a/assets/js/polyfills.js
+++ b/assets/js/polyfills.js
@@ -3,6 +3,8 @@ import 'regenerator-runtime/runtime';
 import 'whatwg-fetch';
 import objectFitImages from 'object-fit-images';
 
+require('formdata-polyfill');
+
 document.addEventListener('DOMContentLoaded', () => {
     objectFitImages();
 });
diff --git a/assets/js/theme/common/product-details.js b/assets/js/theme/common/product-details.js
index 4caeda6337..775ba4125c 100644
--- a/assets/js/theme/common/product-details.js
+++ b/assets/js/theme/common/product-details.js
@@ -6,6 +6,7 @@ import modalFactory, { showAlertModal } from '../global/modal';
 import _ from 'lodash';
 import Wishlist from '../wishlist';
 import { normalizeFormData } from './utils/api';
+import { isBrowserIE, convertIntoArray } from './utils/ie-helpers';
 
 export default class ProductDetails {
     constructor($scope, context, productAttributesData = {}) {
@@ -108,15 +109,20 @@ export default class ProductDetails {
             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 = checked.labels[0].innerText;
+                        const label = isBrowserIE ? getSelectedOptionLabel().innerText.trim() : checked.labels[0].innerText;
                         if (label) {
                             options.push(`${optionTitle}:${label}`);
                         }
                     }
 
                     if (type === 'swatch') {
-                        const label = checked.labels[0].children[0];
+                        const label = isBrowserIE ? getSelectedOptionLabel().children[0] : checked.labels[0].children[0];
                         if (label) {
                             options.push(`${optionTitle}:${label.title}`);
                         }
diff --git a/assets/js/theme/common/utils/ie-helpers.js b/assets/js/theme/common/utils/ie-helpers.js
new file mode 100644
index 0000000000..c65b0c1275
--- /dev/null
+++ b/assets/js/theme/common/utils/ie-helpers.js
@@ -0,0 +1,3 @@
+export const isBrowserIE = navigator.userAgent.includes('Trident');
+
+export const convertIntoArray = collection => Array.prototype.slice.call(collection);
diff --git a/package-lock.json b/package-lock.json
index 56ef3608f2..8973010430 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6019,6 +6019,11 @@
         "mime-types": "^2.1.12"
       }
     },
+    "formdata-polyfill": {
+      "version": "3.0.20",
+      "resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-3.0.20.tgz",
+      "integrity": "sha512-TAaxIEwTBdoH1TWndtUH1T0/GisUHwmOKcV5hjkR/iTatHBJSOHb563FP86Lra5nXo3iNdhK7HPwMl5Ihg71pg=="
+    },
     "forwarded": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
@@ -10621,7 +10626,7 @@
       }
     },
     "jstree": {
-      "version": "github:vakata/jstree#308b85722d86294f1504eca2cec475e6f73b3e13",
+      "version": "github:vakata/jstree#19bad17697386873b8643e89e1c157238a9dc3f4",
       "from": "github:vakata/jstree",
       "requires": {
         "jquery": ">=1.9.1"
diff --git a/package.json b/package.json
index 266eddfdf2..3e35fbca73 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "creditcards": "^3.0.1",
     "easyzoom": "^2.5.3",
     "focus-within-polyfill": "^5.0.9",
+    "formdata-polyfill": "^3.0.20",
     "foundation-sites": "^5.5.3",
     "jquery": "^3.5.1",
     "jquery.tabbable": "^1.0.1",