Merge pull request #1780 from automatisch/AUT-686

refactor: rewrite useBillingAndUsageData with useSubscription and useUserTrial

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

@@ -1,52 +0,0 @@
-import * as React from 'react';
-import { useQuery } from '@apollo/client';
-import { useLocation } from 'react-router-dom';
-import { DateTime } from 'luxon';
-import { GET_BILLING_AND_USAGE } from 'graphql/queries/get-billing-and-usage.ee';
-function transform(billingAndUsageData) {
-  const nextBillDate = billingAndUsageData.subscription.nextBillDate;
-  const nextBillDateTitle = nextBillDate.title;
-  const nextBillDateTitleDateObject = DateTime.fromMillis(
-    Number(nextBillDateTitle),
-  );
-  const formattedNextBillDateTitle = nextBillDateTitleDateObject.isValid
-    ? nextBillDateTitleDateObject.toFormat('LLL dd, yyyy')
-    : nextBillDateTitle;
-  return {
-    ...billingAndUsageData,
-    subscription: {
-      ...billingAndUsageData.subscription,
-      nextBillDate: {
-        ...billingAndUsageData.subscription.nextBillDate,
-        title: formattedNextBillDateTitle,
-      },
-    },
-  };
-}
-export default function useBillingAndUsageData() {
-  const location = useLocation();
-  const state = location.state;
-  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;
-  return transform(data.getBillingAndUsage);
-}

packages/web/src/hooks/usePlanAndUsage.js

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

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

@@ -1,13 +1,30 @@
 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';
 
-export default function useSubscription() {
-  const formatMessage = useFormatMessage();
+function transform(subscription) {
+  const nextBillDate = subscription?.nextBillDate;
+  const nextBillDateTitleDateObject = DateTime.fromISO(nextBillDate);
+  const formattedNextBillDateTitle = nextBillDateTitleDateObject.isValid
+    ? nextBillDateTitleDateObject.toFormat('LLL dd, yyyy')
+    : nextBillDate;
 
-  const { data, isLoading: isSubscriptionLoading } = useQuery({
+  return {
+    ...subscription,
+    nextBillDate: formattedNextBillDateTitle,
+  };
+}
+
+export default function useSubscription() {
+  const location = useLocation();
+  const state = location.state;
+  const checkoutCompleted = state?.checkoutCompleted;
+  const [isPolling, setIsPolling] = React.useState(false);
+
+  const { data } = useQuery({
     queryKey: ['subscription'],
     queryFn: async ({ signal }) => {
       const { data } = await api.get(`/v1/users/me/subscription`, {
@@ -16,23 +33,23 @@ export default function useSubscription() {
 
       return data;
     },
+    refetchInterval: isPolling ? 1000 : false,
   });
+
   const subscription = data?.data;
 
-  const cancellationEffectiveDate = subscription?.cancellationEffectiveDate;
+  const hasSubscription = subscription?.status === 'active';
 
-  const hasCancelled = !!cancellationEffectiveDate;
-
-  if (isSubscriptionLoading || !hasCancelled) return null;
-
-  const cancellationEffectiveDateObject = DateTime.fromISO(
-    cancellationEffectiveDate,
+  React.useEffect(
+    function pollDataUntilSubscriptionIsCreated() {
+      if (checkoutCompleted) {
+        setIsPolling(!hasSubscription);
+      }
+    },
+    [checkoutCompleted, hasSubscription],
   );
 
   return {
-    message: formatMessage('subscriptionCancelledAlert.text', {
-      date: cancellationEffectiveDateObject.toFormat('DDD'),
-    }),
-    cancellationEffectiveDate: cancellationEffectiveDateObject,
+    data: transform(subscription),
   };
 }

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

@@ -1,10 +1,8 @@
-import * as React from 'react';
-import { useLocation } from 'react-router-dom';
 import { DateTime } from 'luxon';
+import { useQuery } from '@tanstack/react-query';
 
 import useFormatMessage from './useFormatMessage';
 import api from 'helpers/api';
-import { useQuery } from '@tanstack/react-query';
 
 function getDiffInDays(date) {
   const today = DateTime.now().startOf('day');
@@ -13,6 +11,7 @@ function getDiffInDays(date) {
 
   return roundedDiffInDays;
 }
+
 function getFeedbackPayload(date) {
   const diffInDays = getDiffInDays(date);
 
@@ -41,12 +40,8 @@ function getFeedbackPayload(date) {
 }
 export default function useUserTrial() {
   const formatMessage = useFormatMessage();
-  const location = useLocation();
-  const state = location.state;
-  const checkoutCompleted = state?.checkoutCompleted;
-  const [isPolling, setIsPolling] = React.useState(false);
 
-  const { data, isLoading: isUserTrialLoading } = useQuery({
+  const { data } = useQuery({
     queryKey: ['userTrial'],
     queryFn: async ({ signal }) => {
       const { data } = await api.get('/v1/users/me/trial', {
@@ -55,32 +50,12 @@ export default function useUserTrial() {
 
       return data;
     },
-    refetchInterval: isPolling ? 1000 : false,
   });
+
   const userTrial = data?.data;
 
   const hasTrial = userTrial?.inTrial;
 
-  React.useEffect(
-    function pollDataUntilTrialEnds() {
-      if (checkoutCompleted && hasTrial) {
-        setIsPolling(true);
-      }
-    },
-    [checkoutCompleted, hasTrial, setIsPolling],
-  );
-
-  React.useEffect(
-    function stopPollingWhenTrialEnds() {
-      if (checkoutCompleted && !hasTrial) {
-        setIsPolling(false);
-      }
-    },
-    [checkoutCompleted, hasTrial, setIsPolling],
-  );
-
-  if (isUserTrialLoading || !hasTrial) return null;
-
   const expireAt = DateTime.fromISO(userTrial?.expireAt).startOf('day');
 
   const { translationEntryId, translationEntryValues, status, over } =
@@ -91,5 +66,6 @@ export default function useUserTrial() {
     expireAt,
     over,
     status,
+    hasTrial,
   };
 }