Skip to content

Add offline visual feedback for spend rules #87822

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

Merged
JS00001 merged 6 commits into from
Apr 15, 2026
+92 −56
Merged

Add offline visual feedback for spend rules #87822

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
6cc934b
Add offline visual feedback for spend rules
MelvinBot Apr 13, 2026
0a20039
Merge branch 'main' into claude-spendRuleOfflineFeedback
luacmartins Apr 14, 2026
d76a972
rm conditional param
luacmartins Apr 14, 2026
c6122de
rm spread
luacmartins Apr 14, 2026
6ac8e9d
rm usememo
luacmartins Apr 14, 2026
ce43606
combine filters
luacmartins Apr 14, 2026
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
63 changes: 46 additions & 17 deletions src/libs/actions/Card.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1722,7 +1722,24 @@ function setExpensifyCardRule(domainAccountID: number, cardRuleID: string, spend
key: `${ONYXKEYS.COLLECTION.PRIVATE_EXPENSIFY_CARD_SETTINGS}${domainAccountID}`,
value: {
cardRules: {
[ruleID]: ruleAST,
[ruleID]: {
...ruleAST,
pendingAction: existingRule ? CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE : CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD,
},
},
},
},
];

const successData: Array<OnyxUpdate<typeof ONYXKEYS.COLLECTION.PRIVATE_EXPENSIFY_CARD_SETTINGS>> = [
{
onyxMethod: Onyx.METHOD.MERGE,
key: `${ONYXKEYS.COLLECTION.PRIVATE_EXPENSIFY_CARD_SETTINGS}${domainAccountID}`,
value: {
cardRules: {
[ruleID]: {
pendingAction: null,
},
},
},
},
Expand All @@ -1747,44 +1764,56 @@ function setExpensifyCardRule(domainAccountID: number, cardRuleID: string, spend
cardRuleValue: JSON.stringify(ruleAST),
};

API.write(WRITE_COMMANDS.SET_EXPENSIFY_CARD_RULE, parameters, {optimisticData, failureData});
API.write(WRITE_COMMANDS.SET_EXPENSIFY_CARD_RULE, parameters, {optimisticData, successData, failureData});
}

function deleteExpensifyCardRule(domainAccountID: number, cardRuleID: string, existingRule?: ExpensifyCardRule) {
function deleteExpensifyCardRule(domainAccountID: number, cardRuleID: string, existingRule: ExpensifyCardRule) {
const optimisticData: Array<OnyxUpdate<typeof ONYXKEYS.COLLECTION.PRIVATE_EXPENSIFY_CARD_SETTINGS>> = [
{
onyxMethod: Onyx.METHOD.MERGE,
key: `${ONYXKEYS.COLLECTION.PRIVATE_EXPENSIFY_CARD_SETTINGS}${domainAccountID}`,
value: {
hasOnceLoaded: true,
cardRules: {
[cardRuleID]: {
pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
},
},
},
},
];

const successData: Array<OnyxUpdate<typeof ONYXKEYS.COLLECTION.PRIVATE_EXPENSIFY_CARD_SETTINGS>> = [
{
onyxMethod: Onyx.METHOD.MERGE,
key: `${ONYXKEYS.COLLECTION.PRIVATE_EXPENSIFY_CARD_SETTINGS}${domainAccountID}`,
value: {
cardRules: {
[cardRuleID]: null,
},
},
},
];

const failureData: Array<OnyxUpdate<typeof ONYXKEYS.COLLECTION.PRIVATE_EXPENSIFY_CARD_SETTINGS>> = existingRule
? [
{
onyxMethod: Onyx.METHOD.MERGE,
key: `${ONYXKEYS.COLLECTION.PRIVATE_EXPENSIFY_CARD_SETTINGS}${domainAccountID}`,
value: {
cardRules: {
[cardRuleID]: existingRule,
},
},
},
]
: [];
const failureData: Array<OnyxUpdate<typeof ONYXKEYS.COLLECTION.PRIVATE_EXPENSIFY_CARD_SETTINGS>> = [
{
onyxMethod: Onyx.METHOD.MERGE,
key: `${ONYXKEYS.COLLECTION.PRIVATE_EXPENSIFY_CARD_SETTINGS}${domainAccountID}`,
value: {
cardRules: {
[cardRuleID]: existingRule,
},
},
},
];

const parameters: SetExpensifyCardRuleParams = {
domainAccountID,
cardRuleID,
cardRuleValue: '',
};

API.write(WRITE_COMMANDS.SET_EXPENSIFY_CARD_RULE, parameters, {optimisticData, failureData});
API.write(WRITE_COMMANDS.SET_EXPENSIFY_CARD_RULE, parameters, {optimisticData, successData, failureData});
}

/**
Expand Down
81 changes: 44 additions & 37 deletions src/pages/workspace/rules/SpendRules/SpendRulesSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import ActivityIndicator from '@components/ActivityIndicator';
import Badge from '@components/Badge';
import Icon from '@components/Icon';
import MenuItem from '@components/MenuItem';
import OfflineWithFeedback from '@components/OfflineWithFeedback';
import Section from '@components/Section';
import Text from '@components/Text';
import useConfirmModal from '@hooks/useConfirmModal';
Expand Down Expand Up @@ -145,9 +146,10 @@ function SpendRulesSection({policyID}: SpendRulesSectionProps) {
summaryParts: getSpendRuleSummaryParts(formValues, selectedCurrency, actionLabel, translate),
isBlock: formValues.restrictionAction === CONST.SPEND_RULES.ACTION.BLOCK,
created: cardRule.created,
pendingAction: cardRule.pendingAction,
};
})
.filter((rule) => rule !== undefined)
.filter((rule): rule is NonNullable<typeof rule> => rule !== undefined && (isOffline || rule.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE))
.sort((a, b) => localeCompare(a.created, b.created));

const renderSectionTitle = () => (
Expand Down Expand Up @@ -223,44 +225,49 @@ function SpendRulesSection({policyID}: SpendRulesSectionProps) {
</View>
) : (
createdRules.map((rule) => (
<MenuItem
<OfflineWithFeedback
key={rule.ruleID}
wrapperStyle={[styles.borderedContentCard, styles.mt2, styles.ph4, styles.pv4]}
titleComponent={
<View>
{rule.summaryParts.map((part) => (
<View
key={part.text}
style={[styles.flexRow, styles.gap2, styles.alignItemsStart, styles.mb2]}
>
<Badge
text={part.badgeLabel}
badgeStyles={[styles.ml0, styles.justifyContentCenter, StyleUtils.getMinimumWidth(40)]}
error={!part.isNeutral && rule.isBlock}
success={!part.isNeutral && !rule.isBlock}
isCondensed
/>
<Text
style={[styles.flex1, styles.flexShrink1, styles.themeTextColor]}
numberOfLines={2}
pendingAction={rule.pendingAction}
>
<MenuItem
wrapperStyle={[styles.borderedContentCard, styles.mt2, styles.ph4, styles.pv4]}
titleComponent={
<View>
{rule.summaryParts.map((part) => (
<View
key={part.text}
style={[styles.flexRow, styles.gap2, styles.alignItemsStart, styles.mb2]}
>
{part.text}
</Text>
</View>
))}
<Text
style={[styles.textLabelSupporting, styles.fontSizeLabel]}
numberOfLines={2}
>
{rule.cardSummary}
</Text>
</View>
}
accessibilityLabel={`${rule.summaryParts.map((part) => `${part.badgeLabel}. ${part.text}`).join('. ')}. ${rule.cardSummary}`}
sentryLabel={CONST.SENTRY_LABEL.WORKSPACE.RULES.SPEND_RULE_ITEM}
shouldShowRightIcon
onPress={() => Navigation.navigate(ROUTES.RULES_SPEND_EDIT.getRoute(policyID, rule.ruleID))}
/>
<Badge
text={part.badgeLabel}
badgeStyles={[styles.ml0, styles.justifyContentCenter, StyleUtils.getMinimumWidth(40)]}
error={!part.isNeutral && rule.isBlock}
success={!part.isNeutral && !rule.isBlock}
isCondensed
/>
<Text
style={[styles.flex1, styles.flexShrink1, styles.themeTextColor]}
numberOfLines={2}
>
{part.text}
</Text>
</View>
))}
<Text
style={[styles.textLabelSupporting, styles.fontSizeLabel]}
numberOfLines={2}
>
{rule.cardSummary}
</Text>
</View>
}
accessibilityLabel={`${rule.summaryParts.map((part) => `${part.badgeLabel}. ${part.text}`).join('. ')}. ${rule.cardSummary}`}
sentryLabel={CONST.SENTRY_LABEL.WORKSPACE.RULES.SPEND_RULE_ITEM}
shouldShowRightIcon
disabled={rule.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE}
onPress={() => Navigation.navigate(ROUTES.RULES_SPEND_EDIT.getRoute(policyID, rule.ruleID))}
/>
</OfflineWithFeedback>
))
)}
{!isProduction && (
Expand Down
4 changes: 2 additions & 2 deletions src/types/onyx/ExpensifyCardSettings.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ type ExpensifyCardRuleFilter = {
};

/** Expensify card rule data model */
type ExpensifyCardRule = {
type ExpensifyCardRule = OnyxCommon.OnyxValueWithOfflineFeedback<{
/** Date the rule was created */
created: string;

Expand All @@ -96,7 +96,7 @@ type ExpensifyCardRule = {

/** Action to take when the rule is matched */
action: ValueOf<typeof CONST.SPEND_RULES.ACTION>;
};
}>;

/** Model of Expensify card settings for a workspace - can have nested feed types from backend */
type ExpensifyCardSettings = OnyxCommon.OnyxValueWithOfflineFeedback<
Expand Down
Loading