Merge remote-tracking branch 'origin/master' into IOAPPX-405-remove-r…

…eact-import- # Conflicts: # ts/components/debug/withDebugEnabled.tsx # ts/features/wallet/components/WalletCardsContainer.tsx # ts/features/wallet/utils/index.tsx
pagopa · Dec 23, 2024 · 3f48f06 · 3f48f06
1 parent b7be7d4
commit 3f48f06
Show file tree

Hide file tree

Showing 25 changed files with 579 additions and 232 deletions.
diff --git a/locales/en/index.yml b/locales/en/index.yml
@@ -3240,6 +3240,8 @@ features:
         empty:
           title: Nessuna ricevuta trovata
           subtitle: Se stai cercando la ricevuta di un avviso pagoPA che hai pagato in passato, rivolgiti all’ente creditore.
+        emptyPayer: 
+          title: Qui vedrai le ricevute dei pagamenti fatti in app
     details:
       payPal:
         banner:

diff --git a/locales/it/index.yml b/locales/it/index.yml
@@ -3240,6 +3240,8 @@ features:
         empty:
           title: Nessuna ricevuta trovata
           subtitle: Se stai cercando la ricevuta di un avviso pagoPA che hai pagato in passato, rivolgiti all’ente creditore.
+        emptyPayer: 
+          title: Qui vedrai le ricevute dei pagamenti fatti in app
     details:
       payPal:
         banner:

diff --git a/ts/components/debug/__tests__/utils.test.ts b/ts/components/debug/__tests__/utils.test.ts
@@ -0,0 +1,17 @@
+import { truncateObjectStrings } from "../utils";
+
+describe("truncateObjectStrings", () => {
+  it.each`
+    input                                              | maxLength | expected
+    ${"Long string"}                                   | ${4}      | ${"Long..."}
+    ${{ outer: { inner: "Long string" }, bool: true }} | ${4}      | ${{ outer: { inner: "Long..." }, bool: true }}
+    ${["Long string", "Very long string"]}             | ${4}      | ${["Long...", "Very..."]}
+    ${new Set(["Long string", "Very long string"])}    | ${4}      | ${["Long...", "Very..."]}
+  `(
+    "$input should be truncated to $expected",
+    ({ input, maxLength, expected }) => {
+      const result = truncateObjectStrings(input, maxLength);
+      expect(result).toEqual(expected);
+    }
+  );
+});
diff --git a/ts/components/debug/utils.ts b/ts/components/debug/utils.ts
@@ -1,12 +1,17 @@
 type Primitive = string | number | boolean | null | undefined;
 
-type TruncatableValue = Primitive | TruncatableObject | TruncatableArray;
+type TruncatableValue =
+  | Primitive
+  | TruncatableObject
+  | TruncatableArray
+  | TruncatableSet;
 
 interface TruncatableObject {
   [key: string]: TruncatableValue;
 }
 
 type TruncatableArray = Array<TruncatableValue>;
+type TruncatableSet = Set<TruncatableValue>;
 
 /**
  * Truncates all string values in an object or array structure to a specified maximum length.
@@ -37,6 +42,14 @@ export const truncateObjectStrings = <T extends TruncatableValue>(
   }
 
   if (typeof value === "object" && value !== null) {
+    if (value instanceof Set) {
+      // Set could not be serialized to JSON because values are not stored as properties
+      // For display purposes, we convert it to an array
+      return Array.from(value).map(item =>
+        truncateObjectStrings(item, maxLength)
+      ) as T;
+    }
+
     return Object.entries(value).reduce(
       (acc, [key, val]) => ({
         ...acc,

diff --git a/ts/components/debug/withDebugEnabled.tsx b/ts/components/debug/withDebugEnabled.tsx
@@ -6,11 +6,11 @@ import { isDebugModeEnabledSelector } from "../../store/reducers/debug";
  * This HOC allows to render the wrapped component only if the debug mode is enabled, otherwise returns null (nothing)
  */
 export const withDebugEnabled =
-  <P,>(WrappedComponent: ComponentType<P>) =>
+  <P extends Record<string, unknown>>(WrappedComponent: ComponentType<P>) =>
   (props: P) => {
     const isDebug = useIOSelector(isDebugModeEnabledSelector);
     if (!isDebug) {
       return null;
     }
-    return <WrappedComponent {...(props as any)} />;
+    return <WrappedComponent {...props} />;
   };
diff --git a/ts/components/ui/LightModal.tsx b/ts/components/ui/LightModal.tsx
@@ -3,7 +3,7 @@
  * on top of the root component.
  */
 
-import { Component, createContext } from "react";
+import { Component, createContext, PropsWithChildren, ReactNode } from "react";
 import {
   Animated,
   Dimensions,
@@ -14,11 +14,11 @@ import {
 } from "react-native";
 import { isScreenReaderEnabled } from "../../utils/accessibility";
 export type LightModalContextInterface = Readonly<{
-  component: React.ReactNode;
-  showModal: (component: React.ReactNode) => void;
-  showModalFadeInAnimation: (component: React.ReactNode) => void;
+  component: ReactNode;
+  showModal: (component: ReactNode) => void;
+  showModalFadeInAnimation: (component: ReactNode) => void;
   showAnimatedModal: (
-    component: React.ReactNode,
+    component: ReactNode,
     animatedValue?: AnimationLightModal
   ) => void;
   hideModal: () => void;
@@ -133,11 +133,11 @@ export type AnimationLightModal =
 export const LightModalConsumer = LightModalContext.Consumer;
 
 export class LightModalProvider extends Component<
-  React.PropsWithChildren<Props>,
+  PropsWithChildren<Props>,
   State
 > {
   public showAnimatedModal = async (
-    childComponent: React.ReactNode,
+    childComponent: ReactNode,
     styledAnimation: AnimationLightModal = RightLeftAnimation
   ) => {
     const isScreenReaderActive = await isScreenReaderEnabled();
@@ -158,7 +158,7 @@ export class LightModalProvider extends Component<
     );
   };
 
-  public showModalFadeInAnimation = async (childComponent: React.ReactNode) => {
+  public showModalFadeInAnimation = async (childComponent: ReactNode) => {
     const isScreenReaderActive = await isScreenReaderEnabled();
     const component = (
       <Animated.View style={[styles.container, { opacity: fadeAnim }]}>
@@ -179,7 +179,7 @@ export class LightModalProvider extends Component<
     );
   };
 
-  public showModal = async (childComponent: React.ReactNode) => {
+  public showModal = async (childComponent: ReactNode) => {
     const isScreenReaderActive = await isScreenReaderEnabled();
     const component = (
       <View style={styles.container}>

diff --git a/ts/features/itwallet/common/utils/itwAttestationUtils.ts b/ts/features/itwallet/common/utils/itwAttestationUtils.ts
@@ -23,6 +23,7 @@ export const getIntegrityHardwareKeyTag = async (): Promise<string> =>
 /**
  * Register a new wallet instance with hardwareKeyTag.
  * @param hardwareKeyTag - the hardware key tag of the integrity Context
+ * @param sessionToken - the session token to use for the API calls
  */
 export const registerWalletInstance = async (
   hardwareKeyTag: string,
@@ -42,6 +43,7 @@ export const registerWalletInstance = async (
 /**
  * Getter for the wallet attestation binded to the wallet instance created with the given hardwareKeyTag.
  * @param hardwareKeyTag - the hardware key tag of the wallet instance
+ * @param sessionToken - the session token to use for the API calls
  * @return the wallet attestation and the related key tag
  */
 export const getAttestation = async (
@@ -81,6 +83,7 @@ export const isWalletInstanceAttestationValid = (
  * Get the wallet instance status from the Wallet Provider.
  * This operation is more lightweight than getting a new attestation to check the status.
  * @param hardwareKeyTag The hardware key tag used to create the wallet instance
+ * @param sessionToken The session token to use for the API calls
  */
 export const getWalletInstanceStatus = (
   hardwareKeyTag: string,

diff --git a/ts/features/itwallet/machine/eid/__tests__/machine.test.ts b/ts/features/itwallet/machine/eid/__tests__/machine.test.ts
@@ -40,6 +40,7 @@ describe("itwEidIssuanceMachine", () => {
   const navigateToNfcInstructionsScreen = jest.fn();
   const navigateToCieIdLoginScreen = jest.fn();
   const storeIntegrityKeyTag = jest.fn();
+  const cleanupIntegrityKeyTag = jest.fn();
   const storeWalletInstanceAttestation = jest.fn();
   const storeEidCredential = jest.fn();
   const closeIssuance = jest.fn();
@@ -82,6 +83,7 @@ describe("itwEidIssuanceMachine", () => {
       navigateToNfcInstructionsScreen,
       navigateToCieIdLoginScreen,
       storeIntegrityKeyTag,
+      cleanupIntegrityKeyTag,
       storeWalletInstanceAttestation,
       storeEidCredential,
       closeIssuance,
@@ -982,4 +984,49 @@ describe("itwEidIssuanceMachine", () => {
 
     expect(actor.getSnapshot().value).toStrictEqual("Idle");
   });
+
+  it("should cleanup integrity key tag and fail when obtaining Wallet Instance Attestation fails", async () => {
+    const actor = createActor(mockedMachine);
+    actor.start();
+
+    await waitFor(() => expect(onInit).toHaveBeenCalledTimes(1));
+
+    expect(actor.getSnapshot().value).toStrictEqual("Idle");
+    expect(actor.getSnapshot().context).toStrictEqual(InitialContext);
+    expect(actor.getSnapshot().tags).toStrictEqual(new Set());
+
+    /**
+     * Start eID issuance
+     */
+    actor.send({ type: "start" });
+
+    expect(actor.getSnapshot().value).toStrictEqual("TosAcceptance");
+    expect(actor.getSnapshot().tags).toStrictEqual(new Set());
+    expect(navigateToTosScreen).toHaveBeenCalledTimes(1);
+
+    /**
+     * Accept TOS and request WIA
+     */
+
+    createWalletInstance.mockImplementation(() =>
+      Promise.resolve(T_INTEGRITY_KEY)
+    );
+    getWalletAttestation.mockImplementation(() => Promise.reject({})); // Simulate failure
+    isSessionExpired.mockImplementation(() => false); // Session not expired
+
+    actor.send({ type: "accept-tos" });
+
+    expect(actor.getSnapshot().value).toStrictEqual("WalletInstanceCreation");
+    expect(actor.getSnapshot().tags).toStrictEqual(new Set([ItwTags.Loading]));
+
+    await waitFor(() => expect(createWalletInstance).toHaveBeenCalledTimes(1));
+    await waitFor(() => expect(getWalletAttestation).toHaveBeenCalledTimes(1));
+
+    // Wallet Instance Attestation failure triggers cleanupIntegrityKeyTag
+    expect(cleanupIntegrityKeyTag).toHaveBeenCalledTimes(1);
+
+    // Check that the machine transitions to Failure state
+    expect(actor.getSnapshot().value).toStrictEqual("Failure");
+    expect(actor.getSnapshot().tags).toStrictEqual(new Set());
+  });
 });
diff --git a/ts/features/itwallet/machine/eid/actions.ts b/ts/features/itwallet/machine/eid/actions.ts
@@ -9,7 +9,10 @@ import { checkCurrentSession } from "../../../../store/actions/authentication";
 import { useIOStore } from "../../../../store/hooks";
 import { assert } from "../../../../utils/assert";
 import { itwCredentialsStore } from "../../credentials/store/actions";
-import { itwStoreIntegrityKeyTag } from "../../issuance/store/actions";
+import {
+  itwRemoveIntegrityKeyTag,
+  itwStoreIntegrityKeyTag
+} from "../../issuance/store/actions";
 import {
   itwLifecycleStateUpdated,
   itwLifecycleWalletReset
@@ -168,6 +171,11 @@ export const createEidIssuanceActionsImplementation = (
     store.dispatch(itwStoreIntegrityKeyTag(context.integrityKeyTag));
   },
 
+  cleanupIntegrityKeyTag: () => {
+    // Remove the integrity key tag from the store
+    store.dispatch(itwRemoveIntegrityKeyTag());
+  },
+
   storeWalletInstanceAttestation: ({
     context
   }: ActionArgs<Context, EidIssuanceEvents, EidIssuanceEvents>) => {

diff --git a/ts/features/itwallet/machine/eid/machine.ts b/ts/features/itwallet/machine/eid/machine.ts
@@ -43,6 +43,7 @@ export const itwEidIssuanceMachine = setup({
     navigateToNfcInstructionsScreen: notImplemented,
     navigateToWalletRevocationScreen: notImplemented,
     storeIntegrityKeyTag: notImplemented,
+    cleanupIntegrityKeyTag: notImplemented,
     storeWalletInstanceAttestation: notImplemented,
     storeEidCredential: notImplemented,
     closeIssuance: notImplemented,
@@ -225,7 +226,7 @@ export const itwEidIssuanceMachine = setup({
             target: "#itwEidIssuanceMachine.TosAcceptance"
           },
           {
-            actions: "setFailure",
+            actions: ["setFailure", "cleanupIntegrityKeyTag"],
             target: "#itwEidIssuanceMachine.Failure"
           }
         ]

diff --git a/ts/features/itwallet/onboarding/screens/WalletCardOnboardingScreen.tsx b/ts/features/itwallet/onboarding/screens/WalletCardOnboardingScreen.tsx
@@ -113,7 +113,7 @@ const ItwCredentialOnboardingSection = () => {
   );
 
   return (
-    <>
+    <View>
       <ListItemHeader
         label={I18n.t("features.wallet.onboarding.sections.itw")}
       />
@@ -135,7 +135,7 @@ const ItwCredentialOnboardingSection = () => {
           />
         ))}
       </VStack>
-    </>
+    </View>
   );
 };
 
@@ -176,7 +176,7 @@ const OtherCardsOnboardingSection = (props: { showTitle?: boolean }) => {
   );
 
   return (
-    <>
+    <View>
       {props.showTitle && (
         <ListItemHeader
           label={I18n.t("features.wallet.onboarding.sections.other")}
@@ -191,7 +191,7 @@ const OtherCardsOnboardingSection = (props: { showTitle?: boolean }) => {
           onPress={navigateToPaymentMethodOnboarding}
         />
       </VStack>
-    </>
+    </View>
   );
 };
 

diff --git a/ts/features/payments/receipts/screens/ReceiptListScreen.tsx b/ts/features/payments/receipts/screens/ReceiptListScreen.tsx
@@ -12,31 +12,39 @@ import Animated, {
   useSharedValue
 } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { useIODispatch, useIOSelector } from "../../../../store/hooks";
-import { PaymentsReceiptParamsList } from "../navigation/params";
-import { getPaymentsReceiptAction } from "../store/actions";
-import { walletReceiptListPotSelector } from "../store/selectors";
-import { useIONavigation } from "../../../../navigation/params/AppParamsList";
-import { isPaymentsTransactionsEmptySelector } from "../../home/store/selectors";
-import { ReceiptListItemTransaction } from "../components/ReceiptListItemTransaction";
+import { NoticeListItem } from "../../../../../definitions/pagopa/biz-events/NoticeListItem";
+import {
+  OperationResultScreenContent,
+  OperationResultScreenContentProps
+} from "../../../../components/screens/OperationResultScreenContent";
 import { useHeaderSecondLevel } from "../../../../hooks/useHeaderSecondLevel";
-import { useOnFirstRender } from "../../../../utils/hooks/useOnFirstRender";
-import { groupTransactionsByMonth } from "../utils";
 import I18n from "../../../../i18n";
-import { PaymentsReceiptRoutes } from "../navigation/routes";
-import { NoticeListItem } from "../../../../../definitions/pagopa/biz-events/NoticeListItem";
+import { useIONavigation } from "../../../../navigation/params/AppParamsList";
+import { useIODispatch, useIOSelector } from "../../../../store/hooks";
+import { useOnFirstRender } from "../../../../utils/hooks/useOnFirstRender";
+import { isPaymentsTransactionsEmptySelector } from "../../home/store/selectors";
 import * as analytics from "../analytics";
-import { ReceiptsCategoryFilter } from "../types";
-import { OperationResultScreenContent } from "../../../../components/screens/OperationResultScreenContent";
 import { ReceiptFadeInOutAnimationView } from "../components/ReceiptFadeInOutAnimationView";
+import { ReceiptListItemTransaction } from "../components/ReceiptListItemTransaction";
 import { ReceiptLoadingList } from "../components/ReceiptLoadingList";
 import { ReceiptSectionListHeader } from "../components/ReceiptSectionListHeader";
+import { PaymentsReceiptParamsList } from "../navigation/params";
+import { PaymentsReceiptRoutes } from "../navigation/routes";
+import { getPaymentsReceiptAction } from "../store/actions";
+import { walletReceiptListPotSelector } from "../store/selectors";
+import { ReceiptsCategoryFilter } from "../types";
+import { groupTransactionsByMonth } from "../utils";
 
 export type ReceiptListScreenProps = RouteProp<
   PaymentsReceiptParamsList,
   "PAYMENT_RECEIPT_DETAILS"
 >;
 
+type OperationResultEmptyProps = Pick<
+  OperationResultScreenContentProps,
+  "title" | "subtitle" | "pictogram"
+>;
+
 const AnimatedSectionList = Animated.createAnimatedComponent(
   SectionList as new () => SectionList<NoticeListItem>
 );
@@ -59,7 +67,6 @@ const ReceiptListScreen = () => {
 
   const transactionsPot = useIOSelector(walletReceiptListPotSelector);
   const isEmpty = useIOSelector(isPaymentsTransactionsEmptySelector);
-
   const isLoading = pot.isLoading(transactionsPot);
 
   const handleNavigateToTransactionDetails = (transaction: NoticeListItem) => {
@@ -163,14 +170,23 @@ const ReceiptListScreen = () => {
     </>
   );
 
+  const emptyProps: OperationResultEmptyProps =
+    noticeCategory === "payer"
+      ? {
+          title: I18n.t("features.payments.transactions.list.emptyPayer.title"),
+          pictogram: "empty"
+        }
+      : {
+          title: I18n.t("features.payments.transactions.list.empty.title"),
+          subtitle: I18n.t(
+            "features.payments.transactions.list.empty.subtitle"
+          ),
+          pictogram: "emptyArchive"
+        };
+
   const EmptyStateList = isEmpty ? (
     <ReceiptFadeInOutAnimationView>
-      <OperationResultScreenContent
-        isHeaderVisible
-        title={I18n.t("features.payments.transactions.list.empty.title")}
-        subtitle={I18n.t("features.payments.transactions.list.empty.subtitle")}
-        pictogram="emptyArchive"
-      />
+      <OperationResultScreenContent isHeaderVisible {...emptyProps} />
     </ReceiptFadeInOutAnimationView>
   ) : undefined;