[MKT-1165]feat/change language of drive-web when arrives from website

src/components/banners/LoginBFBanner.tsx

@@ -9,6 +9,7 @@ import {
 } from '@phosphor-icons/react';
 import React from 'react';
 import { useRouter } from 'next/router';
+import { addLangToDriveURL } from '@/lib/auth';
 
 const cardsTitles = {
   en: {
@@ -151,7 +152,7 @@ const LoginBFBanner = () => {
                 className="relative flex h-14 w-48 flex-row items-center justify-center space-x-4 rounded-lg bg-primary px-8 text-base text-white transition duration-100 focus:outline-none focus-visible:bg-primary-dark active:bg-primary-dark sm:text-lg"
                 onClick={() => {
                   window.location.replace(
-                    'https://drive.internxt.com/new?utm_source=website&utm_medium=banner&utm_campaign=blackfriday',
+                    addLangToDriveURL('https://drive.internxt.com/new?utm_source=website&utm_medium=banner&utm_campaign=blackfriday'),
                   );
                 }}
               >

src/components/banners/TryInternxtBanner.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { X } from '@phosphor-icons/react';
 import Image from "next/image";
 import { getImage } from '@/lib/getImage';
+import { addLangToDriveURL } from '@/lib/auth';
 
 const TryInternxtBanner = ({ textContent, url }) => {
   const [bannerVisible, setBannerVisible] = useState(false);
@@ -40,7 +41,7 @@ const TryInternxtBanner = ({ textContent, url }) => {
               <button
                 className="relative flex flex-row items-center justify-center space-x-4 rounded-full bg-primary px-8 py-3 text-base text-white transition duration-100 focus:outline-none focus-visible:bg-primary-dark active:bg-primary-dark sm:text-lg"
                 onClick={() => {
-                  window.open(url, '_blank');
+                  window.open(addLangToDriveURL(url), '_blank');
                 }}
               >
                 {textContent.cta}

src/components/comparison/TableSection.tsx

@@ -2,9 +2,12 @@ import { Fragment } from 'react';
 import { UilCheck, UilMinus } from '@iconscout/react-unicons';
 import Link from 'next/link';
 import { SIGNUP_DRIVE_WEB } from '@/constants';
+import { useRouter } from 'next/router';
+import { addLangToDriveURL } from '@/lib/auth';
 import { getImage } from '@/lib/getImage';
 
 const TableSection = ({ textContent }) => {
+  const router = useRouter();
   const competitors = [
     {
       name: 'Internxt',
@@ -598,7 +601,7 @@ const TableSection = ({ textContent }) => {
                   <td className="p-0" />
                   <td className="relative p-0">
                     <Link
-                      href={SIGNUP_DRIVE_WEB}
+                      href={addLangToDriveURL(SIGNUP_DRIVE_WEB, router.locale)}
                       target="_blank"
                       rel="noopener noreferrer"
                       id="get-started-link"

src/components/home/ThirdFeaturesSection.tsx

@@ -3,6 +3,7 @@ import { Gift } from '@phosphor-icons/react';
 import React from 'react';
 import RevealX from '@/components/components/RevealX';
 import { getImage } from '@/lib/getImage';
+import { addLangToDriveURL } from '@/lib/auth';
 
 const ThirdFeaturesSection = ({ textContent }) => {
   return (
@@ -33,7 +34,7 @@ const ThirdFeaturesSection = ({ textContent }) => {
             <button
               className="rounded-lg bg-primary px-5 py-3 text-white hover:bg-primary-dark"
               onClick={() => {
-                window.open('https://drive.internxt.com/new', '_blank', 'noopener noreferrer');
+                window.open(addLangToDriveURL('https://drive.internxt.com/new'), '_blank', 'noopener noreferrer');
               }}
             >
               {textContent.cta}

src/components/layout/components/LanguageMobileBox.tsx

@@ -1,6 +1,7 @@
 import { Disclosure, Transition } from '@headlessui/react';
 import { CaretDown, CaretUp, Globe } from '@phosphor-icons/react';
 import { useRouter } from 'next/router';
+import cookies from '@/lib/cookies';
 
 interface LanguageMobileBoxProps {
   darkMode?: boolean;
@@ -64,6 +65,7 @@ export default function LanguageMobileBox({ darkMode }: LanguageMobileBoxProps)
                       href={finalHref}
                       onClick={(e) => {
                         e.preventDefault();
+                        cookies.setCookie({ cookieName: 'i18next', cookieValue: language.lang });
                         router.push(router.asPath, undefined, { locale: language.lang });
                       }}
                       className="block w-full py-2 text-center"

src/components/layout/footers/Footer.tsx

@@ -12,6 +12,7 @@ import { notificationService } from '@/components/Snackbar';
 import { FooterText } from '@/assets/types/layout/types';
 import { getImage } from '@/lib/getImage';
 import { Breadcrumb, BreadcrumbItem } from '@/components/shared/Breadcrumb';
+import { addLangToDriveURL } from '@/lib/auth';
 
 export default function Footer({
   textContent,
@@ -347,10 +348,10 @@ export default function Footer({
                   <div
                     className={`flex flex-col gap-1 text-xs ${darkMode ? 'text-cool-gray-30' : 'text-cool-gray-60'}`}
                   >
-                    <a href="https://drive.internxt.com/new" target="_top" className="hover:text-primary">
+                    <a href={addLangToDriveURL('https://drive.internxt.com/new', lang)} target="_top" className="hover:text-primary">
                       {textContent.FooterSection.sections.join.signup}
                     </a>
-                    <a href="https://drive.internxt.com/login" target="_top" className="hover:text-primary">
+                    <a href={addLangToDriveURL('https://drive.internxt.com/login', lang)} target="_top" className="hover:text-primary">
                       {textContent.FooterSection.sections.join.login}
                     </a>
                     <Link
@@ -1075,10 +1076,10 @@ export default function Footer({
                         darkMode ? 'bg-gray-71 text-green-120' : 'text-gray-60'
                       } space-y-8 p-4`}
                     >
-                      <a href="https://drive.internxt.com/new" target="_top" className="hover:text-primary">
+                      <a href={addLangToDriveURL('https://drive.internxt.com/new', lang)} target="_top" className="hover:text-primary">
                         {textContent.FooterSection.sections.join.signup}
                       </a>
-                      <a href="https://drive.internxt.com/login" target="_top" className="hover:text-primary">
+                      <a href={addLangToDriveURL('https://drive.internxt.com/login', lang)} target="_top" className="hover:text-primary">
                         {textContent.FooterSection.sections.join.login}
                       </a>
                       <Link

src/components/layout/navbars/Navbar.tsx

@@ -3,7 +3,7 @@ import Link from 'next/link';
 import { Transition, Disclosure } from '@headlessui/react';
 import Hamburger from 'hamburger-react';
 
-import { checkout, goToLoginURL, IFRAME_AUTH_ENABLED } from '@/lib/auth';
+import { addLangToDriveURL, checkout, goToLoginURL, IFRAME_AUTH_ENABLED } from '@/lib/auth';
 import LanguageBox from '../components/LanguageBox';
 import { useRouter } from 'next/router';
 import { CaretDown, CaretUp } from '@phosphor-icons/react';
@@ -413,7 +413,7 @@ export default function Navbar(props: Readonly<NavbarProps>) {
                           setMenuState(false);
                         }}
                         tabIndex={0}
-                        href="https://drive.internxt.com/login"
+                        href={addLangToDriveURL('https://drive.internxt.com/login', props.lang)}
                         className={`flex w-full translate-y-0 px-8 py-4 text-primary outline-none transition delay-300 duration-300 ${
                           menuState ? 'opacity-100' : '-translate-y-4 opacity-0'
                         }`}

src/components/partnersTemplate/HeroSection.tsx

@@ -12,6 +12,8 @@ import {
 } from '@phosphor-icons/react';
 import Link from 'next/link';
 import { currencyService } from '@/services/currency.service';
+import { useRouter } from 'next/router';
+import { addLangToDriveURL } from '@/lib/auth';
 import { useEffect, useState } from 'react';
 import { HighlightText } from '../components/HighlightText';
 
@@ -75,6 +77,7 @@ export default function HeroSection({
     return typeof text === 'string' ? text.replace(/{{discount}}/g, percentOff) : text;
   };
 
+  const router = useRouter();
   const redirection = isUltimatePlan
     ? 'https://drive.internxt.com/checkout?planId=price_1TRoAJFAOdcgaBMQveT6cebN&planType=individual&currency=eur&mode=payment'
     : '#billingButtons';
@@ -261,7 +264,7 @@ export default function HeroSection({
         <div className="flex h-min w-full flex-col justify-center gap-4">
           <div className="flex w-full flex-row items-start gap-4">
             <Link
-              href={redirection}
+              href={addLangToDriveURL(redirection, router.locale)}
               className="z-10 flex items-center justify-center whitespace-nowrap rounded-sm-6 bg-primary px-7 py-3 text-base font-medium text-white hover:bg-primary-dark"
             >
               {textContent.claimDeal}

src/components/refer-a-friend/HeroSection.tsx

@@ -6,12 +6,15 @@ import dynamic from 'next/dynamic';
 
 const Animation = dynamic(() => import('../home/components/Animation'));
 import { ReferAFriendText } from '@/assets/types/refer-a-friend';
+import { useRouter } from 'next/router';
+import { addLangToDriveURL } from '@/lib/auth';
 
 interface HeroSectionForHomeProps {
   textContent: ReferAFriendText['HeroSection'];
 }
 
 export default function HeroSection({ textContent }: Readonly<HeroSectionForHomeProps>): JSX.Element {
+  const router = useRouter();
   const HighlightText = ({ text, className = '' }) => {
     const parts = text.split(/(\*\*.*?\*\*)/);
 
@@ -59,7 +62,7 @@ export default function HeroSection({ textContent }: Readonly<HeroSectionForHome
         <div className="flex h-min w-full flex-col justify-center gap-4">
           <div className="flex w-full flex-row items-start gap-4">
             <a
-              href={'https://drive.internxt.com/?openReferrals=true'}
+              href={addLangToDriveURL('https://drive.internxt.com/?openReferrals=true', router.locale)}
               className="no z-10 flex h-[48px] w-1/2 items-center justify-center whitespace-nowrap rounded-sm-6 bg-primary  py-4 text-base font-medium text-white hover:bg-primary-dark lg:w-[177px]"
             >
               {textContent.cta}

src/components/shared/CtaSection.tsx

@@ -1,5 +1,7 @@
 import { getImage } from '@/lib/getImage';
 import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { addLangToDriveURL } from '@/lib/auth';
 
 const CtaSection = ({
   textContent,
@@ -16,6 +18,7 @@ const CtaSection = ({
   bgImage?: string;
   customDescription?: React.ReactNode;
 }) => {
+  const router = useRouter();
   const defaultBgImage = getImage('/images/cyber-awareness/Background.svg');
 
   return (
@@ -32,7 +35,7 @@ const CtaSection = ({
         </div>
         {url && (
           <Link
-            href={url}
+            href={addLangToDriveURL(url, router.locale)}
             target={target}
             className={`flex rounded-lg px-5 py-3 text-lg font-medium ${
               bgImage && bgImage !== defaultBgImage

src/components/shared/DownloadComponent.tsx

@@ -3,6 +3,7 @@ import React, { useEffect, useState } from 'react';
 import { isMobile } from 'react-device-detect';
 import { ArrowCircleDown, CaretRight } from '@phosphor-icons/react';
 import { useRouter } from 'next/router';
+import { addLangToDriveURL } from '@/lib/auth';
 
 interface DownloadLinks {
   Android: string;
@@ -158,12 +159,12 @@ const DesktopSection: React.FC<{
   </div>
 );
 
-const WebSection: React.FC<{ textContent: TextContent }> = ({ textContent }) => (
+const WebSection: React.FC<{ textContent: TextContent; lang: string }> = ({ textContent, lang }) => (
   <div className="flex flex-col items-center justify-between">
     <p className="pb-6 text-3xl font-medium text-black lg:text-30">{textContent.Web}</p>
     <a
       className="hidden flex-row items-center space-x-1 text-lg font-semibold text-primary hover:underline lg:flex"
-      href="https://drive.internxt.com/app"
+      href={addLangToDriveURL('https://drive.internxt.com/app', lang)}
       target="_blank"
       rel="noreferrer"
     >
@@ -290,7 +291,7 @@ const DownloadComponent: React.FC<DownloadComponentProps> = ({ textContent, lang
 
         {!isMobile && (
           <div className="hidden lg:flex">
-            <WebSection textContent={textContent} />
+            <WebSection textContent={textContent} lang={lang} />
           </div>
         )}
 

src/components/what-does-google-know-about-me/ManageGoogleDataSection.tsx

@@ -2,6 +2,7 @@ import { Trash } from '@phosphor-icons/react';
 import RenderDescription from '@/components/shared/RenderDescription';
 import Image from 'next/image';
 import { getImage } from '@/lib/getImage';
+import { addLangToDriveURL } from '@/lib/auth';
 
 const ManageGoogleDataSection = ({ textContent }) => {
   const numberedList = textContent.section2.numberedList.map((item) => (
@@ -47,7 +48,7 @@ const ManageGoogleDataSection = ({ textContent }) => {
 
         <Image
           onClick={() => {
-            window.open('https://drive.internxt.com/new', '_blank', 'noopener noreferrer');
+            window.open(addLangToDriveURL('https://drive.internxt.com/new'), '_blank', 'noopener noreferrer');
           }}
           width={897}
           height={200}
@@ -90,7 +91,7 @@ const ManageGoogleDataSection = ({ textContent }) => {
         />
         <Image
           onClick={() => {
-            window.open('https://drive.internxt.com/new', '_blank', 'noopener noreferrer');
+            window.open(addLangToDriveURL('https://drive.internxt.com/new'), '_blank', 'noopener noreferrer');
           }}
           width={897}
           height={200}

src/components/what-does-google-know-about-me/WhatGoogleKnowsSection.tsx

@@ -2,6 +2,7 @@ import { MagnifyingGlass } from '@phosphor-icons/react';
 import RenderDescription from '../shared/RenderDescription';
 import Image from 'next/image';
 import { getImage } from '@/lib/getImage';
+import { addLangToDriveURL } from '@/lib/auth';
 
 const WhatGoogleKnowsSection = ({ textContent }) => {
   const numberedList = textContent.section1.numberedList.map((item, index) => (
@@ -56,7 +57,7 @@ const WhatGoogleKnowsSection = ({ textContent }) => {
         </div>
         <Image
           onClick={() => {
-            window.open('https://drive.internxt.com/new', '_blank', 'noopener noreferrer');
+            window.open(addLangToDriveURL('https://drive.internxt.com/new'), '_blank', 'noopener noreferrer');
           }}
           width={897}
           height={200}

src/constants.ts

@@ -17,6 +17,8 @@ export const INTERNXT_URL = 'https://internxt.com';
 export const COOKIE_DOMAIN = 'internxt.com';
 export const IMPACT_LOGIN_USER = 'https://app.impact.com/login.user';
 
+export const SUPPORTED_LANGUAGES = ['en', 'es', 'fr', 'it', 'zh', 'ru', 'de', 'zh-tw', 'pt-br'];
+
 export const EXCLUDED_PATHS_FOR_BANNER = [
   '/pricing',
   '/partner-discount',

src/lib/auth.ts

@@ -1,13 +1,33 @@
 import axios from 'axios';
 import { PromoCodeProps } from './types';
 import { PASSWORD_REGEX } from '@/components/cloud-object-storage/integrated-checkout/components/InputsComponent';
-import { isCelloExpired } from '@/lib/cookies';
+import cookies, { isCelloExpired } from '@/lib/cookies';
+import { SUPPORTED_LANGUAGES } from '@/constants';
 
 export const IFRAME_AUTH_ENABLED = false;
 export const REDIRECT_AUTH_ENABLED = true;
 const AUTH_FLOW_URL = 'https://drive.internxt.com';
 const OBJECT_STORAGE_USER_ACTIVATION_URL = process.env.NEXT_PUBLIC_OBJECT_STORAGE_USER_ACTIVATION_URL as string;
 
+const getCurrentLang = (lang?: string) => {
+  const currentLang = lang ?? (typeof document !== 'undefined' ? cookies.getCookie('i18next') : undefined);
+  return currentLang && SUPPORTED_LANGUAGES.includes(currentLang) ? currentLang : undefined;
+};
+
+export function addLangToDriveURL(url: string, lang?: string): string {
+  let driveURL: URL;
+  try {
+    driveURL = new URL(url);
+  } catch {
+    return url;
+  }
+  if (driveURL.origin !== AUTH_FLOW_URL) return url;
+  const resolvedLang = getCurrentLang(lang);
+  if (!resolvedLang) return url;
+  const separator = driveURL.search ? '&' : '?';
+  return `${url}${separator}lng=${resolvedLang}`;
+}
+
 export const openAuthDialog = (view: 'login' | 'signup' | 'recover'): void => {
   if (view === 'login') {
     //
@@ -86,8 +106,9 @@ const getAuthFlowLoginURL = ({
     search.set('autoSubmit', 'true');
   }
 
-  if (lang) {
-    search.set('lng', lang);
+  const resolvedLang = getCurrentLang(lang);
+  if (resolvedLang) {
+    search.set('lng', resolvedLang);
   }
 
   const searchQuery = search.toString();
@@ -134,8 +155,9 @@ const getAuthFlowCreateUserURL = ({
     search.set('skipSignupIfLoggedIn', skipSignupIfLoggedIn.toString());
   }
 
-  if (lang) {
-    search.set('lng', lang);
+  const resolvedLang = getCurrentLang(lang);
+  if (resolvedLang) {
+    search.set('lng', resolvedLang);
   }
 
   const searchQuery = search.toString();
@@ -232,7 +254,7 @@ export function signup(
 
 export function recover(data: Record<string, unknown>): void {
   if (REDIRECT_AUTH_ENABLED) {
-    window.location.href = AUTH_FLOW_URL + '/remove';
+    window.location.href = addLangToDriveURL(AUTH_FLOW_URL + '/remove');
   }
 
   if (IFRAME_AUTH_ENABLED) {
@@ -285,6 +307,9 @@ export function checkout({
     mode && params.set('mode', mode ? mode : 'subscription');
     gclid && params.set('gclid', gclid);
 
+    const lang = getCurrentLang();
+    lang && params.set('lng', lang);
+
     appendTrackingParams(params, trackingParams);
 
     if (!isCelloExpired()) {
@@ -324,6 +349,10 @@ export function checkoutForPcComponentes({
     currency && params.set('currency', currency);
     mode && params.set('mode', mode ? mode : 'subscription');
     trialToken && params.set('mobileToken', trialToken);
+
+    const lang = getCurrentLang();
+    lang && params.set('lng', lang);
+
     const checkoutUrl = AUTH_FLOW_URL + `${pathname}?${params.toString()}`;
 
     window.open(checkoutUrl, '_self', 'noopener noreferrer');