feat: show completed checkout alert

packages/web/src/hooks/useBillingAndUsageData.ee.ts

@@ -1,4 +1,6 @@
+import * as React from 'react';
 import { useQuery } from '@apollo/client';
+import { useLocation } from 'react-router-dom';
 import { DateTime } from 'luxon';
 import { TSubscription } from '@automatisch/types';
 
@@ -30,7 +32,23 @@ type UseBillingAndUsageDataReturn = {
 } | null;
 
 export default function useBillingAndUsageData(): UseBillingAndUsageDataReturn {
-  const { data, loading } = useQuery(GET_BILLING_AND_USAGE);
+  const location = useLocation();
+  const state = location.state as { checkoutCompleted: boolean };
+  const { data, loading, startPolling, stopPolling } = useQuery(GET_BILLING_AND_USAGE);
+  const checkoutCompleted = state?.checkoutCompleted;
+  const hasSubscription = !!data?.getBillingAndUsage?.subscription?.status;
+
+  React.useEffect(function pollDataUntilSubscriptionIsCreated() {
+    if (checkoutCompleted && !hasSubscription) {
+      startPolling(1000);
+    }
+  }, [checkoutCompleted, hasSubscription, startPolling]);
+
+  React.useEffect(function stopPollingWhenSubscriptionIsCreated() {
+    if (checkoutCompleted && hasSubscription) {
+      stopPolling();
+    }
+  }, [checkoutCompleted, hasSubscription, stopPolling]);
 
   if (loading) return null;