From e081bd6d621ee84b01d87e16ea4adfd5900ac793 Mon Sep 17 00:00:00 2001
From: jzunigax2 <125698953+jzunigax2@users.noreply.github.com>
Date: Thu, 7 May 2026 20:48:39 -0600
Subject: [PATCH] feat(mail): add DowngradedNotification component and
 localization for downgrade messages

---
 .../Sidenav/DowngradedNotification.tsx        | 31 +++++++++++++++++++
 src/i18n/locales/en.json                      |  4 +++
 src/i18n/locales/es.json                      |  4 +++
 src/i18n/locales/fr.json                      |  4 +++
 src/i18n/locales/it.json                      |  4 +++
 5 files changed, 47 insertions(+)
 create mode 100644 src/components/Sidenav/DowngradedNotification.tsx

diff --git a/src/components/Sidenav/DowngradedNotification.tsx b/src/components/Sidenav/DowngradedNotification.tsx
new file mode 100644
index 0000000..c8de646
--- /dev/null
+++ b/src/components/Sidenav/DowngradedNotification.tsx
@@ -0,0 +1,31 @@
+import { WarningIcon } from '@phosphor-icons/react';
+import { useTranslationContext } from '@/i18n';
+
+interface DowngradedNotificationProps {
+  daysUntilDeletion?: number;
+  onUpgradeClick: () => void;
+}
+
+const DowngradedNotification = ({ daysUntilDeletion, onUpgradeClick }: DowngradedNotificationProps) => {
+  const { translate } = useTranslationContext();
+
+  return (
+    <div className="flex gap-1.5 items-start p-3 rounded-lg bg-yellow/10 border border-yellow/20">
+      <WarningIcon className="size-5 shrink-0 text-yellow" weight="fill" />
+      <div className="flex flex-col gap-0.5 min-w-0">
+        <p className="text-xs leading-tight text-gray-100">
+          {translate('mailDowngraded.message', { days: daysUntilDeletion ?? '--' })}
+        </p>
+        <button
+          type="button"
+          onClick={onUpgradeClick}
+          className="self-start text-xs font-medium text-primary hover:underline"
+        >
+          {translate('mailDowngraded.upgrade')}
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default DowngradedNotification;
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 24c2783..1716e06 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -22,6 +22,10 @@
     "upgrade": "Upgrade",
     "send": "Send"
   },
+  "mailDowngraded": {
+    "message": "You downgraded to a plan that doesn't support Internxt Mail. Your account will be deleted in {{days}} days.",
+    "upgrade": "Upgrade"
+  },
   "filter": {
     "all": "All",
     "none": "None",
diff --git a/src/i18n/locales/es.json b/src/i18n/locales/es.json
index 1def3b2..1c8af60 100644
--- a/src/i18n/locales/es.json
+++ b/src/i18n/locales/es.json
@@ -22,6 +22,10 @@
     "upgrade": "Mejorar plan",
     "send": "Enviar"
   },
+  "mailDowngraded": {
+    "message": "Has bajado a un plan que no incluye Internxt Mail. Tu cuenta se eliminará en {{days}} días.",
+    "upgrade": "Mejorar plan"
+  },
   "filter": {
     "all": "Todos",
     "none": "Ninguno",
diff --git a/src/i18n/locales/fr.json b/src/i18n/locales/fr.json
index 54fa91c..3328d3e 100644
--- a/src/i18n/locales/fr.json
+++ b/src/i18n/locales/fr.json
@@ -22,6 +22,10 @@
     "upgrade": "Mettre à niveau",
     "send": "Envoyer"
   },
+  "mailDowngraded": {
+    "message": "Vous êtes passé à un plan qui ne prend pas en charge Internxt Mail. Votre compte sera supprimé dans {{days}} jours.",
+    "upgrade": "Mettre à niveau"
+  },
   "filter": {
     "all": "Tous",
     "none": "Aucun",
diff --git a/src/i18n/locales/it.json b/src/i18n/locales/it.json
index b4fc6e3..c745024 100644
--- a/src/i18n/locales/it.json
+++ b/src/i18n/locales/it.json
@@ -22,6 +22,10 @@
     "upgrade": "Aggiorna piano",
     "send": "Invia"
   },
+  "mailDowngraded": {
+    "message": "Sei passato a un piano che non supporta Internxt Mail. Il tuo account verrà eliminato tra {{days}} giorni.",
+    "upgrade": "Aggiorna piano"
+  },
   "filter": {
     "all": "Tutti",
     "none": "Nessuno",