From 2446f7a63ead76e57d863cb2c3d9abbc649de9b1 Mon Sep 17 00:00:00 2001
From: yurytut1993 <yurii.zusik@bigcommerce.com>
Date: Thu, 29 Jun 2023 16:13:26 +0300
Subject: [PATCH] fix(storefront): BCTHEME-1378 fix add product to cart on
 iphone x (iphone version 11)

---
 CHANGELOG.md               |  1 +
 assets/js/polyfills.js     |  3 ---
 templates/layout/base.html | 17 +++++++++++++++++
 webpack.common.js          |  1 +
 4 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 18f39718dd..4f3dcca447 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Bump Stencil utils to 6.15.1 [#2365][https://github.com/bigcommerce/cornerstone/pull/2365]
 - Added ACH payment method section to My Account -> Payment Methods page [#2362](https://github.com/bigcommerce/cornerstone/pull/2362)
 - Remove data_tag_enabled check from everywhere [#2369][https://github.com/bigcommerce/cornerstone/pull/2369]
+- Fix add product to cart on iphone x (iphone version 11) [#2370][https://github.com/bigcommerce/cornerstone/pull/2370]
 
 ## 6.11.0 (05-24-2023)
 - Reverted fix for sold-out badge appearance [#2354](https://github.com/bigcommerce/cornerstone/pull/2354)
diff --git a/assets/js/polyfills.js b/assets/js/polyfills.js
index bc90531c83..938413ce37 100644
--- a/assets/js/polyfills.js
+++ b/assets/js/polyfills.js
@@ -1,10 +1,7 @@
 import 'core-js/stable';
 import 'regenerator-runtime/runtime';
-import 'whatwg-fetch';
 import objectFitImages from 'object-fit-images';
 
-require('formdata-polyfill');
-
 document.addEventListener('DOMContentLoaded', () => {
     objectFitImages();
 });
diff --git a/templates/layout/base.html b/templates/layout/base.html
index 2fdd2b5c31..36ec2da860 100644
--- a/templates/layout/base.html
+++ b/templates/layout/base.html
@@ -60,6 +60,23 @@
             {{!-- Exported in app.js --}}
             function onThemeBundleMain() {
                 window.stencilBootstrap("{{page_type}}", {{jsContext}}).load();
+
+                function browserSupportsFormData() {
+                    return typeof FormData !== 'undefined' 
+                        && !!FormData.prototype.keys;
+                }
+                function loadFormDataPolyfillScript(src) {
+                    var formDataPolyfillScript = document.createElement('script');
+                    formDataPolyfillScript.src = src;
+                    formDataPolyfillScript.onerror = function () {
+                        console.error('Failed to load formData polyfill script ' + src);
+                    };
+                    document.body.appendChild(formDataPolyfillScript);
+                }
+
+                if (!browserSupportsFormData()) {
+                    loadFormDataPolyfillScript('{{cdn 'assets/dist/theme-bundle.polyfill_form_data.js'}}');
+                }
             }
         </script>
         <script async defer src="{{cdn 'assets/dist/theme-bundle.main.js' resourceHint='preload' as='script'}}" onload="onThemeBundleMain()"></script>
diff --git a/webpack.common.js b/webpack.common.js
index 47465fc366..6e37fe7da8 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -13,6 +13,7 @@ module.exports = {
         head_async: ['lazysizes'],
         font: './assets/js/theme/common/font.js',
         polyfills: './assets/js/polyfills.js',
+        polyfill_form_data: ['formdata-polyfill'],
     },
     module: {
         rules: [