From 187b6654a55b9a4f378794065de05f1cb831b625 Mon Sep 17 00:00:00 2001 From: Simone Date: Thu, 4 Feb 2021 17:13:25 +0100 Subject: [PATCH] feat(Bonus Pagamenti Digitali): [#176578322] Visualize iteratively co-badge card that can be added to the wallet (#2770) * [#176578578] create cobadge list selector * [#176578578] add optional abiInfo to creditCardPaymentMethod * [#176578578] add cobadgeCard to walletPreview * [#176578578] create cobadgePreview card * [#176578578] add cobadge card * [#176578578] wip enhance crediCard * [#176578578] enhance creditCard with abiInfo * [#176578578] renaming * [#176578578] add void CobadgeDetailScreen * [#176578578] add navigation to cobadgeDetailScreen action * [#176578578] add testId to cardPreview * [#176578578] add fake cobadgeDetailScreen * [#176578578] add navigation to cobadgeWalletDetail * [#176578578] add cobadgeWalletPreview tests * [#176578587] modify paymentMethodCapabilities test description * [#176578587] extract cobadge param from navigation * [#176578587] add dark layout * [#176578587] add paymentMethodCapabilities * [#176578587] add delete button * [#176578587] add cobadge card labels * [#176578587] add cobadge card * [#176578587] drill brandLogo from cobadgeWalletPreview to CobadgeCard component * [#176578587] remove bankName as abiLogo fallback * [#176578587] update CobadgeWalletPreview test * [#176578587] add abiLogo fallback * [#176578587] update expirationDate label * [#176578587] add expirationDate testId * [#176578587] add CobadgeCard tests * [#176578587] update labels * [#176578587] removed unused import * [#176578578] remove bancomat or bpay reference * [#176578578] use already existing getCardIconFromBrandLogo function instead of create a new one * [#176578578] add issuerAbiCode condition on cobadgeListVisibleInWalletSelector * [#176578578] fix * [#176578587] fix merge * [#176578587] fix merge * [#176578587] fix typo in test name * [#176578587] align brandLogo size with invision * [#176578587] pass the whole cobadge card instead of separate prop * [#176578587] add key to abiLogo in cobadge card * [#176578587] remove unused import * [#176578587] update test * [#176578322] add AddCobadgeComponent * [#176578322] rename CobadgeCard * [#176578322] refactor: add BaseCobadgeCard * [#176578322] refactor: use the BaseCobadgeCard in CobadgeCard * [#176578322] remove reactotron * [#176578322] update labels * [#176578322] update tests * [#176578322] add extract title for a payment method util * [#176578322] add extract card icon from brand util * [#176578322] insert AddCobadgeComponent in AddCobadgeScreen * [#176578322] add PreviewCoBadgeCard * [#176578322] insert PreviewCoBadgeCard into AddCobadgeComponent * [#176578322] remove reactotron * [#176578322] remove unused import * [#176578322] update labels * [#176578322] add loading caption * [#176578322] remove wrong test file * [#176578322] update CoBadgeCard component * [#176578322] fix lint errors * [#176578322] porting BrandEnum -> PaymentNetworkEnum Co-authored-by: fabriziofff --- locales/en/index.yml | 8 +- locales/it/index.yml | 8 +- .../{CobadgeCard.tsx => BaseCoBadgeCard.tsx} | 84 +++++++---- .../wallet/cobadge/component/CoBadgeCard.tsx | 39 +++++ .../cobadge/component/PreviewCoBadgeCard.tsx | 29 ++++ ...Card.test.tsx => BaseCobadgeCard.test.tsx} | 31 ++-- .../cobadge/screen/CobadgeDetailScreen.tsx | 10 +- .../screens/add-account/AddCoBadgeScreen.tsx | 18 +-- .../add-account/AddCobadgeComponent.tsx | 134 ++++++++++++++++++ .../add-account/LoadAddCoBadgeComponent.tsx | 4 +- ts/utils/card.ts | 14 ++ ts/utils/paymentMethod.ts | 10 ++ 12 files changed, 323 insertions(+), 66 deletions(-) rename ts/features/wallet/cobadge/component/{CobadgeCard.tsx => BaseCoBadgeCard.tsx} (52%) create mode 100644 ts/features/wallet/cobadge/component/CoBadgeCard.tsx create mode 100644 ts/features/wallet/cobadge/component/PreviewCoBadgeCard.tsx rename ts/features/wallet/cobadge/component/__test__/{CobadgeCard.test.tsx => BaseCobadgeCard.test.tsx} (79%) create mode 100644 ts/features/wallet/onboarding/cobadge/screens/add-account/AddCobadgeComponent.tsx create mode 100644 ts/utils/card.ts diff --git a/locales/en/index.yml b/locales/en/index.yml index ad71c5c1cf4..30c3a0db60e 100644 --- a/locales/en/index.yml +++ b/locales/en/index.yml @@ -863,7 +863,11 @@ wallet: koNotFound: title: "TMP KO Timeout add" add: - title: "TMP Add title" + screenTitle: "Do you want to add this card?" + label: "International circuit card {{current}} of {{length}}" + 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..." alert: supportedCardPageLinkError: An error occurred while opening the supported cards page. msgErrorUpdateApp: "An error occurred while opening the app store" @@ -1191,7 +1195,7 @@ wallet: cobadge: details: card: - validUntil: "Valid until {{expireMonth}}/{{expireYear}}" + validUntil: "Valid until {{expiryDate}}" newRemove: title: "Delete this payment method?" body: "This payment method will be removed. Any related feature, such as Cashback, will be disabled within 24 hours." diff --git a/locales/it/index.yml b/locales/it/index.yml index b5f8d9c0afe..9f4ee7786a5 100644 --- a/locales/it/index.yml +++ b/locales/it/index.yml @@ -883,7 +883,11 @@ wallet: koNotFound: title: "TMP KO Timeout add" add: - title: "TMP Add title" + screenTitle: "Vuoi aggiungere questa carta?" + label: "Carta con circuito internazionale {{current}} di {{length}}" + 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..." 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" @@ -1218,7 +1222,7 @@ wallet: cobadge: details: card: - validUntil: "Valida fino al {{expireMonth}}/{{expireYear}}" + validUntil: "Valida fino al {{expiryDate}}" newRemove: title: "Vuoi eliminare questo metodo?" body: "Questo metodo di pagamento verrà rimosso. Eventuali funzioni collegate, come il Cashback, verranno disattivate entro 24h." diff --git a/ts/features/wallet/cobadge/component/CobadgeCard.tsx b/ts/features/wallet/cobadge/component/BaseCoBadgeCard.tsx similarity index 52% rename from ts/features/wallet/cobadge/component/CobadgeCard.tsx rename to ts/features/wallet/cobadge/component/BaseCoBadgeCard.tsx index b4031cbd974..7f4a7466ff6 100644 --- a/ts/features/wallet/cobadge/component/CobadgeCard.tsx +++ b/ts/features/wallet/cobadge/component/BaseCoBadgeCard.tsx @@ -6,20 +6,23 @@ import { StyleProp, StyleSheet } from "react-native"; -import { View } from "native-base"; +import { Badge, View } from "native-base"; import I18n from "../../../../i18n"; import BaseCardComponent from "../../component/BaseCardComponent"; import { useImageResize } from "../../onboarding/bancomat/screens/hooks/useImageResize"; import { H4 } from "../../../../components/core/typography/H4"; import { H5 } from "../../../../components/core/typography/H5"; import abiLogoFallback from "../../../../../img/wallet/cards-icons/abiLogoFallback.png"; +import { Abi } from "../../../../../definitions/pagopa/walletv2/Abi"; +import { localeDateFormat } from "../../../../utils/locale"; +import { IOColors } from "../../../../components/core/variables/IOColors"; type Props = { caption?: string; - expireMonth?: string; - expireYear?: string; - abiLogo?: string; + expiringDate?: Date; + abi: Abi; brandLogo: ImageSourcePropType; + blocked?: boolean; }; const styles = StyleSheet.create({ @@ -33,14 +36,28 @@ const styles = StyleSheet.create({ height: 31, resizeMode: "contain" }, - bankName: { textTransform: "capitalize" } + bankName: { textTransform: "capitalize" }, + badgeInfo: { + borderWidth: 1, + borderStyle: "solid", + height: 25, + flexDirection: "row" + }, + badgeInfoExpired: { + backgroundColor: IOColors.white, + borderColor: IOColors.red + } }); const BASE_IMG_W = 160; const BASE_IMG_H = 40; -const CobadgeCard: React.FunctionComponent = (props: Props) => { - const imgDimensions = useImageResize(BASE_IMG_W, BASE_IMG_H, props.abiLogo); +const BaseCoBadgeCard: React.FunctionComponent = (props: Props) => { + const imgDimensions = useImageResize( + BASE_IMG_W, + BASE_IMG_H, + props.abi?.logoUrl + ); const imageStyle: StyleProp | undefined = imgDimensions.fold( undefined, @@ -54,22 +71,35 @@ const CobadgeCard: React.FunctionComponent = (props: Props) => { - {props.abiLogo && imageStyle ? ( - - ) : ( - - )} - {props.expireMonth && props.expireYear && ( + + {props.abi.logoUrl && imageStyle ? ( + + ) : ( + + )} + {props.blocked && ( + +
{I18n.t("global.badges.blocked")}
+ + )} + + {props.expiringDate && ( <>
= (props: Props) => { testID={"expirationDate"} > {I18n.t("wallet.cobadge.details.card.validUntil", { - expireMonth: props.expireMonth, - expireYear: props.expireYear + expiryDate: localeDateFormat( + props.expiringDate, + I18n.t("global.dateFormats.numericMonthYear") + ) })}
@@ -109,4 +141,4 @@ const CobadgeCard: React.FunctionComponent = (props: Props) => { ); }; -export default CobadgeCard; +export default BaseCoBadgeCard; diff --git a/ts/features/wallet/cobadge/component/CoBadgeCard.tsx b/ts/features/wallet/cobadge/component/CoBadgeCard.tsx new file mode 100644 index 00000000000..80458514238 --- /dev/null +++ b/ts/features/wallet/cobadge/component/CoBadgeCard.tsx @@ -0,0 +1,39 @@ +import * as React from "react"; +import { getCardIconFromBrandLogo } from "../../../../components/wallet/card/Logo"; +import { CreditCardPaymentMethod } from "../../../../types/pagopa"; +import BaseCoBadgeCard from "./BaseCoBadgeCard"; + +type Props = { enhancedCoBadge: CreditCardPaymentMethod }; + +const getExpireDate = (fullYear?: string, month?: string): Date | undefined => { + if (!fullYear || !month) { + return undefined; + } + const year = parseInt(fullYear, 10); + const indexedMonth = parseInt(month, 10); + if (isNaN(year) || isNaN(indexedMonth)) { + return undefined; + } + return new Date(year, indexedMonth - 1); +}; + +/** + * Render a Co-badge card already added to the wallet + * @param props + * @constructor + */ +const CoBadgeCard: React.FunctionComponent = props => { + const brandLogo = getCardIconFromBrandLogo(props.enhancedCoBadge.info); + return ( + + ); +}; +export default CoBadgeCard; diff --git a/ts/features/wallet/cobadge/component/PreviewCoBadgeCard.tsx b/ts/features/wallet/cobadge/component/PreviewCoBadgeCard.tsx new file mode 100644 index 00000000000..c0867a2623f --- /dev/null +++ b/ts/features/wallet/cobadge/component/PreviewCoBadgeCard.tsx @@ -0,0 +1,29 @@ +import * as React from "react"; +import { Abi } from "../../../../../definitions/pagopa/walletv2/Abi"; +import { PaymentInstrument } from "../../../../../definitions/pagopa/walletv2/PaymentInstrument"; +import { getCardIconFromPaymentNetwork } from "../../../../utils/card"; +import { + getTitleFromPaymentInstrument, + isCoBadgeBlocked +} from "../../../../utils/paymentMethod"; +import BaseCoBadgeCard from "./BaseCoBadgeCard"; + +type Props = { coBadge: PaymentInstrument; abi: Abi }; + +/** + * Display a preview of a cobadge that the user could add to the wallet + * @constructor + */ +const PreviewCoBadgeCard: React.FunctionComponent = props => { + const brandLogo = getCardIconFromPaymentNetwork(props.coBadge.paymentNetwork); + return ( + + ); +}; +export default PreviewCoBadgeCard; diff --git a/ts/features/wallet/cobadge/component/__test__/CobadgeCard.test.tsx b/ts/features/wallet/cobadge/component/__test__/BaseCobadgeCard.test.tsx similarity index 79% rename from ts/features/wallet/cobadge/component/__test__/CobadgeCard.test.tsx rename to ts/features/wallet/cobadge/component/__test__/BaseCobadgeCard.test.tsx index 65e8dd07bc0..7f0f3b26d09 100644 --- a/ts/features/wallet/cobadge/component/__test__/CobadgeCard.test.tsx +++ b/ts/features/wallet/cobadge/component/__test__/BaseCobadgeCard.test.tsx @@ -7,16 +7,16 @@ import configureMockStore from "redux-mock-store"; // import { pot } from "italia-ts-commons"; import { none, some } from "fp-ts/lib/Option"; import * as hooks from "../../../onboarding/bancomat/screens/hooks/useImageResize"; -import CobadgeCard from "../CobadgeCard"; +import CobadgeCard from "../BaseCoBadgeCard"; import defaultCardIcon from "../../../../../../img/wallet/cards-icons/unknown.png"; +import { Abi } from "../../../../../../definitions/pagopa/walletv2/Abi"; jest.mock("../../../onboarding/bancomat/screens/hooks/useImageResize"); const aCaption = "****1234"; const anAbiLogo = "http://127.0.0.1:3000/static_contents/logos/abi/03069.png"; const aBrandLogo = defaultCardIcon; -const anExpireMonth = "6"; -const anExpireYear = "2021"; +const anexpiringDateNotExpired = new Date("01/05/2023"); describe("CoBadgeWalletPreview component", () => { const mockStore = configureMockStore(); // eslint-disable-next-line functional/no-let @@ -27,7 +27,8 @@ describe("CoBadgeWalletPreview component", () => { }); it("should show the abiLogoFallback if there isn't the abiLogo", () => { jest.spyOn(hooks, "useImageResize").mockReturnValue(none); - const component = getComponent(store, aBrandLogo); + const anAbiWithoutAbilogo = {} as Abi; + const component = getComponent(store, aBrandLogo, anAbiWithoutAbilogo); const abiLogoFallbackComponent = component.queryByTestId("abiLogoFallback"); expect(abiLogoFallbackComponent).not.toBeNull(); @@ -38,29 +39,27 @@ describe("CoBadgeWalletPreview component", () => { it("should show the abiLogo if there is an abiLogo and useImageResize return some value", () => { jest.spyOn(hooks, "useImageResize").mockReturnValue(some([15, 15])); - const component = getComponent(store, aBrandLogo, anAbiLogo); + const anAbiWithAbiLogo = { logoUrl: anAbiLogo } as Abi; + const component = getComponent(store, aBrandLogo, anAbiWithAbiLogo); const abiLogo = component.queryByTestId("abiLogo"); expect(abiLogo).not.toBeNull(); expect(abiLogo).toHaveProp("source", { uri: anAbiLogo }); }); - it("should show the expiration date if both expireMonth and expireYear are defined", () => { + it("should show the expiration date if expiringDate is defined", () => { jest.spyOn(hooks, "useImageResize").mockReturnValue(none); const component = getComponent( store, aBrandLogo, anAbiLogo, aCaption, - anExpireMonth, - anExpireYear + anexpiringDateNotExpired ); const expirationDate = component.queryByTestId("expirationDate"); expect(expirationDate).not.toBeNull(); - expect(expirationDate).toHaveTextContent( - `Valid until ${anExpireMonth}/${anExpireYear}` - ); + expect(expirationDate).toHaveTextContent(`Valid until 01/2023`); }); it("should show the caption if is defined", () => { @@ -76,19 +75,17 @@ describe("CoBadgeWalletPreview component", () => { const getComponent = ( store: Store, brandLogo: ImageSourcePropType, - abiLogo?: string, + abi: Abi, caption?: string, - expireMonth?: string, - expireYear?: string + expiringDate?: Date ) => render( ); diff --git a/ts/features/wallet/cobadge/screen/CobadgeDetailScreen.tsx b/ts/features/wallet/cobadge/screen/CobadgeDetailScreen.tsx index 78184313d13..88e2340f70e 100644 --- a/ts/features/wallet/cobadge/screen/CobadgeDetailScreen.tsx +++ b/ts/features/wallet/cobadge/screen/CobadgeDetailScreen.tsx @@ -16,7 +16,7 @@ import PaymentMethodCapabilities from "../../component/PaymentMethodCapabilities import { Label } from "../../../../components/core/typography/Label"; import { deleteWalletRequest } from "../../../../store/actions/wallet/wallets"; import { showToast } from "../../../../utils/showToast"; -import CobadgeCard from "../component/CobadgeCard"; +import CobadgeCard from "../component/CoBadgeCard"; import { getCardIconFromBrandLogo } from "../../../../components/wallet/card/Logo"; type NavigationParams = Readonly<{ @@ -76,13 +76,7 @@ const CobadgeDetailScreen: React.FunctionComponent = props => { hideHeader={true} > - + diff --git a/ts/features/wallet/onboarding/cobadge/screens/add-account/AddCoBadgeScreen.tsx b/ts/features/wallet/onboarding/cobadge/screens/add-account/AddCoBadgeScreen.tsx index c16772352b2..b61a4e7b424 100644 --- a/ts/features/wallet/onboarding/cobadge/screens/add-account/AddCoBadgeScreen.tsx +++ b/ts/features/wallet/onboarding/cobadge/screens/add-account/AddCoBadgeScreen.tsx @@ -1,13 +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 } from "native-base"; import * as React from "react"; -import { SafeAreaView } from "react-native"; import { connect } from "react-redux"; import { Dispatch } from "redux"; import { PaymentInstrument } from "../../../../../../../definitions/pagopa/walletv2/PaymentInstrument"; -import { H1 } from "../../../../../../components/core/typography/H1"; import BaseScreenComponent from "../../../../../../components/screens/BaseScreenComponent"; import { profileSelector } from "../../../../../../store/reducers/profile"; import { GlobalState } from "../../../../../../store/reducers/types"; @@ -27,6 +24,7 @@ import { onboardingCobadgeChosenSelector } from "../../store/reducers/addingCoBadge"; import { onboardingCoBadgeFoundSelector } from "../../store/reducers/foundCoBadge"; +import AddCobadgeComponent from "./AddCobadgeComponent"; import LoadAddCoBadgeComponent from "./LoadAddCoBadgeComponent"; type Props = ReturnType & @@ -82,12 +80,14 @@ const AddCoBadgeScreen = (props: Props): React.ReactElement | null => { onRetry={() => fromNullable(props.selectedCoBadge).map(props.onRetry)} /> ) : currentPan.isSome() ? ( - // TODO replace with iterative component - - - + nextPan(true)} + contextualHelp={props.contextualHelp} + /> ) : null; // this should not happen }; diff --git a/ts/features/wallet/onboarding/cobadge/screens/add-account/AddCobadgeComponent.tsx b/ts/features/wallet/onboarding/cobadge/screens/add-account/AddCobadgeComponent.tsx new file mode 100644 index 00000000000..01337f52ff7 --- /dev/null +++ b/ts/features/wallet/onboarding/cobadge/screens/add-account/AddCobadgeComponent.tsx @@ -0,0 +1,134 @@ +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 { PaymentInstrument } from "../../../../../../../definitions/pagopa/walletv2/PaymentInstrument"; +import { InfoBox } from "../../../../../../components/box/InfoBox"; +import { Body } from "../../../../../../components/core/typography/Body"; +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 PreviewCoBadgeCard from "../../../../cobadge/component/PreviewCoBadgeCard"; +import { IOColors } from "../../../../../../components/core/variables/IOColors"; +import { isCoBadgeBlocked } from "../../../../../../utils/paymentMethod"; + +type Props = { + pan: PaymentInstrument; + pansNumber: number; + currentIndex: number; + handleContinue: () => 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 loadLocales = (props: Props) => ({ + headerTitle: I18n.t("wallet.onboarding.coBadge.headerTitle"), + screenTitle: I18n.t("wallet.onboarding.coBadge.add.screenTitle"), + label: I18n.t("wallet.onboarding.coBadge.add.label", { + current: props.currentIndex + 1, + length: props.pansNumber + }), + blockedCard: I18n.t("wallet.onboarding.coBadge.add.blocked"), + warning: I18n.t("wallet.onboarding.coBadge.add.warning") +}); + +const AddCobadgeComponent: React.FunctionComponent = (props: Props) => { + const [abiInfo, setAbiInfo] = React.useState({}); + const { headerTitle, screenTitle, label, blockedCard, warning } = loadLocales( + props + ); + React.useEffect(() => { + const abi: Abi | undefined = props.abiList.find( + elem => elem.abi === props.pan.abiCode + ); + setAbiInfo(abi ?? {}); + }, [props.pan.abiCode]); + + return ( + } + headerTitle={headerTitle} + contextualHelp={props.contextualHelp} + > + + + + +

{screenTitle}

+ +

+ {label} +

+ + + + {isCoBadgeBlocked(props.pan) ? ( + + {blockedCard} + + ) : ( + + {warning} + + )} + + + + {isCoBadgeBlocked(props.pan) ? ( + + ) : ( + + )} + + + ); +}; + +const mapStateToProps = (state: GlobalState) => ({ + abiList: abiListSelector(state) +}); + +export default connect(mapStateToProps)(AddCobadgeComponent); diff --git a/ts/features/wallet/onboarding/cobadge/screens/add-account/LoadAddCoBadgeComponent.tsx b/ts/features/wallet/onboarding/cobadge/screens/add-account/LoadAddCoBadgeComponent.tsx index 2608c03031b..891614ea90e 100644 --- a/ts/features/wallet/onboarding/cobadge/screens/add-account/LoadAddCoBadgeComponent.tsx +++ b/ts/features/wallet/onboarding/cobadge/screens/add-account/LoadAddCoBadgeComponent.tsx @@ -1,4 +1,5 @@ import * as React from "react"; +import I18n from "../../../../../../i18n"; import { useHardwareBackButton } from "../../../../../bonus/bonusVacanze/components/hooks/useHardwareBackButton"; import { LoadingErrorComponent } from "../../../../../bonus/bonusVacanze/components/loadingErrorScreen/LoadingErrorComponent"; @@ -23,8 +24,7 @@ const LoadAddCoBadgeComponent = (props: Props): React.ReactElement => { return ( diff --git a/ts/utils/card.ts b/ts/utils/card.ts new file mode 100644 index 00000000000..e253e5d7603 --- /dev/null +++ b/ts/utils/card.ts @@ -0,0 +1,14 @@ +import { fromNullable } from "fp-ts/lib/Option"; +import { PaymentNetworkEnum } from "../../definitions/pagopa/walletv2/PaymentInstrument"; +import defaultCardIcon from "../../img/wallet/cards-icons/unknown.png"; +export const cardIcons: { [key in PaymentNetworkEnum]: any } = { + MAESTRO: require("../../img/wallet/cards-icons/maestro.png"), + MASTERCARD: require("../../img/wallet/cards-icons/mastercard.png"), + VISA_ELECTRON: require("../../img/wallet/cards-icons/visa-electron.png"), + VISA_CLASSIC: require("../../img/wallet/cards-icons/visa.png"), + VPAY: require("../../img/wallet/cards-icons/vPay.png") +}; + +export const getCardIconFromPaymentNetwork = ( + brand: PaymentNetworkEnum | undefined +) => fromNullable(brand).fold(defaultCardIcon, b => cardIcons[b]); diff --git a/ts/utils/paymentMethod.ts b/ts/utils/paymentMethod.ts index 2ffb2a4fd6c..46f40c1b10b 100644 --- a/ts/utils/paymentMethod.ts +++ b/ts/utils/paymentMethod.ts @@ -1,6 +1,10 @@ import { fromNullable } from "fp-ts/lib/Option"; import { ImageSourcePropType } from "react-native"; import { Abi } from "../../definitions/pagopa/walletv2/Abi"; +import { + PaymentInstrument, + ValidityStatusEnum +} from "../../definitions/pagopa/walletv2/PaymentInstrument"; import bPayImage from "../../img/wallet/cards-icons/bPay.png"; import satispayImage from "../../img/wallet/cards-icons/satispay.png"; import pagoBancomatImage from "../../img/wallet/cards-icons/pagobancomat.png"; @@ -50,6 +54,9 @@ export const getPaymentMethodHash = ( } return undefined; }; +export const getTitleFromPaymentInstrument = ( + paymentInstrument: PaymentInstrument +) => `${FOUR_UNICODE_CIRCLES} ${paymentInstrument.panPartialNumber}`; export const getTitleFromCard = (creditCard: RawCreditCardPaymentMethod) => `${FOUR_UNICODE_CIRCLES} ${creditCard.info.blurredNumber}`; @@ -192,3 +199,6 @@ export const enhancePaymentMethod = ( export const isBancomatBlocked = (pan: Card) => pan.validityState === ValidityStateEnum.BR; + +export const isCoBadgeBlocked = (pan: PaymentInstrument) => + pan.validityStatus === ValidityStatusEnum.BLOCK_REVERSIBLE;