Force full screen on Not Here page for invalid validate codes#82502
Force full screen on Not Here page for invalid validate codes#82502Gonals merged 4 commits intoExpensify:mainfrom
Conversation
| <FullPageNotFoundView | ||
| testID="validate-code-not-found" | ||
| shouldShow={!isValidValidateCode(code)} | ||
| shouldForceFullScreen={!isValidValidateCode(code)} |
There was a problem hiding this comment.
❌ CONSISTENCY-3 (docs)
The expression !isValidValidateCode(code) is now duplicated on consecutive lines (for shouldShow and shouldForceFullScreen). Extract it to a local variable to keep a single source of truth and avoid the repeated function call.
const shouldShowNotFound = !isValidValidateCode(code);
// ...
<FullPageNotFoundView
testID="validate-code-not-found"
shouldShow={shouldShowNotFound}
shouldForceFullScreen={shouldShowNotFound}
shouldShowBackButton={shouldUseNarrowLayout}Please rate this suggestion with 👍 or 👎 to help us improve! Reactions are used to monitor reviewer efficiency.
There was a problem hiding this comment.
@MobileMage Creating a variable in this case makes sense, and it allows us to apply the suggestion to meet consistency rule
| const signInHere = useCallback(() => signInWithValidateCode(accountID, code, preferredLocale), [accountID, code, preferredLocale]); | ||
| const {translate} = useLocalize(); | ||
| const {shouldUseNarrowLayout} = useResponsiveLayout(); | ||
| const shouldShowNotFound = !isValidValidateCode(code); |
There was a problem hiding this comment.
@MobileMage We need to fix eslint rule and update condition bellow
| const shouldShowNotFound = !isValidValidateCode(code); | |
| const isValidCode = isValidValidateCode(code); |
Reviewer Checklist
Screenshots/VideosAndroid: HybridAppiOS: HybridApp |
|
🚧 @Gonals has triggered a test Expensify/App build. You can view the workflow run here. |
|
🧪🧪 Use the links below to test this adhoc build on Android, iOS, and Web. Happy testing! 🧪🧪
|
|
✋ 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/Gonals in version: 9.3.32-0 🚀
|
|
🚀 Deployed to production by https://github.com/blimpich in version: 9.3.32-3 🚀
|



Explanation of Change
When navigating to an invalid validate login URL (e.g.
/v/1/1), the "Not Here" page rendered byFullPageNotFoundViewdid not cover the full screen on wide layouts. The underlying page was visible behind it becauseshouldForceFullScreenwas not set, so theForceFullScreenViewwrapper did not applyposition: fixedwith an opaque background.This adds
shouldForceFullScreen={!isValidValidateCode(code)}to theFullPageNotFoundViewinValidateCodeModal, so whenever an invalid code triggers the error view, it also gets full-screen coverage with an opaque background that prevents content from showing through.Fixed Issues
$ #80731
PROPOSAL: #80731 (comment)
Tests
/v/1/1in the URL barOffline tests
N/A - This is a purely visual/layout fix with no network dependency.
QA Steps
staging.new.expensify.com/v/1/1PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectioncanBeMissingparam foruseOnyxtoggleReportand notonIconClick)src/languages/*files and using the translation methodSTYLE.md) were followedAvatar, I verified the components usingAvatarare working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))npm run compress-svg)Avataris modified, I verified thatAvataris working as expected in all cases)Designlabel and/or tagged@Expensify/designso the design team can review the changes.ScrollViewcomponent to make it scrollable when more elements are added to the page.mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps.Screenshots/Videos
Android: Native
Android: mWeb Chrome
iOS: Native
iOS: mWeb Safari
MacOS: Chrome / Safari
80731.mp4