feat(Bonus Pagamenti Digitali): [#175883778,#175883201,#175883970] Onboard Satispay account orchestration

locales/en/index.yml

@@ -729,6 +729,12 @@ wallet:
           body1: "Turn on your methods saved into your wallet and start collecting cashback on your valid transactions."
           body2: "If you prefer, you can activate cashback on these methods later as well."
           skip: "Maybe later"
+    satispay:
+      headerTitle: "Add Satispay"
+      loadingSearch:
+        title: "We are verifying your Satispay account\n\nPlease wait a few seconds"
+      loadingAdd:
+        title: "We are adding your Satispay account\n\nPlease wait a few seconds"
   alert:
     msgErrorUpdateApp: "An error occurred while opening the app store"
     titlePagoPaUpdateApp: Update required

locales/it/index.yml

@@ -750,6 +750,12 @@ wallet:
           body1: "Attiva il cashback sui metodi salvati nel tuo portafoglio per iniziare a collezionare le transazioni valide."
           body2: "Se preferisci, puoi attivare il cashback su questi metodi anche in un secondo momento."
           skip: "Non ora, grazie"
+    satispay:
+      headerTitle: "Aggiungi Satispay"
+      loadingSearch:
+        title: "Stiamo verificando il tuo account Satispay\n\nAttendi qualche secondo"
+      loadingAdd:
+        title: "Stiamo aggiungendo il tuo account Satispay\n\nAttendi qualche secondo"
   alert:
     msgErrorUpdateApp: "Si è verificato un errore durante l'apertura dello store delle app"
     titlePagoPaUpdateApp: Aggiornamento richiesto

ts/api/pagopa.ts

@@ -24,7 +24,6 @@ import {
 import { Omit } from "italia-ts-commons/lib/types";
 import { BancomatCardsRequest } from "../../definitions/pagopa/walletv2/BancomatCardsRequest";
 import {
-  addWalletSatispayUsingPOSTDefaultDecoder,
   AddWalletSatispayUsingPOSTT,
   addWalletsBancomatCardUsingPOSTDecoder,
   getAbiListUsingGETDefaultDecoder,
@@ -37,6 +36,7 @@ import {
 import {
   addWalletCreditCardUsingPOSTDecoder,
   AddWalletCreditCardUsingPOSTT,
+  addWalletSatispayUsingPOSTDecoder,
   checkPaymentUsingGETDefaultDecoder,
   CheckPaymentUsingGETT,
   DeleteBySessionCookieExpiredUsingDELETET,
@@ -66,6 +66,7 @@ import {
   NullableWallet,
   PagoPAErrorResponse,
   PatchedWalletV2ListResponse,
+  PatchedWalletV2Response,
   PaymentManagerToken,
   PspListResponse,
   PspResponse,
@@ -457,7 +458,7 @@ const addSatispayToWallet: AddWalletSatispayUsingPOSTT = {
   query: () => ({}),
   body: ({ satispayRequest }) => JSON.stringify(satispayRequest),
   headers: composeHeaderProducers(tokenHeaderProducer, ApiHeaderJson),
-  response_decoder: addWalletSatispayUsingPOSTDefaultDecoder()
+  response_decoder: addWalletSatispayUsingPOSTDecoder(PatchedWalletV2Response)
 };
 
 const withPaymentManagerToken = <P extends { Bearer: string }, R>(

ts/features/bonus/bpd/analytics/index.ts

@@ -40,6 +40,7 @@ import {
   bpdPaymentMethodActivation,
   bpdUpdatePaymentMethodActivation
 } from "../store/actions/paymentMethods";
+import { isTimeoutError } from "../../../../utils/errors";
 
 // eslint-disable-next-line complexity
 const trackAction = (mp: NonNullable<typeof mixpanel>) => (
@@ -152,10 +153,9 @@ const trackAction = (mp: NonNullable<typeof mixpanel>) => (
 
     case getType(searchUserPans.failure):
       return mp.track(action.type, {
-        reason:
-          action.payload.kind === "timeout"
-            ? action.payload.kind
-            : action.payload.value.message
+        reason: isTimeoutError(action.payload)
+          ? action.payload.kind
+          : action.payload.value.message
       });
 
     // Amount

ts/features/bonus/bpd/saga/orchestration/activateBpdOnNewAddedPaymentMethods.ts

@@ -0,0 +1,44 @@
+import { NavigationNavigateAction } from "react-navigation";
+import { call, put } from "redux-saga/effects";
+import { navigateToWalletHome } from "../../../../../store/actions/navigation";
+import {
+  EnableableFunctionsTypeEnum,
+  PaymentMethod
+} from "../../../../../types/pagopa";
+import { SagaCallReturnType } from "../../../../../types/utils";
+import { hasFunctionEnabled } from "../../../../../utils/walletv2";
+import { navigateToSuggestBpdActivation } from "../../../../wallet/onboarding/bancomat/navigation/action";
+import { isBpdEnabled } from "./onboarding/startOnboarding";
+
+/**
+ * Allows the user to activate bpd on a set of new added payment methods
+ */
+export function* activateBpdOnNewPaymentMethods(
+  paymentMethods: ReadonlyArray<PaymentMethod>,
+  navigateToActivateNewMethods: NavigationNavigateAction
+) {
+  const atLeastOneBancomatWithBpdCapability = paymentMethods.some(b =>
+    hasFunctionEnabled(b, EnableableFunctionsTypeEnum.BPD)
+  );
+
+  // No payment method with bpd capability added in the current workflow, return to wallet home
+  if (!atLeastOneBancomatWithBpdCapability) {
+    return yield put(navigateToWalletHome());
+  }
+  const isBpdEnabledResponse: SagaCallReturnType<typeof isBpdEnabled> = yield call(
+    isBpdEnabled
+  );
+
+  // Error while reading the bpdEnabled, return to wallet
+  if (isBpdEnabledResponse.isLeft()) {
+    yield put(navigateToWalletHome());
+  } else {
+    if (isBpdEnabledResponse.value) {
+      // navigate to onboarding new bancomat
+      yield put(navigateToActivateNewMethods);
+    } else {
+      // navigate to "ask if u want to start bpd onboarding"
+      yield put(navigateToSuggestBpdActivation());
+    }
+  }
+}

ts/features/wallet/onboarding/DigitalMethodsList.tsx

@@ -7,9 +7,16 @@ import {
   ListRenderItemInfo,
   StyleSheet
 } from "react-native";
+import { connect } from "react-redux";
+import { Dispatch } from "redux";
 import I18n from "../../../i18n";
 import { H3 } from "../../../components/core/typography/H3";
 import { H5 } from "../../../components/core/typography/H5";
+import { GlobalState } from "../../../store/reducers/types";
+import { walletAddSatispayStart } from "./satispay/store/actions";
+
+type Props = ReturnType<typeof mapDispatchToProps> &
+  ReturnType<typeof mapStateToProps>;
 
 type DigitalPaymentItem = {
   name: string;
@@ -29,7 +36,7 @@ const styles = StyleSheet.create({
   logo: { width: 80, height: 40, resizeMode: "cover" }
 });
 
-const getMethods = (): ReadonlyArray<DigitalPaymentItem> => [
+const getMethods = (props: Props): ReadonlyArray<DigitalPaymentItem> => [
   {
     name: I18n.t("wallet.methods.bancomatPay.name"),
     subtitle: I18n.t("wallet.methods.bancomatPay.description"),
@@ -40,6 +47,7 @@ const getMethods = (): ReadonlyArray<DigitalPaymentItem> => [
     name: I18n.t("wallet.methods.satispay.name"),
     subtitle: I18n.t("wallet.methods.satispay.description"),
     logo: require("../../../../img/wallet/cards-icons/satispay.png"),
+    onPress: props.startSatispayOnboarding,
     implemented: true
   },
   {
@@ -53,10 +61,10 @@ const getMethods = (): ReadonlyArray<DigitalPaymentItem> => [
   }
 ];
 
-const DigitalMethodsList: React.FunctionComponent = () => (
+const DigitalMethodsList = (props: Props) => (
   <FlatList
     scrollEnabled={false}
-    data={getMethods()}
+    data={getMethods(props)}
     renderItem={({ item }: ListRenderItemInfo<DigitalPaymentItem>) =>
       item.implemented && (
         <ListItem style={styles.listItem} onPress={item.onPress}>
@@ -72,4 +80,10 @@ const DigitalMethodsList: React.FunctionComponent = () => (
   />
 );
 
-export default DigitalMethodsList;
+const mapDispatchToProps = (dispatch: Dispatch) => ({
+  startSatispayOnboarding: () => dispatch(walletAddSatispayStart())
+});
+
+const mapStateToProps = (_: GlobalState) => ({});
+
+export default connect(mapStateToProps, mapDispatchToProps)(DigitalMethodsList);

ts/features/wallet/onboarding/bancomat/saga/orchestration/addBancomatToWallet.ts

@@ -5,13 +5,13 @@ import {
   withResetNavigationStack
 } from "../../../../../../sagas/workUnit";
 import { navigateToWalletHome } from "../../../../../../store/actions/navigation";
+import { fetchWalletsRequest } from "../../../../../../store/actions/wallet/wallets";
 import { navigationCurrentRouteSelector } from "../../../../../../store/reducers/navigation";
 import { SagaCallReturnType } from "../../../../../../types/utils";
-import { isBpdEnabled } from "../../../../../bonus/bpd/saga/orchestration/onboarding/startOnboarding";
+import { activateBpdOnNewPaymentMethods } from "../../../../../bonus/bpd/saga/orchestration/activateBpdOnNewAddedPaymentMethods";
 import {
   navigateToActivateBpdOnNewBancomat,
-  navigateToOnboardingBancomatChooseBank,
-  navigateToSuggestBpdActivation
+  navigateToOnboardingBancomatChooseBank
 } from "../../navigation/action";
 import WALLET_ONBOARDING_BANCOMAT_ROUTES from "../../navigation/routes";
 import {
@@ -20,9 +20,6 @@ import {
   walletAddBancomatCompleted
 } from "../../store/actions";
 import { onboardingBancomatAddedPansSelector } from "../../store/reducers/addedPans";
-import { hasFunctionEnabled } from "../../../../../../utils/walletv2";
-import { EnableableFunctionsTypeEnum } from "../../../../../../types/pagopa";
-import { fetchWalletsRequest } from "../../../../../../store/actions/wallet/wallets";
 
 /**
  * Define the workflow that allows the user to add a bancomat to the wallet.
@@ -82,41 +79,15 @@ export function* addBancomatToWalletAndActivateBpd() {
   if (res === "completed") {
     // refresh wallets list
     yield put(fetchWalletsRequest());
-    yield call(activateBpdOnNewBancomat);
-  }
-}
-
-/**
- * Allows the user to activate bpd on the new added bancomat
- */
-function* activateBpdOnNewBancomat() {
-  // read the new added bancomat
-  const bancomatAdded: ReturnType<typeof onboardingBancomatAddedPansSelector> = yield select(
-    onboardingBancomatAddedPansSelector
-  );
-  // TODO: change enableableFunction with types representing the possibles functionalities
-  const atLeastOneBancomatWithBpdCapability = bancomatAdded.some(b =>
-    hasFunctionEnabled(b, EnableableFunctionsTypeEnum.BPD)
-  );
-
-  // No bancomat with bpd capability added in the current workflow, return to wallet home
-  if (!atLeastOneBancomatWithBpdCapability) {
-    return yield put(navigateToWalletHome());
-  }
-  const isBpdEnabledResponse: SagaCallReturnType<typeof isBpdEnabled> = yield call(
-    isBpdEnabled
-  );
+    // read the new added bancomat
+    const bancomatAdded: ReturnType<typeof onboardingBancomatAddedPansSelector> = yield select(
+      onboardingBancomatAddedPansSelector
+    );
 
-  // Error while reading the bpdEnabled, return to wallet
-  if (isBpdEnabledResponse.isLeft()) {
-    yield put(navigateToWalletHome());
-  } else {
-    if (isBpdEnabledResponse.value) {
-      // navigate to onboarding new bancomat
-      yield put(navigateToActivateBpdOnNewBancomat());
-    } else {
-      // navigate to "ask if u want to start bpd onboarding"
-      yield put(navigateToSuggestBpdActivation());
-    }
+    yield call(
+      activateBpdOnNewPaymentMethods,
+      bancomatAdded,
+      navigateToActivateBpdOnNewBancomat()
+    );
   }
 }

ts/features/wallet/onboarding/bancomat/screens/ActivateBpdOnNewBancomatScreen.tsx

@@ -1,13 +1,17 @@
 import * as React from "react";
 import { connect } from "react-redux";
+import I18n from "../../../../../i18n";
 import { onboardingBancomatAddedPansSelector } from "../store/reducers/addedPans";
 import { GlobalState } from "../../../../../store/reducers/types";
 import ActivateBpdOnNewPaymentMethodScreen from "../../common/screens/bpd/ActivateBpdOnNewPaymentMethodScreen";
 
 type Props = ReturnType<typeof mapStateToProps>;
 
 const ActivateBpdOnNewBancomatScreen = (props: Props) => (
-  <ActivateBpdOnNewPaymentMethodScreen paymentMethods={props.newBancomat} />
+  <ActivateBpdOnNewPaymentMethodScreen
+    paymentMethods={props.newBancomat}
+    title={I18n.t("wallet.onboarding.bancomat.headerTitle")}
+  />
 );
 
 const mapStateToProps = (state: GlobalState) => ({

ts/features/wallet/onboarding/bancomat/screens/searchBancomat/SearchAvailableUserBancomatScreen.tsx

@@ -10,6 +10,7 @@ import {
 import { onboardingBancomatAbiSelectedSelector } from "../../store/reducers/abiSelected";
 import { onboardingBancomatFoundPansSelector } from "../../store/reducers/pans";
 import AddBancomatScreen from "../add-pans/AddBancomatScreen";
+import { isTimeoutError } from "../../../../../../utils/errors";
 import BancomatKoNotFound from "./BancomatKoNotFound";
 import BancomatKoSingleBankNotFound from "./BancomatKoSingleBankNotFound";
 import BancomatKoTimeout from "./BancomatKoTimeout";
@@ -56,7 +57,7 @@ const SearchAvailableUserBancomatScreen: React.FunctionComponent<Props> = props
     // and he should try to search for a single bank
     return <BancomatKoServicesError />;
   }
-  if (isError(pans) && pans.error.kind === "timeout") {
+  if (isError(pans) && isTimeoutError(pans.error)) {
     return <BancomatKoTimeout />;
   }
   if (isLoading(pans) || isError(pans)) {

ts/features/wallet/onboarding/common/screens/bpd/ActivateBpdOnNewCreditCardScreen.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { NavigationScreenProps } from "react-navigation";
+import I18n from "../../../../../../i18n";
 import { PaymentMethod } from "../../../../../../types/pagopa";
 import ActivateBpdOnNewPaymentMethodScreen from "./ActivateBpdOnNewPaymentMethodScreen";
 
@@ -15,5 +16,6 @@ export const ActivateBpdOnNewCreditCardScreen: React.FC<Props> = (
 ) => (
   <ActivateBpdOnNewPaymentMethodScreen
     paymentMethods={props.navigation.getParam("creditCards")}
+    title={I18n.t("bonus.bpd.title")}
   />
 );

ts/features/wallet/onboarding/common/screens/bpd/ActivateBpdOnNewPaymentMethodScreen.tsx

@@ -15,12 +15,12 @@ import { PaymentMethodRawList } from "../../../../../bonus/bpd/components/paymen
 
 type OwnProps = {
   paymentMethods: ReadonlyArray<PaymentMethod>;
+  title: string;
 };
 
 export type Props = ReturnType<typeof mapDispatchToProps> & OwnProps;
 
 const loadLocales = () => ({
-  headerTitle: I18n.t("wallet.onboarding.bancomat.headerTitle"),
   title: I18n.t("wallet.onboarding.bancomat.bpd.activateNew.title"),
   body1: I18n.t("wallet.onboarding.bancomat.bpd.activateNew.body1"),
   body2: I18n.t("wallet.onboarding.bancomat.bpd.activateNew.body2"),
@@ -29,9 +29,9 @@ const loadLocales = () => ({
 });
 
 const ActivateBpdOnNewPaymentMethodScreen: React.FunctionComponent<Props> = props => {
-  const { headerTitle, title, body1, body2, skip, continueStr } = loadLocales();
+  const { title, body1, body2, skip, continueStr } = loadLocales();
   return (
-    <BaseScreenComponent headerTitle={headerTitle}>
+    <BaseScreenComponent headerTitle={props.title}>
       <SafeAreaView style={IOStyles.flex}>
         <ScrollView>
           <View style={IOStyles.horizontalContentPadding}>