diff --git a/locales/de/index.yml b/locales/de/index.yml index 79412241f5a..601f66b9083 100644 --- a/locales/de/index.yml +++ b/locales/de/index.yml @@ -2560,10 +2560,6 @@ features: title: "Vorherige Transaktionen" bottomSheet: title: "Wo finde ich die Zahlungsquittung?" - noticeHeading: "Kürzlich bezahlte Aufforderungen" - noticeBody: "Wir sind gerade dabei, unsere Systeme zu aktualisieren: Sobald sie abgeschlossen ist, findest du die Quittungen im PDF-Format im Abschnitt Zahlungen." - allNoticesHeading: "Alle anderen Aufforderungen" - allNoticesBody: "Für Transaktionen, die vor dem 1. April 2023 getätigt wurden, wende dich bitte an den Gläubiger." multiplePayment: "Mehrfache Zahlung" title: "Transaktionsverlauf" button: "Alle anzeigen" diff --git a/locales/en/index.yml b/locales/en/index.yml index 7872b6c6510..b7360485517 100644 --- a/locales/en/index.yml +++ b/locales/en/index.yml @@ -1941,6 +1941,14 @@ wallet: subtitle: Il metodo verrà salvato nel Portafoglio, così la prossima volta potrai pagare più facilmente. primaryAction: Aggiungi carta secondaryAction: Usa altri metodi + PAYMENT_REVERSED: + title: Il pagamento non è andato a buon fine + subtitle: L’importo autorizzato è stato rimborsato sul tuo metodo di pagamento. Il trasferimento di denaro potrebbe richiedere del tempo. + primaryAction: Scopri di più + secondaryAction: Chiudi + PAYPAL_REMOVED_ERROR: + title: Autorizzazione negata + subtitle: Potresti avere rimosso pagoPA dai pagamenti automatici di PayPal. Elimina il conto PayPal dal tuo Portafoglio, aggiungilo di nuovo e riprova ad effettuare il pagamento. support: button: "Contatta l'assistenza" supportTitle: Contatta l'assistenza @@ -3153,10 +3161,8 @@ features: title: Operazioni precedenti bottomSheet: title: Dove trovo la ricevuta di pagamento? - noticeHeading: Avvisi pagati di recente - noticeBody: "Stiamo aggiornando i nostri sistemi: non appena pronte, troverai le ricevute in formato PDF nella sezione Pagamenti." - allNoticesHeading: Tutti gli altri avvisi - allNoticesBody: Per le operazioni eseguite prima del 1° aprile 2023, rivolgiti all’ente creditore. + notice: "**Avvisi pagati di recente**\nStiamo aggiornando i nostri sistemi: non appena pronte, troverai le ricevute in formato PDF nella sezione Pagamenti." + allNotices: "**Tutti gli altri avvisi**\nPer le operazioni eseguite prima del 1° aprile 2023, rivolgiti all’ente creditore." multiplePayment: Pagamento multiplo title: Ricevute pagoPA button: Vedi tutte @@ -3186,6 +3192,13 @@ features: explainationContent: "Quando hai salvato questo metodo, hai autorizzato {{pspBusinessName}} a gestire le transazioni eseguite tramite “PayPal pagamento veloce”.\n\nSe vuoi usare un altro gestore, aggiungi nuovamente il metodo al tuo Portafoglio.\n\nPer revocare l’autorizzazione, rimuovi il metodo dal Portafoglio.\n\nUsa l’app PayPal per modificare la carta o conto bancario su cui addebitare le spese." errors: transactionCreationError: C’è un problema con i sistemi di pagamento. + checkout: + bottomSheet: + PAYMENT_REVERSED: + title: "Cosa fare se il pagamento non va a buon fine?" + payNotice: "**Paga l'avviso**\nRicorda di pagare l'avviso entro le scadenze previste dall'ente. Se non riesci tramite IO, [scopri gli altri canali abilitati a pagoPA]({{url}})" + waitRefund: "**Attendi il rimborso**\nDi solito l’importo viene riaccreditato entro pochi minuti. In altri casi, il trasferimento di denaro sul tuo conto o carta potrebbe richiedere più tempo." + contactSupport: "**Contatta l'assistenza**\nSe dopo 5 giorni lavorativi non hai ancora ricevuto il rimborso, contatta l’assistenza." itWallet: credentialName: eid: Identità Digitale diff --git a/locales/it/index.yml b/locales/it/index.yml index ce797c50d51..f4022ee24cc 100644 --- a/locales/it/index.yml +++ b/locales/it/index.yml @@ -1941,6 +1941,14 @@ wallet: subtitle: Il metodo verrà salvato nel Portafoglio, così la prossima volta potrai pagare più facilmente. primaryAction: Aggiungi carta secondaryAction: Usa altri metodi + PAYMENT_REVERSED: + title: Il pagamento non è andato a buon fine + subtitle: L’importo autorizzato è stato rimborsato sul tuo metodo di pagamento. Il trasferimento di denaro potrebbe richiedere del tempo. + primaryAction: Scopri di più + secondaryAction: Chiudi + PAYPAL_REMOVED_ERROR: + title: Autorizzazione negata + subtitle: Potresti avere rimosso pagoPA dai pagamenti automatici di PayPal. Elimina il conto PayPal dal tuo Portafoglio, aggiungilo di nuovo e riprova ad effettuare il pagamento. support: button: "Contatta l'assistenza" supportTitle: Contatta l'assistenza @@ -3153,10 +3161,8 @@ features: title: Operazioni precedenti bottomSheet: title: Dove trovo la ricevuta di pagamento? - noticeHeading: Avvisi pagati di recente - noticeBody: "Stiamo aggiornando i nostri sistemi: non appena pronte, troverai le ricevute in formato PDF nella sezione Pagamenti." - allNoticesHeading: Tutti gli altri avvisi - allNoticesBody: Per le operazioni eseguite prima del 1° aprile 2023, rivolgiti all’ente creditore. + notice: "**Avvisi pagati di recente**\nStiamo aggiornando i nostri sistemi: non appena pronte, troverai le ricevute in formato PDF nella sezione Pagamenti." + allNotices: "**Tutti gli altri avvisi**\nPer le operazioni eseguite prima del 1° aprile 2023, rivolgiti all’ente creditore." multiplePayment: Pagamento multiplo title: Ricevute pagoPA button: Vedi tutte @@ -3186,6 +3192,13 @@ features: explainationContent: "Quando hai salvato questo metodo, hai autorizzato {{pspBusinessName}} a gestire le transazioni eseguite tramite “PayPal pagamento veloce”.\n\nSe vuoi usare un altro gestore, aggiungi nuovamente il metodo al tuo Portafoglio.\n\nPer revocare l’autorizzazione, rimuovi il metodo dal Portafoglio.\n\nUsa l’app PayPal per modificare la carta o conto bancario su cui addebitare le spese." errors: transactionCreationError: C’è un problema con i sistemi di pagamento. + checkout: + bottomSheet: + PAYMENT_REVERSED: + title: "Cosa fare se il pagamento non va a buon fine?" + payNotice: "**Paga l'avviso**\nRicorda di pagare l'avviso entro le scadenze previste dall'ente. Se non riesci tramite IO, [scopri gli altri canali abilitati a pagoPA]({{url}})" + waitRefund: "**Attendi il rimborso**\nDi solito l’importo viene riaccreditato entro pochi minuti. In altri casi, il trasferimento di denaro sul tuo conto o carta potrebbe richiedere più tempo." + contactSupport: "**Contatta l'assistenza**\nSe dopo 5 giorni lavorativi non hai ancora ricevuto il rimborso, contatta l’assistenza." itWallet: credentialName: eid: Identità Digitale diff --git a/ts/features/payments/checkout/analytics/index.ts b/ts/features/payments/checkout/analytics/index.ts index b54e7d9ef78..c5f10a913c4 100644 --- a/ts/features/payments/checkout/analytics/index.ts +++ b/ts/features/payments/checkout/analytics/index.ts @@ -61,6 +61,8 @@ export const getPaymentAnalyticsEventFromFailureOutcome = ( return "PAYMENT_NO_METHOD_SAVED_ERROR"; case WalletPaymentOutcomeEnum.WAITING_CONFIRMATION_EMAIL: return "PAYMENT_UNKNOWN_OUTCOME_ERROR"; + case WalletPaymentOutcomeEnum.PAYMENT_REVERSED: + return "PAYMENT_REVERSAL_ERROR"; default: return outcome; } diff --git a/ts/features/payments/checkout/hooks/usePaymentReversedInfoBottomSheet.tsx b/ts/features/payments/checkout/hooks/usePaymentReversedInfoBottomSheet.tsx new file mode 100644 index 00000000000..d0c33e7969e --- /dev/null +++ b/ts/features/payments/checkout/hooks/usePaymentReversedInfoBottomSheet.tsx @@ -0,0 +1,43 @@ +import React from "react"; +import { VSpacer } from "@pagopa/io-app-design-system"; +import { useIOBottomSheetAutoresizableModal } from "../../../../utils/hooks/bottomSheet"; +import I18n from "../../../../i18n"; +import { WALLET_PAYMENT_SHOW_OTHER_CHANNELS_URL } from "../utils"; +import IOMarkdown from "../../../../components/IOMarkdown"; + +export const usePaymentReversedInfoBottomSheet = () => { + const getModalContent = () => ( + <> + + + + + + + + ); + + const modal = useIOBottomSheetAutoresizableModal({ + component: getModalContent(), + title: I18n.t( + "features.payments.checkout.bottomSheet.PAYMENT_REVERSED.title" + ) + }); + + return { ...modal }; +}; diff --git a/ts/features/payments/checkout/screens/WalletPaymentOutcomeScreen.tsx b/ts/features/payments/checkout/screens/WalletPaymentOutcomeScreen.tsx index 95c8abd8d64..c3a4b33caf9 100644 --- a/ts/features/payments/checkout/screens/WalletPaymentOutcomeScreen.tsx +++ b/ts/features/payments/checkout/screens/WalletPaymentOutcomeScreen.tsx @@ -39,6 +39,7 @@ import { walletPaymentSelectedPspSelector } from "../store/selectors/psps"; import { PaymentsCheckoutRoutes } from "../navigation/routes"; import { useHeaderSecondLevel } from "../../../../hooks/useHeaderSecondLevel"; import { getPaymentsLatestBizEventsTransactionsAction } from "../../bizEventsTransaction/store/actions"; +import { usePaymentReversedInfoBottomSheet } from "../hooks/usePaymentReversedInfoBottomSheet"; type WalletPaymentOutcomeScreenNavigationParams = { outcome: WalletPaymentOutcome; @@ -69,6 +70,8 @@ const WalletPaymentOutcomeScreen = () => { outcome }); + const reversedPaymentModal = usePaymentReversedInfoBottomSheet(); + const shouldShowHeader = [ WalletPaymentOutcomeEnum.PAYMENT_METHODS_NOT_AVAILABLE ].includes(outcome); @@ -137,6 +140,10 @@ const WalletPaymentOutcomeScreen = () => { navigation.pop(); }; + const handleShowMoreOnReversedPayment = () => { + reversedPaymentModal.present(); + }; + const closeSuccessAction: OperationResultScreenContentProps["action"] = { label: I18n.t("wallet.payment.outcome.SUCCESS.button"), accessibilityLabel: I18n.t("wallet.payment.outcome.SUCCESS.button"), @@ -200,6 +207,14 @@ const WalletPaymentOutcomeScreen = () => { } }; + const paymentReversedAction: OperationResultScreenContentProps["action"] = { + label: I18n.t("wallet.payment.outcome.PAYMENT_REVERSED.primaryAction"), + accessibilityLabel: I18n.t( + "wallet.payment.outcome.PAYMENT_REVERSED.primaryAction" + ), + onPress: handleShowMoreOnReversedPayment + }; + useOnFirstRender(() => { const kind = outcome === WalletPaymentOutcomeEnum.SUCCESS @@ -371,6 +386,23 @@ const WalletPaymentOutcomeScreen = () => { secondaryAction: onboardPaymentMethodCloseAction, isHeaderVisible: true }; + case WalletPaymentOutcomeEnum.PAYMENT_REVERSED: + return { + pictogram: "attention", + title: I18n.t("wallet.payment.outcome.PAYMENT_REVERSED.title"), + subtitle: I18n.t("wallet.payment.outcome.PAYMENT_REVERSED.subtitle"), + action: paymentReversedAction, + secondaryAction: closeFailureAction + }; + case WalletPaymentOutcomeEnum.PAYPAL_REMOVED_ERROR: + return { + pictogram: "accessDenied", + title: I18n.t("wallet.payment.outcome.PAYPAL_REMOVED_ERROR.title"), + subtitle: I18n.t( + "wallet.payment.outcome.PAYPAL_REMOVED_ERROR.subtitle" + ), + action: closeFailureAction + }; } }; @@ -382,6 +414,7 @@ const WalletPaymentOutcomeScreen = () => { {requiresFeedback && } {supportModal.bottomSheet} + {reversedPaymentModal.bottomSheet} ); }; diff --git a/ts/features/payments/checkout/types/PaymentOutcomeEnum.ts b/ts/features/payments/checkout/types/PaymentOutcomeEnum.ts index e731c792002..0d6888f75b2 100644 --- a/ts/features/payments/checkout/types/PaymentOutcomeEnum.ts +++ b/ts/features/payments/checkout/types/PaymentOutcomeEnum.ts @@ -19,7 +19,9 @@ export enum WalletPaymentOutcomeEnum { INVALID_SESSION = "14", // transaction failed METHOD_NOT_ENABLED = "15", // payment method not enabled WAITING_CONFIRMATION_EMAIL = "17", // waiting for confirmation email - PAYMENT_METHODS_NOT_AVAILABLE = "18" // payment methods not available + PAYMENT_REVERSED = "18", // "Storno" + PAYPAL_REMOVED_ERROR = "19", // error while executing the payment with PayPal + PAYMENT_METHODS_NOT_AVAILABLE = "20" // payment methods not available } export type WalletPaymentOutcome = t.TypeOf; diff --git a/ts/features/payments/checkout/utils/index.ts b/ts/features/payments/checkout/utils/index.ts index 425c4135421..c9f7f426275 100644 --- a/ts/features/payments/checkout/utils/index.ts +++ b/ts/features/payments/checkout/utils/index.ts @@ -12,6 +12,9 @@ import { export const WALLET_PAYMENT_FEEDBACK_URL = "https://io.italia.it/diccilatua/ces-pagamento"; +export const WALLET_PAYMENT_SHOW_OTHER_CHANNELS_URL = + "https://www.pagopa.gov.it/it/cittadini/dove-pagare/"; + export const isValidPaymentMethod = (method: PaymentMethodResponse) => [ PaymentMethodManagementTypeEnum.ONBOARDABLE, diff --git a/ts/features/payments/transaction/components/PaymentsLegacyAttachmentBottomSheet.tsx b/ts/features/payments/transaction/components/PaymentsLegacyAttachmentBottomSheet.tsx index 68f8da93fdc..ca47d233039 100644 --- a/ts/features/payments/transaction/components/PaymentsLegacyAttachmentBottomSheet.tsx +++ b/ts/features/payments/transaction/components/PaymentsLegacyAttachmentBottomSheet.tsx @@ -1,11 +1,12 @@ import React from "react"; import { View } from "react-native"; -import { Body, VSpacer } from "@pagopa/io-app-design-system"; +import { VSpacer } from "@pagopa/io-app-design-system"; import { IOBottomSheetModal, useIOBottomSheetAutoresizableModal } from "../../../../utils/hooks/bottomSheet"; import I18n from "../../../../i18n"; +import IOMarkdown from "../../../../components/IOMarkdown"; /** * This custom hook, usePaymentsLegacyAttachmentBottomSheet, is designed to display a bottom sheet @@ -16,21 +17,15 @@ const usePaymentsLegacyAttachmentBottomSheet = (): IOBottomSheetModal => title: I18n.t("features.payments.transactions.legacy.bottomSheet.title"), component: ( - - @@ -38,19 +33,4 @@ const usePaymentsLegacyAttachmentBottomSheet = (): IOBottomSheetModal => ) }); -type ParagraphWithTitleProps = { - title: string; - body: string; -}; - -const ParagraphWithTitle = ({ title, body }: ParagraphWithTitleProps) => ( - - - {title} - - - {body} - -); - export { usePaymentsLegacyAttachmentBottomSheet };