Skip to content

feat: add warning when cash splits are less than original expense amount #65871

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
pecanoro merged 5 commits into from
Jul 14, 2025
Merged

feat: add warning when cash splits are less than original expense amount #65871

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4e34f23
feat: add warning when cash splits are less than original expense amount
mkzie2 Jul 10, 2025
60bb643
disable spell check for new prop
mkzie2 Jul 10, 2025
b5eae7e
Merge branch 'main' into mkzie2-issue/65632
mkzie2 Jul 11, 2025
2ca2614
fix cspell
mkzie2 Jul 11, 2025
95dfd58
Merge branch 'main' into mkzie2-issue/65632
mkzie2 Jul 14, 2025
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
13 changes: 12 additions & 1 deletion src/components/FormHelpMessage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,12 @@ type FormHelpMessageProps = {

/** Whether should render error text as HTML or as Text */
shouldRenderMessageAsHTML?: boolean;

/** Whether to show information icon */
isInfo?: boolean;
};

function FormHelpMessage({message = '', children, isError = true, style, shouldShowRedDotIndicator = true, shouldRenderMessageAsHTML = false}: FormHelpMessageProps) {
function FormHelpMessage({message = '', children, isError = true, style, shouldShowRedDotIndicator = true, shouldRenderMessageAsHTML = false, isInfo = false}: FormHelpMessageProps) {
const theme = useTheme();
const styles = useThemeStyles();

Expand Down Expand Up @@ -60,6 +63,14 @@ function FormHelpMessage({message = '', children, isError = true, style, shouldS
fill={theme.danger}
/>
)}
{isInfo && (
<Icon
src={Expensicons.Exclamation}
fill={theme.icon}
small
additionalStyles={[styles.mr1]}
/>
)}
<View style={[styles.flex1, isError && shouldShowRedDotIndicator ? styles.ml2 : {}]}>
{children ?? (shouldRenderMessageAsHTML ? <RenderHTML html={HTMLMessage} /> : <Text style={[isError ? styles.formError : styles.formHelp, styles.mb0]}>{message}</Text>)}
</View>
Expand Down
17 changes: 11 additions & 6 deletions src/pages/iou/SplitExpensePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ function SplitExpensePage({route}: SplitExpensePageProps) {

const {shouldUseNarrowLayout} = useResponsiveLayout();

const [errorMessage, setErrorMessage] = React.useState<string | null>(null);
const [errorMessage, setErrorMessage] = React.useState<string>('');
const {currentSearchHash} = useSearchContext();

const [draftTransaction] = useOnyx(`${ONYXKEYS.COLLECTION.SPLIT_TRANSACTION_DRAFT}${transactionID}`, {canBeMissing: false});
Expand All @@ -56,7 +56,7 @@ function SplitExpensePage({route}: SplitExpensePageProps) {
const isCard = isCardTransaction(transaction);

useEffect(() => {
setErrorMessage(null);
setErrorMessage('');
}, [sumOfSplitExpenses, draftTransaction?.comment?.splitExpenses?.length]);

const onAddSplitExpense = useCallback(() => {
Expand Down Expand Up @@ -147,13 +147,18 @@ function SplitExpensePage({route}: SplitExpensePageProps) {
);

const footerContent = useMemo(() => {
const shouldShowWarningMessage = sumOfSplitExpenses < Math.abs(transactionDetailsAmount);
const warningMessage = shouldShowWarningMessage
? translate('iou.totalAmountLessThanOriginal', {amount: convertToDisplayString(Math.abs(transactionDetailsAmount) - sumOfSplitExpenses, transactionDetails.currency)})
: '';
return (
<>
{!!errorMessage && (
{(!!errorMessage || !!warningMessage) && (
<FormHelpMessage
style={[styles.ph1, styles.mb2]}
isError
message={errorMessage}
isError={!!errorMessage}
isInfo={!errorMessage && shouldShowWarningMessage}
message={errorMessage || warningMessage}
/>
)}
<Button
Expand All @@ -167,7 +172,7 @@ function SplitExpensePage({route}: SplitExpensePageProps) {
/>
</>
);
}, [onSaveSplitExpense, styles.mb2, styles.ph1, styles.w100, translate, errorMessage]);
}, [sumOfSplitExpenses, transactionDetailsAmount, translate, transactionDetails.currency, errorMessage, styles.ph1, styles.mb2, styles.w100, onSaveSplitExpense]);

const initiallyFocusedOptionKey = useMemo(
() => sections.at(0)?.data.find((option) => option.transactionID === splitExpenseTransactionID)?.keyForList,
Expand Down
Loading