fix: [IOBP-1100] German FAQ strings (#6579)

## Short description This pull request corrects the display strings for the German FAQ. ## List of changes proposed in this pull request - Update `io-service-metadata` version - Add german key to `localeToLocalizedMessageKey` constant - Added `fallbackForLocalizedMessageKeys` function to provide a fallback for German translations when they are not available - Updated locale handling to use the new fallback mechanism ## How to test > [!IMPORTANT] > Align `io-dev-api-server` with this [PR](pagopa/io-dev-api-server#453) - Select German language, reload the app - Open the app - Tap on FAQ - Ensure that categories and subcategories are in german ## Preview https://github.com/user-attachments/assets/333858a3-d03a-496e-8869-e28f10d2843c
pagopa · Jan 10, 2025 · 7e5ca4a · 7e5ca4a
1 parent 4c8f237
commit 7e5ca4a
Show file tree

Hide file tree

Showing 9 changed files with 58 additions and 23 deletions.
diff --git a/scripts/generate-api-models.sh b/scripts/generate-api-models.sh
@@ -1,7 +1,7 @@
 #!/bin/bash
 
 IO_BACKEND_VERSION=v16.4.0-RELEASE
-IO_SERVICES_METADATA_VERSION=1.0.51
+IO_SERVICES_METADATA_VERSION=1.0.54
 
 declare -a apis=(
   # Backend APIs

diff --git a/ts/features/itwallet/issuance/screens/ItwIssuanceCredentialFailureScreen.tsx b/ts/features/itwallet/issuance/screens/ItwIssuanceCredentialFailureScreen.tsx
@@ -28,7 +28,10 @@ import { ItwCredentialIssuanceMachineContext } from "../../machine/provider";
 import { useCredentialEventsTracking } from "../hooks/useCredentialEventsTracking";
 import { useIOSelector } from "../../../../store/hooks";
 import { itwDeferredIssuanceScreenContentSelector } from "../../../../store/reducers/backendStatus/remoteConfig";
-import { getFullLocale } from "../../../../utils/locale";
+import {
+  fallbackForLocalizedMessageKeys,
+  getFullLocale
+} from "../../../../utils/locale";
 import { serializeFailureReason } from "../../common/utils/itwStoreUtils";
 
 export const ItwIssuanceCredentialFailureScreen = () => {
@@ -65,6 +68,7 @@ const ContentView = ({ failure }: ContentViewProps) => {
     selectIssuerConfigurationOption
   );
   const locale = getFullLocale();
+  const localeFallback = fallbackForLocalizedMessageKeys(locale);
   const deferredIssuanceScreenContent = useIOSelector(
     itwDeferredIssuanceScreenContentSelector
   );
@@ -118,10 +122,10 @@ const ContentView = ({ failure }: ContentViewProps) => {
         case CredentialIssuanceFailureType.ASYNC_ISSUANCE:
           return {
             title:
-              deferredIssuanceScreenContent?.title?.[locale] ??
+              deferredIssuanceScreenContent?.title?.[localeFallback] ??
               I18n.t("features.itWallet.issuance.asyncCredentialError.title"),
             subtitle:
-              deferredIssuanceScreenContent?.description?.[locale] ??
+              deferredIssuanceScreenContent?.description?.[localeFallback] ??
               I18n.t("features.itWallet.issuance.asyncCredentialError.body"),
             pictogram: "pending",
             action: {

diff --git a/ts/features/payments/checkout/components/WalletPaymentFeedbackBanner.tsx b/ts/features/payments/checkout/components/WalletPaymentFeedbackBanner.tsx
@@ -8,7 +8,10 @@ import {
   isPaymentsFeedbackBannerEnabledSelector,
   paymentsFeedbackBannerConfigSelector
 } from "../../../../store/reducers/backendStatus/remoteConfig";
-import { getFullLocale } from "../../../../utils/locale";
+import {
+  fallbackForLocalizedMessageKeys,
+  getFullLocale
+} from "../../../../utils/locale";
 
 const WalletPaymentFeebackBanner = () => {
   const bannerViewRef = React.useRef<View>(null);
@@ -19,6 +22,7 @@ const WalletPaymentFeebackBanner = () => {
     paymentsFeedbackBannerConfigSelector
   );
   const locale = getFullLocale();
+  const localeFallback = fallbackForLocalizedMessageKeys(locale);
 
   const handleBannerPress = () => {
     if (!feedbackBannerConfig?.action) {
@@ -42,9 +46,9 @@ const WalletPaymentFeebackBanner = () => {
         pictogramName="feedback"
         size="big"
         viewRef={bannerViewRef}
-        title={feedbackBannerConfig.title?.[locale]}
-        content={feedbackBannerConfig.description[locale]}
-        action={feedbackBannerConfig.action?.label[locale]}
+        title={feedbackBannerConfig.title?.[localeFallback]}
+        content={feedbackBannerConfig.description[localeFallback]}
+        action={feedbackBannerConfig.action?.label[localeFallback]}
         onPress={handleBannerPress}
       />
     </>

diff --git a/ts/features/payments/home/components/PaymentsAlertStatus.tsx b/ts/features/payments/home/components/PaymentsAlertStatus.tsx
@@ -1,12 +1,19 @@
-import * as React from "react";
-import { constVoid } from "fp-ts/lib/function";
 import { Alert } from "@pagopa/io-app-design-system";
-import Animated, { FadeIn, FadeOut, Layout } from "react-native-reanimated";
+import { constVoid } from "fp-ts/lib/function";
+import * as React from "react";
 import { GestureResponderEvent } from "react-native";
+import Animated, {
+  FadeIn,
+  FadeOut,
+  LinearTransition
+} from "react-native-reanimated";
 import I18n from "../../../../i18n";
 import { useIOSelector } from "../../../../store/hooks";
 import { sectionStatusByKeySelector } from "../../../../store/reducers/backendStatus/sectionStatus";
-import { getFullLocale } from "../../../../utils/locale";
+import {
+  fallbackForLocalizedMessageKeys,
+  getFullLocale
+} from "../../../../utils/locale";
 import { openWebUrl } from "../../../../utils/url";
 import { getAlertVariant } from "../../common/utils";
 
@@ -22,18 +29,22 @@ export const PaymentsAlertStatus = () => {
 
   const handleOnPressAlertStatusInfo = (_: GestureResponderEvent) => {
     if (alertInfo && alertInfo.web_url && alertInfo.web_url[getFullLocale()]) {
-      openWebUrl(alertInfo.web_url[getFullLocale()]);
+      openWebUrl(
+        alertInfo.web_url[fallbackForLocalizedMessageKeys(getFullLocale())]
+      );
     }
   };
 
   return (
     <Animated.View
       entering={FadeIn.duration(200)}
       exiting={FadeOut.duration(200)}
-      layout={Layout.duration(200)}
+      layout={LinearTransition.duration(200)}
     >
       <Alert
-        content={alertInfo.message[getFullLocale()]}
+        content={
+          alertInfo.message[fallbackForLocalizedMessageKeys(getFullLocale())]
+        }
         variant={getAlertVariant(alertInfo.level)}
         action={actionLabel}
         onPress={

diff --git a/ts/hooks/useStatusAlertProps.ts b/ts/hooks/useStatusAlertProps.ts
@@ -5,7 +5,10 @@ import * as O from "fp-ts/lib/Option";
 import { GestureResponderEvent } from "react-native";
 import { useIOSelector } from "../store/hooks";
 import { statusMessageByRouteSelector } from "../store/reducers/backendStatus/statusMessages";
-import { getFullLocale } from "../utils/locale";
+import {
+  fallbackForLocalizedMessageKeys,
+  getFullLocale
+} from "../utils/locale";
 import { LevelEnum } from "../../definitions/content/StatusMessage";
 import I18n from "../i18n";
 import { openWebUrl } from "../utils/url";
@@ -33,6 +36,7 @@ export const useStatusAlertProps = (
     statusMessageByRouteSelector(routeName)
   );
   const locale = getFullLocale();
+  const localeFallback = fallbackForLocalizedMessageKeys(locale);
 
   return useMemo(() => {
     if (!currentStatusMessage || currentStatusMessage.length === 0) {
@@ -48,15 +52,15 @@ export const useStatusAlertProps = (
         () => ({}),
         url => ({
           action: I18n.t("global.sectionStatus.moreInfo"),
-          onPress: () => openWebUrl(url[locale])
+          onPress: () => openWebUrl(url[localeFallback])
         })
       )
     );
 
     return {
-      content: firstAlert.message[locale],
+      content: firstAlert.message[localeFallback],
       variant: statusVariantMap[firstAlert.level],
       ...statusAction
     };
-  }, [currentStatusMessage, locale]);
+  }, [currentStatusMessage, localeFallback]);
 };
diff --git a/ts/i18n.ts b/ts/i18n.ts
@@ -19,7 +19,8 @@ export const localeToLocalizedMessageKey = new Map<
   LocalizedMessageKeys
 >([
   ["it", "it-IT"],
-  ["en", "en-EN"]
+  ["en", "en-EN"],
+  ["de", "de-DE"]
 ]);
 
 export const localeToPreferredLanguageMapping = new Map<

diff --git a/ts/store/reducers/__mock__/backendStatus.ts b/ts/store/reducers/__mock__/backendStatus.ts
@@ -301,6 +301,7 @@ export const baseRawBackendStatus: BackendStatus = {
         android: "0.0.0.0",
         ios: "0.0.0.0"
       },
+      ipatente_cta_visible: true,
       feedback_banner_visible: true,
       disabled_identification_methods: [],
       disabled_credentials: []
@@ -393,6 +394,7 @@ export const baseBackendConfig: Config = {
       android: "0.0.0.0",
       ios: "0.0.0.0"
     },
+    ipatente_cta_visible: true,
     feedback_banner_visible: true,
     disabled_credentials: [],
     disabled_identification_methods: []

diff --git a/ts/utils/locale.ts b/ts/utils/locale.ts
@@ -1,6 +1,7 @@
-import * as O from "fp-ts/lib/Option";
 import * as AR from "fp-ts/lib/Array";
 import { pipe } from "fp-ts/lib/function";
+import * as O from "fp-ts/lib/Option";
+import { PreferredLanguageEnum } from "../../definitions/backend/PreferredLanguage";
 import { Locales } from "../../locales/locales";
 import I18n, {
   availableTranslations,
@@ -9,7 +10,6 @@ import I18n, {
   localeToPreferredLanguageMapping,
   LocalizedMessageKeys
 } from "../i18n";
-import { PreferredLanguageEnum } from "../../definitions/backend/PreferredLanguage";
 /**
  * Helpers for handling locales
  */
@@ -84,3 +84,10 @@ export const fromPreferredLanguageToLocale = (
     O.fromNullable,
     O.getOrElseW(() => localeFallback.locale)
   );
+
+// This function is for the case where the localized message key is not available. When german translation is not available, we use italian as a fallback.
+// This function will be removed when the german translation will be available for all the keys.
+export const fallbackForLocalizedMessageKeys = (
+  locale: LocalizedMessageKeys
+): Exclude<LocalizedMessageKeys, "de-DE"> =>
+  locale === "de-DE" ? "it-IT" : locale;
diff --git a/ts/utils/payment.ts b/ts/utils/payment.ts
@@ -421,7 +421,9 @@ export const getPaymentOutcomeCodeDescription = (
       outcomeCodes[maybeOutcomeCodeKey.right] as OutcomeCode,
       O.fromNullable,
       O.chainNullableK(oc => oc.description),
-      O.map(description => description[getFullLocale()])
+      O.map(
+        description => description[getFullLocale() as keyof typeof description]
+      )
     );
   }
   return O.none;