Skip to content

Commit

Permalink
Merge pull request #40496 from Expensify/hayata-display-text-on-categ…
Browse files Browse the repository at this point in the history 
…ories-and-tags-screens

Display text on categories screen
  • Loading branch information
Hayata Suenaga authored Apr 23, 2024
2 parents f6e4b2c + 28a57cf commit f408977
Show file tree
Hide file tree
Showing 4 changed files with 43 additions and 31 deletions.
2 changes: 2 additions & 0 deletions src/languages/en.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1964,6 +1964,7 @@ export default {
categoryRequiredError: 'Category name is required.',
existingCategoryError: 'A category with this name already exists.',
invalidCategoryName: 'Invalid category name.',
importedFromAccountingSoftware: 'The categories below are imported from your',
},
moreFeatures: {
spendSection: {
Expand Down Expand Up @@ -2136,6 +2137,7 @@ export default {
lowRateError: 'Rate must be greater than 0',
},
accounting: {
settings: 'settings',
title: 'Connections',
subtitle: 'Connect to your accounting system to code transactions with your chart of accounts, auto-match payments and keep your finances in sync.',
qbo: 'Quickbooks Online',
Expand Down
2 changes: 2 additions & 0 deletions src/languages/es.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1991,6 +1991,7 @@ export default {
categoryRequiredError: 'Lo nombre de la categoría es obligatorio.',
existingCategoryError: 'Ya existe una categoría con este nombre.',
invalidCategoryName: 'Lo nombre de la categoría es invalido.',
importedFromAccountingSoftware: 'Categorías importadas desde',
},
moreFeatures: {
spendSection: {
Expand Down Expand Up @@ -2131,6 +2132,7 @@ export default {
membersListTitle: 'Directorio de todos los miembros del espacio de trabajo.',
},
accounting: {
settings: 'configuración',
title: 'Conexiones',
subtitle: 'Conecta a tu sistema de contabilidad para codificar transacciones con tu plan de cuentas, auto-cotejar pagos y mantener tus finanzas sincronizadas.',
qbo: 'Quickbooks Online',
Expand Down
68 changes: 37 additions & 31 deletions src/pages/workspace/categories/WorkspaceCategoriesPage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import {useFocusEffect, useIsFocused} from '@react-navigation/native';
import type {StackScreenProps} from '@react-navigation/stack';
import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
import {ActivityIndicator, View} from 'react-native';
import {withOnyx} from 'react-native-onyx';
import {useOnyx} from 'react-native-onyx';
import type {OnyxEntry} from 'react-native-onyx';
import Button from '@components/Button';
import ButtonWithDropdownMenu from '@components/ButtonWithDropdownMenu';
Expand All @@ -17,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 +29,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 DeepValueOf from '@src/types/utils/DeepValueOf';

Expand All @@ -45,17 +46,14 @@ type PolicyOption = ListItem & {
keyForList: string;
};

type WorkspaceCategoriesOnyxProps = {
type WorkspaceCategoriesPageOnyxProps = {
/** The policy the user is accessing. */
policy: OnyxEntry<OnyxTypes.Policy>;

/** Collection of categories attached to a policy */
policyCategories: OnyxEntry<OnyxTypes.PolicyCategories>;
};

type WorkspaceCategoriesPageProps = WorkspaceCategoriesOnyxProps & StackScreenProps<WorkspacesCentralPaneNavigatorParamList, typeof SCREENS.WORKSPACE.CATEGORIES>;
type WorkspaceCategoriesPageProps = WithPolicyConnectionsProps & WorkspaceCategoriesPageOnyxProps;

function WorkspaceCategoriesPage({policy, policyCategories, route}: WorkspaceCategoriesPageProps) {
function WorkspaceCategoriesPage({policy, route}: WorkspaceCategoriesPageProps) {
const {isSmallScreenWidth} = useWindowDimensions();
const styles = useThemeStyles();
const theme = useTheme();
Expand All @@ -64,10 +62,13 @@ function WorkspaceCategoriesPage({policy, policyCategories, route}: WorkspaceCat
const dropdownButtonRef = useRef(null);
const [deleteCategoriesConfirmModalVisible, setDeleteCategoriesConfirmModalVisible] = useState(false);
const isFocused = useIsFocused();
const {environmentURL} = useEnvironment();
const policyId = route.params.policyID ?? '';
const [policyCategories] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyId}`);

const fetchCategories = useCallback(() => {
Policy.openPolicyCategoriesPage(route.params.policyID);
}, [route.params.policyID]);
Policy.openPolicyCategoriesPage(policyId);
}, [policyId]);

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

Expand Down Expand Up @@ -127,26 +128,26 @@ function WorkspaceCategoriesPage({policy, policyCategories, route}: WorkspaceCat
);

const navigateToCategorySettings = (category: PolicyOption) => {
Navigation.navigate(ROUTES.WORKSPACE_CATEGORY_SETTINGS.getRoute(route.params.policyID, category.keyForList));
Navigation.navigate(ROUTES.WORKSPACE_CATEGORY_SETTINGS.getRoute(policyId, category.keyForList));
};

const navigateToCategoriesSettings = () => {
Navigation.navigate(ROUTES.WORKSPACE_CATEGORIES_SETTINGS.getRoute(route.params.policyID));
Navigation.navigate(ROUTES.WORKSPACE_CATEGORIES_SETTINGS.getRoute(policyId));
};

const navigateToCreateCategoryPage = () => {
Navigation.navigate(ROUTES.WORKSPACE_CATEGORY_CREATE.getRoute(route.params.policyID));
Navigation.navigate(ROUTES.WORKSPACE_CATEGORY_CREATE.getRoute(policyId));
};

const dismissError = (item: PolicyOption) => {
Policy.clearCategoryErrors(route.params.policyID, item.keyForList);
Policy.clearCategoryErrors(policyId, item.keyForList);
};

const selectedCategoriesArray = Object.keys(selectedCategories).filter((key) => selectedCategories[key]);

const handleDeleteCategories = () => {
setSelectedCategories({});
deleteWorkspaceCategories(route.params.policyID, selectedCategoriesArray);
deleteWorkspaceCategories(policyId, selectedCategoriesArray);
setDeleteCategoriesConfirmModalVisible(false);
};

Expand Down Expand Up @@ -179,7 +180,7 @@ function WorkspaceCategoriesPage({policy, policyCategories, route}: WorkspaceCat
value: CONST.POLICY.CATEGORIES_BULK_ACTION_TYPES.DISABLE,
onSelected: () => {
setSelectedCategories({});
setWorkspaceCategoryEnabled(route.params.policyID, categoriesToDisable);
setWorkspaceCategoryEnabled(policyId, categoriesToDisable);
},
});
}
Expand All @@ -201,7 +202,7 @@ function WorkspaceCategoriesPage({policy, policyCategories, route}: WorkspaceCat
value: CONST.POLICY.CATEGORIES_BULK_ACTION_TYPES.ENABLE,
onSelected: () => {
setSelectedCategories({});
setWorkspaceCategoryEnabled(route.params.policyID, categoriesToEnable);
setWorkspaceCategoryEnabled(policyId, categoriesToEnable);
},
});
}
Expand Down Expand Up @@ -248,10 +249,10 @@ function WorkspaceCategoriesPage({policy, policyCategories, route}: WorkspaceCat
const shouldShowEmptyState = !categoryList.some((category) => category.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE) && !isLoading;

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_CATEGORIES_ENABLED}
>
<ScreenWrapper
Expand Down Expand Up @@ -280,7 +281,19 @@ function WorkspaceCategoriesPage({policy, policyCategories, route}: WorkspaceCat
/>
{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.categories.subtitle')}</Text>
{Object.keys(policy?.connections ?? {}).length > 0 ? (
<Text>
<Text style={[styles.textNormal, styles.colorMuted]}>{`${translate('workspace.categories.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.categories.subtitle')}</Text>
)}
</View>
{isLoading && (
<ActivityIndicator
Expand Down Expand Up @@ -320,11 +333,4 @@ function WorkspaceCategoriesPage({policy, policyCategories, route}: WorkspaceCat

WorkspaceCategoriesPage.displayName = 'WorkspaceCategoriesPage';

export default withOnyx<WorkspaceCategoriesPageProps, WorkspaceCategoriesOnyxProps>({
policy: {
key: ({route}) => `${ONYXKEYS.COLLECTION.POLICY}${route.params.policyID}`,
},
policyCategories: {
key: ({route}) => `${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${route.params.policyID}`,
},
})(WorkspaceCategoriesPage);
export default withPolicyConnections(WorkspaceCategoriesPage);
2 changes: 2 additions & 0 deletions src/pages/workspace/withPolicyConnections.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,3 +60,5 @@ function withPolicyConnections(WrappedComponent: ComponentType<WithPolicyConnect
}

export default withPolicyConnections;

export type {WithPolicyConnectionsProps};

0 comments on commit f408977

Please sign in to comment.