fix(SW-705): Updated logic for language switcher

components/LanguageSwitcher/LanguageSwitcherContent/index.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import { usePathname, useSearchParams } from "next/navigation"
 import { useIntl } from "react-intl"
 
 import { Lang, languages } from "@/constants/languages"
@@ -10,6 +11,8 @@ import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import useLang from "@/hooks/useLang"
 import { useTrapFocus } from "@/hooks/useTrapFocus"
 
+import { replaceUrlPart } from "./utils"
+
 import styles from "./languageSwitcherContent.module.css"
 
 import type { LanguageSwitcherContentProps } from "@/types/components/languageSwitcher/languageSwitcher"
@@ -18,12 +21,15 @@ export default function LanguageSwitcherContent({
   urls,
   onLanguageSwitch,
 }: LanguageSwitcherContentProps) {
+  console.log(urls)
   const intl = useIntl()
   const currentLanguage = useLang()
 
   const languageSwitcherRef = useTrapFocus()
   const urlKeys = Object.keys(urls) as Lang[]
 
+  const pathname = usePathname()
+
   return (
     <div className={styles.languageSwitcherContent} ref={languageSwitcherRef}>
       <div className={styles.languageWrapper}>
@@ -39,8 +45,9 @@ export default function LanguageSwitcherContent({
                 <li key={key}>
                   <Link
                     className={`${styles.link} ${isActive ? styles.active : ""}`}
-                    href={url}
+                    href={replaceUrlPart(pathname, url)}
                     onClick={onLanguageSwitch}
+                    keepSearchParams
                   >
                     {languages[key]}
                     {isActive ? <CheckIcon color="burgundy" /> : null}

components/LanguageSwitcher/LanguageSwitcherContent/utils.ts

@@ -0,0 +1,19 @@
+export function replaceUrlPart(currentPath: string, newPart: string): string {
+  const pathSegments = currentPath.split("/").filter((segment) => segment)
+
+  const newPathSegments = newPart
+    .replace(/\/$/, "")
+    .split("/")
+    .filter((segment) => segment)
+
+  const isFullPathReplacement = newPathSegments.length > 1
+
+  if (isFullPathReplacement) {
+    return `/${newPathSegments.join("/")}`
+  }
+
+  const updatedPathSegments = pathSegments.slice(1)
+  const updatedPath = `/${newPathSegments.concat(updatedPathSegments).join("/")}`
+
+  return updatedPath
+}

components/LanguageSwitcher/index.tsx

@@ -1,10 +1,9 @@
 "use client"
 
-import { usePathname, useSearchParams } from "next/navigation"
-import { useRef } from "react"
+import { Suspense, useRef } from "react"
 import { useIntl } from "react-intl"
 
-import { Lang, languages } from "@/constants/languages"
+import { languages } from "@/constants/languages"
 import useDropdownStore from "@/stores/main-menu"
 
 import { ChevronDownSmallIcon, GlobeIcon } from "@/components/Icons"
@@ -24,7 +23,6 @@ import {
   type LanguageSwitcherProps,
   LanguageSwitcherTypesEnum,
 } from "@/types/components/languageSwitcher/languageSwitcher"
-import type { LanguageSwitcherData } from "@/types/requests/languageSwitcher"
 
 export default function LanguageSwitcher({
   urls,
@@ -38,23 +36,12 @@ export default function LanguageSwitcher({
     isHeaderLanguageSwitcherMobileOpen,
     isHeaderLanguageSwitcherOpen,
   } = useDropdownStore()
-  const searchParams = useSearchParams()
-  const pathname = usePathname()
-  const queryParams = new URLSearchParams(searchParams.toString())
 
   const languageSwitcherRef = useRef<HTMLDivElement>(null)
   const isFooter = type === LanguageSwitcherTypesEnum.Footer
   const isHeader = !isFooter
   const globeIconSize = type === "desktopHeader" ? 16 : 20
 
-  const currentUrl = `${pathname}?${queryParams.toString()}`
-
-  const fullUrls = Object.entries(urls).reduce((acc, [lang, { url }]) => {
-    const newUrl = currentUrl.replace(/^\/[a-z]{2}\//, url)
-    acc[lang as Lang] = { url: newUrl }
-    return acc
-  }, {} as LanguageSwitcherData)
-
   const position = isFooter ? "footer" : "header"
 
   const dropdownType = {
@@ -119,7 +106,7 @@ export default function LanguageSwitcher({
         {isLanguageSwitcherOpen ? (
           <LanguageSwitcherContainer type={type}>
             <LanguageSwitcherContent
-              urls={fullUrls}
+              urls={urls}
               onLanguageSwitch={() => toggleDropdown(dropdownType)}
             />
           </LanguageSwitcherContainer>