Skip to content

Commit

Permalink
Merge pull request #40949 from Expensify/hayata-display-explanatory-t…
Browse files Browse the repository at this point in the history 
…ext-on-tags-screen

Display explanatory text on tags screen
  • Loading branch information
@AndrewGable
AndrewGable authored Apr 26, 2024
2 parents c50de77 + 57c5350 commit e01ad5f
Show file tree
Hide file tree
Showing 3 changed files with 39 additions and 30 deletions.
1 change: 1 addition & 0 deletions src/languages/en.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2052,6 +2052,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
Original file line number Diff line number Diff line change
Expand Up @@ -2079,6 +2079,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
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);

0 comments on commit e01ad5f

Please sign in to comment.