feat(Bonus Pagamenti Digitali): [#175890963] Adds the screen to see a…

…ll 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 <[email protected]>
pagopa · Jan 11, 2021 · 8d8d6cf · 8d8d6cf
1 parent fc07e9b
commit 8d8d6cf
Show file tree

Hide file tree

Showing 5 changed files with 121 additions and 21 deletions.
diff --git 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
@@ -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
@@ -50,7 +50,7 @@ const AddBancomatComponent: React.FunctionComponent<Props> = (props: Props) => {
       elem => elem.abi === props.pan.abi
     );
     setAbiInfo(abi ?? {});
-  }, [props.currentIndex]);
+  }, [props.pan.abi]);
 
   return (
     <BaseScreenComponent

diff --git a/ts/features/wallet/onboarding/bancomatPay/screens/add-account/AddBPayComponent.tsx b/ts/features/wallet/onboarding/bancomatPay/screens/add-account/AddBPayComponent.tsx
@@ -0,0 +1,105 @@
+import { View } from "native-base";
+import * as React from "react";
+import { SafeAreaView, StyleSheet } from "react-native";
+import { ScrollView } from "react-native-gesture-handler";
+import { connect } from "react-redux";
+import { InitializedProfile } from "../../../../../../../definitions/backend/InitializedProfile";
+import { H1 } from "../../../../../../components/core/typography/H1";
+import { H4 } from "../../../../../../components/core/typography/H4";
+import { IOStyles } from "../../../../../../components/core/variables/IOStyles";
+import BaseScreenComponent from "../../../../../../components/screens/BaseScreenComponent";
+import FooterWithButtons from "../../../../../../components/ui/FooterWithButtons";
+import I18n from "../../../../../../i18n";
+import { GlobalState } from "../../../../../../store/reducers/types";
+import {
+  cancelButtonProps,
+  confirmButtonProps
+} from "../../../../../bonus/bonusVacanze/components/buttons/ButtonConfigurations";
+import { abiListSelector } from "../../../store/abi";
+import { Abi } from "../../../../../../../definitions/pagopa/walletv2/Abi";
+import { BPay } from "../../../../../../../definitions/pagopa/BPay";
+import BPayCard from "../../../../bancomatpay/component/BPayCard";
+
+type Props = {
+  account: BPay;
+  accountsNumber: number;
+  currentIndex: number;
+  handleContinue: () => void;
+  handleSkip: () => void;
+  profile?: InitializedProfile;
+} & ReturnType<typeof mapStateToProps> &
+  Pick<React.ComponentProps<typeof BaseScreenComponent>, "contextualHelp">;
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: "center"
+  },
+  title: { lineHeight: 33, alignSelf: "flex-start" },
+  flexStart: { alignSelf: "flex-start" }
+});
+
+const AddBPayComponent: React.FunctionComponent<Props> = (props: Props) => {
+  const [abiInfo, setAbiInfo] = React.useState<Abi>({});
+
+  React.useEffect(() => {
+    const abi: Abi | undefined = props.abiList.find(
+      elem => elem.abi === props.account.instituteCode
+    );
+    setAbiInfo(abi ?? {});
+  }, [props.account.instituteCode]);
+
+  return (
+    <BaseScreenComponent
+      customGoBack={<View hspacer={true} spacer={true} />}
+      headerTitle={I18n.t("wallet.onboarding.bPay.headerTitle")}
+      contextualHelp={props.contextualHelp}
+    >
+      <SafeAreaView style={IOStyles.flex}>
+        <ScrollView style={IOStyles.flex}>
+          <View spacer={true} />
+          <View
+            style={[
+              styles.container,
+              IOStyles.flex,
+              IOStyles.horizontalContentPadding
+            ]}
+          >
+            <H1 style={styles.title}>
+              {I18n.t("wallet.onboarding.bPay.add.screenTitle")}
+            </H1>
+            <View spacer small />
+            <H4 weight={"Regular"} style={styles.flexStart}>
+              {I18n.t("wallet.onboarding.bPay.add.label", {
+                current: props.currentIndex + 1,
+                length: props.accountsNumber
+              })}
+            </H4>
+            <View spacer={true} large={true} />
+            <BPayCard
+              phone={props.account.numberObfuscated}
+              abiLogo={abiInfo.logoUrl}
+              bankName={props.account.bankName ?? ""} // This should never be undefined
+            />
+          </View>
+        </ScrollView>
+        <FooterWithButtons
+          type={"TwoButtonsInlineThird"}
+          leftButton={cancelButtonProps(
+            props.handleSkip,
+            I18n.t("global.buttons.skip")
+          )}
+          rightButton={confirmButtonProps(
+            props.handleContinue,
+            I18n.t("global.buttons.add")
+          )}
+        />
+      </SafeAreaView>
+    </BaseScreenComponent>
+  );
+};
+
+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
@@ -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<typeof mapStateToProps> &
   ReturnType<typeof mapDispatchToProps> &
@@ -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
-    <SafeAreaView>
-      <View style={IOStyles.horizontalContentPadding}>
-        <View spacer />
-        <H1>TMP schermata di aggiunta BPay al wallet</H1>
-        <View spacer />
-        <Label>Dati account trovato:</Label>
-        <Body>Nome banca: {currentPan.value.bankName}</Body>
-        <Body>Numero: {currentPan.value.numberObfuscated}</Body>
-        <Button onPress={handleOnContinue}>
-          <Label color={"white"}>Aggiungi al wallet</Label>
-        </Button>
-      </View>
-    </SafeAreaView>
+    <AddBPayComponent
+      account={currentPan.value}
+      accountsNumber={props.bPayAccounts.length}
+      currentIndex={currentIndex}
+      handleContinue={handleOnContinue}
+      handleSkip={() => nextPan(true)}
+      contextualHelp={props.contextualHelp}
+    />
   ) : null; // this should not happen
 };