[Odometer] Move odometer image stitching to confirmation page

cspell.json

@@ -843,6 +843,7 @@
         "xmlgateway",
         "Xours",
         "Xtheirs",
+        "XYWH",
         "yalc",
         "Yapl",
         "YAPL",

src/components/MoneyRequestConfirmationList.tsx

@@ -165,6 +165,9 @@ type MoneyRequestConfirmationListProps = {
     /** Whether the expense is an odometer distance expense */
     isOdometerDistanceRequest?: boolean;
 
+    /** Whether the odometer receipt is currently being stitched */
+    isLoadingReceipt?: boolean;
+
     /** Whether the expense is a GPS distance expense */
     isGPSDistanceRequest: boolean;
 
@@ -236,6 +239,7 @@ function MoneyRequestConfirmationList({
     isDistanceRequest,
     isManualDistanceRequest,
     isOdometerDistanceRequest = false,
+    isLoadingReceipt = false,
     isGPSDistanceRequest,
     isPerDiemRequest = false,
     isPolicyExpenseChat = false,
@@ -1309,6 +1313,7 @@ function MoneyRequestConfirmationList({
                 isDistanceRequest={isDistanceRequest}
                 isManualDistanceRequest={isManualDistanceRequest}
                 isOdometerDistanceRequest={isOdometerDistanceRequest}
+                isLoadingReceipt={isLoadingReceipt}
                 isGPSDistanceRequest={isGPSDistanceRequest}
                 isPerDiemRequest={isPerDiemRequest}
                 isTimeRequest={isTimeRequest}

src/components/MoneyRequestConfirmationListFooter.tsx

@@ -27,7 +27,7 @@ import Navigation from '@libs/Navigation/Navigation';
 import {getDestinationForDisplay, getSubratesFields, getSubratesForDisplay, getTimeDifferenceIntervals, getTimeForDisplay} from '@libs/PerDiemRequestUtils';
 import {canSendInvoice, getPerDiemCustomUnit} from '@libs/PolicyUtils';
 import type {ThumbnailAndImageURI} from '@libs/ReceiptUtils';
-import {getThumbnailAndImageURIs} from '@libs/ReceiptUtils';
+import {getThumbnailAndImageURIs, isStitchedOdometerReceiptFilename} from '@libs/ReceiptUtils';
 import {getReportName} from '@libs/ReportNameUtils';
 import {generateReportID, getDefaultWorkspaceAvatar, getOutstandingReportsForUser, isMoneyRequestReport, isReportOutstanding} from '@libs/ReportUtils';
 import {getTagVisibility, hasEnabledTags} from '@libs/TagsOptionsListUtils';
@@ -55,6 +55,7 @@ import type * as OnyxTypes from '@src/types/onyx';
 import type {Attendee, Participant} from '@src/types/onyx/IOU';
 import type {Unit} from '@src/types/onyx/Policy';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
+import ActivityIndicator from './ActivityIndicator';
 import Badge from './Badge';
 import Button from './Button';
 import ConfirmedRoute from './ConfirmedRoute';
@@ -139,6 +140,9 @@ type MoneyRequestConfirmationListFooterProps = {
     /** Flag indicating if it is an odometer distance request */
     isOdometerDistanceRequest?: boolean;
 
+    /** Whether the receipt is currently being stitched */
+    isLoadingReceipt?: boolean;
+
     /** Flag indicating if it is a GPS distance request */
     isGPSDistanceRequest: boolean;
 
@@ -281,6 +285,7 @@ function MoneyRequestConfirmationListFooter({
     isDistanceRequest,
     isManualDistanceRequest,
     isOdometerDistanceRequest = false,
+    isLoadingReceipt = false,
     isGPSDistanceRequest,
     isPerDiemRequest,
     isTimeRequest,
@@ -445,6 +450,7 @@ function MoneyRequestConfirmationListFooter({
     } = receiptPath && receiptFilename ? getThumbnailAndImageURIs(transaction, receiptPath, receiptFilename) : ({} as ThumbnailAndImageURI);
     const resolvedThumbnail = isLocalFile ? receiptThumbnail : tryResolveUrlFromApiRoot(receiptThumbnail ?? '');
     const resolvedReceiptImage = isLocalFile ? receiptImage : tryResolveUrlFromApiRoot(receiptImage ?? '');
+    const isStitchedOdometerReceipt = isStitchedOdometerReceiptFilename(receiptFilename);
 
     const shouldNavigateToUpgradePath = !policyForMovingExpensesID && !shouldSelectPolicy;
     // Time requests appear as regular expenses after they're created, with editable amount and merchant, not hours and rate
@@ -1151,6 +1157,7 @@ function MoneyRequestConfirmationListFooter({
                             shouldUseInitialObjectPosition={isDistanceRequest}
                             shouldUseFullHeight={isCompactMode}
                             onLoad={handleReceiptLoad}
+                            resizeMode={isStitchedOdometerReceipt ? 'contain' : undefined}
                         />
                     </PressableWithoutFocus>
                 )}
@@ -1181,6 +1188,7 @@ function MoneyRequestConfirmationListFooter({
         receiptThumbnail,
         fileExtension,
         isDistanceRequest,
+        isStitchedOdometerReceipt,
         handleReceiptLoad,
         handleCompactReceiptContainerLayout,
     ]);
@@ -1265,7 +1273,21 @@ function MoneyRequestConfirmationListFooter({
                     </>
                 )}
             </View>
+            {(!shouldShowMap || isManualDistanceRequest || isOdometerDistanceRequest) && !hasReceiptImageOrThumbnail && isLoadingReceipt && (
+                <View
+                    style={[
+                        styles.moneyRequestImage,
+                        styles.alignItemsCenter,
+                        styles.justifyContentCenter,
+                        isCompactMode && compactReceiptContainerStyle ? compactReceiptContainerStyle : styles.expenseViewImageSmall,
+                    ]}
+                    onLayout={isCompactMode ? handleCompactReceiptContainerLayout : undefined}
+                >
+                    <ActivityIndicator />
+                </View>
+            )}
             {(!shouldShowMap || isManualDistanceRequest || isOdometerDistanceRequest) &&
+                !isLoadingReceipt &&
                 (hasReceiptImageOrThumbnail
                     ? receiptThumbnailContent
                     : showReceiptEmptyState && (

src/languages/en.ts

@@ -1452,6 +1452,7 @@ const translations = {
             distanceAmountTooLargeReduceDistance: 'The total amount is too large. Reduce the distance.',
             distanceAmountTooLargeReduceRate: 'The total amount is too large. Lower the rate.',
             odometerReadingTooLarge: (formattedMax: string) => `Odometer readings cannot exceed ${formattedMax}.`,
+            stitchOdometerImagesFailed: 'Failed to combine odometer images. Please try again later.',
             invalidIntegerAmount: 'Please enter a whole dollar amount before continuing',
             invalidTaxAmount: (amount: string) => `Maximum tax amount is ${amount}`,
             invalidSplit: 'The sum of splits must equal the total amount',

src/languages/es.ts

@@ -1293,6 +1293,7 @@ const translations: TranslationDeepObject<typeof en> = {
             distanceAmountTooLargeReduceDistance: 'El importe total es demasiado alto. Reduce la distancia.',
             distanceAmountTooLargeReduceRate: 'El importe total es demasiado alto. Disminuye la tarifa.',
             odometerReadingTooLarge: (formattedMax: string) => `Las lecturas del odómetro no pueden superar ${formattedMax}.`,
+            stitchOdometerImagesFailed: 'No se pudieron combinar las imágenes del odómetro. Por favor, inténtalo de nuevo más tarde.',
             invalidIntegerAmount: 'Por favor, introduce una cantidad entera en dólares antes de continuar',
             invalidTaxAmount: (amount) => `El importe máximo del impuesto es ${amount}`,
             invalidSplit: 'La suma de las partes debe ser igual al importe total',

src/libs/ReceiptUtils.ts

@@ -7,6 +7,7 @@ import ROUTES from '@src/ROUTES';
 import type {ShareTempFile, Transaction} from '@src/types/onyx';
 import type {ReceiptError, ReceiptSource} from '@src/types/onyx/Transaction';
 import {isLocalFile as isLocalFileUtils, splitExtensionFromFileName} from './fileDownload/FileUtils';
+import STITCHED_ODOMETER_FILENAME_PREFIX from './stitchOdometerImages/constants';
 import {hasReceipt, hasReceiptSource, isFetchingWaypointsFromServer} from './TransactionUtils';
 
 type ThumbnailAndImageURI = {
@@ -94,6 +95,10 @@ const shouldValidateFile = (file: ShareTempFile | undefined) => {
     return file?.mimeType === CONST.SHARE_FILE_MIMETYPE.HEIC || file?.mimeType === CONST.SHARE_FILE_MIMETYPE.IMG;
 };
 
+function isStitchedOdometerReceiptFilename(filename: string | undefined): boolean {
+    return !!filename?.startsWith(STITCHED_ODOMETER_FILENAME_PREFIX);
+}
+
 // eslint-disable-next-line import/prefer-default-export
-export {getThumbnailAndImageURIs, shouldValidateFile, constructReceiptSourceFromFilename};
+export {getThumbnailAndImageURIs, shouldValidateFile, constructReceiptSourceFromFilename, isStitchedOdometerReceiptFilename};
 export type {ThumbnailAndImageURI};

src/libs/actions/IOU/index.ts

@@ -772,7 +772,7 @@
 };
 
 let allPersonalDetails: OnyxTypes.PersonalDetailsList = {};
 Onyx.connect({
     key: ONYXKEYS.PERSONAL_DETAILS_LIST,
     callback: (value) => {
         allPersonalDetails = value ?? {};
@@ -872,7 +872,7 @@
 };
 
 let allTransactions: NonNullable<OnyxCollection<OnyxTypes.Transaction>> = {};
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.TRANSACTION,
     waitForCollectionCallback: true,
     callback: (value) => {
@@ -886,7 +886,7 @@
 });
 
 let allTransactionDrafts: NonNullable<OnyxCollection<OnyxTypes.Transaction>> = {};
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.TRANSACTION_DRAFT,
     waitForCollectionCallback: true,
     callback: (value) => {
@@ -895,7 +895,7 @@
 });
 
 let allTransactionViolations: NonNullable<OnyxCollection<OnyxTypes.TransactionViolations>> = {};
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS,
     waitForCollectionCallback: true,
     callback: (value) => {
@@ -909,7 +909,7 @@
 });
 
 let allPolicyTags: OnyxCollection<OnyxTypes.PolicyTagLists> = {};
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.POLICY_TAGS,
     waitForCollectionCallback: true,
     callback: (value) => {
@@ -922,7 +922,7 @@
 });
 
 let allReports: OnyxCollection<OnyxTypes.Report>;
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.REPORT,
     waitForCollectionCallback: true,
     callback: (value) => {
@@ -931,7 +931,7 @@
 });
 
 let allReportNameValuePairs: OnyxCollection<OnyxTypes.ReportNameValuePairs>;
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS,
     waitForCollectionCallback: true,
     callback: (value) => {
@@ -941,7 +941,7 @@
 
 let userAccountID = -1;
 let currentUserEmail = '';
 Onyx.connect({
     key: ONYXKEYS.SESSION,
     callback: (value) => {
         currentUserEmail = value?.email ?? '';
@@ -950,7 +950,7 @@
 });
 
 let deprecatedCurrentUserPersonalDetails: OnyxEntry<OnyxTypes.PersonalDetails>;
 Onyx.connect({
     key: ONYXKEYS.PERSONAL_DETAILS_LIST,
     callback: (value) => {
         deprecatedCurrentUserPersonalDetails = value?.[userAccountID] ?? undefined;
@@ -958,7 +958,7 @@
 });
 
 let allReportActions: OnyxCollection<OnyxTypes.ReportActions>;
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.REPORT_ACTIONS,
     waitForCollectionCallback: true,
     callback: (actions) => {
@@ -1670,13 +1670,13 @@
  * @param file - The image file (File object on web, URI string on native)
  * @param isDraft - Whether this is a draft transaction
  */
-function setMoneyRequestOdometerImage(transactionID: string, imageType: OdometerImageType, file: File | string, isDraft: boolean) {
+function setMoneyRequestOdometerImage(transactionID: string, imageType: OdometerImageType, file: FileObject | string, isDraft: boolean) {
     const imageKey = imageType === CONST.IOU.ODOMETER_IMAGE_TYPE.START ? 'odometerStartImage' : 'odometerEndImage';
     const normalizedFile: FileObject | string =
         typeof file === 'string'
             ? file
             : {
-                  uri: file.uri ?? (typeof URL !== 'undefined' ? URL.createObjectURL(file) : undefined),
+                  uri: file.uri ?? (typeof URL !== 'undefined' ? URL.createObjectURL(file as Blob) : undefined),
                   name: file.name,
                   type: file.type,
                   size: file.size,

src/libs/stitchOdometerImages/constants.ts

@@ -0,0 +1,3 @@
+const STITCHED_ODOMETER_FILENAME_PREFIX = 'stitched_odometer';
+
+export default STITCHED_ODOMETER_FILENAME_PREFIX;

src/libs/stitchOdometerImages/index.native.ts

@@ -0,0 +1,69 @@
+import {Skia} from '@shopify/react-native-skia';
+import RNFS from 'react-native-fs';
+import Log from '@libs/Log';
+import type {FileObject} from '@src/types/utils/Attachment';
+import STITCHED_ODOMETER_FILENAME_PREFIX from './constants';
+import calculateStitchLayout from './stitchLayout';
+
+async function stitchOdometerImages(image1: FileObject | string | undefined, image2: FileObject | string | undefined): Promise<FileObject | null> {
+    const source1 = typeof image1 === 'string' ? image1 : (image1?.uri ?? null);
+    const source2 = typeof image2 === 'string' ? image2 : (image2?.uri ?? null);
+
+    if (!source1 || !source2) {
+        return null;
+    }
+
+    let skImage1 = null;
+    let skImage2 = null;
+    let surface = null;
+    let snapshot = null;
+
+    try {
+        const [buffer1, buffer2] = await Promise.all([fetch(source1).then((r) => r.arrayBuffer()), fetch(source2).then((r) => r.arrayBuffer())]);
+
+        skImage1 = Skia.Image.MakeImageFromEncoded(Skia.Data.fromBytes(new Uint8Array(buffer1)));
+        skImage2 = Skia.Image.MakeImageFromEncoded(Skia.Data.fromBytes(new Uint8Array(buffer2)));
+
+        if (!skImage1 || !skImage2) {
+            throw new Error('Failed to decode odometer images');
+        }
+
+        const {width, height, img1Dest, img2Dest} = calculateStitchLayout(skImage1.width(), skImage1.height(), skImage2.width(), skImage2.height());
+
+        surface = Skia.Surface.MakeOffscreen(width, height);
+        if (!surface) {
+            throw new Error('Failed to create Skia surface');
+        }
+
+        const canvas = surface.getCanvas();
+        const paint = Skia.Paint();
+        canvas.drawImageRect(skImage1, Skia.XYWHRect(0, 0, skImage1.width(), skImage1.height()), Skia.XYWHRect(img1Dest.x, img1Dest.y, img1Dest.w, img1Dest.h), paint);
+        canvas.drawImageRect(skImage2, Skia.XYWHRect(0, 0, skImage2.width(), skImage2.height()), Skia.XYWHRect(img2Dest.x, img2Dest.y, img2Dest.w, img2Dest.h), paint);
+        surface.flush();
+
+        snapshot = surface.makeImageSnapshot();
+        const base64 = snapshot.encodeToBase64();
+
+        // Delete any previously stitched files before creating a new one
+        try {
+            const tempDirContents = await RNFS.readDir(RNFS.TemporaryDirectoryPath);
+            const oldStitchedFiles = tempDirContents.filter((f) => f.name.startsWith(`${STITCHED_ODOMETER_FILENAME_PREFIX}_`) && f.name.endsWith('.jpg'));
+            await Promise.all(oldStitchedFiles.map((f) => RNFS.unlink(f.path)));
+        } catch (error) {
+            Log.warn('stitchOdometerImages (native) failed to clean up old stitched files', {error});
+        }
+
+        const filename = `${STITCHED_ODOMETER_FILENAME_PREFIX}_${Date.now()}.jpg`;
+        const tempPath = `${RNFS.TemporaryDirectoryPath}/${filename}`;
+        await RNFS.writeFile(tempPath, base64, 'base64');
+
+        return {uri: `file://${tempPath}`, name: filename, type: 'image/jpeg'};
+    } finally {
+        skImage1?.dispose?.();
+        skImage2?.dispose?.();
+        snapshot?.dispose?.();
+        surface?.dispose?.();
+    }
+}
+
+export default stitchOdometerImages;

src/libs/stitchOdometerImages/index.ts

@@ -0,0 +1,55 @@
+import type {FileObject} from '@src/types/utils/Attachment';
+import STITCHED_ODOMETER_FILENAME_PREFIX from './constants';
+import calculateStitchLayout from './stitchLayout';
+
+// Tracks the single active stitched blob URL so that we can revoke it on the next call so at most one blob URL exists at a time
+let previousBlobUrl: string | null = null;
+
+function stitchOdometerImages(image1: FileObject | string | undefined, image2: FileObject | string | undefined): Promise<FileObject | null> {
+    const source1 = typeof image1 === 'string' ? image1 : (image1?.uri ?? null);
+    const source2 = typeof image2 === 'string' ? image2 : (image2?.uri ?? null);
+
+    if (!source1 || !source2) {
+        return Promise.resolve(null);
+    }
+
+    const loadImage = (src: string): Promise<HTMLImageElement> =>
+        new Promise((resolve, reject) => {
+            const img = new window.Image();
+            img.onload = () => resolve(img);
+            img.onerror = reject;
+            img.src = src;
+        });
+
+    return Promise.all([loadImage(source1), loadImage(source2)]).then(([img1, img2]) => {
+        const {width, height, img1Dest, img2Dest} = calculateStitchLayout(img1.width, img1.height, img2.width, img2.height);
+
+        const offscreenCanvas = document.createElement('canvas');
+        offscreenCanvas.width = width;
+        offscreenCanvas.height = height;
+        const ctx = offscreenCanvas.getContext('2d');
+        if (!ctx) {
+            throw new Error('Failed to get canvas context');
+        }
+
+        ctx.drawImage(img1, img1Dest.x, img1Dest.y, img1Dest.w, img1Dest.h);
+        ctx.drawImage(img2, img2Dest.x, img2Dest.y, img2Dest.w, img2Dest.h);
+
+        return new Promise<FileObject | null>((resolve, reject) => {
+            offscreenCanvas.toBlob((blob) => {
+                if (!blob) {
+                    reject(new Error('Canvas toBlob returned null'));
+                    return;
+                }
+                if (previousBlobUrl) {
+                    URL.revokeObjectURL(previousBlobUrl);
+                }
+                const uri = URL.createObjectURL(blob);
+                previousBlobUrl = uri;
+                resolve({uri, name: `${STITCHED_ODOMETER_FILENAME_PREFIX}.jpg`, type: 'image/jpeg'});
+            }, 'image/jpeg');
+        });
+    });
+}
+
+export default stitchOdometerImages;

src/libs/stitchOdometerImages/stitchLayout.ts

@@ -0,0 +1,50 @@
+type ImageRect = {x: number; y: number; w: number; h: number};
+
+type StitchLayout = {
+    width: number;
+    height: number;
+    horizontal: boolean;
+    img1Dest: ImageRect;
+    img2Dest: ImageRect;
+};
+
+/**
+ * Calculates the layout for stitching two odometer images into a single combined image.
+ *
+ * Stitching rules:
+ * - Images are merged horizontally (side-by-side) by default
+ * - If either image is landscape, images are merged vertically (stacked)
+ * - The smaller image is resized so the shared edge matches the length of the larger image's shared edge
+ */
+
+function calculateStitchLayout(w1: number, h1: number, w2: number, h2: number): StitchLayout {
+    const horizontal = !(w1 > h1 || w2 > h2);
+
+    if (horizontal) {
+        // Side-by-side: scale both images to the same height so the shared vertical edges match
+        const targetH = Math.max(h1, h2);
+        const scaledW1 = Math.round((w1 * targetH) / h1);
+        const scaledW2 = Math.round((w2 * targetH) / h2);
+        return {
+            width: scaledW1 + scaledW2,
+            height: targetH,
+            horizontal: true,
+            img1Dest: {x: 0, y: 0, w: scaledW1, h: targetH},
+            img2Dest: {x: scaledW1, y: 0, w: scaledW2, h: targetH},
+        };
+    }
+
+    // Stacked: scale both images to the same width so the shared horizontal edges match
+    const targetW = Math.max(w1, w2);
+    const scaledH1 = Math.round((h1 * targetW) / w1);
+    const scaledH2 = Math.round((h2 * targetW) / w2);
+    return {
+        width: targetW,
+        height: scaledH1 + scaledH2,
+        horizontal: false,
+        img1Dest: {x: 0, y: 0, w: targetW, h: scaledH1},
+        img2Dest: {x: 0, y: scaledH1, w: targetW, h: scaledH2},
+    };
+}
+
+export default calculateStitchLayout;