-
Notifications
You must be signed in to change notification settings - Fork 3.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix: Scan - No error pop-up and scan expense with corrupted PDF can be submitted via QAB #44778
Conversation
Signed-off-by: Krishna Gupta <belivethatkg@gmail.com>
Signed-off-by: Krishna Gupta <belivethatkg@gmail.com>
Signed-off-by: Krishna Gupta <belivethatkg@gmail.com>
@Krishna2323 How about your update? And could you please try to add new props into |
Signed-off-by: Krishna Gupta <belivethatkg@gmail.com>
Signed-off-by: Krishna Gupta <belivethatkg@gmail.com>
Signed-off-by: Krishna Gupta <belivethatkg@gmail.com>
Signed-off-by: Krishna Gupta <belivethatkg@gmail.com>
Signed-off-by: Krishna Gupta <belivethatkg@gmail.com>
@suneox, PR is ready.
We already have |
// eslint-disable-next-line @typescript-eslint/non-nullable-type-assertion-style | ||
previewSourceURL={pdfFile?.uri ?? ''} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We don’t need to disable eslint for that case because an empty previewSourceURL is invalid. Instead, I suggest checking the condition before rendering ST like {pdfFile.uri && (< PDFThumbnail ....
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
updated. we don't need to check for pdfFile.uri
as we are already checking for pdfFile
before rendering.
<View style={{height: 0, overflow: 'hidden', width: 0, opacity: 0}}> | ||
{pdfFile && ( | ||
<View style={{height: 1, width: 1}}> | ||
<PDFThumbnail |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<View style={{height: 0, overflow: 'hidden', width: 0, opacity: 0}}> | |
{pdfFile && ( | |
<View style={{height: 1, width: 1}}> | |
<PDFThumbnail | |
{pdfFile && ( | |
<PDFThumbnail | |
invisible |
Can we create a new prop, such as invisible, and handle the style inside PDFThumbnail instead of handling it at the screen level?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We already have enabled prop for that but the PDF wasn't rendered again when selecting corrupt PDF again and because of that nothing happens when selecting PDF second time.
const PDFThumbnailView = pdfFile ? ( | ||
<View style={{position: 'absolute', opacity: 0, width: 1, height: 1}}> | ||
<PDFThumbnail | ||
// eslint-disable-next-line @typescript-eslint/non-nullable-type-assertion-style | ||
previewSourceURL={pdfFile.uri ?? ''} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Same IOURequestStepScan/index.native.tsx
mentioned above, handle the invisible style inside PDFThumbnail
and prevent disabling TypeScript.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
updated.
}} | ||
onPassword={() => { | ||
setPdfFile(null); | ||
Alert.alert(translate('attachmentPicker.attachmentError'), translate('attachmentPicker.protectedPDFNotSupported')); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
At MoneyRequestConfirmationListFooter.tsx we show error by confirmation modal
App/src/components/MoneyRequestConfirmationListFooter.tsx
Lines 657 to 665 in c5eafd3
<ConfirmModal | |
title={translate('attachmentPicker.attachmentError')} | |
onConfirm={navigateBack} | |
onCancel={navigateBack} | |
isVisible={isAttachmentInvalid} | |
prompt={invalidAttachmentPrompt} | |
confirmText={translate('common.close')} | |
shouldShowCancelButton={false} | |
/> |
So we have to update Alert
to ConfirmModal
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@suneox, for native we use alert to show all file related issues.
App/src/pages/iou/request/step/IOURequestStepScan/index.native.tsx
Lines 165 to 186 in 29e8df5
const validateReceipt = (file: FileObject) => { | |
const {fileExtension} = FileUtils.splitExtensionFromFileName(file?.name ?? ''); | |
if ( | |
!CONST.API_ATTACHMENT_VALIDATIONS.ALLOWED_RECEIPT_EXTENSIONS.includes( | |
fileExtension.toLowerCase() as TupleToUnion<typeof CONST.API_ATTACHMENT_VALIDATIONS.ALLOWED_RECEIPT_EXTENSIONS>, | |
) | |
) { | |
Alert.alert(translate('attachmentPicker.wrongFileType'), translate('attachmentPicker.notAllowedExtension')); | |
return false; | |
} | |
if ((file?.size ?? 0) > CONST.API_ATTACHMENT_VALIDATIONS.MAX_SIZE) { | |
Alert.alert(translate('attachmentPicker.attachmentTooLarge'), translate('attachmentPicker.sizeExceeded')); | |
return false; | |
} | |
if ((file?.size ?? 0) < CONST.API_ATTACHMENT_VALIDATIONS.MIN_SIZE) { | |
Alert.alert(translate('attachmentPicker.attachmentTooSmall'), translate('attachmentPicker.sizeNotMet')); | |
return false; | |
} | |
return true; | |
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Agreed, just make it consistent with other places on IOURequestStepScan/native
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@suneox, you mean to make it consistent with Alert.alert
for native, right? If so, then it's already consistent.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, we can using Alert for native in this case
}} | ||
onLoadError={() => { | ||
setPdfFile(null); | ||
Alert.alert(translate('attachmentPicker.attachmentError'), translate('attachmentPicker.errorWhileSelectingCorruptedAttachment')); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We have to update Alert
to ConfirmModal
Signed-off-by: krishna2323 <belivethatkg@gmail.com>
@suneox, ready for another review. |
Reviewer Checklist
Screenshots/VideosAndroid: NativeScreen.Recording.2024-07-10.at.21.44.38.movAndroid: mWeb ChromeScreen.Recording.2024-07-10.at.21.41.17.moviOS: NativeScreen.Recording.2024-07-10.at.21.14.55.moviOS: mWeb SafariScreen.Recording.2024-07-10.at.21.26.12.movMacOS: Chrome / SafariScreen.Recording.2024-07-10.at.21.29.20.movMacOS: DesktopScreen.Recording.2024-07-10.at.21.22.15.mov |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Testing passed on all platforms and the requested changes have been updated. LGTM
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
A few questions for clarity + clean up
style={{height: 1, width: 1, opacity: 0, position: 'absolute'}} | ||
previewSourceURL={pdfFile?.uri ?? ''} | ||
onLoadSuccess={() => { | ||
setPdfFile(null); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why do we call this with null here?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
for some reason PDF isn't re-rendering on android native when file is changed to another file so we need to set it to null first.
validateReceipt(file).then((isFileValid) => { | ||
if (!isFileValid) { | ||
return; | ||
} | ||
if (Str.isPDF(file.name ?? '') && !isPdfValidated) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
could you explain the check for a not validated pdf here?
Signed-off-by: krishna2323 <belivethatkg@gmail.com>
Signed-off-by: krishna2323 <belivethatkg@gmail.com>
Screenshots look good to me. |
Signed-off-by: krishna2323 <belivethatkg@gmail.com>
Signed-off-by: krishna2323 <belivethatkg@gmail.com>
@grgia bump |
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
🚀 Deployed to staging by https://github.com/grgia in version: 9.0.11-0 🚀
|
🚀 Cherry-picked to staging by https://github.com/francoisl in version: 9.0.11-2 🚀
@Expensify/applauseleads please QA this PR and check it off on the deploy checklist if it passes. |
🚀 Deployed to production by https://github.com/francoisl in version: 9.0.11-5 🚀
|
🚀 Deployed to production by https://github.com/francoisl in version: 9.0.12-0 🚀
|
Details
Fixed Issues
$ #43645
PROPOSAL: #43645 (comment)
Tests
Offline tests
QA Steps
PR Author Checklist
### Fixed Issues
section aboveTests
sectionOffline steps
sectionQA steps
sectiontoggleReport
and notonIconClick
)myBool && <MyComponent />
.src/languages/*
files and using the translation methodSTYLE.md
) were followedAvatar
, I verified the components usingAvatar
are working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG)
)Avatar
is modified, I verified thatAvatar
is working as expected in all cases)Design
label and/or tagged@Expensify/design
so the design team can review the changes.ScrollView
component to make it scrollable when more elements are added to the page.main
branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTest
steps.Screenshots/Videos
Android: Native
android_native.mp4
Android: mWeb Chrome
android_chrome.mp4
iOS: Native
ios_native.mp4
iOS: mWeb Safari
ios_safari.mp4
MacOS: Chrome / Safari
web_chrome.mp4
MacOS: Desktop
desktop_app.mp4