From ae69c7691f9335f2485df859cd24c433d2381790 Mon Sep 17 00:00:00 2001 From: Fabrizio Date: Wed, 9 Dec 2020 20:41:10 +0100 Subject: [PATCH 1/2] [#176069568] why other cards? --- locales/en/index.yml | 4 ++ locales/it/index.yml | 4 ++ .../list/PaymentMethodGroupedList.tsx | 16 +++-- .../components/bottomsheet/WhyOtherCards.tsx | 58 +++++++++++++++++++ 4 files changed, 78 insertions(+), 4 deletions(-) create mode 100644 ts/features/bonus/bpd/screens/details/components/bottomsheet/WhyOtherCards.tsx diff --git a/locales/en/index.yml b/locales/en/index.yml index 3d392075cf8..7596c863108 100644 --- a/locales/en/index.yml +++ b/locales/en/index.yml @@ -1944,6 +1944,10 @@ bonus: body: "You have added these payment methods to the cashback directly from the channels made available by your bank or payments app. You can activate or deactivate the collection of transactions of these methods also from IO. \n If you want to use some of these methods to pay via IO as well, add them to your wallet! " addWallet: "Add to wallet" + whyOtherCards: + title: "Why am I seeing cards that I don't recognize?" + body: "Don't worry, these are virtual versions of your cards that Apple, Google and Samsung use to protect your purchases made through their 'wallets'. We are working with those involved in the initiative to improve the display on the app IO of this type of cards. " + cta: "Find out more" notActivable: header: "Not available or incompatible" title: "Method not available" diff --git a/locales/it/index.yml b/locales/it/index.yml index 8a46e75a80a..1392b6a2d02 100644 --- a/locales/it/index.yml +++ b/locales/it/index.yml @@ -1975,6 +1975,10 @@ bonus: body: "Hai aggiunto al Cashback questi metodi di pagamento direttamente dai canali messi a disposizione dalla tua banca o app di pagamenti. Puoi attivare o disattivare la registrazione delle transazioni di questi metodi anche da IO.\n Se vuoi usare alcuni di questi metodi anche per pagare tramite IO, aggiungili al tuo portafoglio!" addWallet: "Aggiungi al portafoglio" + whyOtherCards: + title: "Perché vedo carte che non riconosco?" + body: "Non preoccuparti, si tratta delle versioni virtuali delle tue carte che Apple, Google e Samsung utilizzano per proteggere i tuoi acquisti effettuati tramite i loro ‘wallet’. Stiamo lavorando con i soggetti coinvolti nell’iniziativa per migliorare la visualizzazione sull’app IO di questo tipo di carte." + cta: "Scopri di più" notActivable: header: "Non attivabili o non compatibili" title: "Metodo non attivabile" diff --git a/ts/features/bonus/bpd/components/paymentMethodActivationToggle/list/PaymentMethodGroupedList.tsx b/ts/features/bonus/bpd/components/paymentMethodActivationToggle/list/PaymentMethodGroupedList.tsx index 1196d3f8719..fede510af1c 100644 --- a/ts/features/bonus/bpd/components/paymentMethodActivationToggle/list/PaymentMethodGroupedList.tsx +++ b/ts/features/bonus/bpd/components/paymentMethodActivationToggle/list/PaymentMethodGroupedList.tsx @@ -3,11 +3,12 @@ import * as React from "react"; import { StyleSheet } from "react-native"; import { Body } from "../../../../../../components/core/typography/Body"; import { H4 } from "../../../../../../components/core/typography/H4"; +import { Link } from "../../../../../../components/core/typography/Link"; import I18n from "../../../../../../i18n"; import { EnableableFunctionsTypeEnum } from "../../../../../../types/pagopa"; -import { PaymentMethodWithActivation } from "../../../store/reducers/details/combiner"; -import { Link } from "../../../../../../components/core/typography/Link"; import { hasFunctionEnabled } from "../../../../../../utils/walletv2"; +import { useWhyOtherCardsBottomSheet } from "../../../screens/details/components/bottomsheet/WhyOtherCards"; +import { PaymentMethodWithActivation } from "../../../store/reducers/details/combiner"; import { useOtherChannelInformationBottomSheet } from "../bottomsheet/OtherChannelInformation"; import { PaymentMethodRawList } from "./PaymentMethodRawList"; @@ -40,7 +41,8 @@ const clusterizePaymentMethods = ( const OtherChannelsSection = (props: { paymentMethods: ReadonlyArray; }) => { - const { present } = useOtherChannelInformationBottomSheet(); + const presentOtherChannel = useOtherChannelInformationBottomSheet().present; + const presentWhyOthersCard = useWhyOtherCardsBottomSheet().present; return ( @@ -56,12 +58,18 @@ const OtherChannelsSection = (props: { )} - + {I18n.t("global.buttons.info").toLowerCase()} + + + {I18n.t( + "bonus.bpd.details.paymentMethods.activateOnOthersChannel.whyOtherCards.title" + )} + ); }; diff --git a/ts/features/bonus/bpd/screens/details/components/bottomsheet/WhyOtherCards.tsx b/ts/features/bonus/bpd/screens/details/components/bottomsheet/WhyOtherCards.tsx new file mode 100644 index 00000000000..25b91070525 --- /dev/null +++ b/ts/features/bonus/bpd/screens/details/components/bottomsheet/WhyOtherCards.tsx @@ -0,0 +1,58 @@ +import { View } from "native-base"; +import * as React from "react"; +import { StyleSheet } from "react-native"; +import ButtonDefaultOpacity from "../../../../../../../components/ButtonDefaultOpacity"; +import { Body } from "../../../../../../../components/core/typography/Body"; +import { Link } from "../../../../../../../components/core/typography/Link"; +import { IOColors } from "../../../../../../../components/core/variables/IOColors"; +import I18n from "../../../../../../../i18n"; +import { useIOBottomSheet } from "../../../../../../../utils/bottomSheet"; +import { openWebUrl } from "../../../../../../../utils/url"; + +const styles = StyleSheet.create({ + link: { + backgroundColor: IOColors.white, + borderColor: IOColors.white, + paddingRight: 0, + paddingLeft: 0 + } +}); + +const findOutMore = "https://io.italia.it/cashback/faq/#n31"; + +/** + * Display information about the current period + * @constructor + */ +export const WhyOtherCards = () => ( + + + + + {I18n.t( + "bonus.bpd.details.paymentMethods.activateOnOthersChannel.whyOtherCards.body" + )} + + openWebUrl(findOutMore)} + onPressWithGestureHandler={true} + style={styles.link} + > + + {I18n.t( + "bonus.bpd.details.paymentMethods.activateOnOthersChannel.whyOtherCards.cta" + )} + + + + +); + +export const useWhyOtherCardsBottomSheet = () => + useIOBottomSheet( + , + I18n.t( + "bonus.bpd.details.paymentMethods.activateOnOthersChannel.whyOtherCards.title" + ), + 300 + ); From a4c644b0c72e6f0d1bf36fd77d21db15a73aba98 Mon Sep 17 00:00:00 2001 From: Fabrizio Date: Wed, 9 Dec 2020 20:50:14 +0100 Subject: [PATCH 2/2] [#176069568] comment --- .../screens/details/components/bottomsheet/WhyOtherCards.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ts/features/bonus/bpd/screens/details/components/bottomsheet/WhyOtherCards.tsx b/ts/features/bonus/bpd/screens/details/components/bottomsheet/WhyOtherCards.tsx index 25b91070525..cff5f451a1e 100644 --- a/ts/features/bonus/bpd/screens/details/components/bottomsheet/WhyOtherCards.tsx +++ b/ts/features/bonus/bpd/screens/details/components/bottomsheet/WhyOtherCards.tsx @@ -21,7 +21,7 @@ const styles = StyleSheet.create({ const findOutMore = "https://io.italia.it/cashback/faq/#n31"; /** - * Display information about the current period + * Explains why there are other cards * @constructor */ export const WhyOtherCards = () => (