From a3854c1010cb98d05b220de566b0f9b5817e3f30 Mon Sep 17 00:00:00 2001 From: Alessandro Izzo Date: Wed, 29 May 2024 12:43:29 +0200 Subject: [PATCH] chore: [IOBP-659] Add remote feature flag to the new payment section (#5798) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## ⚠️ This PR depends on https://github.com/pagopa/io-services-metadata/pull/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: https://github.com/pagopa/io-dev-api-server/pull/383 - Try to change the `enabled` attribute from the `newPaymentSection` into the `backend.ts` file on the dev-server --- package.json | 2 +- .../checkout/hooks/usePagoPaPayment.ts | 4 ++-- ts/navigation/AppStackNavigator.tsx | 6 +++--- ts/navigation/AuthenticatedStackNavigator.tsx | 10 ++++----- ts/navigation/TabNavigator.tsx | 6 +++--- .../components/HeaderFirstLevelHandler.tsx | 4 ++-- ts/store/reducers/__mock__/backendStatus.ts | 14 +++++++++++++ ts/store/reducers/backendStatus.ts | 21 ++++++++++++++++++- 8 files changed, 49 insertions(+), 18 deletions(-) diff --git a/package.json b/package.json index 5c3bfb44986..f9f7fcb3cdf 100644 --- a/package.json +++ b/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", diff --git a/ts/features/payments/checkout/hooks/usePagoPaPayment.ts b/ts/features/payments/checkout/hooks/usePagoPaPayment.ts index e3d474958a1..81e92d44cda 100644 --- a/ts/features/payments/checkout/hooks/usePagoPaPayment.ts +++ b/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; @@ -53,7 +53,7 @@ const usePagoPaPayment = (): UsePagoPaPayment => { // Checks if the new wallet section is enabled const isNewWalletSectionEnabled = useIOSelector( - isNewWalletSectionEnabledSelector + isNewPaymentSectionEnabledSelector ); /** diff --git a/ts/navigation/AppStackNavigator.tsx b/ts/navigation/AppStackNavigator.tsx index eaa4831004e..95254755f17 100644 --- a/ts/navigation/AppStackNavigator.tsx +++ b/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 diff --git a/ts/navigation/AuthenticatedStackNavigator.tsx b/ts/navigation/AuthenticatedStackNavigator.tsx index 67ac73d7646..885c0a702e1 100644 --- a/ts/navigation/AuthenticatedStackNavigator.tsx +++ b/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); diff --git a/ts/navigation/TabNavigator.tsx b/ts/navigation/TabNavigator.tsx index e189b66d710..d14eeff4660 100644 --- a/ts/navigation/TabNavigator.tsx +++ b/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 diff --git a/ts/navigation/components/HeaderFirstLevelHandler.tsx b/ts/navigation/components/HeaderFirstLevelHandler.tsx index 2b4619e662a..92d7c591c4a 100644 --- a/ts/navigation/components/HeaderFirstLevelHandler.tsx +++ b/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; type TabRoutes = keyof MainTabParamsList; @@ -72,7 +72,7 @@ export const HeaderFirstLevelHandler = ({ currentRouteName }: Props) => { const dispatch = useIODispatch(); const isNewWalletSectionEnabled = useIOSelector( - isNewWalletSectionEnabledSelector + isNewPaymentSectionEnabledSelector ); const requestParams = useMemo( diff --git a/ts/store/reducers/__mock__/backendStatus.ts b/ts/store/reducers/__mock__/backendStatus.ts index e04892d3701..6383e066c1b 100644 --- a/ts/store/reducers/__mock__/backendStatus.ts +++ b/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: { diff --git a/ts/store/reducers/backendStatus.ts b/ts/store/reducers/backendStatus.ts index b3ee4527ea0..3ef53b1b170 100644 --- a/ts/store/reducers/backendStatus.ts +++ b/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;