From e611ed02210b0d787ca81c2fc923364397563d73 Mon Sep 17 00:00:00 2001
From: Vasilica Olariu <olariu.vasilica@gmail.com>
Date: Thu, 27 Oct 2022 13:32:04 +0300
Subject: [PATCH 1/2] TCA-602 - defer loading stripe.js until actually needed

---
 .../intake-forms/review/Review.tsx            | 24 ++++++++++++-------
 src/routes/Review/index.jsx                   | 12 ++++++----
 src/routes/ReviewLegacy/index.jsx             | 12 ++++++----
 3 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/src-ts/tools/work/work-self-service/intake-forms/review/Review.tsx b/src-ts/tools/work/work-self-service/intake-forms/review/Review.tsx
index 553089e28..cfeb932fa 100644
--- a/src-ts/tools/work/work-self-service/intake-forms/review/Review.tsx
+++ b/src-ts/tools/work/work-self-service/intake-forms/review/Review.tsx
@@ -1,5 +1,6 @@
 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'
+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 +270,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
diff --git a/src/routes/Review/index.jsx b/src/routes/Review/index.jsx
index aaf33bfb9..6e1793fb2 100644
--- a/src/routes/Review/index.jsx
+++ b/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} />
diff --git a/src/routes/ReviewLegacy/index.jsx b/src/routes/ReviewLegacy/index.jsx
index 1496059df..3170a275d 100644
--- a/src/routes/ReviewLegacy/index.jsx
+++ b/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} />

From 08fc4a8508e0079522185d2cbaf3d06d19658229 Mon Sep 17 00:00:00 2001
From: Vasilica Olariu <olariu.vasilica@gmail.com>
Date: Thu, 27 Oct 2022 13:50:33 +0300
Subject: [PATCH 2/2] lint fixes

---
 .../work/work-self-service/intake-forms/review/Review.tsx    | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src-ts/tools/work/work-self-service/intake-forms/review/Review.tsx b/src-ts/tools/work/work-self-service/intake-forms/review/Review.tsx
index cfeb932fa..64336985c 100644
--- a/src-ts/tools/work/work-self-service/intake-forms/review/Review.tsx
+++ b/src-ts/tools/work/work-self-service/intake-forms/review/Review.tsx
@@ -1,5 +1,8 @@
 import { CardNumberElement, Elements, useElements, useStripe } from '@stripe/react-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'
@@ -270,7 +273,7 @@ const Review: FC = () => {
     )
 }
 
-let stripePromise: Promise<Stripe | null | undefined>;
+let stripePromise: Promise<Stripe | null | undefined>
 
 const output: () => JSX.Element = () => {
     if (!stripePromise) {