From af1d1143d9bc41d427f92b7ee09586f7d3058583 Mon Sep 17 00:00:00 2001 From: FitseTLT Date: Wed, 18 Sep 2024 23:15:48 +0300 Subject: [PATCH 1/4] implemented empty state display for tag --- src/ROUTES.ts | 4 ++ src/SCREENS.ts | 2 + src/languages/en.ts | 1 + src/languages/es.ts | 1 + .../ModalStackNavigators/index.tsx | 1 + src/libs/Navigation/linkingConfig/config.ts | 1 + .../iou/request/step/IOURequestStepTag.tsx | 63 +++++++++++++++---- 7 files changed, 61 insertions(+), 12 deletions(-) diff --git a/src/ROUTES.ts b/src/ROUTES.ts index 27504998c49c..0996fc9717f0 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -496,6 +496,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 8168afba89ab..64e5f29d9486 100644 --- a/src/SCREENS.ts +++ b/src/SCREENS.ts @@ -243,6 +243,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 f36db113a2aa..596fb9333c9e 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -3164,6 +3164,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 8a18c6c002e0..80b71ce8cb7e 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -3213,6 +3213,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 b41b58530a6b..ca16f5ef3eab 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx @@ -86,6 +86,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 2ca2db10a1a7..a42d8391e69b 100644 --- a/src/libs/Navigation/linkingConfig/config.ts +++ b/src/libs/Navigation/linkingConfig/config.ts @@ -997,6 +997,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..d4e9dbdcba87 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-web'; +import Button from '@components/Button'; +import FixedFooter from '@components/FixedFooter'; +import * as Illustrations from '@components/Icon/Illustrations'; 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,6 +20,7 @@ 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'; @@ -77,11 +83,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,16 +120,48 @@ function IOURequestStepTag({ testID={IOURequestStepTag.displayName} shouldShowNotFoundPage={shouldShowNotFoundPage} > - <> - {translate('iou.tagSelection')} - - + {!shouldShowTag && ( + + + {PolicyUtils.isPolicyAdmin(policy) && ( + +