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) && ( )}