MoneyRequestReportTransactionItem.tsx

import {getButtonRole} from '@components/Button/utils';
import OfflineWithFeedback from '@components/OfflineWithFeedback';
import {PressableWithFeedback} from '@components/Pressable';
import type {SearchColumnType, TableColumnSize} from '@components/Search/types';
import TransactionItemRow from '@components/TransactionItemRow';
import {useEditingCellState} from '@components/TransactionItemRow/EditableCell';

import useAnimatedHighlightStyle from '@hooks/useAnimatedHighlightStyle';
import useLocalize from '@hooks/useLocalize';
import useResponsiveLayout from '@hooks/useResponsiveLayout';
import useResponsiveLayoutOnWideRHP from '@hooks/useResponsiveLayoutOnWideRHP';
import useStyleUtils from '@hooks/useStyleUtils';
import useTheme from '@hooks/useTheme';
import useThemeStyles from '@hooks/useThemeStyles';
import useTransactionInlineEdit from '@hooks/useTransactionInlineEdit';

import ControlSelection from '@libs/ControlSelection';
import canUseTouchScreen from '@libs/DeviceCapabilities/canUseTouchScreen';
import {hasFlexColumn} from '@libs/SearchUIUtils';
import {getTransactionPendingAction, isTransactionPendingDelete} from '@libs/TransactionUtils';

import variables from '@styles/variables';

import CONST from '@src/CONST';
import type {CardList, Policy, PolicyCategories, PolicyTagLists, Report, TransactionViolations} from '@src/types/onyx';

import type {View} from 'react-native';
import type {OnyxEntry} from 'react-native-onyx';

import React, {useEffect, useRef, useState} from 'react';

import type {TransactionWithOptionalHighlight} from './MoneyRequestReportTransactionList';

type MoneyRequestReportTransactionItemProps = {
    /** The transaction that is being displayed */
    transaction: TransactionWithOptionalHighlight;

    /** Pre-filtered violations for this transaction. Computed once at the parent so each row doesn't subscribe to Onyx individually. */
    violations: TransactionViolations;

    /** Report to which the transaction belongs */
    report: Report;

    /** Policy to which the transaction belongs */
    policy: OnyxEntry<Policy>;

    /** Categories for the policy to which the transaction belongs */
    policyCategories?: PolicyCategories;

    /** Tag lists for the policy to which the transaction belongs */
    policyTagLists?: PolicyTagLists;

    /** Whether the mobile selection mode is enabled */
    isSelectionModeEnabled: boolean;

    /** Callback function triggered upon pressing a transaction checkbox. */
    toggleTransaction: (transactionID: string) => void;

    /** Callback function triggered upon pressing a transaction. */
    handleOnPress: (transactionID: string) => void;

    /** Callback function triggered upon long pressing a transaction. */
    handleLongPress: (transactionID: string) => void;

    /** Whether the transaction is selected */
    isSelected: boolean;

    /** The size of the date column */
    dateColumnSize: TableColumnSize;

    /** The size of the amount column */
    amountColumnSize: TableColumnSize;

    /** The size of the tax amount column */
    taxAmountColumnSize: TableColumnSize;

    /** Columns to show */
    columns: SearchColumnType[];

    /** Callback function that scrolls to this transaction in case it is newly added */
    scrollToNewTransaction?: (offset: number) => void;

    /** Callback function that navigates to the transaction thread */
    onArrowRightPress?: (transactionID: string) => void;

    /** Whether this transaction should be highlighted as newly added */
    shouldBeHighlighted: boolean;

    /** List of cards for the user */
    nonPersonalAndWorkspaceCards: CardList;

    /** Whether this is the last item in the list */
    isLastItem?: boolean;

    /** Whether the list is horizontally scrollable */
    shouldScrollHorizontally?: boolean;

    /** Precomputed transaction-thread report ID for this transaction. Lets the RBR row early-return for clean rows
     * instead of mounting the heavy RBR inner; the parent computes it once so rows don't scan report actions individually. */
    transactionThreadReportID?: string;
};

type MoneyRequestReportTransactionItemBodyProps = MoneyRequestReportTransactionItemProps & {
    /** Inline-edit values from `useTransactionInlineEdit`. Undefined on narrow layouts where the hook is skipped. */
    inlineEdit?: InlineEditValues;

    /** Highlight animation style, computed by the parent so its state survives the narrow↔wide swap on resize. */
    animatedHighlightStyle: ReturnType<typeof useAnimatedHighlightStyle>;
};

function MoneyRequestReportTransactionItemBody({
    transaction,
    violations,
    report,
    policy,
    policyCategories,
    policyTagLists,
    isSelectionModeEnabled,
    toggleTransaction,
    isSelected,
    handleOnPress,
    handleLongPress,
    columns,
    dateColumnSize,
    amountColumnSize,
    taxAmountColumnSize,
    scrollToNewTransaction,
    onArrowRightPress,
    shouldBeHighlighted,
    nonPersonalAndWorkspaceCards,
    isLastItem = false,
    shouldScrollHorizontally = false,
    transactionThreadReportID,
    inlineEdit,
    animatedHighlightStyle,
}: MoneyRequestReportTransactionItemBodyProps) {
    const {translate} = useLocalize();
    const styles = useThemeStyles();
    const StyleUtils = useStyleUtils();
    const {isEditingCell, wasRecentlyEditingCell} = useEditingCellState();
    const [shouldDisableHoverStyle, setShouldDisableHoverStyle] = useState(false);

    // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
    const {isSmallScreenWidth, isMediumScreenWidth} = useResponsiveLayout();
    const {shouldUseNarrowLayout} = useResponsiveLayoutOnWideRHP();
    const isPendingDelete = isTransactionPendingDelete(transaction);
    const pendingAction = getTransactionPendingAction(transaction);

    // On narrow layouts `inlineEdit` is undefined (the parent skips the hook). The fallback ref
    // keeps the press handler shape identical without ever being mutated on narrow.
    const fallbackEditingOnMouseDownRef = useRef(false);
    const wasEditingOnMouseDownRef = inlineEdit?.wasEditingOnMouseDownRef ?? fallbackEditingOnMouseDownRef;

    const viewRef = useRef<View>(null);

    // This useEffect scrolls to this transaction when it is newly added to the report
    useEffect(() => {
        if (!shouldBeHighlighted || !scrollToNewTransaction) {
            return;
        }
        viewRef?.current?.measure((x, y, width, height, pageX, pageY) => {
            scrollToNewTransaction?.(pageY);
        });
    }, [scrollToNewTransaction, shouldBeHighlighted]);

    useEffect(() => {
        if (!wasRecentlyEditingCell) {
            return;
        }
        queueMicrotask(() => setShouldDisableHoverStyle(true));
    }, [wasRecentlyEditingCell]);

    const handleMouseDown = (e?: React.MouseEvent) => {
        wasEditingOnMouseDownRef.current = isEditingCell;

        if (!isEditingCell) {
            e?.preventDefault();
        }
    };

    const handleHoverIn = () => setShouldDisableHoverStyle(false);

    return (
        <OfflineWithFeedback
            pendingAction={pendingAction}
            errors={transaction.errors}
            errorRowStyles={[styles.ph3, styles.pb2]}
            style={!shouldUseNarrowLayout && isLastItem && [styles.tableBottomRadius, styles.overflowHidden]}
        >
            <PressableWithFeedback
                key={transaction.transactionID}
                onPress={() => {
                    // Prevent row press from firing while a cell is being inline-edited (e.g. pressing Space would otherwise open the expense)
                    // See https://github.com/Expensify/App/issues/88646 for more details
                    if (isEditingCell) {
                        return;
                    }
                    // If a cell was being edited when the user tapped the row, suppress navigation
                    // so the second tap doesn't immediately open the transaction detail.
                    if (wasEditingOnMouseDownRef.current) {
                        wasEditingOnMouseDownRef.current = false;
                        return;
                    }
                    handleOnPress(transaction.transactionID);
                }}
                accessibilityLabel={translate('iou.viewDetails')}
                sentryLabel={CONST.SENTRY_LABEL.REPORT.MONEY_REQUEST_REPORT_TRANSACTION_ITEM}
                role={getButtonRole(true)}
                isNested
                id={transaction.transactionID}
                style={[styles.transactionListItemStyle, !shouldUseNarrowLayout ? StyleUtils.getSearchTableRowPressableStyle(isLastItem, isSelected) : styles.noBorderRadius]}
                hoverStyle={[!isPendingDelete && !shouldDisableHoverStyle && styles.hoveredComponentBG, isSelected && styles.activeComponentBG]}
                dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
                onMouseDown={handleMouseDown}
                onHoverIn={handleHoverIn}
                onPressIn={() => {
                    wasEditingOnMouseDownRef.current = wasEditingOnMouseDownRef.current || isEditingCell;
                    if (canUseTouchScreen()) {
                        ControlSelection.block();
                    }
                }}
                onPressOut={() => ControlSelection.unblock()}
                onLongPress={() => {
                    handleLongPress(transaction.transactionID);
                }}
                disabled={isTransactionPendingDelete(transaction)}
                ref={viewRef}
                wrapperStyle={[animatedHighlightStyle, styles.userSelectNone, shouldUseNarrowLayout && !isLastItem && StyleUtils.getSelectedBorderBottomStyle(isSelected)]}
            >
                {({hovered}) => (
                    <TransactionItemRow
                        transactionItem={transaction}
                        violations={violations}
                        report={report}
                        policy={policy}
                        policyCategories={policyCategories}
                        policyTagLists={policyTagLists}
                        transactionThreadReportID={transactionThreadReportID}
                        isSelected={isSelected}
                        dateColumnSize={dateColumnSize}
                        amountColumnSize={amountColumnSize}
                        taxAmountColumnSize={taxAmountColumnSize}
                        shouldShowTooltip
                        shouldUseNarrowLayout={shouldUseNarrowLayout || (isMediumScreenWidth && !shouldScrollHorizontally)}
                        shouldShowCheckbox={!!isSelectionModeEnabled || !isSmallScreenWidth}
                        onCheckboxPress={toggleTransaction}
                        columns={columns}
                        isDisabled={isPendingDelete}
                        style={!shouldUseNarrowLayout ? [styles.p3, styles.pv2, styles.noBorderRadius] : [styles.p4, styles.noBorderRadius]}
                        onButtonPress={() => {
                            handleOnPress(transaction.transactionID);
                        }}
                        onArrowRightPress={() => onArrowRightPress?.(transaction.transactionID)}
                        isHover={hovered}
                        nonPersonalAndWorkspaceCards={nonPersonalAndWorkspaceCards}
                        shouldRemoveTotalColumnFlex={hasFlexColumn(columns)}
                        canEditDate={inlineEdit?.canEditDate}
                        canEditMerchant={inlineEdit?.canEditMerchant}
                        canEditDescription={inlineEdit?.canEditDescription}
                        canEditCategory={inlineEdit?.canEditCategory}
                        canEditAmount={inlineEdit?.canEditAmount}
                        canEditTag={inlineEdit?.canEditTag}
                        onEditDate={inlineEdit?.onEditDate}
                        onEditMerchant={inlineEdit?.onEditMerchant}
                        onEditDescription={inlineEdit?.onEditDescription}
                        onEditCategory={inlineEdit?.onEditCategory}
                        onEditAmount={inlineEdit?.onEditAmount}
                        onEditTag={inlineEdit?.onEditTag}
                    />
                )}
            </PressableWithFeedback>
        </OfflineWithFeedback>
    );
}

type InlineEditValues = ReturnType<typeof useTransactionInlineEdit>;

function MoneyRequestReportTransactionItemWithInlineEdit(props: Omit<MoneyRequestReportTransactionItemBodyProps, 'inlineEdit'>) {
    const inlineEdit = useTransactionInlineEdit({
        transactionID: props.transaction.transactionID,
    });

    return (
        <MoneyRequestReportTransactionItemBody
            {...props}
            inlineEdit={inlineEdit}
        />
    );
}

function MoneyRequestReportTransactionItem(props: MoneyRequestReportTransactionItemProps) {
    const {isMediumScreenWidth} = useResponsiveLayout();
    const {shouldUseNarrowLayout} = useResponsiveLayoutOnWideRHP();
    const theme = useTheme();
    // Mirrors the layout check inside TransactionItemRow so the narrow body never pays for useTransactionInlineEdit.
    const isNarrowLayout = shouldUseNarrowLayout || (isMediumScreenWidth && !props.shouldScrollHorizontally);

    // Hoisted out of the body so the highlight animation timeline survives the narrow↔wide
    // component-type swap caused by browser resize.
    const animatedHighlightStyle = useAnimatedHighlightStyle({
        borderRadius: shouldUseNarrowLayout ? variables.componentBorderRadius : 0,
        shouldHighlight: props.shouldBeHighlighted,
        highlightColor: theme.messageHighlightBG,
        backgroundColor: theme.highlightBG,
        shouldApplyOtherStyles: !shouldUseNarrowLayout,
    });

    if (isNarrowLayout) {
        return (
            <MoneyRequestReportTransactionItemBody
                {...props}
                animatedHighlightStyle={animatedHighlightStyle}
            />
        );
    }

    return (
        <MoneyRequestReportTransactionItemWithInlineEdit
            {...props}
            animatedHighlightStyle={animatedHighlightStyle}
        />
    );
}

export default MoneyRequestReportTransactionItem;