Merge pull request Expensify#43122 from MrMuzyk/feat/subscription-siz…

…e-action feat: subscription size action
shrabankr · Jun 11, 2024 · 1470f6e · 1470f6e
2 parents fb276f4 + 46731c6
commit 1470f6e
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 22 deletions.
diff --git a/src/languages/en.ts b/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',

diff --git a/src/languages/es.ts b/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',

diff --git a/src/pages/settings/Subscription/SubscriptionDetails/index.tsx b/src/pages/settings/Subscription/SubscriptionDetails/index.tsx
@@ -12,9 +12,11 @@ import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useThemeIllustrations from '@hooks/useThemeIllustrations';
 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>;
 
@@ -45,33 +47,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

diff --git a/src/pages/settings/Subscription/SubscriptionSize/substeps/Size.tsx b/src/pages/settings/Subscription/SubscriptionSize/substeps/Size.tsx
@@ -4,6 +4,7 @@ import FormProvider from '@components/Form/FormProvider';
 import InputWrapper from '@components/Form/InputWrapper';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
+import useAutoFocusInput from '@hooks/useAutoFocusInput';
 import useLocalize from '@hooks/useLocalize';
 import type {SubStepProps} from '@hooks/useSubStep/types';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -17,10 +18,11 @@ type SizeProps = SubStepProps;
 function Size({onNext}: SizeProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
+    const {inputCallbackRef} = useAutoFocusInput();
 
     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 (
@@ -35,6 +37,7 @@ function Size({onNext}: SizeProps) {
                 <Text style={[styles.textNormalThemeText, styles.mb5]}>{translate('subscription.subscriptionSize.yourSize')}</Text>
                 <InputWrapper
                     InputComponent={TextInput}
+                    ref={inputCallbackRef}
                     inputID={INPUT_IDS.SUBSCRIPTION_SIZE}
                     label={translate('subscription.subscriptionSize.subscriptionSize')}
                     aria-label={translate('subscription.subscriptionSize.subscriptionSize')}

diff --git a/src/styles/index.ts b/src/styles/index.ts
@@ -2819,7 +2819,7 @@ const styles = (theme: ThemeColors) =>
         },
 
         sectionSelectCircle: {
-            backgroundColor: colors.productDark200,
+            backgroundColor: theme.highlightBG,
         },
 
         qrShareSection: {