feat: finalize TrialOverAlert on billing page

packages/web/src/components/TrialOverAlert/index.ee.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import Alert from '@mui/material/Alert';
+import Typography from '@mui/material/Typography';
+
+import * as URLS from 'config/urls';
+import { generateInternalLink } from 'helpers/translation-values';
+import useTrialStatus from 'hooks/useTrialStatus.ee';
+import useFormatMessage from 'hooks/useFormatMessage';
+
+
+export default function TrialOverAlert() {
+  const formatMessage = useFormatMessage();
+  const trialStatus = useTrialStatus();
+
+  if (!trialStatus || !trialStatus.over) return <React.Fragment />;
+
+  return (
+    <Alert
+      severity="error"
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+      }}
+    >
+      <Typography variant="subtitle2" sx={{ lineHeight: 1.5 }}>
+        {formatMessage('trialOverAlert.text', {
+          link: generateInternalLink(URLS.SETTINGS_PLAN_UPGRADE)
+        })}
+      </Typography>
+    </Alert>
+  );
+}

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

@@ -13,6 +13,7 @@ import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
 
 import { TBillingCardAction } from '@automatisch/types';
+import TrialOverAlert from 'components/TrialOverAlert/index.ee';
 import * as URLS from 'config/urls';
 import useBillingAndUsageData from 'hooks/useBillingAndUsageData.ee';
 import useFormatMessage from 'hooks/useFormatMessage';
@@ -96,19 +97,7 @@ export default function UsageDataInformation() {
   return (
     <React.Fragment>
       <Stack sx={{ width: '100%', mb: 2 }} spacing={2}>
-        <Alert
+        <TrialOverAlert />
-          severity="error"
-          sx={{
-            display: 'flex',
-            alignItems: 'center',
-          }}
-        >
-          <Typography variant="subtitle2">
-            Your free trial is over. Please{' '}
-            <Link to={URLS.SETTINGS_PLAN_UPGRADE}>upgrade </Link>
-            your plan to continue using Automatisch.
-          </Typography>
-        </Alert>
       </Stack>
       <Card sx={{ mb: 3, p: 2 }}>
         <CardContent sx={{ display: 'flex', flexDirection: 'column' }}>

packages/web/src/helpers/translation-values.tsx

@@ -1,5 +1,13 @@
+import { Link as RouterLink } from 'react-router-dom';
 import Link from '@mui/material/Link';
 
+export const generateInternalLink = (link: string) => (str: string) =>
+  (
+    <Link component={RouterLink} to={link}>
+      {str}
+    </Link>
+  );
+
 export const generateExternalLink = (link: string) => (str: string) =>
   (
     <Link href={link} target="_blank">

packages/web/src/hooks/useTrialStatus.ee.ts

@@ -7,6 +7,7 @@ import useFormatMessage from './useFormatMessage';
 type UseTrialStatusReturn = {
   expireAt: DateTime;
   message: string;
+  over: boolean;
   status: 'error' | 'warning';
 } | null;
 
@@ -25,11 +26,13 @@ function getFeedbackPayload(date: DateTime) {
     return {
       translationEntryId: 'trialBadge.over',
       status: 'error' as const,
+      over: true,
     };
   } else if (diffInDays <= 0) {
     return {
       translationEntryId: 'trialBadge.endsToday',
       status: 'warning' as const,
+      over: false,
     }
   } else {
     return {
@@ -38,6 +41,7 @@ function getFeedbackPayload(date: DateTime) {
         remainingDays: diffInDays
       },
       status: 'warning' as const,
+      over: false,
     }
   }
 }
@@ -54,11 +58,13 @@ export default function useTrialStatus(): UseTrialStatusReturn {
     translationEntryId,
     translationEntryValues,
     status,
+    over,
   } = getFeedbackPayload(expireAt);
 
   return {
     message: formatMessage(translationEntryId, translationEntryValues),
     expireAt,
+    over,
     status
   };
 }

packages/web/src/locales/en.json

@@ -155,5 +155,6 @@
   "invoices.link": "Link",
   "trialBadge.xDaysLeft": "{remainingDays} trial {remainingDays, plural, one {day} other {days}} left",
   "trialBadge.endsToday": "Trial ends today",
-  "trialBadge.over": "Trial is over"
+  "trialBadge.over": "Trial is over",
+  "trialOverAlert.text": "Your free trial is over. Please <link>upgrade</link> your plan to continue using Automatisch."
 }