feat: subscription size action

src/languages/en.ts

@@ -3266,7 +3266,7 @@ export default {
             eachMonth:
                 'Each month, your subscription covers up to the number of active members set above. Any time you increase your subscription size, you’ll start a new 12-month subscription at that new size.',
             note: 'Note: An active member is anyone who has created, edited, submitted, approved, reimbursed, or exported expense data tied to your company workspace.',
-            confirmDetails: 'Confirm your new annual subscription details',
+            confirmDetails: 'Confirm your new annual subscription details:',
             subscriptionSize: 'Subscription size',
             activeMembers: ({size}) => `${size} active members/month`,
             subscriptionRenews: 'Subscription renews',

src/languages/es.ts

@@ -3773,7 +3773,7 @@ export default {
             eachMonth:
                 'Cada mes, tu suscripción cubre hasta el número de miembros activos establecido anteriormente. Cada vez que aumentes el tamaño de tu suscripción, iniciarás una nueva suscripción de 12 meses con ese nuevo tamaño.',
             note: 'Nota: Un miembro activo es cualquiera que haya creado, editado, enviado, aprobado, reembolsado, o exportado datos de gastos vinculados al espacio de trabajo de tu empresa.',
-            confirmDetails: 'Confirma los datos de tu nueva suscripción anual',
+            confirmDetails: 'Confirma los datos de tu nueva suscripción anual:',
             subscriptionSize: 'Tamaño de suscripción',
             activeMembers: ({size}) => `${size} miembros activos/mes`,
             subscriptionRenews: 'Renovación de la suscripción',

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

@@ -11,9 +11,11 @@ import Section from '@components/Section';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
+import Navigation from '@libs/Navigation/Navigation';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
 
 type SubscriptionVariant = ValueOf<typeof CONST.SUBSCRIPTION.TYPE>;
 
@@ -44,33 +46,30 @@ function SubscriptionDetails() {
         setSelectedOption(option);
     };
 
-    // This section is only shown when the subscription is annual
-    // An onPress action is going to be assigned to these buttons in phase 2
-    let subscriptionSizeSection: React.JSX.Element | null = null;
+    const onSubscriptionSizePress = () => {
+        Navigation.navigate(ROUTES.SETTINGS_SUBSCRIPTION_SIZE);
+    };
 
-    if (privateSubscription?.type === CONST.SUBSCRIPTION.TYPE.ANNUAL) {
-        subscriptionSizeSection = privateSubscription?.userCount ? (
-            <MenuItemWithTopDescription
-                description={translate('subscription.details.subscriptionSize')}
-                title={`${privateSubscription?.userCount}`}
-                wrapperStyle={styles.sectionMenuItemTopDescription}
-                style={styles.mt5}
-            />
-        ) : (
+    // This section is only shown when the subscription is annual
+    const subscriptionSizeSection: React.JSX.Element | null =
+        selectedOption === CONST.SUBSCRIPTION.TYPE.ANNUAL ? (
             <>
                 <MenuItemWithTopDescription
                     description={translate('subscription.details.subscriptionSize')}
                     shouldShowRightIcon
+                    onPress={onSubscriptionSizePress}
                     wrapperStyle={styles.sectionMenuItemTopDescription}
                     style={styles.mt5}
+                    title={`${privateSubscription?.userCount ?? ''}`}
                 />
-                <Text style={styles.mt2}>
-                    <Text style={styles.h4}>{translate('subscription.details.headsUpTitle')}</Text>
-                    <Text style={styles.textLabelSupporting}>{translate('subscription.details.headsUpBody')}</Text>
-                </Text>
+                {!privateSubscription?.userCount && (
+                    <Text style={styles.mt2}>
+                        <Text style={styles.h4}>{translate('subscription.details.headsUpTitle')}</Text>
+                        <Text style={styles.textLabelSupporting}>{translate('subscription.details.headsUpBody')}</Text>
+                    </Text>
+                )}
             </>
-        );
-    }
+        ) : null;
 
     return (
         <Section

src/pages/settings/Subscription/SubscriptionSize/substeps/Size.tsx

@@ -20,7 +20,7 @@ function Size({onNext}: SizeProps) {
 
     const defaultValues = {
         // TODO this is temporary and default value will be replaced in next phase once data in ONYX is ready
-        [INPUT_IDS.SUBSCRIPTION_SIZE]: '0',
+        [INPUT_IDS.SUBSCRIPTION_SIZE]: '',
     };
 
     return (

src/styles/index.ts

@@ -2819,7 +2819,7 @@ const styles = (theme: ThemeColors) =>
         },
 
         sectionSelectCircle: {
-            backgroundColor: colors.productDark200,
+            backgroundColor: theme.highlightBG,
         },
 
         qrShareSection: {