feat: added withItwEnabled hoc

pagopa · Feb 13, 2025 · 15c2c6b · 15c2c6b
1 parent a06bfa1
commit 15c2c6b
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 34 deletions.
diff --git a/ts/components/screens/OperationResultScreenContent.tsx b/ts/components/screens/OperationResultScreenContent.tsx
@@ -31,11 +31,11 @@ type OperationResultScreenContentProps = WithTestID<{
   subtitleProps?: Pick<BodyProps, "textBreakStrategy" | "lineBreakStrategyIOS">;
   action?: Pick<
     ButtonSolidProps,
-    "label" | "accessibilityLabel" | "onPress" | "testID" | "icon" | "disabled"
+    "label" | "accessibilityLabel" | "onPress" | "testID" | "icon"
   >;
   secondaryAction?: Pick<
     ButtonLinkProps,
-    "label" | "accessibilityLabel" | "onPress" | "testID" | "icon" | "disabled"
+    "label" | "accessibilityLabel" | "onPress" | "testID" | "icon"
   >;
   isHeaderVisible?: boolean;
 }>;

diff --git a/ts/features/itwallet/issuance/screens/ItwIssuanceCredentialAsyncContinuationScreen.tsx b/ts/features/itwallet/issuance/screens/ItwIssuanceCredentialAsyncContinuationScreen.tsx
@@ -1,25 +1,24 @@
-import { useCallback, useState } from "react";
-import * as t from "io-ts";
+import { useFocusEffect } from "@react-navigation/native";
 import * as O from "fp-ts/lib/Option";
 import { pipe } from "fp-ts/lib/function";
-import { useFocusEffect } from "@react-navigation/native";
-import I18n from "../../../../i18n";
+import * as t from "io-ts";
+import { useCallback, useState } from "react";
+import LoadingScreenContent from "../../../../components/screens/LoadingScreenContent";
 import { OperationResultScreenContent } from "../../../../components/screens/OperationResultScreenContent";
+import I18n from "../../../../i18n";
 import {
   IOStackNavigationRouteProps,
   useIONavigation
 } from "../../../../navigation/params/AppParamsList";
 import { useIOSelector } from "../../../../store/hooks";
 import { useOnFirstRender } from "../../../../utils/hooks/useOnFirstRender";
+import { CREDENTIALS_MAP, trackItwHasAlreadyCredential } from "../../analytics";
+import { getCredentialStatus } from "../../common/utils/itwCredentialStatusUtils";
 import { itwCredentialByTypeSelector } from "../../credentials/store/selectors";
-import { ItwParamsList } from "../../navigation/ItwParamsList";
-import { ITW_ROUTES } from "../../navigation/routes";
 import { itwLifecycleIsValidSelector } from "../../lifecycle/store/selectors";
 import { ItwCredentialIssuanceMachineContext } from "../../machine/provider";
-import { getCredentialStatus } from "../../common/utils/itwCredentialStatusUtils";
-import LoadingScreenContent from "../../../../components/screens/LoadingScreenContent";
-import { CREDENTIALS_MAP, trackItwHasAlreadyCredential } from "../../analytics";
-import { isItwEnabledSelector } from "../../common/store/selectors/remoteConfig";
+import { ItwParamsList } from "../../navigation/ItwParamsList";
+import { ITW_ROUTES } from "../../navigation/routes";
 import { ItwIssuanceCredentialTrustIssuerScreen } from "./ItwIssuanceCredentialTrustIssuerScreen";
 
 export type ItwIssuanceCredentialAsyncContinuationNavigationParams = {
@@ -78,7 +77,6 @@ const InnerComponent = ({ credentialType }: { credentialType: string }) => {
     itwCredentialByTypeSelector(credentialType)
   );
   const isWalletValid = useIOSelector(itwLifecycleIsValidSelector);
-  const isWalletEnabled = useIOSelector(isItwEnabledSelector);
 
   const isCredentialValid = pipe(
     credentialOption,
@@ -116,8 +114,7 @@ const InnerComponent = ({ credentialType }: { credentialType: string }) => {
           onPress: () =>
             navigation.replace(ITW_ROUTES.MAIN, {
               screen: ITW_ROUTES.DISCOVERY.INFO
-            }),
-          disabled: !isWalletEnabled
+            })
         }}
         secondaryAction={{
           label: I18n.t(`${ns}.secondaryAction`),
@@ -140,8 +137,7 @@ const InnerComponent = ({ credentialType }: { credentialType: string }) => {
             navigation.replace(ITW_ROUTES.MAIN, {
               screen: ITW_ROUTES.PRESENTATION.CREDENTIAL_DETAIL,
               params: { credentialType }
-            }),
-          disabled: !isWalletEnabled
+            })
         }}
         secondaryAction={{
           label: I18n.t("global.buttons.close"),

diff --git a/ts/features/itwallet/navigation/ItwStackNavigator.tsx b/ts/features/itwallet/navigation/ItwStackNavigator.tsx
@@ -3,6 +3,7 @@ import {
   TransitionPresets
 } from "@react-navigation/stack";
 import { Platform } from "react-native";
+import { ComponentType, useLayoutEffect } from "react";
 import { isGestureEnabled } from "../../../utils/navigation";
 import { ItwAlreadyActiveScreen } from "../discovery/screens/ItwAlreadyActiveScreen";
 import { ItwDiscoveryInfoScreen } from "../discovery/screens/ItwDiscoveryInfoScreen";
@@ -41,6 +42,9 @@ import { ItwPresentationCredentialFiscalCodeModal } from "../presentation/detail
 import { ItwPresentationEidVerificationExpiredScreen } from "../presentation/details/screens/ItwPresentationEidVerificationExpiredScreen";
 import { ItwCredentialTrustmarkScreen } from "../trustmark/screens/ItwCredentialTrustmarkScreen";
 import { ItwOfflineWalletScreen } from "../wallet/screens/ItwOfflineWalletScreen";
+import { isItwEnabledSelector } from "../common/store/selectors/remoteConfig";
+import { ItwGenericErrorContent } from "../common/components/ItwGenericErrorContent";
+import { useIOSelector } from "../../../store/hooks";
 import { ItwParamsList } from "./ItwParamsList";
 import { ITW_ROUTES } from "./routes";
 
@@ -87,15 +91,16 @@ const InnerNavigator = () => {
       {/* DISCOVERY */}
       <Stack.Screen
         name={ITW_ROUTES.DISCOVERY.INFO}
-        component={ItwDiscoveryInfoScreen}
+        component={withItwEnabled(ItwDiscoveryInfoScreen)}
+        options={hiddenHeader}
       />
       <Stack.Screen
         name={ITW_ROUTES.DISCOVERY.IPZS_PRIVACY}
         component={ItwIpzsPrivacyScreen}
       />
       <Stack.Screen
         name={ITW_ROUTES.DISCOVERY.ALREADY_ACTIVE_SCREEN}
-        component={ItwAlreadyActiveScreen}
+        component={withItwEnabled(ItwAlreadyActiveScreen)}
         options={hiddenHeader}
       />
       {/* IDENTIFICATION */}
@@ -192,13 +197,14 @@ const InnerNavigator = () => {
       />
       <Stack.Screen
         name={ITW_ROUTES.ISSUANCE.CREDENTIAL_ASYNC_FLOW_CONTINUATION}
-        component={ItwIssuanceCredentialAsyncContinuationScreen}
+        component={withItwEnabled(ItwIssuanceCredentialAsyncContinuationScreen)}
         options={hiddenHeader}
       />
       {/* CREDENTIAL PRESENTATION */}
       <Stack.Screen
         name={ITW_ROUTES.PRESENTATION.CREDENTIAL_DETAIL}
-        component={ItwPresentationCredentialDetailScreen}
+        component={withItwEnabled(ItwPresentationCredentialDetailScreen)}
+        options={hiddenHeader}
       />
       <Stack.Screen
         name={ITW_ROUTES.PRESENTATION.CREDENTIAL_ATTACHMENT}
@@ -241,3 +247,22 @@ const InnerNavigator = () => {
     </Stack.Navigator>
   );
 };
+
+/**
+ * A higher-order component which renders the screen only if IT Wallet is enabled.
+ * In case IT Wallet is not enabled, it renders an error screen.
+ * @param Screen - The screen to render
+ * @returns The component or the error screen
+ */
+const withItwEnabled =
+  <P extends Record<string, unknown>>(Screen: ComponentType<P>) =>
+  (props: P) => {
+    const isItwEnabled = useIOSelector(isItwEnabledSelector);
+
+    if (!isItwEnabled) {
+      // In case the user lands in this screen and IT Wallet is not enabled,
+      // we should render an error screen.
+      return <ItwGenericErrorContent />;
+    }
+    return <Screen {...props} />;
+  };
diff --git a/ts/features/payments/checkout/screens/WalletPaymentOutcomeScreen.tsx b/ts/features/payments/checkout/screens/WalletPaymentOutcomeScreen.tsx
@@ -163,21 +163,19 @@ const WalletPaymentOutcomeScreen = () => {
     testID: "wallet-payment-outcome-success-button"
   };
 
-  const closeFailureAction: OperationResultScreenContentProps["secondaryAction"] =
-    {
-      label: I18n.t("global.buttons.close"),
-      accessibilityLabel: I18n.t("global.buttons.close"),
-      onPress: handleClose
-    };
+  const closeFailureAction: OperationResultScreenContentProps["action"] = {
+    label: I18n.t("global.buttons.close"),
+    accessibilityLabel: I18n.t("global.buttons.close"),
+    onPress: handleClose
+  };
 
-  const contactSupportAction: OperationResultScreenContentProps["secondaryAction"] =
-    {
-      label: I18n.t("wallet.payment.support.button"),
-      accessibilityLabel: I18n.t("wallet.payment.support.button"),
-      onPress: handleContactSupport
-    };
+  const contactSupportAction: OperationResultScreenContentProps["action"] = {
+    label: I18n.t("wallet.payment.support.button"),
+    accessibilityLabel: I18n.t("wallet.payment.support.button"),
+    onPress: handleContactSupport
+  };
 
-  const onboardPaymentMethodCloseAction: OperationResultScreenContentProps["secondaryAction"] =
+  const onboardPaymentMethodCloseAction: OperationResultScreenContentProps["action"] =
     {
       label: I18n.t(
         "wallet.payment.outcome.PAYMENT_METHODS_NOT_AVAILABLE.secondaryAction"