add error for submit button when no purpose selected

software-mansion-labs · Mar 27, 2024 · e851ee7 · e851ee7
1 parent 7bc1179
commit e851ee7
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 8 deletions.
diff --git a/src/languages/en.ts b/src/languages/en.ts
@@ -1300,6 +1300,7 @@ export default {
         whatsYourName: "What's your name?",
         purpose: {
             title: 'What do you want to do today?',
+            error: 'Please make a selection before continuing',
             [CONST.ONBOARDING_CHOICES.TRACK]: 'Track business spend for taxes',
             [CONST.ONBOARDING_CHOICES.EMPLOYER]: 'Get paid back by my employer',
             [CONST.ONBOARDING_CHOICES.MANAGE_TEAM]: "Manage my team's expenses",

diff --git a/src/languages/es.ts b/src/languages/es.ts
@@ -1302,6 +1302,7 @@ export default {
         whatsYourName: '¿Cómo te llamas?',
         purpose: {
             title: '¿Qué quieres hacer hoy?',
+            error: 'Por favor, haga una selección antes de continuar.',
             [CONST.ONBOARDING_CHOICES.TRACK]: 'Seguimiento fiscal de los gastos de las empresas',
             [CONST.ONBOARDING_CHOICES.EMPLOYER]: 'Cobrar de mi empresa',
             [CONST.ONBOARDING_CHOICES.MANAGE_TEAM]: 'Gestionar los gastos de mi equipo',

diff --git a/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx b/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx
@@ -1,7 +1,6 @@
 import React, {useCallback, useMemo, useState} from 'react';
 import {View} from 'react-native';
 import {ScrollView} from 'react-native-gesture-handler';
-import Button from '@components/Button';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
@@ -20,6 +19,7 @@ import variables from '@styles/variables';
 import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
+import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton';
 
 type ValuesType<T> = T[keyof T];
 type SelectedPurposeType = ValuesType<typeof CONST.ONBOARDING_CHOICES> | undefined;
@@ -47,8 +47,11 @@ function BaseOnboardingPurpose({shouldUseNativeStyles, shouldEnableMaxHeight}: B
     const {shouldUseNarrowLayout} = useOnboardingLayout();
     const [selectedPurpose, setSelectedPurpose] = useState<SelectedPurposeType>(undefined);
     const {isSmallScreenWidth, windowHeight} = useWindowDimensions();
+    const [error, setError] = useState(false);
     const theme = useTheme();
 
+    const errorMessage = error ? 'onboarding.purpose.error' :  '';
+
     const maxHeight = shouldEnableMaxHeight ? windowHeight : undefined;
 
     const paddingHorizontal = shouldUseNarrowLayout ? styles.ph8 : styles.ph5;
@@ -108,6 +111,7 @@ function BaseOnboardingPurpose({shouldUseNativeStyles, shouldEnableMaxHeight}: B
             shouldShowRightComponent: isSelected,
             onPress: () => {
                 setSelectedPurpose(choice);
+                setError(false);
             },
         };
     });
@@ -134,13 +138,21 @@ function BaseOnboardingPurpose({shouldUseNativeStyles, shouldEnableMaxHeight}: B
                             />
                         </View>
                     </ScrollView>
-                    <Button
-                        large
-                        success
-                        onPress={completeEngagement}
-                        isDisabled={!selectedPurpose}
-                        text={translate('common.continue')}
-                        style={[styles.mb5, paddingHorizontal]}
+                    <FormAlertWithSubmitButton
+                        buttonText={translate('common.continue')}
+                        onSubmit={() => {
+                            if(!selectedPurpose) {
+                                setError(true);
+                                return;
+                            }
+
+                            // API call for AcceptSpontanaTerms when backend gets implemented
+                            setError(false);
+                            completeEngagement();
+                        }}
+                        message={errorMessage}
+                        isAlertVisible={error || Boolean(errorMessage)}
+                        containerStyles={[styles.w100, styles.mb5, styles.mh0, paddingHorizontal]}
                     />
                 </View>
             )}