fix(IT Wallet): [SIW-674] Untranslated mock data (#5227)

## Short description This PR addresses an issue where mock data fails to be translated on certain devices. Although I was unable to replicate the issue, the proposed fix revolves around the idea that `I18n` uses the default locale (en) when declaring mock data, as it is not initialized. To resolve this, the proposed solution transforms the constant data into a function that must be called at runtime. ## How to test Static tests should be enough.
pagopa · Nov 16, 2023 · c0d0ab9 · c0d0ab9
1 parent 3a2eb5e
commit c0d0ab9
Show file tree

Hide file tree

Showing 8 changed files with 20 additions and 22 deletions.
diff --git a/ts/features/it-wallet/screens/ItwHomeScreen.tsx b/ts/features/it-wallet/screens/ItwHomeScreen.tsx
@@ -28,7 +28,7 @@ import { itwCredentialsSelector } from "../store/reducers/itwCredentialsReducer"
 import { itwDecodedPidValueSelector } from "../store/reducers/itwPidDecodeReducer";
 import { useItwResetFlow } from "../hooks/useItwResetFlow";
 import ItwCredentialCard from "../components/ItwCredentialCard";
-import { pidDisplayData } from "../utils/mocks";
+import { getPidDisplayData } from "../utils/mocks";
 
 const contextualHelpMarkdown: ContextualHelpPropsMarkdown = {
   title: "wallet.contextualHelpTitle",
@@ -59,6 +59,7 @@ const ItwHomeScreen = () => {
     I18n.t("features.itWallet.homeScreen.categories.payments"),
     I18n.t("features.itWallet.homeScreen.categories.bonus")
   ];
+  const pidDisplayData = getPidDisplayData();
 
   /**
    * Condionally navigate to the credentials catalog screen if the experimental feature flag is true.

diff --git a/ts/features/it-wallet/screens/credential/ItwPidDetails.tsx b/ts/features/it-wallet/screens/credential/ItwPidDetails.tsx
@@ -20,7 +20,7 @@ import { ItwParamsList } from "../../navigation/ItwParamsList";
 import ItwPidClaimsList from "../../components/ItwPidClaimsList";
 import { BlockButtonProps } from "../../../../components/ui/BlockButtons";
 import ItwCredentialCard from "../../components/ItwCredentialCard";
-import { pidDisplayData } from "../../utils/mocks";
+import { getPidDisplayData } from "../../utils/mocks";
 
 export type ContentViewParams = {
   decodedPid: PidWithToken;
@@ -33,6 +33,7 @@ export type ContentViewParams = {
 const ItwPidDetails = () => {
   const navigation = useNavigation<IOStackNavigationProp<ItwParamsList>>();
   const decodedPid = useIOSelector(itwDecodedPidValueSelector);
+  const pidDisplayData = getPidDisplayData();
   const spacerSize = 32;
 
   const presentationButton: BlockButtonProps = {

diff --git a/ts/features/it-wallet/screens/credential/issuing/ItwCredentialsCatalogScreen.tsx b/ts/features/it-wallet/screens/credential/issuing/ItwCredentialsCatalogScreen.tsx
@@ -14,7 +14,7 @@ import { emptyContextualHelp } from "../../../../../utils/emptyContextualHelp";
 import ItwSearchBar from "../../../components/ItwSearchBar";
 import I18n from "../../../../../i18n";
 import {
-  CREDENTIALS_CATALOG,
+  getCredentialsCatalog,
   CredentialCatalogAvailableItem,
   CredentialCatalogItem
 } from "../../../utils/mocks";
@@ -36,6 +36,7 @@ const ItwCredentialCatalogScreen = () => {
   const navigation = useNavigation<IOStackNavigationProp<ItwParamsList>>();
   const preliminaryChecks = useIOSelector(itwIssuanceChecksSelector);
   const [loadingIndex, setLoadingIndex] = React.useState<number>(NONE_LOADING);
+  const catalog = getCredentialsCatalog();
 
   /**
    * Side effect to navigate to the credential checks screen when the preliminaryChecks pot
@@ -131,7 +132,7 @@ const ItwCredentialCatalogScreen = () => {
             <ItwSearchBar />
             <VSpacer />
             <FlatList
-              data={CREDENTIALS_CATALOG}
+              data={catalog}
               renderItem={({ item, index }) => (
                 <CatalogItem
                   index={index}

diff --git a/ts/features/it-wallet/screens/issuing/ItwPidPreviewScreen.tsx b/ts/features/it-wallet/screens/issuing/ItwPidPreviewScreen.tsx
@@ -32,7 +32,7 @@ import { useOnFirstRender } from "../../../../utils/hooks/useOnFirstRender";
 import { itwDecodePid } from "../../store/actions/itwCredentialsActions";
 import { itwPidValueSelector } from "../../store/reducers/itwPidReducer";
 import ItwCredentialCard from "../../components/ItwCredentialCard";
-import { pidDisplayData } from "../../utils/mocks";
+import { getPidDisplayData } from "../../utils/mocks";
 
 type ContentViewProps = {
   decodedPid: PidWithToken;
@@ -47,6 +47,7 @@ const ItwPidPreviewScreen = () => {
   const dispatch = useIODispatch();
   const pid = useIOSelector(itwPidValueSelector);
   const decodedPidPot = useIOSelector(ItwDecodedPidPotSelector);
+  const pidDisplayData = getPidDisplayData();
 
   /**
    * Dispatches the action to decode the PID on first render.

diff --git a/ts/features/it-wallet/screens/presentation/crossdevice/new/ItwPresentationChecksScreen.tsx b/ts/features/it-wallet/screens/presentation/crossdevice/new/ItwPresentationChecksScreen.tsx
@@ -17,7 +17,7 @@ import {
   IOStackNavigationProp
 } from "../../../../../../navigation/params/AppParamsList";
 import { ItwParamsList } from "../../../../navigation/ItwParamsList";
-import { rpMock } from "../../../../utils/mocks";
+import { getRpMock } from "../../../../utils/mocks";
 import { ITW_ROUTES } from "../../../../navigation/ItwRoutes";
 import ItwKoView from "../../../../components/ItwKoView";
 import { getItwGenericMappedError } from "../../../../utils/errors/itwErrorsMapping";
@@ -33,6 +33,7 @@ const ItwPresentationChecksScreen = () => {
   const checksPot = useIOSelector(itwPresentationChecksSelector);
   const navigation =
     useNavigation<IOStackNavigationProp<ItwParamsList & AppParamsList>>();
+  const rpMock = getRpMock();
 
   /**
    * Callback to be used in case of cancel button press alert to navigate to the home screen and show a toast.

diff --git a/ts/features/it-wallet/screens/presentation/crossdevice/new/ItwPresentationDataScreen.tsx b/ts/features/it-wallet/screens/presentation/crossdevice/new/ItwPresentationDataScreen.tsx
@@ -37,7 +37,7 @@ import { emptyContextualHelp } from "../../../../../../utils/emptyContextualHelp
 import ItwOptionalClaimsList from "../../../../components/ItwOptionalClaimsList";
 import { ITW_ROUTES } from "../../../../navigation/ItwRoutes";
 import { useItwInfoBottomSheet } from "../../../../hooks/useItwInfoBottomSheet";
-import { rpMock } from "../../../../utils/mocks";
+import { getRpMock } from "../../../../utils/mocks";
 import { showCancelAlert } from "../../../../utils/alert";
 import ItwKoView from "../../../../components/ItwKoView";
 import { getItwGenericMappedError } from "../../../../utils/errors/itwErrorsMapping";
@@ -53,6 +53,7 @@ type ContentViewParams = {
 const ItwPresentationDataScreen = () => {
   const decodedPid = useIOSelector(itwDecodedPidValueSelector);
   const navigation = useNavigation<IOStackNavigationProp<ItwParamsList>>();
+  const rpMock = getRpMock();
   const { present, bottomSheet } = useItwInfoBottomSheet({
     title: rpMock.organizationName,
     content: [

diff --git a/ts/features/it-wallet/screens/presentation/crossdevice/new/ItwPresentationResultScreen.tsx b/ts/features/it-wallet/screens/presentation/crossdevice/new/ItwPresentationResultScreen.tsx
@@ -15,7 +15,7 @@ import {
   IOStackNavigationProp
 } from "../../../../../../navigation/params/AppParamsList";
 import { ItwParamsList } from "../../../../navigation/ItwParamsList";
-import { rpMock } from "../../../../utils/mocks";
+import { getRpMock } from "../../../../utils/mocks";
 import ItwKoView from "../../../../components/ItwKoView";
 import { getItwGenericMappedError } from "../../../../utils/errors/itwErrorsMapping";
 
@@ -30,6 +30,7 @@ const ItwPresentationResultScreen = () => {
   const checksPot = useIOSelector(itwPresentationChecksSelector);
   const navigation =
     useNavigation<IOStackNavigationProp<ItwParamsList & AppParamsList>>();
+  const rpMock = getRpMock();
 
   useOnFirstRender(() => {
     dispatch(itwPresentation.request());

diff --git a/ts/features/it-wallet/utils/mocks.ts b/ts/features/it-wallet/utils/mocks.ts
@@ -80,7 +80,7 @@ export type CredentialCatalogItem =
  * firstLine and secondLine are used to display the credential attributes in the credential card.
  * The order parameter is used to display the attributes in the correct order.
  */
-export const CREDENTIALS_CATALOG: Array<CredentialCatalogItem> = [
+export const getCredentialsCatalog = (): Array<CredentialCatalogItem> => [
   {
     type: "EuropeanDisabilityCard",
     issuerUrl: "https://api.eudi-wallet-it-issuer.it/rp",
@@ -127,23 +127,14 @@ export const CREDENTIALS_CATALOG: Array<CredentialCatalogItem> = [
 /**
  * Hard coded display feature for PID
  */
-export const pidDisplayData: CredentialCatalogDisplay = {
+export const getPidDisplayData = (): CredentialCatalogDisplay => ({
   title: I18n.t(
     "features.itWallet.verifiableCredentials.type.digitalCredential"
   ),
   icon: "archive",
   textColor: "white",
   image: require("../assets/img/credentials/cards/pidFront.png")
-};
-
-export const defaultDisplayData: CredentialCatalogDisplay = {
-  title: I18n.t("features.itWallet.generic.credential"),
-  icon: "archive",
-  textColor: "black",
-  image: require("../assets/img/credentials/cards/default.png"),
-  firstLine: [],
-  secondLine: []
-};
+});
 
 export const getRequestedClaims = (
   decodedPid: PidWithToken
@@ -217,7 +208,7 @@ export type RpMock = {
   optionalClaims: ReadonlyArray<ItwOptionalClaimItem>;
 };
 
-export const rpMock: RpMock = {
+export const getRpMock = (): RpMock => ({
   organizationName: "eFarma",
   requestedClaims: (decodedPid: PidWithToken) =>
     getMultipleRequestedClaims(decodedPid),
@@ -231,7 +222,7 @@ export const rpMock: RpMock = {
       claim: I18n.t("global.media.email")
     }
   ]
-};
+});
 
 /**
  * Regex to validate the date format of a credential.