diff --git a/src/components/FormHelpMessage.tsx b/src/components/FormHelpMessage.tsx
index ab74a7d74b944..6f818848cfa5d 100644
--- a/src/components/FormHelpMessage.tsx
+++ b/src/components/FormHelpMessage.tsx
@@ -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();
@@ -60,6 +63,14 @@ function FormHelpMessage({message = '', children, isError = true, style, shouldS
fill={theme.danger}
/>
)}
+ {isInfo && (
+
+ )}
{children ?? (shouldRenderMessageAsHTML ? : {message})}
diff --git a/src/pages/iou/SplitExpensePage.tsx b/src/pages/iou/SplitExpensePage.tsx
index 48912fbee9b75..b67be6b962491 100644
--- a/src/pages/iou/SplitExpensePage.tsx
+++ b/src/pages/iou/SplitExpensePage.tsx
@@ -40,7 +40,7 @@ function SplitExpensePage({route}: SplitExpensePageProps) {
const {shouldUseNarrowLayout} = useResponsiveLayout();
- const [errorMessage, setErrorMessage] = React.useState(null);
+ const [errorMessage, setErrorMessage] = React.useState('');
const {currentSearchHash} = useSearchContext();
const [draftTransaction] = useOnyx(`${ONYXKEYS.COLLECTION.SPLIT_TRANSACTION_DRAFT}${transactionID}`, {canBeMissing: false});
@@ -56,7 +56,7 @@ function SplitExpensePage({route}: SplitExpensePageProps) {
const isCard = isCardTransaction(transaction);
useEffect(() => {
- setErrorMessage(null);
+ setErrorMessage('');
}, [sumOfSplitExpenses, draftTransaction?.comment?.splitExpenses?.length]);
const onAddSplitExpense = useCallback(() => {
@@ -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) && (
)}
>
);
- }, [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,