From 0609f30e257166b9b3835f8d2d389f9cafbaab03 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C4=B1dvan=20Akca?= <akca.ridvann@gmail.com>
Date: Thu, 28 Mar 2024 15:25:40 +0300
Subject: [PATCH 1/5] feat: introduce usePlanAndUsage with RQ

---
 .../UsageDataInformation/index.ee.jsx         | 16 +++++++++++-
 packages/web/src/hooks/usePlanAndUsage.js     | 25 +++++++++++++++++++
 2 files changed, 40 insertions(+), 1 deletion(-)
 create mode 100644 packages/web/src/hooks/usePlanAndUsage.js

diff --git a/packages/web/src/components/UsageDataInformation/index.ee.jsx b/packages/web/src/components/UsageDataInformation/index.ee.jsx
index bbc5995f..502bb1df 100644
--- a/packages/web/src/components/UsageDataInformation/index.ee.jsx
+++ b/packages/web/src/components/UsageDataInformation/index.ee.jsx
@@ -10,15 +10,20 @@ import CardContent from '@mui/material/CardContent';
 import Divider from '@mui/material/Divider';
 import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
+
 import TrialOverAlert from 'components/TrialOverAlert/index.ee';
 import SubscriptionCancelledAlert from 'components/SubscriptionCancelledAlert/index.ee';
 import CheckoutCompletedAlert from 'components/CheckoutCompletedAlert/index.ee';
 import * as URLS from 'config/urls';
 import useBillingAndUsageData from 'hooks/useBillingAndUsageData.ee';
 import useFormatMessage from 'hooks/useFormatMessage';
+import usePlanAndUsage from 'hooks/usePlanAndUsage';
+
 const capitalize = (str) => str[0].toUpperCase() + str.slice(1, str.length);
+
 function BillingCard(props) {
   const { name, title = '', action } = props;
+
   return (
     <Card
       sx={{
@@ -45,10 +50,14 @@ function BillingCard(props) {
     </Card>
   );
 }
+
 function Action(props) {
   const { action } = props;
+
   if (!action) return <React.Fragment />;
+
   const { text, type } = action;
+
   if (type === 'link') {
     if (action.src.startsWith('http')) {
       return (
@@ -64,6 +73,7 @@ function Action(props) {
       );
     }
   }
+
   if (type === 'text') {
     return (
       <Typography variant="subtitle2" pb={1}>
@@ -71,11 +81,15 @@ function Action(props) {
       </Typography>
     );
   }
+
   return <React.Fragment />;
 }
 export default function UsageDataInformation() {
   const formatMessage = useFormatMessage();
   const billingAndUsageData = useBillingAndUsageData();
+  const { data } = usePlanAndUsage();
+  const planAndUsage = data?.data;
+
   return (
     <React.Fragment>
       <Stack sx={{ width: '100%', mb: 2 }} spacing={2}>
@@ -171,7 +185,7 @@ export default function UsageDataInformation() {
                 variant="subtitle2"
                 sx={{ color: 'text.secondary', mt: 2, fontWeight: 500 }}
               >
-                {billingAndUsageData?.usage.task}
+                {planAndUsage?.usage.task}
               </Typography>
             </Box>
 
diff --git a/packages/web/src/hooks/usePlanAndUsage.js b/packages/web/src/hooks/usePlanAndUsage.js
new file mode 100644
index 00000000..39af9996
--- /dev/null
+++ b/packages/web/src/hooks/usePlanAndUsage.js
@@ -0,0 +1,25 @@
+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;
+
+  const query = useQuery({
+    queryKey: ['planAndUsage', currentUserId],
+    queryFn: async ({ signal }) => {
+      const { data } = await api.get(
+        `/v1/users/${currentUserId}/plan-and-usage`,
+        {
+          signal,
+        },
+      );
+
+      return data;
+    },
+  });
+
+  return query;
+}

From 1827f5413f39096b58daf18dd9333bfef6295342 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C4=B1dvan=20Akca?= <akca.ridvann@gmail.com>
Date: Thu, 28 Mar 2024 15:29:04 +0300
Subject: [PATCH 2/5] refactor(useUserTrial): return hasTrial field from hook

---
 .../components/TrialStatusBadge/index.ee.jsx  |  2 +-
 packages/web/src/hooks/useUserTrial.ee.js     | 34 +++----------------
 2 files changed, 6 insertions(+), 30 deletions(-)

diff --git a/packages/web/src/components/TrialStatusBadge/index.ee.jsx b/packages/web/src/components/TrialStatusBadge/index.ee.jsx
index f4ab263f..d31d9e66 100644
--- a/packages/web/src/components/TrialStatusBadge/index.ee.jsx
+++ b/packages/web/src/components/TrialStatusBadge/index.ee.jsx
@@ -8,7 +8,7 @@ import useUserTrial from 'hooks/useUserTrial.ee';
 export default function TrialStatusBadge() {
   const data = useUserTrial();
 
-  if (!data) return <React.Fragment />;
+  if (!data.hasTrial) return <React.Fragment />;
 
   const { message, status } = data;
 
diff --git a/packages/web/src/hooks/useUserTrial.ee.js b/packages/web/src/hooks/useUserTrial.ee.js
index 4e61ad58..0ff5c80e 100644
--- a/packages/web/src/hooks/useUserTrial.ee.js
+++ b/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,
   };
 }

From f0ef12f904064ca9125998367642974a2ce3e084 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C4=B1dvan=20Akca?= <akca.ridvann@gmail.com>
Date: Thu, 28 Mar 2024 15:53:10 +0300
Subject: [PATCH 3/5] refactor: rewrite useSubscription with RQ and use it in
 UsageDataInformation

---
 .../UsageDataInformation/index.ee.jsx         | 124 ++++++++++++------
 packages/web/src/hooks/usePlanAndUsage.js     |  17 +--
 packages/web/src/hooks/useSubscription.ee.js  |  52 ++++++--
 packages/web/src/locales/en.json              |   4 +
 4 files changed, 136 insertions(+), 61 deletions(-)

diff --git a/packages/web/src/components/UsageDataInformation/index.ee.jsx b/packages/web/src/components/UsageDataInformation/index.ee.jsx
index 502bb1df..9b737f59 100644
--- a/packages/web/src/components/UsageDataInformation/index.ee.jsx
+++ b/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}
diff --git a/packages/web/src/hooks/usePlanAndUsage.js b/packages/web/src/hooks/usePlanAndUsage.js
index 39af9996..ae98afe4 100644
--- a/packages/web/src/hooks/usePlanAndUsage.js
+++ b/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;
     },
diff --git a/packages/web/src/hooks/useSubscription.ee.js b/packages/web/src/hooks/useSubscription.ee.js
index 4646b9ed..2be6e9a9 100644
--- a/packages/web/src/hooks/useSubscription.ee.js
+++ b/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),
   };
 }
diff --git a/packages/web/src/locales/en.json b/packages/web/src/locales/en.json
index 807ab9c5..2e50d1d7 100644
--- a/packages/web/src/locales/en.json
+++ b/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",

From 88c50e014ddd554b93efc94e121bad609981b096 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C4=B1dvan=20Akca?= <akca.ridvann@gmail.com>
Date: Thu, 28 Mar 2024 15:56:02 +0300
Subject: [PATCH 4/5] fix: update SubscriptionCancelledAlert and
 CheckoutCompletedAlert based on useSubscription and useUserTrial

---
 .../CheckoutCompletedAlert/index.ee.jsx          | 10 +++++-----
 .../SubscriptionCancelledAlert/index.ee.jsx      | 16 ++++++++++++++--
 .../components/UsageDataInformation/index.ee.jsx |  8 +++-----
 packages/web/src/locales/en.json                 |  1 +
 4 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/packages/web/src/components/CheckoutCompletedAlert/index.ee.jsx b/packages/web/src/components/CheckoutCompletedAlert/index.ee.jsx
index 2bc213e8..a1b75643 100644
--- a/packages/web/src/components/CheckoutCompletedAlert/index.ee.jsx
+++ b/packages/web/src/components/CheckoutCompletedAlert/index.ee.jsx
@@ -1,15 +1,15 @@
 import * as React from 'react';
-import { useLocation } from 'react-router-dom';
 import Alert from '@mui/material/Alert';
 import Typography from '@mui/material/Typography';
 import useFormatMessage from 'hooks/useFormatMessage';
+import useSubscription from 'hooks/useSubscription.ee';
 
 export default function CheckoutCompletedAlert() {
   const formatMessage = useFormatMessage();
-  const location = useLocation();
-  const state = location.state;
-  const checkoutCompleted = state?.checkoutCompleted;
-  if (!checkoutCompleted) return <React.Fragment />;
+  const subscription = useSubscription();
+
+  if (subscription?.data?.status !== 'active') return <React.Fragment />;
+
   return (
     <Alert
       severity="success"
diff --git a/packages/web/src/components/SubscriptionCancelledAlert/index.ee.jsx b/packages/web/src/components/SubscriptionCancelledAlert/index.ee.jsx
index ae2540ae..b36b1ffc 100644
--- a/packages/web/src/components/SubscriptionCancelledAlert/index.ee.jsx
+++ b/packages/web/src/components/SubscriptionCancelledAlert/index.ee.jsx
@@ -3,11 +3,21 @@ import Alert from '@mui/material/Alert';
 import Typography from '@mui/material/Typography';
 
 import useSubscription from 'hooks/useSubscription.ee';
+import useFormatMessage from 'hooks/useFormatMessage';
+import { DateTime } from 'luxon';
+import useUserTrial from 'hooks/useUserTrial.ee';
 
 export default function SubscriptionCancelledAlert() {
+  const formatMessage = useFormatMessage();
   const subscription = useSubscription();
+  const trial = useUserTrial();
 
-  if (!subscription) return <React.Fragment />;
+  if (subscription?.data?.status === 'active' || trial.hasTrial)
+    return <React.Fragment />;
+
+  const cancellationEffectiveDateObject = DateTime.fromISO(
+    subscription?.data?.cancellationEffectiveDate,
+  );
 
   return (
     <Alert
@@ -18,7 +28,9 @@ export default function SubscriptionCancelledAlert() {
       }}
     >
       <Typography variant="subtitle2" sx={{ lineHeight: 1.5 }}>
-        {subscription.message}
+        {formatMessage('subscriptionCancelledAlert.text', {
+          date: cancellationEffectiveDateObject.toFormat('DDD'),
+        })}
       </Typography>
     </Alert>
   );
diff --git a/packages/web/src/components/UsageDataInformation/index.ee.jsx b/packages/web/src/components/UsageDataInformation/index.ee.jsx
index 9b737f59..c0809e5b 100644
--- a/packages/web/src/components/UsageDataInformation/index.ee.jsx
+++ b/packages/web/src/components/UsageDataInformation/index.ee.jsx
@@ -15,7 +15,6 @@ import TrialOverAlert from 'components/TrialOverAlert/index.ee';
 import SubscriptionCancelledAlert from 'components/SubscriptionCancelledAlert/index.ee';
 import CheckoutCompletedAlert from 'components/CheckoutCompletedAlert/index.ee';
 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';
@@ -62,13 +61,13 @@ function Action(props) {
 
   if (action.startsWith('http')) {
     return (
-      <Button size="small" href={action.src} target="_blank">
+      <Button size="small" href={action} target="_blank">
         {text}
       </Button>
     );
   } else if (action.startsWith('/')) {
     return (
-      <Button size="small" component={Link} to={action.src}>
+      <Button size="small" component={Link} to={action}>
         {text}
       </Button>
     );
@@ -83,7 +82,6 @@ function Action(props) {
 
 export default function UsageDataInformation() {
   const formatMessage = useFormatMessage();
-  const billingAndUsageData = useBillingAndUsageData();
   const queryClient = useQueryClient();
   const { data } = usePlanAndUsage();
   const planAndUsage = data?.data;
@@ -239,7 +237,7 @@ export default function UsageDataInformation() {
           </Box>
 
           {/* free plan has `null` status so that we can show the upgrade button */}
-          {subscription?.status === null && (
+          {subscription?.status === undefined && (
             <Button
               component={Link}
               to={URLS.SETTINGS_PLAN_UPGRADE}
diff --git a/packages/web/src/locales/en.json b/packages/web/src/locales/en.json
index 2e50d1d7..20b423b0 100644
--- a/packages/web/src/locales/en.json
+++ b/packages/web/src/locales/en.json
@@ -165,6 +165,7 @@
   "usageDataInformation.yourUsageDescription": "Last 30 days total usage",
   "usageDataInformation.yourUsageTasks": "Tasks",
   "usageDataInformation.upgrade": "Upgrade",
+  "usageDataInformation.freeTrial": "Free trial",
   "usageDataInformation.cancelPlan": "Cancel plan",
   "usageDataInformation.updatePaymentMethod": "Update payment method",
   "usageDataInformation.monthlyPayment": "(monthly payment)",

From d2a7889fc905d170684b299d2d5459d72360a84a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C4=B1dvan=20Akca?= <akca.ridvann@gmail.com>
Date: Thu, 28 Mar 2024 16:13:46 +0300
Subject: [PATCH 5/5] refactor: remove useBillingAndUsageData hook

---
 .../queries/get-billing-and-usage.ee.js       | 101 ------------------
 .../backend/src/graphql/query-resolvers.js    |   2 -
 packages/backend/src/graphql/schema.graphql   |  38 -------
 .../CheckoutCompletedAlert/index.ee.jsx       |   9 +-
 .../UsageDataInformation/index.ee.jsx         |   2 +-
 packages/web/src/contexts/Paddle.ee.jsx       |  13 ++-
 .../queries/get-billing-and-usage.ee.js       |  37 -------
 .../src/hooks/useBillingAndUsageData.ee.js    |  52 ---------
 packages/web/src/hooks/useSubscription.ee.js  |  23 +---
 9 files changed, 20 insertions(+), 257 deletions(-)
 delete mode 100644 packages/backend/src/graphql/queries/get-billing-and-usage.ee.js
 delete mode 100644 packages/web/src/graphql/queries/get-billing-and-usage.ee.js
 delete mode 100644 packages/web/src/hooks/useBillingAndUsageData.ee.js

diff --git a/packages/backend/src/graphql/queries/get-billing-and-usage.ee.js b/packages/backend/src/graphql/queries/get-billing-and-usage.ee.js
deleted file mode 100644
index d23a44e5..00000000
--- a/packages/backend/src/graphql/queries/get-billing-and-usage.ee.js
+++ /dev/null
@@ -1,101 +0,0 @@
-import { DateTime } from 'luxon';
-import Billing from '../../helpers/billing/index.ee.js';
-import ExecutionStep from '../../models/execution-step.js';
-
-const getBillingAndUsage = async (_parent, _params, context) => {
-  const persistedSubscription = await context.currentUser.$relatedQuery(
-    'currentSubscription'
-  );
-
-  const subscription = persistedSubscription
-    ? paidSubscription(persistedSubscription)
-    : freeTrialSubscription();
-
-  return {
-    subscription,
-    usage: {
-      task: executionStepCount(context),
-    },
-  };
-};
-
-const paidSubscription = (subscription) => {
-  const currentPlan = Billing.paddlePlans.find(
-    (plan) => plan.productId === subscription.paddlePlanId
-  );
-
-  return {
-    status: subscription.status,
-    monthlyQuota: {
-      title: currentPlan.limit,
-      action: {
-        type: 'link',
-        text: 'Cancel plan',
-        src: subscription.cancelUrl,
-      },
-    },
-    nextBillAmount: {
-      title: subscription.nextBillAmount
-        ? '€' + subscription.nextBillAmount
-        : '---',
-      action: {
-        type: 'link',
-        text: 'Update payment method',
-        src: subscription.updateUrl,
-      },
-    },
-    nextBillDate: {
-      title: subscription.nextBillDate ? subscription.nextBillDate : '---',
-      action: {
-        type: 'text',
-        text: '(monthly payment)',
-      },
-    },
-  };
-};
-
-const freeTrialSubscription = () => {
-  return {
-    status: null,
-    monthlyQuota: {
-      title: 'Free Trial',
-      action: {
-        type: 'link',
-        text: 'Upgrade plan',
-        src: '/settings/billing/upgrade',
-      },
-    },
-    nextBillAmount: {
-      title: '---',
-      action: null,
-    },
-    nextBillDate: {
-      title: '---',
-      action: null,
-    },
-  };
-};
-
-const executionIds = async (context) => {
-  return (
-    await context.currentUser
-      .$relatedQuery('executions')
-      .select('executions.id')
-  ).map((execution) => execution.id);
-};
-
-const executionStepCount = async (context) => {
-  const executionStepCount = await ExecutionStep.query()
-    .whereIn('execution_id', await executionIds(context))
-    .andWhere(
-      'created_at',
-      '>=',
-      DateTime.now().minus({ days: 30 }).toISODate()
-    )
-    .count()
-    .first();
-
-  return executionStepCount.count;
-};
-
-export default getBillingAndUsage;
diff --git a/packages/backend/src/graphql/query-resolvers.js b/packages/backend/src/graphql/query-resolvers.js
index 1fb2619c..ca40ba8f 100644
--- a/packages/backend/src/graphql/query-resolvers.js
+++ b/packages/backend/src/graphql/query-resolvers.js
@@ -1,6 +1,5 @@
 import getApp from './queries/get-app.js';
 import getAppAuthClient from './queries/get-app-auth-client.ee.js';
-import getBillingAndUsage from './queries/get-billing-and-usage.ee.js';
 import getConnectedApps from './queries/get-connected-apps.js';
 import getDynamicData from './queries/get-dynamic-data.js';
 import getStepWithTestExecutions from './queries/get-step-with-test-executions.js';
@@ -9,7 +8,6 @@ import testConnection from './queries/test-connection.js';
 const queryResolvers = {
   getApp,
   getAppAuthClient,
-  getBillingAndUsage,
   getConnectedApps,
   getDynamicData,
   getStepWithTestExecutions,
diff --git a/packages/backend/src/graphql/schema.graphql b/packages/backend/src/graphql/schema.graphql
index fe1b44b5..f9c9cc2d 100644
--- a/packages/backend/src/graphql/schema.graphql
+++ b/packages/backend/src/graphql/schema.graphql
@@ -9,7 +9,6 @@ type Query {
     key: String!
     parameters: JSONObject
   ): JSONObject
-  getBillingAndUsage: GetBillingAndUsage
 }
 
 type Mutation {
@@ -561,43 +560,6 @@ type License {
   verified: Boolean
 }
 
-type GetBillingAndUsage {
-  subscription: Subscription
-  usage: Usage
-}
-
-type MonthlyQuota {
-  title: String
-  action: BillingCardAction
-}
-
-type NextBillAmount {
-  title: String
-  action: BillingCardAction
-}
-
-type NextBillDate {
-  title: String
-  action: BillingCardAction
-}
-
-type BillingCardAction {
-  type: String
-  text: String
-  src: String
-}
-
-type Subscription {
-  status: String
-  monthlyQuota: MonthlyQuota
-  nextBillAmount: NextBillAmount
-  nextBillDate: NextBillDate
-}
-
-type Usage {
-  task: Int
-}
-
 type Permission {
   id: String
   action: String
diff --git a/packages/web/src/components/CheckoutCompletedAlert/index.ee.jsx b/packages/web/src/components/CheckoutCompletedAlert/index.ee.jsx
index a1b75643..d236987a 100644
--- a/packages/web/src/components/CheckoutCompletedAlert/index.ee.jsx
+++ b/packages/web/src/components/CheckoutCompletedAlert/index.ee.jsx
@@ -1,14 +1,17 @@
 import * as React from 'react';
+import { useLocation } from 'react-router-dom';
 import Alert from '@mui/material/Alert';
 import Typography from '@mui/material/Typography';
+
 import useFormatMessage from 'hooks/useFormatMessage';
-import useSubscription from 'hooks/useSubscription.ee';
 
 export default function CheckoutCompletedAlert() {
   const formatMessage = useFormatMessage();
-  const subscription = useSubscription();
+  const location = useLocation();
+  const state = location.state;
+  const checkoutCompleted = state?.checkoutCompleted;
 
-  if (subscription?.data?.status !== 'active') return <React.Fragment />;
+  if (!checkoutCompleted) return <React.Fragment />;
 
   return (
     <Alert
diff --git a/packages/web/src/components/UsageDataInformation/index.ee.jsx b/packages/web/src/components/UsageDataInformation/index.ee.jsx
index c0809e5b..cfacc841 100644
--- a/packages/web/src/components/UsageDataInformation/index.ee.jsx
+++ b/packages/web/src/components/UsageDataInformation/index.ee.jsx
@@ -102,7 +102,7 @@ export default function UsageDataInformation() {
     billingInfo = {
       monthlyQuota: {
         title: formatMessage('usageDataInformation.freeTrial'),
-        action: '/settings/billing/upgrade',
+        action: URLS.SETTINGS_PLAN_UPGRADE,
         text: 'Upgrade plan',
       },
       nextBillAmount: {
diff --git a/packages/web/src/contexts/Paddle.ee.jsx b/packages/web/src/contexts/Paddle.ee.jsx
index e7e71c5b..1611705a 100644
--- a/packages/web/src/contexts/Paddle.ee.jsx
+++ b/packages/web/src/contexts/Paddle.ee.jsx
@@ -4,7 +4,7 @@ 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';
+import { useQueryClient } from '@tanstack/react-query';
 
 export const PaddleContext = React.createContext({
   loaded: false,
@@ -17,6 +17,7 @@ export const PaddleProvider = (props) => {
   const { data } = usePaddleInfo();
   const sandbox = data?.data?.sandbox;
   const vendorId = data?.data?.vendorId;
+  const queryClient = useQueryClient();
 
   const [loaded, setLoaded] = React.useState(false);
 
@@ -29,8 +30,12 @@ export const PaddleProvider = (props) => {
         if (completed) {
           // Paddle has side effects in the background,
           // so we need to refetch the relevant queries
-          await apolloClient.refetchQueries({
-            include: ['GetTrialStatus', 'GetBillingAndUsage'],
+          await queryClient.refetchQueries({
+            queryKey: ['userTrial'],
+          });
+
+          await queryClient.refetchQueries({
+            queryKey: ['subscription'],
           });
 
           navigate(URLS.SETTINGS_BILLING_AND_USAGE, {
@@ -39,7 +44,7 @@ export const PaddleProvider = (props) => {
         }
       }
     },
-    [navigate],
+    [navigate, queryClient],
   );
 
   const value = React.useMemo(() => {
diff --git a/packages/web/src/graphql/queries/get-billing-and-usage.ee.js b/packages/web/src/graphql/queries/get-billing-and-usage.ee.js
deleted file mode 100644
index 726b2b8e..00000000
--- a/packages/web/src/graphql/queries/get-billing-and-usage.ee.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import { gql } from '@apollo/client';
-export const GET_BILLING_AND_USAGE = gql`
-  query GetBillingAndUsage {
-    getBillingAndUsage {
-      subscription {
-        status
-        monthlyQuota {
-          title
-          action {
-            type
-            text
-            src
-          }
-        }
-        nextBillDate {
-          title
-          action {
-            type
-            text
-            src
-          }
-        }
-        nextBillAmount {
-          title
-          action {
-            type
-            text
-            src
-          }
-        }
-      }
-      usage {
-        task
-      }
-    }
-  }
-`;
diff --git a/packages/web/src/hooks/useBillingAndUsageData.ee.js b/packages/web/src/hooks/useBillingAndUsageData.ee.js
deleted file mode 100644
index 999402ff..00000000
--- a/packages/web/src/hooks/useBillingAndUsageData.ee.js
+++ /dev/null
@@ -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);
-}
diff --git a/packages/web/src/hooks/useSubscription.ee.js b/packages/web/src/hooks/useSubscription.ee.js
index 2be6e9a9..9f8ae544 100644
--- a/packages/web/src/hooks/useSubscription.ee.js
+++ b/packages/web/src/hooks/useSubscription.ee.js
@@ -24,7 +24,7 @@ export default function useSubscription() {
   const checkoutCompleted = state?.checkoutCompleted;
   const [isPolling, setIsPolling] = React.useState(false);
 
-  const { data, isLoading: isSubscriptionLoading } = useQuery({
+  const { data } = useQuery({
     queryKey: ['subscription'],
     queryFn: async ({ signal }) => {
       const { data } = await api.get(`/v1/users/me/subscription`, {
@@ -38,32 +38,17 @@ export default function useSubscription() {
 
   const subscription = data?.data;
 
-  const hasSubscription = !!subscription?.status;
+  const hasSubscription = subscription?.status === 'active';
 
   React.useEffect(
     function pollDataUntilSubscriptionIsCreated() {
-      if (checkoutCompleted && !hasSubscription) {
-        setIsPolling(true);
+      if (checkoutCompleted) {
+        setIsPolling(!hasSubscription);
       }
     },
     [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;
-
   return {
     data: transform(subscription),
   };