feat(Bonus Pagamenti Digitali): [#176739150] Chose to add cobadge or …

…credit card screen (#2778) * [#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 * [#176739150] add card path type * [#176739150] add renderItem function * [#176739150] merge locales * Update ts/features/wallet/component/NewMethodAddedNotifier.tsx Co-authored-by: Fabrizio <[email protected]> Co-authored-by: Matteo Boschi <[email protected]>
pagopa · Feb 8, 2021 · 867b608 · 867b608
1 parent 9621caf
commit 867b608
Show file tree

Hide file tree

Showing 3 changed files with 121 additions and 9 deletions.
diff --git a/locales/en/index.yml b/locales/en/index.yml
@@ -868,6 +868,19 @@ wallet:
         blocked: "This card is blocked and can't be activated for Cashback. Please, contact the card issuer."
         warning: "Check that the card number matches the one on your physical card."
         loading: "We are adding your international circuit card\n\nPlease hold on..."
+      chooseType:
+        title: "Does your card allow you to shop online?"
+        description: "This question allows us to better understand what your card is like and help you add it to your Wallet."
+        path:
+          enabled:
+            title: "Yes, it is enabled for online purchases"
+            description: "The data will be verified in the way appointed by your bank, for example via text message or app."
+          disabled:
+            title: "No, I only use it in shops"
+            description: "We will look for all the cards in your name at the banks participating in the service."
+          unknown:
+            title: "I do not know"
+            description: "We will look for all the cards in your name at the banks participating in the service."
   alert:
     supportedCardPageLinkError: An error occurred while opening the supported cards page.
     msgErrorUpdateApp: "An error occurred while opening the app store"

diff --git a/locales/it/index.yml b/locales/it/index.yml
@@ -888,6 +888,19 @@ wallet:
         blocked: "Questa carta risulta bloccata e pertanto non può essere attivata ai fini del Cashback. Contatta la tua banca."
         warning: "Controlla che il numero della carta corrisponda a quello riportato sulla tua carta fisica."
         loading: "Stiamo aggiungendo la tua carta con circuito internazionale\n\nAttendi qualche secondo..."
+      chooseType:
+        title: "La tua carta ti permette di acquistare online?"
+        description: "Questa domanda ci permette di capire meglio com’è fatta la tua carta e aiutarti ad aggiungerla al tuo Portafoglio."
+        path:
+          enabled:
+            title: "Sì, è abilitata agli acquisti online"
+            description: "I dati verranno verificati con le modalità previste dalla tua banca, ad esempio via sms o app."
+          disabled:
+            title: "No, la uso solo nei negozi"
+            description: "Cercheremo tutte le carte intestate a te presso le banche aderenti al servizio."
+          unknown:
+            title: "Non lo so"
+            description: "Cercheremo tutte le carte intestate a te presso le banche aderenti al servizio."
   alert:
     supportedCardPageLinkError: Si è verificato un errore durante l'apertura della pagina di riferimento per le carte supportate. 
     msgErrorUpdateApp: "Si è verificato un errore durante l'apertura dello store delle app"

diff --git a/ts/features/wallet/onboarding/cobadge/screens/CoBadgeChooseType.tsx b/ts/features/wallet/onboarding/cobadge/screens/CoBadgeChooseType.tsx
@@ -1,14 +1,24 @@
 import { none } from "fp-ts/lib/Option";
-import { Button, Content, View } from "native-base";
+import { Content, ListItem, View } from "native-base";
 import * as React from "react";
-import { SafeAreaView } from "react-native";
+import {
+  FlatList,
+  ListRenderItemInfo,
+  SafeAreaView,
+  StyleSheet
+} 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 { H3 } from "../../../../../components/core/typography/H3";
+import { H4 } from "../../../../../components/core/typography/H4";
+import { H5 } from "../../../../../components/core/typography/H5";
+import { IOColors } from "../../../../../components/core/variables/IOColors";
 import { IOStyles } from "../../../../../components/core/variables/IOStyles";
 import BaseScreenComponent from "../../../../../components/screens/BaseScreenComponent";
 import FooterWithButtons from "../../../../../components/ui/FooterWithButtons";
+import IconFont from "../../../../../components/ui/IconFont";
 import I18n from "../../../../../i18n";
 import { navigateToWalletAddCreditCard } from "../../../../../store/actions/navigation";
 import { GlobalState } from "../../../../../store/reducers/types";
@@ -27,6 +37,51 @@ export type CoBadgeChooseTypeNavigationProps = {
   legacyAddCreditCardBack?: number;
 };
 
+const styles = StyleSheet.create({
+  flexColumn: {
+    flexDirection: "column",
+    justifyContent: "space-between",
+    flex: 1
+  },
+  row: {
+    flexDirection: "row",
+    justifyContent: "space-between"
+  },
+  descriptionPadding: { paddingRight: 24 }
+});
+type CardOnlinePurchase = "enabled" | "disabled" | "unknown";
+
+type IAddCardPath = Readonly<{
+  path: CardOnlinePurchase;
+  title: string;
+  description: string;
+  onPress: () => void;
+}>;
+
+const renderListItem = (cardPathItem: ListRenderItemInfo<IAddCardPath>) => (
+  <ListItem
+    onPress={cardPathItem.item.onPress}
+    first={cardPathItem.index === 0}
+  >
+    <View style={styles.flexColumn}>
+      <View style={styles.row}>
+        <View>
+          <H3 color={"bluegreyDark"} weight={"SemiBold"}>
+            {cardPathItem.item.title}
+          </H3>
+        </View>
+        <IconFont name={"io-right"} color={IOColors.blue} size={24} />
+      </View>
+      <H5
+        color={"bluegrey"}
+        weight={"Regular"}
+        style={styles.descriptionPadding}
+      >
+        {cardPathItem.item.description}
+      </H5>
+    </View>
+  </ListItem>
+);
 /**
  * This screen allows the user to choose the exact type of card he intends to add
  * @param props
@@ -37,6 +92,32 @@ const CoBadgeChooseType = (props: Props): React.ReactElement => {
   const legacyAddCreditCardBack = props.navigation.getParam(
     "legacyAddCreditCardBack"
   );
+  const addCardPath: ReadonlyArray<IAddCardPath> = [
+    {
+      path: "enabled",
+      title: I18n.t("wallet.onboarding.coBadge.chooseType.path.enabled.title"),
+      description: I18n.t(
+        "wallet.onboarding.coBadge.chooseType.path.enabled.description"
+      ),
+      onPress: () => props.addCreditCard(legacyAddCreditCardBack)
+    },
+    {
+      path: "disabled",
+      title: I18n.t("wallet.onboarding.coBadge.chooseType.path.disabled.title"),
+      description: I18n.t(
+        "wallet.onboarding.coBadge.chooseType.path.disabled.description"
+      ),
+      onPress: () => props.addCoBadge(abi)
+    },
+    {
+      path: "unknown",
+      title: I18n.t("wallet.onboarding.coBadge.chooseType.path.unknown.title"),
+      description: I18n.t(
+        "wallet.onboarding.coBadge.chooseType.path.unknown.description"
+      ),
+      onPress: () => props.addCoBadge(abi)
+    }
+  ];
   return (
     <BaseScreenComponent
       goBack={true}
@@ -45,14 +126,19 @@ const CoBadgeChooseType = (props: Props): React.ReactElement => {
     >
       <SafeAreaView style={IOStyles.flex}>
         <Content style={IOStyles.flex}>
-          <H1>TMP CoBadgeChooseType</H1>
-          <Button onPress={() => props.addCreditCard(legacyAddCreditCardBack)}>
-            <H1>TMP Add Credit Card</H1>
-          </Button>
+          <H1>{I18n.t("wallet.onboarding.coBadge.chooseType.title")}</H1>
+          <View spacer={true} />
+          <H4 weight={"Regular"} color={"bluegreyDark"}>
+            {I18n.t("wallet.onboarding.coBadge.chooseType.description")}
+          </H4>
           <View spacer={true} />
-          <Button onPress={() => props.addCoBadge(abi)}>
-            <H1>TMP Add Co-Badge</H1>
-          </Button>
+          <FlatList
+            removeClippedSubviews={false}
+            data={addCardPath}
+            keyExtractor={item => item.path}
+            ListFooterComponent={<View spacer />}
+            renderItem={i => renderListItem(i)}
+          />
         </Content>
         <FooterWithButtons
           type={"SingleButton"}