Better RHP view v4 - Use wide RHP for receipts

src/components/EReceipt.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useEffect, useRef} from 'react';
 import {View} from 'react-native';
 import useEReceipt from '@hooks/useEReceipt';
 import useLocalize from '@hooks/useLocalize';
@@ -29,11 +29,14 @@ type EReceiptProps = {
 
     /** Where it is the preview */
     isThumbnail?: boolean;
+
+    /** Callback to be called when the image loads */
+    onLoad?: () => void;
 };
 
 const receiptMCCSize: number = variables.eReceiptMCCHeightWidthMedium;
 const backgroundImageMinWidth: number = variables.eReceiptBackgroundImageMinWidth;
-function EReceipt({transactionID, transactionItem, isThumbnail = false}: EReceiptProps) {
+function EReceipt({transactionID, transactionItem, onLoad, isThumbnail = false}: EReceiptProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const {translate} = useLocalize();
@@ -43,6 +46,8 @@ function EReceipt({transactionID, transactionItem, isThumbnail = false}: EReceip
 
     const {primaryColor, secondaryColor, titleColor, MCCIcon, tripIcon, backgroundImage} = useEReceipt(transactionItem ?? transaction);
 
+    const isLoadedRef = useRef(false);
+
     const {
         amount: transactionAmount,
         currency: transactionCurrency,
@@ -59,6 +64,14 @@ function EReceipt({transactionID, transactionItem, isThumbnail = false}: EReceip
     const primaryTextColorStyle = primaryColor ? StyleUtils.getColorStyle(primaryColor) : undefined;
     const titleTextColorStyle = titleColor ? StyleUtils.getColorStyle(titleColor) : undefined;
 
+    useEffect(() => {
+        if (isLoadedRef.current) {
+            return;
+        }
+        isLoadedRef.current = true;
+        onLoad?.();
+    }, [onLoad]);
+
     return (
         <View
             style={[

src/components/EReceiptWithSizeCalculation.tsx

@@ -16,6 +16,9 @@ type EReceiptWithSizeCalculationProps = {
 
     /** Whether the eReceipt should preserve aspect ratio */
     shouldUseAspectRatio?: boolean;
+
+    /** Callback to be called when the image loads */
+    onLoad?: () => void;
 };
 
 const eReceiptAspectRatio = variables.eReceiptBGHWidth / variables.eReceiptBGHeight;

src/components/Image/index.tsx

@@ -10,12 +10,14 @@ import type {ImageOnLoadEvent, ImageProps} from './types';
 
 function Image({
     source: propsSource,
+    shouldCalculateAspectRatioForWideImage = false,
     isAuthTokenRequired = false,
     onLoad,
     objectPosition = CONST.IMAGE_OBJECT_POSITION.INITIAL,
     style,
     loadingIconSize,
     loadingIndicatorStyles,
+    imageWidthToCalculateHeight,
     ...forwardedProps
 }: ImageProps) {
     const [aspectRatio, setAspectRatio] = useState<string | number | null>(null);
@@ -24,20 +26,35 @@ function Image({
 
     const {shouldSetAspectRatioInStyle} = useContext(ImageBehaviorContext);
 
+    const aspectRatioStyle = useMemo(() => {
+        if (!shouldSetAspectRatioInStyle || !aspectRatio) {
+            return {};
+        }
+
+        if (!!imageWidthToCalculateHeight && typeof aspectRatio === 'number') {
+            return {
+                width: '100%',
+                height: imageWidthToCalculateHeight / aspectRatio,
+            };
+        }
+
+        return {aspectRatio, height: 'auto'};
+    }, [shouldSetAspectRatioInStyle, aspectRatio, imageWidthToCalculateHeight]);
+
     const updateAspectRatio = useCallback(
         (width: number, height: number) => {
             if (!isObjectPositionTop) {
                 return;
             }
 
-            if (width > height) {
+            if (width > height && !shouldCalculateAspectRatioForWideImage) {
                 setAspectRatio(1);
                 return;
             }
 
             setAspectRatio(height ? width / height : 'auto');
         },
-        [isObjectPositionTop],
+        [isObjectPositionTop, shouldCalculateAspectRatioForWideImage],
     );
 
     const handleLoad = useCallback(
@@ -146,17 +163,21 @@ function Image({
             />
         );
     }
+
     return (
         <BaseImage
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...forwardedProps}
             onLoad={handleLoad}
-            style={[style, shouldSetAspectRatioInStyle && aspectRatio ? {aspectRatio, height: 'auto'} : {}, shouldOpacityBeZero && {opacity: 0}]}
+            style={[style, aspectRatioStyle, shouldOpacityBeZero && {opacity: 0}]}
             source={source}
         />
     );
 }
 
 Image.displayName = 'Image';
 
-export default React.memo(Image, (prevProps: ImageProps, nextProps: ImageProps) => prevProps.source === nextProps.source);
+export default React.memo(
+    Image,
+    (prevProps: ImageProps, nextProps: ImageProps) => prevProps.source === nextProps.source && prevProps.imageWidthToCalculateHeight === nextProps.imageWidthToCalculateHeight,
+);

src/components/Image/types.ts

@@ -30,6 +30,9 @@ type BaseImageProps = {
 };
 
 type ImageOwnProps = BaseImageProps & {
+    /** By default, when the image width is greater than its height, its aspectRatio is set to 1. If you want the aspectRatio to be calculated instead of set to 1 in these cases, set the value of this prop to true  */
+    shouldCalculateAspectRatioForWideImage?: boolean;
+
     /** Should an auth token be included in the image request */
     isAuthTokenRequired?: boolean;
 
@@ -63,6 +66,9 @@ type ImageOwnProps = BaseImageProps & {
      *  cf https://github.com/Expensify/App/issues/51888
      */
     waitForSession?: () => void;
+
+    /** If you want to calculate the image height dynamically instead of using aspectRatio, pass the width in this property */
+    imageWidthToCalculateHeight?: number;
 };
 
 type ImageProps = ImageOwnProps;

src/components/ImageWithLoading.tsx

@@ -1,6 +1,6 @@
 import delay from 'lodash/delay';
 import React, {useEffect, useRef, useState} from 'react';
-import type {StyleProp, ViewStyle} from 'react-native';
+import type {LayoutChangeEvent, StyleProp, ViewStyle} from 'react-native';
 import {View} from 'react-native';
 import useNetwork from '@hooks/useNetwork';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -21,9 +21,12 @@ type ImageWithSizeLoadingProps = {
 
     /** Whether to show offline indicator */
     shouldShowOfflineIndicator?: boolean;
+
+    /** Invoked on mount and layout changes */
+    onLayout?: (event: LayoutChangeEvent) => void;
 } & ImageProps;
 
-function ImageWithSizeCalculation({
+function ImageWithLoading({
     onError,
     containerStyles,
     shouldShowOfflineIndicator = true,
@@ -32,6 +35,7 @@ function ImageWithSizeCalculation({
     loadingIndicatorStyles,
     resizeMode,
     onLoad,
+    onLayout,
     ...rest
 }: ImageWithSizeLoadingProps) {
     const styles = useThemeStyles();
@@ -74,7 +78,10 @@ function ImageWithSizeCalculation({
     }, [isLoading]);
 
     return (
-        <View style={[styles.w100, styles.h100, containerStyles]}>
+        <View
+            style={[styles.w100, styles.h100, containerStyles]}
+            onLayout={onLayout}
+        >
             <Image
                 // eslint-disable-next-line react/jsx-props-no-spreading
                 {...rest}
@@ -111,5 +118,5 @@ function ImageWithSizeCalculation({
     );
 }
 
-ImageWithSizeCalculation.displayName = 'ImageWithSizeCalculation';
-export default React.memo(ImageWithSizeCalculation);
+ImageWithLoading.displayName = 'ImageWithLoading';
+export default React.memo(ImageWithLoading);

src/components/ImageWithSizeCalculation.tsx

@@ -43,6 +43,9 @@ type ImageWithSizeCalculationProps = {
 
     /** The style of the loading indicator */
     loadingIndicatorStyles?: StyleProp<ViewStyle>;
+
+    /** Callback to be called when the image loads */
+    onLoad?: (event: {nativeEvent: {width: number; height: number}}) => void;
 };
 
 /**
@@ -61,6 +64,7 @@ function ImageWithSizeCalculation({
     objectPosition = CONST.IMAGE_OBJECT_POSITION.INITIAL,
     loadingIconSize,
     loadingIndicatorStyles,
+    onLoad,
 }: ImageWithSizeCalculationProps) {
     const styles = useThemeStyles();
 
@@ -85,6 +89,7 @@ function ImageWithSizeCalculation({
                     width: event.nativeEvent.width,
                     height: event.nativeEvent.height,
                 });
+                onLoad?.(event);
             }}
             objectPosition={objectPosition}
             loadingIconSize={loadingIconSize}

src/components/MoneyReportHeader.tsx

@@ -138,6 +138,7 @@ import ProcessMoneyReportHoldMenu from './ProcessMoneyReportHoldMenu';
 import {useSearchContext} from './Search/SearchContext';
 import AnimatedSettlementButton from './SettlementButton/AnimatedSettlementButton';
 import Text from './Text';
+import {WideRHPContext} from './WideRHPContextProvider';
 
 type MoneyReportHeaderProps = {
     /** The report currently being looked at */
@@ -303,6 +304,9 @@ function MoneyReportHeader({
 
     const {selectedTransactionIDs, removeTransaction, clearSelectedTransactions, currentSearchQueryJSON, currentSearchKey} = useSearchContext();
 
+    const {wideRHPRouteKeys} = useContext(WideRHPContext);
+    const shouldDisplayNarrowMoreButton = !shouldDisplayNarrowVersion || (wideRHPRouteKeys.length > 0 && !isSmallScreenWidth);
+
     const beginExportWithTemplate = useCallback(
         (templateName: string, templateType: string, transactionIDList: string[], policyID?: string) => {
             if (!moneyRequestReport) {
@@ -1200,7 +1204,7 @@ function MoneyReportHeader({
                 shouldShowBorderBottom={false}
                 shouldEnableDetailPageNavigation
             >
-                {!shouldDisplayNarrowVersion && (
+                {shouldDisplayNarrowMoreButton && (
                     <View style={[styles.flexRow, styles.gap2]}>
                         {!!primaryAction && !shouldShowSelectedTransactionsButton && primaryActionsImplementation[primaryAction]}
                         {!!applicableSecondaryActions.length && !shouldShowSelectedTransactionsButton && KYCMoreDropdown}
@@ -1218,8 +1222,7 @@ function MoneyReportHeader({
                     </View>
                 )}
             </HeaderWithBackButton>
-
-            {shouldDisplayNarrowVersion &&
+            {!shouldDisplayNarrowMoreButton &&
                 (shouldShowSelectedTransactionsButton ? (
                     <View style={[styles.dFlex, styles.w100, styles.ph5]}>
                         <ButtonWithDropdownMenu

src/components/MoneyRequestHeader.tsx

@@ -60,6 +60,7 @@ import type {MoneyRequestHeaderStatusBarProps} from './MoneyRequestHeaderStatusB
 import MoneyRequestHeaderStatusBar from './MoneyRequestHeaderStatusBar';
 import MoneyRequestReportTransactionsNavigation from './MoneyRequestReportView/MoneyRequestReportTransactionsNavigation';
 import {useSearchContext} from './Search/SearchContext';
+import {WideRHPContext} from './WideRHPContextProvider';
 
 type MoneyRequestHeaderProps = {
     /** The report currently being looked at */
@@ -121,6 +122,8 @@ function MoneyRequestHeader({report, parentReportAction, policy, onBackButtonPre
     // If the parent report is a selfDM, it should always be opened in the Inbox tab
     const shouldOpenParentReportInCurrentTab = !isSelfDM(parentReport);
 
+    const {wideRHPRouteKeys} = useContext(WideRHPContext);
+
     const markAsCash = useCallback(() => {
         markAsCashAction(transaction?.transactionID, reportID);
     }, [reportID, transaction?.transactionID]);
@@ -349,6 +352,7 @@ function MoneyRequestHeader({report, parentReportAction, policy, onBackButtonPre
     };
 
     const applicableSecondaryActions = secondaryActions.map((action) => secondaryActionsImplementation[action]);
+    const shouldDisplayNarrowMoreButton = !shouldUseNarrowLayout || (wideRHPRouteKeys.length > 0 && !isSmallScreenWidth);
 
     return (
         <View style={[styles.pl0, styles.borderBottom]}>
@@ -372,8 +376,8 @@ function MoneyRequestHeader({report, parentReportAction, policy, onBackButtonPre
                 shouldEnableDetailPageNavigation
                 openParentReportInCurrentTab={shouldOpenParentReportInCurrentTab}
             >
-                {!shouldUseNarrowLayout && (
-                    <View style={[styles.flexRow, styles.gap2]}>
+                {shouldDisplayNarrowMoreButton && (
+                    <View style={[styles.flexRow, styles.gap2, shouldDisplayTransactionNavigation && styles.mr3]}>
                         {!!primaryAction && primaryActionImplementation[primaryAction]}
                         {!!applicableSecondaryActions.length && (
                             <ButtonWithDropdownMenu
@@ -389,7 +393,7 @@ function MoneyRequestHeader({report, parentReportAction, policy, onBackButtonPre
                 )}
                 {shouldDisplayTransactionNavigation && <MoneyRequestReportTransactionsNavigation currentReportID={reportID} />}
             </HeaderWithBackButton>
-            {shouldUseNarrowLayout && (
+            {!shouldDisplayNarrowMoreButton && (
                 <View style={[styles.flexRow, styles.gap2, styles.pb3, styles.ph5, styles.w100, styles.alignItemsCenter, styles.justifyContentCenter]}>
                     {!!primaryAction && <View style={[styles.flexGrow4]}>{primaryActionImplementation[primaryAction]}</View>}
                     {!!applicableSecondaryActions.length && (

src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx

@@ -1,6 +1,6 @@
 import {useFocusEffect} from '@react-navigation/native';
 import isEmpty from 'lodash/isEmpty';
-import React, {memo, useCallback, useMemo, useState} from 'react';
+import React, {memo, useCallback, useContext, useMemo, useState} from 'react';
 import {View} from 'react-native';
 import type {TupleToUnion} from 'type-fest';
 import Checkbox from '@components/Checkbox';
@@ -11,6 +11,7 @@ import {usePersonalDetails, useSession} from '@components/OnyxListItemProvider';
 import {useSearchContext} from '@components/Search/SearchContext';
 import type {SearchColumnType, SortOrder} from '@components/Search/types';
 import Text from '@components/Text';
+import {WideRHPContext} from '@components/WideRHPContextProvider';
 import useCopySelectionHelper from '@hooks/useCopySelectionHelper';
 import useLocalize from '@hooks/useLocalize';
 import useMobileSelectionMode from '@hooks/useMobileSelectionMode';
@@ -139,6 +140,7 @@ function MoneyRequestReportTransactionList({
     const {translate, localeCompare} = useLocalize();
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
     const {shouldUseNarrowLayout, isSmallScreenWidth, isMediumScreenWidth} = useResponsiveLayout();
+    const {markReportIDAsExpense} = useContext(WideRHPContext);
     const [isModalVisible, setIsModalVisible] = useState(false);
     const [selectedTransactionID, setSelectedTransactionID] = useState<string>('');
 
@@ -229,10 +231,13 @@ function MoneyRequestReportTransactionList({
             // to display prev/next arrows in RHP for navigation
             const sortedSiblingTransactionReportIDs = getThreadReportIDsForTransactions(reportActions, sortedTransactions);
             setActiveTransactionThreadIDs(sortedSiblingTransactionReportIDs).then(() => {
+                if (reportIDToNavigate) {
+                    markReportIDAsExpense(reportIDToNavigate);
+                }
                 Navigation.navigate(ROUTES.SEARCH_REPORT.getRoute(routeParams));
             });
         },
-        [report, reportActions, sortedTransactions],
+        [report, reportActions, sortedTransactions, markReportIDAsExpense],
     );
 
     const {amountColumnSize, dateColumnSize, taxAmountColumnSize} = useMemo(() => {

src/components/MoneyRequestReportView/MoneyRequestReportTransactionsNavigation.tsx

@@ -1,6 +1,7 @@
 import {findFocusedRoute} from '@react-navigation/native';
-import React, {useEffect, useMemo} from 'react';
+import React, {useContext, useEffect, useMemo} from 'react';
 import PrevNextButtons from '@components/PrevNextButtons';
+import {WideRHPContext} from '@components/WideRHPContextProvider';
 import useOnyx from '@hooks/useOnyx';
 import {clearActiveTransactionThreadIDs} from '@libs/actions/TransactionThreadNavigation';
 import Navigation from '@navigation/Navigation';
@@ -19,6 +20,8 @@ function MoneyRequestReportTransactionsNavigation({currentReportID}: MoneyReques
         canBeMissing: true,
     });
 
+    const {markReportIDAsExpense} = useContext(WideRHPContext);
+
     const {prevReportID, nextReportID} = useMemo(() => {
         if (!reportIDsList || reportIDsList.length < 2) {
             return {prevReportID: undefined, nextReportID: undefined};
@@ -57,11 +60,17 @@ function MoneyRequestReportTransactionsNavigation({currentReportID}: MoneyReques
             onNext={(e) => {
                 const backTo = Navigation.getActiveRoute();
                 e?.preventDefault();
+                if (nextReportID) {
+                    markReportIDAsExpense(nextReportID);
+                }
                 Navigation.navigate(ROUTES.SEARCH_REPORT.getRoute({reportID: nextReportID, backTo}), {forceReplace: true});
             }}
             onPrevious={(e) => {
                 const backTo = Navigation.getActiveRoute();
                 e?.preventDefault();
+                if (prevReportID) {
+                    markReportIDAsExpense(prevReportID);
+                }
                 Navigation.navigate(ROUTES.SEARCH_REPORT.getRoute({reportID: prevReportID, backTo}), {forceReplace: true});
             }}
         />