Skip to content
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

Jump to bottom

[CP Staging] Select subcategory as the default spend category #48708

Merged
merged 6 commits into from
Sep 6, 2024
Merged

[CP Staging] Select subcategory as the default spend category #48708

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
3f03c6e
fix: subcategories bug
BartoszGrajdek Sep 6, 2024
b9c42f5
fix: android closing modal
BartoszGrajdek Sep 6, 2024
4b9d332
Merge remote-tracking branch 'origin/main' into @BartoszGrajdek/spend…
BartoszGrajdek Sep 6, 2024
67a0c77
fix: prettier
BartoszGrajdek Sep 6, 2024
80027ce
fix: react compiler error
BartoszGrajdek Sep 6, 2024
cfbd0b3
refactor: remove noop function
BartoszGrajdek Sep 6, 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
12 changes: 6 additions & 6 deletions src/pages/workspace/categories/SpendCategorySelectorListItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
import React, {useState} from 'react';
import type {SetOptional} from 'type-fest';
import BaseListItem from '@components/SelectionList/BaseListItem';
import type {BaseListItemProps, ListItem} from '@components/SelectionList/types';
import useThemeStyles from '@hooks/useThemeStyles';
import blurActiveElement from '@libs/Accessibility/blurActiveElement';
import CategorySelector from '@pages/workspace/distanceRates/CategorySelector';
import * as Policy from '@userActions/Policy/Policy';

function SpendCategorySelectorListItem<TItem extends ListItem>({item, onSelectRow, isFocused}: BaseListItemProps<TItem>) {
type SpendCategorySelectorListItemProps<TItem extends ListItem> = SetOptional<BaseListItemProps<TItem>, 'onSelectRow'>;

function SpendCategorySelectorListItem<TItem extends ListItem>({item, onSelectRow = () => {}, isFocused}: SpendCategorySelectorListItemProps<TItem>) {
const styles = useThemeStyles();
const [isCategoryPickerVisible, setIsCategoryPickerVisible] = useState(false);
const {policyID, groupID, categoryID} = item;
Expand All @@ -21,10 +23,10 @@ function SpendCategorySelectorListItem<TItem extends ListItem>({item, onSelectRo
};

const setNewCategory = (selectedCategory: ListItem) => {
if (!selectedCategory.text) {
if (!selectedCategory.keyForList) {
return;
}
Policy.setWorkspaceDefaultSpendCategory(policyID, groupID, selectedCategory.text);
Policy.setWorkspaceDefaultSpendCategory(policyID, groupID, selectedCategory.keyForList);
};

return (
Expand All @@ -48,9 +50,7 @@ function SpendCategorySelectorListItem<TItem extends ListItem>({item, onSelectRo
showPickerModal={() => setIsCategoryPickerVisible(true)}
hidePickerModal={() => {
setIsCategoryPickerVisible(false);
blurActiveElement();
}}
shouldUseCustomScrollView
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@BartoszGrajdek While you are around could you clarify why we remove this ?

seems the closing transition is removed becuase of this

Now

Screen.Recording.2024-09-06.at.9.40.18.PM.mov

on staging

Screen.Recording.2024-09-06.at.9.41.51.PM.mov

Copy link
Contributor

@ishpaul777 ishpaul777 Sep 6, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actuall nvm this is not producable on Adhoc build, seems its dev only issue probably becuase my system is slow

Screen.Recording.2024-09-06.at.9.48.23.PM.mov

/>
</BaseListItem>
);
Expand Down
65 changes: 32 additions & 33 deletions src/pages/workspace/categories/WorkspaceCategoriesSettingsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import {View} from 'react-native';
import {useOnyx} from 'react-native-onyx';
import HeaderWithBackButton from '@components/HeaderWithBackButton';
import ScreenWrapper from '@components/ScreenWrapper';
import SelectionList from '@components/SelectionList';
import ScrollView from '@components/ScrollView';
import type {ListItem} from '@components/SelectionList/types';
import Text from '@components/Text';
import useLocalize from '@hooks/useLocalize';
Expand Down Expand Up @@ -37,28 +37,31 @@ function WorkspaceCategoriesSettingsPage({policy, route}: WorkspaceCategoriesSet
setWorkspaceRequiresCategory(policyID, value);
};

const {sections} = useMemo(() => {
if (!(currentPolicy && currentPolicy.mccGroup)) {
return {sections: [{data: []}]};
const policyMccGroup = currentPolicy?.mccGroup;
const listItems = useMemo(() => {
let data: ListItem[] = [];

if (policyMccGroup) {
data = Object.entries(policyMccGroup).map(
([mccKey, mccGroup]) =>
({
categoryID: mccGroup.category,
keyForList: mccKey,
groupID: mccKey,
policyID,
tabIndex: -1,
} as ListItem),
);
}

return {
sections: [
{
data: Object.entries(currentPolicy.mccGroup).map(
([mccKey, mccGroup]) =>
({
categoryID: mccGroup.category,
keyForList: mccKey,
groupID: mccKey,
policyID,
tabIndex: -1,
} as ListItem),
),
},
],
};
}, [currentPolicy, policyID]);
return data.map((item) => (
<SpendCategorySelectorListItem
key={item.keyForList}
item={item}
showTooltip
/>
));
}, [policyMccGroup, policyID]);

const hasEnabledOptions = OptionsListUtils.hasEnabledOptions(policyCategories ?? {});
const isToggleDisabled = !policy?.areCategoriesEnabled || !hasEnabledOptions || isConnectedToAccounting;
Expand Down Expand Up @@ -89,18 +92,14 @@ function WorkspaceCategoriesSettingsPage({policy, route}: WorkspaceCategoriesSet
shouldPlaceSubtitleBelowSwitch
/>
<View style={[styles.containerWithSpaceBetween]}>
{!!currentPolicy && sections[0].data.length > 0 && (
<SelectionList
headerContent={
<View style={[styles.mh5, styles.mt2, styles.mb1]}>
<Text style={[styles.headerText]}>{translate('workspace.categories.defaultSpendCategories')}</Text>
<Text style={[styles.mt1, styles.lh20]}>{translate('workspace.categories.spendCategoriesDescription')}</Text>
</View>
}
sections={sections}
ListItem={SpendCategorySelectorListItem}
onSelectRow={() => {}}
/>
{!!currentPolicy && listItems && (
<>
<View style={[styles.mh5, styles.mt2, styles.mb1]}>
<Text style={[styles.headerText]}>{translate('workspace.categories.defaultSpendCategories')}</Text>
<Text style={[styles.mt1, styles.lh20]}>{translate('workspace.categories.spendCategoriesDescription')}</Text>
</View>
<ScrollView>{listItems}</ScrollView>
</>
)}
</View>
</ScreenWrapper>
Expand Down
Loading