refactor: rewrite useSubscription with RQ and use it in UsageDataInformation

packages/web/src/components/UsageDataInformation/index.ee.jsx

@@ -18,11 +18,15 @@ import * as URLS from 'config/urls';
 import useBillingAndUsageData from 'hooks/useBillingAndUsageData.ee';
 import useFormatMessage from 'hooks/useFormatMessage';
 import usePlanAndUsage from 'hooks/usePlanAndUsage';
+import useSubscription from 'hooks/useSubscription.ee';
+import useUserTrial from 'hooks/useUserTrial.ee';
+import { useQueryClient } from '@tanstack/react-query';
+import useCurrentUser from 'hooks/useCurrentUser';
 
 const capitalize = (str) => str[0].toUpperCase() + str.slice(1, str.length);
 
 function BillingCard(props) {
-  const { name, title = '', action } = props;
+  const { name, title = '', action, text } = props;
 
   return (
     <Card
@@ -45,50 +49,94 @@ function BillingCard(props) {
       </CardContent>
 
       <CardActions>
-        <Action action={action} />
+        <Action action={action} text={text} />
       </CardActions>
     </Card>
   );
 }
 
 function Action(props) {
-  const { action } = props;
+  const { action, text } = props;
 
   if (!action) return <React.Fragment />;
 
-  const { text, type } = action;
-
-  if (type === 'link') {
-    if (action.src.startsWith('http')) {
-      return (
-        <Button size="small" href={action.src} target="_blank">
-          {text}
-        </Button>
-      );
-    } else {
-      return (
-        <Button size="small" component={Link} to={action.src}>
-          {text}
-        </Button>
-      );
-    }
-  }
-
-  if (type === 'text') {
+  if (action.startsWith('http')) {
     return (
-      <Typography variant="subtitle2" pb={1}>
+      <Button size="small" href={action.src} target="_blank">
         {text}
-      </Typography>
+      </Button>
+    );
+  } else if (action.startsWith('/')) {
+    return (
+      <Button size="small" component={Link} to={action.src}>
+        {text}
+      </Button>
     );
   }
 
-  return <React.Fragment />;
+  return (
+    <Typography variant="subtitle2" pb={1}>
+      {text}
+    </Typography>
+  );
 }
+
 export default function UsageDataInformation() {
   const formatMessage = useFormatMessage();
   const billingAndUsageData = useBillingAndUsageData();
+  const queryClient = useQueryClient();
   const { data } = usePlanAndUsage();
   const planAndUsage = data?.data;
+  const { data: currentUser } = useCurrentUser();
+  const currentUserId = currentUser?.data?.id;
+  const trial = useUserTrial();
+  const subscriptionData = useSubscription();
+  const subscription = subscriptionData?.data;
+  let billingInfo;
+
+  React.useEffect(() => {
+    queryClient.invalidateQueries({
+      queryKey: ['planAndUsage', currentUserId],
+    });
+  }, [subscription, queryClient, currentUserId]);
+
+  if (trial.hasTrial) {
+    billingInfo = {
+      monthlyQuota: {
+        title: formatMessage('usageDataInformation.freeTrial'),
+        action: '/settings/billing/upgrade',
+        text: 'Upgrade plan',
+      },
+      nextBillAmount: {
+        title: '---',
+        action: null,
+        text: null,
+      },
+      nextBillDate: {
+        title: '---',
+        action: null,
+        text: null,
+      },
+    };
+  } else {
+    billingInfo = {
+      monthlyQuota: {
+        title: planAndUsage?.plan?.limit,
+        action: subscription?.cancelUrl,
+        text: formatMessage('usageDataInformation.cancelPlan'),
+      },
+      nextBillAmount: {
+        title: `€${subscription?.nextBillAmount}`,
+        action: subscription?.updateUrl,
+        text: formatMessage('usageDataInformation.updatePaymentMethod'),
+      },
+      nextBillDate: {
+        title: subscription?.nextBillDate,
+        action: formatMessage('usageDataInformation.monthlyPayment'),
+        text: formatMessage('usageDataInformation.monthlyPayment'),
+      },
+    };
+  }
 
   return (
     <React.Fragment>
@@ -106,11 +154,8 @@ export default function UsageDataInformation() {
               {formatMessage('usageDataInformation.subscriptionPlan')}
             </Typography>
 
-            {billingAndUsageData?.subscription?.status && (
-              <Chip
-                label={capitalize(billingAndUsageData?.subscription?.status)}
-                color="success"
-              />
+            {subscription?.status && (
+              <Chip label={capitalize(subscription?.status)} color="success" />
             )}
           </Box>
 
@@ -127,26 +172,27 @@ export default function UsageDataInformation() {
             <Grid item xs={12} md={4}>
               <BillingCard
                 name={formatMessage('usageDataInformation.monthlyQuota')}
-                title={billingAndUsageData?.subscription?.monthlyQuota.title}
-                action={billingAndUsageData?.subscription?.monthlyQuota.action}
+                title={billingInfo.monthlyQuota.title}
+                action={billingInfo.monthlyQuota.action}
+                text={billingInfo.monthlyQuota.text}
               />
             </Grid>
 
             <Grid item xs={12} md={4}>
               <BillingCard
                 name={formatMessage('usageDataInformation.nextBillAmount')}
-                title={billingAndUsageData?.subscription?.nextBillAmount.title}
-                action={
-                  billingAndUsageData?.subscription?.nextBillAmount.action
-                }
+                title={billingInfo.nextBillAmount.title}
+                action={billingInfo.nextBillAmount.action}
+                text={billingInfo.nextBillAmount.text}
               />
             </Grid>
 
             <Grid item xs={12} md={4}>
               <BillingCard
                 name={formatMessage('usageDataInformation.nextBillDate')}
-                title={billingAndUsageData?.subscription?.nextBillDate.title}
-                action={billingAndUsageData?.subscription?.nextBillDate.action}
+                title={billingInfo.nextBillDate.title}
+                action={billingInfo.nextBillDate.action}
+                text={billingInfo.nextBillDate.text}
               />
             </Grid>
           </Grid>
@@ -193,7 +239,7 @@ export default function UsageDataInformation() {
           </Box>
 
           {/* free plan has `null` status so that we can show the upgrade button */}
-          {billingAndUsageData?.subscription?.status === null && (
+          {subscription?.status === null && (
             <Button
               component={Link}
               to={URLS.SETTINGS_PLAN_UPGRADE}

packages/web/src/hooks/usePlanAndUsage.js

@@ -1,21 +1,14 @@
 import { useQuery } from '@tanstack/react-query';
 
 import api from 'helpers/api';
-import useCurrentUser from './useCurrentUser';
-
-export default function usePlanAndUsage() {
-  const { data } = useCurrentUser();
-  const currentUserId = data?.data?.id;
 
+export default function usePlanAndUsage(userId) {
   const query = useQuery({
-    queryKey: ['planAndUsage', currentUserId],
+    queryKey: ['planAndUsage', userId],
     queryFn: async ({ signal }) => {
-      const { data } = await api.get(
-        `/v1/users/${currentUserId}/plan-and-usage`,
-        {
-          signal,
-        },
-      );
+      const { data } = await api.get(`/v1/users/${userId}/plan-and-usage`, {
+        signal,
+      });
 
       return data;
     },

packages/web/src/hooks/useSubscription.ee.js

@@ -1,11 +1,28 @@
 import { useQuery } from '@tanstack/react-query';
+import { useLocation } from 'react-router-dom';
 import { DateTime } from 'luxon';
+import * as React from 'react';
 
-import useFormatMessage from './useFormatMessage';
 import api from 'helpers/api';
 
+function transform(subscription) {
+  const nextBillDate = subscription?.nextBillDate;
+  const nextBillDateTitleDateObject = DateTime.fromISO(nextBillDate);
+  const formattedNextBillDateTitle = nextBillDateTitleDateObject.isValid
+    ? nextBillDateTitleDateObject.toFormat('LLL dd, yyyy')
+    : nextBillDate;
+
+  return {
+    ...subscription,
+    nextBillDate: formattedNextBillDateTitle,
+  };
+}
+
 export default function useSubscription() {
-  const formatMessage = useFormatMessage();
+  const location = useLocation();
+  const state = location.state;
+  const checkoutCompleted = state?.checkoutCompleted;
+  const [isPolling, setIsPolling] = React.useState(false);
 
   const { data, isLoading: isSubscriptionLoading } = useQuery({
     queryKey: ['subscription'],
@@ -16,23 +33,38 @@ export default function useSubscription() {
 
       return data;
     },
+    refetchInterval: isPolling ? 1000 : false,
   });
+
   const subscription = data?.data;
 
+  const hasSubscription = !!subscription?.status;
+
+  React.useEffect(
+    function pollDataUntilSubscriptionIsCreated() {
+      if (checkoutCompleted && !hasSubscription) {
+        setIsPolling(true);
+      }
+    },
+    [checkoutCompleted, hasSubscription],
+  );
+
+  React.useEffect(
+    function stopPollingWhenSubscriptionIsCreated() {
+      if (checkoutCompleted && hasSubscription) {
+        setIsPolling(false);
+      }
+    },
+    [checkoutCompleted, hasSubscription],
+  );
+
   const cancellationEffectiveDate = subscription?.cancellationEffectiveDate;
 
   const hasCancelled = !!cancellationEffectiveDate;
 
   if (isSubscriptionLoading || !hasCancelled) return null;
 
-  const cancellationEffectiveDateObject = DateTime.fromISO(
-    cancellationEffectiveDate,
-  );
-
   return {
-    message: formatMessage('subscriptionCancelledAlert.text', {
-      date: cancellationEffectiveDateObject.toFormat('DDD'),
-    }),
-    cancellationEffectiveDate: cancellationEffectiveDateObject,
+    data: transform(subscription),
   };
 }

packages/web/src/locales/en.json

@@ -165,6 +165,10 @@
   "usageDataInformation.yourUsageDescription": "Last 30 days total usage",
   "usageDataInformation.yourUsageTasks": "Tasks",
   "usageDataInformation.upgrade": "Upgrade",
+  "usageDataInformation.cancelPlan": "Cancel plan",
+  "usageDataInformation.updatePaymentMethod": "Update payment method",
+  "usageDataInformation.monthlyPayment": "(monthly payment)",
+  "usageDataInformation.upgradePlan": "Upgrade plan",
   "invoices.invoices": "Invoices",
   "invoices.date": "Date",
   "invoices.amount": "Amount",