Update create expense confirmation page to more clearly indicate automation

src/components/Icon/Expensicons.ts

@@ -192,6 +192,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';
@@ -379,6 +380,7 @@ export {
     Send,
     Shield,
     SmartScan,
+    Sparkles,
     Stopwatch,
     Suitcase,
     Sync,

src/components/Image/index.tsx

@@ -18,6 +18,7 @@ function Image({
     loadingIconSize,
     loadingIndicatorStyles,
     imageWidthToCalculateHeight,
+    shouldUseFullHeight,
     ...forwardedProps
 }: ImageProps) {
     const [aspectRatio, setAspectRatio] = useState<string | number | null>(null);
@@ -31,6 +32,12 @@ function Image({
             return {};
         }
 
+        if (shouldUseFullHeight) {
+            return {
+                height: '100%',
+            };
+        }
+
         if (!!imageWidthToCalculateHeight && typeof aspectRatio === 'number') {
             return {
                 width: '100%',
@@ -39,11 +46,11 @@ function Image({
         }
 
         return {aspectRatio, height: 'auto'};
-    }, [shouldSetAspectRatioInStyle, aspectRatio, imageWidthToCalculateHeight]);
+    }, [shouldSetAspectRatioInStyle, aspectRatio, imageWidthToCalculateHeight, shouldUseFullHeight]);
 
     const updateAspectRatio = useCallback(
         (width: number, height: number) => {
-            if (!isObjectPositionTop) {
+            if (!isObjectPositionTop || shouldUseFullHeight) {
                 return;
             }
 
@@ -54,7 +61,7 @@ function Image({
 
             setAspectRatio(height ? width / height : 'auto');
         },
-        [isObjectPositionTop, shouldCalculateAspectRatioForWideImage],
+        [isObjectPositionTop, shouldCalculateAspectRatioForWideImage, shouldUseFullHeight],
     );
 
     const handleLoad = useCallback(
@@ -150,7 +157,7 @@ function Image({
     /**
      * If the image fails to load and the object position is top, we should hide the image by setting the opacity to 0.
      */
-    const shouldOpacityBeZero = isObjectPositionTop && !aspectRatio;
+    const shouldOpacityBeZero = isObjectPositionTop && !aspectRatio && !shouldUseFullHeight;
 
     if (source === undefined && !!forwardedProps?.waitForSession) {
         return undefined;

src/components/Image/types.ts

@@ -69,6 +69,9 @@ type ImageOwnProps = BaseImageProps & {
 
     /** If you want to calculate the image height dynamically instead of using aspectRatio, pass the width in this property */
     imageWidthToCalculateHeight?: number;
+
+    /** Whether the image should use the full height of the container */
+    shouldUseFullHeight?: boolean;
 };
 
 type ImageProps = ImageOwnProps;

src/components/ImageWithSizeCalculation.tsx

@@ -44,6 +44,9 @@ type ImageWithSizeCalculationProps = {
     /** The style of the loading indicator */
     loadingIndicatorStyles?: StyleProp<ViewStyle>;
 
+    /** Whether the image should use the full height of the container */
+    shouldUseFullHeight?: boolean;
+
     /** Callback to be called when the image loads */
     onLoad?: (event: {nativeEvent: {width: number; height: number}}) => void;
 };
@@ -64,6 +67,7 @@ function ImageWithSizeCalculation({
     objectPosition = CONST.IMAGE_OBJECT_POSITION.INITIAL,
     loadingIconSize,
     loadingIndicatorStyles,
+    shouldUseFullHeight,
     onLoad,
 }: ImageWithSizeCalculationProps) {
     const styles = useThemeStyles();
@@ -94,6 +98,7 @@ function ImageWithSizeCalculation({
             objectPosition={objectPosition}
             loadingIconSize={loadingIconSize}
             loadingIndicatorStyles={loadingIndicatorStyles}
+            shouldUseFullHeight={shouldUseFullHeight}
         />
     );
 }

src/components/MenuItem.tsx

@@ -196,6 +196,9 @@ type MenuItemBaseProps = {
     /** 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;
 
@@ -449,6 +452,7 @@ function MenuItem({
     titleContainerStyle,
     subtitle,
     shouldShowBasicTitle,
+    rightLabelIcon,
     label,
     shouldTruncateTitle = false,
     characterLimit = 200,
@@ -934,7 +938,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

@@ -12,6 +12,7 @@
 import usePolicyForMovingExpenses from '@hooks/usePolicyForMovingExpenses';
 import usePreferredPolicy from '@hooks/usePreferredPolicy';
 import usePrevious from '@hooks/usePrevious';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import blurActiveElement from '@libs/Accessibility/blurActiveElement';
 import {
@@ -286,6 +287,7 @@
     const defaultMileageRate = defaultMileageRateDraft ?? defaultMileageRateReal;
 
     const styles = useThemeStyles();
+    const StyleUtils = useStyleUtils();
     const {translate, toLocaleDigit} = useLocalize();
     const currentUserPersonalDetails = useCurrentUserPersonalDetails();
     const {isRestrictedToPreferredPolicy} = usePreferredPolicy();
@@ -383,6 +385,7 @@
 
     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(
@@ -941,7 +944,7 @@
                 onSendMoney?.(paymentMethod);
             }
         },
         [
             routeError,
             transactionID,
             iouType,
@@ -1093,6 +1096,9 @@
         reportID,
     ]);
 
+    const isScan = isScanRequestUtil(transaction);
+    const shouldRestrictHeight = useMemo(() => !showMoreFields && isScan, [isScan, showMoreFields]);
+
     const listFooterContent = (
         <MoneyRequestConfirmationListFooter
             action={action}
@@ -1145,6 +1151,8 @@
             iouIsReimbursable={iouIsReimbursable}
             onToggleReimbursable={onToggleReimbursable}
             isReceiptEditable={isReceiptEditable}
+            showMoreFields={showMoreFields}
+            setShowMoreFields={setShowMoreFields}
             isDescriptionRequired={isDescriptionRequired}
         />
     );
@@ -1164,6 +1172,8 @@
                 containerStyle={[styles.flexBasisAuto]}
                 removeClippedSubviews={false}
                 disableKeyboardShortcuts
+                contentContainerStyle={shouldRestrictHeight ? [StyleUtils.getReceiptContainerStyles()] : undefined}
+                ListFooterComponentStyle={shouldRestrictHeight ? [styles.flex1] : undefined}
             />
         </MouseProvider>
     );