Merge branch 'master' into PE-737-cgn-capitalize-text-apostrophe-case

pagopa · Oct 17, 2024 · 7c62b85 · 7c62b85
2 parents 9e4e77c + 08d5d02
commit 7c62b85
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 4 deletions.
diff --git a/locales/en/index.yml b/locales/en/index.yml
@@ -1397,6 +1397,9 @@ wallet:
         subtitle: Controlla di aver seguito correttamente le istruzioni della tua banca o app di pagamento.
         primaryAction: Chiudi
         secondaryAction: Scopri di più
+        bottomSheet:
+          title: "Cosa fare se il salvataggio non va a buon fine?"
+          description: "**Carta di credito o debito**\n\nTi invitiamo a verificare con la tua banca. I casi più frequenti sono:\n\n1. La tua carta non è abilitata agli acquisti online.\n2. Non hai ancora attivato il servizio 3DS: si tratta di un sistema di sicurezza legato ai pagamenti online.\n3. La tua carta è stata sospesa o bloccata.\n4. Hai messo 'in pausa' la tua carta.\n\n\n**Altri metodi**\n\nContatta l'assistenza del tuo metodo e chiedi il motivo del rifiuto."
       TIMEOUT:
         title: La sessione è scaduta
         subtitle: Per la tua sicurezza, hai a disposizione un tempo limitato per completare l’operazione.

diff --git a/locales/it/index.yml b/locales/it/index.yml
@@ -1397,6 +1397,9 @@ wallet:
         subtitle: Controlla di aver seguito correttamente le istruzioni della tua banca o app di pagamento.
         primaryAction: Chiudi
         secondaryAction: Scopri di più
+        bottomSheet:
+          title: "Cosa fare se il salvataggio non va a buon fine?"
+          description: "**Carta di credito o debito**\n\nTi invitiamo a verificare con la tua banca. I casi più frequenti sono:\n\n1. La tua carta non è abilitata agli acquisti online.\n2. Non hai ancora attivato il servizio 3DS: si tratta di un sistema di sicurezza legato ai pagamenti online.\n3. La tua carta è stata sospesa o bloccata.\n4. Hai messo 'in pausa' la tua carta.\n\n\n**Altri metodi**\n\nContatta l'assistenza del tuo metodo e chiedi il motivo del rifiuto."
       TIMEOUT:
         title: La sessione è scaduta
         subtitle: Per la tua sicurezza, hai a disposizione un tempo limitato per completare l’operazione.

diff --git a/ts/features/payments/onboarding/components/PaymentsOnboardingAuthErrorBottomSheet.tsx b/ts/features/payments/onboarding/components/PaymentsOnboardingAuthErrorBottomSheet.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import { VSpacer } from "@pagopa/io-app-design-system";
+import { useIOBottomSheetAutoresizableModal } from "../../../../utils/hooks/bottomSheet";
+import I18n from "../../../../i18n";
+import IOMarkdown from "../../../../components/IOMarkdown";
+
+export const usePaymentOnboardingAuthErrorBottomSheet = () => {
+  const getModalContent = () => (
+    <>
+      <IOMarkdown
+        content={I18n.t(
+          "wallet.onboarding.outcome.AUTH_ERROR.bottomSheet.description"
+        )}
+      />
+      <VSpacer size={48} />
+    </>
+  );
+
+  const modal = useIOBottomSheetAutoresizableModal({
+    component: getModalContent(),
+    title: I18n.t("wallet.onboarding.outcome.AUTH_ERROR.bottomSheet.title")
+  });
+
+  return { ...modal };
+};
diff --git a/ts/features/payments/onboarding/screens/PaymentsOnboardingFeedbackScreen.tsx b/ts/features/payments/onboarding/screens/PaymentsOnboardingFeedbackScreen.tsx
@@ -12,19 +12,18 @@ import {
   IOStackNavigationProp
 } from "../../../../navigation/params/AppParamsList";
 import ROUTES from "../../../../navigation/routes";
-import { openWebUrl } from "../../../../utils/url";
 import { PaymentsMethodDetailsRoutes } from "../../details/navigation/routes";
 import { PaymentsOnboardingParamsList } from "../navigation/params";
 import {
   WalletOnboardingOutcome,
   WalletOnboardingOutcomeEnum
 } from "../types/OnboardingOutcomeEnum";
-import { ONBOARDING_FAQ_ENABLE_3DS } from "../utils";
 import { useIODispatch, useIOSelector } from "../../../../store/hooks";
 import { selectPaymentOnboardingRptIdToResume } from "../store/selectors";
 import { usePagoPaPayment } from "../../checkout/hooks/usePagoPaPayment";
 import { paymentsResetRptIdToResume } from "../store/actions";
 import { getPaymentsWalletUserMethods } from "../../wallet/store/actions";
+import { usePaymentOnboardingAuthErrorBottomSheet } from "../components/PaymentsOnboardingAuthErrorBottomSheet";
 
 export type PaymentsOnboardingFeedbackScreenParams = {
   outcome: WalletOnboardingOutcome;
@@ -56,6 +55,7 @@ const PaymentsOnboardingFeedbackScreen = () => {
 
   const rptIdToResume = useIOSelector(selectPaymentOnboardingRptIdToResume);
   const { startPaymentFlow } = usePagoPaPayment();
+  const { bottomSheet, present } = usePaymentOnboardingAuthErrorBottomSheet();
 
   const outcomeEnumKey = Object.keys(WalletOnboardingOutcomeEnum)[
     Object.values(WalletOnboardingOutcomeEnum).indexOf(outcome)
@@ -112,7 +112,7 @@ const PaymentsOnboardingFeedbackScreen = () => {
           accessibilityLabel: I18n.t(
             `wallet.onboarding.outcome.AUTH_ERROR.secondaryAction`
           ),
-          onPress: () => openWebUrl(ONBOARDING_FAQ_ENABLE_3DS)
+          onPress: present
         };
     }
     return undefined;
@@ -142,6 +142,7 @@ const PaymentsOnboardingFeedbackScreen = () => {
         }}
         secondaryAction={renderSecondaryAction()}
       />
+      {bottomSheet}
     </View>
   );
 };

diff --git a/ts/features/payments/onboarding/utils/index.ts b/ts/features/payments/onboarding/utils/index.ts
@@ -2,7 +2,6 @@ import { PaymentMethodManagementTypeEnum } from "../../../../../definitions/pago
 import { PaymentMethodResponse } from "../../../../../definitions/pagopa/walletv3/PaymentMethodResponse";
 import { PaymentMethodStatusEnum } from "../../../../../definitions/pagopa/walletv3/PaymentMethodStatus";
 
-export const ONBOARDING_FAQ_ENABLE_3DS = "https://io.italia.it/faq/#n3_3";
 export const ONBOARDING_CALLBACK_URL_SCHEMA = "iowallet";
 export const ONBOARDING_OUTCOME_PATH = "/wallets/outcomes";