feat: add checkout process

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

@@ -0,0 +1,72 @@
+import * as React from 'react';
+
+import useCloud from 'hooks/useCloud';
+import usePaddleInfo from 'hooks/usePaddleInfo.ee';
+
+declare global {
+  interface Window {
+    Paddle: any;
+  }
+}
+
+export type PaddleContextParams = {
+  loaded: boolean;
+};
+
+export const PaddleContext =
+  React.createContext<PaddleContextParams>({
+    loaded: false,
+  });
+
+type PaddleProviderProps = {
+  children: React.ReactNode;
+};
+
+export const PaddleProvider = (
+  props: PaddleProviderProps
+): React.ReactElement => {
+  const { children } = props;
+  const isCloud = useCloud();
+  const { sandbox, vendorId } = usePaddleInfo();
+  const [loaded, setLoaded] = React.useState(false);
+
+  const value = React.useMemo(() => {
+    return {
+      loaded,
+    };
+  }, [loaded]);
+
+  React.useEffect(function loadPaddleScript() {
+    if (!isCloud) 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;
+
+    if (s.parentNode) {
+      s.parentNode.insertBefore(g, s);
+    }
+
+    g.onload = function () {
+      setLoaded(true);
+    }
+  }, [isCloud]);
+
+  React.useEffect(function initPaddleScript() {
+    if (!loaded || !vendorId) return;
+
+    if (sandbox) {
+      window.Paddle.Environment.set('sandbox');
+    }
+
+    window.Paddle.Setup({ vendor: vendorId });
+  }, [loaded, sandbox, vendorId])
+
+  return (
+    <PaddleContext.Provider value={value}>
+      {children}
+    </PaddleContext.Provider>
+  );
+};