Merge pull request #47091 from cretadn22/new-design-in-selection-page

Expensify · Aug 14, 2024 · f2dad3a · f2dad3a
2 parents a14668a + 48a3dae
commit f2dad3a
Show file tree

Hide file tree

Showing 7 changed files with 76 additions and 18 deletions.
diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx
@@ -538,7 +538,11 @@ function BaseSelectionList<TItem extends ListItem>(
 
     useEffect(() => {
         // Avoid changing focus if the textInputValue remains unchanged.
-        if ((prevTextInputValue === textInputValue && flattenedSections.selectedOptions.length === prevSelectedOptionsLength) || flattenedSections.allOptions.length === 0) {
+        if (
+            (prevTextInputValue === textInputValue && flattenedSections.selectedOptions.length === prevSelectedOptionsLength) ||
+            flattenedSections.allOptions.length === 0 ||
+            shouldUpdateFocusedIndex
+        ) {
             return;
         }
         // Remove the focus if the search input is empty or selected options length is changed (and allOptions length remains the same)
@@ -559,6 +563,7 @@ function BaseSelectionList<TItem extends ListItem>(
         updateAndScrollToFocusedIndex,
         prevSelectedOptionsLength,
         prevAllOptionsLength,
+        shouldUpdateFocusedIndex,
     ]);
 
     useEffect(

diff --git a/src/languages/en.ts b/src/languages/en.ts
@@ -266,6 +266,7 @@ export default {
             enterDate: 'Enter a date.',
             invalidTimeRange: 'Please enter a time using the 12-hour clock format (e.g., 2:30 PM).',
             pleaseCompleteForm: 'Please complete the form above to continue.',
+            pleaseSelectOne: 'Please select an option above.',
         },
         comma: 'comma',
         semicolon: 'semicolon',

diff --git a/src/languages/es.ts b/src/languages/es.ts
@@ -256,6 +256,7 @@ export default {
             enterDate: 'Introduce una fecha.',
             invalidTimeRange: 'Por favor, introduce una hora entre 1 y 12 (por ejemplo, 2:30 PM).',
             pleaseCompleteForm: 'Por favor complete el formulario de arriba para continuar.',
+            pleaseSelectOne: 'Seleccione una de las opciones.',
         },
         comma: 'la coma',
         semicolon: 'el punto y coma',

diff --git a/...ounting/netsuite/import/NetSuiteImportCustomFieldNew/NetSuiteCustomFieldMappingPicker.tsx b/...ounting/netsuite/import/NetSuiteImportCustomFieldNew/NetSuiteCustomFieldMappingPicker.tsx
@@ -1,19 +1,26 @@
 import React from 'react';
+import {View} from 'react-native';
+import FormHelpMessage from '@components/FormHelpMessage';
 import SelectionList from '@components/SelectionList';
 import RadioListItem from '@components/SelectionList/RadioListItem';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 
 type NetSuiteCustomListPickerProps = {
     /** Selected mapping value */
     value?: string;
 
+    /** Text to display on error message */
+    errorText?: string;
+
     /** Callback to fire when mapping is selected */
     onInputChange?: (value: string) => void;
 };
 
-function NetSuiteCustomFieldMappingPicker({value, onInputChange}: NetSuiteCustomListPickerProps) {
+function NetSuiteCustomFieldMappingPicker({value, errorText, onInputChange}: NetSuiteCustomListPickerProps) {
     const {translate} = useLocalize();
+    const styles = useThemeStyles();
 
     const options = [CONST.INTEGRATION_ENTITY_MAP_TYPES.TAG, CONST.INTEGRATION_ENTITY_MAP_TYPES.REPORT_FIELD];
 
@@ -27,14 +34,26 @@ function NetSuiteCustomFieldMappingPicker({value, onInputChange}: NetSuiteCustom
         })) ?? [];
 
     return (
-        <SelectionList
-            sections={[{data: selectionData}]}
-            onSelectRow={(selected) => {
-                onInputChange?.(selected.value);
-            }}
-            ListItem={RadioListItem}
-            initiallyFocusedOptionKey={value ?? CONST.INTEGRATION_ENTITY_MAP_TYPES.TAG}
-        />
+        <>
+            <SelectionList
+                sections={[{data: selectionData}]}
+                onSelectRow={(selected) => {
+                    onInputChange?.(selected.value);
+                }}
+                ListItem={RadioListItem}
+                initiallyFocusedOptionKey={value ?? CONST.INTEGRATION_ENTITY_MAP_TYPES.TAG}
+                shouldSingleExecuteRowSelect
+                shouldUpdateFocusedIndex
+            />
+            {!!errorText && (
+                <View style={styles.ph5}>
+                    <FormHelpMessage
+                        isError={!!errorText}
+                        message={errorText}
+                    />
+                </View>
+            )}
+        </>
     );
 }
 

diff --git a/...nting/netsuite/import/NetSuiteImportCustomFieldNew/NetSuiteImportAddCustomSegmentPage.tsx b/...nting/netsuite/import/NetSuiteImportCustomFieldNew/NetSuiteImportAddCustomSegmentPage.tsx
@@ -122,7 +122,10 @@ function NetSuiteImportAddCustomSegmentPage({policy}: WithPolicyConnectionsProps
                     }
                     return errors;
                 case CONST.NETSUITE_CUSTOM_FIELD_SUBSTEP_INDEXES.CUSTOM_SEGMENTS.MAPPING:
-                    return ValidationUtils.getFieldRequiredErrors(values, [INPUT_IDS.MAPPING]);
+                    if (!ValidationUtils.isRequiredFulfilled(values[INPUT_IDS.MAPPING])) {
+                        errors[INPUT_IDS.MAPPING] = translate('common.error.pleaseSelectOne');
+                    }
+                    return errors;
                 default:
                     return errors;
             }
@@ -206,6 +209,7 @@ function NetSuiteImportAddCustomSegmentPage({policy}: WithPolicyConnectionsProps
                         enabledWhenOffline
                         isSubmitDisabled={!!config?.syncOptions?.pendingFields?.customSegments}
                         submitFlexEnabled={submitFlexAllowed}
+                        shouldHideFixErrorsAlert={screenIndex === CONST.NETSUITE_CUSTOM_FIELD_SUBSTEP_INDEXES.CUSTOM_SEGMENTS.MAPPING}
                     >
                         {renderSubStepContent}
                     </FormProvider>

diff --git a/...ccounting/netsuite/import/NetSuiteImportCustomFieldNew/substeps/ChooseSegmentTypeStep.tsx b/...ccounting/netsuite/import/NetSuiteImportCustomFieldNew/substeps/ChooseSegmentTypeStep.tsx
@@ -1,4 +1,6 @@
-import React from 'react';
+import React, {useState} from 'react';
+import {View} from 'react-native';
+import FormHelpMessage from '@components/FormHelpMessage';
 import SelectionList from '@components/SelectionList';
 import RadioListItem from '@components/SelectionList/RadioListItem';
 import Text from '@components/Text';
@@ -10,22 +12,33 @@ import CONST from '@src/CONST';
 function ChooseSegmentTypeStep({onNext, customSegmentType, setCustomSegmentType}: CustomFieldSubStepWithPolicy) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
+    const [selectedType, setSelectedType] = useState(customSegmentType);
+    const [isError, setIsError] = useState(false);
 
     const selectionData = [
         {
             text: translate(`workspace.netsuite.import.importCustomFields.customSegments.addForm.segmentTitle`),
             keyForList: CONST.NETSUITE_CUSTOM_RECORD_TYPES.CUSTOM_SEGMENT,
-            isSelected: customSegmentType === CONST.NETSUITE_CUSTOM_RECORD_TYPES.CUSTOM_SEGMENT,
+            isSelected: selectedType === CONST.NETSUITE_CUSTOM_RECORD_TYPES.CUSTOM_SEGMENT,
             value: CONST.NETSUITE_CUSTOM_RECORD_TYPES.CUSTOM_SEGMENT,
         },
         {
             text: translate(`workspace.netsuite.import.importCustomFields.customSegments.addForm.recordTitle`),
             keyForList: CONST.NETSUITE_CUSTOM_RECORD_TYPES.CUSTOM_RECORD,
-            isSelected: customSegmentType === CONST.NETSUITE_CUSTOM_RECORD_TYPES.CUSTOM_RECORD,
+            isSelected: selectedType === CONST.NETSUITE_CUSTOM_RECORD_TYPES.CUSTOM_RECORD,
             value: CONST.NETSUITE_CUSTOM_RECORD_TYPES.CUSTOM_RECORD,
         },
     ];
 
+    const onConfirm = () => {
+        if (!selectedType) {
+            setIsError(true);
+        } else {
+            setCustomSegmentType?.(selectedType);
+            onNext();
+        }
+    };
+
     return (
         <>
             <Text style={[styles.ph5, styles.textHeadlineLineHeightXXL, styles.mb3]}>
@@ -35,12 +48,26 @@ function ChooseSegmentTypeStep({onNext, customSegmentType, setCustomSegmentType}
             <SelectionList
                 sections={[{data: selectionData}]}
                 ListItem={RadioListItem}
-                initiallyFocusedOptionKey={customSegmentType}
+                initiallyFocusedOptionKey={selectedType}
                 onSelectRow={(selected) => {
-                    setCustomSegmentType?.(selected.value);
-                    onNext();
+                    setSelectedType(selected.value);
+                    setIsError(false);
                 }}
-            />
+                shouldSingleExecuteRowSelect
+                shouldUpdateFocusedIndex
+                showConfirmButton
+                confirmButtonText={translate('common.next')}
+                onConfirm={onConfirm}
+            >
+                {isError && (
+                    <View style={[styles.ph5, styles.mb5]}>
+                        <FormHelpMessage
+                            isError={isError}
+                            message={translate('common.error.pleaseSelectOne')}
+                        />
+                    </View>
+                )}
+            </SelectionList>
         </>
     );
 }

diff --git a/src/pages/workspace/expensifyCard/WorkspaceEditCardLimitTypePage.tsx b/src/pages/workspace/expensifyCard/WorkspaceEditCardLimitTypePage.tsx
@@ -118,6 +118,7 @@ function WorkspaceEditCardLimitTypePage({route}: WorkspaceEditCardLimitTypePageP
                     onSelectRow={({value}) => setTypeSelected(value)}
                     sections={[{data}]}
                     shouldUpdateFocusedIndex
+                    shouldSingleExecuteRowSelect
                     isAlternateTextMultilineSupported
                     initiallyFocusedOptionKey={typeSelected}
                 />