From 4e34f234bf7a7388e047f7670e8f2a239500db93 Mon Sep 17 00:00:00 2001
From: mkzie2 <mkzie2@gmail.com>
Date: Thu, 10 Jul 2025 22:20:08 +0700
Subject: [PATCH 1/3] feat: add warning when cash splits are less than original
 expense amount

---
 src/components/FormHelpMessage.tsx | 13 ++++++++++++-
 src/pages/iou/SplitExpensePage.tsx | 13 +++++++++----
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/components/FormHelpMessage.tsx b/src/components/FormHelpMessage.tsx
index ab74a7d74b944..16a5689815e09 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 */
+    isInfor?: boolean;
 };
 
-function FormHelpMessage({message = '', children, isError = true, style, shouldShowRedDotIndicator = true, shouldRenderMessageAsHTML = false}: FormHelpMessageProps) {
+function FormHelpMessage({message = '', children, isError = true, style, shouldShowRedDotIndicator = true, shouldRenderMessageAsHTML = false, isInfor = false}: FormHelpMessageProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
 
@@ -60,6 +63,14 @@ function FormHelpMessage({message = '', children, isError = true, style, shouldS
                     fill={theme.danger}
                 />
             )}
+            {isInfor && (
+                <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>
diff --git a/src/pages/iou/SplitExpensePage.tsx b/src/pages/iou/SplitExpensePage.tsx
index 48912fbee9b75..0ebe8151f88b7 100644
--- a/src/pages/iou/SplitExpensePage.tsx
+++ b/src/pages/iou/SplitExpensePage.tsx
@@ -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}
+                        isInfor={!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,

From 60bb643eeda3f766cf900875b5c29c38a7f76b34 Mon Sep 17 00:00:00 2001
From: mkzie2 <mkzie2@gmail.com>
Date: Thu, 10 Jul 2025 22:36:59 +0700
Subject: [PATCH 2/3] disable spell check for new prop

---
 src/components/FormHelpMessage.tsx | 3 +++
 src/pages/iou/SplitExpensePage.tsx | 1 +
 2 files changed, 4 insertions(+)

diff --git a/src/components/FormHelpMessage.tsx b/src/components/FormHelpMessage.tsx
index 16a5689815e09..d98859b0ef8e5 100644
--- a/src/components/FormHelpMessage.tsx
+++ b/src/components/FormHelpMessage.tsx
@@ -30,9 +30,11 @@ type FormHelpMessageProps = {
     shouldRenderMessageAsHTML?: boolean;
 
     /** Whether to show information icon */
+    // cspell:disable-next-line
     isInfor?: boolean;
 };
 
+// cspell:disable-next-line
 function FormHelpMessage({message = '', children, isError = true, style, shouldShowRedDotIndicator = true, shouldRenderMessageAsHTML = false, isInfor = false}: FormHelpMessageProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -63,6 +65,7 @@ function FormHelpMessage({message = '', children, isError = true, style, shouldS
                     fill={theme.danger}
                 />
             )}
+            {/* cspell:disable-next-line */}
             {isInfor && (
                 <Icon
                     src={Expensicons.Exclamation}
diff --git a/src/pages/iou/SplitExpensePage.tsx b/src/pages/iou/SplitExpensePage.tsx
index 0ebe8151f88b7..f1ae6c95da65d 100644
--- a/src/pages/iou/SplitExpensePage.tsx
+++ b/src/pages/iou/SplitExpensePage.tsx
@@ -157,6 +157,7 @@ function SplitExpensePage({route}: SplitExpensePageProps) {
                     <FormHelpMessage
                         style={[styles.ph1, styles.mb2]}
                         isError={!!errorMessage}
+                        // cspell:disable-next-line
                         isInfor={!errorMessage && shouldShowWarningMessage}
                         message={(errorMessage ?? '') || warningMessage}
                     />

From 2ca2614c7eb1ccf8e2f035003c273ae3c1f042c3 Mon Sep 17 00:00:00 2001
From: mkzie2 <mkzie2@gmail.com>
Date: Fri, 11 Jul 2025 23:24:23 +0700
Subject: [PATCH 3/3] fix cspell

---
 src/components/FormHelpMessage.tsx | 9 +++------
 src/pages/iou/SplitExpensePage.tsx | 9 ++++-----
 2 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/src/components/FormHelpMessage.tsx b/src/components/FormHelpMessage.tsx
index d98859b0ef8e5..6f818848cfa5d 100644
--- a/src/components/FormHelpMessage.tsx
+++ b/src/components/FormHelpMessage.tsx
@@ -30,12 +30,10 @@ type FormHelpMessageProps = {
     shouldRenderMessageAsHTML?: boolean;
 
     /** Whether to show information icon */
-    // cspell:disable-next-line
-    isInfor?: boolean;
+    isInfo?: boolean;
 };
 
-// cspell:disable-next-line
-function FormHelpMessage({message = '', children, isError = true, style, shouldShowRedDotIndicator = true, shouldRenderMessageAsHTML = false, isInfor = false}: FormHelpMessageProps) {
+function FormHelpMessage({message = '', children, isError = true, style, shouldShowRedDotIndicator = true, shouldRenderMessageAsHTML = false, isInfo = false}: FormHelpMessageProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
 
@@ -65,8 +63,7 @@ function FormHelpMessage({message = '', children, isError = true, style, shouldS
                     fill={theme.danger}
                 />
             )}
-            {/* cspell:disable-next-line */}
-            {isInfor && (
+            {isInfo && (
                 <Icon
                     src={Expensicons.Exclamation}
                     fill={theme.icon}
diff --git a/src/pages/iou/SplitExpensePage.tsx b/src/pages/iou/SplitExpensePage.tsx
index f1ae6c95da65d..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<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(() => {
@@ -157,9 +157,8 @@ function SplitExpensePage({route}: SplitExpensePageProps) {
                     <FormHelpMessage
                         style={[styles.ph1, styles.mb2]}
                         isError={!!errorMessage}
-                        // cspell:disable-next-line
-                        isInfor={!errorMessage && shouldShowWarningMessage}
-                        message={(errorMessage ?? '') || warningMessage}
+                        isInfo={!errorMessage && shouldShowWarningMessage}
+                        message={errorMessage || warningMessage}
                     />
                 )}
                 <Button