Merge pull request #1022 from internxt/feat/lifetime-banner-for-soft-…

…sale

[MKT-253]: feat/add banner for lifetime soft sale

src/app/banners/Banner.tsx

@@ -1,5 +1,5 @@
 import { X } from '@phosphor-icons/react';
-import LifetimeBig from 'assets/images/banner/discount.png';
+import LifetimeBig from 'assets/images/banner/lifetime_big.png';
 import { useTranslationContext } from 'app/i18n/provider/TranslationProvider';
 import { CheckCircle } from '@phosphor-icons/react/dist/ssr';
 
@@ -15,26 +15,26 @@ const Banner = ({ showBanner, onClose }: { showBanner: boolean; onClose: () => v
     >
       <div
         className={`text-neutral-900 absolute left-1/2 top-1/2 flex h-auto max-w-4xl -translate-x-1/2
-        -translate-y-1/2 flex-col overflow-hidden rounded-2xl bg-gradient-to-b from-[#060C40]  to-primary`}
+        -translate-y-1/2 flex-col overflow-hidden rounded-2xl bg-primary-dark`}
       >
         <button className="absolute right-0 z-50 m-5 flex w-auto text-white" onClick={onClose}>
           <X size={32} />
         </button>
         <div className="flex w-screen max-w-[800px] flex-col py-10 pl-10">
-          <div className="absolute right-12 top-0">
-            <img src={LifetimeBig} alt="Discount label" height={475} width={190} />
+          <div className="absolute right-0 top-0">
+            <img src={LifetimeBig} alt="Discount label" height={260} width={508} />
           </div>
-          <div className="z-50 flex w-full max-w-[460px] flex-col space-y-8">
+          <div className="z-50 flex w-full  flex-col space-y-8">
             <div className="flex flex-col space-y-4">
-              <p className="text-3xl font-semibold text-white">{translate('lifetimeBanner.label')}</p>
-              <p className="text-5xl font-bold text-white">{translate('lifetimeBanner.title')}</p>
+              <p className="pr-20 text-3xl font-semibold text-white">{translate('lifetimeBanner.label')}</p>
+              <p className="max-w-[500px] text-5xl font-bold text-white">{translate('lifetimeBanner.title')}</p>
             </div>
             <div className="flex flex-col space-y-6">
               <button
                 className="relative flex w-max flex-row items-center space-x-4 rounded-lg bg-white px-7 py-3 text-base font-medium text-primary transition duration-100 focus:outline-none focus-visible:bg-gray-1 active:bg-gray-1 sm:text-lg"
                 onClick={() => {
                   onClose();
-                  window.open(`${WEBSITE_URL}/pricing`, '_blank', 'noopener noreferrer');
+                  window.open(`${WEBSITE_URL}/lifetime`, '_blank', 'noopener noreferrer');
                 }}
               >
                 {translate('lifetimeBanner.cta')}

src/app/banners/BannerWrapper.tsx

@@ -5,9 +5,10 @@ import { PlanState } from '../store/slices/plan';
 import { userSelectors } from '../store/slices/user';
 import { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
-import FeaturesBanner from './FeaturesBanner';
+import Banner from './Banner';
 
-const SHOW_BANNER_COOKIE_NAME = 'show_data_privacy_banner';
+const SHOW_BANNER_COOKIE_NAME = 'show_soft_banner_sale';
+const OFFER_OFF_DAY = new Date('2024-02-12');
 
 const BannerWrapper = (): JSX.Element => {
   const [showBanner, setShowBanner] = useState(false);
@@ -16,7 +17,9 @@ const BannerWrapper = (): JSX.Element => {
   const userPlan = plan.subscription?.type;
   const isNewAccount = useAppSelector(userSelectors.hasSignedToday);
   const isLocalStorage = localStorageService.get(SHOW_BANNER_COOKIE_NAME);
-  const shouldShowBanner = userPlan === 'free' && !isLocalStorage;
+  const isOfferOffDay = new Date() > OFFER_OFF_DAY;
+
+  const shouldShowBanner = userPlan === 'free' && !isLocalStorage && !isOfferOffDay;
 
   useEffect(() => {
     handleBannerDisplay();
@@ -33,7 +36,7 @@ const BannerWrapper = (): JSX.Element => {
     }
   }
 
-  return <FeaturesBanner showBanner={showBanner} onClose={onCloseBanner} />;
+  return <Banner showBanner={showBanner} onClose={onCloseBanner} />;
 };
 
 export default BannerWrapper;

src/app/drive/components/DriveExplorer/DriveExplorer.tsx

@@ -66,6 +66,7 @@ import DriveTopBarActions from './components/DriveTopBarActions';
 import { AdvancedSharedItem } from '../../../share/types';
 import moveItemsToTrash from 'use_cases/trash/move-items-to-trash';
 import StopSharingAndMoveToTrashDialogWrapper from '../StopSharingAndMoveToTrashDialogWrapper/StopSharingAndMoveToTrashDialogWrapper';
+import BannerWrapper from '../../../banners/BannerWrapper';
 
 const TRASH_PAGINATION_OFFSET = 50;
 const UPLOAD_ITEMS_LIMIT = 1000;
@@ -633,6 +634,7 @@ const DriveExplorer = (props: DriveExplorerProps): JSX.Element => {
           itemToShareName={itemsWithSharing[0].plainName ?? itemsWithSharing[0]?.name}
         />
       )}
+      <BannerWrapper />
 
       <div className="z-0 flex h-full w-full max-w-full grow">
         <div className="flex w-1 grow flex-col">

src/app/i18n/locales/de.json

@@ -23,10 +23,10 @@
     "cta": "Hol dir das Angebot"
   },
   "lifetimeBanner": {
-    "label": "Jahreslagerung zum halben Preis!",
-    "title": "Sparen Sie 50% bei unseren Jahresabonnements!",
+    "label": "Suchen Sie einen sicheren Datenspeicher fürs Leben?",
+    "title": "Schützen Sie Ihre Dateien mit lebenslangen Internxt-Plänen!",
     "cta": "Plan auswählen",
-    "guarantee": "30-tägige Geld-zurück-Garantie"
+    "guarantee": "Geld-zurück-Garantie innerhalb von 30 Tagen"
   },
   "lang": {
     "title": "Sprache",

src/app/i18n/locales/en.json

@@ -23,9 +23,9 @@
     "cta": "Get the deal"
   },
   "lifetimeBanner": {
-    "label": "Annual storage for half the price!",
-    "title": "Save 50% on our yearly subscriptions!",
-    "cta": "Choose plan",
+    "label": "Need secure storage for life?",
+    "title": "Protect your files forever with our lifetime plans!",
+    "cta": "Choose your plan",
     "guarantee": "30-day money-back guarantee"
   },
   "notFound": {

src/app/i18n/locales/es.json

@@ -23,9 +23,9 @@
     "cta": "Obtén la oferta"
   },
   "lifetimeBanner": {
-    "label": "¡Tu plan anual a mitad de precio!",
-    "title": "¡Ahorra un 50% en nuestros planes anuales!",
-    "cta": "Elige un plan",
+    "label": "¿Necesitas almacenamiento seguro de por vida?",
+    "title": "¡Asegura tus archivos de por vida con nuestros planes!",
+    "cta": "Elige tu plan",
     "guarantee": "Garantía de devolución de 30 días"
   },
   "lang": {

src/app/i18n/locales/fr.json

@@ -23,9 +23,9 @@
     "cta": "Obtenir l'offre"
   },
   "lifetimeBanner": {
-    "label": "Stockage annuel à moitié prix !",
-    "title": "Économisez 50% sur nos abonnements annuels !",
-    "cta": "Choisissez un plan",
+    "label": "Cherchez-vous un espace de stockage sécurisé à vie?",
+    "title": "Protégez vos fichiers avec les plans à vie d'Internxt!",
+    "cta": "Choisir un plan",
     "guarantee": "Garantie de remboursement sous 30 jours"
   },
   "lang": {

src/app/i18n/locales/it.json

@@ -23,8 +23,8 @@
     }
   },
   "lifetimeBanner": {
-    "label": "Archiviazione annuale a metà prezzo!",
-    "title": "Risparmia il 50% sulle nostre sottoscrizioni annuali!",
+    "label": "Cercate uno spazio sicuro per i vostri dati per tutta la vita?",
+    "title": "Proteggete i vostri file con i piani a vita di Internxt!",
     "cta": "Scegli il piano",
     "guarantee": "Garanzia di rimborso entro 30 giorni"
   },

src/app/i18n/locales/ru.json

@@ -23,8 +23,8 @@
     }
   },
   "lifetimeBanner": {
-    "label": "Годовой абонемент за полцены!",
-    "title": "Экономия 50% на годовой подписке!",
+    "label": "Ищите надежное хранилище данных на всю жизнь?",
+    "title": "Защитите файлы с помощью пожизненных планов Internxt!",
     "cta": "Выбрать план",
     "guarantee": "Гарантия возврата денег в течение 30 дней"
   },

src/app/i18n/locales/zh.json

@@ -23,10 +23,10 @@
     "cta": "达成交易"
   },
   "lifetimeBanner": {
-    "label": "半价年度存储！",
-    "title": "在我们的年度订阅上节省50％！",
+    "label": "寻找终身安全的数据存储？",
+    "title": "通过Internxt的终身计划保护您的文件！",
     "cta": "选择计划",
-    "guarantee": "30天退款保证"
+    "guarantee": "30天内退款保证"
   },
   "notFound": {
     "header": "Error 404",