chore: [IOBP-726] Migrate IdPay machines to XState V5

locales/en/index.yml

@@ -3745,6 +3745,7 @@ idpay:
       INSTRUMENTS_LIST_LOAD_FAILURE: "Errore nel caricamento della lista strumenti"
       INSTRUMENT_ENROLL_FAILURE: "Errore durante l'aggiunta del metodo di pagamento"
       INSTRUMENT_DELETE_FAILURE: "Errore durante la rimozione del metodo di pagamento"
+      SESSION_EXPIRED: "C'è stato un problema, riprova"
     headerTitle: "Configure the initiative"
     intro:
       title: "We are almost there"

locales/it/index.yml

@@ -3745,6 +3745,7 @@ idpay:
       INSTRUMENTS_LIST_LOAD_FAILURE: "Errore nel caricamento della lista strumenti"
       INSTRUMENT_ENROLL_FAILURE: "Errore durante l'aggiunta del metodo di pagamento"
       INSTRUMENT_DELETE_FAILURE: "Errore durante la rimozione del metodo di pagamento"
+      SESSION_EXPIRED: "C'è stato un problema, riprova"
     headerTitle: "Configura l'iniziativa"
     intro:
       title: "Ci siamo quasi"

package.json

@@ -94,7 +94,6 @@
     "generate": "npm-run-all generate:*",
     "locales_unused": "ts-node --skip-project -O '{\"lib\":[\"es2015\"]}' scripts/unused-locales.ts",
     "remove_unused_locales": "ts-node --skip-project -O '{\"lib\":[\"es2015\"]}' scripts/remove-unused-locales.ts",
-    "generate:xstate-types": "xstate typegen \"ts/**/*.ts?(x)\"",
     "prepare": "husky install"
   },
   "lint-staged": {
@@ -130,9 +129,8 @@
     "@redux-saga/testing-utils": "^1.1.3",
     "@sentry/react-native": "^5.32.0",
     "@shopify/flash-list": "~1.7.0",
+    "@xstate/react": "^4.0.1",
     "@textlint/markdown-to-ast": "^14.0.4",
-    "@xstate/react": "^3.0.1",
-    "@xstate5/react": "npm:@xstate/react@4",
     "async-mutex": "^0.1.3",
     "buffer": "^4.9.1",
     "color": "^3.0.0",
@@ -227,8 +225,7 @@
     "validator": "^13.7.0",
     "xml2js": "^0.5.0",
     "xss": "1.0.10",
-    "xstate": "^4.33.6",
-    "xstate5": "npm:xstate@5"
+    "xstate": "^5"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
@@ -270,7 +267,6 @@
     "@types/xml2js": "^0.4.11",
     "@typescript-eslint/eslint-plugin": "^5.9.1",
     "@typescript-eslint/parser": "^7.13.0",
-    "@xstate/cli": "^0.3.3",
     "abortcontroller-polyfill": "1.7.3",
     "babel-jest": "^29.2.1",
     "babel-plugin-macros": "^3.1.0",
@@ -320,8 +316,7 @@
     "@babel/preset-typescript": "^7.23.3",
     "@babel/plugin-transform-typescript": "^7.23.6",
     "@babel/plugin-syntax-typescript": "^7.23.3",
-    "@babel/types": "^7.23.6",
-    "@xstate5/react/xstate": "^5.13.0"
+    "@babel/types": "^7.23.6"
   },
   "react-native": {
     "path": "path-browserify",

ts/features/barcode/screens/BarcodeScanScreen.tsx

@@ -25,7 +25,7 @@ import {
 } from "../../../store/reducers/backendStatus";
 import { emptyContextualHelp } from "../../../utils/emptyContextualHelp";
 import { useIOBottomSheetAutoresizableModal } from "../../../utils/hooks/bottomSheet";
-import { IDPayPaymentRoutes } from "../../idpay/payment/navigation/navigator";
+import { IdPayPaymentRoutes } from "../../idpay/payment/navigation/routes";
 import { PaymentsCheckoutRoutes } from "../../payments/checkout/navigation/routes";
 import * as analytics from "../analytics";
 import { BarcodeScanBaseScreenComponent } from "../components/BarcodeScanBaseScreenComponent";
@@ -169,8 +169,8 @@ const BarcodeScanScreen = () => {
 
   const handleIdPayPaymentCodeInput = () => {
     manualInputModal.dismiss();
-    navigation.navigate(IDPayPaymentRoutes.IDPAY_PAYMENT_MAIN, {
-      screen: IDPayPaymentRoutes.IDPAY_PAYMENT_CODE_INPUT
+    navigation.navigate(IdPayPaymentRoutes.IDPAY_PAYMENT_MAIN, {
+      screen: IdPayPaymentRoutes.IDPAY_PAYMENT_CODE_INPUT
     });
   };
 

ts/features/idpay/common/machine/selectors.ts

@@ -0,0 +1,8 @@
+import { AnyMachineSnapshot } from "xstate";
+import { IdPayTags } from "./tags";
+
+export const isLoadingSelector = (snapshot: AnyMachineSnapshot) =>
+  snapshot.hasTag(IdPayTags.Loading);
+
+export const isUpsertingSelector = (snapshot: AnyMachineSnapshot) =>
+  snapshot.hasTag(IdPayTags.Upserting);

ts/features/idpay/common/machine/tags.ts

@@ -0,0 +1,4 @@
+export enum IdPayTags {
+  Loading = "Loading",
+  Upserting = "Upserting"
+}

ts/features/idpay/common/navigation/linking.ts

@@ -1,20 +1,20 @@
 import { PathConfigMap } from "@react-navigation/native";
 import { IDPayDetailsRoutes } from "../../details/navigation";
-import { IDPayOnboardingRoutes } from "../../onboarding/navigation/navigator";
-import { IDPayPaymentRoutes } from "../../payment/navigation/navigator";
+import { IdPayPaymentRoutes } from "../../payment/navigation/routes";
 import { AppParamsList } from "../../../../navigation/params/AppParamsList";
+import { IdPayOnboardingRoutes } from "../../onboarding/navigation/routes";
 
 export const idPayLinkingOptions: PathConfigMap<AppParamsList> = {
   /**
    * IDPay initiative onboarding
    */
-  [IDPayOnboardingRoutes.IDPAY_ONBOARDING_MAIN]: {
+  [IdPayOnboardingRoutes.IDPAY_ONBOARDING_MAIN]: {
     path: "idpay/onboarding",
     screens: {
       /**
        * Handles ioit://idpay/onboarding/{initiativeId}
        */
-      [IDPayOnboardingRoutes.IDPAY_ONBOARDING_INITIATIVE_DETAILS]: "/:serviceId"
+      [IdPayOnboardingRoutes.IDPAY_ONBOARDING_INITIATIVE_DETAILS]: "/:serviceId"
     }
   },
   /**
@@ -32,13 +32,13 @@ export const idPayLinkingOptions: PathConfigMap<AppParamsList> = {
   /**
    * IDPay payment authorization
    */
-  [IDPayPaymentRoutes.IDPAY_PAYMENT_MAIN]: {
+  [IdPayPaymentRoutes.IDPAY_PAYMENT_MAIN]: {
     path: "idpay/auth",
     screens: {
       /**
        * Handles ioit://idpay/auth/{trxCode}
        */
-      [IDPayPaymentRoutes.IDPAY_PAYMENT_AUTHORIZATION]: "/:trxCode"
+      [IdPayPaymentRoutes.IDPAY_PAYMENT_AUTHORIZATION]: "/:trxCode"
     }
   }
 };

ts/features/idpay/common/saga/index.ts

@@ -20,6 +20,7 @@ import { watchIDPayInitiativeDetailsSaga } from "../../details/saga";
 import { watchIDPayTimelineSaga } from "../../timeline/saga";
 import { watchIDPayInitiativeConfigurationSaga } from "../../configuration/saga";
 import { watchIDPayBarcodeSaga } from "../../barcode/saga";
+import { watchIdPayUnsubscriptionSaga } from "../../unsubscription/saga";
 
 export function* watchIDPaySaga(bpdToken: string): SagaIterator {
   const isPagoPATestEnabled = yield* select(isPagoPATestEnabledSelector);
@@ -64,4 +65,10 @@ export function* watchIDPaySaga(bpdToken: string): SagaIterator {
     preferredLanguage
   );
   yield* fork(watchIDPayBarcodeSaga, idPayClient, bearerToken);
+  yield* fork(
+    watchIdPayUnsubscriptionSaga,
+    idPayClient,
+    bearerToken,
+    preferredLanguage
+  );
 }

ts/features/idpay/common/store/actions/index.ts

@@ -3,6 +3,7 @@ import { IdPayCodeActions } from "../../../code/store/actions";
 import { IDPayInitiativeConfigurationActions } from "../../../configuration/store/actions";
 import { IdPayInitiativeActions } from "../../../details/store/actions";
 import { IdPayTimelineActions } from "../../../timeline/store/actions";
+import { IdPayUnsubscriptionActions } from "../../../unsubscription/store/actions";
 import { IdPayWalletActions } from "../../../wallet/store/actions";
 
 export type IdPayActions =
@@ -11,4 +12,5 @@ export type IdPayActions =
   | IdPayTimelineActions
   | IdPayCodeActions
   | IDPayInitiativeConfigurationActions
-  | IdPayBarcodeActions;
+  | IdPayBarcodeActions
+  | IdPayUnsubscriptionActions;

ts/features/idpay/common/store/reducers/index.ts

@@ -13,6 +13,9 @@ import configurationReducer, {
   IdPayInitiativeConfigurationState
 } from "../../../configuration/store";
 import barcodeReducer, { IdPayBarcodeState } from "../../../barcode/store";
+import unsubscriptionReducer, {
+  IdPayUnsubscriptionState
+} from "../../../unsubscription/store/reducers";
 
 export type IDPayState = {
   wallet: IdPayWalletState;
@@ -21,6 +24,7 @@ export type IDPayState = {
   configuration: IdPayInitiativeConfigurationState;
   code: IdPayCodeState & PersistPartial;
   barcode: IdPayBarcodeState;
+  unsubscription: IdPayUnsubscriptionState;
 };
 
 const idPayReducer = combineReducers({
@@ -29,7 +33,8 @@ const idPayReducer = combineReducers({
   timeline: timelineReducer,
   code: codePersistor,
   configuration: configurationReducer,
-  barcode: barcodeReducer
+  barcode: barcodeReducer,
+  unsubscription: unsubscriptionReducer
 });
 
 export default idPayReducer;

ts/features/idpay/configuration/components/InstrumentEnrollmentSwitch.tsx

@@ -5,16 +5,15 @@ import {
   ListItemSwitch
 } from "@pagopa/io-app-design-system";
 import * as pot from "@pagopa/ts-commons/lib/pot";
-import { useSelector } from "@xstate/react";
 import * as E from "fp-ts/lib/Either";
 import * as O from "fp-ts/lib/Option";
 import { pipe } from "fp-ts/lib/function";
 import { default as React } from "react";
 import { StatusEnum as InstrumentStatusEnum } from "../../../../../definitions/idpay/InstrumentDTO";
 import { CreditCardType, Wallet } from "../../../../types/pagopa";
 import { instrumentStatusLabels } from "../../common/labels";
-import { useConfigurationMachineService } from "../xstate/provider";
-import { instrumentStatusByIdWalletSelector } from "../xstate/selectors";
+import { IdPayConfigurationMachineContext } from "../machine/provider";
+import { instrumentStatusByIdWalletSelector } from "../machine/selectors";
 
 /**
  * See @ListItemSwitch
@@ -40,11 +39,9 @@ type InstrumentEnrollmentSwitchProps = {
  */
 const InstrumentEnrollmentSwitch = (props: InstrumentEnrollmentSwitchProps) => {
   const { wallet, isStaged, onValueChange } = props;
-
-  const configurationMachine = useConfigurationMachineService();
+  const { useSelector } = IdPayConfigurationMachineContext;
 
   const instrumentStatusPot = useSelector(
-    configurationMachine,
     instrumentStatusByIdWalletSelector(wallet.idWallet)
   );