Merge branch 'master' into IACROSS-217-remove-nested-navigator-design…

…-system
pagopa · Apr 11, 2024 · ebcc7e7 · ebcc7e7
2 parents e3047e0 + 7829b38
commit ebcc7e7
Show file tree

Hide file tree

Showing 17 changed files with 171 additions and 144 deletions.
diff --git a/ts/features/payments/barcode/screens/PaymentsBarcodeChoiceScreen.tsx b/ts/features/payments/barcode/screens/PaymentsBarcodeChoiceScreen.tsx
@@ -31,6 +31,7 @@ import {
 import { useIODispatch } from "../../../../store/hooks";
 import * as analytics from "../../../barcode/analytics";
 import { PagoPaBarcode } from "../../../barcode/types/IOBarcode";
+import { usePagoPaPayment } from "../../checkout/hooks/usePagoPaPayment";
 import { PaymentNoticeListItem } from "../components/PaymentNoticeListItem";
 import { PaymentsBarcodeParamsList } from "../navigation/params";
 
@@ -47,6 +48,9 @@ const PaymentsBarcodeChoiceScreen = () => {
   const dispatch = useIODispatch();
   const navigation = useNavigation<IOStackNavigationProp<AppParamsList>>();
 
+  const { startPaymentFlowWithRptId, isNewWalletSectionEnabled } =
+    usePagoPaPayment();
+
   useFocusEffect(
     React.useCallback(() => {
       analytics.trackBarcodeMultipleCodesScreenView();
@@ -65,15 +69,19 @@ const PaymentsBarcodeChoiceScreen = () => {
         : "qrcode_scan";
     analytics.trackBarcodeMultipleCodesSelection();
 
-    dispatch(paymentInitializeState());
-    navigation.navigate(ROUTES.WALLET_NAVIGATOR, {
-      screen: ROUTES.PAYMENT_TRANSACTION_SUMMARY,
-      params: {
-        initialAmount: barcode.amount,
-        rptId: barcode.rptId,
-        paymentStartOrigin
-      }
-    });
+    if (isNewWalletSectionEnabled) {
+      startPaymentFlowWithRptId(barcode.rptId);
+    } else {
+      dispatch(paymentInitializeState());
+      navigation.navigate(ROUTES.WALLET_NAVIGATOR, {
+        screen: ROUTES.PAYMENT_TRANSACTION_SUMMARY,
+        params: {
+          initialAmount: barcode.amount,
+          rptId: barcode.rptId,
+          paymentStartOrigin
+        }
+      });
+    }
   };
 
   const renderBarcodeItem = (barcode: PagoPaBarcode) => {

diff --git a/ts/features/payments/barcode/screens/PaymentsBarcodeScanScreen.tsx b/ts/features/payments/barcode/screens/PaymentsBarcodeScanScreen.tsx
@@ -1,11 +1,11 @@
+import { IOToast } from "@pagopa/io-app-design-system";
 import { useNavigation } from "@react-navigation/native";
 import * as A from "fp-ts/lib/Array";
 import { pipe } from "fp-ts/lib/function";
 import * as React from "react";
 import ReactNativeHapticFeedback, {
   HapticFeedbackTypes
 } from "react-native-haptic-feedback";
-import { IOToast } from "@pagopa/io-app-design-system";
 import { ContextualHelpPropsMarkdown } from "../../../../components/screens/BaseScreenComponent";
 import I18n from "../../../../i18n";
 import { mixpanelTrack } from "../../../../mixpanel";
@@ -32,6 +32,7 @@ import {
   IO_BARCODE_ALL_FORMATS,
   PagoPaBarcode
 } from "../../../barcode/types/IOBarcode";
+import { usePagoPaPayment } from "../../checkout/hooks/usePagoPaPayment";
 import { PaymentsCheckoutRoutes } from "../../checkout/navigation/routes";
 import { PaymentsBarcodeRoutes } from "../navigation/routes";
 
@@ -48,6 +49,9 @@ const PaymentsBarcodeScanScreen = () => {
   );
   const isDesignSystemEnabled = useIOSelector(isDesignSystemEnabledSelector);
 
+  const { startPaymentFlowWithRptId, isNewWalletSectionEnabled } =
+    usePagoPaPayment();
+
   const barcodeFormats: Array<IOBarcodeFormat> = IO_BARCODE_ALL_FORMATS.filter(
     format => (format === "DATA_MATRIX" ? dataMatrixPosteEnabled : true)
   );
@@ -89,31 +93,34 @@ const PaymentsBarcodeScanScreen = () => {
     const barcode = pagoPaBarcodes[0];
 
     if (barcode.type === "PAGOPA") {
-      dispatch(paymentInitializeState());
-
-      switch (barcode.format) {
-        case "QR_CODE":
-          navigation.navigate(ROUTES.WALLET_NAVIGATOR, {
-            screen: ROUTES.PAYMENT_TRANSACTION_SUMMARY,
-            params: {
-              initialAmount: barcode.amount,
-              rptId: barcode.rptId,
-              paymentStartOrigin: "qrcode_scan"
-            }
-          });
-          break;
-        case "DATA_MATRIX":
-          void mixpanelTrack("WALLET_SCAN_POSTE_DATAMATRIX_SUCCESS");
-          navigation.navigate(ROUTES.WALLET_NAVIGATOR, {
-            screen: ROUTES.PAYMENT_TRANSACTION_SUMMARY,
-            params: {
-              initialAmount: barcode.amount,
-              rptId: barcode.rptId,
-              paymentStartOrigin: "poste_datamatrix_scan"
-            }
-          });
-
-          break;
+      if (isNewWalletSectionEnabled) {
+        startPaymentFlowWithRptId(barcode.rptId);
+      } else {
+        dispatch(paymentInitializeState());
+        switch (barcode.format) {
+          case "QR_CODE":
+            navigation.navigate(ROUTES.WALLET_NAVIGATOR, {
+              screen: ROUTES.PAYMENT_TRANSACTION_SUMMARY,
+              params: {
+                initialAmount: barcode.amount,
+                rptId: barcode.rptId,
+                paymentStartOrigin: "qrcode_scan"
+              }
+            });
+            break;
+          case "DATA_MATRIX":
+            void mixpanelTrack("WALLET_SCAN_POSTE_DATAMATRIX_SUCCESS");
+            navigation.navigate(ROUTES.WALLET_NAVIGATOR, {
+              screen: ROUTES.PAYMENT_TRANSACTION_SUMMARY,
+              params: {
+                initialAmount: barcode.amount,
+                rptId: barcode.rptId,
+                paymentStartOrigin: "poste_datamatrix_scan"
+              }
+            });
+
+            break;
+        }
       }
     }
   };

diff --git a/ts/features/payments/checkout/components/WalletPaymentFeedbackBanner.tsx b/ts/features/payments/checkout/components/WalletPaymentFeedbackBanner.tsx
@@ -17,6 +17,9 @@ const WalletPaymentFeebackBanner = () => {
     return openAuthenticationSession(WALLET_PAYMENT_FEEDBACK_URL, "");
   };
 
+  // This banner is temporarily disabled. Remove the next line to re-enable it
+  return null;
+
   return (
     <>
       <VSpacer size={24} />

diff --git a/ts/features/payments/checkout/hooks/usePagoPaPayment.ts b/ts/features/payments/checkout/hooks/usePagoPaPayment.ts
@@ -4,62 +4,77 @@ import {
   PaymentNoticeNumberFromString
 } from "@pagopa/io-pagopa-commons/lib/pagopa";
 import { OrganizationFiscalCode } from "@pagopa/ts-commons/lib/strings";
-import { NavigatorScreenParams, useRoute } from "@react-navigation/native";
 import { sequenceS } from "fp-ts/lib/Apply";
 import * as E from "fp-ts/lib/Either";
 import * as O from "fp-ts/lib/Option";
 import { pipe } from "fp-ts/lib/function";
 import { RptId } from "../../../../../definitions/pagopa/ecommerce/RptId";
-import {
-  AppParamsList,
-  useIONavigation
-} from "../../../../navigation/params/AppParamsList";
-import { useIODispatch } from "../../../../store/hooks";
+import { useIONavigation } from "../../../../navigation/params/AppParamsList";
+import { useIODispatch, useIOSelector } from "../../../../store/hooks";
 import { PaymentsCheckoutRoutes } from "../navigation/routes";
 import {
   PaymentInitStateParams,
   initPaymentStateAction
 } from "../store/actions/orchestration";
-import { PaymentStartRoute } from "../types";
+import { isNewWalletSectionEnabledSelector } from "../../../../store/reducers/persistedPreferences";
 
 type PagoPaPaymentParams = Omit<PaymentInitStateParams, "startRoute">;
 
+const DEFAULT_PAYMENT_PARAMS: PagoPaPaymentParams = {};
+
+type PaymentData = {
+  paymentNoticeNumber: string;
+  organizationFiscalCode: string;
+};
+
+type UsePagoPaPayment = {
+  startPaymentFlow: (rptId: RptId, params?: PagoPaPaymentParams) => void;
+  startPaymentFlowWithRptId: (
+    rptId: PagoPaRptId,
+    params?: PagoPaPaymentParams
+  ) => void;
+  startPaymentFlowWithData: (
+    data: PaymentData,
+    params?: PagoPaPaymentParams
+  ) => void;
+  // This is a temporary flag to tell that the new payment flow is enabled and can be used
+  // Will be removed once the new wallet section is released
+  isNewWalletSectionEnabled: boolean;
+};
+
 /**
  * A hook for initiating a PagoPA payment flow.
  * This hook provides functions to start a payment flow using various input methods.
  * @returns An object containing functions to start different types of payment flows.
  */
-const usePagoPaPayment = () => {
-  const route = useRoute();
+const usePagoPaPayment = (): UsePagoPaPayment => {
   const dispatch = useIODispatch();
   const navigation = useIONavigation();
 
+  // Checks if the new wallet section is enabled
+  const isNewWalletSectionEnabled = useIOSelector(
+    isNewWalletSectionEnabledSelector
+  );
+
   /**
    * Initializes the payment state based on the provided parameters.
    * The initialization includes the store of the current route which allows the app to
    * return to it when the payment flow is finished.
    * @param {PagoPaPaymentParams} params - Parameters for initializing the payment state.
    */
-  const initPaymentState = ({ startOrigin }: PagoPaPaymentParams) => {
-    const startRoute: PaymentStartRoute = {
-      routeName: route.name as keyof AppParamsList,
-      routeKey:
-        route.key as keyof NavigatorScreenParams<AppParamsList>["screen"]
-    };
-    dispatch(
-      initPaymentStateAction({
-        startRoute,
-        startOrigin
-      })
-    );
+  const initPaymentState = (params: PagoPaPaymentParams) => {
+    dispatch(initPaymentStateAction(params));
   };
 
   /**
    * Initiates the payment flow using the provided RptId string and additional parameters.
    * @param {RptId} rptId - The RptId for the payment flow.
    * @param {PagoPaPaymentParams} params - Additional parameters for the payment flow.
    */
-  const startPaymentFlow = (rptId: RptId, params: PagoPaPaymentParams = {}) => {
+  const startPaymentFlow = (
+    rptId: RptId,
+    params: PagoPaPaymentParams = DEFAULT_PAYMENT_PARAMS
+  ) => {
     initPaymentState(params);
     navigation.navigate(PaymentsCheckoutRoutes.PAYMENT_CHECKOUT_NAVIGATOR, {
       screen: PaymentsCheckoutRoutes.PAYMENT_CHECKOUT_DETAIL,
@@ -76,7 +91,7 @@ const usePagoPaPayment = () => {
    */
   const startPaymentFlowWithRptId = (
     rptId: PagoPaRptId,
-    params: PagoPaPaymentParams = {}
+    params: PagoPaPaymentParams = DEFAULT_PAYMENT_PARAMS
   ) => {
     pipe(
       O.fromNullable(rptId),
@@ -93,11 +108,8 @@ const usePagoPaPayment = () => {
    * @param {PagoPaPaymentParams} params - Additional parameters for the payment flow.
    */
   const startPaymentFlowWithData = (
-    data: {
-      paymentNoticeNumber: string;
-      organizationFiscalCode: string;
-    },
-    params: PagoPaPaymentParams = {}
+    data: PaymentData,
+    params: PagoPaPaymentParams = DEFAULT_PAYMENT_PARAMS
   ) => {
     pipe(
       sequenceS(E.Monad)({
@@ -117,7 +129,8 @@ const usePagoPaPayment = () => {
   return {
     startPaymentFlow,
     startPaymentFlowWithRptId,
-    startPaymentFlowWithData
+    startPaymentFlowWithData,
+    isNewWalletSectionEnabled
   };
 };
 

diff --git a/ts/features/payments/checkout/hooks/useWalletPaymentGoBackHandler.tsx b/ts/features/payments/checkout/hooks/useWalletPaymentGoBackHandler.tsx
@@ -30,7 +30,7 @@ const useWalletPaymentGoBackHandler = () => {
 
     const handleConfirmAbort = () => {
       dispatch(paymentsDeleteTransactionAction.request(transactionId));
-      navigation.push(PaymentsCheckoutRoutes.PAYMENT_CHECKOUT_NAVIGATOR, {
+      navigation.replace(PaymentsCheckoutRoutes.PAYMENT_CHECKOUT_NAVIGATOR, {
         screen: PaymentsCheckoutRoutes.PAYMENT_CHECKOUT_OUTCOME,
         params: {
           outcome: WalletPaymentOutcomeEnum.CANCELED_BY_USER

diff --git a/ts/features/payments/checkout/screens/WalletPaymentConfirmScreen.tsx b/ts/features/payments/checkout/screens/WalletPaymentConfirmScreen.tsx
@@ -59,7 +59,7 @@ const WalletPaymentConfirmScreen = () => {
 
   const handleAuthorizationOutcome = React.useCallback(
     (outcome: WalletPaymentOutcome) => {
-      navigation.navigate(PaymentsCheckoutRoutes.PAYMENT_CHECKOUT_NAVIGATOR, {
+      navigation.replace(PaymentsCheckoutRoutes.PAYMENT_CHECKOUT_NAVIGATOR, {
         screen: PaymentsCheckoutRoutes.PAYMENT_CHECKOUT_OUTCOME,
         params: {
           outcome

diff --git a/ts/features/payments/checkout/screens/WalletPaymentDetailScreen.tsx b/ts/features/payments/checkout/screens/WalletPaymentDetailScreen.tsx
@@ -135,7 +135,7 @@ const WalletPaymentDetailContent = ({
 
   const navigateToMakePaymentScreen = () => {
     dispatch(storeNewPaymentAttemptAction(rptId));
-    navigation.push(PaymentsCheckoutRoutes.PAYMENT_CHECKOUT_NAVIGATOR, {
+    navigation.navigate(PaymentsCheckoutRoutes.PAYMENT_CHECKOUT_NAVIGATOR, {
       screen: PaymentsCheckoutRoutes.PAYMENT_CHECKOUT_MAKE
     });
   };

diff --git a/ts/features/payments/checkout/screens/WalletPaymentInputFiscalCodeScreen.tsx b/ts/features/payments/checkout/screens/WalletPaymentInputFiscalCodeScreen.tsx
@@ -35,16 +35,15 @@ import {
 } from "../../../../navigation/params/AppParamsList";
 import ROUTES from "../../../../navigation/routes";
 import { paymentInitializeState } from "../../../../store/actions/wallet/payment";
-import { useIODispatch, useIOSelector } from "../../../../store/hooks";
+import { useIODispatch } from "../../../../store/hooks";
 import themeVariables from "../../../../theme/variables";
 import { emptyContextualHelp } from "../../../../utils/emptyContextualHelp";
 import {
   decodeOrganizationFiscalCode,
   validateOrganizationFiscalCode
 } from "../../common/utils/validation";
-import { PaymentsCheckoutParamsList } from "../navigation/params";
-import { isNewWalletSectionEnabledSelector } from "../../../../store/reducers/persistedPreferences";
 import { usePagoPaPayment } from "../hooks/usePagoPaPayment";
+import { PaymentsCheckoutParamsList } from "../navigation/params";
 
 export type WalletPaymentInputFiscalCodeScreenNavigationParams = {
   paymentNoticeNumber: O.Option<PaymentNoticeNumberFromString>;
@@ -64,11 +63,9 @@ const WalletPaymentInputFiscalCodeScreen = () => {
   const { params } = useRoute<WalletPaymentInputFiscalCodeRouteProps>();
   const dispatch = useIODispatch();
   const navigation = useNavigation<IOStackNavigationProp<AppParamsList>>();
-  const isNewWalletSectionEnabled = useIOSelector(
-    isNewWalletSectionEnabledSelector
-  );
 
-  const { startPaymentFlowWithRptId } = usePagoPaPayment();
+  const { startPaymentFlowWithRptId, isNewWalletSectionEnabled } =
+    usePagoPaPayment();
 
   const [inputState, setInputState] = React.useState<InputState>({
     fiscalCodeText: "",
@@ -91,6 +88,10 @@ const WalletPaymentInputFiscalCodeScreen = () => {
       }),
       O.chain(flow(RptId.decode, O.fromEither)),
       O.map(rptId => {
+        // Removes the manual input screen from the stack
+        navigation.popToTop();
+        navigation.pop();
+        // Navigate to the payment details screen (payment verification)
         if (isNewWalletSectionEnabled) {
           startPaymentFlowWithRptId(rptId);
         } else {