feat(Bonus Pagamenti Digitali): [#175883764] Satispay screens and navigation

ts/features/wallet/onboarding/bancomat/navigation/action.ts

@@ -1,6 +1,6 @@
 import { NavigationActions } from "react-navigation";
 import { InferNavigationParams } from "../../../../../types/react";
-import { ActivateBpdOnNewCreditCardScreen } from "../screens/bpd/ActivateBpdOnNewCreditCardScreen";
+import { ActivateBpdOnNewCreditCardScreen } from "../../common/screens/bpd/ActivateBpdOnNewCreditCardScreen";
 import WALLET_ONBOARDING_BANCOMAT_ROUTES from "./routes";
 
 export const navigateToOnboardingBancomatChooseBank = () =>

ts/features/wallet/onboarding/bancomat/navigation/navigator.ts

@@ -1,9 +1,9 @@
 import { createStackNavigator } from "react-navigation";
-import SuggestBpdActivationScreen from "../screens/bpd/SuggestBpdActivationScreen";
+import SuggestBpdActivationScreen from "../../common/screens/bpd/SuggestBpdActivationScreen";
 import SearchBankScreen from "../screens/search/SearchBankScreen";
 import SearchAvailableUserBancomatScreen from "../screens/searchBancomat/SearchAvailableUserBancomatScreen";
-import { ActivateBpdOnNewCreditCardScreen } from "../screens/bpd/ActivateBpdOnNewCreditCardScreen";
-import ActivateBpdOnNewBancomatScreen from "../screens/bpd/ActivateBpdOnNewBancomatScreen";
+import { ActivateBpdOnNewCreditCardScreen } from "../../common/screens/bpd/ActivateBpdOnNewCreditCardScreen";
+import ActivateBpdOnNewBancomatScreen from "../screens/ActivateBpdOnNewBancomatScreen";
 import WALLET_ONBOARDING_BANCOMAT_ROUTES from "./routes";
 
 const PaymentMethodOnboardingBancomatNavigator = createStackNavigator(

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

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { connect } from "react-redux";
+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} />
+);
+
+const mapStateToProps = (state: GlobalState) => ({
+  newBancomat: onboardingBancomatAddedPansSelector(state)
+});
+export default connect(mapStateToProps)(ActivateBpdOnNewBancomatScreen);

ts/features/wallet/onboarding/satispay/navigation/action.ts

@@ -0,0 +1,27 @@
+import { NavigationActions } from "react-navigation";
+import WALLET_ONBOARDING_SATISPAY_ROUTES from "./routes";
+
+export const navigateToOnboardingSatispayStart = () =>
+  NavigationActions.navigate({
+    routeName: WALLET_ONBOARDING_SATISPAY_ROUTES.START
+  });
+
+export const navigateToOnboardingSatispaySearchAvailableUserAccount = () =>
+  NavigationActions.navigate({
+    routeName: WALLET_ONBOARDING_SATISPAY_ROUTES.SEARCH_AVAILABLE_USER_SATISPAY
+  });
+
+export const navigateToOnboardingSatispayAdd = () =>
+  NavigationActions.navigate({
+    routeName: WALLET_ONBOARDING_SATISPAY_ROUTES.ADD_SATISPAY
+  });
+
+export const navigateToSuggestBpdActivation = () =>
+  NavigationActions.navigate({
+    routeName: WALLET_ONBOARDING_SATISPAY_ROUTES.SUGGEST_BPD_ACTIVATION
+  });
+
+export const navigateToActivateBpdOnNewSatispay = () =>
+  NavigationActions.navigate({
+    routeName: WALLET_ONBOARDING_SATISPAY_ROUTES.ACTIVATE_BPD_NEW_SATISPAY
+  });

ts/features/wallet/onboarding/satispay/navigation/navigator.ts

@@ -0,0 +1,32 @@
+import { createStackNavigator } from "react-navigation";
+import SuggestBpdActivationScreen from "../../common/screens/bpd/SuggestBpdActivationScreen";
+import ActivateBpdOnNewSatispayScreen from "../screens/ActivateBpdOnNewSatispayScreen";
+import SearchSatispayManagerScreen from "../screens/search/SearchSatispayManagerScreen";
+import StartSatispaySearchScreen from "../screens/StartSatispaySearchScreen";
+import WALLET_ONBOARDING_SATISPAY_ROUTES from "./routes";
+
+const PaymentMethodOnboardingSatispayNavigator = createStackNavigator(
+  {
+    [WALLET_ONBOARDING_SATISPAY_ROUTES.START]: {
+      screen: StartSatispaySearchScreen
+    },
+    [WALLET_ONBOARDING_SATISPAY_ROUTES.SEARCH_AVAILABLE_USER_SATISPAY]: {
+      screen: SearchSatispayManagerScreen
+    },
+    [WALLET_ONBOARDING_SATISPAY_ROUTES.SUGGEST_BPD_ACTIVATION]: {
+      screen: SuggestBpdActivationScreen
+    },
+    [WALLET_ONBOARDING_SATISPAY_ROUTES.ACTIVATE_BPD_NEW_SATISPAY]: {
+      screen: ActivateBpdOnNewSatispayScreen
+    }
+  },
+  {
+    // Let each screen handle the header and navigation
+    headerMode: "none",
+    defaultNavigationOptions: {
+      gesturesEnabled: false
+    }
+  }
+);
+
+export default PaymentMethodOnboardingSatispayNavigator;

ts/features/wallet/onboarding/satispay/navigation/routes.ts

@@ -0,0 +1,13 @@
+const WALLET_ONBOARDING_SATISPAY_ROUTES = {
+  MAIN: "WALLET_ONBOARDING_SATISPAY_MAIN",
+
+  START: "WALLET_ONBOARDING_SATISPAY_START",
+  SEARCH_AVAILABLE_USER_SATISPAY:
+    "WALLET_ONBOARDING_SATISPAY_SEARCH_AVAILABLE_USER_SATISPAY",
+
+  ADD_SATISPAY: "WALLET_ONBOARDING_SATISPAY_ADD",
+  SUGGEST_BPD_ACTIVATION: "WALLET_ONBOARDING_SATISPAY_SUGGEST_BPD_ACTIVATION",
+  ACTIVATE_BPD_NEW_SATISPAY: "WALLET_ONBOARDING_SATISPAY_ACTIVATE_BPD_NEW"
+};
+
+export default WALLET_ONBOARDING_SATISPAY_ROUTES;

ts/features/wallet/onboarding/satispay/saga/networking/index.ts

@@ -5,7 +5,6 @@ import { ActionType } from "typesafe-actions";
 import { PaymentManagerClient } from "../../../../../../api/pagopa";
 import { SessionManager } from "../../../../../../utils/SessionManager";
 import { PaymentManagerToken } from "../../../../../../types/pagopa";
-import { searchUserPans } from "../../../bancomat/store/actions";
 import { SagaCallReturnType } from "../../../../../../types/utils";
 import { searchUserSatispay } from "../../store/actions";
 import { getError, getNetworkError } from "../../../../../../utils/errors";
@@ -59,7 +58,7 @@ export function* handleSearchUserSatispay(
       );
     }
   } catch (e) {
-    return yield put(searchUserPans.failure(getNetworkError(e)));
+    return yield put(searchUserSatispay.failure(getNetworkError(e)));
   }
 }
 

ts/features/wallet/onboarding/satispay/screens/ActivateBpdOnNewSatispayScreen.tsx

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { connect } from "react-redux";
+import { GlobalState } from "../../../../../store/reducers/types";
+import { onboardingBancomatAddedPansSelector } from "../../bancomat/store/reducers/addedPans";
+import ActivateBpdOnNewPaymentMethodScreen from "../../common/screens/bpd/ActivateBpdOnNewPaymentMethodScreen";
+
+type Props = ReturnType<typeof mapStateToProps>;
+
+const ActivateBpdOnNewSatispayScreen = (props: Props) => (
+  <ActivateBpdOnNewPaymentMethodScreen paymentMethods={props.newSatispay} />
+);
+
+const mapStateToProps = (state: GlobalState) => ({
+  // TODO : replace with onboarding satispay selector
+  newSatispay: onboardingBancomatAddedPansSelector(state)
+});
+export default connect(mapStateToProps)(ActivateBpdOnNewSatispayScreen);

ts/features/wallet/onboarding/satispay/screens/StartSatispaySearchScreen.tsx

@@ -0,0 +1,26 @@
+import { View } from "native-base";
+import * as React from "react";
+import { connect } from "react-redux";
+import { Dispatch } from "redux";
+import { GlobalState } from "../../../../../store/reducers/types";
+
+type Props = ReturnType<typeof mapDispatchToProps> &
+  ReturnType<typeof mapStateToProps>;
+
+/**
+ * Entrypoint for the satispay onboarding. The user can choose to start the search or
+ * cancel and return back.
+ * @constructor
+ */
+const StartSatispaySearchScreen: React.FunctionComponent<Props> = () => (
+  <View />
+);
+
+const mapDispatchToProps = (_: Dispatch) => ({});
+
+const mapStateToProps = (_: GlobalState) => ({});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(StartSatispaySearchScreen);

ts/features/wallet/onboarding/satispay/screens/add/AddSatispayScreen.tsx

@@ -0,0 +1,20 @@
+import { View } from "native-base";
+import * as React from "react";
+import { connect } from "react-redux";
+import { Dispatch } from "redux";
+import { GlobalState } from "../../../../../../store/reducers/types";
+
+type Props = ReturnType<typeof mapDispatchToProps> &
+  ReturnType<typeof mapStateToProps>;
+
+/**
+ * The user can choose to add the found Satispay account to the wallet
+ * @constructor
+ */
+const AddSatispayScreen: React.FunctionComponent<Props> = () => <View />;
+
+const mapDispatchToProps = (_: Dispatch) => ({});
+
+const mapStateToProps = (_: GlobalState) => ({});
+
+export default connect(mapStateToProps, mapDispatchToProps)(AddSatispayScreen);

ts/features/wallet/onboarding/satispay/screens/add/LoadAddSatispayComponent.tsx

@@ -0,0 +1,23 @@
+import { View } from "native-base";
+import * as React from "react";
+import { connect } from "react-redux";
+import { Dispatch } from "redux";
+import { GlobalState } from "../../../../../../store/reducers/types";
+
+type Props = ReturnType<typeof mapDispatchToProps> &
+  ReturnType<typeof mapStateToProps>;
+
+/**
+ * Loading & Error management when adding a satispay account to the wallet
+ * @constructor
+ */
+const LoadAddSatispayComponent: React.FunctionComponent<Props> = () => <View />;
+
+const mapDispatchToProps = (_: Dispatch) => ({});
+
+const mapStateToProps = (_: GlobalState) => ({});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(LoadAddSatispayComponent);

ts/features/wallet/onboarding/satispay/screens/search/SatispayKoNotFound.tsx

@@ -0,0 +1,20 @@
+import { View } from "native-base";
+import * as React from "react";
+import { connect } from "react-redux";
+import { Dispatch } from "redux";
+import { GlobalState } from "../../../../../../store/reducers/types";
+
+type Props = ReturnType<typeof mapDispatchToProps> &
+  ReturnType<typeof mapStateToProps>;
+
+/**
+ * No Satispay account found for the user
+ * @constructor
+ */
+const SatispayKoNotFound: React.FunctionComponent<Props> = () => <View />;
+
+const mapDispatchToProps = (_: Dispatch) => ({});
+
+const mapStateToProps = (_: GlobalState) => ({});
+
+export default connect(mapStateToProps, mapDispatchToProps)(SatispayKoNotFound);

ts/features/wallet/onboarding/satispay/screens/search/SatispayKoTimeout.tsx

@@ -0,0 +1,20 @@
+import { View } from "native-base";
+import * as React from "react";
+import { connect } from "react-redux";
+import { Dispatch } from "redux";
+import { GlobalState } from "../../../../../../store/reducers/types";
+
+type Props = ReturnType<typeof mapDispatchToProps> &
+  ReturnType<typeof mapStateToProps>;
+
+/**
+ * Timeout during the satispay account request
+ * @constructor
+ */
+const SatispayKoTimeout: React.FunctionComponent<Props> = () => <View />;
+
+const mapDispatchToProps = (_: Dispatch) => ({});
+
+const mapStateToProps = (_: GlobalState) => ({});
+
+export default connect(mapStateToProps, mapDispatchToProps)(SatispayKoTimeout);

ts/features/wallet/onboarding/satispay/screens/search/SearchSatispayManagerScreen.tsx

@@ -0,0 +1,25 @@
+import { View } from "native-base";
+import * as React from "react";
+import { connect } from "react-redux";
+import { Dispatch } from "redux";
+import { GlobalState } from "../../../../../../store/reducers/types";
+
+type Props = ReturnType<typeof mapDispatchToProps> &
+  ReturnType<typeof mapStateToProps>;
+
+/**
+ * This screen handles the different search state (loading, ko, error, success)
+ * @constructor
+ */
+const SearchSatispayManagerScreen: React.FunctionComponent<Props> = () => (
+  <View />
+);
+
+const mapDispatchToProps = (_: Dispatch) => ({});
+
+const mapStateToProps = (_: GlobalState) => ({});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(SearchSatispayManagerScreen);

ts/navigation/MainNavigator.tsx

@@ -23,6 +23,7 @@ import WalletTabIcon from "../components/WalletTabIcon";
 import BONUSVACANZE_ROUTES from "../features/bonus/bonusVacanze/navigation/routes";
 import BPD_ROUTES from "../features/bonus/bpd/navigation/routes";
 import WALLET_ONBOARDING_BANCOMAT_ROUTES from "../features/wallet/onboarding/bancomat/navigation/routes";
+import WALLET_ONBOARDING_SATISPAY_ROUTES from "../features/wallet/onboarding/satispay/navigation/routes";
 import variables from "../theme/variables";
 import MessageNavigator from "./MessagesNavigator";
 import ProfileNavigator from "./ProfileNavigator";
@@ -98,6 +99,7 @@ const NoTabBarRoutes: ReadonlyArray<string> = [
   BONUSVACANZE_ROUTES.MAIN,
   BPD_ROUTES.MAIN,
   WALLET_ONBOARDING_BANCOMAT_ROUTES.MAIN,
+  WALLET_ONBOARDING_SATISPAY_ROUTES.MAIN,
   ROUTES.MARKDOWN_PLAYGROUND,
   ROUTES.WEB_PLAYGROUND,
   ROUTES.SHOWROOM,