Expense - Reduce confirmation form scrolling

src/components/MoneyRequestConfirmationList.tsx

@@ -429,6 +429,7 @@ function MoneyRequestConfirmationList({
 
     const sections = useConfirmationSections({
         isTypeSplit,
+        isTypeInvoice,
         shouldHideToSection,
         shouldForceTopEmptySections,
         participantRowErrors,

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,
         });

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.mv3, compact.isCompactMode && compact.compactReceiptStyle ? compact.compactReceiptStyle : undefined]}
         />
     );
 }

src/components/ReceiptEmptyState.tsx

@@ -1,6 +1,7 @@
 import useFilesValidation from '@hooks/useFilesValidation';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 
@@ -37,6 +38,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,12 +79,14 @@ function ReceiptEmptyState({
     isThumbnail = false,
     isInMoneyRequestView = false,
     shouldUseFullHeight = false,
+    isCompact = false,
     style,
     onLoad,
     isDisplayedInWideRHP = false,
     setReceiptFile = () => {},
 }: ReceiptEmptyStateProps) {
     const styles = useThemeStyles();
+    const StyleUtils = useStyleUtils();
     const {translate} = useLocalize();
     const theme = useTheme();
     const isLoadedRef = useRef(false);
@@ -89,15 +95,17 @@ function ReceiptEmptyState({
     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) {
@@ -128,33 +136,54 @@ function ReceiptEmptyState({
                 >
                     {PDFValidationComponent}
                     {ErrorModal}
-                    <View style={[styles.flex1, styles.justifyContentCenter, styles.alignItemsCenter]}>
-                        <View style={[styles.alignItemsCenter, styles.justifyContentCenter]}>
+                    {isCompact ? (
+                        <View style={[styles.flexRow, styles.justifyContentCenter, styles.alignItemsCenter, styles.gap3]}>
                             <View style={styles.pRelative}>
                                 <Icon
                                     fill={theme.border}
                                     src={icons.Receipt}
-                                    width={variables.eReceiptEmptyIconWidth}
-                                    height={variables.eReceiptEmptyIconWidth}
+                                    width={variables.iconSizeXLarge}
+                                    height={variables.iconSizeXLarge}
                                 />
-                                {!isThumbnail && (
-                                    <View style={[styles.moneyRequestAttachReceiptThumbnailIcon, {width: variables.avatarSizeSmall, height: variables.avatarSizeSmall}]}>
-                                        <ReceiptPlaceholderPlusIcon
-                                            circleFill={theme.success}
-                                            plusFill={theme.receiptPlaceholderPlus}
-                                            size={variables.avatarSizeSmall}
-                                        />
-                                    </View>
+                                <View style={[styles.moneyRequestAttachReceiptThumbnailIcon, StyleUtils.getWidthAndHeightStyle(variables.avatarSizeSubscript)]}>
+                                    <ReceiptPlaceholderPlusIcon
+                                        circleFill={theme.success}
+                                        plusFill={theme.receiptPlaceholderPlus}
+                                        size={variables.avatarSizeSubscript}
+                                    />
+                                </View>
+                            </View>
+                            <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>
             )}

src/styles/index.ts

@@ -4952,6 +4952,14 @@ const staticStyles = (theme: ThemeColors) =>
 
         receiptEmptyStateFullHeight: {height: '100%', borderRadius: 12},
 
+        receiptEmptyStateCompact: {
+            ...spacing.mh5,
+            overflow: 'hidden',
+            borderRadius: variables.componentBorderRadiusLarge,
+            height: 52,
+            maxWidth: '100%',
+        },
+
         moneyRequestAttachReceiptThumbnailIcon: {
             position: 'absolute',
             bottom: -4,