Merge branch 'master' into IOBP-885-add-last-payment-used

pagopa · Oct 14, 2024 · 4f72f6c · 4f72f6c
2 parents 8f638bb + 7fe89b8
commit 4f72f6c
Show file tree

Hide file tree

Showing 9 changed files with 126 additions and 41 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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 = () => (
+    <>
+      <IOMarkdown
+        content={I18n.t(
+          "features.payments.checkout.bottomSheet.PAYMENT_REVERSED.payNotice",
+          {
+            url: WALLET_PAYMENT_SHOW_OTHER_CHANNELS_URL
+          }
+        )}
+      />
+      <VSpacer size={24} />
+      <IOMarkdown
+        content={I18n.t(
+          "features.payments.checkout.bottomSheet.PAYMENT_REVERSED.waitRefund"
+        )}
+      />
+      <VSpacer size={24} />
+      <IOMarkdown
+        content={I18n.t(
+          "features.payments.checkout.bottomSheet.PAYMENT_REVERSED.contactSupport"
+        )}
+      />
+      <VSpacer size={24} />
+    </>
+  );
+
+  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
@@ -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 && <WalletPaymentFeebackBanner />}
       </OperationResultScreenContent>
       {supportModal.bottomSheet}
+      {reversedPaymentModal.bottomSheet}
     </>
   );
 };

diff --git 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<typeof WalletPaymentOutcome>;

diff --git 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
@@ -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,41 +17,20 @@ const usePaymentsLegacyAttachmentBottomSheet = (): IOBottomSheetModal =>
     title: I18n.t("features.payments.transactions.legacy.bottomSheet.title"),
     component: (
       <View>
-        <ParagraphWithTitle
-          title={I18n.t(
-            "features.payments.transactions.legacy.bottomSheet.noticeHeading"
-          )}
-          body={I18n.t(
-            "features.payments.transactions.legacy.bottomSheet.noticeBody"
+        <IOMarkdown
+          content={I18n.t(
+            "features.payments.transactions.legacy.bottomSheet.notice"
           )}
         />
         <VSpacer size={24} />
-        <ParagraphWithTitle
-          title={I18n.t(
-            "features.payments.transactions.legacy.bottomSheet.allNoticesHeading"
-          )}
-          body={I18n.t(
-            "features.payments.transactions.legacy.bottomSheet.allNoticesBody"
+        <IOMarkdown
+          content={I18n.t(
+            "features.payments.transactions.legacy.bottomSheet.allNotices"
           )}
         />
         <VSpacer size={48} />
       </View>
     )
   });
 
-type ParagraphWithTitleProps = {
-  title: string;
-  body: string;
-};
-
-const ParagraphWithTitle = ({ title, body }: ParagraphWithTitleProps) => (
-  <View>
-    <Body weight="Semibold" color="black">
-      {title}
-    </Body>
-    <VSpacer size={8} />
-    <Body>{body}</Body>
-  </View>
-);
-
 export { usePaymentsLegacyAttachmentBottomSheet };