Merge branch 'master' into feat/password-protected-sharings-alone

internxt · Jan 16, 2024 · c39aa50 · c39aa50
2 parents dd2fa71 + ba58f48
commit c39aa50
Show file tree

Hide file tree

Showing 45 changed files with 488 additions and 323 deletions.
diff --git a/package.json b/package.json
@@ -1,13 +1,13 @@
 {
   "name": "drive-web",
-  "version": "v1.0.217",
+  "version": "v1.0.231",
   "private": true,
   "dependencies": {
     "@headlessui/react": "1.7.5",
     "@iconscout/react-unicons": "^1.1.6",
     "@internxt/inxt-js": "=1.2.21",
     "@internxt/lib": "^1.2.0",
-    "@internxt/sdk": "1.4.61",
+    "@internxt/sdk": "^1.4.62",
     "@phosphor-icons/react": "^2.0.10",
     "@popperjs/core": "^2.11.6",
     "@reduxjs/toolkit": "^1.6.0",
@@ -59,6 +59,7 @@
     "react-i18next": "^12.1.4",
     "react-image-file-resizer": "^0.4.8",
     "react-infinite-scroll-component": "6.1.0",
+    "react-live-chat-loader": "^2.8.2",
     "react-loading-skeleton": "^2.2.0",
     "react-pdf": "^5.4.0",
     "react-popper": "^2.3.0",

diff --git a/public/index.html b/public/index.html
diff --git a/src/app/auth/views/Auth/SignupBlog.tsx b/src/app/auth/views/Auth/SignupBlog.tsx
@@ -69,9 +69,9 @@ export default function SignupBlog(): JSX.Element {
       <Helmet>
         <link rel="canonical" href={`${process.env.REACT_APP_HOSTNAME}/signup-blog`} />
       </Helmet>
-      <div className="flex flex-col items-center justify-center overflow-hidden">
+      <div className="flex flex-col items-center justify-center overflow-hidden bg-white">
         <div className="flex w-full flex-row overflow-hidden bg-gradient-to-br from-primary/20 to-white">
-          <div className="mb-10 mt-5 flex w-full flex-col items-center justify-center px-5 text-center sm:ml-11 sm:w-full sm:max-w-xs sm:items-start sm:px-0 sm:text-left">
+          <div className="mb-10 mt-5 flex w-full flex-col items-center justify-center px-5 text-center text-gray-100 dark:text-gray-1 sm:ml-11 sm:w-full sm:max-w-xs sm:items-start sm:px-0 sm:text-left">
             <p className="text-3xl font-semibold">
               {textContent[lang].title.line1}
               <span className="text-primary">{textContent[lang].title.blueText}</span>

diff --git a/src/app/banners/Banner.tsx b/src/app/banners/Banner.tsx
@@ -1,6 +1,9 @@
 import { X } from '@phosphor-icons/react';
-import NeonBlur from 'assets/images/banner/infinity.svg';
+import LifetimeBig from 'assets/images/banner/discount.png';
 import { useTranslationContext } from 'app/i18n/provider/TranslationProvider';
+import { CheckCircle } from '@phosphor-icons/react/dist/ssr';
+
+const WEBSITE_URL = process.env.REACT_APP_WEBSITE_URL;
 
 const Banner = ({ showBanner, onClose }: { showBanner: boolean; onClose: () => void }): JSX.Element => {
   const { translate } = useTranslationContext();
@@ -11,69 +14,35 @@ const Banner = ({ showBanner, onClose }: { showBanner: boolean; onClose: () => v
          absolute bottom-0 left-0 right-0 top-0 z-10 bg-black/40`}
     >
       <div
-        className={`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-primary-dark  text-gray-100`}
-        style={{
-          backgroundImage: `url(${NeonBlur})`,
-          backgroundPosition: 'center',
-          backgroundRepeat: 'no-repeat',
-          backgroundSize: '1100px 611px',
-        }}
+        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`}
       >
-        <button className="absolute right-0 m-5 flex w-auto text-white" onClick={onClose}>
+        <button className="absolute right-0 z-50 m-5 flex w-auto text-white" onClick={onClose}>
           <X size={32} />
         </button>
-        <div className="flex flex-col px-40 py-10">
-          <div className="flex w-full flex-col items-center space-y-9">
-            <div className="flex flex-col text-center">
-              <p className="text-5xl font-bold text-white ">{translate('lifetimeBanner.title')}</p>
-              <p className=" pt-4 text-2xl font-medium text-white">{translate('lifetimeBanner.description')}</p>
-            </div>
-            <div className="flex flex-row space-x-6">
-              <div className="flex flex-col items-center space-y-1 rounded-xl bg-white px-4 py-3">
-                <div className="flex items-center justify-center rounded-full bg-gray-5 px-3 py-1 text-base font-semibold text-primary">
-                  <p>{translate('lifetimeBanner.cards.1.space')}</p>
-                </div>
-                <div className="flex">
-                  <p className={' flex flex-row items-start space-x-0.5 whitespace-nowrap font-medium text-gray-80'}>
-                    <span className={'text-semibold text-2xl'}>€</span>
-                    <span className="price text-5xl font-bold">{translate('lifetimeBanner.cards.1.price')}</span>
-                  </p>
-                </div>
-              </div>
-              <div className="-mb-3 flex flex-col items-center justify-center space-y-1 rounded-xl bg-white px-4">
-                <div className="flex items-center justify-center rounded-full bg-gray-5 px-3 py-1 text-base font-semibold text-primary">
-                  <p>{translate('lifetimeBanner.cards.2.space')}</p>
-                </div>
-                <div className="flex">
-                  <p className={' flex flex-row items-start space-x-0.5 whitespace-nowrap font-medium text-gray-80'}>
-                    <span className={'text-semibold text-2xl'}>€</span>
-                    <span className="price text-5xl font-bold">{translate('lifetimeBanner.cards.2.price')}</span>
-                  </p>
-                </div>
-              </div>
-              <div className="flex flex-col items-center justify-center space-y-1 rounded-xl bg-white px-4 py-3">
-                <div className="flex items-center justify-center rounded-full bg-gray-5 px-3 py-1 text-base font-semibold text-primary">
-                  <p>{translate('lifetimeBanner.cards.3.space')}</p>
-                </div>
-                <div className="flex">
-                  <p className={' flex flex-row items-start space-x-0.5 whitespace-nowrap font-medium text-gray-80'}>
-                    <span className={'text-semibold text-2xl'}>€</span>
-                    <span className="price text-5xl font-bold">{translate('lifetimeBanner.cards.3.price')}</span>
-                  </p>
-                </div>
-              </div>
+        <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>
+          <div className="z-50 flex w-full max-w-[460px] 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>
             </div>
-            <div className="flex">
+            <div className="flex flex-col space-y-6">
               <button
-                className="relative flex flex-row items-center justify-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"
+                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={() => {
-                  window.open('https://internxt.com/pricing', '_blank', 'noopener,noreferrer');
                   onClose();
+                  window.open(`${WEBSITE_URL}/pricing`, '_blank', 'noopener noreferrer');
                 }}
               >
                 {translate('lifetimeBanner.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>

diff --git a/src/app/banners/BannerWrapper.tsx b/src/app/banners/BannerWrapper.tsx
@@ -1,29 +1,29 @@
-import localStorageService, { STORAGE_KEYS } from 'app/core/services/local-storage.service';
-import { RootState } from 'app/store';
-import { useAppSelector } from 'app/store/hooks';
-import { PlanState } from 'app/store/slices/plan';
-import { userSelectors } from 'app/store/slices/user';
+import localStorageService, { STORAGE_KEYS } from '../core/services/local-storage.service';
+import { RootState } from '../store';
+import { useAppSelector } from '../store/hooks';
+import { PlanState } from '../store/slices/plan';
+import { userSelectors } from '../store/slices/user';
 import { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
-import BlackFridayBanner from './BlackFridayBanner';
-import { getCookie, setCookie } from 'app/analytics/utils';
+import FeaturesBanner from './FeaturesBanner';
 
-const SHOW_BANNER_COOKIE_NAME = 'showBanner';
+const SHOW_BANNER_COOKIE_NAME = 'show_data_privacy_banner';
 
 const BannerWrapper = (): JSX.Element => {
   const [showBanner, setShowBanner] = useState(false);
   const plan = useSelector<RootState, PlanState>((state) => state.plan);
   const isTutorialCompleted = localStorageService.get(STORAGE_KEYS.SIGN_UP_TUTORIAL_COMPLETED);
   const userPlan = plan.subscription?.type;
   const isNewAccount = useAppSelector(userSelectors.hasSignedToday);
-  const shouldShowBanner = userPlan === 'free' && !getCookie(SHOW_BANNER_COOKIE_NAME);
-  const expireDate = new Date('2024-01-01');
-  const today = new Date();
+  const isLocalStorage = localStorageService.get(SHOW_BANNER_COOKIE_NAME);
+  const shouldShowBanner = userPlan === 'free' && !isLocalStorage;
 
-  const daysLeft = Math.floor((expireDate.getTime() - today.getTime()) / (1000 * 3600 * 24));
+  useEffect(() => {
+    handleBannerDisplay();
+  }, [isTutorialCompleted, userPlan, isNewAccount]);
 
   const onCloseBanner = () => {
-    setCookie(SHOW_BANNER_COOKIE_NAME, 'false', daysLeft);
+    localStorageService.set(SHOW_BANNER_COOKIE_NAME, 'false');
     setShowBanner(false);
   };
 
@@ -33,11 +33,7 @@ const BannerWrapper = (): JSX.Element => {
     }
   }
 
-  useEffect(() => {
-    handleBannerDisplay();
-  }, [isTutorialCompleted, userPlan, isNewAccount]);
-
-  return <BlackFridayBanner showBanner={showBanner} onClose={onCloseBanner} />;
+  return <FeaturesBanner showBanner={showBanner} onClose={onCloseBanner} />;
 };
 
 export default BannerWrapper;
diff --git a/src/app/banners/CyberAwarenessBanner.tsx b/src/app/banners/CyberAwarenessBanner.tsx
@@ -12,8 +12,8 @@ const CyberAwarenessBanner = ({ showBanner, onClose }: { showBanner: boolean; on
       }  fixed bottom-0 left-0 right-0 top-0 z-50 h-screen bg-black/50 px-5 lg:px-0`}
     >
       <div
-        className={`${showBanner ? 'flex' : 'hidden'} absolute left-1/2 top-1/2 flex
-        w-auto max-w-4xl -translate-x-1/2 -translate-y-1/2 flex-col rounded-2xl text-gray-100`}
+        className={`${showBanner ? 'flex' : 'hidden'} text-neutral-900 absolute left-1/2 top-1/2
+        flex w-auto max-w-4xl -translate-x-1/2 -translate-y-1/2 flex-col rounded-2xl`}
         style={{
           backgroundImage: `url(${BackgroundImage})`,
           backgroundPosition: 'center',

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/banners/SummerBanner.tsx b/src/app/banners/SummerBanner.tsx
@@ -10,8 +10,8 @@ const SummerBanner = ({ showBanner, onClose }: { showBanner: boolean; onClose: (
       }  fixed bottom-0 left-0 right-0 top-0 z-50 h-screen bg-black/50 px-5 lg:px-0`}
     >
       <div
-        className={`${showBanner ? 'flex' : 'hidden'} absolute left-1/2 top-1/2 flex
-        w-max max-w-4xl -translate-x-1/2 -translate-y-1/2 flex-col rounded-2xl text-gray-100`}
+        className={`${showBanner ? 'flex' : 'hidden'} text-neutral-900 absolute left-1/2 top-1/2
+        flex w-max max-w-4xl -translate-x-1/2 -translate-y-1/2 flex-col rounded-2xl`}
         style={{
           backgroundImage: `url(${BackgroundImage})`,
           backgroundPosition: 'center',

diff --git a/src/app/core/components/Navbar/AccountPopover.tsx b/src/app/core/components/Navbar/AccountPopover.tsx
@@ -25,7 +25,9 @@ export default function AccountPopover({
   const { translate } = useTranslationContext();
   const fullName = `${user.name} ${user.lastname}`;
 
-  const avatarWrapper = <AvatarWrapper diameter={36} fullName={fullName} avatarSrcURL={user.avatar} />;
+  const avatarWrapper = (
+    <AvatarWrapper diameter={36} style={{ minWidth: 36 }} fullName={fullName} avatarSrcURL={user.avatar} />
+  );
 
   const percentageUsed = Math.round((plan.planUsage / plan.planLimit) * 100);
 

diff --git a/src/app/core/components/Navbar/NavbarGlobalSearch.tsx b/src/app/core/components/Navbar/NavbarGlobalSearch.tsx
@@ -225,6 +225,7 @@ const Navbar = (props: NavbarProps) => {
             <input
               ref={searchInput}
               id="globalSearchInput"
+              data-cy="globalSearchInput"
               autoComplete="off"
               spellCheck="false"
               type="text"

diff --git a/src/app/core/components/Sidenav/Sidenav.tsx b/src/app/core/components/Sidenav/Sidenav.tsx
@@ -64,7 +64,7 @@ const Sidenav = (props: SidenavProps) => {
       </div>
       <div className="flex grow flex-col overflow-x-auto border-r border-gray-5 px-2">
         <div className="mt-2">
-          <SidenavItem label={translate('sideNav.drive')} to="/" Icon={FolderSimple} />
+          <SidenavItem label={translate('sideNav.drive')} to="/" Icon={FolderSimple} iconDataCy="sideNavDriveIcon" />
           <SidenavItem label={translate('sideNav.photos')} to="/photos" Icon={ImageSquare} />
           <SidenavItem label={translate('sideNav.backups')} to="/backups" Icon={ClockCounterClockwise} />
           <SidenavItem

diff --git a/src/app/core/components/Sidenav/SidenavItem/SidenavItem.tsx b/src/app/core/components/Sidenav/SidenavItem/SidenavItem.tsx
@@ -10,17 +10,31 @@ interface SidenavItemProps {
   to?: string;
   Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
   onClick?: () => void;
+  iconDataCy?: string;
 }
 
-const SidenavItem = ({ label, to, Icon, onClick, showNew, notifications }: SidenavItemProps): JSX.Element => {
+const SidenavItem = ({
+  label,
+  to,
+  Icon,
+  onClick,
+  showNew,
+  notifications,
+  iconDataCy,
+}: SidenavItemProps): JSX.Element => {
   const isActive = !!matchPath(window.location.pathname, { path: to, exact: true });
 
   const { translate } = useTranslationContext();
 
   const content: ReactNode = (
     <div className="flex h-10 w-full items-center justify-between">
       <div className="flex items-center">
-        <Icon weight={isActive ? 'fill' : undefined} size={24} className={isActive ? 'text-primary' : 'text-gray-80'} />
+        <Icon
+          weight={isActive ? 'fill' : undefined}
+          size={24}
+          className={isActive ? 'text-primary' : 'text-gray-80'}
+          data-cy={iconDataCy}
+        />
         <span className={`ml-2 ${isActive ? 'text-primary dark:text-white' : 'text-gray-80 hover:text-gray-80'}`}>
           {label}
         </span>

diff --git a/src/app/core/config/views.ts b/src/app/core/config/views.ts
@@ -51,14 +51,12 @@ const views: Array<{
   { id: AppView.Auth, component: AuthView },
   { id: AppView.ButtonAuth, component: ButtonAuth },
   { id: AppView.RecoverAccount, component: RecoverAccountView },
-  { id: AppView.Drive, component: DriveView },
   { id: AppView.Recents, component: RecentsView },
   { id: AppView.Trash, component: TrashView },
   { id: AppView.Backups, component: BackupsView },
   { id: AppView.Shared, component: SharedView },
   { id: AppView.Photos, component: PhotosView },
   { id: AppView.Preferences, component: Preferences },
-  { id: AppView.DriveItems, component: DriveView },
   { id: AppView.FolderFileNotFound, component: FolderFileNotFound },
   { id: AppView.TeamsJoin, component: JoinTeamView },
   { id: AppView.GuestAcceptInvite, component: GuestAcceptInvitationView },
@@ -78,7 +76,9 @@ const views: Array<{
   { id: AppView.ChangeEmail, component: ChangeEmailView },
   { id: AppView.RequestAccess, component: RequestAccess },
   { id: AppView.UniversalLinkSuccess, component: UniversalLinkSuccessView },
-
+  // Leave these routes last, otherwise it will match react router and may cause malfunctioning.
+  { id: AppView.DriveItems, component: DriveView },
+  { id: AppView.Drive, component: DriveView },
   { id: AppView.NotFound, component: NotFoundView },
 ];