Refactor subscription size page to use useSubPage hook

src/CONST/index.ts

@@ -2724,6 +2724,14 @@ const CONST = {
             CONFIRM: 'confirm',
         },
     },
+
+    SUBSCRIPTION_SIZE: {
+        PAGE_NAME: {
+            SIZE: 'size',
+            CONFIRM: 'confirm',
+        },
+    },
+
     MISSING_PERSONAL_DETAILS_INDEXES: {
         MAPPING: {
             LEGAL_NAME: 0,

src/ROUTES.ts

@@ -236,8 +236,14 @@ const ROUTES = {
         getRoute: (backTo?: string) => getUrlWithBackToParam('settings/subscription', backTo),
     },
     SETTINGS_SUBSCRIPTION_SIZE: {
-        route: 'settings/subscription/subscription-size',
-        getRoute: (canChangeSize: 0 | 1) => `settings/subscription/subscription-size?canChangeSize=${canChangeSize as number}` as const,
+        route: 'settings/subscription/subscription-size/:subPage?',
+        getRoute: (canChangeSize?: 0 | 1, subPage?: string) => {
+            const baseRoute = 'settings/subscription/subscription-size';
+            const subPageParam = subPage ? `/${subPage}` : '';
+            const canChangeSizeParam = canChangeSize !== undefined ? `?canChangeSize=${canChangeSize as number}` : '';
+
+            return `${baseRoute}${subPageParam}${canChangeSizeParam}` as const;
+        },
     },
     SETTINGS_SUBSCRIPTION_SETTINGS_DETAILS: 'settings/subscription/details',
     SETTINGS_SUBSCRIPTION_ADD_PAYMENT_CARD: 'settings/subscription/add-payment-card',

src/libs/Navigation/types.ts

@@ -612,6 +612,8 @@ type SettingsNavigatorParamList = {
     };
     [SCREENS.SETTINGS.SUBSCRIPTION.SIZE]: {
         canChangeSize: 0 | 1;
+        subPage?: string;
+        action?: 'edit';
     };
     [SCREENS.SETTINGS.SUBSCRIPTION.SETTINGS_DETAILS]: undefined;
     [SCREENS.SETTINGS.SUBSCRIPTION.ADD_PAYMENT_CARD]: undefined;

src/pages/settings/Subscription/SubscriptionSize/index.tsx

@@ -6,8 +6,7 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import usePrivateSubscription from '@hooks/usePrivateSubscription';
-import useSubStep from '@hooks/useSubStep';
-import type {SubStepProps} from '@hooks/useSubStep/types';
+import useSubPage from '@hooks/useSubPage';
 import {clearDraftValues} from '@libs/actions/FormActions';
 import Navigation from '@libs/Navigation/Navigation';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
@@ -17,15 +16,19 @@ import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
 import {updateSubscriptionSize} from '@userActions/Subscription';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
 import INPUT_IDS from '@src/types/form/SubscriptionSizeForm';
 import Confirmation from './substeps/Confirmation';
 import Size from './substeps/Size';
 
-const bodyContent: Array<React.ComponentType<SubStepProps>> = [Size, Confirmation];
-
 type SubscriptionSizePageProps = PlatformStackScreenProps<SettingsNavigatorParamList, typeof SCREENS.SETTINGS.SUBSCRIPTION.SIZE>;
 
+const pages = [
+    {pageName: CONST.SUBSCRIPTION_SIZE.PAGE_NAME.SIZE, component: Size},
+    {pageName: CONST.SUBSCRIPTION_SIZE.PAGE_NAME.CONFIRM, component: Confirmation},
+];
+
 function SubscriptionSizePage({route}: SubscriptionSizePageProps) {
     const privateSubscription = usePrivateSubscription();
     const [subscriptionSizeFormDraft] = useOnyx(ONYXKEYS.FORMS.SUBSCRIPTION_SIZE_FORM_DRAFT, {canBeMissing: false});
@@ -35,14 +38,19 @@ function SubscriptionSizePage({route}: SubscriptionSizePageProps) {
 
     const onFinished = () => {
         updateSubscriptionSize(subscriptionSizeFormDraft ? Number(subscriptionSizeFormDraft[INPUT_IDS.SUBSCRIPTION_SIZE]) : 0, privateSubscription?.userCount ?? 0);
-        Navigation.goBack();
+        Navigation.goBack(ROUTES.SETTINGS_SUBSCRIPTION_SETTINGS_DETAILS);
     };
 
-    const {componentToRender: SubStep, screenIndex, nextScreen, prevScreen, moveTo} = useSubStep({bodyContent, startFrom, onFinished});
+    const {CurrentPage, pageIndex, prevPage, nextPage, moveTo, isRedirecting} = useSubPage({
+        pages,
+        onFinished,
+        startFrom,
+        buildRoute: (pageName) => ROUTES.SETTINGS_SUBSCRIPTION_SIZE.getRoute(route.params?.canChangeSize, pageName),
+    });
 
     const onBackButtonPress = () => {
-        if (screenIndex !== 0 && startFrom === 0) {
-            prevScreen();
+        if (pageIndex !== 0 && startFrom === 0) {
+            prevPage();
             return;
         }
 
@@ -60,7 +68,7 @@ function SubscriptionSizePage({route}: SubscriptionSizePageProps) {
         return <NotFoundPage />;
     }
 
-    if (!privateSubscription) {
+    if (isRedirecting || !privateSubscription) {
         return <FullScreenLoadingIndicator />;
     }
 
@@ -77,9 +85,9 @@ function SubscriptionSizePage({route}: SubscriptionSizePageProps) {
                     title={translate('subscription.subscriptionSize.title')}
                     onBackButtonPress={onBackButtonPress}
                 />
-                <SubStep
+                <CurrentPage
                     isEditing={canChangeSubscriptionSize}
-                    onNext={nextScreen}
+                    onNext={nextPage}
                     onMove={moveTo}
                 />
             </DelegateNoAccessWrapper>