fix: update SubscriptionCancelledAlert and CheckoutCompletedAlert based on useSubscription and useUserTrial

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 subscription = useSubscription();
-  const state = location.state;
+
-  const checkoutCompleted = state?.checkoutCompleted;
+  if (subscription?.data?.status !== 'active') return <React.Fragment />;
-  if (!checkoutCompleted) return <React.Fragment />;
+
   return (
     <Alert
       severity="success"

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>
   );

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}

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)",