-
Notifications
You must be signed in to change notification settings - Fork 2.7k
/
WorkspaceCategoriesSettingsPage.tsx
70 lines (63 loc) · 3.57 KB
/
WorkspaceCategoriesSettingsPage.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import React from 'react';
import {View} from 'react-native';
import {useOnyx} from 'react-native-onyx';
import HeaderWithBackButton from '@components/HeaderWithBackButton';
import ScreenWrapper from '@components/ScreenWrapper';
import useLocalize from '@hooks/useLocalize';
import useThemeStyles from '@hooks/useThemeStyles';
import * as OptionsListUtils from '@libs/OptionsListUtils';
import * as PolicyUtils from '@libs/PolicyUtils';
import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
import type {WithPolicyConnectionsProps} from '@pages/workspace/withPolicyConnections';
import withPolicyConnections from '@pages/workspace/withPolicyConnections';
import ToggleSettingOptionRow from '@pages/workspace/workflows/ToggleSettingsOptionRow';
import {setWorkspaceRequiresCategory} from '@userActions/Policy/Category';
import * as Policy from '@userActions/Policy/Policy';
import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
type WorkspaceCategoriesSettingsPageProps = WithPolicyConnectionsProps;
function WorkspaceCategoriesSettingsPage({policy, route}: WorkspaceCategoriesSettingsPageProps) {
const styles = useThemeStyles();
const {translate} = useLocalize();
const isConnectedToAccounting = Object.keys(policy?.connections ?? {}).length > 0;
const policyID = route.params.policyID ?? '-1';
const [policyCategories] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyID}`);
const currentConnectionName = PolicyUtils.getCurrentConnectionName(policy);
const toggleSubtitle = `${translate('workspace.categories.needCategoryForExportToIntegration')} ${currentConnectionName}.`;
const updateWorkspaceRequiresCategory = (value: boolean) => {
setWorkspaceRequiresCategory(policyID, value);
};
const hasEnabledOptions = OptionsListUtils.hasEnabledOptions(policyCategories ?? {});
return (
<AccessOrNotFoundWrapper
policyID={policyID}
accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]}
featureName={CONST.POLICY.MORE_FEATURES.ARE_CATEGORIES_ENABLED}
>
<ScreenWrapper
includeSafeAreaPaddingBottom={false}
style={[styles.defaultModalContainer]}
testID={WorkspaceCategoriesSettingsPage.displayName}
>
<HeaderWithBackButton title={translate('common.settings')} />
<View style={styles.flexGrow1}>
<ToggleSettingOptionRow
title={translate('workspace.categories.requiresCategory')}
subtitle={toggleSubtitle}
switchAccessibilityLabel={toggleSubtitle}
isActive={policy?.requiresCategory ?? false}
onToggle={updateWorkspaceRequiresCategory}
pendingAction={policy?.pendingFields?.requiresCategory}
disabled={!policy?.areCategoriesEnabled || !hasEnabledOptions || isConnectedToAccounting}
wrapperStyle={[styles.mt2, styles.mh4]}
errors={policy?.errorFields?.requiresCategory ?? undefined}
onCloseError={() => Policy.clearPolicyErrorField(policy?.id ?? '-1', 'requiresCategory')}
shouldPlaceSubtitleBelowSwitch
/>
</View>
</ScreenWrapper>
</AccessOrNotFoundWrapper>
);
}
WorkspaceCategoriesSettingsPage.displayName = 'WorkspaceCategoriesSettingsPage';
export default withPolicyConnections(WorkspaceCategoriesSettingsPage);