[PB-6492]:feat/new banners for storage advertisement

package.json

@@ -10,7 +10,7 @@
     "@internxt/css-config": "1.1.1",
     "@internxt/lib": "=1.5.1",
     "@internxt/sdk": "=1.20.1",
-    "@internxt/ui": "=0.1.21",
+    "@internxt/ui": "=0.1.27",
     "@phosphor-icons/react": "^2.1.10",
     "@popperjs/core": "^2.11.6",
     "@reduxjs/toolkit": "^1.6.0",

src/app/core/types.ts

@@ -156,6 +156,8 @@ export enum LocalStorageItem {
   StpatricksTheme = 'stpatricks_theme_enabled',
   AnniversaryTheme = 'anniversary_theme_enabled',
   SubscriptionEndingModalClosed = 'subscription_ending_modal_closed',
+  StorageWarningBannerDismissals = 'storageWarningBannerDismissals',
+
 }
 
 export enum LocalStorageProtectedItem {

src/app/i18n/locales/de.json

@@ -1025,6 +1025,27 @@
         "title": "Cleaner freischalten",
         "description": "Upgrade jetzt, um deine Dateien zu optimieren und Speicherplatz freizugeben."
       }
+    },
+    "reachingUsageBanner": {
+      "lowWarning": {
+        "title": "Hol dir mehr Speicherplatz für deine Dateien",
+        "descriptionLabelLine1": "Schalte zusätzlichen Speicher mit einem exklusiven **Rabatt von 85 %** auf dein Upgrade frei",
+        "descriptionLabelLine2": "Greife auf erweiterte Funktionen wie Dateiversionsverlauf, Rclone, NAS-Unterstützung, Premium-Support und mehr zu"
+      },
+      "midWarning": {
+        "title": "Dein Speicher füllt sich",
+        "descriptionLabelLine1": "Führe heute ein Upgrade mit einem exklusiven **Rabatt von 85 %** durch und lade weiter ohne Unterbrechungen hoch",
+        "descriptionLabelLine2": "Erhalte mehr Speicher sowie erweiterte Funktionen wie Dateiversionsverlauf, NAS-Unterstützung, Rclone-Integration und Premium-Support",
+        "sidenavStorageText": "Mehr Speicher 85 % Rabatt"
+      },
+      "highWarning": {
+        "title": "Dein Speicher ist fast voll",
+        "descriptionLabelLine1": "Möglicherweise kannst du bald keine neuen Dateien mehr hochladen",
+        "descriptionLabelLine2": "Führe jetzt ein Upgrade mit einem exklusiven Rabatt von 85 % durch, um deine Dateien ohne Grenzen weiter zu speichern und zu synchronisieren",
+        "sidenavStorageText": "Speicher kaufen 85 % Rabatt"
+      },
+      "close": "Schließen",
+      "cta": "Angebot sichern"
     }
   },
   "error": {

src/app/i18n/locales/en.json

@@ -1046,6 +1046,27 @@
         "title": "Unlock Cleaner",
         "description": "Upgrade now to keep your files optimized and free up space."
       }
+    },
+    "reachingUsageBanner": {
+      "lowWarning": {
+        "title": "Get more space for your files",
+        "descriptionLabelLine1": "Unlock additional storage with an exclusive **85% discount** on your upgrade",
+        "descriptionLabelLine2": "Access advanced features like file version history, Rclone, NAS support, premium support, and more"
+      },
+      "midWarning": {
+        "title": "Your storage is filling up",
+        "descriptionLabelLine1": "Upgrade today with an exclusive **85% discount** and keep uploading without interruptions",
+        "descriptionLabelLine2": "Get more storage plus advanced features like file version history, NAS support, Rclone integration, and premium support",
+        "sidenavStorageText": "More space 85% off"
+      },
+      "highWarning": {
+        "title": "Your storage is almost full",
+        "descriptionLabelLine1": "You may soon be unable to upload new files",
+        "descriptionLabelLine2": "Upgrade now with an exclusive 85% discount to continue storing and syncing your files without limits",
+        "sidenavStorageText": "Buy space 85% off"
+      },
+      "close": "Close",
+      "cta": "Get offer"
     }
   },
   "error": {

src/app/i18n/locales/es.json

@@ -1025,6 +1025,27 @@
         "title": "Desbloquear Cleaner",
         "description": "Mejora tu plan ahora para mantener tus archivos optimizados y liberar espacio."
       }
+    },
+    "reachingUsageBanner": {
+      "lowWarning": {
+        "title": "Consigue más espacio para tus archivos",
+        "descriptionLabelLine1": "Desbloquea almacenamiento adicional con un **85% de descuento** exclusivo en tu mejora",
+        "descriptionLabelLine2": "Accede a funciones avanzadas como el historial de versiones de archivos, Rclone, compatibilidad con NAS, soporte premium y mucho más"
+      },
+      "midWarning": {
+        "title": "Tu almacenamiento se está llenando",
+        "descriptionLabelLine1": "Mejora hoy con un **85% de descuento** exclusivo y sigue subiendo archivos sin interrupciones",
+        "descriptionLabelLine2": "Consigue más almacenamiento además de funciones avanzadas como el historial de versiones de archivos, compatibilidad con NAS, integración con Rclone y soporte premium",
+        "sidenavStorageText": "Más espacio 85% dto."
+      },
+      "highWarning": {
+        "title": "Tu almacenamiento está casi lleno",
+        "descriptionLabelLine1": "Es posible que pronto no puedas subir nuevos archivos",
+        "descriptionLabelLine2": "Mejora ahora con un 85% de descuento exclusivo para seguir almacenando y sincronizando tus archivos sin límites",
+        "sidenavStorageText": "Compra espacio 85% dto."
+      },
+      "close": "Cerrar",
+      "cta": "Obtener oferta"
     }
   },
   "error": {

src/app/i18n/locales/fr.json

@@ -1025,6 +1025,27 @@
         "title": "Débloquer Cleaner",
         "description": "Mettez à niveau pour optimiser vos fichiers et libérer de l’espace."
       }
+    },
+    "reachingUsageBanner": {
+      "lowWarning": {
+        "title": "Obtenez plus d'espace pour vos fichiers",
+        "descriptionLabelLine1": "Débloquez un espace de stockage supplémentaire avec une **réduction exclusive de 85 %** sur votre mise à niveau",
+        "descriptionLabelLine2": "Accédez à des fonctionnalités avancées comme l'historique des versions de fichiers, Rclone, la prise en charge NAS, le support premium et bien plus encore"
+      },
+      "midWarning": {
+        "title": "Votre espace de stockage se remplit",
+        "descriptionLabelLine1": "Passez à la version supérieure dès aujourd'hui avec une **réduction exclusive de 85 %** et continuez à envoyer vos fichiers sans interruption",
+        "descriptionLabelLine2": "Obtenez plus de stockage ainsi que des fonctionnalités avancées comme l'historique des versions de fichiers, la prise en charge NAS, l'intégration Rclone et le support premium",
+        "sidenavStorageText": "Plus d'espace -85 %"
+      },
+      "highWarning": {
+        "title": "Votre espace de stockage est presque plein",
+        "descriptionLabelLine1": "Vous pourriez bientôt ne plus pouvoir envoyer de nouveaux fichiers",
+        "descriptionLabelLine2": "Passez à la version supérieure dès maintenant avec une réduction exclusive de 85 % pour continuer à stocker et synchroniser vos fichiers sans limites",
+        "sidenavStorageText": "Acheter de l'espace -85 %"
+      },
+      "close": "Fermer",
+      "cta": "Profiter de l'offre"
     }
   },
   "error": {

src/app/i18n/locales/it.json

@@ -1046,6 +1046,27 @@
         "title": "Sblocca Cleaner",
         "description": "Aggiorna ora per mantenere i tuoi file ottimizzati e liberare spazio."
       }
+    },
+    "reachingUsageBanner": {
+      "lowWarning": {
+        "title": "Ottieni più spazio per i tuoi file",
+        "descriptionLabelLine1": "Sblocca spazio di archiviazione aggiuntivo con uno **sconto esclusivo dell'85%** sul tuo upgrade",
+        "descriptionLabelLine2": "Accedi a funzionalità avanzate come la cronologia delle versioni dei file, Rclone, il supporto NAS, il supporto premium e molto altro"
+      },
+      "midWarning": {
+        "title": "Il tuo spazio di archiviazione si sta riempiendo",
+        "descriptionLabelLine1": "Esegui l'upgrade oggi con uno **sconto esclusivo dell'85%** e continua a caricare senza interruzioni",
+        "descriptionLabelLine2": "Ottieni più spazio di archiviazione e funzionalità avanzate come la cronologia delle versioni dei file, il supporto NAS, l'integrazione con Rclone e il supporto premium",
+        "sidenavStorageText": "Più spazio -85%"
+      },
+      "highWarning": {
+        "title": "Il tuo spazio di archiviazione è quasi pieno",
+        "descriptionLabelLine1": "Presto potresti non essere più in grado di caricare nuovi file",
+        "descriptionLabelLine2": "Esegui subito l'upgrade con uno sconto esclusivo dell'85% per continuare ad archiviare e sincronizzare i tuoi file senza limiti",
+        "sidenavStorageText": "Acquista spazio -85%"
+      },
+      "close": "Chiudi",
+      "cta": "Ottieni l'offerta"
     }
   },
   "error": {

src/app/i18n/locales/ru.json

@@ -1025,6 +1025,27 @@
         "title": "Разблокировать Cleaner",
         "description": "Обновите план, чтобы оптимизировать файлы и освободить место."
       }
+    },
+    "reachingUsageBanner": {
+      "lowWarning": {
+        "title": "Получите больше места для ваших файлов",
+        "descriptionLabelLine1": "Откройте дополнительное хранилище с эксклюзивной **скидкой 85%** на повышение тарифа",
+        "descriptionLabelLine2": "Получите доступ к расширенным функциям, таким как история версий файлов, Rclone, поддержка NAS, премиум-поддержка и многое другое"
+      },
+      "midWarning": {
+        "title": "Ваше хранилище заполняется",
+        "descriptionLabelLine1": "Перейдите на улучшенный тариф сегодня с эксклюзивной **скидкой 85%** и продолжайте загружать файлы без перерывов",
+        "descriptionLabelLine2": "Получите больше места, а также расширенные функции, такие как история версий файлов, поддержка NAS, интеграция с Rclone и премиум-поддержка",
+        "sidenavStorageText": "Больше места -85%"
+      },
+      "highWarning": {
+        "title": "Ваше хранилище почти заполнено",
+        "descriptionLabelLine1": "Возможно, скоро вы не сможете загружать новые файлы",
+        "descriptionLabelLine2": "Перейдите на улучшенный тариф сейчас с эксклюзивной скидкой 85%, чтобы продолжать хранить и синхронизировать файлы без ограничений",
+        "sidenavStorageText": "Купить место -85%"
+      },
+      "close": "Закрыть",
+      "cta": "Получить предложение"
     }
   },
   "error": {

src/app/i18n/locales/tw.json

@@ -1046,6 +1046,27 @@
         "title": "解鎖 Cleaner",
         "description": "升級以最佳化您的檔案並釋放空間。"
       }
+    },
+    "reachingUsageBanner": {
+      "lowWarning": {
+        "title": "為你的檔案取得更多空間",
+        "descriptionLabelLine1": "升級時享有專屬 **85% 折扣**，解鎖額外儲存空間",
+        "descriptionLabelLine2": "使用進階功能，例如檔案版本記錄、Rclone、NAS 支援、優先客服等"
+      },
+      "midWarning": {
+        "title": "你的儲存空間即將用盡",
+        "descriptionLabelLine1": "今天就以專屬 **85% 折扣**升級，持續上傳不中斷",
+        "descriptionLabelLine2": "取得更多儲存空間，以及檔案版本記錄、NAS 支援、Rclone 整合和優先客服等進階功能",
+        "sidenavStorageText": "更多空間 85% 折扣"
+      },
+      "highWarning": {
+        "title": "你的儲存空間幾乎已滿",
+        "descriptionLabelLine1": "你可能很快將無法上傳新檔案",
+        "descriptionLabelLine2": "立即以專屬 85% 折扣升級，不受限制地繼續儲存與同步你的檔案",
+        "sidenavStorageText": "購買空間 85% 折扣"
+      },
+      "close": "關閉",
+      "cta": "取得優惠"
     }
   },
   "error": {

src/app/i18n/locales/zh.json

@@ -1046,6 +1046,27 @@
         "title": "解锁 Cleaner",
         "description": "升级以优化您的文件并释放存储空间。"
       }
+    },
+    "reachingUsageBanner": {
+      "lowWarning": {
+        "title": "为你的文件获取更多空间",
+        "descriptionLabelLine1": "升级时享受专属 **85% 折扣**，解锁额外存储空间",
+        "descriptionLabelLine2": "使用高级功能，例如文件版本历史记录、Rclone、NAS 支持、优先客服等"
+      },
+      "midWarning": {
+        "title": "你的存储空间即将用满",
+        "descriptionLabelLine1": "今天就以专属 **85% 折扣**升级，持续上传不中断",
+        "descriptionLabelLine2": "获取更多存储空间，以及文件版本历史记录、NAS 支持、Rclone 集成和优先客服等高级功能",
+        "sidenavStorageText": "更多空间 85% 折扣"
+      },
+      "highWarning": {
+        "title": "你的存储空间几乎已满",
+        "descriptionLabelLine1": "你可能很快将无法上传新文件",
+        "descriptionLabelLine2": "立即以专属 85% 折扣升级，不受限制地继续存储和同步你的文件",
+        "sidenavStorageText": "购买空间 85% 折扣"
+      },
+      "close": "关闭",
+      "cta": "获取优惠"
     }
   },
   "error": {

src/components/SidenavWrapper.tsx

@@ -10,7 +10,6 @@ import { RootState } from 'app/store';
 import { useAppDispatch, useAppSelector } from 'app/store/hooks';
 import { planSelectors } from 'app/store/slices/plan';
 import { sharedThunks } from 'app/store/slices/sharedLinks';
-import { uiActions } from 'app/store/slices/ui';
 import logo from 'assets/icons/small-logo.svg';
 import { useSidenavCollapsed } from 'hooks/useSidenavCollapsed';
 import { useSidenavNavigation } from 'hooks/useSidenavNavigation';
@@ -24,6 +23,12 @@ import { useReferralParamsChange } from 'views/Drive/hooks/useReferralParamsChan
 import WorkspaceSelectorContainer from 'views/Home/components/WorkspaceSelectorContainer';
 import WorkspaceSelectorSkeleton from 'views/Home/components/WorkspaceSelectorSkeleton';
 import ReferralBanner from './ReferralBanner';
+import { CloudWarningIcon } from '@phosphor-icons/react';
+import {
+  calculateUsedPercentage,
+  getReachedStorageWarningStage,
+  openUpgradeSpecialOffer,
+} from 'views/Home/utils/storageWarning';
 
 const SidenavPrimaryAction = ({
   user,
@@ -69,6 +74,10 @@ const SidenavWrapper = () => {
   const userUsage = planUsage > 0 ? bytesToString(planUsage) : '0GB';
   const isReferralEligible = useAppSelector((state: RootState) => state.referrals.isEligible);
 
+  const isFreeUser = subscription?.type === 'free';
+  const usedPercentage = calculateUsedPercentage(planUsage, planLimit);
+  const reachedStorageStage = isFreeUser ? getReachedStorageWarningStage(usedPercentage) : undefined;
+
   useReferralParamsChange();
 
   useEffect(() => {
@@ -90,14 +99,17 @@ const SidenavWrapper = () => {
     return subscription?.type === 'free' || isLifetimeAvailable;
   };
 
-  const handleUpgradeClick = () => {
-    navigationService.openPreferencesDialog({
-      section: 'account',
-      subsection: 'plans',
-      workspaceUuid: selectedWorkspace?.workspaceUser.workspaceId,
-    });
-    dispatch(uiActions.setIsPreferencesDialogOpen(true));
-  };
+  const handleUpgradeClick = openUpgradeSpecialOffer;
+
+  const storageAdvertisement = reachedStorageStage?.advertisementKey ? (
+    <span className="flex flex-row gap-0.5 items-center">
+      <CloudWarningIcon
+        className="size-5 text-yellow-60"
+        weight={reachedStorageStage.key === 'highWarning' ? 'fill' : 'regular'}
+      />
+      <p className="text-sm font-semibold text-gray-80">{translate(reachedStorageStage.advertisementKey)} </p>
+    </span>
+  ) : undefined;
 
   const handleReferralClick = () => {
     if (user) {
@@ -141,6 +153,9 @@ const SidenavWrapper = () => {
           onUpgradeClick: handleUpgradeClick,
           upgradeLabel: isUpgradeAvailable() ? translate('preferences.account.plans.upgrade') : undefined,
           isLoading: isLoadingPlanUsage && isLoadingPlanLimit && isLoadingBusinessLimitAndUsage,
+          barClassName: reachedStorageStage?.barClassName,
+          containerClassName: reachedStorageStage?.containerClassName,
+          advertisement: storageAdvertisement,
         }}
       />
       {isReferralEligible && (

src/index.scss

@@ -28,8 +28,10 @@
     --color-red: 255 13 0;
     --color-red-dark: 230 11 0;
     --color-orange: 255 149 0;
+    --color-orange-60: 229 134 0;
     --color-orange-dark: 230 134 0;
     --color-yellow: 255 204 0;
+    --color-yellow-60: 229 183 0;
     --color-yellow-dark: 230 184 0;
     --color-green: 50 195 86;
     --color-green-dark: 45 174 77;
@@ -51,6 +53,9 @@
     --color-gray-80: 58 58 59;
     --color-gray-90: 44 44 48;
     --color-gray-100: 24 24 27;
+    --color-alert: 255 249 229;
+    --color-alert-dark: 255 244 204;
+    --color-danger: 229 11 0;
   }
 
   :root.dark {
@@ -61,8 +66,10 @@
     --color-red: 255 61 51;
     --color-red-dark: 255 36 26;
     --color-orange: 255 164 36;
+    --color-orange-60: 229 147 32;
     --color-orange-dark: 255 153 10;
     --color-yellow: 255 214 51;
+    --color-yellow-60: 229 192 45;
     --color-yellow-dark: 255 209 26;
     --color-green: 72 208 106;
     --color-green-dark: 52 203 90;
@@ -84,6 +91,9 @@
     --color-gray-80: 229 229 235;
     --color-gray-90: 243 243 248;
     --color-gray-100: 249 249 252;
+    --color-alert: 76 64 15;
+    --color-alert-dark: 127 107 25;
+    --color-danger: 229 54 45;
   }
 }
 
@@ -96,8 +106,10 @@
     --color-red: 255 61 51;
     --color-red-dark: 255 36 26;
     --color-orange: 255 164 36;
+    --color-orange-60: 229 147 32;
     --color-orange-dark: 255 153 10;
     --color-yellow: 255 214 51;
+    --color-yellow-60: 229 192 45;
     --color-yellow-dark: 255 209 26;
     --color-green: 72 208 106;
     --color-green-dark: 52 203 90;
@@ -119,6 +131,10 @@
     --color-gray-80: 229 229 235;
     --color-gray-90: 243 243 248;
     --color-gray-100: 249 249 252;
+    --color-alert: 76 64 15;
+    --color-alert-dark: 127 107 25;
+    --color-danger: 229 54 45;
+
   }
 
   :root:not(.dark) {
@@ -129,8 +145,10 @@
     --color-red: 255 13 0;
     --color-red-dark: 230 11 0;
     --color-orange: 255 149 0;
+    --color-orange-60: 229 134 0;
     --color-orange-dark: 230 134 0;
     --color-yellow: 255 204 0;
+    --color-yellow-60: 229 183 0;
     --color-yellow-dark: 230 184 0;
     --color-green: 50 195 86;
     --color-green-dark: 45 174 77;
@@ -152,6 +170,10 @@
     --color-gray-80: 58 58 59;
     --color-gray-90: 44 44 48;
     --color-gray-100: 24 24 27;
+    --color-alert: 255 249 229;
+    --color-alert-dark: 255 244 204;
+    --color-danger: 229 11 0;
+
   }
 }