feat(IT Wallet): [SIW-1972] Remote presentation same device

ts/features/barcode/screens/BarcodeScanScreen.tsx

@@ -42,8 +42,8 @@ import { useHardwareBackButton } from "../../../hooks/useHardwareBackButton";
 import { usePagoPaPayment } from "../../payments/checkout/hooks/usePagoPaPayment";
 import { FCI_ROUTES } from "../../fci/navigation/routes";
 import { paymentAnalyticsDataSelector } from "../../payments/history/store/selectors";
-import { ITW_REMOTE_ROUTES } from "../../itwallet/presentation/remote/navigation/routes.ts";
 import { isIdPayLocallyEnabledSelector } from "../../../store/reducers/persistedPreferences.ts";
+import { ITW_REMOTE_ROUTES } from "../../itwallet/presentation/remote/navigation/routes.ts";
 
 const BarcodeScanScreen = () => {
   const navigation = useNavigation<IOStackNavigationProp<AppParamsList>>();
@@ -156,10 +156,8 @@ const BarcodeScanScreen = () => {
         break;
       case "ITW_REMOTE":
         navigation.navigate(ITW_REMOTE_ROUTES.MAIN, {
-          screen: ITW_REMOTE_ROUTES.CLAIMS_DISCLOSURE,
-          params: {
-            itwRemoteRequestPayload: barcode.itwRemoteRequestPayload
-          }
+          screen: ITW_REMOTE_ROUTES.REQUEST_VALIDATION,
+          params: barcode.itwRemoteRequestPayload
         });
         break;
     }

ts/features/barcode/types/__tests__/decoders.test.ts

@@ -98,10 +98,10 @@ describe("test decodeIOBarcode function", () => {
         O.some({
           type: "ITW_REMOTE",
           itwRemoteRequestPayload: {
-            clientId: "abc123xy",
-            requestUri: "https://example.com/callback",
+            client_id: "abc123xy",
+            request_uri: "https://example.com/callback",
             state: "hyqizm592",
-            requestUriMethod: "GET"
+            request_uri_method: "GET"
           }
         })
       );
@@ -117,10 +117,10 @@ describe("test decodeIOBarcode function", () => {
         O.some({
           type: "ITW_REMOTE",
           itwRemoteRequestPayload: {
-            clientId: "abc123xy",
-            requestUri: "https://example.com/callback",
+            client_id: "abc123xy",
+            request_uri: "https://example.com/callback",
             state: "hyqizm592",
-            requestUriMethod: "POST"
+            request_uri_method: "POST"
           }
         })
       );

ts/features/barcode/types/decoders.ts

@@ -9,11 +9,9 @@ import * as A from "fp-ts/lib/Array";
 import * as E from "fp-ts/lib/Either";
 import * as O from "fp-ts/lib/Option";
 import { pipe } from "fp-ts/lib/function";
-import { sequenceS } from "fp-ts/lib/Apply";
-import { decodePosteDataMatrix } from "../../../utils/payment";
 import { SignatureRequestDetailView } from "../../../../definitions/fci/SignatureRequestDetailView";
+import { decodePosteDataMatrix } from "../../../utils/payment";
 import { ItwRemoteRequestPayload } from "../../itwallet/presentation/remote/Utils/itwRemoteTypeUtils.ts";
-import { getUrlParam } from "../../itwallet/common/utils/itwUrlUtils.ts";
 import { IOBarcodeType } from "./IOBarcode";
 
 // Discriminated barcode type
@@ -119,25 +117,18 @@ const decodeItwRemoteBarcode: IOBarcodeDecoderFn = (data: string) =>
     O.fromNullable(
       data.match(/^https:\/\/continua\.io\.pagopa\.it\/itw\/auth\?(.*)$/)
     ),
-    O.chain(([url]) =>
-      sequenceS(O.Monad)({
-        clientId: getUrlParam(url, "client_id"),
-        requestUri: getUrlParam(url, "request_uri"),
-        state: getUrlParam(url, "state"),
-        requestUriMethod: pipe(
-          getUrlParam(url, "request_uri_method"),
-          O.alt(() => O.some("GET"))
-        )
+    O.map(match => new URLSearchParams(match[1])),
+    O.chainEitherK(params =>
+      ItwRemoteRequestPayload.decode({
+        client_id: params.get("client_id"),
+        request_uri: params.get("request_uri"),
+        state: params.get("state"),
+        request_uri_method: params.get("request_uri_method") ?? "GET"
       })
     ),
-    O.map(({ clientId, requestUri, state, requestUriMethod }) => ({
+    O.map(itwRemoteRequestPayload => ({
       type: "ITW_REMOTE",
-      itwRemoteRequestPayload: {
-        clientId,
-        requestUri,
-        state,
-        requestUriMethod
-      }
+      itwRemoteRequestPayload
     }))
   );
 

ts/features/itwallet/navigation/useItwLinkingOptions.tsx

@@ -3,6 +3,7 @@ import { AppParamsList } from "../../../navigation/params/AppParamsList";
 import { useIOSelector } from "../../../store/hooks";
 import { isItwEnabledSelector } from "../common/store/selectors/remoteConfig";
 import { itwLifecycleIsValidSelector } from "../lifecycle/store/selectors";
+import { ITW_REMOTE_ROUTES } from "../presentation/remote/navigation/routes.ts";
 import { ITW_ROUTES } from "./routes";
 
 /**
@@ -30,6 +31,14 @@ export const useItwLinkingOptions = (): PathConfigMap<AppParamsList> => {
           }
         })
       }
+    },
+    [ITW_REMOTE_ROUTES.MAIN]: {
+      path: "itw/auth",
+      screens: {
+        [ITW_REMOTE_ROUTES.REQUEST_VALIDATION]: {
+          path: ""
+        }
+      }
     }
   };
 };

ts/features/itwallet/presentation/remote/Utils/itwRemoteTypeUtils.ts

@@ -1,8 +1,17 @@
+import * as t from "io-ts";
+import { NonEmptyString } from "@pagopa/ts-commons/lib/strings";
+
 // TODO: This will be imported from io-react-native-wallet, when the type will be available
 // Remote presentation QR code data
-export type ItwRemoteRequestPayload = {
-  clientId: string;
-  requestUri: string;
-  state: string;
-  requestUriMethod?: string;
-};
+export const ItwRemoteRequestPayload = t.intersection([
+  t.type({
+    client_id: NonEmptyString,
+    request_uri: NonEmptyString,
+    state: NonEmptyString
+  }),
+  t.partial({
+    request_uri_method: t.union([t.string, t.null, t.undefined])
+  })
+]);
+
+export type ItwRemoteRequestPayload = t.TypeOf<typeof ItwRemoteRequestPayload>;

ts/features/itwallet/presentation/remote/machine/__tests__/machine.test.ts

@@ -1,6 +1,7 @@
 import _ from "lodash";
 import { StateFrom, createActor } from "xstate";
 import { ItwRemoteMachine, itwRemoteMachine } from "../machine.ts";
+import { ItwRemoteRequestPayload } from "../../Utils/itwRemoteTypeUtils.ts";
 
 const T_CLIENT_ID = "clientId";
 const T_REQUEST_URI = "https://example.com";
@@ -12,6 +13,7 @@ describe("itwRemoteMachine", () => {
   const navigateToDiscoveryScreen = jest.fn();
   const navigateToWallet = jest.fn();
   const navigateToFailureScreen = jest.fn();
+  const navigateToClaimsDisclosureScreen = jest.fn();
   const closeIssuance = jest.fn();
 
   const isWalletActive = jest.fn();
@@ -21,6 +23,7 @@ describe("itwRemoteMachine", () => {
       navigateToDiscoveryScreen,
       navigateToWallet,
       navigateToFailureScreen,
+      navigateToClaimsDisclosureScreen,
       closeIssuance
     },
     actors: {},
@@ -49,10 +52,10 @@ describe("itwRemoteMachine", () => {
     actor.send({
       type: "start",
       payload: {
-        clientId: T_CLIENT_ID,
-        requestUri: T_REQUEST_URI,
+        client_id: T_CLIENT_ID,
+        request_uri: T_REQUEST_URI,
         state: T_STATE
-      }
+      } as ItwRemoteRequestPayload
     });
 
     expect(actor.getSnapshot().value).toStrictEqual("Failure");
@@ -67,10 +70,10 @@ describe("itwRemoteMachine", () => {
       value: "Failure",
       context: {
         payload: {
-          clientId: T_CLIENT_ID,
-          requestUri: T_REQUEST_URI,
+          client_id: T_CLIENT_ID,
+          request_uri: T_REQUEST_URI,
           state: T_STATE
-        }
+        } as ItwRemoteRequestPayload
       }
     } as MachineSnapshot);
 
@@ -91,10 +94,10 @@ describe("itwRemoteMachine", () => {
       value: "Failure",
       context: {
         payload: {
-          clientId: T_CLIENT_ID,
-          requestUri: T_REQUEST_URI,
+          client_id: T_CLIENT_ID,
+          request_uri: T_REQUEST_URI,
           state: T_STATE
-        }
+        } as ItwRemoteRequestPayload
       }
     } as MachineSnapshot);
 
@@ -116,12 +119,13 @@ describe("itwRemoteMachine", () => {
     actor.send({
       type: "start",
       payload: {
-        clientId: T_CLIENT_ID,
-        requestUri: T_REQUEST_URI,
+        client_id: T_CLIENT_ID,
+        request_uri: T_REQUEST_URI,
         state: T_STATE
-      }
+      } as ItwRemoteRequestPayload
     });
 
+    expect(navigateToClaimsDisclosureScreen).toHaveBeenCalledTimes(1);
     expect(actor.getSnapshot().value).toStrictEqual("ClaimsDisclosure");
   });
 });

ts/features/itwallet/presentation/remote/machine/actions.ts

@@ -32,6 +32,12 @@ export const createRemoteActionsImplementation = (
     });
   },
 
+  navigateToClaimsDisclosureScreen: () => {
+    navigation.replace(ITW_REMOTE_ROUTES.MAIN, {
+      screen: ITW_REMOTE_ROUTES.CLAIMS_DISCLOSURE
+    });
+  },
+
   closeIssuance: () => {
     navigation.popToTop();
   }

ts/features/itwallet/presentation/remote/machine/machine.ts

@@ -1,5 +1,4 @@
 import { assign, not, setup } from "xstate";
-import { ItwTags } from "../../../machine/tags";
 import { InitialContext, Context } from "./context";
 import { mapEventToFailure, RemoteFailureType } from "./failure";
 import { RemoteEvents } from "./events";
@@ -18,6 +17,7 @@ export const itwRemoteMachine = setup({
     navigateToFailureScreen: notImplemented,
     navigateToDiscoveryScreen: notImplemented,
     navigateToWallet: notImplemented,
+    navigateToClaimsDisclosureScreen: notImplemented,
     closeIssuance: notImplemented
   },
   actors: {},
@@ -38,13 +38,13 @@ export const itwRemoteMachine = setup({
           actions: assign(({ event }) => ({
             payload: event.payload
           })),
-          target: "PayloadValidation"
+          target: "PreliminaryChecks"
         }
       }
     },
-    PayloadValidation: {
-      description: "Validating the remote request payload before proceeding",
-      tags: [ItwTags.Loading],
+    PreliminaryChecks: {
+      description:
+        "Perform preliminary checks on the wallet and necessary conditions before proceeding",
       always: [
         {
           guard: not("isWalletActive"),
@@ -62,6 +62,7 @@ export const itwRemoteMachine = setup({
       ]
     },
     ClaimsDisclosure: {
+      entry: "navigateToClaimsDisclosureScreen",
       description:
         "Display the list of claims to disclose for the verifiable presentation",
       on: {

ts/features/itwallet/presentation/remote/navigation/ItwRemoteParamsList.ts

@@ -1,7 +1,8 @@
-import { ItwRemoteClaimsDisclosureScreenNavigationParams } from "../screens/ItwRemoteClaimsDisclosureScreen.tsx";
+import { ItwRemoteRequestValidationScreenNavigationParams } from "../screens/ItwRemoteRequestValidationScreen.tsx";
 import { ITW_REMOTE_ROUTES } from "./routes.ts";
 
 export type ItwRemoteParamsList = {
-  [ITW_REMOTE_ROUTES.CLAIMS_DISCLOSURE]: ItwRemoteClaimsDisclosureScreenNavigationParams;
+  [ITW_REMOTE_ROUTES.REQUEST_VALIDATION]: ItwRemoteRequestValidationScreenNavigationParams;
+  [ITW_REMOTE_ROUTES.CLAIMS_DISCLOSURE]: undefined;
   [ITW_REMOTE_ROUTES.FAILURE]: undefined;
 };

ts/features/itwallet/presentation/remote/navigation/ItwRemoteStackNavigator.tsx

@@ -4,7 +4,9 @@ import {
   ItwRemoteMachineContext,
   ItwRemoteMachineProvider
 } from "../machine/provider.tsx";
+
 import { ItwRemoteClaimsDisclosureScreen } from "../screens/ItwRemoteClaimsDisclosureScreen.tsx";
+import { ItwRemoteRequestValidationScreen } from "../screens/ItwRemoteRequestValidationScreen.tsx";
 import { ItwRemoteFailureScreen } from "../screens/ItwRemoteFailureScreen.tsx";
 import { ITW_REMOTE_ROUTES } from "./routes.ts";
 import { ItwRemoteParamsList } from "./ItwRemoteParamsList.ts";
@@ -24,14 +26,19 @@ const InnerNavigator = () => {
 
   return (
     <Stack.Navigator
-      initialRouteName={ITW_REMOTE_ROUTES.CLAIMS_DISCLOSURE}
+      initialRouteName={ITW_REMOTE_ROUTES.REQUEST_VALIDATION}
       screenOptions={{ gestureEnabled: isGestureEnabled }}
       screenListeners={{
         beforeRemove: () => {
           itwRemoteMachineRef.send({ type: "back" });
         }
       }}
     >
+      <Stack.Screen
+        name={ITW_REMOTE_ROUTES.REQUEST_VALIDATION}
+        component={ItwRemoteRequestValidationScreen}
+        options={hiddenHeader}
+      />
       <Stack.Screen
         name={ITW_REMOTE_ROUTES.CLAIMS_DISCLOSURE}
         component={ItwRemoteClaimsDisclosureScreen}

ts/features/itwallet/presentation/remote/navigation/routes.ts

@@ -1,5 +1,6 @@
 export const ITW_REMOTE_ROUTES = {
   MAIN: "ITW_REMOTE_MAIN" as const,
+  REQUEST_VALIDATION: "ITW_REMOTE_REQUEST_VALIDATION" as const,
   CLAIMS_DISCLOSURE: "ITW_REMOTE_CLAIMS_DISCLOSURE" as const,
   FAILURE: "ITW_REMOTE_FAILURE" as const
 };