From 78b6fd1adfebc5d2c9d2ccf780ad206ed9dd5df1 Mon Sep 17 00:00:00 2001
From: Ahmad Abdolsaheb <ahmad.abdolsaheb@gmail.com>
Date: Thu, 17 Oct 2019 15:51:01 +0300
Subject: [PATCH] fix: load stripe conditionally (#37365)

---
 client/gatsby-ssr.js                          |  6 ----
 client/package.json                           |  1 +
 .../Donation/components/DonateModal.js        | 36 ++++++++++++-------
 client/src/pages/donate.js                    | 10 +++---
 client/src/utils/scriptLoaders.js             | 19 ++++++++++
 package.json                                  |  1 +
 6 files changed, 48 insertions(+), 25 deletions(-)
 create mode 100644 client/src/utils/scriptLoaders.js

diff --git a/client/gatsby-ssr.js b/client/gatsby-ssr.js
index cfdb4f187a..9306aa55aa 100644
--- a/client/gatsby-ssr.js
+++ b/client/gatsby-ssr.js
@@ -38,12 +38,6 @@ export const onRenderBody = ({ setHeadComponents, setPostBodyComponents }) => {
         `
         }}
         key='gtag-dataLayer'
-      />,
-      <script
-        async={true}
-        id='stripe-js'
-        key='stripe-js'
-        src='https://js.stripe.com/v3/'
       />
     ].filter(Boolean)
   );
diff --git a/client/package.json b/client/package.json
index d7ad87f584..43d2dc3751 100644
--- a/client/package.json
+++ b/client/package.json
@@ -90,6 +90,7 @@
     "format:src": "prettier-eslint --write --trailing-comma none --single-quote './src/**/*.js'",
     "format:utils": "prettier-eslint --write --trailing-comma none --single-quote './utils/**/*.js'",
     "format": "npm run format:gatsby && npm run format:src && npm run format:utils",
+    "serve": "gatsby serve",
     "test": "jest"
   },
   "devDependencies": {
diff --git a/client/src/components/Donation/components/DonateModal.js b/client/src/components/Donation/components/DonateModal.js
index 109a384f00..b39ae0f02c 100644
--- a/client/src/components/Donation/components/DonateModal.js
+++ b/client/src/components/Donation/components/DonateModal.js
@@ -14,6 +14,7 @@ import {
   closeDonationModal,
   isDonationModalOpenSelector
 } from '../../../redux';
+import { stripeScriptLoader } from '../../../utils/scriptLoaders';
 
 import PoweredByStripe from './poweredByStripe';
 import DonateText from './DonateText';
@@ -50,20 +51,29 @@ class DonateModal extends Component {
   }
   componentDidMount() {
     if (window.Stripe) {
-      /* eslint-disable react/no-did-mount-set-state */
-      this.setState(state => ({
-        ...state,
-        stripe: window.Stripe(stripePublicKey)
-      }));
+      this.handleStripeLoad();
+    } else if (document.querySelector('#stripe-js')) {
+      document
+        .querySelector('#stripe-js')
+        .addEventListener('load', this.handleStripeLoad);
     } else {
-      document.querySelector('#stripe-js').addEventListener('load', () => {
-        // Create Stripe instance once Stripe.js loads
-        console.info('stripe has loaded');
-        this.setState(state => ({
-          ...state,
-          stripe: window.Stripe(stripePublicKey)
-        }));
-      });
+      stripeScriptLoader(this.handleStripeLoad);
+    }
+  }
+
+  handleStripeLoad() {
+    // Create Stripe instance once Stripe.js loads
+    console.info('stripe has loaded');
+    this.setState(state => ({
+      ...state,
+      stripe: window.Stripe(stripePublicKey)
+    }));
+  }
+
+  componentWillUnmount() {
+    const stripeMountPoint = document.querySelector('#stripe-js');
+    if (stripeMountPoint) {
+      stripeMountPoint.removeEventListener('load', this.handleStripeLoad);
     }
   }
 
diff --git a/client/src/pages/donate.js b/client/src/pages/donate.js
index 5c89810648..31fa475ef1 100644
--- a/client/src/pages/donate.js
+++ b/client/src/pages/donate.js
@@ -13,6 +13,7 @@ import DonateForm from '../components/Donation/components/DonateForm';
 import DonateText from '../components/Donation/components/DonateText';
 import PoweredByStripe from '../components/Donation/components/poweredByStripe';
 import { signInLoadingSelector, isSignedInSelector, hardGoTo } from '../redux';
+import { stripeScriptLoader } from '../utils/scriptLoaders';
 
 const mapStateToProps = createSelector(
   signInLoadingSelector,
@@ -45,21 +46,18 @@ export class DonatePage extends Component {
   }
   componentDidMount() {
     if (window.Stripe) {
-      /* eslint-disable react/no-did-mount-set-state */
-      this.setState(state => ({
-        ...state,
-        stripe: window.Stripe(stripePublicKey)
-      }));
+      this.handleStripeLoad();
     } else if (document.querySelector('#stripe-js')) {
       document
         .querySelector('#stripe-js')
         .addEventListener('load', this.handleStripeLoad);
+    } else {
+      stripeScriptLoader(this.handleStripeLoad);
     }
   }
 
   componentWillUnmount() {
     const stripeMountPoint = document.querySelector('#stripe-js');
-
     if (stripeMountPoint) {
       stripeMountPoint.removeEventListener('load', this.handleStripeLoad);
     }
diff --git a/client/src/utils/scriptLoaders.js b/client/src/utils/scriptLoaders.js
new file mode 100644
index 0000000000..bf59520167
--- /dev/null
+++ b/client/src/utils/scriptLoaders.js
@@ -0,0 +1,19 @@
+export const scriptLoader = (id, key, async, src, onload) => {
+  var s = document.createElement('script');
+  s.type = 'text/javascript';
+  s.id = id;
+  s.key = key;
+  s.async = async;
+  s.onload = onload;
+  s.src = src;
+  document.getElementsByTagName('head')[0].appendChild(s);
+};
+
+export const stripeScriptLoader = onload =>
+  scriptLoader(
+    'stripe-js',
+    'stripe-js',
+    false,
+    'https://js.stripe.com/v3/',
+    onload
+  );
diff --git a/package.json b/package.json
index e443d523fb..32b7115fb4 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
     "seed": "npm-run-all -p seed:*",
     "seed:auth-user": "cross-env DEBUG=fcc:* node ./tools/scripts/seed/seedAuthUser",
     "seed:challenges": "cross-env DEBUG=fcc:* node ./tools/scripts/seed/seedChallenges",
+    "serve:client": "cd ./client && npm run serve",
     "test": "npm-run-all -p test:*",
     "test:client": "cd ./client && npm test && cd ../",
     "test:curriculum": "cd ./curriculum && npm test && cd ../",