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;
 

packages/web/src/hooks/useTrialStatus.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 { GET_TRIAL_STATUS } from 'graphql/queries/get-trial-status.ee';
@@ -48,7 +50,23 @@ function getFeedbackPayload(date: DateTime) {
 
 export default function useTrialStatus(): UseTrialStatusReturn {
   const formatMessage = useFormatMessage();
-  const { data, loading } = useQuery(GET_TRIAL_STATUS);
+  const location = useLocation();
+  const state = location.state as { checkoutCompleted: boolean };
+  const checkoutCompleted = state?.checkoutCompleted;
+  const { data, loading, startPolling, stopPolling } = useQuery(GET_TRIAL_STATUS);
+  const hasTrial = !!data?.getTrialStatus?.expireAt;
+
+  React.useEffect(function pollDataUntilTrialEnds() {
+    if (checkoutCompleted && hasTrial) {
+      startPolling(1000);
+    }
+  }, [checkoutCompleted, hasTrial, startPolling]);
+
+  React.useEffect(function stopPollingWhenTrialEnds() {
+    if (checkoutCompleted && !hasTrial) {
+      stopPolling();
+    }
+  }, [checkoutCompleted, hasTrial, stopPolling]);
 
   if (loading || !data.getTrialStatus) return null;