diff --git a/src/ROUTES.ts b/src/ROUTES.ts index 9b351bd31899..2641aeaea002 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -495,6 +495,10 @@ const ROUTES = { getRoute: (action: IOUAction, iouType: IOUType, orderWeight: number, transactionID: string, reportID: string, backTo = '', reportActionID?: string) => getUrlWithBackToParam(`${action as string}/${iouType as string}/tag/${orderWeight}/${transactionID}/${reportID}${reportActionID ? `/${reportActionID}` : ''}`, backTo), }, + SETTINGS_TAGS_ROOT: { + route: 'settings/:policyID/tags', + getRoute: (policyID: string, backTo = '') => getUrlWithBackToParam(`settings/${policyID}/tags`, backTo), + }, MONEY_REQUEST_STEP_WAYPOINT: { route: ':action/:iouType/waypoint/:transactionID/:reportID/:pageIndex', getRoute: (action: IOUAction, iouType: IOUType, transactionID: string, reportID?: string, pageIndex = '', backTo = '') => diff --git a/src/SCREENS.ts b/src/SCREENS.ts index da92d2b0940d..fca8972c3832 100644 --- a/src/SCREENS.ts +++ b/src/SCREENS.ts @@ -244,6 +244,8 @@ const SCREENS = { SETTINGS_CATEGORIES_ROOT: 'Settings_Categories', }, + SETTINGS_TAGS_ROOT: 'Settings_Tags', + REPORT_SETTINGS: { ROOT: 'Report_Settings_Root', NAME: 'Report_Settings_Name', diff --git a/src/languages/en.ts b/src/languages/en.ts index 9c8589098141..6602e7d1c47f 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -3171,6 +3171,7 @@ export default { disableTags: 'Disable tags', addTag: 'Add tag', editTag: 'Edit tag', + editTags: 'Edit tags', subtitle: 'Tags add more detailed ways to classify costs.', emptyTags: { title: "You haven't created any tags", diff --git a/src/languages/es.ts b/src/languages/es.ts index 61191efe3049..0c6627cba22b 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -3220,6 +3220,7 @@ export default { disableTags: 'Desactivar etiquetas', addTag: 'Añadir etiqueta', editTag: 'Editar etiqueta', + editTags: 'Editar etiquetas', subtitle: 'Las etiquetas añaden formas más detalladas de clasificar los costos.', emptyTags: { title: 'No has creado ninguna etiqueta', diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx index 864d810a4469..0c43c767e6a5 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx @@ -87,6 +87,7 @@ const MoneyRequestModalStackNavigator = createModalStackNavigator require('../../../../pages/iou/request/step/IOURequestStepMerchant').default, [SCREENS.MONEY_REQUEST.STEP_PARTICIPANTS]: () => require('../../../../pages/iou/request/step/IOURequestStepParticipants').default, [SCREENS.SETTINGS_CATEGORIES.SETTINGS_CATEGORIES_ROOT]: () => require('../../../../pages/workspace/categories/WorkspaceCategoriesPage').default, + [SCREENS.SETTINGS_TAGS_ROOT]: () => require('../../../../pages/workspace/tags/WorkspaceTagsPage').default, [SCREENS.MONEY_REQUEST.STEP_SCAN]: () => require('../../../../pages/iou/request/step/IOURequestStepScan').default, [SCREENS.MONEY_REQUEST.STEP_TAG]: () => require('../../../../pages/iou/request/step/IOURequestStepTag').default, [SCREENS.MONEY_REQUEST.STEP_WAYPOINT]: () => require('../../../../pages/iou/request/step/IOURequestStepWaypoint').default, diff --git a/src/libs/Navigation/linkingConfig/config.ts b/src/libs/Navigation/linkingConfig/config.ts index 69bbe12c857b..b2697054a131 100644 --- a/src/libs/Navigation/linkingConfig/config.ts +++ b/src/libs/Navigation/linkingConfig/config.ts @@ -1009,6 +1009,7 @@ const config: LinkingOptions['config'] = { }, }, [SCREENS.SETTINGS_CATEGORIES.SETTINGS_CATEGORIES_ROOT]: ROUTES.SETTINGS_CATEGORIES_ROOT.route, + [SCREENS.SETTINGS_TAGS_ROOT]: ROUTES.SETTINGS_TAGS_ROOT.route, [SCREENS.MONEY_REQUEST.STEP_SEND_FROM]: ROUTES.MONEY_REQUEST_STEP_SEND_FROM.route, [SCREENS.MONEY_REQUEST.STEP_COMPANY_INFO]: ROUTES.MONEY_REQUEST_STEP_COMPANY_INFO.route, [SCREENS.MONEY_REQUEST.STEP_AMOUNT]: ROUTES.MONEY_REQUEST_STEP_AMOUNT.route, diff --git a/src/pages/iou/request/step/IOURequestStepTag.tsx b/src/pages/iou/request/step/IOURequestStepTag.tsx index 6cf9e39d6015..90731e732d50 100644 --- a/src/pages/iou/request/step/IOURequestStepTag.tsx +++ b/src/pages/iou/request/step/IOURequestStepTag.tsx @@ -1,8 +1,13 @@ import React, {useMemo} from 'react'; -import type {OnyxEntry} from 'react-native-onyx'; -import {withOnyx} from 'react-native-onyx'; +import {View} from 'react-native'; +import {useOnyx} from 'react-native-onyx'; +import Button from '@components/Button'; +import FixedFooter from '@components/FixedFooter'; +import * as Illustrations from '@components/Icon/Illustrations'; +import {useSession} from '@components/OnyxProvider'; import TagPicker from '@components/TagPicker'; import Text from '@components/Text'; +import WorkspaceEmptyStateSection from '@components/WorkspaceEmptyStateSection'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import * as IOUUtils from '@libs/IOUUtils'; @@ -15,8 +20,8 @@ import * as TransactionUtils from '@libs/TransactionUtils'; import * as IOU from '@userActions/IOU'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; +import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; -import type * as OnyxTypes from '@src/types/onyx'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; import StepScreenWrapper from './StepScreenWrapper'; import type {WithFullTransactionOrNotFoundProps} from './withFullTransactionOrNotFound'; @@ -24,43 +29,25 @@ import withFullTransactionOrNotFound from './withFullTransactionOrNotFound'; import type {WithWritableReportOrNotFoundProps} from './withWritableReportOrNotFound'; import withWritableReportOrNotFound from './withWritableReportOrNotFound'; -type IOURequestStepTagOnyxProps = { - /** The draft transaction that holds data to be persisted on the current transaction */ - splitDraftTransaction: OnyxEntry; - - /** The policy of the report */ - policy: OnyxEntry; - - /** The category configuration of the report's policy */ - policyCategories: OnyxEntry; - - /** Collection of tags attached to a policy */ - policyTags: OnyxEntry; - - /** The actions from the parent report */ - reportActions: OnyxEntry; - - /** Session info for the currently logged in user. */ - session: OnyxEntry; -}; - -type IOURequestStepTagProps = IOURequestStepTagOnyxProps & - WithWritableReportOrNotFoundProps & - WithFullTransactionOrNotFoundProps; +type IOURequestStepTagProps = WithWritableReportOrNotFoundProps & WithFullTransactionOrNotFoundProps; function IOURequestStepTag({ - policy, - policyCategories, - policyTags, report, route: { params: {action, orderWeight: rawTagIndex, transactionID, backTo, iouType, reportActionID}, }, transaction, - splitDraftTransaction, - reportActions, - session, }: IOURequestStepTagProps) { + const [splitDraftTransaction] = useOnyx(`${ONYXKEYS.COLLECTION.SPLIT_TRANSACTION_DRAFT}${transactionID ?? 0}`); + const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${report ? report.policyID : '-1'}`); + const [policyCategories] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${report ? report.policyID : '-1'}`); + const [policyTags] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_TAGS}${report ? report.policyID : '-1'}`); + let reportID: string | undefined = '-1'; + if (action === CONST.IOU.ACTION.EDIT) { + reportID = iouType === CONST.IOU.TYPE.SPLIT ? report?.reportID : report?.parentReportID; + } + const [reportActions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, {canEvict: false}); + const session = useSession(); const styles = useThemeStyles(); const {translate} = useLocalize(); @@ -77,11 +64,12 @@ function IOURequestStepTag({ const canEditSplitBill = isSplitBill && reportAction && session?.accountID === reportAction.actorAccountID && TransactionUtils.areRequiredFieldsEmpty(transaction); const policyTagLists = useMemo(() => PolicyUtils.getTagLists(policyTags), [policyTags]); - const shouldShowTag = ReportUtils.isReportInGroupPolicy(report) && (transactionTag || OptionsListUtils.hasEnabledTags(policyTagLists)); + const shouldShowTag = transactionTag || OptionsListUtils.hasEnabledTags(policyTagLists); // eslint-disable-next-line rulesdir/no-negated-variables const shouldShowNotFoundPage = - !shouldShowTag || (isEditing && (isSplitBill ? !canEditSplitBill : !ReportActionsUtils.isMoneyRequestAction(reportAction) || !ReportUtils.canEditMoneyRequest(reportAction))); + !ReportUtils.isReportInGroupPolicy(report) || + (isEditing && (isSplitBill ? !canEditSplitBill : !ReportActionsUtils.isMoneyRequestAction(reportAction) || !ReportUtils.canEditMoneyRequest(reportAction))); const navigateBack = () => { Navigation.goBack(backTo); @@ -113,58 +101,52 @@ function IOURequestStepTag({ testID={IOURequestStepTag.displayName} shouldShowNotFoundPage={shouldShowNotFoundPage} > - <> - {translate('iou.tagSelection')} - - + {!shouldShowTag && ( + + + {PolicyUtils.isPolicyAdmin(policy) && ( + +