Skip to content

Commit

Permalink
feat(Bonus Pagamenti Digitali): [#176738620] Choose card type before …
Browse files Browse the repository at this point in the history
…starting the co-badge onboarding workflow (#2766)

* [#176738620] add choosetype screen

* [#176738620] rename action

* [#176738620] remove back from KO screens

* [#176738620] add legacy support to navigation

* [#176738620] add choosetype screen

* [#176738620] rename action

* [#176738620] remove back from KO screens

* [#176738620] add legacy support to navigation

* [#176738620] fix eslint

* Update ts/features/wallet/component/NewMethodAddedNotifier.tsx

Co-authored-by: Simone <[email protected]>
Co-authored-by: Matteo Boschi <[email protected]>
  • Loading branch information
3 people authored Feb 5, 2021
1 parent 60b3f5c commit 28bb25e
Show file tree
Hide file tree
Showing 20 changed files with 206 additions and 85 deletions.
10 changes: 8 additions & 2 deletions ts/features/wallet/bancomat/screen/BancomatDetailScreen.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import { BancomatPaymentMethod } from "../../../../types/pagopa";
import { showToast } from "../../../../utils/showToast";
import PaymentMethodCapabilities from "../../component/PaymentMethodCapabilities";
import { useRemovePaymentMethodBottomSheet } from "../../component/RemovePaymentMethod";
import { walletAddCoBadgeFromBancomatStart } from "../../onboarding/cobadge/store/actions";
import { navigateToOnboardingCoBadgeChooseTypeStartScreen } from "../../onboarding/cobadge/navigation/action";
import BancomatCard from "../component/bancomatCard/BancomatCard";
import pagoBancomatImage from "../../../../../img/wallet/cards-icons/pagobancomat.png";
import { emptyContextualHelp } from "../../../../utils/emptyContextualHelp";
Expand Down Expand Up @@ -131,7 +131,13 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
}
})
),
addCoBadge: (abi: string) => dispatch(walletAddCoBadgeFromBancomatStart(abi))
addCoBadge: (abi: string) =>
dispatch(
navigateToOnboardingCoBadgeChooseTypeStartScreen({
abi,
legacyAddCreditCardBack: 1
})
)
});

const mapStateToProps = (_: GlobalState) => ({});
Expand Down
6 changes: 4 additions & 2 deletions ts/features/wallet/component/NewMethodAddedNotifier.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import {
import { useActionOnFocus } from "../../../utils/hooks/useOnFocus";
import BancomatInformation from "../bancomat/screen/BancomatInformation";
import { onboardingBancomatAddedPansSelector } from "../onboarding/bancomat/store/reducers/addedPans";
import { walletAddCoBadgeFromBancomatStart } from "../onboarding/cobadge/store/actions";
import { navigateToOnboardingCoBadgeChooseTypeStartScreen } from "../onboarding/cobadge/navigation/action";

type Props = ReturnType<typeof mapDispatchToProps> &
ReturnType<typeof mapStateToProps>;
Expand Down Expand Up @@ -67,7 +67,9 @@ const NewPaymentMethodAddedNotifier = (props: Props) => {

const mapDispatchToProps = (dispatch: Dispatch) => ({
startCoBadgeOnboarding: () =>
dispatch(walletAddCoBadgeFromBancomatStart(undefined))
dispatch(
navigateToOnboardingCoBadgeChooseTypeStartScreen({})
)
});

const mapStateToProps = (state: GlobalState) => ({
Expand Down
9 changes: 9 additions & 0 deletions ts/features/wallet/onboarding/cobadge/navigation/action.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,15 @@
import { NavigationActions } from "react-navigation";
import { CoBadgeChooseTypeNavigationProps } from "../screens/CoBadgeChooseType";
import WALLET_ONBOARDING_COBADGE_ROUTES from "./routes";

export const navigateToOnboardingCoBadgeChooseTypeStartScreen = (
navigationParams: CoBadgeChooseTypeNavigationProps
) =>
NavigationActions.navigate({
routeName: WALLET_ONBOARDING_COBADGE_ROUTES.CHOOSE_TYPE,
params: navigationParams
});

export const navigateToOnboardingCoBadgeSearchStartScreen = () =>
NavigationActions.navigate({
routeName: WALLET_ONBOARDING_COBADGE_ROUTES.START
Expand Down
4 changes: 4 additions & 0 deletions ts/features/wallet/onboarding/cobadge/navigation/navigator.ts
Original file line number Diff line number Diff line change
@@ -1,12 +1,16 @@
import { createStackNavigator } from "react-navigation";
import ActivateBpdOnNewCoBadgeScreen from "../screens/ActivateBpdOnNewCoBadgeScreen";
import AddCoBadgeScreen from "../screens/add-account/AddCoBadgeScreen";
import CoBadgeChooseType from "../screens/CoBadgeChooseType";
import SearchAvailableCoBadgeScreen from "../screens/search/SearchAvailableCoBadgeScreen";
import CoBadgeStartScreen from "../screens/start/CoBadgeStartScreen";
import WALLET_ONBOARDING_COBADGE_ROUTES from "./routes";

const PaymentMethodOnboardingCoBadgeNavigator = createStackNavigator(
{
[WALLET_ONBOARDING_COBADGE_ROUTES.CHOOSE_TYPE]: {
screen: CoBadgeChooseType
},
[WALLET_ONBOARDING_COBADGE_ROUTES.START]: {
screen: CoBadgeStartScreen
},
Expand Down
2 changes: 2 additions & 0 deletions ts/features/wallet/onboarding/cobadge/navigation/routes.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
const WALLET_ONBOARDING_COBADGE_ROUTES = {
MAIN: "WALLET_ONBOARDING_COBADGE_MAIN",

CHOOSE_TYPE: "WALLET_ONBOARDING_COBADGE_CHOOSE_TYPE",

START: "WALLET_ONBOARDING_COBADGE_START",
SEARCH_AVAILABLE: "WALLET_ONBOARDING_COBADGE_SEARCH_AVAILABLE",

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -61,17 +61,20 @@ export function* addCoBadgeToWalletAndActivateBpd() {
coBadgeWorkUnit
);
if (res !== "back") {
// If the addition starts from "WALLET_ADD_DIGITAL_PAYMENT_METHOD", remove from stack
// If the addition starts from "WALLET_ONBOARDING_COBADGE_CHOOSE_TYPE", remove from stack
// This shouldn't happens if all the workflow will use the executeWorkUnit
const currentRoute: ReturnType<typeof navigationCurrentRouteSelector> = yield select(
navigationCurrentRouteSelector
);

if (
currentRoute.isSome() &&
currentRoute.value === "WALLET_BANCOMAT_DETAIL"
currentRoute.value === "WALLET_ONBOARDING_COBADGE_CHOOSE_TYPE"
) {
yield put(NavigationActions.back());
if (res === "completed") {
yield put(NavigationActions.back());
}
}
}

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
import { none } from "fp-ts/lib/Option";
import { Button, Content, View } from "native-base";
import * as React from "react";
import { SafeAreaView } from "react-native";
import { NavigationActions, NavigationInjectedProps } from "react-navigation";
import { connect } from "react-redux";
import { Dispatch } from "redux";
import { H1 } from "../../../../../components/core/typography/H1";
import { IOStyles } from "../../../../../components/core/variables/IOStyles";
import BaseScreenComponent from "../../../../../components/screens/BaseScreenComponent";
import FooterWithButtons from "../../../../../components/ui/FooterWithButtons";
import I18n from "../../../../../i18n";
import { navigateToWalletAddCreditCard } from "../../../../../store/actions/navigation";
import { GlobalState } from "../../../../../store/reducers/types";
import { emptyContextualHelp } from "../../../../../utils/emptyContextualHelp";
import { cancelButtonProps } from "../../../../bonus/bonusVacanze/components/buttons/ButtonConfigurations";
import { walletAddCoBadgeStart } from "../store/actions";

type Props = ReturnType<typeof mapDispatchToProps> &
ReturnType<typeof mapStateToProps> &
NavigationInjectedProps<CoBadgeChooseTypeNavigationProps>;

export type CoBadgeChooseTypeNavigationProps = {
abi?: string;
// Added for backward compatibility, in order to return back after add credit card workflow.
// Number of screens that need to be removed from the stack
legacyAddCreditCardBack?: number;
};

/**
* This screen allows the user to choose the exact type of card he intends to add
* @param props
* @constructor
*/
const CoBadgeChooseType = (props: Props): React.ReactElement => {
const abi = props.navigation.getParam("abi");
const legacyAddCreditCardBack = props.navigation.getParam(
"legacyAddCreditCardBack"
);
return (
<BaseScreenComponent
goBack={true}
headerTitle={I18n.t("wallet.onboarding.coBadge.headerTitle")}
contextualHelp={emptyContextualHelp}
>
<SafeAreaView style={IOStyles.flex}>
<Content style={IOStyles.flex}>
<H1>TMP CoBadgeChooseType</H1>
<Button onPress={() => props.addCreditCard(legacyAddCreditCardBack)}>
<H1>TMP Add Credit Card</H1>
</Button>
<View spacer={true} />
<Button onPress={() => props.addCoBadge(abi)}>
<H1>TMP Add Co-Badge</H1>
</Button>
</Content>
<FooterWithButtons
type={"SingleButton"}
leftButton={cancelButtonProps(props.back)}
/>
</SafeAreaView>
</BaseScreenComponent>
);
};

const navigateBack = (n: number, dispatch: Dispatch) => {
if (n <= 0) {
return;
}
dispatch(NavigationActions.back());
navigateBack(n - 1, dispatch);
};

const mapDispatchToProps = (dispatch: Dispatch) => ({
back: () => dispatch(NavigationActions.back()),
addCoBadge: (abi: string | undefined) => dispatch(walletAddCoBadgeStart(abi)),
addCreditCard: (popScreenNumber: number = 0) => {
navigateBack(popScreenNumber, dispatch);

dispatch(
navigateToWalletAddCreditCard({
inPayment: none
})
);
}
});

const mapStateToProps = (_: GlobalState) => ({});

export default connect(mapStateToProps, mapDispatchToProps)(CoBadgeChooseType);
Empty file.
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,10 @@ import { renderInfoRasterImage } from "../../../../../../../components/infoScree
import { InfoScreenComponent } from "../../../../../../../components/infoScreen/InfoScreenComponent";
import BaseScreenComponent from "../../../../../../../components/screens/BaseScreenComponent";
import FooterWithButtons from "../../../../../../../components/ui/FooterWithButtons";
import View from "../../../../../../../components/ui/TextWithIcon";
import { GlobalState } from "../../../../../../../store/reducers/types";
import { cancelButtonProps } from "../../../../../../bonus/bonusVacanze/components/buttons/ButtonConfigurations";
import { useHardwareBackButton } from "../../../../../../bonus/bonusVacanze/components/hooks/useHardwareBackButton";
import { walletAddCoBadgeCancel } from "../../../store/actions";

export type Props = ReturnType<typeof mapDispatchToProps> &
Expand All @@ -29,10 +31,12 @@ const loadLocales = () => ({
*/
const CoBadgeKoNotFound = (props: Props): React.ReactElement => {
const { headerTitle, title, body } = loadLocales();

// disable hardware back
useHardwareBackButton(() => true);
return (
<BaseScreenComponent
goBack={true}
goBack={false}
customGoBack={<View />}
headerTitle={headerTitle}
contextualHelp={props.contextualHelp}
>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,10 @@ import { InfoScreenComponent } from "../../../../../../../components/infoScreen/
import BaseScreenComponent from "../../../../../../../components/screens/BaseScreenComponent";
import FooterWithButtons from "../../../../../../../components/ui/FooterWithButtons";
import image from "../../../../../../../../img/servicesStatus/error-detail-icon.png";
import View from "../../../../../../../components/ui/TextWithIcon";
import { GlobalState } from "../../../../../../../store/reducers/types";
import { cancelButtonProps } from "../../../../../../bonus/bonusVacanze/components/buttons/ButtonConfigurations";
import { useHardwareBackButton } from "../../../../../../bonus/bonusVacanze/components/hooks/useHardwareBackButton";
import { walletAddCoBadgeCancel } from "../../../store/actions";

export type Props = ReturnType<typeof mapDispatchToProps> &
Expand All @@ -30,10 +32,12 @@ const loadLocales = () => ({
*/
const CoBadgeKoServiceError: React.FunctionComponent<Props> = props => {
const { headerTitle, title, body } = loadLocales();

// disable hardware back
useHardwareBackButton(() => true);
return (
<BaseScreenComponent
goBack={true}
goBack={false}
customGoBack={<View />}
headerTitle={headerTitle}
contextualHelp={props.contextualHelp}
>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { renderInfoRasterImage } from "../../../../../../../components/infoScree
import { InfoScreenComponent } from "../../../../../../../components/infoScreen/InfoScreenComponent";
import BaseScreenComponent from "../../../../../../../components/screens/BaseScreenComponent";
import FooterWithButtons from "../../../../../../../components/ui/FooterWithButtons";
import View from "../../../../../../../components/ui/TextWithIcon";

import I18n from "../../../../../../../i18n";
import image from "../../../../../../../../img/servicesStatus/error-detail-icon.png";
Expand All @@ -16,6 +17,7 @@ import {
cancelButtonProps,
confirmButtonProps
} from "../../../../../../bonus/bonusVacanze/components/buttons/ButtonConfigurations";
import { useHardwareBackButton } from "../../../../../../bonus/bonusVacanze/components/hooks/useHardwareBackButton";
import {
searchUserCoBadge,
walletAddCoBadgeCancel
Expand All @@ -42,9 +44,14 @@ const CoBadgeKoSingleBankNotFound: React.FunctionComponent<Props> = props => {
const { headerTitle, title, body, searchAll } = loadLocales();

const onSearchAll = () => props.searchAll();

// disable hardware back
useHardwareBackButton(() => true);

return (
<BaseScreenComponent
goBack={true}
goBack={false}
customGoBack={<View />}
headerTitle={headerTitle}
contextualHelp={props.contextualHelp}
>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,10 @@ import { IOStyles } from "../../../../../../../components/core/variables/IOStyle
import { renderInfoRasterImage } from "../../../../../../../components/infoScreen/imageRendering";
import { InfoScreenComponent } from "../../../../../../../components/infoScreen/InfoScreenComponent";
import BaseScreenComponent from "../../../../../../../components/screens/BaseScreenComponent";
import View from "../../../../../../../components/ui/TextWithIcon";
import I18n from "../../../../../../../i18n";
import { GlobalState } from "../../../../../../../store/reducers/types";
import { useHardwareBackButton } from "../../../../../../bonus/bonusVacanze/components/hooks/useHardwareBackButton";
import { FooterTwoButtons } from "../../../../../../bonus/bonusVacanze/components/markdown/FooterTwoButtons";
import {
searchUserCoBadge,
Expand All @@ -35,9 +37,12 @@ const loadLocales = () => ({
*/
const CoBadgeKoTimeout = (props: Props): React.ReactElement => {
const { headerTitle, title, body, cancel, retry } = loadLocales();
// disable hardware back
useHardwareBackButton(() => true);
return (
<BaseScreenComponent
goBack={true}
goBack={false}
customGoBack={<View />}
headerTitle={headerTitle}
contextualHelp={props.contextualHelp}
>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,38 +1,51 @@
import { Content } from "native-base";
import { Button, Content } from "native-base";
import * as React from "react";
import { SafeAreaView } from "react-native";
import { connect } from "react-redux";
import { Dispatch } from "redux";
import { H1 } from "../../../../../../../components/core/typography/H1";
import { IOStyles } from "../../../../../../../components/core/variables/IOStyles";
import BaseScreenComponent from "../../../../../../../components/screens/BaseScreenComponent";
import View from "../../../../../../../components/ui/TextWithIcon";
import I18n from "../../../../../../../i18n";
import { GlobalState } from "../../../../../../../store/reducers/types";
import { emptyContextualHelp } from "../../../../../../../utils/emptyContextualHelp";
import { useHardwareBackButton } from "../../../../../../bonus/bonusVacanze/components/hooks/useHardwareBackButton";
import { walletAddCoBadgeCancel } from "../../../store/actions";

type Props = ReturnType<typeof mapDispatchToProps> &
ReturnType<typeof mapStateToProps>;

/**
* The co-badge workflow is not yet available for the selected bank
* @param _
* @constructor
* @param props
*/
const CoBadgeStartKoDisabled = (_: Props): React.ReactElement => (
<BaseScreenComponent
goBack={true}
headerTitle={I18n.t("wallet.onboarding.coBadge.headerTitle")}
contextualHelp={emptyContextualHelp}
>
<SafeAreaView style={IOStyles.flex}>
<Content style={IOStyles.flex}>
<H1>CoBadgeStartKoDisabled</H1>
</Content>
</SafeAreaView>
</BaseScreenComponent>
);
const CoBadgeStartKoDisabled = (props: Props): React.ReactElement => {
// disable hardware back
useHardwareBackButton(() => true);
return (
<BaseScreenComponent
goBack={false}
customGoBack={<View />}
headerTitle={I18n.t("wallet.onboarding.coBadge.headerTitle")}
contextualHelp={emptyContextualHelp}
>
<SafeAreaView style={IOStyles.flex}>
<Content style={IOStyles.flex}>
<H1>TMP CoBadgeStartKoDisabled</H1>
<Button onPress={props.cancel}>
<H1>TMP Annulla</H1>
</Button>
</Content>
</SafeAreaView>
</BaseScreenComponent>
);
};

const mapDispatchToProps = (_: Dispatch) => ({});
const mapDispatchToProps = (dispatch: Dispatch) => ({
cancel: () => dispatch(walletAddCoBadgeCancel())
});

const mapStateToProps = (_: GlobalState) => ({});

Expand Down
Loading

0 comments on commit 28bb25e

Please sign in to comment.