feat: show completed checkout alert

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

@@ -1,7 +1,10 @@
 import * as React from 'react';
+import { useNavigate } from 'react-router-dom';
 
+import * as URLS from 'config/urls';
 import useCloud from 'hooks/useCloud';
 import usePaddleInfo from 'hooks/usePaddleInfo.ee';
+import apolloClient from 'graphql/client';
 
 declare global {
   interface Window {
@@ -27,9 +30,32 @@ export const PaddleProvider = (
 ): React.ReactElement => {
   const { children } = props;
   const isCloud = useCloud();
+  const navigate = useNavigate();
   const { sandbox, vendorId } = usePaddleInfo();
   const [loaded, setLoaded] = React.useState(false);
 
+  const paddleEventHandler = React.useCallback(async (payload) => {
+    const { event, eventData } = payload;
+    if (event === 'Checkout.Close') {
+      const completed = eventData.checkout?.completed;
+
+      if (completed) {
+        // Paddle has side effects in the background,
+        // so we need to refetch the relevant queries
+        await apolloClient.refetchQueries({
+          include: ['GetTrialStatus', 'GetBillingAndUsage'],
+        });
+
+        navigate(
+          URLS.SETTINGS_BILLING_AND_USAGE,
+          {
+            state: { checkoutCompleted: true }
+          }
+        );
+      }
+    }
+  }, [navigate]);
+
   const value = React.useMemo(() => {
     return {
       loaded,
@@ -69,8 +95,11 @@ export const PaddleProvider = (
       window.Paddle.Environment.set('sandbox');
     }
 
-    window.Paddle.Setup({ vendor: vendorId });
-  }, [loaded, sandbox, vendorId])
+    window.Paddle.Setup({
+      vendor: vendorId,
+      eventCallback: paddleEventHandler,
+    });
+  }, [loaded, sandbox, vendorId, paddleEventHandler])
 
   return (
     <PaddleContext.Provider value={value}>