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

…5798)

## ⚠️ This PR depends on
pagopa/io-services-metadata#782 ⚠️

## Short description
This PR adds the remote feature flag to the new payment section. It will
be visible only when the remote or local FF is enabled. (The local
feature flag is considered only if the remote one is disabled)

## List of changes proposed in this pull request
- Added a new `isNewPaymentSectionEnabledSelector` selector that takes
into account remote configuration
- Replaced the previous `isNewWalletSectionEnabledSelector` with this
new one but the previous one is still available in order to show the
local feature flag.

## How to test
- Checkout this PR: pagopa/io-dev-api-server#383
- Try to change the `enabled` attribute from the `newPaymentSection`
into the `backend.ts` file on the dev-server

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;