feat: add subscription cancelled alert

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

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import Alert from '@mui/material/Alert';
+import Typography from '@mui/material/Typography';
+
+import useSubscriptionStatus from 'hooks/useSubscriptionStatus.ee';
+
+export default function SubscriptionCancelledAlert() {
+  const subscriptionStatus = useSubscriptionStatus();
+
+  if (!subscriptionStatus) return <React.Fragment />;
+
+  return (
+    <Alert
+      severity="warning"
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+      }}
+    >
+      <Typography variant="subtitle2" sx={{ lineHeight: 1.5 }}>
+        {subscriptionStatus.message}
+      </Typography>
+    </Alert>
+  );
+}

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

@@ -13,6 +13,7 @@ import Typography from '@mui/material/Typography';
 
 import { TBillingCardAction } from '@automatisch/types';
 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';
@@ -97,6 +98,8 @@ export default function UsageDataInformation() {
   return (
     <React.Fragment>
       <Stack sx={{ width: '100%', mb: 2 }} spacing={2}>
+        <SubscriptionCancelledAlert />
+
         <TrialOverAlert />
 
         <CheckoutCompletedAlert />

packages/web/src/graphql/queries/get-subscription-status.ee.ts

@@ -0,0 +1,9 @@
+import { gql } from '@apollo/client';
+
+export const GET_SUBSCRIPTION_STATUS = gql`
+  query GetSubscriptionStatus {
+    getSubscriptionStatus {
+      cancellationEffectiveDate
+    }
+  }
+`;

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

@@ -0,0 +1,31 @@
+import { useQuery } from '@apollo/client';
+import { DateTime } from 'luxon';
+
+import { GET_SUBSCRIPTION_STATUS } from 'graphql/queries/get-subscription-status.ee';
+import useFormatMessage from './useFormatMessage';
+
+type UseSubscriptionStatusReturn = {
+  cancellationEffectiveDate: DateTime;
+  message: string;
+} | null;
+
+export default function useSubscriptionStatus(): UseSubscriptionStatusReturn {
+  const formatMessage = useFormatMessage();
+  const { data, loading, } = useQuery(GET_SUBSCRIPTION_STATUS);
+  const cancellationEffectiveDate = data?.getSubscriptionStatus?.cancellationEffectiveDate as string;
+  const hasCancelled = !!cancellationEffectiveDate;
+
+  if (loading || !hasCancelled) return null;
+
+  const cancellationEffectiveDateObject = DateTime.fromMillis(Number(cancellationEffectiveDate)).startOf('day');
+
+  return {
+    message: formatMessage(
+      'subscriptionCancelledAlert.text',
+      {
+        date: cancellationEffectiveDateObject.toFormat('DDD')
+      }
+    ),
+    cancellationEffectiveDate: cancellationEffectiveDateObject,
+  };
+}

packages/web/src/locales/en.json

@@ -158,5 +158,6 @@
   "trialBadge.endsToday": "Trial ends today",
   "trialBadge.over": "Trial is over",
   "trialOverAlert.text": "Your free trial is over. Please <link>upgrade</link> your plan to continue using Automatisch.",
-  "checkoutCompletedAlert.text": "Thank you for upgrading your subscription and supporting our self-funded business!"
+  "checkoutCompletedAlert.text": "Thank you for upgrading your subscription and supporting our self-funded business!",
+  "subscriptionCancelledAlert.text": "Your subscription is cancelled, but you can continue using Automatisch until {date}."
 }