diff --git a/src/ROUTES.ts b/src/ROUTES.ts index ede3f0d3099e..fcfd6b2ab526 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -821,6 +821,10 @@ const DYNAMIC_ROUTES = { entryScreens: [SCREENS.REPORT, SCREENS.RIGHT_MODAL.SEARCH_REPORT, SCREENS.RIGHT_MODAL.EXPENSE_REPORT, SCREENS.RIGHT_MODAL.SEARCH_MONEY_REQUEST_REPORT], getRoute: (reportID: string, reportActionID: string) => `flag/${reportID}/${reportActionID}`, }, + WORKSPACE_REPORT_FIELDS_INITIAL_LIST_VALUE: { + path: 'initial-list-value', + entryScreens: [SCREENS.WORKSPACE.REPORT_FIELDS_CREATE], + }, } as const satisfies DynamicRoutes; const ROUTES = { diff --git a/src/SCREENS.ts b/src/SCREENS.ts index d09254260341..4ed5b3cc6403 100644 --- a/src/SCREENS.ts +++ b/src/SCREENS.ts @@ -795,6 +795,7 @@ const SCREENS = { REPORT_FIELDS_VALUE_SETTINGS: 'Workspace_ReportFields_ValueSettings', REPORT_FIELDS_EDIT_VALUE: 'Workspace_ReportFields_EditValue', REPORT_FIELDS_EDIT_INITIAL_VALUE: 'Workspace_ReportFields_EditInitialValue', + DYNAMIC_REPORT_FIELDS_INITIAL_LIST_VALUE: 'Dynamic_Report_Fields_Initial_List_Value', TAX_EDIT: 'Workspace_Tax_Edit', TAX_NAME: 'Workspace_Tax_Name', TAX_VALUE: 'Workspace_Tax_Value', diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx index 7070d1b0ad05..bb3ec7b8ec0b 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx @@ -995,6 +995,8 @@ const SettingsModalStackNavigator = createModalStackNavigator require('../../../../pages/settings/Subscription/PaymentCard').default), [SCREENS.WORKSPACE.REPORT_FIELDS_CREATE]: () => require('../../../../pages/workspace/reports/CreateReportFieldsPage').default, + [SCREENS.WORKSPACE.DYNAMIC_REPORT_FIELDS_INITIAL_LIST_VALUE]: () => + require('../../../../pages/workspace/reports/InitialListValueSelector/DynamicReportFieldsInitialListValuePage').default, [SCREENS.WORKSPACE.REPORT_FIELDS_SETTINGS]: () => require('../../../../pages/workspace/reports/ReportFieldsSettingsPage').default, [SCREENS.WORKSPACE.REPORT_FIELDS_LIST_VALUES]: () => require('../../../../pages/workspace/reports/ReportFieldsListValuesPage').default, [SCREENS.WORKSPACE.REPORT_FIELDS_ADD_VALUE]: () => require('../../../../pages/workspace/reports/ReportFieldsAddListValuePage').default, diff --git a/src/libs/Navigation/linkingConfig/RELATIONS/WORKSPACE_TO_RHP.ts b/src/libs/Navigation/linkingConfig/RELATIONS/WORKSPACE_TO_RHP.ts index 724665cc32db..3feed4a1cca8 100755 --- a/src/libs/Navigation/linkingConfig/RELATIONS/WORKSPACE_TO_RHP.ts +++ b/src/libs/Navigation/linkingConfig/RELATIONS/WORKSPACE_TO_RHP.ts @@ -295,6 +295,7 @@ const WORKSPACE_TO_RHP: Partial['config'] = { [SCREENS.WORKSPACE.REPORT_FIELDS_CREATE]: { path: ROUTES.WORKSPACE_CREATE_REPORT_FIELD.route, }, + [SCREENS.WORKSPACE.DYNAMIC_REPORT_FIELDS_INITIAL_LIST_VALUE]: DYNAMIC_ROUTES.WORKSPACE_REPORT_FIELDS_INITIAL_LIST_VALUE.path, [SCREENS.WORKSPACE.REPORT_FIELDS_LIST_VALUES]: { path: ROUTES.WORKSPACE_REPORT_FIELDS_LIST_VALUES.route, }, diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts index 0d2981f8997a..45224c4c7268 100644 --- a/src/libs/Navigation/types.ts +++ b/src/libs/Navigation/types.ts @@ -644,6 +644,9 @@ type SettingsNavigatorParamList = { [SCREENS.WORKSPACE.REPORT_FIELDS_CREATE]: { policyID: string; }; + [SCREENS.WORKSPACE.DYNAMIC_REPORT_FIELDS_INITIAL_LIST_VALUE]: { + policyID: string; + }; [SCREENS.WORKSPACE.REPORT_FIELDS_LIST_VALUES]: { policyID: string; reportFieldID?: string; diff --git a/src/pages/workspace/reports/CreateReportFieldsPage.tsx b/src/pages/workspace/reports/CreateReportFieldsPage.tsx index aaaec9b44d6c..5b5deafe055a 100644 --- a/src/pages/workspace/reports/CreateReportFieldsPage.tsx +++ b/src/pages/workspace/reports/CreateReportFieldsPage.tsx @@ -273,7 +273,6 @@ function WorkspaceCreateReportFieldsPage({ InputComponent={InitialListValueSelector} inputID={INPUT_IDS.INITIAL_VALUE} label={translate('common.initialValue')} - subtitle={translate('workspace.reportFields.listValuesInputSubtitle')} /> )} diff --git a/src/pages/workspace/reports/InitialListValueSelector/DynamicReportFieldsInitialListValuePage.tsx b/src/pages/workspace/reports/InitialListValueSelector/DynamicReportFieldsInitialListValuePage.tsx new file mode 100644 index 000000000000..d6494a3c2d42 --- /dev/null +++ b/src/pages/workspace/reports/InitialListValueSelector/DynamicReportFieldsInitialListValuePage.tsx @@ -0,0 +1,79 @@ +import React from 'react'; +import {View} from 'react-native'; +import HeaderWithBackButton from '@components/HeaderWithBackButton'; +import ScreenWrapper from '@components/ScreenWrapper'; +import Text from '@components/Text'; +import useDynamicBackPath from '@hooks/useDynamicBackPath'; +import useLocalize from '@hooks/useLocalize'; +import useOnyx from '@hooks/useOnyx'; +import useThemeStyles from '@hooks/useThemeStyles'; +import {setDraftValues} from '@libs/actions/FormActions'; +import Navigation from '@libs/Navigation/Navigation'; +import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; +import {hasAccountingConnections} from '@libs/PolicyUtils'; +import type {SettingsNavigatorParamList} from '@navigation/types'; +import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; +import type {WithPolicyAndFullscreenLoadingProps} from '@pages/workspace/withPolicyAndFullscreenLoading'; +import withPolicyAndFullscreenLoading from '@pages/workspace/withPolicyAndFullscreenLoading'; +import CONST from '@src/CONST'; +import ONYXKEYS from '@src/ONYXKEYS'; +import {DYNAMIC_ROUTES} from '@src/ROUTES'; +import type SCREENS from '@src/SCREENS'; +import INPUT_IDS from '@src/types/form/WorkspaceReportFieldForm'; +import ReportFieldsInitialListValuePicker from './ReportFieldsInitialListValuePicker'; + +type DynamicReportFieldsInitialListValuePageProps = WithPolicyAndFullscreenLoadingProps & + PlatformStackScreenProps; + +function DynamicReportFieldsInitialListValuePage({ + policy, + route: { + params: {policyID}, + }, +}: DynamicReportFieldsInitialListValuePageProps) { + const styles = useThemeStyles(); + const {translate} = useLocalize(); + const [formDraft] = useOnyx(ONYXKEYS.FORMS.WORKSPACE_REPORT_FIELDS_FORM_DRAFT); + const backPath = useDynamicBackPath(DYNAMIC_ROUTES.WORKSPACE_REPORT_FIELDS_INITIAL_LIST_VALUE.path); + + const currentValue = formDraft?.[INPUT_IDS.INITIAL_VALUE] ?? ''; + + const onValueSelected = (value: string) => { + setDraftValues(ONYXKEYS.FORMS.WORKSPACE_REPORT_FIELDS_FORM, { + [INPUT_IDS.INITIAL_VALUE]: currentValue === value ? '' : value, + }); + Navigation.goBack(backPath); + }; + + return ( + + + Navigation.goBack(backPath)} + /> + + {translate('workspace.reportFields.listValuesInputSubtitle')} + + + + + ); +} + +export default withPolicyAndFullscreenLoading(DynamicReportFieldsInitialListValuePage); diff --git a/src/pages/workspace/reports/InitialListValueSelector/InitialListValueSelectorModal.tsx b/src/pages/workspace/reports/InitialListValueSelector/InitialListValueSelectorModal.tsx deleted file mode 100644 index a6d39b3ee6cf..000000000000 --- a/src/pages/workspace/reports/InitialListValueSelector/InitialListValueSelectorModal.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import React from 'react'; -import {View} from 'react-native'; -import HeaderWithBackButton from '@components/HeaderWithBackButton'; -import Modal from '@components/Modal'; -import ScreenWrapper from '@components/ScreenWrapper'; -import Text from '@components/Text'; -import useOnyx from '@hooks/useOnyx'; -import useThemeStyles from '@hooks/useThemeStyles'; -import CONST from '@src/CONST'; -import ONYXKEYS from '@src/ONYXKEYS'; -import ReportFieldsInitialListValuePicker from './ReportFieldsInitialListValuePicker'; - -type InitialListValueSelectorModalProps = { - /** Whether the modal is visible */ - isVisible: boolean; - - /** Selected value */ - currentValue: string; - - /** Label to display on field */ - label: string; - - /** Subtitle to display on field */ - subtitle: string; - - /** Function to call when the user selects a value */ - onValueSelected: (value: string) => void; - - /** Function to call when the user closes the value selector modal */ - onClose: () => void; -}; - -function InitialListValueSelectorModal({isVisible, currentValue, label, subtitle, onValueSelected, onClose}: InitialListValueSelectorModalProps) { - const styles = useThemeStyles(); - - const [formDraft] = useOnyx(ONYXKEYS.FORMS.WORKSPACE_REPORT_FIELDS_FORM_DRAFT); - - return ( - - - - - {subtitle} - - - - - ); -} - -export default InitialListValueSelectorModal; diff --git a/src/pages/workspace/reports/InitialListValueSelector/ReportFieldsInitialListValuePicker.tsx b/src/pages/workspace/reports/InitialListValueSelector/ReportFieldsInitialListValuePicker.tsx index e57a8b862b06..9592234e92ff 100644 --- a/src/pages/workspace/reports/InitialListValueSelector/ReportFieldsInitialListValuePicker.tsx +++ b/src/pages/workspace/reports/InitialListValueSelector/ReportFieldsInitialListValuePicker.tsx @@ -39,6 +39,7 @@ function ReportFieldsInitialListValuePicker({listValues, disabledOptions, value, ListItem={SingleSelectListItem} onSelectRow={(item) => onValueChange(item.value)} initiallyFocusedItemKey={listValueOptions.find((listValue) => listValue.isSelected)?.keyForList} + shouldSingleExecuteRowSelect addBottomSafeAreaPadding /> ); diff --git a/src/pages/workspace/reports/InitialListValueSelector/index.tsx b/src/pages/workspace/reports/InitialListValueSelector/index.tsx index 0ea7cb414b64..fac4128b34a5 100644 --- a/src/pages/workspace/reports/InitialListValueSelector/index.tsx +++ b/src/pages/workspace/reports/InitialListValueSelector/index.tsx @@ -1,21 +1,19 @@ import type {ForwardedRef} from 'react'; -import React, {useEffect, useState} from 'react'; +import React, {useEffect} from 'react'; import {View} from 'react-native'; import type {MenuItemBaseProps} from '@components/MenuItem'; import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription'; import useOnyx from '@hooks/useOnyx'; -import blurActiveElement from '@libs/Accessibility/blurActiveElement'; +import createDynamicRoute from '@libs/Navigation/helpers/dynamicRoutesUtils/createDynamicRoute'; +import Navigation from '@libs/Navigation/Navigation'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; -import InitialListValueSelectorModal from './InitialListValueSelectorModal'; +import {DYNAMIC_ROUTES} from '@src/ROUTES'; type InitialListValueSelectorProps = Pick & { /** Currently selected value */ value?: string; - /** Subtitle to display on field */ - subtitle?: string; - /** Function to call when the user selects a value */ onInputChange?: (value: string) => void; @@ -23,25 +21,9 @@ type InitialListValueSelectorProps = Pick; }; -function InitialListValueSelector({value = '', label = '', rightLabel, subtitle = '', errorText = '', onInputChange, ref}: InitialListValueSelectorProps) { +function InitialListValueSelector({value = '', label = '', rightLabel, errorText = '', onInputChange, ref}: InitialListValueSelectorProps) { const [formDraft] = useOnyx(ONYXKEYS.FORMS.WORKSPACE_REPORT_FIELDS_FORM_DRAFT); - const [isPickerVisible, setIsPickerVisible] = useState(false); - - const showPickerModal = () => { - setIsPickerVisible(true); - }; - - const hidePickerModal = () => { - setIsPickerVisible(false); - blurActiveElement(); - }; - - const updateValueInput = (initialValue: string) => { - onInputChange?.(value === initialValue ? '' : initialValue); - hidePickerModal(); - }; - useEffect(() => { const currentValueIndex = Object.values(formDraft?.listValues ?? {}).findIndex((listValue) => listValue === value); const isCurrentValueDisabled = formDraft?.disabledListValues?.[currentValueIndex] ?? true; @@ -61,15 +43,7 @@ function InitialListValueSelector({value = '', label = '', rightLabel, subtitle rightLabel={rightLabel} brickRoadIndicator={errorText ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined} errorText={errorText} - onPress={showPickerModal} - /> - Navigation.navigate(createDynamicRoute(DYNAMIC_ROUTES.WORKSPACE_REPORT_FIELDS_INITIAL_LIST_VALUE.path))} /> );