feat: [IOBP-1890] IDPay onboarding loading screen (#7211)

## Short description
This pull request introduces a new loading screen to the IDPay
onboarding flow. This screen will be displayed before the final
onboarding outcome

## List of changes proposed in this pull request
- `navigateToLoadingScreen` action to the onboarding actions
implementation to navigate to the loading screen
- Implemented the `IdPayLoadingScreen` component, which displays a
loading indicator and triggers a transition once the loading state is
complete
- Added a new state (`OnLoading`) to the IDPay onboarding state machine,
including transitions and entry actions (`navigateToLoadingScreen`)
- Update IDPay stack navigator and routes
- Fix error outcome navigation with a new event `check-details` to go
inside initiative details if already onboarded

## How to test
- Try to onboard an initiative
- Ensure that before successful/failure outcome, a loading screen is
appearing


## Preview
| Error outcome | Success outcome|
|--------|--------|
| <video
src="https://github.com/user-attachments/assets/2bfd9897-5f75-47ef-810a-8de866711e5b"/>
|<video
src="https://github.com/user-attachments/assets/5d68b675-bf80-4fe7-940c-65f08f1cab70"/>|

---------

Co-authored-by: Alessandro <[email protected]>

Author: LeleDallas

locales/de/index.json

@@ -4130,6 +4130,10 @@
         "deny": "Non attivare",
         "success": "Sie aktivierten Push -Benachrichtigungen",
         "advice": "Consigliato"
+      },
+      "loading": {
+        "subtitle": "Attendi qualche secondo",
+        "title": "Stiamo elaborando la tua richiesta"
       }
     }
   }

locales/en/index.json

@@ -5819,6 +5819,10 @@
         "deny": "Non attivare",
         "success": "You activated Push notifications",
         "advice": "Consigliato"
+      },
+      "loading": {
+        "subtitle": "Attendi qualche secondo",
+        "title": "Stiamo elaborando la tua richiesta"
       }
     },
     "configuration": {

locales/it/index.json

@@ -5819,6 +5819,10 @@
         "deny": "Non attivare",
         "success": "Hai attivato le notifiche push",
         "advice": "Consigliato"
+      },
+      "loading": {
+        "subtitle": "Attendi qualche secondo",
+        "title": "Stiamo elaborando la tua richiesta"
       }
     },
     "configuration": {

ts/features/idpay/onboarding/machine/actions.ts

@@ -75,6 +75,11 @@ export const createActionsImplementation = (
   const closeOnboardingSuccess = () =>
     navigation.navigate(SERVICES_ROUTES.SERVICES_HOME);
 
+  const navigateToLoadingScreen = () =>
+    navigation.navigate(IdPayOnboardingRoutes.IDPAY_ONBOARDING_MAIN, {
+      screen: IdPayOnboardingRoutes.IDPAY_ONBOARDING_LOADING
+    });
+
   const handleSessionExpired = () => {
     dispatch(
       refreshSessionToken.request({
@@ -96,6 +101,7 @@ export const createActionsImplementation = (
     navigateToInputFormScreen,
     navigateToEnableNotificationScreen,
     navigateToEnableMessageScreen,
+    navigateToLoadingScreen,
     closeOnboarding,
     closeOnboardingSuccess,
     handleSessionExpired

ts/features/idpay/onboarding/machine/events.ts

@@ -40,6 +40,10 @@ export type UpdatePushNotificationSetting = {
   readonly isPushNotificationEnabled: boolean;
 };
 
+export type CheckDetails = {
+  readonly type: "check-details";
+};
+
 export type IdPayOnboardingEvents =
   | StartOnboarding
   | SelectMultiConsent
@@ -48,4 +52,5 @@ export type IdPayOnboardingEvents =
   | Next
   | Back
   | Close
-  | UpdatePushNotificationSetting;
+  | UpdatePushNotificationSetting
+  | CheckDetails;

ts/features/idpay/onboarding/machine/machine.ts

@@ -38,7 +38,8 @@ export const idPayOnboardingMachine = setup({
     handleSessionExpired: notImplementedStub,
     navigateToInputFormScreen: notImplementedStub,
     navigateToEnableNotificationScreen: notImplementedStub,
-    navigateToEnableMessageScreen: notImplementedStub
+    navigateToEnableMessageScreen: notImplementedStub,
+    navigateToLoadingScreen: notImplementedStub
   },
   actors: {
     getInitiativeInfo: fromPromise<InitiativeDataDTO, string>(
@@ -512,6 +513,7 @@ export const idPayOnboardingMachine = setup({
     },
 
     AcceptingCriteria: {
+      entry: "navigateToLoadingScreen",
       tags: [IdPayTags.Loading],
       invoke: {
         src: "acceptRequiredCriteria",
@@ -576,7 +578,7 @@ export const idPayOnboardingMachine = setup({
     OnboardingFailure: {
       entry: "navigateToFailureScreen",
       on: {
-        next: {
+        "check-details": {
           actions: "navigateToInitiativeMonitoringScreen"
         }
       }

ts/features/idpay/onboarding/navigation/navigator.tsx

@@ -11,6 +11,7 @@ import IdPayEnableNotificationScreen from "../screens/IdPayEnableNotificationScr
 import IdPayFailureScreen from "../screens/IdPayFailureScreen";
 import { IdPayInitiativeDetailsScreen } from "../screens/IdPayInitiativeDetailsScreen";
 import IdPayInputFormVerificationScreen from "../screens/IdPayInputFormVerificationScreen";
+import IdPayLoadingScreen from "../screens/IdPayLoadingScreen";
 import IdPayMultiValuePrerequisitesScreen from "../screens/IdPayMultiValuePrerequisitesScreen";
 import IdPayPDNDPrerequisitesScreen from "../screens/IdPayPDNDPrerequisitesScreen";
 import { IdPayOnboardingParamsList } from "./params";
@@ -82,6 +83,12 @@ export const InnerNavigator = () => {
         component={IdPayFailureScreen}
         options={{ gestureEnabled: false, headerShown: false }}
       />
+
+      <Stack.Screen
+        name={IdPayOnboardingRoutes.IDPAY_ONBOARDING_LOADING}
+        component={IdPayLoadingScreen}
+        options={{ gestureEnabled: false, headerShown: false }}
+      />
     </Stack.Navigator>
   );
 };

ts/features/idpay/onboarding/navigation/params.ts

@@ -11,4 +11,5 @@ export type IdPayOnboardingParamsList = {
   [IdPayOnboardingRoutes.IDPAY_ONBOARDING_MULTI_SELF_DECLARATIONS]: undefined;
   [IdPayOnboardingRoutes.IDPAY_ONBOARDING_INPUT_FORM]: undefined;
   [IdPayOnboardingRoutes.IDPAY_ONBOARDING_ENABLE_NOTIFICATIONS]: undefined;
+  [IdPayOnboardingRoutes.IDPAY_ONBOARDING_LOADING]: undefined;
 };

ts/features/idpay/onboarding/navigation/routes.ts

@@ -9,5 +9,7 @@ export const IdPayOnboardingRoutes = {
   IDPAY_ONBOARDING_MULTI_SELF_DECLARATIONS:
     "IDPAY_ONBOARDING_MULTI_SELF_DECLARATIONS",
   IDPAY_ONBOARDING_INPUT_FORM: "IDPAY_ONBOARDING_INPUT_FORM",
-  IDPAY_ONBOARDING_ENABLE_NOTIFICATIONS: "IDPAY_ONBOARDING_ENABLE_NOTIFICATIONS"
+  IDPAY_ONBOARDING_ENABLE_NOTIFICATIONS:
+    "IDPAY_ONBOARDING_ENABLE_NOTIFICATIONS",
+  IDPAY_ONBOARDING_LOADING: "IDPAY_ONBOARDING_LOADING"
 } as const;

ts/features/idpay/onboarding/screens/IdPayFailureScreen.tsx

@@ -31,7 +31,7 @@ const IdPayFailureScreen = () => {
       accessibilityLabel: I18n.t(
         "idpay.onboarding.failure.button.goToInitiative"
       ),
-      onPress: () => machine.send({ type: "next" })
+      onPress: () => machine.send({ type: "check-details" })
     }),
     [machine]
   );