diff --git a/locales/en/index.yml b/locales/en/index.yml index e6e76e2edd4..d53505818a2 100644 --- 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 index dd7b9bb8cb5..43a60417ab5 100644 --- 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 index ea9cbd0dffe..068d34a1cda 100644 --- 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) => ( + + + + +

+ {cardPathItem.item.title} +

+
+ +
+
+ {cardPathItem.item.description} +
+
+
+); /** * 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 = [ + { + 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 ( { > -

TMP CoBadgeChooseType

- +

{I18n.t("wallet.onboarding.coBadge.chooseType.title")}

+ +

+ {I18n.t("wallet.onboarding.coBadge.chooseType.description")} +

- + item.path} + ListFooterComponent={} + renderItem={i => renderListItem(i)} + />