Merge pull request Expensify#96203 from emkhalid/fix/95564-reduce-expense-form-scrolling

inimaga · web-flow · commit e51e6af77283 · 2026-07-26T14:08:44.000+01:00
Expense - Reduce confirmation form scrolling
diff --git a/src/components/MoneyRequestConfirmationList.tsx b/src/components/MoneyRequestConfirmationList.tsx
@@ -429,6 +429,7 @@ function MoneyRequestConfirmationList({
 
     const sections = useConfirmationSections({
         isTypeSplit,
+        isTypeInvoice,
         shouldHideToSection,
         shouldForceTopEmptySections,
         participantRowErrors,
@@ -509,7 +510,7 @@ function MoneyRequestConfirmationList({
     const selectionListStyle = {
         containerStyle: [styles.flexBasisAuto],
         contentContainerStyle: isCompactMode ? [styles.flexGrow1] : undefined,
-        listFooterContentStyle: isCompactMode ? [styles.flex1, styles.mv3] : [styles.mv3],
+        listFooterContentStyle: isCompactMode ? [styles.flex1, styles.mb3] : [styles.mb3],
     };
 
     const footerContent = isReadOnly ? undefined : (
diff --git a/src/components/MoneyRequestConfirmationList/hooks/useConfirmationSections.ts b/src/components/MoneyRequestConfirmationList/hooks/useConfirmationSections.ts
@@ -18,6 +18,9 @@ type UseConfirmationSectionsParams = {
     /** Whether the current IOU type is split */
     isTypeSplit: boolean;
 
+    /** Whether the current IOU type is invoice (keeps the "To" header, which pairs with the invoice "Send from" field) */
+    isTypeInvoice?: boolean;
+
     /** Whether the "to" section should be hidden (used when adding directly to a report) */
     shouldHideToSection: boolean;
 
@@ -55,6 +58,7 @@ type UseConfirmationSectionsParams = {
  */
 function useConfirmationSections({
     isTypeSplit,
+    isTypeInvoice = false,
     shouldHideToSection,
     shouldForceTopEmptySections = false,
     participantRowErrors,
@@ -104,7 +108,7 @@ function useConfirmationSections({
                   ];
 
         options.push({
-            title: selectedParticipants.length > 0 ? translate('common.to') : undefined,
+            title: isTypeInvoice && selectedParticipants.length > 0 ? translate('common.to') : undefined,
             data: participantRows,
             sectionIndex: 0,
         });
diff --git a/src/components/MoneyRequestConfirmationListFooter/sections/ReceiptSection.tsx b/src/components/MoneyRequestConfirmationListFooter/sections/ReceiptSection.tsx
@@ -131,7 +131,8 @@ function ReceiptSection({
                 }
                 Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_SCAN.getRoute(CONST.IOU.ACTION.CREATE, iouType, transactionID, reportID, Navigation.getActiveRoute()));
             }}
-            style={[compact.isCompactMode ? undefined : styles.mv3, compact.isCompactMode && compact.compactReceiptStyle ? compact.compactReceiptStyle : styles.moneyRequestViewImage]}
+            isCompact={!compact.isCompactMode}
+            style={[compact.isCompactMode ? undefined : styles.mt2, compact.isCompactMode && compact.compactReceiptStyle ? compact.compactReceiptStyle : undefined]}
         />
     );
 }
diff --git a/src/components/ReceiptEmptyState.tsx b/src/components/ReceiptEmptyState.tsx
@@ -11,7 +11,7 @@ import type {FileObject} from '@src/types/utils/Attachment';
 
 import type {StyleProp, ViewStyle} from 'react-native';
 
-import React, {useEffect, useRef} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 import {View} from 'react-native';
 import Svg, {Path} from 'react-native-svg';
 
@@ -37,6 +37,9 @@ type ReceiptEmptyStateProps = {
     /** Whether the receipt empty state should extend to the full height of the container. */
     shouldUseFullHeight?: boolean;
 
+    /** Whether to render the small banner layout (icon + label in a row) instead of the full-height box */
+    isCompact?: boolean;
+
     style?: StyleProp<ViewStyle>;
 
     /** Callback to be called when the image loads */
@@ -75,6 +78,7 @@ function ReceiptEmptyState({
     isThumbnail = false,
     isInMoneyRequestView = false,
     shouldUseFullHeight = false,
+    isCompact = false,
     style,
     onLoad,
     isDisplayedInWideRHP = false,
@@ -84,20 +88,23 @@ function ReceiptEmptyState({
     const {translate} = useLocalize();
     const theme = useTheme();
     const isLoadedRef = useRef(false);
-    const icons = useMemoizedLazyExpensifyIcons(['Receipt']);
+    const [isHovered, setIsHovered] = useState(false);
+    const icons = useMemoizedLazyExpensifyIcons(['Receipt', 'ReceiptPlus']);
 
     const {validateFiles, PDFValidationComponent, ErrorModal} = useFilesValidation(setReceiptFile);
 
     const Wrapper = onPress ? PressableWithoutFeedback : View;
-    const containerStyle = [
-        styles.alignItemsCenter,
-        styles.justifyContentCenter,
-        styles.moneyRequestViewImage,
-        isDisplayedInWideRHP && !disabled && styles.pb5,
-        isThumbnail && !isInMoneyRequestView ? styles.moneyRequestAttachReceiptThumbnail : styles.moneyRequestAttachReceipt,
-        shouldUseFullHeight && styles.receiptEmptyStateFullHeight,
-        style,
-    ];
+    const containerStyle = isCompact
+        ? [styles.alignItemsCenter, styles.justifyContentCenter, styles.receiptEmptyStateCompact, styles.moneyRequestAttachReceipt, style]
+        : [
+              styles.alignItemsCenter,
+              styles.justifyContentCenter,
+              styles.moneyRequestViewImage,
+              isDisplayedInWideRHP && !disabled && styles.pb5,
+              isThumbnail && !isInMoneyRequestView ? styles.moneyRequestAttachReceiptThumbnail : styles.moneyRequestAttachReceipt,
+              shouldUseFullHeight && styles.receiptEmptyStateFullHeight,
+              style,
+          ];
 
     useEffect(() => {
         if (isLoadedRef.current) {
@@ -124,37 +131,52 @@ function ReceiptEmptyState({
                     }}
                     disabled={disabled}
                     disabledStyle={styles.cursorDefault}
+                    hoverStyle={onPress && isCompact ? styles.hoveredComponentBG : undefined}
+                    onHoverIn={onPress && isCompact ? () => setIsHovered(true) : undefined}
+                    onHoverOut={onPress && isCompact ? () => setIsHovered(false) : undefined}
                     style={containerStyle}
                 >
                     {PDFValidationComponent}
                     {ErrorModal}
-                    <View style={[styles.flex1, styles.justifyContentCenter, styles.alignItemsCenter]}>
-                        <View style={[styles.alignItemsCenter, styles.justifyContentCenter]}>
-                            <View style={styles.pRelative}>
-                                <Icon
-                                    fill={theme.border}
-                                    src={icons.Receipt}
-                                    width={variables.eReceiptEmptyIconWidth}
-                                    height={variables.eReceiptEmptyIconWidth}
-                                />
-                                {!isThumbnail && (
-                                    <View style={[styles.moneyRequestAttachReceiptThumbnailIcon, {width: variables.avatarSizeSmall, height: variables.avatarSizeSmall}]}>
-                                        <ReceiptPlaceholderPlusIcon
-                                            circleFill={theme.success}
-                                            plusFill={theme.receiptPlaceholderPlus}
-                                            size={variables.avatarSizeSmall}
-                                        />
-                                    </View>
+                    {isCompact ? (
+                        <View style={[styles.flexRow, styles.justifyContentCenter, styles.alignItemsCenter, styles.gap2]}>
+                            <Icon
+                                src={icons.ReceiptPlus}
+                                fill={isHovered ? theme.success : theme.icon}
+                                width={variables.iconSizeNormal}
+                                height={variables.iconSizeNormal}
+                            />
+                            <Text style={styles.textStrong}>{translate('dropzone.addReceipt')}</Text>
+                        </View>
+                    ) : (
+                        <View style={[styles.flex1, styles.justifyContentCenter, styles.alignItemsCenter]}>
+                            <View style={[styles.alignItemsCenter, styles.justifyContentCenter]}>
+                                <View style={styles.pRelative}>
+                                    <Icon
+                                        fill={theme.border}
+                                        src={icons.Receipt}
+                                        width={variables.eReceiptEmptyIconWidth}
+                                        height={variables.eReceiptEmptyIconWidth}
+                                    />
+                                    {!isThumbnail && (
+                                        <View style={[styles.moneyRequestAttachReceiptThumbnailIcon, {width: variables.avatarSizeSmall, height: variables.avatarSizeSmall}]}>
+                                            <ReceiptPlaceholderPlusIcon
+                                                circleFill={theme.success}
+                                                plusFill={theme.receiptPlaceholderPlus}
+                                                size={variables.avatarSizeSmall}
+                                            />
+                                        </View>
+                                    )}
+                                </View>
+                                {!isThumbnail && isDisplayedInWideRHP && (
+                                    <>
+                                        <Text style={[styles.textHeadline, styles.mt4]}>{translate('receipt.addAReceipt.phrase1')}</Text>
+                                        <Text style={[styles.textSupporting, styles.textNormal]}>{translate('receipt.addAReceipt.phrase2')}</Text>
+                                    </>
                                 )}
                             </View>
-                            {!isThumbnail && isDisplayedInWideRHP && (
-                                <>
-                                    <Text style={[styles.textHeadline, styles.mt4]}>{translate('receipt.addAReceipt.phrase1')}</Text>
-                                    <Text style={[styles.textSupporting, styles.textNormal]}>{translate('receipt.addAReceipt.phrase2')}</Text>
-                                </>
-                            )}
                         </View>
-                    </View>
+                    )}
                     {isDisplayedInWideRHP && !disabled && <ReceiptAlternativeMethods />}
                 </Wrapper>
             )}
diff --git a/src/styles/index.ts b/src/styles/index.ts
@@ -4968,6 +4968,14 @@ const staticStyles = (theme: ThemeColors) =>
 
         receiptEmptyStateFullHeight: {height: '100%', borderRadius: 12},
 
+        receiptEmptyStateCompact: {
+            ...spacing.mh4,
+            overflow: 'hidden',
+            borderRadius: variables.componentBorderRadiusNormal,
+            height: 52,
+            maxWidth: '100%',
+        },
+
         moneyRequestAttachReceiptThumbnailIcon: {
             position: 'absolute',
             bottom: -4,

Original file line number	Diff line number	Diff line change
`@@ -131,7 +131,8 @@ function ReceiptSection({`
`131`	`131`	`}`
`132`	`132`	`Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_SCAN.getRoute(CONST.IOU.ACTION.CREATE, iouType, transactionID, reportID, Navigation.getActiveRoute()));`
`133`	`133`	`}}`
`134`		`- style={[compact.isCompactMode ? undefined : styles.mv3, compact.isCompactMode && compact.compactReceiptStyle ? compact.compactReceiptStyle : styles.moneyRequestViewImage]}`
	`134`	`+ isCompact={!compact.isCompactMode}`
	`135`	`+ style={[compact.isCompactMode ? undefined : styles.mt2, compact.isCompactMode && compact.compactReceiptStyle ? compact.compactReceiptStyle : undefined]}`
`135`	`136`	`/>`
`136`	`137`	`);`
`137`	`138`	`}`