feat: [IOPLT-1555] Properly handles app language selection and persistence

.env.local

@@ -103,5 +103,3 @@ ITW_PROD_ISSUANCE_REDIRECT_URI="https://wallet.io.pagopa.it/index.html"
 ITW_PROD_X509_CERT_ROOT="MIIDMTCCAtigAwIBAgIGAZfBBxdWMAoGCCqGSM49BAMCMIGvMQswCQYDVQQGEwJJVDEOMAwGA1UECAwFTGF6aW8xDTALBgNVBAcMBFJvbWExMTAvBgNVBAoMKElzdGl0dXRvIFBvbGlncmFmaWNvIGUgWmVjY2EgZGVsbG8gU3RhdG8xCzAJBgNVBAsMAklUMRowGAYDVQQDDBF0YS53YWxsZXQuaXB6cy5pdDElMCMGCSqGSIb3DQEJARYWcHJvdG9jb2xsb0BwZWMuaXB6cy5pdDAeFw0yNTA2MzAxMzI5MTZaFw0zMDA2MjkxMzI5MTZaMIGvMQswCQYDVQQGEwJJVDEOMAwGA1UECAwFTGF6aW8xDTALBgNVBAcMBFJvbWExMTAvBgNVBAoMKElzdGl0dXRvIFBvbGlncmFmaWNvIGUgWmVjY2EgZGVsbG8gU3RhdG8xCzAJBgNVBAsMAklUMRowGAYDVQQDDBF0YS53YWxsZXQuaXB6cy5pdDElMCMGCSqGSIb3DQEJARYWcHJvdG9jb2xsb0BwZWMuaXB6cy5pdDBZMBMGByqGSM49AgEGCCqGSM49AwEHA0IABInNG5KcbDVZGm/5oEzH9zMIyCWtf/CNHlSGyDmvWnFe/ZZBLJDTAUB2yDIl+ectCDGFHr55scdeKK/bP6rWlR2jgd0wgdowHQYDVR0OBBYEFJ5V5QCcf42bnLm+wYiQl/WI8VJnMB8GA1UdIwQYMBaAFJ5V5QCcf42bnLm+wYiQl/WI8VJnMA8GA1UdEwEB/wQFMAMBAf8wQAYIKwYBBQUHAQEENDAyMDAGCCsGAQUFBzAChiRodHRwczovL3RhLndhbGxldC5pcHpzLml0L3BraS90YS5jZXIwDgYDVR0PAQH/BAQDAgGmMDUGA1UdHwQuMCwwKqAooCaGJGh0dHBzOi8vdGEud2FsbGV0LmlwenMuaXQvcGtpL3RhLmNybDAKBggqhkjOPQQDAgNHADBEAiA/QazEn1TAlVkhmdVdu08egkQRthoJjZoLd2e4DMxP5wIgeosEoXLOWUDxSv6h4MtSluaYU4ZJwZZYSDhfpwTlKdk="
 # Bypass the check that enforces the identity of the issued eID is the same as the authenticated user
 ITW_BYPASS_IDENTITY_MATCH=YES
-# Enable the new locale selection (decoupled)
-APP_LOCALE_SELECTION_ENABLED=NO

.env.production

@@ -103,5 +103,3 @@ ITW_PROD_ISSUANCE_REDIRECT_URI="https://wallet.io.pagopa.it/index.html"
 ITW_PROD_X509_CERT_ROOT="MIIDMTCCAtigAwIBAgIGAZfBBxdWMAoGCCqGSM49BAMCMIGvMQswCQYDVQQGEwJJVDEOMAwGA1UECAwFTGF6aW8xDTALBgNVBAcMBFJvbWExMTAvBgNVBAoMKElzdGl0dXRvIFBvbGlncmFmaWNvIGUgWmVjY2EgZGVsbG8gU3RhdG8xCzAJBgNVBAsMAklUMRowGAYDVQQDDBF0YS53YWxsZXQuaXB6cy5pdDElMCMGCSqGSIb3DQEJARYWcHJvdG9jb2xsb0BwZWMuaXB6cy5pdDAeFw0yNTA2MzAxMzI5MTZaFw0zMDA2MjkxMzI5MTZaMIGvMQswCQYDVQQGEwJJVDEOMAwGA1UECAwFTGF6aW8xDTALBgNVBAcMBFJvbWExMTAvBgNVBAoMKElzdGl0dXRvIFBvbGlncmFmaWNvIGUgWmVjY2EgZGVsbG8gU3RhdG8xCzAJBgNVBAsMAklUMRowGAYDVQQDDBF0YS53YWxsZXQuaXB6cy5pdDElMCMGCSqGSIb3DQEJARYWcHJvdG9jb2xsb0BwZWMuaXB6cy5pdDBZMBMGByqGSM49AgEGCCqGSM49AwEHA0IABInNG5KcbDVZGm/5oEzH9zMIyCWtf/CNHlSGyDmvWnFe/ZZBLJDTAUB2yDIl+ectCDGFHr55scdeKK/bP6rWlR2jgd0wgdowHQYDVR0OBBYEFJ5V5QCcf42bnLm+wYiQl/WI8VJnMB8GA1UdIwQYMBaAFJ5V5QCcf42bnLm+wYiQl/WI8VJnMA8GA1UdEwEB/wQFMAMBAf8wQAYIKwYBBQUHAQEENDAyMDAGCCsGAQUFBzAChiRodHRwczovL3RhLndhbGxldC5pcHpzLml0L3BraS90YS5jZXIwDgYDVR0PAQH/BAQDAgGmMDUGA1UdHwQuMCwwKqAooCaGJGh0dHBzOi8vdGEud2FsbGV0LmlwenMuaXQvcGtpL3RhLmNybDAKBggqhkjOPQQDAgNHADBEAiA/QazEn1TAlVkhmdVdu08egkQRthoJjZoLd2e4DMxP5wIgeosEoXLOWUDxSv6h4MtSluaYU4ZJwZZYSDhfpwTlKdk="
 # Bypass the check that enforces the identity of the issued eID is the same as the authenticated user
 ITW_BYPASS_IDENTITY_MATCH=NO
-# Enable the new locale selection (decoupled)
-APP_LOCALE_SELECTION_ENABLED=NO

ts/boot/__tests__/__snapshots__/persistedStore.test.ts.snap

@@ -90,7 +90,7 @@ exports[`Check the addition for new fields to the persisted store. If one of thi
   "isPagoPATestEnabled": false,
   "isPnTestEnabled": false,
   "preferredCalendar": undefined,
-  "preferredLanguage": undefined,
+  "preferredLanguage": "it",
   "themePreference": "light",
   "wasServiceAlertDisplayedOnce": false,
 }

ts/config.ts

@@ -71,10 +71,6 @@ export const bonusApiUrlPrefix: string = Config.BONUS_API_URL_PREFIX;
 export const isPlaygroundsEnabled: boolean =
   Config.PLAYGROUNDS_ENABLED === "YES";
 
-// New locale selection
-export const isAppLocaleSelectionEnabled: boolean =
-  Config.APP_LOCALE_SELECTION_ENABLED === "YES";
-
 // Zendesk Feature Flag
 export const zendeskEnabled: boolean = Config.ZENDESK_ENABLED === "YES";
 

ts/features/settings/preferences/screens/LanguagesPreferencesScreen.tsx

@@ -1,10 +1,8 @@
 import {
-  Banner,
   ListItemHeader,
   RadioGroup,
   RadioItem,
   useIOToast,
-  VSpacer,
   VStack
 } from "@pagopa/io-app-design-system";
 import * as pot from "@pagopa/ts-commons/lib/pot";
@@ -13,7 +11,6 @@ import { pipe } from "fp-ts/lib/function";
 import I18n from "i18next";
 import _ from "lodash";
 import {
-  createRef,
   useCallback,
   useContext,
   useEffect,
@@ -34,18 +31,15 @@ import {
 } from "../../../../store/actions/persistedPreferences";
 
 import { useIODispatch, useIOSelector } from "../../../../store/hooks";
-import { sectionStatusByKeySelector } from "../../../../store/reducers/backendStatus/sectionStatus";
 import { preferredLanguageSelector } from "../../../../store/reducers/persistedPreferences";
 import { ContextualHelpPropsMarkdown } from "../../../../utils/contextualHelp";
 import { usePrevious } from "../../../../utils/hooks/usePrevious";
 import {
   fromLocaleToPreferredLanguage,
-  getFullLocale
+  fromPreferredLanguageToLocale
 } from "../../../../utils/locale";
-import { openWebUrl } from "../../../../utils/url";
 import { profileUpsert } from "../../common/store/actions";
 import { profileSelector } from "../../common/store/selectors";
-import { isAppLocaleSelectionEnabled } from "../../../../config";
 
 const contextualHelpMarkdown: ContextualHelpPropsMarkdown = {
   title: "profile.preferences.language.contextualHelpTitle",
@@ -59,18 +53,13 @@ const contextualHelpMarkdown: ContextualHelpPropsMarkdown = {
 type AppLocaleId = `app-locale-${AppLocale}`;
 
 const LanguagesPreferencesScreen = () => {
-  const viewRef = createRef<View>();
   const dispatch = useIODispatch();
   const toast = useIOToast();
   const selectedLanguage = useRef<string | undefined>(undefined);
   const [isLoading, setIsLoading] = useState(false);
   const { showModal } = useContext(LightModalContext);
   const profile = useIOSelector(profileSelector, _.isEqual);
   const prevProfile = usePrevious(profile);
-  const bannerInfoSelector = useIOSelector(
-    sectionStatusByKeySelector("favourite_language")
-  );
-  const isBannerVisible = bannerInfoSelector && bannerInfoSelector.is_visible;
   const preferredLanguageSelect = useIOSelector(
     preferredLanguageSelector,
     _.isEqual
@@ -117,8 +106,15 @@ const LanguagesPreferencesScreen = () => {
   );
 
   const initialSelectedItem = useMemo(
-    () => renderedItem.find(item => item.id === preferredLanguage)?.id,
-    [preferredLanguage, renderedItem]
+    () =>
+      renderedItem.find(
+        item =>
+          pot.isSome(profile) &&
+          profile.value.preferred_languages &&
+          item.id ===
+            fromPreferredLanguageToLocale(profile.value?.preferred_languages[0])
+      )?.id,
+    [profile, renderedItem]
   );
 
   const [selectedItem, setSelectedItem] = useState(initialSelectedItem);
@@ -134,15 +130,29 @@ const LanguagesPreferencesScreen = () => {
     []
   );
 
+  const initialAppSelectedItem = useMemo(
+    () => renderedItem.find(item => item.id === preferredLanguage)?.id,
+    [preferredLanguage, renderedItem]
+  );
+
   const [selectedAppLocale, setSelectedAppLocale] = useState<AppLocaleId>(
-    `app-locale-${I18n.language as AppLocale}` as AppLocaleId
+    `app-locale-${initialAppSelectedItem as AppLocale}` as AppLocaleId
   );
 
-  const handleAppLocaleChange = useCallback((localeId: AppLocaleId) => {
-    const locale = localeId.replace("app-locale-", "") as AppLocale;
-    setSelectedAppLocale(localeId);
-    Alert.alert("Language selected", locale);
-  }, []);
+  const handleAppLocaleChange = useCallback(
+    (localeId: AppLocaleId) => {
+      const locale = localeId.replace("app-locale-", "") as AppLocale;
+
+      preferredLanguageSaveSuccessDispatch(locale as Locales);
+      setSelectedAppLocale(localeId);
+      showModal(
+        <AlertModal
+          message={I18n.t("profile.main.pagoPaEnvironment.alertMessage")}
+        />
+      );
+    },
+    [preferredLanguageSaveSuccessDispatch, showModal]
+  );
 
   useEffect(() => {
     // start updating
@@ -159,13 +169,7 @@ const LanguagesPreferencesScreen = () => {
       !pot.isError(profile)
     ) {
       setIsLoading(false);
-      preferredLanguageSaveSuccessDispatch(selectedLanguage.current as Locales);
       setSelectedItem(selectedLanguage.current);
-      showModal(
-        <AlertModal
-          message={I18n.t("profile.main.pagoPaEnvironment.alertMessage")}
-        />
-      );
       toast.success(
         I18n.t(
           "profile.preferences.list.preferred_language.toast.success.title"
@@ -182,17 +186,10 @@ const LanguagesPreferencesScreen = () => {
       pot.isError(profile)
     ) {
       setIsLoading(false);
+      setSelectedItem(selectedLanguage.current);
       toast.error(I18n.t("errors.profileUpdateError"));
     }
-  }, [
-    selectedLanguage,
-    preferredLanguageSaveSuccessDispatch,
-    prevProfile,
-    profile,
-    selectedItem,
-    showModal,
-    toast
-  ]);
+  }, [selectedLanguage, prevProfile, profile, selectedItem, toast]);
 
   const onLanguageSelected = useCallback(
     (language: string) => {
@@ -225,6 +222,34 @@ const LanguagesPreferencesScreen = () => {
     [selectedItem, upsertProfile]
   );
 
+  const onAppLanguageSelected = useCallback(
+    (language: string) => {
+      if (selectedItem !== language) {
+        const locale = language.replace("app-locale-", "") as AppLocale;
+        Alert.alert(
+          `${I18n.t(
+            "profile.preferences.list.preferred_language.alert.title"
+            // eslint-disable-next-line sonarjs/no-nested-template-literals
+          )} ${I18n.t(`locales.${locale as Locales}`)}?`,
+          I18n.t("profile.preferences.list.preferred_language.alert.subtitle"),
+          [
+            {
+              text: I18n.t("global.buttons.cancel"),
+              style: "cancel"
+            },
+            {
+              text: I18n.t("global.buttons.confirm"),
+              style: "default",
+              onPress: () => handleAppLocaleChange(language as AppLocaleId)
+            }
+          ],
+          { cancelable: false }
+        );
+      }
+    },
+    [handleAppLocaleChange, selectedItem]
+  );
+
   return (
     <LoadingSpinnerOverlay isLoading={isLoading}>
       <IOScrollViewWithLargeHeader
@@ -241,56 +266,35 @@ const LanguagesPreferencesScreen = () => {
       >
         <VStack space={24}>
           <View>
-            {isAppLocaleSelectionEnabled && (
-              <ListItemHeader
-                iconName="institution"
-                label={I18n.t(
-                  "profile.preferences.list.preferred_language.headers.services"
-                )}
-              />
-            )}
+            <ListItemHeader
+              iconName="institution"
+              label={I18n.t(
+                "profile.preferences.list.preferred_language.headers.services"
+              )}
+            />
+
             <RadioGroup<string>
               type="radioListItem"
               items={renderedItem}
               selectedItem={selectedItem}
               onPress={onLanguageSelected}
             />
-            {isBannerVisible && (
-              <>
-                <VSpacer />
-                <Banner
-                  ref={viewRef}
-                  color="neutral"
-                  content={bannerInfoSelector.message[getFullLocale()]}
-                  pictogramName="charity"
-                  action={I18n.t(
-                    "profile.preferences.list.preferred_language.banner.button"
-                  )}
-                  onPress={() =>
-                    openWebUrl(
-                      bannerInfoSelector.web_url?.[getFullLocale()] || ""
-                    )
-                  }
-                />
-              </>
-            )}
           </View>
-          {isAppLocaleSelectionEnabled && (
-            <View>
-              <ListItemHeader
-                iconName="device"
-                label={I18n.t(
-                  "profile.preferences.list.preferred_language.headers.app"
-                )}
-              />
-              <RadioGroup<AppLocaleId>
-                type="radioListItem"
-                items={appLocaleOptions}
-                selectedItem={selectedAppLocale}
-                onPress={handleAppLocaleChange}
-              />
-            </View>
-          )}
+
+          <View>
+            <ListItemHeader
+              iconName="device"
+              label={I18n.t(
+                "profile.preferences.list.preferred_language.headers.app"
+              )}
+            />
+            <RadioGroup<AppLocaleId>
+              type="radioListItem"
+              items={appLocaleOptions}
+              selectedItem={selectedAppLocale}
+              onPress={onAppLanguageSelected}
+            />
+          </View>
         </VStack>
       </IOScrollViewWithLargeHeader>
     </LoadingSpinnerOverlay>