Merge pull request #1046 from automatisch/move-paddle-provider-deeper-in-app-tree

refactor(paddle): move script injection closer to checkout

packages/web/src/contexts/Paddle.ee.tsx

@@ -39,11 +39,19 @@ export const PaddleProvider = (
   React.useEffect(function loadPaddleScript() {
     if (!isCloud) return;
 
+    const isInjected = document.getElementById('paddle-js');
+
+    if (isInjected) {
+      setLoaded(true);
+      return;
+    }
+
     const g = document.createElement('script')
     const s = document.getElementsByTagName('script')[0];
     g.src = 'https://cdn.paddle.com/paddle/paddle.js';
     g.defer = true;
     g.async = true;
+    g.id = 'paddle-js';
 
     if (s.parentNode) {
       s.parentNode.insertBefore(g, s);

packages/web/src/index.tsx

@@ -6,7 +6,6 @@ import ApolloProvider from 'components/ApolloProvider';
 import SnackbarProvider from 'components/SnackbarProvider';
 import { AuthenticationProvider } from 'contexts/Authentication';
 import { AutomatischInfoProvider } from 'contexts/AutomatischInfo';
-import { PaddleProvider } from 'contexts/Paddle.ee';
 import Router from 'components/Router';
 import LiveChat from 'components/LiveChat/index.ee';
 import routes from 'routes';
@@ -19,13 +18,11 @@ ReactDOM.render(
         <ApolloProvider>
           <AutomatischInfoProvider>
             <IntlProvider>
-              <PaddleProvider>
-                <ThemeProvider>
-                  {routes}
+              <ThemeProvider>
+                {routes}
 
-                  <LiveChat />
-                </ThemeProvider>
-              </PaddleProvider>
+                <LiveChat />
+              </ThemeProvider>
             </IntlProvider>
           </AutomatischInfoProvider>
         </ApolloProvider>

packages/web/src/settingsRoutes.tsx

@@ -1,5 +1,6 @@
 import { Route, Navigate } from 'react-router-dom';
 import SettingsLayout from 'components/SettingsLayout';
+import { PaddleProvider } from 'contexts/Paddle.ee';
 import ProfileSettings from 'pages/ProfileSettings';
 import BillingAndUsageSettings from 'pages/BillingAndUsageSettings/index.ee';
 import PlanUpgrade from 'pages/PlanUpgrade/index.ee';
@@ -30,7 +31,9 @@ export default (
       path={URLS.SETTINGS_PLAN_UPGRADE}
       element={
         <SettingsLayout>
-          <PlanUpgrade />
+          <PaddleProvider>
+            <PlanUpgrade />
+          </PaddleProvider>
         </SettingsLayout>
       }
     />