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 />