chore: [IOBP-659] Add remote feature flag to the new payment section

package.json

@@ -3,7 +3,7 @@
   "version": "2.61.0-rc.0",
   "io_backend_api": "https://raw.githubusercontent.com/pagopa/io-backend/v13.32.1-RELEASE/api_backend.yaml",
   "io_public_api": "https://raw.githubusercontent.com/pagopa/io-backend/v13.32.1-RELEASE/api_public.yaml",
-  "io_content_specs": "https://raw.githubusercontent.com/pagopa/io-services-metadata/1.0.31/definitions.yml",
+  "io_content_specs": "https://raw.githubusercontent.com/pagopa/io-services-metadata/1.0.32/definitions.yml",
   "io_cgn_specs": "https://raw.githubusercontent.com/pagopa/io-backend/v13.32.1-RELEASE/api_cgn.yaml",
   "io_cgn_merchants_specs": "https://raw.githubusercontent.com/pagopa/io-backend/v13.29.2-RELEASE/api_cgn_operator_search.yaml",
   "api_fci": "https://raw.githubusercontent.com/pagopa/io-backend/v13.32.1-RELEASE/api_io_sign.yaml",

ts/features/payments/checkout/hooks/usePagoPaPayment.ts

@@ -16,7 +16,7 @@ import {
   PaymentInitStateParams,
   initPaymentStateAction
 } from "../store/actions/orchestration";
-import { isNewWalletSectionEnabledSelector } from "../../../../store/reducers/persistedPreferences";
+import { isNewPaymentSectionEnabledSelector } from "../../../../store/reducers/backendStatus";
 
 type PagoPaPaymentParams = Omit<PaymentInitStateParams, "startRoute">;
 
@@ -53,7 +53,7 @@ const usePagoPaPayment = (): UsePagoPaPayment => {
 
   // Checks if the new wallet section is enabled
   const isNewWalletSectionEnabled = useIOSelector(
-    isNewWalletSectionEnabledSelector
+    isNewPaymentSectionEnabledSelector
   );
 
   /**

ts/navigation/AppStackNavigator.tsx

@@ -23,9 +23,9 @@ import { useIODispatch, useIOSelector } from "../store/hooks";
 import { trackScreen } from "../store/middlewares/navigation";
 import {
   isCGNEnabledSelector,
-  isFIMSEnabledSelector
+  isFIMSEnabledSelector,
+  isNewPaymentSectionEnabledSelector
 } from "../store/reducers/backendStatus";
-import { isNewWalletSectionEnabledSelector } from "../store/reducers/persistedPreferences";
 import { StartupStatusEnum, isStartupLoaded } from "../store/reducers/startup";
 import {
   IONavigationDarkTheme,
@@ -87,7 +87,7 @@ const InnerNavigationContainer = (props: { children: React.ReactElement }) => {
   const cgnEnabled = useIOSelector(isCGNEnabledSelector);
   const isFimsEnabled = useIOSelector(isFIMSEnabledSelector) && fimsEnabled;
   const isNewWalletSectionEnabled = useIOSelector(
-    isNewWalletSectionEnabledSelector
+    isNewPaymentSectionEnabledSelector
   );
 
   // Dark/Light Mode

ts/navigation/AuthenticatedStackNavigator.tsx

@@ -70,12 +70,10 @@ import {
   isCGNEnabledSelector,
   isFciEnabledSelector,
   isFIMSEnabledSelector,
-  isIdPayEnabledSelector
+  isIdPayEnabledSelector,
+  isNewPaymentSectionEnabledSelector
 } from "../store/reducers/backendStatus";
-import {
-  isItWalletTestEnabledSelector,
-  isNewWalletSectionEnabledSelector
-} from "../store/reducers/persistedPreferences";
+import { isItWalletTestEnabledSelector } from "../store/reducers/persistedPreferences";
 import { isGestureEnabled } from "../utils/navigation";
 import { ItwStackNavigator } from "../features/itwallet/navigation/ItwStackNavigator";
 import { ITW_ROUTES } from "../features/itwallet/navigation/routes";
@@ -102,7 +100,7 @@ const AuthenticatedStackNavigator = () => {
   const isFciEnabled = useIOSelector(isFciEnabledSelector);
   const isIdPayEnabled = useIOSelector(isIdPayEnabledSelector);
   const isNewWalletSectionEnabled = useIOSelector(
-    isNewWalletSectionEnabledSelector
+    isNewPaymentSectionEnabledSelector
   );
   const isItWalletEnabled = useIOSelector(isItWalletTestEnabledSelector);
 

ts/navigation/TabNavigator.tsx

@@ -18,9 +18,9 @@ import WalletHomeScreen from "../screens/wallet/WalletHomeScreen";
 import { useIOSelector } from "../store/hooks";
 import {
   isDesignSystemEnabledSelector,
-  isNewHomeSectionEnabledSelector,
-  isNewWalletSectionEnabledSelector
+  isNewHomeSectionEnabledSelector
 } from "../store/reducers/persistedPreferences";
+import { isNewPaymentSectionEnabledSelector } from "../store/reducers/backendStatus";
 import { StartupStatusEnum, isStartupLoaded } from "../store/reducers/startup";
 import variables from "../theme/variables";
 import { MESSAGES_ROUTES } from "../features/messages/navigation/routes";
@@ -61,7 +61,7 @@ export const MainTabNavigator = () => {
   const startupLoaded = useIOSelector(isStartupLoaded);
   const isDesignSystemEnabled = useIOSelector(isDesignSystemEnabledSelector);
   const isNewWalletSectionEnabled = useIOSelector(
-    isNewWalletSectionEnabledSelector
+    isNewPaymentSectionEnabledSelector
   );
   const isNewHomeSectionEnabled = useIOSelector(
     isNewHomeSectionEnabledSelector

ts/navigation/components/HeaderFirstLevelHandler.tsx

@@ -12,10 +12,10 @@ import I18n from "../../i18n";
 import { navigateToServicePreferenceScreen } from "../../store/actions/navigation";
 import { searchMessagesEnabled } from "../../store/actions/search";
 import { useIODispatch, useIOSelector } from "../../store/hooks";
-import { isNewWalletSectionEnabledSelector } from "../../store/reducers/persistedPreferences";
 import { SERVICES_ROUTES } from "../../features/services/common/navigation/routes";
 import { MainTabParamsList } from "../params/MainTabParamsList";
 import ROUTES from "../routes";
+import { isNewPaymentSectionEnabledSelector } from "../../store/reducers/backendStatus";
 
 type HeaderFirstLevelProps = ComponentProps<typeof HeaderFirstLevel>;
 type TabRoutes = keyof MainTabParamsList;
@@ -72,7 +72,7 @@ export const HeaderFirstLevelHandler = ({ currentRouteName }: Props) => {
   const dispatch = useIODispatch();
 
   const isNewWalletSectionEnabled = useIOSelector(
-    isNewWalletSectionEnabledSelector
+    isNewPaymentSectionEnabledSelector
   );
 
   const requestParams = useMemo(

ts/store/reducers/__mock__/backendStatus.ts

@@ -281,6 +281,13 @@ export const baseRawBackendStatus: BackendStatus = {
         ios: "0.0.0.0"
       }
     },
+    newPaymentSection: {
+      enabled: false,
+      min_app_version: {
+        android: "0.0.0.0",
+        ios: "0.0.0.0"
+      }
+    },
     lollipop: {
       enabled: false,
       min_app_version: {
@@ -373,6 +380,13 @@ export const baseBackendConfig: Config = {
       ios: "0.0.0.0"
     }
   },
+  newPaymentSection: {
+    enabled: false,
+    min_app_version: {
+      android: "0.0.0.0",
+      ios: "0.0.0.0"
+    }
+  },
   lollipop: {
     enabled: false,
     min_app_version: {

ts/store/reducers/backendStatus.ts

@@ -31,7 +31,10 @@ import { isStringNullyOrEmpty } from "../../utils/strings";
 import { backendStatusLoadSuccess } from "../actions/backendStatus";
 import { Action } from "../actions/types";
 
-import { isIdPayTestEnabledSelector } from "./persistedPreferences";
+import {
+  isIdPayTestEnabledSelector,
+  isNewWalletSectionEnabledSelector
+} from "./persistedPreferences";
 import { GlobalState } from "./types";
 
 export type SectionStatusKey = keyof Sections;
@@ -407,6 +410,22 @@ export const isIdPayEnabledSelector = createSelector(
     )
 );
 
+/**
+ * Return the remote config about the new payment section enabled/disabled
+ * If the local feature flag is enabled, the remote config is ignored
+ */
+export const isNewPaymentSectionEnabledSelector = createSelector(
+  backendStatusSelector,
+  isNewWalletSectionEnabledSelector,
+  (backendStatus, isNeWalletSectionEnabled): boolean =>
+    isNeWalletSectionEnabled ||
+    pipe(
+      backendStatus,
+      O.map(bs => bs.config.newPaymentSection?.enabled),
+      O.getOrElse(() => false)
+    )
+);
+
 // systems could be consider dead when we have no updates for at least DEAD_COUNTER_THRESHOLD times
 export const DEAD_COUNTER_THRESHOLD = 2;