Skip to content

Display explanatory text on tags screen #40949

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
AndrewGable merged 10 commits into from
Apr 26, 2024
Merged

Display explanatory text on tags screen #40949

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
a1cc06f
feat: add new UI copy
Apr 25, 2024
5581747
feat: add new Spanish translation
Apr 25, 2024
fa8b3fc
chore: get current URL
Apr 25, 2024
5623a7b
chore: access policy ID just once
Apr 25, 2024
45c9439
refactor: get Onyx value using `useOnyx`
Apr 25, 2024
c1905bd
replace withOnyx with withPolicyConnections
Apr 25, 2024
b20d67e
fix: wrong variable name
Apr 25, 2024
ecf51d4
fix: import statements and component name
Apr 25, 2024
68e04b7
feat: display the explanatory text
Apr 25, 2024
57c5350
chore: change variable name
Apr 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/languages/en.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2036,6 +2036,7 @@ export default {
tagRequiredError: 'Tag name is required.',
existingTagError: 'A tag with this name already exists.',
genericFailureMessage: 'An error occurred while updating the tag, please try again.',
importedFromAccountingSoftware: 'The tags below are imported from your',
},
taxes: {
subtitle: 'Add tax names, rates, and set defaults.',
Expand Down
1 change: 1 addition & 0 deletions src/languages/es.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2063,6 +2063,7 @@ export default {
tagRequiredError: 'Lo nombre de la etiqueta es obligatorio.',
existingTagError: 'Ya existe una etiqueta con este nombre.',
genericFailureMessage: 'Se produjo un error al actualizar la etiqueta, inténtelo nuevamente.',
importedFromAccountingSoftware: 'Etiquetas importadas desde',
},
taxes: {
subtitle: 'Añade nombres, tasas y establezca valores por defecto para los impuestos.',
Expand Down
67 changes: 37 additions & 30 deletions src/pages/workspace/tags/WorkspaceTagsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
import {useFocusEffect, useIsFocused} from '@react-navigation/native';
import type {StackScreenProps} from '@react-navigation/stack';
import lodashSortBy from 'lodash/sortBy';
import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
import {ActivityIndicator, View} from 'react-native';
import {withOnyx} from 'react-native-onyx';
import type {OnyxEntry} from 'react-native-onyx';
import {useOnyx} from 'react-native-onyx';
import Button from '@components/Button';
import ButtonWithDropdownMenu from '@components/ButtonWithDropdownMenu';
import type {DropdownOption} from '@components/ButtonWithDropdownMenu/types';
Expand All @@ -18,7 +16,9 @@ import RightElementEnabledStatus from '@components/SelectionList/RightElementEna
import TableListItem from '@components/SelectionList/TableListItem';
import type {ListItem} from '@components/SelectionList/types';
import Text from '@components/Text';
import TextLink from '@components/TextLink';
import WorkspaceEmptyStateSection from '@components/WorkspaceEmptyStateSection';
import useEnvironment from '@hooks/useEnvironment';
import useLocalize from '@hooks/useLocalize';
import useNetwork from '@hooks/useNetwork';
import useTheme from '@hooks/useTheme';
Expand All @@ -28,15 +28,15 @@ import * as DeviceCapabilities from '@libs/DeviceCapabilities';
import localeCompare from '@libs/LocaleCompare';
import Navigation from '@libs/Navigation/Navigation';
import * as PolicyUtils from '@libs/PolicyUtils';
import type {WorkspacesCentralPaneNavigatorParamList} from '@navigation/types';
import AdminPolicyAccessOrNotFoundWrapper from '@pages/workspace/AdminPolicyAccessOrNotFoundWrapper';
import FeatureEnabledAccessOrNotFoundWrapper from '@pages/workspace/FeatureEnabledAccessOrNotFoundWrapper';
import PaidPolicyAccessOrNotFoundWrapper from '@pages/workspace/PaidPolicyAccessOrNotFoundWrapper';
import type {WithPolicyConnectionsProps} from '@pages/workspace/withPolicyConnections';
import withPolicyConnections from '@pages/workspace/withPolicyConnections';
import * as Policy from '@userActions/Policy';
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 type * as OnyxCommon from '@src/types/onyx/OnyxCommon';
import type DeepValueOf from '@src/types/utils/DeepValueOf';
Expand All @@ -55,14 +55,9 @@ type PolicyOption = ListItem & {
keyForList: string;
};

type WorkspaceTagsOnyxProps = {
/** Collection of tags attached to a policy */
policyTags: OnyxEntry<OnyxTypes.PolicyTagList>;
};

type WorkspaceTagsPageProps = WorkspaceTagsOnyxProps & StackScreenProps<WorkspacesCentralPaneNavigatorParamList, typeof SCREENS.WORKSPACE.TAGS>;
type WorkspaceTagsPageProps = WithPolicyConnectionsProps;

function WorkspaceTagsPage({policyTags, route}: WorkspaceTagsPageProps) {
function WorkspaceTagsPage({route, policy}: WorkspaceTagsPageProps) {
const {isSmallScreenWidth} = useWindowDimensions();
const styles = useThemeStyles();
const theme = useTheme();
Expand All @@ -71,10 +66,14 @@ function WorkspaceTagsPage({policyTags, route}: WorkspaceTagsPageProps) {
const dropdownButtonRef = useRef(null);
const [deleteTagsConfirmModalVisible, setDeleteTagsConfirmModalVisible] = useState(false);
const isFocused = useIsFocused();
const policyID = route.params.policyID ?? '';
const [policyTags] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`);
const {environmentURL} = useEnvironment();
const isConnectedToAccounting = Object.keys(policy?.connections ?? {}).length > 0;

const fetchTags = useCallback(() => {
Policy.openPolicyTagsPage(route.params.policyID);
}, [route.params.policyID]);
Policy.openPolicyTagsPage(policyID);
}, [policyID]);

const {isOffline} = useNetwork({onReconnect: fetchTags});

Expand Down Expand Up @@ -142,22 +141,22 @@ function WorkspaceTagsPage({policyTags, route}: WorkspaceTagsPageProps) {
);

const navigateToTagsSettings = () => {
Navigation.navigate(ROUTES.WORKSPACE_TAGS_SETTINGS.getRoute(route.params.policyID));
Navigation.navigate(ROUTES.WORKSPACE_TAGS_SETTINGS.getRoute(policyID));
};

const navigateToCreateTagPage = () => {
Navigation.navigate(ROUTES.WORKSPACE_TAG_CREATE.getRoute(route.params.policyID));
Navigation.navigate(ROUTES.WORKSPACE_TAG_CREATE.getRoute(policyID));
};

const navigateToTagSettings = (tag: PolicyOption) => {
Navigation.navigate(ROUTES.WORKSPACE_TAG_SETTINGS.getRoute(route.params.policyID, tag.keyForList));
Navigation.navigate(ROUTES.WORKSPACE_TAG_SETTINGS.getRoute(policyID, tag.keyForList));
};

const selectedTagsArray = Object.keys(selectedTags).filter((key) => selectedTags[key]);

const handleDeleteTags = () => {
setSelectedTags({});
Policy.deletePolicyTags(route.params.policyID, selectedTagsArray);
Policy.deletePolicyTags(policyID, selectedTagsArray);
setDeleteTagsConfirmModalVisible(false);
};

Expand Down Expand Up @@ -192,7 +191,7 @@ function WorkspaceTagsPage({policyTags, route}: WorkspaceTagsPageProps) {
value: CONST.POLICY.TAGS_BULK_ACTION_TYPES.DISABLE,
onSelected: () => {
setSelectedTags({});
Policy.setWorkspaceTagEnabled(route.params.policyID, tagsToDisable);
Policy.setWorkspaceTagEnabled(policyID, tagsToDisable);
},
});
}
Expand All @@ -214,7 +213,7 @@ function WorkspaceTagsPage({policyTags, route}: WorkspaceTagsPageProps) {
value: CONST.POLICY.TAGS_BULK_ACTION_TYPES.ENABLE,
onSelected: () => {
setSelectedTags({});
Policy.setWorkspaceTagEnabled(route.params.policyID, tagsToEnable);
Policy.setWorkspaceTagEnabled(policyID, tagsToEnable);
},
});
}
Expand Down Expand Up @@ -257,10 +256,10 @@ function WorkspaceTagsPage({policyTags, route}: WorkspaceTagsPageProps) {
};

return (
<AdminPolicyAccessOrNotFoundWrapper policyID={route.params.policyID}>
<PaidPolicyAccessOrNotFoundWrapper policyID={route.params.policyID}>
<AdminPolicyAccessOrNotFoundWrapper policyID={policyID}>
<PaidPolicyAccessOrNotFoundWrapper policyID={policyID}>
<FeatureEnabledAccessOrNotFoundWrapper
policyID={route.params.policyID}
policyID={policyID}
featureName={CONST.POLICY.MORE_FEATURES.ARE_TAGS_ENABLED}
>
<ScreenWrapper
Expand Down Expand Up @@ -289,7 +288,19 @@ function WorkspaceTagsPage({policyTags, route}: WorkspaceTagsPageProps) {
/>
{isSmallScreenWidth && <View style={[styles.pl5, styles.pr5]}>{getHeaderButtons()}</View>}
<View style={[styles.ph5, styles.pb5, styles.pt3]}>
<Text style={[styles.textNormal, styles.colorMuted]}>{translate('workspace.tags.subtitle')}</Text>
{isConnectedToAccounting ? (
<Text>
<Text style={[styles.textNormal, styles.colorMuted]}>{`${translate('workspace.tags.importedFromAccountingSoftware')} `}</Text>
<TextLink
style={[styles.textNormal, styles.link]}
href={`${environmentURL}/${ROUTES.POLICY_ACCOUNTING.getRoute(policyID)}`}
>
{`${translate('workspace.accounting.qbo')} ${translate('workspace.accounting.settings')}`}
</TextLink>
</Text>
) : (
<Text style={[styles.textNormal, styles.colorMuted]}>{translate('workspace.tags.subtitle')}</Text>
)}
</View>
{isLoading && (
<ActivityIndicator
Expand Down Expand Up @@ -317,7 +328,7 @@ function WorkspaceTagsPage({policyTags, route}: WorkspaceTagsPageProps) {
customListHeader={getCustomListHeader()}
shouldPreventDefaultFocusOnSelectRow={!DeviceCapabilities.canUseTouchScreen()}
listHeaderWrapperStyle={[styles.ph9, styles.pv3, styles.pb5]}
onDismissError={(item) => Policy.clearPolicyTagErrors(route.params.policyID, item.value)}
onDismissError={(item) => Policy.clearPolicyTagErrors(policyID, item.value)}
/>
)}
</ScreenWrapper>
Expand All @@ -329,8 +340,4 @@ function WorkspaceTagsPage({policyTags, route}: WorkspaceTagsPageProps) {

WorkspaceTagsPage.displayName = 'WorkspaceTagsPage';

export default withOnyx<WorkspaceTagsPageProps, WorkspaceTagsOnyxProps>({
policyTags: {
key: ({route}) => `${ONYXKEYS.COLLECTION.POLICY_TAGS}${route.params.policyID}`,
},
})(WorkspaceTagsPage);
export default withPolicyConnections(WorkspaceTagsPage);