From 3c211b600aab796ee06b69f6d1aa562efd3204fe Mon Sep 17 00:00:00 2001 From: Alessandro Date: Wed, 20 Nov 2024 09:26:35 +0100 Subject: [PATCH] chore: [IOBP-982] Add outcome 99 screen into payment flow (#6424) ## Short description This PR adds outcome 99 inside the payment screen when receiving it from the backend. ## List of changes proposed in this pull request - Created a custom `BE_NODE_KO` that's equals to outcome `99`; - Mapped the new outcome inside the labels and the screen to show into the `WalletPaymentOutcomeScreen.tsx` file; - Added missing outcomes to keep track on mixpanel inside the `getPaymentAnalyticsEventFromFailureOutcome` function ## How to test - Checkout and run the dev-server with this PR: https://github.com/pagopa/io-dev-api-server/pull/438; - Complete the payment flow and choose from the dropdown the BE_NODE_KO; ## Preview https://github.com/user-attachments/assets/a062456d-44a1-4f9f-ae3e-a9fb45644d98 --- locales/en/index.yml | 3 + locales/it/index.yml | 3 + .../payments/checkout/analytics/index.ts | 15 + .../screens/WalletPaymentOutcomeScreen.tsx | 16 +- .../WalletPaymentOutcomeScreen.test.tsx.snap | 2533 ++++++++++++++++- .../checkout/types/PaymentOutcomeEnum.ts | 1 + 6 files changed, 2431 insertions(+), 140 deletions(-) diff --git a/locales/en/index.yml b/locales/en/index.yml index 627c84b0f4b..08dda6ef47f 100644 --- a/locales/en/index.yml +++ b/locales/en/index.yml @@ -1982,6 +1982,9 @@ wallet: PLAFOND_LIMIT_ERROR: title: Hai superato il limite di spesa della tua carta subtitle: Non è stato addebitato alcun importo. Prima di riprovare, modifica il limite di spesa o usa un altro metodo di pagamento. + BE_NODE_KO: + title: Stiamo riscontrando alcuni problemi sui sistemi di pagamento + subtitle: Verifica l’esito del pagamento nella sezione Pagamenti, altrimenti attendi qualche minuto prima di riprovare. support: button: "Contatta l'assistenza" supportTitle: Contatta l'assistenza diff --git a/locales/it/index.yml b/locales/it/index.yml index a39e05c9da5..2d00e7770aa 100644 --- a/locales/it/index.yml +++ b/locales/it/index.yml @@ -1983,6 +1983,9 @@ wallet: PLAFOND_LIMIT_ERROR: title: Hai superato il limite di spesa della tua carta subtitle: Non è stato addebitato alcun importo. Prima di riprovare, modifica il limite di spesa o usa un altro metodo di pagamento. + BE_NODE_KO: + title: Stiamo riscontrando alcuni problemi sui sistemi di pagamento + subtitle: Verifica l’esito del pagamento nella sezione Pagamenti, altrimenti attendi qualche minuto prima di riprovare. support: button: "Contatta l'assistenza" supportTitle: Contatta l'assistenza diff --git a/ts/features/payments/checkout/analytics/index.ts b/ts/features/payments/checkout/analytics/index.ts index d9d0c9ed09b..200aea30632 100644 --- a/ts/features/payments/checkout/analytics/index.ts +++ b/ts/features/payments/checkout/analytics/index.ts @@ -30,6 +30,7 @@ export type PaymentAnalyticsProps = { editing: PaymentAnalyticsEditingType; }; +// eslint-disable-next-line complexity export const getPaymentAnalyticsEventFromFailureOutcome = ( outcome: WalletPaymentOutcomeEnum ) => { @@ -68,6 +69,20 @@ export const getPaymentAnalyticsEventFromFailureOutcome = ( return "PAYMENT_WEBVIEW_USER_CANCELLATION"; case WalletPaymentOutcomeEnum.PAYPAL_REMOVED_ERROR: return "PAYMENT_METHOD_AUTHORIZATION_ERROR"; + case WalletPaymentOutcomeEnum.BE_NODE_KO: + return "PAYMENT_SLOWDOWN_ERROR"; + case WalletPaymentOutcomeEnum.INSUFFICIENT_AVAILABILITY_ERROR: + return "PAYMENT_INSUFFICIENT_AVAILABILITY_ERROR"; + case WalletPaymentOutcomeEnum.CVV_ERROR: + return "PAYMENT_CVV_ERROR"; + case WalletPaymentOutcomeEnum.PLAFOND_LIMIT_ERROR: + return "PAYMENT_PLAFOND_LIMIT_ERROR"; + case WalletPaymentOutcomeEnum.KO_RETRIABLE: + return "PAYMENT_KO_RETRIABLE"; + case WalletPaymentOutcomeEnum.ORDER_NOT_PRESENT: + return "PAYMENT_ORDER_NOT_PRESENT"; + case WalletPaymentOutcomeEnum.DUPLICATE_ORDER: + return "PAYMENT_DUPLICATE_ORDER"; default: return outcome; } diff --git a/ts/features/payments/checkout/screens/WalletPaymentOutcomeScreen.tsx b/ts/features/payments/checkout/screens/WalletPaymentOutcomeScreen.tsx index fb45065f546..4c73d1fe072 100644 --- a/ts/features/payments/checkout/screens/WalletPaymentOutcomeScreen.tsx +++ b/ts/features/payments/checkout/screens/WalletPaymentOutcomeScreen.tsx @@ -400,8 +400,7 @@ const WalletPaymentOutcomeScreen = () => { "wallet.payment.outcome.PAYMENT_METHODS_NOT_AVAILABLE.subtitle" ), action: onboardPaymentMethodAction, - secondaryAction: onboardPaymentMethodCloseAction, - isHeaderVisible: true + secondaryAction: onboardPaymentMethodCloseAction }; case WalletPaymentOutcomeEnum.PAYMENT_REVERSED: return { @@ -429,8 +428,7 @@ const WalletPaymentOutcomeScreen = () => { subtitle: I18n.t( "wallet.payment.outcome.IN_APP_BROWSER_CLOSED_BY_USER.subtitle" ), - action: closeFailureAction, - isHeaderVisible: true + action: closeFailureAction }; case WalletPaymentOutcomeEnum.INSUFFICIENT_AVAILABILITY_ERROR: return { @@ -459,6 +457,14 @@ const WalletPaymentOutcomeScreen = () => { ), action: closeFailureAction }; + case WalletPaymentOutcomeEnum.BE_NODE_KO: + return { + pictogram: "umbrellaNew", + title: I18n.t("wallet.payment.outcome.BE_NODE_KO.title"), + subtitle: I18n.t("wallet.payment.outcome.BE_NODE_KO.subtitle"), + action: closeFailureAction, + secondaryAction: contactSupportAction + }; } }; @@ -466,7 +472,7 @@ const WalletPaymentOutcomeScreen = () => { return ( <> - + {requiresFeedback && } {supportModal.bottomSheet} diff --git a/ts/features/payments/checkout/screens/___tests___/__snapshots__/WalletPaymentOutcomeScreen.test.tsx.snap b/ts/features/payments/checkout/screens/___tests___/__snapshots__/WalletPaymentOutcomeScreen.test.tsx.snap index ef048491d4f..40c4a9c708e 100644 --- a/ts/features/payments/checkout/screens/___tests___/__snapshots__/WalletPaymentOutcomeScreen.test.tsx.snap +++ b/ts/features/payments/checkout/screens/___tests___/__snapshots__/WalletPaymentOutcomeScreen.test.tsx.snap @@ -194,9 +194,9 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay edges={ { "bottom": "additive", - "left": "additive", - "right": "additive", - "top": "additive", + "left": "off", + "right": "off", + "top": "off", } } style={ @@ -2294,9 +2294,9 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay edges={ { "bottom": "additive", - "left": "additive", - "right": "additive", - "top": "additive", + "left": "off", + "right": "off", + "top": "off", } } style={ @@ -4442,9 +4442,9 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay edges={ { "bottom": "additive", - "left": "additive", - "right": "additive", - "top": "additive", + "left": "off", + "right": "off", + "top": "off", } } style={ @@ -6571,9 +6571,9 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay edges={ { "bottom": "additive", - "left": "additive", - "right": "additive", - "top": "additive", + "left": "off", + "right": "off", + "top": "off", } } style={ @@ -8685,9 +8685,9 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay edges={ { "bottom": "additive", - "left": "additive", - "right": "additive", - "top": "additive", + "left": "off", + "right": "off", + "top": "off", } } style={ @@ -10813,9 +10813,9 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay edges={ { "bottom": "additive", - "left": "additive", - "right": "additive", - "top": "additive", + "left": "off", + "right": "off", + "top": "off", } } style={ @@ -13012,9 +13012,9 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay edges={ { "bottom": "additive", - "left": "additive", - "right": "additive", - "top": "additive", + "left": "off", + "right": "off", + "top": "off", } } style={ @@ -15183,9 +15183,9 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay edges={ { "bottom": "additive", - "left": "additive", - "right": "additive", - "top": "additive", + "left": "off", + "right": "off", + "top": "off", } } style={ @@ -17297,9 +17297,9 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay edges={ { "bottom": "additive", - "left": "additive", - "right": "additive", - "top": "additive", + "left": "off", + "right": "off", + "top": "off", } } style={ @@ -19361,9 +19361,9 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay edges={ { "bottom": "additive", - "left": "additive", - "right": "additive", - "top": "additive", + "left": "off", + "right": "off", + "top": "off", } } style={ @@ -21509,9 +21509,9 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay edges={ { "bottom": "additive", - "left": "additive", - "right": "additive", - "top": "additive", + "left": "off", + "right": "off", + "top": "off", } } style={ @@ -23637,9 +23637,9 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay edges={ { "bottom": "additive", - "left": "additive", - "right": "additive", - "top": "additive", + "left": "off", + "right": "off", + "top": "off", } } style={ @@ -25785,9 +25785,9 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay edges={ { "bottom": "additive", - "left": "additive", - "right": "additive", - "top": "additive", + "left": "off", + "right": "off", + "top": "off", } } style={ @@ -27984,9 +27984,9 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay edges={ { "bottom": "additive", - "left": "additive", - "right": "additive", - "top": "additive", + "left": "off", + "right": "off", + "top": "off", } } style={ @@ -30132,9 +30132,9 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay edges={ { "bottom": "additive", - "left": "additive", - "right": "additive", - "top": "additive", + "left": "off", + "right": "off", + "top": "off", } } style={ @@ -32280,9 +32280,9 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay edges={ { "bottom": "additive", - "left": "additive", - "right": "additive", - "top": "additive", + "left": "off", + "right": "off", + "top": "off", } } style={ @@ -34436,9 +34436,9 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay edges={ { "bottom": "additive", - "left": "additive", - "right": "additive", - "top": "additive", + "left": "off", + "right": "off", + "top": "off", } } style={ @@ -36564,9 +36564,9 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay edges={ { "bottom": "additive", - "left": "additive", - "right": "additive", - "top": "additive", + "left": "off", + "right": "off", + "top": "off", } } style={ @@ -38765,9 +38765,9 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay edges={ { "bottom": "additive", - "left": "additive", - "right": "additive", - "top": "additive", + "left": "off", + "right": "off", + "top": "off", } } style={ @@ -45235,7 +45235,7 @@ Se dopo 5 giorni lavorativi non hai ancora ricevuto il rimborso, contatta l’as `; -exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPaymentOutcomeScreen for outcome: 116 1`] = ` +exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPaymentOutcomeScreen for outcome: 99 1`] = ` + + @@ -45640,7 +45674,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay ] } > - Il saldo è insufficiente + Stiamo riscontrando alcuni problemi sui sistemi di pagamento - Non è stato addebitato alcun importo. Prima di riprovare, aggiungi fondi alla carta o usa un altro metodo di pagamento. + Verifica l’esito del pagamento nella sezione Pagamenti, altrimenti attendi qualche minuto prima di riprovare. + + + + + + + Contatta l'assistenza + + + + + @@ -46423,7 +46572,7 @@ exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPay ] } > - INSUFFICIENT_AVAILABILITY_ERROR + BE_NODE_KO `; -exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPaymentOutcomeScreen for outcome: 117 1`] = ` +exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPaymentOutcomeScreen for outcome: 116 1`] = ` - - - + + + + + + Il saldo è insufficiente + + + + Non è stato addebitato alcun importo. Prima di riprovare, aggiungi fondi alla carta o usa un altro metodo di pagamento. + + + + + + + + + Close + + + + + + + + + + + + + + + + + + + Contatta l'assistenza + + + + + + + + + + + + + + + + + + Chiedi aiuto in chat + + + + + + + + + + + + Dati aggiuntivi + + + + + + + + Copia tutti + + + + + + + + + + + + + + + + + + + Codice errore + + + INSUFFICIENT_AVAILABILITY_ERROR + + + + + + + + + + + + + + + + + + + + + + + + + Codice avviso + + + + + + + + + + + + + + + + + + + + + + + + + + Codice Fiscale Ente + + + + + + + + + + + + + + + + + + + + + + + + + + Paga l'avviso + + +Ricorda di pagare l'avviso entro le scadenze previste dall'ente. Se non riesci tramite IO, + + scopri gli altri canali abilitati a pagoPA + + + + + + + + Attendi il rimborso + + +Di solito l’importo viene riaccreditato entro pochi minuti. In altri casi, il trasferimento di denaro sul tuo conto o carta potrebbe richiedere più tempo. + + + + + + + Contatta l'assistenza + + +Se dopo 5 giorni lavorativi non hai ancora ricevuto il rimborso, contatta l’assistenza. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +`; + +exports[`WalletPaymentOutcomeScreen for all outcomes should render the WalletPaymentOutcomeScreen for outcome: 117 1`] = ` + + + + + + + + + + + + + + + + + + + + + + + + + + + +