[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

@JmillsExpensify

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: 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

Go to https://staging.new.expensify.com/home
Tap on workspace chat
Tap plus icon -- request money -- scan
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?

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

@JmillsExpensify

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

@JmillsExpensify

@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

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

Proposal Updated.

Added style reference

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:

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

@JmillsExpensify

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

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

@jayeshmangwani

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

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

Do we agree 👍 or 👎

@JmillsExpensify

@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.

@Krishna2323

Payment summary:

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

@JmillsExpensify

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

@jayeshmangwani

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.

Requested on NewDot

@Krishna2323

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

@jayeshmangwani

$500 approved for @jayeshmangwani

Navigation Menu

Repository navigation

[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 #39356

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Proposal

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

What is the root cause of that problem?

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

Result

Proposal Updated.

Proposal

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

What is the root cause of that problem?

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

44 remaining items

Regression Test Proposal

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

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

[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 #39356

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Apr 1, 2024

lanitochka17 commented on Apr 1, 2024

Krishna2323 commented on Apr 1, 2024

Proposal

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

What is the root cause of that problem?

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

Result

Krishna2323 commented on Apr 1, 2024

Proposal Updated.

dragnoir commented on Apr 1, 2024

Proposal

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

What is the root cause of that problem?

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

dragnoir commented on Apr 1, 2024

melvin-bot commented on Apr 8, 2024

JmillsExpensify commented on Apr 10, 2024

44 remaining items

melvin-bot commented on Jun 13, 2024

jayeshmangwani commented on Jun 19, 2024

Regression Test Proposal

jayeshmangwani commented on Jun 20, 2024

JmillsExpensify commented on Jun 22, 2024

Krishna2323 commented on Jun 22, 2024

JmillsExpensify commented on Jun 22, 2024

jayeshmangwani commented on Jun 22, 2024

mallenexpensify commented on Jun 24, 2024

JmillsExpensify commented on Jun 24, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions