Update create expense confirmation page to more clearly indicate automation

src/CONST/index.ts

@@ -8109,6 +8109,7 @@ const CONST = {
         },
         SELECTION_LIST_WITH_SECTIONS: {
             BASE_LIST_ITEM: 'SelectionListWithSections-BaseListItem',
+            SELECT_ALL: 'SelectionListWithSections-SelectAll',
         },
         CONTEXT_MENU: {
             REPLY_IN_THREAD: 'ContextMenu-ReplyInThread',

src/components/Icon/Expensicons.ts

@@ -137,6 +137,7 @@ import Instagram from '@assets/images/social-instagram.svg';
 import Linkedin from '@assets/images/social-linkedin.svg';
 import Podcast from '@assets/images/social-podcast.svg';
 import Twitter from '@assets/images/social-twitter.svg';
+import Sparkles from '@assets/images/sparkles.svg';
 import SpreadsheetComputer from '@assets/images/spreadsheet-computer.svg';
 import Star from '@assets/images/Star.svg';
 import Stopwatch from '@assets/images/stopwatch.svg';
@@ -265,6 +266,7 @@ export {
     Scan,
     Send,
     Shield,
+    Sparkles,
     Stopwatch,
     Sync,
     Task,

src/components/Icon/chunks/expensify-icons.chunk.ts

@@ -202,6 +202,7 @@ import Linkedin from '@assets/images/social-linkedin.svg';
 import Podcast from '@assets/images/social-podcast.svg';
 import Twitter from '@assets/images/social-twitter.svg';
 import Youtube from '@assets/images/social-youtube.svg';
+import Sparkles from '@assets/images/sparkles.svg';
 import SpreadsheetComputer from '@assets/images/spreadsheet-computer.svg';
 import Star from '@assets/images/Star.svg';
 import Stopwatch from '@assets/images/stopwatch.svg';
@@ -459,6 +460,7 @@ const Expensicons = {
     Feed,
     Table,
     SpreadsheetComputer,
+    Sparkles,
     Bookmark,
     Star,
     QBDSquare,

src/components/ImageWithLoading.tsx

@@ -87,6 +87,7 @@ function ImageWithLoading({
                 // eslint-disable-next-line react/jsx-props-no-spreading
                 {...rest}
                 style={[styles.w100, styles.h100, style]}
+                resizeMode={resizeMode}
                 onLoadStart={() => {
                     if (isLoadedRef.current ?? isLoading) {
                         return;

src/components/ImageWithSizeCalculation.tsx

@@ -1,5 +1,5 @@
 import React, {useMemo} from 'react';
-import type {ImageSourcePropType, StyleProp, ViewStyle} from 'react-native';
+import type {ImageResizeMode, ImageSourcePropType, StyleProp, ViewStyle} from 'react-native';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Log from '@libs/Log';
 import CONST from '@src/CONST';
@@ -46,6 +46,9 @@ type ImageWithSizeCalculationProps = {
 
     /** Callback to be called when the image loads */
     onLoad?: (event: {nativeEvent: {width: number; height: number}}) => void;
+
+    /** The resize mode of the image */
+    resizeMode?: ImageResizeMode;
 };
 
 /**
@@ -65,6 +68,7 @@ function ImageWithSizeCalculation({
     loadingIconSize,
     loadingIndicatorStyles,
     onLoad,
+    resizeMode,
 }: ImageWithSizeCalculationProps) {
     const styles = useThemeStyles();
 
@@ -82,7 +86,7 @@ function ImageWithSizeCalculation({
             source={source}
             aria-label={altText}
             isAuthTokenRequired={isAuthTokenRequired}
-            resizeMode={RESIZE_MODES.cover}
+            resizeMode={resizeMode ?? RESIZE_MODES.cover}
             onError={onError}
             onLoad={(event: OnLoadNativeEvent) => {
                 onMeasure({

src/components/MenuItem.tsx

@@ -211,6 +211,9 @@ type MenuItemBaseProps = ForwardedFSClassProps &
         /** Label to be displayed on the right */
         rightLabel?: string;
 
+        /** Icon to be displayed next to the right label */
+        rightLabelIcon?: IconAsset;
+
         /** Text to display for the item */
         title?: string;
 
@@ -498,6 +501,7 @@ function MenuItem({
     titleContainerStyle,
     subtitle,
     shouldShowBasicTitle,
+    rightLabelIcon,
     label,
     shouldTruncateTitle = false,
     characterLimit = 200,
@@ -1018,7 +1022,15 @@ function MenuItem({
                                                     </View>
                                                 )}
                                                 {!title && !!rightLabel && !errorText && (
-                                                    <View style={styles.justifyContentCenter}>
+                                                    <View style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentCenter, styles.gap1]}>
+                                                        {!!rightLabelIcon && (
+                                                            <Icon
+                                                                src={rightLabelIcon}
+                                                                fill={theme.icon}
+                                                                width={variables.iconSizeSmall}
+                                                                height={variables.iconSizeSmall}
+                                                            />
+                                                        )}
                                                         <Text style={styles.rightLabelMenuItem}>{rightLabel}</Text>
                                                     </View>
                                                 )}

src/components/MoneyRequestConfirmationList.tsx

@@ -77,6 +77,7 @@ import type {DropdownOption} from './ButtonWithDropdownMenu/types';
 import {DelegateNoAccessContext} from './DelegateNoAccessModalProvider';
 import FormHelpMessage from './FormHelpMessage';
 import MoneyRequestAmountInput from './MoneyRequestAmountInput';
+import getContentContainerStyle from './MoneyRequestConfirmationList/getCompactModeListStyles';
 import MoneyRequestConfirmationListFooter from './MoneyRequestConfirmationListFooter';
 import {PressableWithFeedback} from './Pressable';
 import {useProductTrainingContext} from './ProductTrainingContext';
@@ -432,6 +433,7 @@ function MoneyRequestConfirmationList({
 
     const [didConfirm, setDidConfirm] = useState(isConfirmed);
     const [didConfirmSplit, setDidConfirmSplit] = useState(false);
+    const [showMoreFields, setShowMoreFields] = useState(false);
 
     // Clear the form error if it's set to one among the list passed as an argument
     const clearFormErrors = useCallback(
@@ -1242,6 +1244,8 @@ function MoneyRequestConfirmationList({
         reportID,
     ]);
 
+    const isCompactMode = useMemo(() => !showMoreFields && isScanRequest, [isScanRequest, showMoreFields]);
+
     const listFooterContent = (
         <MoneyRequestConfirmationListFooter
             action={action}
@@ -1300,6 +1304,8 @@ function MoneyRequestConfirmationList({
             onToggleReimbursable={onToggleReimbursable}
             isReceiptEditable={isReceiptEditable}
             isDescriptionRequired={isDescriptionRequired}
+            showMoreFields={showMoreFields}
+            setShowMoreFields={setShowMoreFields}
         />
     );
 
@@ -1318,6 +1324,8 @@ function MoneyRequestConfirmationList({
                 containerStyle={[styles.flexBasisAuto]}
                 removeClippedSubviews={false}
                 disableKeyboardShortcuts
+                contentContainerStyle={getContentContainerStyle(isCompactMode, styles.flex1).contentContainerStyle}
+                ListFooterComponentStyle={isCompactMode ? [styles.flex1] : undefined}
             />
         </MouseProvider>
     );

src/components/MoneyRequestConfirmationList/getCompactModeListStyles/index.native.ts

@@ -0,0 +1,7 @@
+import type GetContentContainerStyle from './types';
+
+const getContentContainerStyle: GetContentContainerStyle = () => ({
+    contentContainerStyle: undefined,
+});
+
+export default getContentContainerStyle;

src/components/MoneyRequestConfirmationList/getCompactModeListStyles/index.ts

@@ -0,0 +1,7 @@
+import type GetContentContainerStyle from './types';
+
+const getContentContainerStyle: GetContentContainerStyle = (isCompactMode, flex1Style) => ({
+    contentContainerStyle: isCompactMode ? [flex1Style] : undefined,
+});
+
+export default getContentContainerStyle;

src/components/MoneyRequestConfirmationList/getCompactModeListStyles/types.ts

@@ -0,0 +1,10 @@
+import type {StyleProp, ViewStyle} from 'react-native';
+
+type GetContentContainerStyle = (
+    isCompactMode: boolean,
+    flex1Style: ViewStyle,
+) => {
+    contentContainerStyle: StyleProp<ViewStyle> | undefined;
+};
+
+export default GetContentContainerStyle;