TCA-602 - defer loading stripe.js until actually needed -> TCA-586

src-ts/tools/work/work-self-service/intake-forms/review/Review.tsx

@@ -1,5 +1,9 @@
 import { CardNumberElement, Elements, useElements, useStripe } from '@stripe/react-stripe-js'
-import { loadStripe, Stripe, StripeElements } from '@stripe/stripe-js'
+import { Stripe, StripeElements } from '@stripe/stripe-js'
+// we need to load this from submodule instead of root
+// @see: https://www.npmjs.com/package/@stripe/stripe-js # Importing loadStripe without side effects
+// tslint:disable-next-line:no-submodule-imports
+import { loadStripe } from '@stripe/stripe-js/pure'
 import { Dispatch, FC, SetStateAction, useContext, useEffect, useState } from 'react'
 import { toastr } from 'react-redux-toastr'
 import { NavigateFunction, useNavigate, useParams } from 'react-router-dom'
@@ -269,14 +273,19 @@ const Review: FC = () => {
     )
 }
 
-const stripePromise: Promise<Stripe | null> = loadStripe(EnvironmentConfig.STRIPE.API_KEY, {
-    apiVersion: EnvironmentConfig.STRIPE.API_VERSION,
-})
+let stripePromise: Promise<Stripe | null | undefined>
 
-const output: () => JSX.Element = () => (
-    <Elements stripe={stripePromise}>
-        <Review />
-    </Elements>
-)
+const output: () => JSX.Element = () => {
+    if (!stripePromise) {
+        stripePromise = loadStripe(EnvironmentConfig.STRIPE.API_KEY, {
+            apiVersion: EnvironmentConfig.STRIPE.API_VERSION,
+        })
+    }
+    return (
+        <Elements stripe={stripePromise as Promise<Stripe>}>
+            <Review />
+        </Elements>
+    )
+}
 
 export default output

src/routes/Review/index.jsx

@@ -1,6 +1,6 @@
 import { useNavigate } from "react-router-dom";
 import { Elements, useElements, useStripe } from "@stripe/react-stripe-js";
-import { loadStripe } from "@stripe/stripe-js";
+import { loadStripe } from "@stripe/stripe-js/pure";
 import { toastr } from "react-redux-toastr";
 import React, { useEffect, useState } from "react";
 import { connect, useDispatch, useSelector } from "react-redux";
@@ -40,9 +40,7 @@ import {
 import AboutYourProject from "./components/AboutYourProject";
 import styles from "./styles.module.scss";
 
-const stripePromise = loadStripe(config.STRIPE.API_KEY, {
-  apiVersion: config.STRIPE.API_VERSION,
-});
+let stripePromise;
 
 /**
  * Review Page
@@ -303,6 +301,12 @@ const Review = ({
 };
 
 const ReviewWrapper = (props) => {
+  if (!stripePromise) {
+    stripePromise = loadStripe(config.STRIPE.API_KEY, {
+      apiVersion: config.STRIPE.API_VERSION,
+    });
+  }
+
   return (
     <Elements stripe={stripePromise}>
       <Review {...props} />

src/routes/ReviewLegacy/index.jsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import { connect, useDispatch, useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import { toastr } from "react-redux-toastr";
-import { loadStripe } from "@stripe/stripe-js";
+import { loadStripe } from "@stripe/stripe-js/pure";
 import { Elements, useElements, useStripe } from "@stripe/react-stripe-js";
 import _ from "lodash";
 
@@ -43,9 +43,7 @@ import { Breadcrumb, OrderContractModal } from "../../../src-ts";
 import AboutYourProject from "../../routes/Review/components/AboutYourProject";
 import PageH2 from "../../components/PageElements/PageH2";
 
-const stripePromise = loadStripe(config.STRIPE.API_KEY, {
-  apiVersion: config.STRIPE.API_VERSION,
-});
+let stripePromise;
 
 /**
  *  Review Legacy Page
@@ -308,6 +306,12 @@ const ReviewLegacy = ({
 };
 
 const ReviewWrapper = (props) => {
+  if (!stripePromise) {
+    stripePromise = loadStripe(config.STRIPE.API_KEY, {
+      apiVersion: config.STRIPE.API_VERSION,
+    });
+  }
+
   return (
     <Elements stripe={stripePromise}>
       <ReviewLegacy {...props} />