fix: update SubscriptionCancelledAlert and CheckoutCompletedAlert based on useSubscription and useUserTrial

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