[$250] Odometer - Photo is not cropped after saving cropped photo

[mitarachim]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.3.38-0
Reproducible in staging?: Yes
Reproducible in production?: N/A - new feature, doesn't exist in prod
If this was caught during regression testing, add the test name, ID and link from BrowserStack: #83556
Email or phone of affected tester (no customers): applausetester+sjddjois2j1d@applause.expensifail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Mac 26.2 / Chrome
App Component: Money Requests

Action Performed:

Precondition:

• Log in with Expensifail account.

1. Go to staging.new.expensify.com
2. Go to workspace chat.
3. Click + > Track distance > Odometer.
4. Enter Start and End reading.
5. Insert Start and End photo.
6. Click Next.
7. On confirm page, click Distance.
8. Click Start or End photo.
9. Click Crop.
10. Crop the photo and click Save.

Expected Result:

Cropped area will be saved.

Actual Result:

Photo is not cropped after saving cropped photo.

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari

Screenshots/Videos

Bug7104088_1773658002293.8.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @jakubkalinski0

[melvin-bot]

You have been assigned to this deploy blocker because you recently merged this PR: #83556

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[OSBotify]

🔍 Investigation Summary

Classification: Frontend bug
Causing PR: #83556 - "[Odometer] Image stitching" by @jakubkalinski0 (High confidence)
Related Issues: None

Recommendation: REVERT

PR #83556 introduced image stitching for odometer photos but did not implement proper crop handling for individual odometer images. The crop functionality updates the main transaction receipt instead of the individual odometer image, causing the cropped changes to be lost.

Labels: No label changes made. Both DeployBlockerCash and DeployBlocker labels were added by an Expensify org member, so per the investigation guidelines, I am not removing them. An internal engineer should review whether the DeployBlocker label is appropriate for this frontend-only issue.

📋 Detailed Analysis

Evidence

PR #83556 introduced the odometer image stitching feature which combines start and end odometer photos into a single receipt image. The PR modified:

• Added src/libs/stitchOdometerImages/ library for combining images
• Modified IOURequestStepDistanceOdometer.tsx to call stitching and set the combined image as the receipt
• Modified TransactionReceiptModalContent.tsx to handle display of stitched receipts

The bug is reproducible on staging (v9.3.38-0) where this PR was merged, and does not exist in production where this feature does not exist.

Verification

The issue occurs in the crop flow within TransactionReceiptModalContent.tsx. When a user:

1. Creates an odometer distance request with both start and end photos
2. Proceeds to the confirmation page (images are stitched at this point)
3. Goes back to edit an individual photo (Start or End)
4. Crops the photo and clicks Save

Root Cause Location: /home/runner/_work/App/App/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx lines 332-391

The saveCrop function does not have any special handling for odometer images:

const saveCrop = useCallback(() => {
    // ... cropping logic ...
    if (isDraftTransaction) {
        setMoneyRequestReceipt(transaction.transactionID, imageUriResult, croppedFilename, isDraftTransaction, receiptType);
    } else {
        replaceReceipt({...});
    }
}, [transaction?.transactionID, isDraftTransaction, sourceUri, isImage, cropRect, receiptFilename, policyCategories, transaction?.receipt?.type, policy, exitCropMode]);

Root Cause

When cropping an individual odometer photo (Start or End), the code calls setMoneyRequestReceipt() which updates the main transaction receipt, not the individual odometer image (odometerStartImage or odometerEndImage).

The correct behavior should be:

1. Call setMoneyRequestOdometerImage() to update the individual odometer image
2. Re-trigger the stitching logic to regenerate the combined receipt with the newly cropped image

Since the individual odometer images are not updated, the crop changes are lost. The main receipt gets temporarily replaced with just the cropped individual photo, but this is incorrect as it should be a stitched combination of both images.

[DylanDylann]

cc @jakubkalinski0