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

Fix - Billable-Billable and "members must categorize all expense" on toggle off text color behavior #53941

Merged
merged 3 commits into from
Dec 12, 2024
+49 −51
Merged

Fix - Billable-Billable and "members must categorize all expense" on toggle off text color behavior #53941

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
01159ea
made billable text color consistent
FitseTLT Dec 10, 2024
dd1060b
minor fix
FitseTLT Dec 11, 2024
766f664
minor fix
FitseTLT Dec 11, 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
3 changes: 0 additions & 3 deletions src/components/MoneyRequestConfirmationListFooter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import {useOnyx} from 'react-native-onyx';
import type {ValueOf} from 'type-fest';
import useLocalize from '@hooks/useLocalize';
import useNetwork from '@hooks/useNetwork';
import useTheme from '@hooks/useTheme';
import useThemeStyles from '@hooks/useThemeStyles';
import * as CurrencyUtils from '@libs/CurrencyUtils';
import DistanceRequestUtils from '@libs/DistanceRequestUtils';
Expand Down Expand Up @@ -216,7 +215,6 @@ function MoneyRequestConfirmationListFooter({
unit,
}: MoneyRequestConfirmationListFooterProps) {
const styles = useThemeStyles();
const theme = useTheme();
const {translate, toLocaleDigit} = useLocalize();
const {isOffline} = useNetwork();
const [allPolicies] = useOnyx(ONYXKEYS.COLLECTION.POLICY);
Expand Down Expand Up @@ -529,7 +527,6 @@ function MoneyRequestConfirmationListFooter({
onToggle={(isOn) => onToggleBillable?.(isOn)}
isActive={iouIsBillable}
disabled={isReadOnly}
titleStyle={!iouIsBillable && {color: theme.textSupporting}}
wrapperStyle={styles.flex1}
/>
</View>
Expand Down
4 changes: 1 addition & 3 deletions src/components/ReportActionItem/MoneyRequestView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ import ViolationMessages from '@components/ViolationMessages';
import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
import useLocalize from '@hooks/useLocalize';
import useNetwork from '@hooks/useNetwork';
import useTheme from '@hooks/useTheme';
import useThemeStyles from '@hooks/useThemeStyles';
import useViolations from '@hooks/useViolations';
import type {ViolationField} from '@hooks/useViolations';
Expand Down Expand Up @@ -79,7 +78,6 @@ const getTransactionID = (report: OnyxEntry<OnyxTypes.Report>, parentReportActio
};

function MoneyRequestView({report, shouldShowAnimatedBackground, readonly = false, updatedTransaction, isFromReviewDuplicates = false}: MoneyRequestViewProps) {
const theme = useTheme();
const styles = useThemeStyles();
const session = useSession();
const {isOffline} = useNetwork();
Expand Down Expand Up @@ -730,7 +728,7 @@ function MoneyRequestView({report, shouldShowAnimatedBackground, readonly = fals
{shouldShowBillable && (
<View style={[styles.flexRow, styles.optionRow, styles.justifyContentBetween, styles.alignItemsCenter, styles.ml5, styles.mr8]}>
<View>
<Text color={!transactionBillable ? theme.textSupporting : undefined}>{translate('common.billable')}</Text>
<Text>{translate('common.billable')}</Text>
{!!getErrorForField('billable') && (
<ViolationMessages
violations={getViolationsForField('billable')}
Expand Down
93 changes: 48 additions & 45 deletions src/pages/workspace/categories/WorkspaceCategoriesSettingsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import {useOnyx} from 'react-native-onyx';
import CategorySelectorModal from '@components/CategorySelector/CategorySelectorModal';
import HeaderWithBackButton from '@components/HeaderWithBackButton';
import ScreenWrapper from '@components/ScreenWrapper';
import ScrollView from '@components/ScrollView';
import SelectionList from '@components/SelectionList';
import type {ListItem} from '@components/SelectionList/types';
import Text from '@components/Text';
Expand Down Expand Up @@ -99,52 +100,54 @@ function WorkspaceCategoriesSettingsPage({policy, route}: WorkspaceCategoriesSet
title={translate('common.settings')}
onBackButtonPress={() => Navigation.goBack(isQuickSettingsFlow ? ROUTES.SETTINGS_CATEGORIES_ROOT.getRoute(policyID, backTo) : undefined)}
/>
<ToggleSettingOptionRow
title={translate('workspace.categories.requiresCategory')}
subtitle={toggleSubtitle}
switchAccessibilityLabel={translate('workspace.categories.requiresCategory')}
isActive={policy?.requiresCategory ?? false}
onToggle={updateWorkspaceRequiresCategory}
pendingAction={policy?.pendingFields?.requiresCategory}
disabled={isToggleDisabled}
wrapperStyle={[styles.pv2, styles.mh5]}
errors={policy?.errorFields?.requiresCategory ?? undefined}
onCloseError={() => Policy.clearPolicyErrorField(policy?.id ?? '-1', 'requiresCategory')}
shouldPlaceSubtitleBelowSwitch
/>
<View style={[styles.sectionDividerLine]} />
<View style={[styles.containerWithSpaceBetween]}>
{!!currentPolicy && (sections.at(0)?.data?.length ?? 0) > 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={(item) => {
if (!item.groupID || !item.categoryID) {
return;
<ScrollView contentContainerStyle={[styles.flexGrow1]}>
<ToggleSettingOptionRow
title={translate('workspace.categories.requiresCategory')}
subtitle={toggleSubtitle}
switchAccessibilityLabel={translate('workspace.categories.requiresCategory')}
isActive={policy?.requiresCategory ?? false}
onToggle={updateWorkspaceRequiresCategory}
pendingAction={policy?.pendingFields?.requiresCategory}
disabled={isToggleDisabled}
wrapperStyle={[styles.pv2, styles.mh5]}
errors={policy?.errorFields?.requiresCategory ?? undefined}
onCloseError={() => Policy.clearPolicyErrorField(policy?.id ?? '-1', 'requiresCategory')}
shouldPlaceSubtitleBelowSwitch
/>
<View style={[styles.sectionDividerLine]} />
<View style={[styles.containerWithSpaceBetween]}>
{!!currentPolicy && (sections.at(0)?.data?.length ?? 0) > 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>
}
setIsSelectorModalVisible(true);
setCategoryID(item.categoryID);
setGroupID(item.groupID);
}}
/>
)}
{!!categoryID && !!groupID && (
<CategorySelectorModal
policyID={policyID}
isVisible={isSelectorModalVisible}
currentCategory={categoryID}
onClose={() => setIsSelectorModalVisible(false)}
onCategorySelected={setNewCategory}
label={groupID[0].toUpperCase() + groupID.slice(1)}
/>
)}
</View>
sections={sections}
ListItem={SpendCategorySelectorListItem}
onSelectRow={(item) => {
if (!item.groupID || !item.categoryID) {
return;
}
setIsSelectorModalVisible(true);
setCategoryID(item.categoryID);
setGroupID(item.groupID);
}}
/>
)}
</View>
</ScrollView>
{!!categoryID && !!groupID && (
<CategorySelectorModal
policyID={policyID}
isVisible={isSelectorModalVisible}
currentCategory={categoryID}
onClose={() => setIsSelectorModalVisible(false)}
onCategorySelected={setNewCategory}
label={groupID[0].toUpperCase() + groupID.slice(1)}
/>
)}
</ScreenWrapper>
</AccessOrNotFoundWrapper>
);
Expand Down
Loading