[HOLD for payment 2024-06-20] [HOLD for payment 2024-06-18] [$250] IOU Scan - In dark mode, the damaged PDF - file is barely visible

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 1.4.58-4
Reproducible in staging?: Y
Reproducible in production?: 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/4467055
Issue reported by: Applause - Internal Team

Action Performed:

Pre-condition:use dark mode

1. Go to https://staging.new.expensify.com/home
2. Tap on workspace chat
3. Tap plus icon -- request money -- scan
4. Upload corrupt pdf attached below

Expected Result:

In dark mode, failed to load pdf message must be clearly visible while uploading corrupt pdf

Actual Result:

In dark mode, failed to load pdf message is barely visible while uploading corrupt pdf

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6434200_1711975273611.sis.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01caa5c1b848d17f6b
• Upwork Job ID: 1778050286258974720
• Last Price Increase: 2024-04-10
• Automatic offers:
• jayeshmangwani | Reviewer | 0
• Krishna2323 | Contributor | 0

Issue Owner

Current Issue Owner: @JmillsExpensify

[melvin-bot]

Triggered auto assignment to @JmillsExpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[lanitochka17]

@JmillsExpensify FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[Krishna2323]

Proposal

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

IOU Scan - In dark mode, the damaged PDF - file is barely visible

What is the root cause of that problem?

The root cause it that the Document is using the default styles for showing the error message since we haven't added our custom component using error prop.

App/src/components/PDFThumbnail/index.tsx

Lines 20 to 29 in 80eb3b7

	<Document
	loading={<FullScreenLoadingIndicator />}
	file={isAuthTokenRequired ? addEncryptedAuthTokenToURL(previewSourceURL) : previewSourceURL}
	options={{
	cMapUrl: 'cmaps/',
	cMapPacked: true,
	}}
	externalLinkTarget="_blank"
	onPassword={onPassword}
	>

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

We need to add the custom component like we do in WebPDFDocument.

App/src/components/PDFView/WebPDFDocument.js

Lines 96 to 99 in 80eb3b7

	<Document
	loading={<FullScreenLoadingIndicator />}
	error={<Text style={errorLabelStyles}>{translate('attachmentView.failedToLoadPDF')}</Text>}
	file={sourceURL}

We might want to add default styles like textLabel but that can be discussed. Additionally we can errorLabelStyles just like we do in WebPDFDocument. Styling changes can be discussed.

Styles we use in AttachmentView.

App/src/components/Attachments/AttachmentView/index.tsx

Line 173 in c848cb6

errorLabelStyles={isUsedInAttachmentModal ? [styles.textLabel, styles.textLarge] : [styles.cursorAuto]}

Result

[Krishna2323]

Proposal Updated.

• Added style reference

[dragnoir]

Proposal

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

In dark mode, the damaged PDF - text missing style

What is the root cause of that problem?

We can see how the same component in some places of the app, text is white and other areas, the text is dark.

The used component Document, grab the style for the text color from the nearest parent component that sets the style for the text.

App/src/components/PDFThumbnail/index.tsx

Line 20 in aacfa8c

<Document

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

We should encapsulate the Document component within a View that applies the necessary styling to the text. By doing this, we ensure consistent text styling across all instances where the PDFThumbnail component is used.

As example we can use

+ <View  style={[styles.textVersion]}>
    <Document
      loading={<FullScreenLoadingIndicator  />}

POC:

[dragnoir]

cc @Expensify/design for thought on how to style the Failed to load PDF file. text!

[melvin-bot]

@JmillsExpensify Still overdue 6 days?! Let's take care of this!

[JmillsExpensify]

I think this is a good one to tackle as part of #wave-collect so I'm adding to that project.

[melvin-bot]

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

[melvin-bot]

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

[jayeshmangwani]

Thanks for the proposals @Krishna2323 @dragnoir . I like the idea of adding the custom error Text component to the Document component; we can go with @Krishna2323 's Proposal.

🎀 👀 🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @hayata-suenaga, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[melvin-bot]

@JmillsExpensify @jayeshmangwani @hayata-suenaga this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[jayeshmangwani]

@hayata-suenaga What's your opinion on the proposal ?

[melvin-bot]

@JmillsExpensify, @jayeshmangwani, @hayata-suenaga Whoops! This issue is 2 days overdue. Let's get this updated quick!

[JmillsExpensify]

Still working through the PR

[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 1.4.81-11 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• fix: IOU Scan - In dark mode, the damaged PDF - file is barely visible. #40607

If no regressions arise, payment will be issued on 2024-06-18. 🎊

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

• @jayeshmangwani requires payment automatic offer (Reviewer)
• @Krishna2323 requires payment automatic offer (Contributor)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@jayeshmangwani] The PR that introduced the bug has been identified. Link to the PR:
• [@jayeshmangwani] 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:
• [@jayeshmangwani] A discussion in #expensify-bugs 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:
• [@jayeshmangwani] Determine if we should create a regression test for this bug.
• [@jayeshmangwani] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@JmillsExpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[Krishna2323]

@JmillsExpensify, this issue was created before announcement, can you pls update the bounty? Thanks

[melvin-bot]

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

• fix: IOU Scan - In dark mode, the damaged PDF - file is barely visible. #40607

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

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

• @jayeshmangwani requires payment automatic offer (Reviewer)
• @Krishna2323 requires payment automatic offer (Contributor)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@jayeshmangwani] The PR that introduced the bug has been identified. Link to the PR:
• [@jayeshmangwani] 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:
• [@jayeshmangwani] A discussion in #expensify-bugs 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:
• [@jayeshmangwani] Determine if we should create a regression test for this bug.
• [@jayeshmangwani] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@JmillsExpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[jayeshmangwani]

• [@jayeshmangwani] The PR that introduced the bug has been identified. Link to the PR: feat: add PDFThumbnail to preview PDF receipt #35255
• [@jayeshmangwani] 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: feat: add PDFThumbnail to preview PDF receipt #35255 (comment)
• [@jayeshmangwani] A discussion in #expensify-bugs 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: This is not needed here; it's a design bug that can be been solved on PDF error flow
• [@jayeshmangwani] Determine if we should create a regression test for this bug. Yes
• [@jayeshmangwani] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.

Regression Test Proposal

1. Open the app and press the FAB menu -> Submit expense -> Scan.
2. Upload any corrupt PDF.
3. Select any participant.
4. Verify that the alert modal is shown with the title 'Attachment Error'.
5. Verify that the background has a placeholder with a receipt slash component on the confirmation page.

Do we agree 👍 or 👎

[jayeshmangwani]

@JmillsExpensify Is it possible to get paid through NewDot for this job instead of Upwork?
since the issue was created before I was getting paid through ND and I received an Upwork offer. If not, no problem—we can go through Upwork.

[JmillsExpensify]

Payment summary:

• Contributor: $500 @Krishna2323
• Contributor+: $500 @jayeshmangwani

[Krishna2323]

@JmillsExpensify, this issue was created before announcement, can you pls update the bounty? Thanks

[JmillsExpensify]

Updated above since this was created a couple of days before the price change. @jayeshmangwani I canceled your Upwork contract. Please submit a request via NewDot.

[jayeshmangwani]

Requested on NewDot

[mallenexpensify]

Contributor: @Krishna2323 paid $500 via Upwork
Contributor+: @jayeshmangwani due $500 via NewDot

[JmillsExpensify]

$500 approved for @jayeshmangwani