Merge pull request Expensify#65871 from mkzie2/mkzie2-issue/65632

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

Author: pecanoro

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 && (
+                <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>

src/pages/iou/SplitExpensePage.tsx

@@ -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});
@@ -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) && (
                     <FormHelpMessage
                         style={[styles.ph1, styles.mb2]}
-                        isError
-                        message={errorMessage}
+                        isError={!!errorMessage}
+                        isInfo={!errorMessage && shouldShowWarningMessage}
+                        message={errorMessage || warningMessage}
                     />
                 )}
                 <Button
@@ -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,