From 8d8d6cffbee489af79f7c2c0b2c2542f7460a1a4 Mon Sep 17 00:00:00 2001 From: Cristiano Tofani Date: Mon, 11 Jan 2021 14:28:52 +0100 Subject: [PATCH] feat(Bonus Pagamenti Digitali): [#175890963] Adds the screen to see all BPay accounts to add (#2697) * [#175890863] Creates base component for bpay search funnel * [#175890863] Adds navigation from methods list and replace actions * [#175890863] Handles copy for bpay/pagobancomat * [#175890863] minor fixes * [#175890863] updates comments * [#175890963] BPay draft add component * [#175890963] Adds component to the relative screen * [#175890963] Fixes useEffect param and labels Co-authored-by: Fabrizio --- locales/en/index.yml | 3 + locales/it/index.yml | 3 + .../screens/add-pans/AddBancomatComponent.tsx | 2 +- .../screens/add-account/AddBPayComponent.tsx | 105 ++++++++++++++++++ .../screens/add-account/AddBPayScreen.tsx | 29 ++--- 5 files changed, 121 insertions(+), 21 deletions(-) create mode 100644 ts/features/wallet/onboarding/bancomatPay/screens/add-account/AddBPayComponent.tsx diff --git a/locales/en/index.yml b/locales/en/index.yml index 27daaacd245..52c6baf70a4 100644 --- a/locales/en/index.yml +++ b/locales/en/index.yml @@ -825,6 +825,9 @@ wallet: bPay: headerTitle: "Add BANCOMAT Pay" loadingSearch: "We are recovering your BANCOMAT Pay data\n\nPlease wait" + add: + label: "BANCOMAT Pay account {{current}} of {{length}}" + screenTitle: "Do you want to add this account?" loadingAdd: "We are adding your BANCOMAT Pay\n\nPlease wait" koTimeout: title: "Unable to recover your data" diff --git a/locales/it/index.yml b/locales/it/index.yml index 4cb83b71290..cc563394283 100644 --- a/locales/it/index.yml +++ b/locales/it/index.yml @@ -845,6 +845,9 @@ wallet: bPay: headerTitle: "Aggiungi BANCOMAT Pay" loadingSearch: "Stiamo recuperando i tuoi dati BANCOMAT Pay\n\nAttendi qualche secondo" + add: + label: "Account BANCOMAT Pay {{current}} di {{length}}" + screenTitle: "Vuoi aggiungere questo account?" loadingAdd: "Stiamo aggiungendo il tuo account BANCOMAT Pay\n\nAttendi qualche secondo" koTimeout: title: "Impossibile recuperare i tuoi dati" diff --git a/ts/features/wallet/onboarding/bancomat/screens/add-pans/AddBancomatComponent.tsx b/ts/features/wallet/onboarding/bancomat/screens/add-pans/AddBancomatComponent.tsx index ad35ee4ac9e..506e93e2658 100644 --- a/ts/features/wallet/onboarding/bancomat/screens/add-pans/AddBancomatComponent.tsx +++ b/ts/features/wallet/onboarding/bancomat/screens/add-pans/AddBancomatComponent.tsx @@ -50,7 +50,7 @@ const AddBancomatComponent: React.FunctionComponent = (props: Props) => { elem => elem.abi === props.pan.abi ); setAbiInfo(abi ?? {}); - }, [props.currentIndex]); + }, [props.pan.abi]); return ( void; + handleSkip: () => void; + profile?: InitializedProfile; +} & ReturnType & + Pick, "contextualHelp">; + +const styles = StyleSheet.create({ + container: { + alignItems: "center" + }, + title: { lineHeight: 33, alignSelf: "flex-start" }, + flexStart: { alignSelf: "flex-start" } +}); + +const AddBPayComponent: React.FunctionComponent = (props: Props) => { + const [abiInfo, setAbiInfo] = React.useState({}); + + React.useEffect(() => { + const abi: Abi | undefined = props.abiList.find( + elem => elem.abi === props.account.instituteCode + ); + setAbiInfo(abi ?? {}); + }, [props.account.instituteCode]); + + return ( + } + headerTitle={I18n.t("wallet.onboarding.bPay.headerTitle")} + contextualHelp={props.contextualHelp} + > + + + + +

+ {I18n.t("wallet.onboarding.bPay.add.screenTitle")} +

+ +

+ {I18n.t("wallet.onboarding.bPay.add.label", { + current: props.currentIndex + 1, + length: props.accountsNumber + })} +

+ + + + + + + + ); +}; + +const mapStateToProps = (state: GlobalState) => ({ + abiList: abiListSelector(state) +}); + +export default connect(mapStateToProps)(AddBPayComponent); diff --git a/ts/features/wallet/onboarding/bancomatPay/screens/add-account/AddBPayScreen.tsx b/ts/features/wallet/onboarding/bancomatPay/screens/add-account/AddBPayScreen.tsx index 25e56f8c852..7b2941ccaa0 100644 --- a/ts/features/wallet/onboarding/bancomatPay/screens/add-account/AddBPayScreen.tsx +++ b/ts/features/wallet/onboarding/bancomatPay/screens/add-account/AddBPayScreen.tsx @@ -1,15 +1,10 @@ import { index } from "fp-ts/lib/Array"; import { fromNullable } from "fp-ts/lib/Option"; import * as pot from "italia-ts-commons/lib/pot"; -import { Button, View } from "native-base"; import * as React from "react"; -import { SafeAreaView } from "react-native"; import { connect } from "react-redux"; import { Dispatch } from "redux"; import { BPay } from "../../../../../../../definitions/pagopa/BPay"; -import { Body } from "../../../../../../components/core/typography/Body"; -import { Label } from "../../../../../../components/core/typography/Label"; -import { IOStyles } from "../../../../../../components/core/variables/IOStyles"; import BaseScreenComponent from "../../../../../../components/screens/BaseScreenComponent"; import { profileSelector } from "../../../../../../store/reducers/profile"; import { GlobalState } from "../../../../../../store/reducers/types"; @@ -29,8 +24,8 @@ import { onboardingBPayChosenPanSelector } from "../../store/reducers/addingBPay"; import { onboardingBPayFoundAccountsSelector } from "../../store/reducers/foundBpay"; -import { H1 } from "../../../../../../components/core/typography/H1"; import LoadAddBPayComponent from "./LoadAddBPayComponent"; +import AddBPayComponent from "./AddBPayComponent"; type Props = ReturnType & ReturnType & @@ -85,20 +80,14 @@ const AddBPayScreen = (props: Props): React.ReactElement | null => { onRetry={() => fromNullable(props.selectedBPay).map(props.onRetry)} /> ) : currentPan.isSome() ? ( - // TODO: Replace with Iterative add component - - - -

TMP schermata di aggiunta BPay al wallet

- - - Nome banca: {currentPan.value.bankName} - Numero: {currentPan.value.numberObfuscated} - - - + nextPan(true)} + contextualHelp={props.contextualHelp} + /> ) : null; // this should not happen };