Merge pull request #994 from internxt/feat/data-privacy-week-banner

[MKT-236]: feat/new data privacy week banner
internxt · Jan 15, 2024 · 300e3eb · 300e3eb · vercel · Jan 15, 2024
2 parents 0f48cbc + f9c638f
commit 300e3eb
Show file tree

Hide file tree

Showing 9 changed files with 106 additions and 47 deletions.
diff --git a/src/app/banners/BannerWrapper.tsx b/src/app/banners/BannerWrapper.tsx
@@ -5,9 +5,9 @@ import { PlanState } from '../store/slices/plan';
 import { userSelectors } from '../store/slices/user';
 import { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
-import Banner from './Banner';
+import FeaturesBanner from './FeaturesBanner';
 
-const SHOW_BANNER_COOKIE_NAME = 'show_soft_sale_banner';
+const SHOW_BANNER_COOKIE_NAME = 'show_data_privacy_banner';
 
 const BannerWrapper = (): JSX.Element => {
   const [showBanner, setShowBanner] = useState(false);
@@ -17,10 +17,10 @@ const BannerWrapper = (): JSX.Element => {
   const isNewAccount = useAppSelector(userSelectors.hasSignedToday);
   const isLocalStorage = localStorageService.get(SHOW_BANNER_COOKIE_NAME);
   const shouldShowBanner = userPlan === 'free' && !isLocalStorage;
-  const expireDate = new Date('2024-01-10T23:59:59.000Z');
-  const today = new Date();
 
-  const daysLeft = Math.floor((expireDate.getTime() - today.getTime()) / (1000 * 3600 * 24));
+  useEffect(() => {
+    handleBannerDisplay();
+  }, [isTutorialCompleted, userPlan, isNewAccount]);
 
   const onCloseBanner = () => {
     localStorageService.set(SHOW_BANNER_COOKIE_NAME, 'false');
@@ -33,11 +33,7 @@ const BannerWrapper = (): JSX.Element => {
     }
   }
 
-  useEffect(() => {
-    handleBannerDisplay();
-  }, [isTutorialCompleted, userPlan, isNewAccount]);
-
-  return <Banner showBanner={showBanner} onClose={onCloseBanner} />;
+  return <FeaturesBanner showBanner={showBanner} onClose={onCloseBanner} />;
 };
 
 export default BannerWrapper;
diff --git a/src/app/banners/BlackFridayBanner.tsx → src/app/banners/FeaturesBanner.tsx b/src/app/banners/BlackFridayBanner.tsx → src/app/banners/FeaturesBanner.tsx
@@ -1,8 +1,7 @@
-import { CircleWavyCheck, X } from '@phosphor-icons/react';
+import { CheckCircle, CircleWavyCheck, X } from '@phosphor-icons/react';
 import { useTranslationContext } from 'app/i18n/provider/TranslationProvider';
-import ChristmasBG from '../../assets/images/banner/christmas_banner_bg.png';
 
-const BlackFridayBanner = ({ showBanner, onClose }: { showBanner: boolean; onClose: () => void }): JSX.Element => {
+const FeaturesBanner = ({ showBanner, onClose }: { showBanner: boolean; onClose: () => void }): JSX.Element => {
   const { translate } = useTranslationContext();
 
   const features = [
@@ -29,35 +28,40 @@ const BlackFridayBanner = ({ showBanner, onClose }: { showBanner: boolean; onClo
   return (
     <div
       className={`${showBanner ? 'flex' : 'hidden'} 
-         absolute bottom-0 left-0 right-0 top-0 z-10 bg-black bg-opacity-40`}
+         absolute bottom-0 left-0 right-0 top-0 z-10 bg-opacity-40`}
     >
       <div
-        style={{ backgroundImage: `url(${ChristmasBG})`, backgroundSize: 'cover', backgroundPosition: 'center' }}
-        className={`absolute left-1/2 top-1/2 flex h-auto w-full max-w-4xl -translate-x-1/2 -translate-y-1/2
-        transform flex-col overflow-hidden rounded-2xl bg-gradient-to-r from-black to-primary text-gray-100`}
+        className={`absolute left-1/2 top-1/2 flex h-auto w-full max-w-4xl -translate-x-1/2 -translate-y-1/2 transform
+        flex-col overflow-hidden rounded-2xl bg-primary text-gray-100`}
       >
         <button className="absolute right-0 m-5 flex w-auto text-white" onClick={onClose}>
           <X size={32} />
         </button>
         <div className="flex w-full flex-row justify-between px-20 py-16">
-          <div className="flex  w-full flex-col items-start justify-between">
-            <div className="flex w-full max-w-xxs flex-col space-y-4">
+          <div className="flex  w-full flex-col items-start justify-between space-y-10">
+            <div className="flex w-full max-w-[297px] flex-col space-y-4">
               <p className="text-3xl font-semibold text-white">{translate('blackFridayBanner.header')}</p>
               <p className="text-5xl font-bold text-white">{translate('blackFridayBanner.title')}</p>
             </div>
-            <button
-              onClick={() => {
-                window.open('https://internxt.com/lifetime#payment', '_blank', 'noopener noreferrer');
-              }}
-              className="w-max rounded-lg bg-primary px-5 py-3 text-xl font-medium text-white"
-            >
-              {translate('blackFridayBanner.cta')}
-            </button>
+            <div className="flex flex-col space-y-4">
+              <button
+                onClick={() => {
+                  window.open(`${process.env.REACT_APP_WEBSITE_URL}/pricing`, '_blank', 'noopener noreferrer');
+                }}
+                className="w-max rounded-lg bg-white px-5 py-3 text-lg font-medium text-black"
+              >
+                {translate('blackFridayBanner.cta')}
+              </button>
+              <div className="flex flex-row items-center space-x-2">
+                <CheckCircle size={24} className="text-white" />
+                <p className="text-lg font-medium text-white">{translate('lifetimeBanner.guarantee')}</p>
+              </div>
+            </div>
           </div>
           <div className="flex h-full w-full flex-col space-y-6 text-white">
             {features.map((item) => (
               <div className="flex w-full flex-row items-center space-x-4" key={item.title}>
-                <CircleWavyCheck weight={'fill'} className="text-primary" size={32} />
+                <CircleWavyCheck weight={'fill'} className="text-white" size={32} />
                 <p className="whitespace-nowrap text-xl font-semibold">{item.title}</p>
               </div>
             ))}
@@ -68,4 +72,4 @@ const BlackFridayBanner = ({ showBanner, onClose }: { showBanner: boolean; onClo
   );
 };
 
-export default BlackFridayBanner;
+export default FeaturesBanner;
diff --git a/src/app/i18n/locales/cn.json b/src/app/i18n/locales/cn.json
@@ -3,6 +3,20 @@
     "title": "在应用程序上管理您的文件、帐户和订阅",
     "logOut": "登出"
   },
+  "blackFridayBanner": {
+    "header": "省 70%!",
+    "title": "为数据隐私周做好准备",
+    "cta": "选择计划",
+    "guarantee": "30天退款保证",
+    "features": {
+      "discount": "在月度和年度计划上节省",
+      "safeCloud": "安全可靠的云存储",
+      "openSource": "开源和透明",
+      "endToEnd": "端到端加密传输",
+      "unauthorized": "无未经授权访问",
+      "offerEnds": "优惠截至日期为1月29日"
+    }
+  },
   "valentinesBanner": {
     "title": "爱无极限！",
     "subtitle": "使用代码 VDAY 即可享受2TB的九折套餐",

diff --git a/src/app/i18n/locales/de.json b/src/app/i18n/locales/de.json
@@ -3,6 +3,20 @@
     "title": "Verwalte deine Dateien, dein Konto und dein Abonnement in der App",
     "logOut": "Log-out"
   },
+  "blackFridayBanner": {
+    "header": "Spare 70%!",
+    "title": "Bereiten Sie sich auf die Datenschutzwoche vor",
+    "cta": "Plan auswählen",
+    "guarantee": "30-tägige Geld-zurück-Garantie",
+    "features": {
+      "discount": "Sparen Sie bei monatlichen und jährlichen Plänen",
+      "safeCloud": "Sicherer und geschützter Cloud-Speicher",
+      "openSource": "Open Source und transparent",
+      "endToEnd": "Ende-zu-Ende-verschlüsselte Übertragungen",
+      "unauthorized": "Kein unberechtigter Zugriff",
+      "offerEnds": "Angebot endet am 29. Januar"
+    }
+  },
   "valentinesBanner": {
     "title": "Liebe ohne grenzen!",
     "subtitle": "Erhalte 90 % Rabatt auf unseren 2-TB-Plan mit dem Code VDAY",

diff --git a/src/app/i18n/locales/en.json b/src/app/i18n/locales/en.json
@@ -4,16 +4,17 @@
     "logOut": "Log Out"
   },
   "blackFridayBanner": {
-    "header": "Save big on privacy.",
-    "title": "Internxt’s Christmas Deal",
-    "cta": "Get the deal!",
+    "header": "Save 70%!",
+    "title": "Get ready for Data Privacy Week",
+    "cta": "Choose plan",
+    "guarantee": "30-day money-back guarantee",
     "features": {
-      "discount": "Get 50% discount on all annual plans",
+      "discount": "Save on monthly & annual plans",
       "safeCloud": "Safe and secure cloud storage",
       "openSource": "Open source and transparent",
       "endToEnd": "End-to-end encrypted transfers",
       "unauthorized": "No unauthorized access",
-      "offerEnds": "Offer ends January 7th"
+      "offerEnds": "Offer ends January 29th"
     }
   },
   "valentinesBanner": {

diff --git a/src/app/i18n/locales/es.json b/src/app/i18n/locales/es.json
@@ -4,16 +4,17 @@
     "logOut": "Cerrar sesión"
   },
   "blackFridayBanner": {
-    "header": "¡Elige la privacidad!",
-    "title": "Oferta navideña de Internxt",
-    "cta": "¡Obtén el descuento!",
+    "header": "¡Ahorra un 70%!",
+    "title": "Prepárate para la Semana de la Privacidad de Datos",
+    "cta": "Elige un plan",
+    "guarantee": "Garantía de devolución de 30 días",
     "features": {
-      "discount": "50% de descuento en planes lifetime",
+      "discount": "Ahorra en suscripciones mensuales y anuales",
       "safeCloud": "Almacenamiento seguro en la nube",
       "openSource": "Código abierto y transparente",
-      "endToEnd": "Cifrado de extremo a extremo",
+      "endToEnd": "Transferencias cifradas de extremo a extremo",
       "unauthorized": "Sin acceso no autorizado",
-      "offerEnds": "La oferta termina el 7 de Enero"
+      "offerEnds": "La oferta finaliza el 29 de enero"
     }
   },
   "valentinesBanner": {

diff --git a/src/app/i18n/locales/fr.json b/src/app/i18n/locales/fr.json
@@ -4,16 +4,17 @@
     "logOut": "Déconnexion"
   },
   "blackFridayBanner": {
-    "header": "Choisissez la confidentialité.",
-    "title": "Internxt offre de Noël",
-    "cta": "Obtenez l'offre",
+    "header": "Économisez 70% !",
+    "title": "Préparez-vous pour la Semaine de la Protection des Données",
+    "cta": "Choisir un plan",
+    "guarantee": "Garantie de remboursement de 30 jours",
     "features": {
-      "discount": "-50% sur notre plans lifetime",
-      "safeCloud": "Stockage en nuage sécurisé",
+      "discount": "Économisez sur les plans mensuels et annuels",
+      "safeCloud": "Stockage cloud sûr et sécurisé",
       "openSource": "Open source et transparent",
-      "endToEnd": "Transferts cryptés de bout en bout",
+      "endToEnd": "Transferts chiffrés de bout en bout",
       "unauthorized": "Aucun accès non autorisé",
-      "offerEnds": "L'offre se termine le 7 janvier"
+      "offerEnds": "L'offre se termine le 29 janvier"
     }
   },
   "valentinesBanner": {

diff --git a/src/app/i18n/locales/it.json b/src/app/i18n/locales/it.json
@@ -8,6 +8,20 @@
     "subtitle": "Get 90% off our 2TB plan with code VDAY",
     "cta": "Get the deal"
   },
+  "blackFridayBanner": {
+    "header": "Risparmia il 70%!",
+    "title": "Preparati per la Settimana della Privacy dei Dati",
+    "cta": "Scegli un piano",
+    "guarantee": "Garanzia di rimborso entro 30 giorni",
+    "features": {
+      "discount": "Risparmia su piani mensili e annuali",
+      "safeCloud": "Archiviazione cloud sicura e protetta",
+      "openSource": "Open source e trasparente",
+      "endToEnd": "Trasferimenti crittografati end-to-end",
+      "unauthorized": "Nessun accesso non autorizzato",
+      "offerEnds": "L'offerta termina il 29 gennaio"
+    }
+  },
   "lifetimeBanner": {
     "label": "Archiviazione annuale a metà prezzo!",
     "title": "Risparmia il 50% sulle nostre sottoscrizioni annuali!",

diff --git a/src/app/i18n/locales/ru.json b/src/app/i18n/locales/ru.json
@@ -8,6 +8,20 @@
     "subtitle": "Получите скидку 90% на наш тарифный план 2 ТБ с кодом VDAY",
     "cta": "Получить скидку"
   },
+  "blackFridayBanner": {
+    "header": "Скидка 70%!",
+    "title": "Подготовьтесь к Неделе онлайн безопасности",
+    "cta": "Выбрать тарифный план",
+    "guarantee": "Гарантия возврата денег в течение 30 дней",
+    "features": {
+      "discount": "Скидка на месячные и годовые тарифные планы",
+      "safeCloud": "Надежное и безопасное облачное хранилище",
+      "openSource": "Открытый исходный код и прозрачность",
+      "endToEnd": "Передача данных в зашифрованном виде",
+      "unauthorized": "Отсутствие несанкционированного доступа",
+      "offerEnds": "Предложение до 29 января"
+    }
+  },
   "lifetimeBanner": {
     "label": "Годовой абонемент за полцены!",
     "title": "Экономия 50% на годовой подписке!",