Merge branch 'master' into IOCOM-840_preconditions

pagopa · Jun 27, 2024 · 0ab204c · 0ab204c
2 parents 02e2a42 + 408e784
commit 0ab204c
Show file tree

Hide file tree

Showing 23 changed files with 823 additions and 137 deletions.
diff --git a/package.json b/package.json
@@ -125,6 +125,7 @@
     "@redux-saga/testing-utils": "^1.1.3",
     "@shopify/flash-list": "~1.4.3",
     "@xstate/react": "^3.0.1",
+    "@xstate5/react": "npm:@xstate/react@4",
     "async-mutex": "^0.1.3",
     "buffer": "^4.9.1",
     "color": "^3.0.0",
@@ -222,7 +223,8 @@
     "vision-camera-code-scanner": "^0.2.0",
     "xml2js": "^0.5.0",
     "xss": "1.0.10",
-    "xstate": "^4.33.6"
+    "xstate": "^4.33.6",
+    "xstate5": "npm:xstate@5"
   },
   "devDependencies": {
     "@babel/core": "^7.18.8",
@@ -304,7 +306,8 @@
   },
   "resolutions": {
     "@types/react": "16.7.18",
-    "@types/prop-types": "15.5.5"
+    "@types/prop-types": "15.5.5",
+    "@xstate5/react/xstate": "^5.13.0"
   },
   "react-native": {
     "path": "path-browserify",

diff --git a/ts/features/itwallet/discovery/screens/ItwDiscoveryInfoScreen.tsx b/ts/features/itwallet/discovery/screens/ItwDiscoveryInfoScreen.tsx
@@ -1,11 +1,13 @@
-import * as React from "react";
 import { ContentWrapper } from "@pagopa/io-app-design-system";
-import I18n from "../../../../i18n";
+import * as React from "react";
+import { RNavScreenWithLargeHeader } from "../../../../components/ui/RNavScreenWithLargeHeader";
 import { useHeaderSecondLevel } from "../../../../hooks/useHeaderSecondLevel";
+import I18n from "../../../../i18n";
 import { emptyContextualHelp } from "../../../../utils/emptyContextualHelp";
-import { RNavScreenWithLargeHeader } from "../../../../components/ui/RNavScreenWithLargeHeader";
-import ItwMarkdown from "../components/ItwMarkdown";
+import { useOnFirstRender } from "../../../../utils/hooks/useOnFirstRender";
 import { FooterStackButton } from "../../common/components/FooterStackButton";
+import { ItwEidIssuanceMachineContext } from "../../machine/provider";
+import ItwMarkdown from "../components/ItwMarkdown";
 
 /**
  * This is the screen that shows the information about the discovery process
@@ -14,6 +16,12 @@ import { FooterStackButton } from "../../common/components/FooterStackButton";
  * with a primary and secondary action.
  */
 const ItwDiscoveryInfoScreen = () => {
+  const machineRef = ItwEidIssuanceMachineContext.useActorRef();
+
+  useOnFirstRender(() => {
+    machineRef.send({ type: "start" });
+  });
+
   useHeaderSecondLevel({
     title: I18n.t("features.itWallet.discovery.info.title"),
     contextualHelp: emptyContextualHelp,
@@ -28,7 +36,9 @@ const ItwDiscoveryInfoScreen = () => {
           primaryActionProps={{
             label: I18n.t("global.buttons.continue"),
             accessibilityLabel: I18n.t("global.buttons.continue"),
-            onPress: () => undefined
+            onPress: () => {
+              machineRef.send({ type: "accept-tos" });
+            }
           }}
           secondaryActionProps={{
             label: I18n.t("global.buttons.cancel"),

diff --git a/ts/features/itwallet/discovery/screens/__tests__/ItwDiscoveryInfoScreen.test.tsx b/ts/features/itwallet/discovery/screens/__tests__/ItwDiscoveryInfoScreen.test.tsx
@@ -6,6 +6,10 @@ import { appReducer } from "../../../../../store/reducers";
 import { applicationChangeState } from "../../../../../store/actions/application";
 import { renderScreenWithNavigationStoreContext } from "../../../../../utils/testWrapper";
 import { GlobalState } from "../../../../../store/reducers/types";
+import {
+  ItwEidIssuanceMachineContext,
+  ItwCredentialIssuanceMachineContext
+} from "../../../machine/provider";
 
 describe("Test ItwDiscoveryInfo screen", () => {
   it("it should render the screen correctly", () => {
@@ -17,7 +21,13 @@ describe("Test ItwDiscoveryInfo screen", () => {
 const renderComponent = () => {
   const globalState = appReducer(undefined, applicationChangeState("active"));
   return renderScreenWithNavigationStoreContext<GlobalState>(
-    () => <ItwDiscoveryInfoScreen />,
+    () => (
+      <ItwEidIssuanceMachineContext.Provider>
+        <ItwCredentialIssuanceMachineContext.Provider>
+          <ItwDiscoveryInfoScreen />
+        </ItwCredentialIssuanceMachineContext.Provider>
+      </ItwEidIssuanceMachineContext.Provider>
+    ),
     ITW_ROUTES.DISCOVERY.INFO,
     {},
     createStore(appReducer, globalState as any)

diff --git a/ts/features/itwallet/identification/screens/ItwIdentificationIdpSelectionScreen.tsx b/ts/features/itwallet/identification/screens/ItwIdentificationIdpSelectionScreen.tsx
@@ -4,7 +4,6 @@ import React from "react";
 import { SpidIdp } from "../../../../../definitions/content/SpidIdp";
 import { isReady } from "../../../../common/model/RemoteValue";
 import IdpsGrid from "../../../../components/IdpsGrid";
-import { OperationResultScreenContent } from "../../../../components/screens/OperationResultScreenContent";
 import { IOScrollViewWithLargeHeader } from "../../../../components/ui/IOScrollViewWithLargeHeader";
 import I18n from "../../../../i18n";
 import { useIONavigation } from "../../../../navigation/params/AppParamsList";
@@ -17,50 +16,41 @@ import {
   idps as idpsFallback
 } from "../../../../utils/idps";
 import LoadingComponent from "../../../fci/components/LoadingComponent";
-import { getItwGenericMappedError } from "../../common/utils/itwErrorsUtils";
-import { ITW_ROUTES } from "../../navigation/routes";
-import { useItwIdpIdentification } from "../hooks/useItwIdpIdentification";
+import { ItwEidIssuanceMachineContext } from "../../machine/provider";
+import { ItwTags } from "../../machine/tags";
 
 export const ItwIdentificationIdpSelectionScreen = () => {
-  const navigation = useIONavigation();
   const dispatch = useIODispatch();
+  const machineRef = ItwEidIssuanceMachineContext.useActorRef();
+  const isLoading = ItwEidIssuanceMachineContext.useSelector(snap =>
+    snap.hasTag(ItwTags.Loading)
+  );
 
   const idps = useIOSelector(idpsRemoteValueSelector);
   const idpValue = isReady(idps) ? idps.value.items : idpsFallback;
   const randomIdps = React.useRef<ReadonlyArray<SpidIdp | LocalIdpsFallback>>(
     randomOrderIdps(idpValue)
   );
 
-  const { startIdentification, ...identification } = useItwIdpIdentification();
-
   useFocusEffect(
     React.useCallback(() => {
       dispatch(loadIdps.request());
     }, [dispatch])
   );
 
-  React.useEffect(() => {
-    if (identification.result) {
-      navigation.navigate(ITW_ROUTES.MAIN, {
-        screen: ITW_ROUTES.ISSUANCE.EID_PREVIEW
-      });
-    }
-  }, [identification.result, navigation]);
-
-  if (identification.error) {
-    const mappedError = getItwGenericMappedError(() => navigation.goBack());
-    return <OperationResultScreenContent {...mappedError} />;
-  }
+  const onIdpSelected = (idp: LocalIdpsFallback) => {
+    machineRef.send({ type: "select-spid-idp", idp });
+  };
 
-  if (identification.isPending) {
+  if (isLoading) {
     return <LoadingView />;
   }
 
   return (
     <IOScrollViewWithLargeHeader title={{ label: "" }}>
       <IdpsGrid
         idps={randomIdps.current}
-        onIdpSelected={startIdentification}
+        onIdpSelected={onIdpSelected}
         headerComponent={undefined}
         footerComponent={<VSpacer size={24} />}
       />

diff --git a/ts/features/itwallet/identification/screens/ItwIdentificationModeSelectionScreen.tsx b/ts/features/itwallet/identification/screens/ItwIdentificationModeSelectionScreen.tsx
@@ -8,28 +8,25 @@ import * as pot from "@pagopa/ts-commons/lib/pot";
 import { useFocusEffect } from "@react-navigation/native";
 import React from "react";
 import { Alert } from "react-native";
-import { RNavScreenWithLargeHeader } from "../../../../components/ui/RNavScreenWithLargeHeader";
+import { IOScrollViewWithLargeHeader } from "../../../../components/ui/IOScrollViewWithLargeHeader";
 import I18n from "../../../../i18n";
 import { useIONavigation } from "../../../../navigation/params/AppParamsList";
 import { useIODispatch, useIOSelector } from "../../../../store/hooks";
 import { isCieSupportedSelector } from "../../../../store/reducers/cie";
 import { cieFlowForDevServerEnabled } from "../../../cieLogin/utils";
+import { ItwEidIssuanceMachineContext } from "../../machine/provider";
+import { ITW_ROUTES } from "../../navigation/routes";
 import { itwNfcIsEnabled } from "../store/actions";
 import { itwIsNfcEnabledSelector } from "../store/selectors";
-import { ITW_ROUTES } from "../../navigation/routes";
 
 export const ItwIdentificationModeSelectionScreen = () => {
   const navigation = useIONavigation();
   const dispatch = useIODispatch();
+  const machineRef = ItwEidIssuanceMachineContext.useActorRef();
+
   const isCieSupportedPot = useIOSelector(isCieSupportedSelector);
   const isNfcEnabledPot = useIOSelector(itwIsNfcEnabledSelector);
 
-  useFocusEffect(
-    React.useCallback(() => {
-      dispatch(itwNfcIsEnabled.request());
-    }, [dispatch])
-  );
-
   const isCieSupported = React.useMemo(
     () => cieFlowForDevServerEnabled || pot.getOrElse(isCieSupportedPot, false),
     [isCieSupportedPot]
@@ -41,9 +38,7 @@ export const ItwIdentificationModeSelectionScreen = () => {
   );
 
   const handleSpidPress = () => {
-    navigation.navigate(ITW_ROUTES.MAIN, {
-      screen: ITW_ROUTES.IDENTIFICATION.IDP_SELECTION
-    });
+    machineRef.send({ type: "select-identification-mode", mode: "spid" });
   };
 
   const handleCiePinPress = () => {
@@ -60,8 +55,14 @@ export const ItwIdentificationModeSelectionScreen = () => {
     Alert.alert("Not implemented");
   };
 
+  useFocusEffect(
+    React.useCallback(() => {
+      dispatch(itwNfcIsEnabled.request());
+    }, [dispatch])
+  );
+
   return (
-    <RNavScreenWithLargeHeader
+    <IOScrollViewWithLargeHeader
       title={{ label: I18n.t("features.itWallet.identification.mode.title") }}
     >
       <ContentWrapper>
@@ -105,6 +106,6 @@ export const ItwIdentificationModeSelectionScreen = () => {
           onPress={handleCieIdPress}
         />
       </ContentWrapper>
-    </RNavScreenWithLargeHeader>
+    </IOScrollViewWithLargeHeader>
   );
 };
diff --git a/ts/features/itwallet/identification/screens/ItwIdentificationNfcInstructionsScreen.tsx b/ts/features/itwallet/identification/screens/ItwIdentificationNfcInstructionsScreen.tsx
@@ -5,11 +5,10 @@ import {
   ListItemInfo
 } from "@pagopa/io-app-design-system";
 import React from "react";
-import { RNavScreenWithLargeHeader } from "../../../../components/ui/RNavScreenWithLargeHeader";
+import { IOScrollViewWithLargeHeader } from "../../../../components/ui/IOScrollViewWithLargeHeader";
 import I18n from "../../../../i18n";
 import { useIONavigation } from "../../../../navigation/params/AppParamsList";
 import * as cieUtils from "../../../../utils/cie";
-import { FooterStackButton } from "../../common/components/FooterStackButton";
 
 export const ItwIdentificationNfcInstructionsScreen = () => {
   const navigation = useIONavigation();
@@ -23,23 +22,20 @@ export const ItwIdentificationNfcInstructionsScreen = () => {
   };
 
   return (
-    <RNavScreenWithLargeHeader
+    <IOScrollViewWithLargeHeader
       title={{ label: I18n.t("features.itWallet.identification.nfc.title") }}
       description={I18n.t("features.itWallet.identification.nfc.description")}
-      fixedBottomSlot={
-        <FooterStackButton
-          primaryActionProps={{
-            label: I18n.t("features.itWallet.identification.nfc.primaryAction"),
-            onPress: handleOpenSettingsPress
-          }}
-          secondaryActionProps={{
-            label: I18n.t(
-              "features.itWallet.identification.nfc.secondaryAction"
-            ),
-            onPress: handleClosePress
-          }}
-        />
-      }
+      actions={{
+        type: "TwoButtons",
+        primary: {
+          label: I18n.t("features.itWallet.identification.nfc.primaryAction"),
+          onPress: handleOpenSettingsPress
+        },
+        secondary: {
+          label: I18n.t("features.itWallet.identification.nfc.secondaryAction"),
+          onPress: handleClosePress
+        }
+      }}
     >
       <ContentWrapper>
         <ListItemHeader
@@ -69,6 +65,6 @@ export const ItwIdentificationNfcInstructionsScreen = () => {
           icon="systemToggleInstructions"
         />
       </ContentWrapper>
-    </RNavScreenWithLargeHeader>
+    </IOScrollViewWithLargeHeader>
   );
 };
diff --git a/ts/features/itwallet/issuance/screens/ItwIssuanceEidPreviewScreen.tsx b/ts/features/itwallet/issuance/screens/ItwIssuanceEidPreviewScreen.tsx
@@ -11,17 +11,16 @@ import {
 } from "../../common/utils/itwErrorsUtils";
 import { ItwCredentialsMocks } from "../../common/utils/itwMocksUtils";
 import { StoredCredential } from "../../common/utils/itwTypesUtils";
-import { ITW_ROUTES } from "../../navigation/routes";
+import { ItwEidIssuanceMachineContext } from "../../machine/provider";
 import { ItwCredentialPreviewScreenContent } from "../components/ItwCredentialPreviewScreenContent";
 
 export const ItwIssuanceEidPreviewScreen = () => {
   const navigation = useIONavigation();
+  const machineRef = ItwEidIssuanceMachineContext.useActorRef();
   const eidOption = O.some(ItwCredentialsMocks.eid);
 
   const handleStoreCredentialSuccess = () => {
-    navigation.navigate(ITW_ROUTES.MAIN, {
-      screen: ITW_ROUTES.ISSUANCE.RESULT
-    });
+    machineRef.send({ type: "add-to-wallet" });
   };
 
   /**

diff --git a/ts/features/itwallet/issuance/screens/ItwIssuanceEidResultScreen.tsx b/ts/features/itwallet/issuance/screens/ItwIssuanceEidResultScreen.tsx
@@ -1,13 +1,17 @@
 import React from "react";
 import { OperationResultScreenContent } from "../../../../components/screens/OperationResultScreenContent";
 import I18n from "../../../../i18n";
-import { useItwDismissalDialog } from "../../common/hooks/useItwDismissalDialog";
+import { ItwEidIssuanceMachineContext } from "../../machine/provider";
 
 export const ItwIssuanceEidResultScreen = () => {
-  const dismissalDialog = useItwDismissalDialog();
+  const machineRef = ItwEidIssuanceMachineContext.useActorRef();
 
   const handleContinue = () => {
-    // TODO continue through the credential issuing
+    machineRef.send({ type: "add-new-credential" });
+  };
+
+  const handleClose = () => {
+    machineRef.send({ type: "go-to-wallet" });
   };
 
   return (
@@ -23,7 +27,7 @@ export const ItwIssuanceEidResultScreen = () => {
       }}
       secondaryAction={{
         label: I18n.t("global.buttons.close"),
-        onPress: dismissalDialog.show
+        onPress: handleClose
       }}
     />
   );

diff --git a/ts/features/itwallet/machine/credential/actions.ts b/ts/features/itwallet/machine/credential/actions.ts
@@ -0,0 +1,27 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import { useIONavigation } from "../../../../navigation/params/AppParamsList";
+import { ITW_ROUTES } from "../../navigation/routes";
+
+export default (navigation: ReturnType<typeof useIONavigation>) => ({
+  navigateToAuthDataScreen: () => {
+    navigation.navigate(ITW_ROUTES.MAIN, {
+      screen: ITW_ROUTES.ISSUANCE.CREDENTIAL_AUTH
+    });
+  },
+
+  navigateToCredentialPreviewScreen: () => {
+    navigation.navigate(ITW_ROUTES.MAIN, {
+      screen: ITW_ROUTES.ISSUANCE.CREDENTIAL_PREVIEW
+    });
+  },
+
+  navigateToFailureScreen: () => {},
+
+  navigateToWallet: () => {},
+
+  storeCredential: () => {},
+
+  closeIssuance: () => {
+    navigation.popToTop();
+  }
+});
diff --git a/ts/features/itwallet/machine/credential/actors.ts b/ts/features/itwallet/machine/credential/actors.ts
@@ -0,0 +1,11 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import { fromPromise } from "xstate5";
+import { StoredCredential } from "../../common/utils/itwTypesUtils";
+
+export default () => ({
+  registerWalletInstance: fromPromise<string>(async () => ""),
+  requestCredential: fromPromise<
+    StoredCredential,
+    StoredCredential | undefined
+  >(async () => ({} as StoredCredential))
+});
diff --git a/ts/features/itwallet/machine/credential/context.ts b/ts/features/itwallet/machine/credential/context.ts
@@ -0,0 +1,16 @@
+import { CredentialType } from "../../common/utils/itwMocksUtils";
+import { StoredCredential } from "../../common/utils/itwTypesUtils";
+
+export type Context = {
+  credentialType: CredentialType | undefined;
+  walletAttestation: string | undefined;
+  eid: StoredCredential | undefined;
+  credential: StoredCredential | undefined;
+};
+
+export const InitialContext: Context = {
+  credentialType: undefined,
+  walletAttestation: undefined,
+  eid: undefined,
+  credential: undefined
+};