Merge pull request #1780 from automatisch/AUT-686

refactor: rewrite useBillingAndUsageData with useSubscription and useUserTrial
2024-04-08 15:22:55 +02:00
parent fb0a328ab0 d2a7889fc9
commit acdd026448
14 changed files with 185 additions and 321 deletions
--- a/packages/web/src/components/CheckoutCompletedAlert/index.ee.jsx
+++ b/packages/web/src/components/CheckoutCompletedAlert/index.ee.jsx
@@ -2,6 +2,7 @@ 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';

 export default function CheckoutCompletedAlert() {
@@ -9,7 +10,9 @@ export default function CheckoutCompletedAlert() {
  const location = useLocation();
  const state = location.state;
  const checkoutCompleted = state?.checkoutCompleted;
+
  if (!checkoutCompleted) return <React.Fragment />;
+
  return (
    <Alert
      severity="success"
--- 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>
  );
--- 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;

--- a/packages/web/src/components/UsageDataInformation/index.ee.jsx
+++ b/packages/web/src/components/UsageDataInformation/index.ee.jsx
@@ -10,15 +10,23 @@ 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';
+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
      sx={{
@@ -40,42 +48,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} target="_blank">
        {text}
-      </Typography>
+      </Button>
+    );
+  } else if (action.startsWith('/')) {
+    return (
+      <Button size="small" component={Link} to={action}>
+        {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: URLS.SETTINGS_PLAN_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>
      <Stack sx={{ width: '100%', mb: 2 }} spacing={2}>
@@ -92,11 +152,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>

@@ -113,26 +170,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>
@@ -171,7 +229,7 @@ export default function UsageDataInformation() {
                variant="subtitle2"
                sx={{ color: 'text.secondary', mt: 2, fontWeight: 500 }}
              >
-                {billingAndUsageData?.usage.task}
+                {planAndUsage?.usage.task}
              </Typography>
            </Box>

@@ -179,7 +237,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 === undefined && (
            <Button
              component={Link}
              to={URLS.SETTINGS_PLAN_UPGRADE}