[HOLD for payment 2024-11-20] [$250] Distance-Distance receipt placeholder icon is hardly visible when expense is submitted offline

[lanitochka17]

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.0.58-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/5183758
Email or phone of affected tester (no customers): applausetester+sjdosjdsod@applause.expensifail.com
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to workspace chat
3. Go offline
4. Submit a distance expense
5. Go to transaction thread

Expected Result:

The distance receipt placeholder icon will be visible when the expense is submitted offline

Actual Result:

The distance receipt placeholder icon is hardly visible when the expense is submitted offline

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6656375_1730884594497.20241106_171211.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021854203499700129961
• Upwork Job ID: 1854203499700129961
• Last Price Increase: 2024-11-06
• Automatic offers:
• FitseTLT | Contributor | 104805961

Issue Owner

Current Issue Owner: @puneetlath

[melvin-bot]

Triggered auto assignment to @puneetlath (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021854203499700129961

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @jayeshmangwani (External)

[FitseTLT]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Distance-Distance receipt placeholder icon is hardly visible when expense is submitted offline

What is the root cause of that problem?

We are graying out the whole MoneyRequestView here b/c the parentReportAction pendingAction is 'add'

App/src/pages/home/report/ReportActionItemContentCreated.tsx

Line 109 in e267aa6

<OfflineWithFeedback pendingAction={action.pendingAction}>

App/src/pages/home/report/ReportActionItemContentCreated.tsx

Line 155 in e267aa6

<OfflineWithFeedback pendingAction={action.pendingAction}>

But we are also graying it out again because transaction.pendingAction is add

App/src/components/ReportActionItem/MoneyRequestView.tsx

Line 473 in e267aa6

pendingAction={pendingAction}

So we are graying it out twice.

What changes do you think we should make in order to solve the problem?

We should change the pendingAction to be waypoints pending state for distance request and receipt pending action for the other cases as we display the receipt or the map (for distance request) inside ReportActionItemImage

                        pendingAction={isDistanceRequest ? getPendingFieldAction('waypoints') : getPendingFieldAction('receipt')}

What alternative solutions did you explore? (Optional)

[Anaslancer]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Distance-Distance receipt placeholder icon is hardly visible when expense is submitted offline

What is the root cause of that problem?

We are using the OfflineWithFeedback component twice. So the opacity would be 0.25 (=0.5 X 0.5).

App/src/pages/home/report/ReportActionItemContentCreated.tsx

Lines 155 to 184 in c755314

	<OfflineWithFeedback pendingAction={action.pendingAction}>
	{!isEmptyObject(transactionThreadReport?.reportID) ? (
	<>
	<MoneyReportView
	report={report}
	policy={policy}
	isCombinedReport
	pendingAction={action.pendingAction}
	shouldShowTotal={transaction ? transactionCurrency !== report.currency : false}
	shouldHideThreadDividerLine={shouldHideThreadDividerLine}
	/>
	<ShowContextMenuContext.Provider value={contextMenuValue}>
	<View>
	<MoneyRequestView
	report={transactionThreadReport}
	shouldShowAnimatedBackground={false}
	/>
	{renderThreadDivider}
	</View>
	</ShowContextMenuContext.Provider>
	</>
	) : (
	<MoneyReportView
	report={report}
	policy={policy}
	pendingAction={action.pendingAction}
	shouldHideThreadDividerLine={shouldHideThreadDividerLine}
	/>
	)}
	</OfflineWithFeedback>

App/src/components/ReportActionItem/MoneyRequestView.tsx

Lines 472 to 512 in c755314

	<OfflineWithFeedback
	pendingAction={pendingAction}
	errors={errors}
	errorRowStyles={[styles.mh4]}
	onClose={() => {
	if (!transaction?.transactionID && linkedTransactionID === '-1') {
	return;
	}
	if (transaction?.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD) {
	if (chatReport?.reportID && ReportUtils.getAddWorkspaceRoomOrChatReportErrors(chatReport)) {
	Report.navigateToConciergeChatAndDeleteReport(chatReport.reportID, true, true);
	return;
	}
	if (parentReportAction) {
	const urlToNavigateBack = IOU.cleanUpMoneyRequest(transaction?.transactionID ?? linkedTransactionID, parentReportAction, true);
	Navigation.goBack(urlToNavigateBack);
	return;
	}
	}
	Transaction.clearError(transaction?.transactionID ?? linkedTransactionID);
	ReportActions.clearAllRelatedReportActionErrors(report?.reportID ?? '-1', parentReportAction);
	}}
	>
	{hasReceipt && (
	<View style={styles.moneyRequestViewImage}>
	<ReportActionItemImage
	thumbnail={receiptURIs?.thumbnail}
	fileExtension={receiptURIs?.fileExtension}
	isThumbnail={receiptURIs?.isThumbnail}
	image={receiptURIs?.image}
	isLocalFile={receiptURIs?.isLocalFile}
	filename={receiptURIs?.filename}
	transaction={updatedTransaction ?? transaction}
	enablePreviewModal
	readonly={readonly || !canEditReceipt}
	isFromReviewDuplicates={isFromReviewDuplicates}
	/>
	</View>
	)}
	</OfflineWithFeedback>

ReportActionItemImage component rendered the placeholder icon.

What changes do you think we should make in order to solve the problem?

We should not set the opacity twice (only once setting) at this moment.
We can set it easily using shouldDisableOpacity prop as true in OfflineWithFeedback component.

App/src/components/ReportActionItem/MoneyRequestView.tsx

Lines 472 to 495 in c755314

	<OfflineWithFeedback
	pendingAction={pendingAction}
	errors={errors}
	errorRowStyles={[styles.mh4]}
	onClose={() => {
	if (!transaction?.transactionID && linkedTransactionID === '-1') {
	return;
	}
	if (transaction?.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD) {
	if (chatReport?.reportID && ReportUtils.getAddWorkspaceRoomOrChatReportErrors(chatReport)) {
	Report.navigateToConciergeChatAndDeleteReport(chatReport.reportID, true, true);
	return;
	}
	if (parentReportAction) {
	const urlToNavigateBack = IOU.cleanUpMoneyRequest(transaction?.transactionID ?? linkedTransactionID, parentReportAction, true);
	Navigation.goBack(urlToNavigateBack);
	return;
	}
	}
	Transaction.clearError(transaction?.transactionID ?? linkedTransactionID);
	ReportActions.clearAllRelatedReportActionErrors(report?.reportID ?? '-1', parentReportAction);
	}}
	>

I added shouldDisableOpacity={true} in there(^^^) below errorRowStyles property.

What alternative solutions did you explore? (Optional)

N/A

Contributor details

Your Expensify account email: anasup1995@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~01aff093c9a804b145

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[Anaslancer]

Before changing the code;

[Anaslancer]

After changing the code;

[jayeshmangwani]

@FitseTLT's Proposal looks good to me. Let's make pendingAction action-specific for ReportActionItemImage.

🎀 👀 🎀 C+ reviewed

[melvin-bot]

Current assignee @puneetlath is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[melvin-bot]

📣 @FitseTLT 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.60-3 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fix - Distance-Distance receipt placeholder icon is hardly visible when expense is submitted offline #52279

If no regressions arise, payment will be issued on 2024-11-20. 🎊

For reference, here are some details about the assignees on this issue:

• @jayeshmangwani requires payment through NewDot Manual Requests
• @FitseTLT requires payment automatic offer (Contributor)

[melvin-bot]

@jayeshmangwani @puneetlath @jayeshmangwani The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[jayeshmangwani]

BugZero Checklist:

• [Contributor] Classify the bug:

Bug classification

Source of bug:

• 1a. Result of the original design (eg. a case wasn't considered)
• 1b. Mistake during implementation
• 1c. Backend bug
• 1z. Other:

Where bug was reported:

• 2a. Reported on production
• 2b. Reported on staging (deploy blocker)
• 2c. Reported on both staging and production
• 2d. Reported on a PR
• 2z. Other:

Who reported the bug:

• 3a. Expensify user
• 3b. Expensify employee
• 3c. Contributor
• 3d. QA
• 3z. Other:

• [Contributor] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake.

  Link to comment: Fix 25% opacity in MoneyRequestView and TaskView #27830 (comment)

• [Contributor] If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner.

  Link to discussion: N/A - not the critical one, offline UI issue

• [Contributor] If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.

I don't have a strong opinion on creating a dedicated regression test for this simple offline UI issue. However, if we decide to create one, the test would include the following steps:

Regression Test Proposal

1. Go to a Workspace Chat.
2. Go Offline.
3. Submit a Distance Expense.
4. Navigate to the Transaction Thread.
5. Verify that the Pending Map View is grayed out with an opacity of 50%, ensuring it's not too faded.

Do we agree 👍 or 👎

[melvin-bot]

@puneetlath, @jayeshmangwani, @FitseTLT Whoops! This issue is 2 days overdue. Let's get this updated quick!

[puneetlath]

Payment summary:

• C - $250 - @FitseTLT - paid via Upwork
• C+ - $250 - @jayeshmangwani - to be paid via NewDot

Thanks everyone!

[garrettmknight]

$250 approved for @jayeshmangwani