Add page navigation to multi-page PDF receipts

src/CONST/index.ts

@@ -1628,6 +1628,15 @@ const CONST = {
         // Remote PDFs are rendered at this multiple of their on-screen size so the magnified
         // view shows real pixels instead of an upscaled low-resolution raster.
         HOVER_ZOOM_SCALE: 2.5,
+
+        // react-fast-pdf pads each page by this much. The single-page PDF layer matches it to stay framed the same.
+        PDF_PAGE_BORDER: 9,
+
+        // PDF page numbers are 1-indexed. This is the page a receipt opens on, and the page the static badge always shows.
+        FIRST_PDF_PAGE: 1,
+
+        // Elements with this data attribute pause the hover zoom while the pointer is over them
+        HOVER_ZOOM_EXCLUDED_ELEMENT: 'receipt-hover-zoom-excluded',
     },
     RECEIPT_PREVIEW_TOP_BOTTOM_MARGIN: 120,
     REPORT: {
@@ -9585,6 +9594,8 @@ const CONST = {
         },
         RECEIPT: {
             IMAGE: 'Receipt-Image',
+            PREVIOUS_PAGE_BUTTON: 'Receipt-PreviousPageButton',
+            NEXT_PAGE_BUTTON: 'Receipt-NextPageButton',
             ENLARGE_BUTTON: 'Receipt-EnlargeButton',
             ADD_ATTACHMENT_BUTTON: 'Receipt-AddAttachmentButton',
         },

src/components/MoneyRequestConfirmationListFooter/ConfirmationReceiptThumbnail.tsx

@@ -226,7 +226,7 @@ function ConfirmationReceiptThumbnail({
                 ))}
             {shouldShowReceiptPageCount && (
                 <Badge
-                    text={translate('receipt.pageCount', {pageCount: effectiveReceiptPageCount})}
+                    text={translate('receipt.pageCount', {page: CONST.RECEIPT.FIRST_PDF_PAGE, pageCount: effectiveReceiptPageCount})}
                     badgeStyles={[styles.receiptPageCountBadge, styles.pointerEventsNone]}
                 />
             )}

src/components/PDFThumbnail/index.tsx

@@ -16,6 +16,13 @@ import PDFThumbnailError from './PDFThumbnailError';
 
 pdfjs.GlobalWorkerOptions.workerSrc = URL.createObjectURL(new Blob([pdfWorkerSource], {type: 'text/javascript'}));
 
+// Use a root-relative URL so the CMap files (needed to render non-Latin fonts) resolve against
+// the server root instead of the current deep route. Shared by every react-pdf <Document> in the app.
+const PDF_DOCUMENT_OPTIONS = {
+    cMapUrl: '/cmaps/',
+    cMapPacked: true,
+};
+
 function PDFThumbnail({previewSourceURL, style, enabled = true, onPassword, onLoadError, onLoadSuccess}: PDFThumbnailProps) {
     const styles = useThemeStyles();
     const [failedToLoad, setFailedToLoad] = useState(false);
@@ -25,12 +32,7 @@ function PDFThumbnail({previewSourceURL, style, enabled = true, onPassword, onLo
             <Document
                 loading={<LoadingIndicator />}
                 file={previewSourceURL}
-                options={{
-                    // Use a root-relative URL so the CMap files (needed to render non-Latin fonts)
-                    // resolve against the server root instead of the current deep route.
-                    cMapUrl: '/cmaps/',
-                    cMapPacked: true,
-                }}
+                options={PDF_DOCUMENT_OPTIONS}
                 externalLinkTarget="_blank"
                 onPassword={onPassword}
                 onLoad={() => {
@@ -83,5 +85,5 @@ export default React.memo(PDFThumbnail);
 
 // Re-exported so other PDF-rendering components reuse this file's worker setup
 // instead of importing pdfjs-dist/react-pdf directly.
-export {Document, Thumbnail};
+export {Document, Thumbnail, PDF_DOCUMENT_OPTIONS};
 export type {PDFDocumentProxy};

src/components/ReceiptHoverZoom/useReceiptHoverZoom.ts

@@ -1,5 +1,7 @@
 import {hasHoverSupport} from '@libs/DeviceCapabilities';
 
+import CONST from '@src/CONST';
+
 import type {ComponentRef, RefObject} from 'react';
 import type {View} from 'react-native';
 
@@ -56,6 +58,14 @@ function useReceiptHoverZoom({isEnabled, scale, hoverContainerRef}: UseReceiptHo
             setIsHovering(false);
         };
         const updateZoomOrigin = (event: PointerEvent) => {
+            // The whole point of page navigation is to see the page you just flipped to, so zoom-tracking the
+            // cursor over the controls themselves (and having to move away to release it) defeats that purpose.
+            if (event.target instanceof Element && event.target.closest(`[data-${CONST.RECEIPT.HOVER_ZOOM_EXCLUDED_ELEMENT}]`)) {
+                if (hovering) {
+                    endZoom();
+                }
+                return;
+            }
             if (!bounds) {
                 bounds = target.getBoundingClientRect();
             }

src/components/ReportActionItem/MoneyRequestReceiptView.tsx

@@ -60,6 +60,7 @@ import {
 } from '@libs/ReportUtils';
 import trackExpenseCreationError from '@libs/telemetry/trackExpenseCreationError';
 import {
+    canOverlayReceiptPDF,
     didReceiptScanSucceed as didReceiptScanSucceedTransactionUtils,
     hasEReceipt,
     hasPendingDistanceReceiptRegeneration,
@@ -85,7 +86,7 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES, {DYNAMIC_ROUTES} from '@src/ROUTES';
 import type * as OnyxTypes from '@src/types/onyx';
-import type {ReceiptError, TransactionPendingFieldsKey} from '@src/types/onyx/Transaction';
+import type {ReceiptError, ReceiptSource, TransactionPendingFieldsKey} from '@src/types/onyx/Transaction';
 import type {FileObject} from '@src/types/utils/Attachment';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 
@@ -104,6 +105,7 @@ import {View} from 'react-native';
 
 import HoveredDistanceEReceipt from './HoveredDistanceEReceipt';
 import {isElementHovered, resetButtonHoverState} from './receiptHoverUtils';
+import ReceiptPageNavigator from './ReceiptPageNavigator';
 import ReportActionItemImage from './ReportActionItemImage';
 
 type MoneyRequestReceiptViewProps = {
@@ -242,6 +244,14 @@ function MoneyRequestReceiptView({
     const displayedReceiptSource = ReceiptStorage.resolve(transaction?.receipt?.localSource) ?? transaction?.receipt?.source;
     const prevDisplayedReceiptSource = usePrevious(displayedReceiptSource);
 
+    // The PDF page layer the pill controls, keyed to the receipt source it belongs to. displayedReceiptSource changes
+    // the instant the receipt's underlying file changes (a scan finishing, or the receipt being replaced), so
+    // comparing it against `source` resets stale page/status state in the same render, before anything re-fetches.
+    const [receiptPDFPagesState, setReceiptPDFPagesState] = useState<{source?: ReceiptSource; page: number; status: 'loading' | 'loaded' | 'failed'}>({
+        page: CONST.RECEIPT.FIRST_PDF_PAGE,
+        status: 'loading',
+    });
+
     useEffect(() => {
         if (!displayedReceiptSource || prevDisplayedReceiptSource === displayedReceiptSource) {
             return;
@@ -616,8 +626,23 @@ function MoneyRequestReceiptView({
     // Expanding only opens the receipt to look at, so it asks for none of the permission above
     const canExpandReceipt = hasReceipt && !isLoading && !mergeTransactionID && !readonly && canInteractWithReport;
 
-    // Map distance receipts render as an e-receipt card, so their stored PDF page count is never shown.
+    // Show the count badge only after a multi-page PDF receipt loads. Map distance receipts render as an e-receipt card, so their stored PDF page count is never shown.
     const shouldShowReceiptPageCount = receiptPageCount > 1 && Str.isPDF(receiptURIs?.filename ?? '') && !isLoading && !isMapDistanceRequest;
+
+    // Pages can only be flipped where ReportActionItemImage renders the real PDF over the thumbnail (hover-capable
+    // devices, using the same eligibility check ReportActionItemImage applies to its own overlay). Elsewhere only a
+    // page 1 thumbnail exists, so the static count badge stays.
+    const canFlipReceiptPages = shouldShowReceiptPageCount && canZoomReceipt && deviceHasHoverSupport && canOverlayReceiptPDF(displayedTransaction);
+
+    const isCurrentReceiptPDFPagesState = receiptPDFPagesState.source === displayedReceiptSource;
+    const receiptPage = isCurrentReceiptPDFPagesState ? Math.min(receiptPDFPagesState.page, receiptPageCount || CONST.RECEIPT.FIRST_PDF_PAGE) : CONST.RECEIPT.FIRST_PDF_PAGE;
+
+    // Shown before the PDF loads, with its buttons disabled, so the badge doesn't change size once it can flip.
+    // A PDF that fails to load leaves only the page 1 thumbnail, so the static badge comes back.
+    const hasReceiptPDFFailed = isCurrentReceiptPDFPagesState && receiptPDFPagesState.status === 'failed';
+    const shouldShowReceiptPageNavigator = canFlipReceiptPages && !hasReceiptPDFFailed;
+    const isReceiptPDFLoading = !isCurrentReceiptPDFPagesState || receiptPDFPagesState.status !== 'loaded';
+
     const receiptPendingAction = isDistanceRequest ? getPendingFieldAction('waypoints') : getPendingFieldAction('receipt');
     const isReceiptOfflinePending = isOffline && !!receiptPendingAction;
     const receiptAuditMessagesRow = (
@@ -761,6 +786,15 @@ function MoneyRequestReceiptView({
                                                 shouldUseThumbnailImage={!fillSpace}
                                                 shouldUseFullHeight={fillSpace}
                                                 canZoomReceipt={canZoomReceipt}
+                                                pdfPage={canFlipReceiptPages ? receiptPage : undefined}
+                                                onPDFLoadSuccess={() =>
+                                                    setReceiptPDFPagesState((prev) => ({
+                                                        source: displayedReceiptSource,
+                                                        page: prev.source === displayedReceiptSource ? prev.page : CONST.RECEIPT.FIRST_PDF_PAGE,
+                                                        status: 'loaded',
+                                                    }))
+                                                }
+                                                onPDFLoadFailure={() => setReceiptPDFPagesState({source: displayedReceiptSource, page: CONST.RECEIPT.FIRST_PDF_PAGE, status: 'failed'})}
                                                 thumbnail={receiptURIs?.thumbnail}
                                                 fileExtension={receiptURIs?.fileExtension}
                                                 isThumbnail={receiptURIs?.isThumbnail}
@@ -780,9 +814,17 @@ function MoneyRequestReceiptView({
                                     )}
                                 </ReceiptHoverZoom>
                             </View>
-                            {shouldShowReceiptPageCount && (
+                            {shouldShowReceiptPageNavigator && (
+                                <ReceiptPageNavigator
+                                    page={receiptPage}
+                                    pageCount={receiptPageCount}
+                                    isLoading={isReceiptPDFLoading}
+                                    onChangePage={(page) => setReceiptPDFPagesState({source: displayedReceiptSource, page, status: 'loaded'})}
+                                />
+                            )}
+                            {shouldShowReceiptPageCount && !shouldShowReceiptPageNavigator && (
                                 <Badge
-                                    text={translate('receipt.pageCount', {pageCount: receiptPageCount})}
+                                    text={translate('receipt.pageCount', {page: CONST.RECEIPT.FIRST_PDF_PAGE, pageCount: receiptPageCount})}
                                     badgeStyles={[styles.receiptPageCountBadge, styles.pointerEventsNone]}
                                 />
                             )}