feature: lang integration from selfcare (PIN-7690)

package.json

@@ -22,7 +22,7 @@
     "@mui/material": "^5.16.14",
     "@mui/system": "^5.14.9",
     "@mui/x-date-pickers": "^6.13.0",
-    "@pagopa/interop-fe-commons": "^1.4.6",
+    "@pagopa/interop-fe-commons": "^1.5.2",
     "@pagopa/mui-italia": "^1.8.0",
     "@tanstack/react-query": "^5.51.4",
     "@tanstack/react-query-devtools": "^5.51.4",
@@ -38,7 +38,7 @@
     "react-error-boundary": "^4.0.11",
     "react-hook-form": "^7.46.1",
     "react-i18next": "^13.2.2",
-    "react-router-dom": "latest",
+    "react-router-dom": "^6.16.0",
     "ts-pattern": "^5.2.0",
     "zod": "^4.0.0",
     "zustand": "^4.4.1"

src/App.tsx

@@ -15,7 +15,6 @@ import { MaintenanceBanner } from './components/shared/banners/MaintenanceBanner
 import { FirstLoadingSpinner } from './components/shared/FirstLoadingSpinner'
 import { queryClient } from './config/query-client'
 import type { EnvironmentBannerProps } from '@pagopa/mui-italia'
-
 import { AuthQueries } from './api/auth'
 import i18n from './config/react-i18next'
 
@@ -31,7 +30,6 @@ if (redirectUrl) {
 } else {
   queryClient.prefetchQuery(AuthQueries.getSessionToken())
 }
-
 // end init ---
 
 function App() {

src/components/dialogs/DialogDeleteOperator.tsx

@@ -1,4 +1,5 @@
 import { SELFCARE_BASE_URL } from '@/config/env'
+import useCurrentLanguage from '@/hooks/useCurrentLanguage'
 import { useDialog } from '@/stores'
 import type { DialogDeleteOperatorProps } from '@/types/dialog.types'
 import {
@@ -19,10 +20,11 @@ export const DialogDeleteOperator: React.FC<DialogDeleteOperatorProps> = ({
   const ariaLabelId = React.useId()
   const ariaDescriptionId = React.useId()
   const { closeDialog } = useDialog()
+  const lang = useCurrentLanguage()
   const { t: tCommon } = useTranslation('common', { keyPrefix: 'actions' })
   const { t } = useTranslation('shared-components', { keyPrefix: 'dialogDeleteOperator' })
 
-  const selfcareUserPageUrl = `${SELFCARE_BASE_URL}/dashboard/${selfcareId}/users/${userId}`
+  const selfcareUserPageUrl = `${SELFCARE_BASE_URL}/dashboard/${selfcareId}/users/${userId}?lang=${lang}`
 
   const handleCancel = () => {
     closeDialog()

src/components/layout/Header.tsx

@@ -145,7 +145,7 @@ export const Header: React.FC<HeaderProps> = ({ jwt, isSupport }) => {
     window.location.assign(
       `${SELFCARE_BASE_URL}/token-exchange?institutionId=${
         party.id
-      }&productId=${getCurrentSelfCareProductId()}`
+      }&productId=${getCurrentSelfCareProductId()}&lang=${lang}`
     )
   }
 
@@ -155,12 +155,12 @@ export const Header: React.FC<HeaderProps> = ({ jwt, isSupport }) => {
     if (!selfcareId) return
 
     if (product.id === 'selfcare') {
-      window.location.assign(`${SELFCARE_BASE_URL}/dashboard/${selfcareId}`)
+      window.location.assign(`${SELFCARE_BASE_URL}/dashboard/${selfcareId}?lang=${lang}`)
       return
     }
 
     window.location.assign(
-      `${SELFCARE_BASE_URL}/token-exchange?institutionId=${selfcareId}&productId=${product.id}`
+      `${SELFCARE_BASE_URL}/token-exchange?institutionId=${selfcareId}&productId=${product.id}&lang=${lang}`
     )
   }
 

src/components/layout/__test__/Header.test.tsx

@@ -379,7 +379,7 @@ describe('Header', () => {
     await user.click(selectPartyButton)
 
     expect(mockWindowAssign).toBeCalledWith(
-      `${SELFCARE_BASE_URL}/token-exchange?institutionId=${'test-party-id'}&productId=prod-interop`
+      `${SELFCARE_BASE_URL}/token-exchange?institutionId=${'test-party-id'}&productId=prod-interop&lang=it`
     )
   })
 
@@ -451,7 +451,7 @@ describe('Header', () => {
 
     await user.click(selectProductButton)
 
-    expect(mockWindowAssign).toBeCalledWith(`${SELFCARE_BASE_URL}/dashboard/${selfcareId}`)
+    expect(mockWindowAssign).toBeCalledWith(`${SELFCARE_BASE_URL}/dashboard/${selfcareId}?lang=it`)
   })
 
   it('Header handleSelectProcuct action should return the correct url if product.id is not "selfcare" and there is a jwt.selcareId', async () => {
@@ -493,7 +493,7 @@ describe('Header', () => {
     await user.click(selectProductButton)
 
     expect(mockWindowAssign).toBeCalledWith(
-      `${SELFCARE_BASE_URL}/token-exchange?institutionId=${selfcareId}&productId=${productId}`
+      `${SELFCARE_BASE_URL}/token-exchange?institutionId=${selfcareId}&productId=${productId}&lang=it`
     )
   })
 })

src/components/sidebar/InteropSidebarItems.tsx

@@ -19,6 +19,7 @@ import { NotificationQueries } from '@/api/notification'
 import { match } from 'ts-pattern'
 import { routes as routesDefinitions } from '@/router/routes'
 import { get } from 'lodash'
+import useCurrentLanguage from '@/hooks/useCurrentLanguage'
 
 type InteropSidebarItems = {
   routes: SidebarRoutes
@@ -28,13 +29,18 @@ export const InteropSidebarItems: React.FC<InteropSidebarItems> = ({ routes }) =
   const generatePath = useGeneratePath()
   const isRouteInCurrentSubtree = useIsRouteInCurrentSubtree()
   const { t } = useTranslation('sidebar')
+  const lang = useCurrentLanguage()
 
   const pathname = useCurrentRoute().routeKey
   const { jwt, isAdmin, isSupport } = AuthHooks.useJwt()
 
   const selfcareUsersPageUrl =
-    jwt && `${SELFCARE_BASE_URL}/dashboard/${jwt.selfcareId}/users#${getCurrentSelfCareProductId()}`
-  const selfcareGroupsPageUrl = jwt && `${SELFCARE_BASE_URL}/dashboard/${jwt.selfcareId}/groups`
+    jwt &&
+    `${SELFCARE_BASE_URL}/dashboard/${
+      jwt.selfcareId
+    }/users#${getCurrentSelfCareProductId()}?lang=${lang}`
+  const selfcareGroupsPageUrl =
+    jwt && `${SELFCARE_BASE_URL}/dashboard/${jwt.selfcareId}/groups?lang=${lang}`
 
   const [parentExpandedItem, setParentExpandedItem] = useState<string | undefined>(
     routes.find(

src/router/components/RoutesWrapper/RoutesWrapper.tsx

@@ -1,8 +1,8 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { Footer, Header } from '@/components/layout'
 import { AppLayout } from '@/components/layout/AppLayout'
 import { PageContainerSkeleton } from '@/components/layout/containers'
-import { Outlet } from 'react-router-dom'
+import { Outlet, useSearchParams } from 'react-router-dom'
 import useScrollTopOnLocationChange from '../../hooks/useScrollTopOnLocationChange'
 import { Box } from '@mui/material'
 import { AuthGuard } from './AuthGuard'
@@ -11,15 +11,28 @@ import TOSAgreement from './TOSAgreement'
 import { useTOSAgreement } from '../../hooks/useTOSAgreement'
 import { ErrorPage } from '@/pages'
 import { Dialog } from '@/components/dialogs'
-import { routes, useCurrentRoute } from '@/router'
+import { routes, useCurrentRoute, useSwitchPathLang } from '@/router'
 import { AuthHooks } from '@/api/auth'
 import { Stack } from '@mui/system'
+import { AllowedLanguage } from '@/router/routes'
 
 function EmptyWrapper({ children }: { children: React.ReactNode }) {
   return <>{children}</>
 }
 
 const _RoutesWrapper: React.FC = () => {
+  const switchLang = useSwitchPathLang()
+  const [searchParams] = useSearchParams()
+
+  useEffect(() => {
+    const language = AllowedLanguage.safeParse(searchParams.get('lang'))
+    if (language.success) {
+      switchLang(language.data)
+    } else {
+      console.warn('Language URL params is not valid')
+    }
+  }, [searchParams, switchLang])
+
   const { isPublic, routeKey } = useCurrentRoute()
   const {
     jwt,

src/router/routes.tsx

@@ -67,13 +67,17 @@ import { ConsumerPurposeTemplateDetailsPage } from '@/pages/ConsumerPurposeTempl
 import ConsumerPurposeTemplateCatalogDetailsPage from '@/pages/ConsumerPurposeTemplateCatalogDetailsPage/ConsumerPurposeTemplateCatalogDetailsPage'
 import { ConsumerPurposeTemplateSummaryPage } from '@/pages/ConsumerPurposeTemplateSummaryPage'
 import { ConsumerPurposeTemplateEditPage } from '@/pages/ConsumerPurposeTemplateEditPage'
+import z from 'zod'
+
+const languages = ['it', 'en'] as const
+export const AllowedLanguage = z.enum(languages)
 
 export const { routes, reactRouterDOMRoutes, hooks, components, utils } = new InteropRouterBuilder<
   LangCode,
   UserProductRole,
   { hideSideNav: boolean }
 >({
-  languages: ['it', 'en'],
+  languages,
 })
   .addRoute({
     key: 'LOGOUT',