text:
Fix useFlipper warning

Details

useFlipper is only available on native, so when we run the app, we got a warning about useFlipper.
Fixed Issues

$ https://github.com/Expensify/App/issues/26988
PROPOSAL: https://github.com/Expensify/App/issues/26988#issuecomment-1711097321
Tests

Same as QA Steps

[x] Verify that no errors appear in the JS console

Offline tests

Same as QA Steps
QA Steps

Web/Desktop/mWeb

Open the app and refresh if needed
Verify there is no useFlipper warning (The native module for Flipper seems unavailable...) in the console.

Android/iOS

Open Flipper desktop app (install react-navigation flipper plugin if needed)
Open the app
Select the device you want to test
and navigate to anywhere
Verify the React Navigation flipper plugin still works

[x] Verify that no errors appear in the JS console

PR Author Checklist

[x] I linked the correct issue in the ### Fixed Issues section above
[x] I wrote clear testing steps that cover the changes made in this PR

[x] I added steps for local testing in the Tests section
[x] I added steps for the expected offline behavior in the Offline steps section
[x] I added steps for Staging and/or Production testing in the QA steps section
[x] I added steps to cover failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
[x] I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
[x] I tested this PR with a High Traffic account against the staging or production API to ensure there are no regressions (e.g. long loading states that impact usability).

[x] I included screenshots or videos for tests on all platforms
[x] I ran the tests on all platforms & verified they passed on:

[x] Android / native
[x] Android / Chrome
[x] iOS / native
[x] iOS / Safari
[x] MacOS / Chrome / Safari
[x] MacOS / Desktop

[x] I verified there are no console errors (if there's a console error not related to the PR, report it or open an issue for it to be fixed)
[x] I followed proper code patterns (see Reviewing the code)

[x] I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick)
[x] I verified that the left part of a conditional rendering a React component is a boolean and NOT a string, e.g. myBool && <MyComponent />.
[x] I verified that comments were added to code that is not self explanatory
[x] I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
[x] I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method

[x] If any non-english text was added/modified, I verified the translation was requested/reviewed in #expensify-open-source and it was approved by an internal Expensify engineer. Link to Slack message:

[x] I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
[x] I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is approved by marketing by adding the Waiting for Copy label for a copy review on the original GH to get the correct copy.
[x] I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
[x] I verified the JSDocs style guidelines (in STYLE.md) were followed

[x] If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
[x] I followed the guidelines as stated in the Review Guidelines
[x] I tested other components that can be impacted by my changes (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar are working as expected)
[x] I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
[x] I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
[x] I verified that if a function's arguments changed that all usages have also been updated correctly
[x] If a new component is created I verified that:

[x] A similar component doesn't exist in the codebase
[x] All props are defined accurately and each prop has a /** comment above it */
[x] The file is named correctly
[x] The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
[x] The only data being stored in the state is data necessary for rendering and nothing else
[x] If we are not using the full Onyx data that we loaded, I've added the proper selector in order to ensure the component only re-renders when the data it is using changes
[x] For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
[x] Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
[x] All JSX used for rendering exists in the render method
[x] The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions

[x] If any new file was added I verified that:

[x] The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory

[x] If a new CSS style is added I verified that:

[x] A similar style doesn't already exist
[x] The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG))

[x] If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
[x] If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
[x] If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
[x] If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
[x] If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
[x] If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.
[x] I have checked off every checkbox in the PR author checklist, including those that don't apply to this PR.

Screenshots/Videos

Web

https://github.com/Expensify/App/assets/50919443/4aa311e3-44c8-4342-b51e-bb8d686cc06e

Mobile Web - Chrome

https://github.com/Expensify/App/assets/50919443/bf9e0a07-bd4b-492f-b3eb-1a9fb6ba1d6b

Mobile Web - Safari

https://github.com/Expensify/App/assets/50919443/47a3387c-da18-4663-8701-9c996e579e07

Desktop

https://github.com/Expensify/App/assets/50919443/3c370981-9568-4d68-abca-6cf88d13f95d

iOS

https://github.com/Expensify/App/assets/50919443/f89b7840-dbbd-4e21-b8e8-d4c1c05e25e9

Android

https://github.com/Expensify/App/assets/50919443/e2838031-bd8f-419f-8fcb-e1899c3bb6cd

Reviewer Checklist

[x] I have verified the author checklist is complete (all boxes are checked off).
[x] I verified the correct issue is linked in the ### Fixed Issues section above
[x] I verified testing steps are clear and they cover the changes made in this PR

[x] I verified the steps for local testing are in the Tests section
[x] I verified the steps for Staging and/or Production testing are in the QA steps section
[x] I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
[x] I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)

[x] I checked that screenshots or videos are included for tests on all platforms
[x] I included screenshots or videos for tests on all platforms
[x] I verified tests pass on all platforms & I tested again on:

[x] Android / native
[x] Android / Chrome
[x] iOS / native
[x] iOS / Safari
[x] MacOS / Chrome / Safari
[x] MacOS / Desktop

[x] If there are any errors in the console that are unrelated to this PR, I either fixed them (preferred) or linked to where I reported them in Slack
[x] I verified proper code patterns were followed (see Reviewing the code)

[x] I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick).
[x] I verified that the left part of a conditional rendering a React component is a boolean and NOT a string, e.g. myBool && <MyComponent />.
[x] I verified that comments were added to code that is not self explanatory
[x] I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
[x] I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
[x] I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
[x] I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is approved by marketing by adding the Waiting for Copy label for a copy review on the original GH to get the correct copy.
[x] I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
[x] I verified the JSDocs style guidelines (in STYLE.md) were followed

[x] If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
[x] I verified that this PR follows the guidelines as stated in the Review Guidelines
[x] I verified other components that can be impacted by these changes have been tested, and I retested again (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar have been tested & I retested again)
[x] I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
[x] I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
[x] If a new component is created I verified that:

[x] A similar component doesn't exist in the codebase
[x] All props are defined accurately and each prop has a /** comment above it */
[x] The file is named correctly
[x] The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
[x] The only data being stored in the state is data necessary for rendering and nothing else
[x] For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
[x] Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
[x] All JSX used for rendering exists in the render method
[x] The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions

[x] If any new file was added I verified that:

[x] The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory

[x] If a new CSS style is added I verified that:

[x] A similar style doesn't already exist
[x] The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)

[x] If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
[x] If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
[x] If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
[x] If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
[x] If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
[x] If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.
[x] I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

Screenshots/Videos

Web
https://github.com/Expensify/App/assets/108292595/3c6f7a2e-1731-421d-a367-cd54b4cb28f5

Mobile Web - Chrome

Mobile Web - Safari
https://github.com/Expensify/App/assets/108292595/1b40cc68-215c-48e7-aa0a-a1facdc7f851

Desktop
https://github.com/Expensify/App/assets/108292595/d20797f4-8a1e-4676-bdce-2333b88c3406

iOS
https://github.com/Expensify/App/assets/108292595/971fecc8-a3b3-44cf-88a4-f604a9b19d50

Android

:hand: 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/jasperhuangg in version: 1.3.77-0 🚀

platform
result

🤖 android 🤖
success ✅

🖥 desktop 🖥
success ✅

🍎 iOS 🍎
success ✅

🕸 web 🕸
success ✅

@situchan @jasperhuangg @mountiny  Can you please confirm if QA team can validate or it is internal?

Android / iOS

Open Flipper desktop app (install react-navigation flipper plugin if needed)
Open the app
Select the device you want to test
and navigate to anywhere
Verify the React Navigation flipper plugin still works

@kavimuru I think this is noQA, this shoudl be only testable locally

🚀 Deployed to production by https://github.com/mountiny in version: 1.3.77-7 🚀

platform
result

🤖 android 🤖
success ✅

🖥 desktop 🖥
success ✅

🍎 iOS 🍎
failure ❌

🕸 web 🕸
success ✅

authors: OSBotify bernhardoj kavimuru mountiny situchan


text:
Add new helpsite article for our new Budgets feature

Details
Creating a new article for the Budgets feature we are launching next week!
Fixed Issues
$ https://github.com/Expensify/Expensify/issues/337951
Tests

Go to the new helpsite and head to Workspaces and Domain Settings
Make sure there is a new article called Budgets
Make sure formatting shows as expected

Offline tests
N/A
QA Steps
PR Author Checklist

[x] I linked the correct issue in the ### Fixed Issues section above
[x] I wrote clear testing steps that cover the changes made in this PR

[x] I added steps for local testing in the Tests section
[x] I added steps for the expected offline behavior in the Offline steps section
[x] I added steps for Staging and/or Production testing in the QA steps section
[x] I added steps to cover failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
[x] I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
[x] I tested this PR with a High Traffic account against the staging or production API to ensure there are no regressions (e.g. long loading states that impact usability).

[x] I included screenshots or videos for tests on all platforms
[x] I ran the tests on all platforms & verified they passed on:

[x] Android: Native
[x] Android: mWeb Chrome
[x] iOS: Native
[x] iOS: mWeb Safari
[x] MacOS: Chrome / Safari
[x] MacOS: Desktop

[x] I verified there are no console errors (if there's a console error not related to the PR, report it or open an issue for it to be fixed)
[x] I followed proper code patterns (see Reviewing the code)

[x] I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick)
[x] I verified that the left part of a conditional rendering a React component is a boolean and NOT a string, e.g. myBool && <MyComponent />.
[x] I verified that comments were added to code that is not self explanatory
[x] I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
[x] I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method

[x] If any non-english text was added/modified, I verified the translation was requested/reviewed in #expensify-open-source and it was approved by an internal Expensify engineer. Link to Slack message:

[x] I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
[x] I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is approved by marketing by adding the Waiting for Copy label for a copy review on the original GH to get the correct copy.
[x] I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
[x] I verified the JSDocs style guidelines (in STYLE.md) were followed

[x] If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
[x] I followed the guidelines as stated in the Review Guidelines
[x] I tested other components that can be impacted by my changes (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar are working as expected)
[x] I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
[x] I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
[x] I verified that if a function's arguments changed that all usages have also been updated correctly
[x] If any new file was added I verified that:

[x] The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory

[x] If a new CSS style is added I verified that:

[x] A similar style doesn't already exist
[x] The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))

[x] If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
[x] If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
[x] If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
[x] If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
[x] If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
[x] If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.

Screenshots/Videos
No screenshots or videos yet, we'll add them later if necessary

I have read the CLA Document and I hereby sign the CLA

@saracouto Do I need to review this?

Reviewer Checklist

[ ] I have verified the author checklist is complete (all boxes are checked off).
[ ] I verified the correct issue is linked in the ### Fixed Issues section above
[ ] I verified testing steps are clear and they cover the changes made in this PR

[ ] I verified the steps for local testing are in the Tests section
[ ] I verified the steps for Staging and/or Production testing are in the QA steps section
[ ] I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
[ ] I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)

[ ] I checked that screenshots or videos are included for tests on all platforms
[ ] I included screenshots or videos for tests on all platforms
[ ] I verified tests pass on all platforms & I tested again on:

[ ] Android: Native
[ ] Android: mWeb Chrome
[ ] iOS: Native
[ ] iOS: mWeb Safari
[ ] MacOS: Chrome / Safari
[ ] MacOS: Desktop

[ ] If there are any errors in the console that are unrelated to this PR, I either fixed them (preferred) or linked to where I reported them in Slack
[ ] I verified proper code patterns were followed (see Reviewing the code)

[ ] I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick).
[ ] I verified that the left part of a conditional rendering a React component is a boolean and NOT a string, e.g. myBool && <MyComponent />.
[ ] I verified that comments were added to code that is not self explanatory
[ ] I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
[ ] I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
[ ] I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
[ ] I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is approved by marketing by adding the Waiting for Copy label for a copy review on the original GH to get the correct copy.
[ ] I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
[ ] I verified the JSDocs style guidelines (in STYLE.md) were followed

[ ] If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
[ ] I verified that this PR follows the guidelines as stated in the Review Guidelines
[ ] I verified other components that can be impacted by these changes have been tested, and I retested again (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar have been tested & I retested again)
[ ] I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
[ ] I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
[ ] If a new component is created I verified that:

[ ] A similar component doesn't exist in the codebase
[ ] All props are defined accurately and each prop has a /** comment above it */
[ ] The file is named correctly
[ ] The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
[ ] The only data being stored in the state is data necessary for rendering and nothing else
[ ] For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
[ ] Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
[ ] All JSX used for rendering exists in the render method
[ ] The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions

[ ] If any new file was added I verified that:

[ ] The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory

[ ] If a new CSS style is added I verified that:

[ ] A similar style doesn't already exist
[ ] The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(theme.componentBG)

[ ] If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
[ ] If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
[ ] If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
[ ] If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
[ ] If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
[ ] If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.
[ ] I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

Screenshots/Videos

Android: Native

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

MacOS: Desktop

🚀 Deployed to staging by https://github.com/danieldoglas in version: 1.4.14-0 🚀

platform
result

🤖 android 🤖
success ✅

🖥 desktop 🖥
success ✅

🍎 iOS 🍎
failure ❌

🕸 web 🕸
success ✅

🚀 Deployed to staging by https://github.com/danieldoglas in version: 1.4.14-0 🚀

platform
result

🤖 android 🤖
success ✅

🖥 desktop 🖥
success ✅

🍎 iOS 🍎
success ✅

🕸 web 🕸
success ✅

🚀 Deployed to production by https://github.com/jasperhuangg in version: 1.4.14-6 🚀

platform
result

🤖 android 🤖
success ✅

🖥 desktop 🖥
success ✅

🍎 iOS 🍎
failure ❌

🕸 web 🕸
success ✅

source: gharchive/pull-request

authors: OSBotify rushatgabhane saracouto shubham1206agra

repo: Expensify/App

license: MIT

license_type: permissive

license_source: github-api


text:
[Wave 8] Ideal nav

Details

Draft PR to test what is left to fix.
Fixed Issues

$
PROPOSAL:
Tests

[ ] Verify that no errors appear in the JS console

Offline tests

QA Steps

[ ] Verify that no errors appear in the JS console

PR Author Checklist

[ ] I linked the correct issue in the ### Fixed Issues section above
[ ] I wrote clear testing steps that cover the changes made in this PR

[ ] I added steps for local testing in the Tests section
[ ] I added steps for the expected offline behavior in the Offline steps section
[ ] I added steps for Staging and/or Production testing in the QA steps section
[ ] I added steps to cover failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
[ ] I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
[ ] I tested this PR with a High Traffic account against the staging or production API to ensure there are no regressions (e.g. long loading states that impact usability).

[ ] I included screenshots or videos for tests on all platforms
[ ] I ran the tests on all platforms & verified they passed on:

[ ] Android: Native
[ ] Android: mWeb Chrome
[ ] iOS: Native
[ ] iOS: mWeb Safari
[ ] MacOS: Chrome / Safari
[ ] MacOS: Desktop

[ ] I verified there are no console errors (if there's a console error not related to the PR, report it or open an issue for it to be fixed)
[ ] I followed proper code patterns (see Reviewing the code)

[ ] I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick)
[ ] I verified that the left part of a conditional rendering a React component is a boolean and NOT a string, e.g. myBool && <MyComponent />.
[ ] I verified that comments were added to code that is not self explanatory
[ ] I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
[ ] I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method

[ ] If any non-english text was added/modified, I verified the translation was requested/reviewed in #expensify-open-source and it was approved by an internal Expensify engineer. Link to Slack message:

[ ] I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
[ ] I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is approved by marketing by adding the Waiting for Copy label for a copy review on the original GH to get the correct copy.
[ ] I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
[ ] I verified the JSDocs style guidelines (in STYLE.md) were followed

[ ] If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
[ ] I followed the guidelines as stated in the Review Guidelines
[ ] I tested other components that can be impacted by my changes (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar are working as expected)
[ ] I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
[ ] I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
[ ] I verified that if a function's arguments changed that all usages have also been updated correctly
[ ] If any new file was added I verified that:

[ ] The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory

[ ] If a new CSS style is added I verified that:

[ ] A similar style doesn't already exist
[ ] The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))

[ ] If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
[ ] If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
[ ] If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
[ ] If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
[ ] If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
[ ] If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.

Screenshots/Videos

Android: Native

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

MacOS: Desktop

@adamgrzybowski Can you please merge main / resolve conflicts? I see some changes related the LHP that should not be a part of this PR

@adamgrzybowski Can you please merge main / resolve conflicts? I see some changes related the LHP that should not be a part of this PR

Conflicts have been resolved :) These changes related to LHP were visible because we had merged branch with LHP into this in order to resolve conflicts

How is this supposed to look on Web? Not seeing much currently

Missing icon on the bottom tabs
We should not keep navigating to a page that are we are currently in
Navigation direction should be different when going to Chats

https://github.com/Expensify/App/assets/16493223/3b19eea1-2131-42c4-bc8e-c88f0bda7e11

Question: What is the role of the Expensify top-left logo button?
https://github.com/Expensify/App/assets/16493223/e7e50849-4df4-49ed-adc0-f54bd2eb865c

Help and Go Expensify Classing missing the external link icon

The designs don't include this icon.
Do you think the icons should be visible here? cc @shawnborton

How is this supposed to look on Web? Not seeing much currently <img alt="Screenshot 2024-01-04 at 11 37 54 AM"

Oh, we forgot to mention. To got everything working you have to do the following:
rm -rf node_modules
npm i

We made some changes in a patch file and simple npm i doesn't re-apply patches.

Question: What is the role of the Expensify top-left logo button?

We haven't implemented this part yet - the workspace switcher. We are currently working on it.

Question: What is the role of the Expensify top-left logo button?

This will be workspace switcher, where you can filter the app functionality on workspace basis

I love the new web design <3

Going to Profile does not have the Profile highlighted
Going to AllSettings does not have the Workspace highlighted (and it can't be highlighted on a second click)
There is a back button in the Workspace that should not be there (at least for Web)

https://github.com/Expensify/App/assets/16493223/34ae90c0-e61e-417e-832c-da0b053fd8d1

Bug / By design? The settings in the workspace do not take full width

Starting VBBA process messes with the flow: the central screen have a chat while the sidebar is on workspace settings. Also browser back button do not work
https://github.com/Expensify/App/assets/16493223/5ab90a13-1f2a-4556-aa6b-6829ac5b1f72

Not a bug: Now that the workspace name field is pushed on it's own page we should auto focus the input

(similar to https://github.com/Expensify/App/pull/33280#issuecomment-1876967788) If you refresh the page while LHP is open the highlighted item in Settings list is lost
https://github.com/Expensify/App/assets/16493223/695b289f-408b-4f0b-9296-1a44bec5a776

Workspace links all redirects to the overview and you can't refresh a page that you are currently in
https://github.com/Expensify/App/assets/16493223/bb6c8baa-8dbc-437a-986d-593ca286f89a

URL naming inconsistency:

Navigating to Workspace Settings > Overview > Name => workspace/0680EF3C70411F57/name
Navigating to Workspace Settings > Overview > Currency  => workspace/0680EF3C70411F57/overview/currency

Bug / By design? The settings in the workspace do not take full width

That is by design, but we need some modifications here. @adamgrzybowski can you please do the following:

on desktop, these cards should be aligned to the left
on desktop, these cards should have an inner padding of 32px. On mobile, it goes back to 20px.
on desktop, these cards have a max-width of 600px

cc @dannymcclain @dubielzyk-expensify for extra eyes on this PR too.

Starting VBBA process messes with the flow: the central screen have a chat while the sidebar is on workspace settings. Also browser back button do not work

Yeah, ideally this flow should start on the same page (in this case the travel page) but just launched in the RHP.

Workspace name overflows
There is extra spacing in the Workspace initial settings page at the top and no back button
Inner pages are broken e.g. Invoices
All pages have a top padding except the Members page, the Invite button is too close to the top (not necessary a bug)

https://github.com/Expensify/App/assets/16493223/1947b7c6-4396-4a72-80e7-b3a432656ab5

Also I wanted to clarify, the Workspace name and page name should not be in a scrollable view. I think just the content below it (the subnav items) would be scrollable. I saw that from the video above, here is a screenshot:

So how it should behave: basically everything in this top outlined rectangle is fixed, but the content in the rectangle below (the sub nav options) can scroll vertically:

@shubham1206agra I put a couple references for you here: https://www.figma.com/file/Xv3yHJooZcxRGkXbAcTZD5/%23ideal-nav-(Ideal-Nav)?type=design&node-id=2684%3A72517&mode=design&t=larByJRbckmqvl1c-1

Requested access

As an anonymous user:

Sign in button overlaps
The search opens in RHP (not a blocker - it may not be related to this PR, didn't check)
Can create workspace

https://github.com/Expensify/App/assets/16493223/5537ae48-1fea-4e63-9457-f240ae9043c9

Animation inconsistency iOS / Android
https://github.com/Expensify/App/assets/16493223/f419ed05-8f1e-4f75-afc0-a5bcdae46f9f

Can't open https://dev.new.expensify.com:8082/settings/wallet from chat it always redirects to /profile
The invite page https://dev.new.expensify.com:8082/workspace/0680EF3C70411F57/invite opens in RHP but keeps the central screen unchanged. Then when you press the assistance button and go back the central pane changes to /members and the bottom tab navigator stays on Chats

https://github.com/Expensify/App/assets/16493223/1cac26f8-dd68-43dd-ace4-db3ca4b046d9

Going to Workspace -> any workspace causes some a flicker (probably related to https://github.com/Expensify/App/pull/33280#issuecomment-1877362108)
Going back takes you back to the workspace initial page instead of the workspaces list

https://github.com/Expensify/App/assets/16493223/123f03fc-6a4b-433b-a582-7d78e807a07e

(Similar to https://github.com/Expensify/App/pull/33280#issuecomment-1877440041 Clicking the get assistance button changes the central pan screen
https://github.com/Expensify/App/assets/16493223/af397fcd-a2fe-4694-bf32-13e1415b0467

One thing I want to mention here, the bottom FAB button should be at our large button size of 52x52, with the icon inside of it at 20x20:

I'll update those two mocks I shared in Figma as well.

@MaciejSWM @WojtekBoman @kosmydel Whenever you think this is ready for a new build once some bugs are fixed feel free to let me know I will kick it off

Low priority bug: Go to Settings -> Preferences -> Go back to Settings and increase screen width. The central pan is empty
https://github.com/Expensify/App/assets/16493223/bf8299af-43d9-474f-89d3-469e8ee09f6a

Avatars misalignment

Double offline indicator in small screens
Missing offline indicator in wide screens

On App open no bottom tab item is highlighted (native only)

Missing border bottom in some pages e.g. Profile, Workspaces, etc.

The back behavior in "App download links" is wrong
https://github.com/Expensify/App/assets/16493223/a9f8c5d5-18ab-452d-bd05-e0e119ca5703

(Could be related to https://github.com/Expensify/App/pull/33280#issuecomment-1876993340) Once you start VBBA process you get stuck and can't go back
https://github.com/Expensify/App/assets/16493223/074f019d-5389-4d74-b587-230eabf489c0

Go to Workspace Settings and go though the settings (3+) in wide layout, then resize to small window. Pressing go back should take you directly to WorkspaceInitialPage. Instead you'd be going to the previous pages and weirdly end up passing by the Report screen. (reduceReportRoutes probably have some relation here)
https://github.com/Expensify/App/assets/16493223/fba078e1-fdbc-492a-b31b-075e5b30ffce

Brick road indicator not implemented correctly (still in progress?)

RBR is shown on Profile but it should not (going through the Profile route won't take you to where the error is)
Most the pages are missing RBR

https://github.com/Expensify/App/assets/16493223/e01fb75e-5df6-41f6-bcff-58faea0b6cc7

@MaciejSWM Can you fix merge conflicts and start an adhoc build?

@MaciejSWM Can you fix merge conflicts and start an adhoc build?

It's not ready yet for another build.
We will have more information tomorrow as @adamgrzybowski will be back from OOO.

Share code should have offline indicator in wide screen

iOS unnecessary padding on offline indicator

The codes page padding is incorrect (wide screen) - Related to <Section /> changes

In Native the Workspace option should not be focused - We are passing a hard coded focused: true in AllSettingsScreen

Missing offline indicator if you have no workspaces - We are not using ScreenWrapper

Low priority bug: on certain screen width the page layout is cut

@kosmydel Can you merge main into the ideal-nav-merge?

@kosmydel Can you merge main into the ideal-nav-merge?

We had some problems with merging due to VSC's strange behavior, but now it is merged.

(Low priority) Slack thread: https://expensify.slack.com/archives/C036QM0SLJK/p1704833741725849

Double not found view for workspace
Go back button does not work

The offline indicator on Web is missing (tested on iOS it works)

If you switch from Chats to All Settings and back to Chats, the position on Chats is reset
https://github.com/Expensify/App/assets/16493223/df3aa1be-b0f4-453b-8d33-34a9757103c8

The create workspace screen is wrong - double ScreenWrappers

Nice!! @Expensify/design @trjExpensify @JmillsExpensify encourage you all to start testing using those links above!

When you are :hovering over a row in the subnav, we should be using our row-hover color and not the same color for :active. Here is the bug:

Also, the input at the very top should have it's BG be using the same color as row-hover as well. That might seem weird semantically, but we really just need to push forward with getting all of our inputs updated where they use a specific color for inputBG which happens to be the same value as row-hover

The "New Workspace" button from the top right of the Settings > Workspaces page was a bit janky... it didn't really work at first (no feedback?), and then it suddenly dropped me here:

If it drops me on a new workspace page like this, shouldn't the top left workspace switcher be updated? Not only that, but shouldn't I be able to delete this workspace from here too somehow?

@dannymcclain @dubielzyk-expensify for the horizontal rule that divides the sections in the subnav, how wide do we want it? Should it match the width of the text below (meaning, it should have an extra like 12px padding on each side), or is it fine as it currently is?

The pencil icon in the edit button feels weird. Perhaps we should make this button at 40x40 so the icon is more legible? cc @Expensify/design for thoughts on that one

Looks like option rows aren't going edge-to-edge in their card area anymore, in this case the Wallet page (and other places like this):

For Share Code, maybe we just make the card area hug it's contents so it doesn't go so wide?

Alternatively, we can update it to look like the upcoming places in the workspace editor where all of that content (title, QR code, options below) are wrapped in a card.

For these kinds of pages, I think we can get rid of the bottom border underneath the header of the content area. Then, we should make the padding for the content area just use 12px of vertical padding, so the content appears a bit closer to the header bar.

For the Profile page, I think we can reduce the gap between the top header bar and the content of this page? Right now it feels like a big space between the header and content. Typically we use 12px for this gap.

I think this was a repeated mistake from our mockups but the bottom tab icons should be at 24x24, NOT 25x25. We like to use base4 around these parts.

👋 It's looking soooo good!!
We had a bit of a testing party in this thread. Pointing you to the comments of the ones that I believe are related to the work here.

BUG?: Clicking back from the Account Settings back in top left corner takes noticeably longer to open the chats then other back buttons
BUG: Missing Owner
BUG: When clicking the New workspace button atop of the Workspaces page there’s a real quick flash of a “Hmm.. it’s not there” page before landing in the workspace editor for it.
IMPROVEMENT: Handling of the Bank Account page . I thought we decided here to have it be in the main pane with the two button options opening the RHP?
BUG: When I switch between Chats and Settings it doesn’t take me back to the last chat I was in.
BUG: When I switch between a page in Settings and the Chats tab I revert back to the “home” page of settings

Thank you @trjExpensify for posting a summary here, it really helps us to organize the process!

@shawnborton
Re: the horizontal rule
What's shown matches the mocks we have in Figma. Looks like we have the rule extending to the bounds of the nav item including it's padding. I'm good with this as when a nav item gets hovered or selected, it will line up nicely with the rule. So IMO it's good as is.
Re: pencil icon edit button
Totally agree. It does look odd and this button isn't currently one of our standard buttons (to my knowledge). I'd be in favor of replacing it with a standard 40px icon button.
I also agree with all your other comments. 🚀 This is coming along!

When you are :hovering over a row in the subnav, we should be using our row-hover color and not the same color for :active.

I can't see the hover state in our codebase, should I add a new one? I also don't see the colors in the codebase, that would work. Where can I find the target color palette?
Button states:
    BUTTON_STATES: {
        DEFAULT: 'default',
        ACTIVE: 'active',
        PRESSED: 'pressed',
        COMPLETE: 'complete',
        DISABLED: 'disabled',
    },

Colors with hover phrase:
    greenHover: '#00C271',
    redHover: '#DE4822',

cc @shawnborton

I can't see the hover state in our codebase, should I add a new one?

You should be able to just use what we have for the chats list - there the rows properly have the right :active and :hover background colors:

It looks like we have an incorrect scroll behavior for the Wallet page. Ideally that whole page is as wide as it possibly can be, meaning the scroll bar would be on the very right. And then from here, just the cards should be skinny. And I think they should max-out at 600px (they don't look like they are that wide just yet):

Agree with everything, Danny said. The horizontal rule should align with the text

From slack https://expensify.slack.com/archives/C036QM0SLJK/p1704981246440049?thread_ts=1704923790.111469&cid=C036QM0SLJK

FAB -> (any action) changes the report if bottom tab is on All Settings
FAB -> (any action) you get navigated to a report but the bottom tab is still on All Settings

https://github.com/Expensify/App/assets/16493223/c158ed92-aaee-4388-acc7-0de23a800fd0

Minor Bug, not able to close the Popover Menu clicking the FAB after opening.
https://github.com/Expensify/App/assets/75031127/b9f65b88-ef99-4cf6-ad43-12e6aeb6e826

Minor Bug, not able to close the Popover Menu clicking the FAB after opening.

Merging main should resolve it

If some bugs got fixed already, can you please push the commits

We've merged another portion of the fixes. More details with a list of fixed issues are here. cc @s77rt

Sounds good, I can trigger a new test build

src/components/BlockingViews/FullPageNotFoundView.tsx

Please wait a moment, we are still pulling main and resolving conflicts.

Can do, just let me know when!

We've pulled the main, resolved conflicts, and quickly tested. It's ready for another build. cc @mountiny, @shawnborton

So it seems like there's still quite a few of the bugs reported in this PR that haven't been addressed yet. How would you like to receive feedback on this? Do you still plan to run through the PR comments and address bugs we've called out, or do you want us to run through the whole thing from scratch again?

So it seems like there's still quite a few of the bugs reported in this PR that haven't been addressed yet. How would you like to receive feedback on this? Do you still plan to run through the PR comments and address bugs we've called out, or do you want us to run through the whole thing from scratch again?

We are tracking all of the comments internally, and addressing them one by one. There is no need to report them again. We haven't addressed the design issues yet.

After clicking the back button in the workspace not found page. You get redirected to the workspaces list but you can't click any other workspace
https://github.com/Expensify/App/assets/16493223/561d8848-8125-4b29-9a58-2625dab23eb3

Settings urls have layout param in the url and it does not seem correct. Can we remove it?
https://dev.new.expensify.com:8082/settings/profile?layout=narrow

Settings urls have layout param in the url and it does not seem correct. Can we remove it?

@s77rt just looking at the PR and looked at your comment what a coincidence.
It was intentionally added here https://github.com/Expensify/App/pull/33426

Native: Empty illustration on workspace empty view

Weird wallet page
The feature list items having wrong cursor (should be text instead of default)

Steps: Unknown (another unrelated bug?) I expected to see that page on a new account but didn't. I had to hard-code shouldShowEmptyState variable

Inconsistency on the "New workspace" button's width
Steps:

Login with an account that has no workspace
Click 🔧 in the bottom tab > Workspaces

@Expensify/design Should we keep two buttons to create a workspace?

Inconsistency on sections width
Steps: 🔧 > Workspaces > any workspace > Reimbursements

Pressing ESC on Settings Page should not close it as it's no longer a RHP (cc @Expensify/design for confirmation)
Steps: Go to Settings and Press ESC
https://github.com/Expensify/App/assets/16493223/a6e47aad-83fe-4854-8301-04a379742aa3

Should we keep two buttons to create a workspace?

That's probably fine, but the bottom button should be full width across the card here.
@adamgrzybowski do you want us to go through with another pass of design comments, or do you still need to address a lot of the existing comments we left from prior testing? Just let us know how to prioritize, thanks!

Hey @trjExpensify

IMPROVEMENT: Handling of the Bank Account page . I thought we decided here to have it be in the main pane with the two button options opening the RHP?

It was discussed here that it will be a follow-up. This process is happening on a single screen. That means, that we can't split it straightforward.

Pressing ESC on Settings Page should not close it as it's no longer a RHP (cc @Expensify/design for confirmation)

Hey @s77rt, I think it was included in the design doc:

Tapping/clicking the < caret or using the ESC key will return to the Chats || Settings page wherever you entered account settings from.

@s77rt noticed:

As an anonymous user:

The search opens in RHP (not a blocker - it may not be related to this PR, didn't check)

Using the same screen (anonymous user login) in two different navigators (RHP & LHP) might be complicated. Do we want to do this? If so, I would suggest doing that as a follow-up. cc @shawnborton

For read-only fields (like the workspace overview) - we should not be making these "grayed out" nor any need for the disabled cursor:

We should just use our standard style where we make this plain, unclickable text and remove the right arrow/caret from the row.

In that same screenshot above, the hint text below the currency field is too far away as well. I think those push row hints should just be like 4px below.

@kosmydel & team - do you want us to go through with another pass at design feedback? I wonder if there is a more organized way we can log the remaining design bugs so we know what you are aware of and what's still being worked on? cc @mountiny for thoughts there

As a non-admin, I shouldn't see the delete option or the admins room option on these workspaces:

There's quite a big gap between the page header and the content (the "Everything" label) of the workspace switcher view:

That should be way smaller. I think we standardize on 12px below the page header.

Super long names bleed outside of what I would expect would be the padded bounds of that upper area:

Track distance section is not rendered correctly
Steps: 🔧 > Workspaces > any workspace > Reimbursements

The plus button in the workspace switcher to create a workspace does not work if you are viewing the setting of another workspace
Steps:

🔧 > Workspaces > any workspace
Open Workspace switcher and click the plus button

https://github.com/Expensify/App/assets/16493223/105320c5-9929-4301-8e34-ae49aa33491d

I think the url of the workspace switcher should be changed
https://dev.new.expensify.com:8082/workspaceSwitcher

It's weird having a camalCase url
cc @Expensify/design

Plus icon fill color does not match the design mockup
Steps: Open workspace switcher

Native: Missing the search left icon
Steps: Open workspace switcher

Missing the no results found message if no workspace is found in the workspace switcher
Steps: Open Workspace switcher and search for a non-existing workspace

https://github.com/Expensify/App/pull/33280#issuecomment-1877090579 resurfaced again

@kosmydel & team - do you want us to go through with another pass at design feedback? I wonder if there is a more organized way we can log the remaining design bugs so we know what you are aware of and what's still being worked on? cc @mountiny for thoughts there

We are tracking all GH comments in our internal spreadsheet, and then we are reporting it to the Slack canvas. You can comment on the issues here, and we will then add them to our spreadsheet.

Okay cool, I might just go through with a fresh design pass and then you can just ignore any duplicate reports I make. Are you planning to push any big updates soon? Happy to wait for a new test build and then I can go from there.

Bug? Always getting redirected to the previous visited page even if it's a not found view
Steps:

Go to https://dev.new.expensify.com:8082/invalidpath
Go to https://dev.new.expensify.com:8082/

https://github.com/Expensify/App/assets/16493223/6ffaeb1b-cabc-4a64-9501-aee636e15954

The "Profile" tooltip should be removed and the cursor should not be a pointer (nothing is clickable)
Steps: Go to Settings and hover the Avatar / Display Name
https://github.com/Expensify/App/assets/16493223/aa0197a5-19d0-4c46-a343-9fb7b90c0433

Marking a report as unread does not make the Expensify option in the workspace switcher as bold
Steps: Mark any report as unread then open workspace switcher
https://github.com/Expensify/App/assets/16493223/cb297101-8ded-4fed-992d-f83675c0f3af

Pressing ENTER in the workspace switcher selects the first workspace despite not being "focused"
Steps: Open workspace switcher choose Expensify. Open the switcher again then press ENTER
https://github.com/Expensify/App/assets/16493223/9eb53018-295b-4f85-814a-fcedffb362db

Let's do a fresh build on this one... 🚀 one moment

Anonymous user can access the workspace switcher + Opening sign in modal makes the central pane empty + Broken back buttons
Steps: Go to a public room as an anonymous user e.g.https://dev.new.expensify.com:8082/r/5408450846930023
https://github.com/Expensify/App/assets/16493223/079c15a5-d4ca-40ec-b792-28d0482f39ec

Some design bug reports from me (cc @Expensify/design)
For the workspaces page, I think the rows should have a :hover effect that just changes the background color to our `rowHover color:

The search input BG is still in the wrong color. It technically should use the rowHover color (product300) as the BG color. If we want to use a :hover color for it, we could choose either borders (product400) or highlightBG (product200).

There's too much space below the page header for Account Settings > Profile and the content below it. As mentioned previously, the desired gap between header and content is 12px.

Share code should also have the max-width: 600 treatment like other cards:

More feedback about these content cards: looks like the padding is not quite right here in the workspace editor, it should be 32px padding on desktop and 20px padding on mobile:

There's just a lot of inconsistencies happening with these, for example:

For bank accounts, I thought we decided to put the first part of this flow into the main content pane rather than keeping everything in RHP?

For the "edit avatar" icon in account settings - I think we had some updated mocks to make this pencil button our default 40x40 size. We should also update that on the edit avatar in the workspace overview page, too.

If I search for a room and navigate to it, the LHN doesn't change:

What's also strange here is that I could technically search for a room not on my active workspace, and navigate to it as well:

I would think we should always show the currently viewed chat in the LHN somehow, which might mean switching the active workspace. Alternatively, we just don't show these results in search and only show filtered results based on the active workspace? cc @Expensify/design @trjExpensify @JmillsExpensify for thoughts on this one

Small design enhancement: hovering over the workspace icon in the top left should trigger our button:hover state for the small down arrow button, I think it would be nice to give some feedback here:

I would think we should always show the currently viewed chat in the LHN somehow, which might mean switching the active workspace. Alternatively, we just don't show these results in search and only show filtered results based on the active workspace?

Yeah, pretty sure we discussed this one already in channel and @mateuuszzzzz was working on it. For now we'll treat it like tapping on a notification for a chat that's not in your currently selected workspace, where we switch to the "all" view and the Chats bottom tab if you're not on that tab already.

Dismissing the "Save the world" modal takes you to the Home screen and messes the selected bottom item (This is similar to https://github.com/Expensify/App/pull/33280#issuecomment-1904881444, this bug occurs on all the modals, we should find a better global solution)
Steps: 🔧 then FAB > Save the world > Close modal
https://github.com/Expensify/App/assets/16493223/e572c858-094d-4b59-a4ef-1d8db8866cd7

Desktop App is broken (stuck at login)
Steps: Open desktop app, open staging url or open dev url (requires remove the dev condition in DeeplinkWrapper)
https://github.com/Expensify/App/assets/16493223/678c0086-c28f-461d-924b-02a35f66c0bf

Minor bug: After opening a chat from FAB the bottom chat button is clickable (causes the chat to reload)
Steps: FAB > Start Chat with anyone. Click 💬
https://github.com/Expensify/App/assets/16493223/a0fce4b2-8525-41e1-8b1f-e4fd678ed34e

Default Avatars are all green (related to the change in src/components/MultipleAvatars.tsx)
Steps: Check users with default avatars in LHN
https://github.com/Expensify/App/assets/16493223/b1603bbf-32d8-46c1-9a37-0452e1b0676c

Hey @shawnborton, some answers for your feedback:

For bank accounts, I thought we decided to put the first part of this flow into the main content pane rather than keeping everything in RHP?

There was a decision on Slack that we are leaving it in the RHP, as this is one screen and splitting it is not straightforward.

the tappable rows should be bleeding edge-to-edge on these cards

If that's not a problem, I think we can do that as a follow-up, I've added it to our internal list.

We have a Slack Canvas where we keep track of all regressions we have found so far
I found some regressions listed there that doesn't have corresponding GH comment links.
Here are those items without associated GH comments:

On the Workspace switcher page in native iOS the keyboard cannot be dismissed. On search page for example once you start scrolling the search input focus is removed and keyboard disappears, I think we need to add the same behaviour here.

Might be backend but when New Workspace is created, when you navigate to the workspace list on another device the workspace owner (you) is missing

No workspace selected, navigate to expense report, refresh the tab, crash

Are these regressions recognized and if so, could you tell me who is working on which one?

Are these regressions recognized and if so, could you tell me who is working on which one?

I have added those to the canvas as that should be the source of truth as its easier to manage. sorry if that caused some confusion

This deisgn issue seems still be present from the latest build
is someone working on this?

Some design issues

The size of an item on the card component
Share code card size

is someone working on these?

The 1st is on a separate branch and should be merged tomorrow.
The 2nd one is already fixed.

Update: We plan to address this issue, where the chat list position resets upon refocusing on the Chat page, as a follow-up.
Slack convo is here

For the full page "It's not here" - we should give the content a max-width so the sentences aren't so wide. Maybe just make that area have a max-width of like 300px or something?

Still waiting on the correct :hover style for the subnav menu, as well as the correct BG color for the search input:

Looks like the "+" button is vertically centered with Workspaces, but I would expect that area to be slightly closer to the list below it and a bit further away from the list above. Basically these items look closer to the group above than below, let's swap that around.

The avatar in the overview section of a policy should also be 100x100 to match the account settings page:

Can't access a collect workspace as an employee
Steps: Be a member (an employee) of a collect workspace and try to access that workspace
PS: On staging that workspace is not visible in the workspace list, maybe we should hide it in the new list too?
https://github.com/Expensify/App/assets/16493223/18925435-8700-4bc2-9572-4829722e937b

(Related to https://github.com/Expensify/App/pull/33280#issuecomment-1880199054) The RBR in the workspace switcher does not include workspace settings errors i.e. if there is a red dot related to the workspace itself (not a report) e.g. workspace name error, workspace member invitation error, etc I expected to see a red dot somewhere to lead me to that error
https://github.com/Expensify/App/assets/16493223/24b23c80-5756-4698-a791-d213a1966060

Workspace switcher indicator seems broken? Getting unexpected results, I don't know why there is a RBR in a workspace - there is no report with RBR. Also first time I opened the workspace switcher I didn't see any dots
Steps: Open workspace switcher, close it, open it again
https://github.com/Expensify/App/assets/16493223/403b4255-f00d-41e7-9046-88db9729bb94

The not found view have a weird placed offline indicator at the top - there should be no indicator
Steps: Open https://dev.new.expensify.com:8082/workspace/62041BFjC35703E3C/overview then go offline

Low Priority: After landing on a not found workspace view it's hard to navigate away "peacefully" (seeing some broken ui)
Steps: Open https://dev.new.expensify.com:8082/workspace/62041BFjC35703E3C/overview and try to go back
https://github.com/Expensify/App/assets/16493223/2df37ef9-6db0-424a-9d4d-6e10c01dbe6c

Android: Empty space at the top
Steps: Open App on Android

Another backTo issue (are we planning to address this holistically?)
Steps: 🔧 > Workspaces > Back
https://github.com/Expensify/App/assets/16493223/c42f681e-3c2a-4096-b0f2-901aa5900b0d

mWeb: Refreshing a workspace section causes double navigation - Need to press go back twice
Steps: 🔧 > Reimbursements Then refresh the page
https://github.com/Expensify/App/assets/16493223/7e771ac4-e5ab-4542-8f15-976482bb721f

It looks like the placeholder text for "Search for something..." is too light. It should just use our textSupporting color:

Looks like the sub nav hovering was not fixed on all pages, just the Settings overview page from having All selected as the workspace.

Still seeing some weirdness with the rows not bleeding edge-to-edge in the workspace editor:

Feedback about the Workspaces label and + button hasn't been addressed yet it seems:

The search bar in the workspace switcher is too wide
Steps: Open the workspace switcher

App crashes if you try to access the workspaces settings page directly
Steps: Go to https://dev.new.expensify.com:8082/settings/workspaces
https://github.com/Expensify/App/assets/16493223/bb1daad0-b41a-4e42-aae4-92bc99d48210

Workspace avatar not getting updated on the workspace switcher button
Steps: 🔧 > Overview and change the workspace avatar
https://github.com/Expensify/App/assets/16493223/ea9507f6-30d3-4327-8d11-9f4c345a7107

Minor bug: The Profile avatar surrounding area is pressable and it navigates to the Profile pane
Steps: Go to Settings > Preference then click on Profile avatar surrounding area
https://github.com/Expensify/App/assets/16493223/720ca877-9326-405b-b8f8-aef858221d0a

The avatar crop modal is missing the backdrop
Steps: Go to Settings and try to change the profile avatar

The "Report a bug" button is not working
Steps: Settings > About and Press "Report a bug"
https://github.com/Expensify/App/assets/16493223/1a7fa6c3-8939-425c-9cb9-44ad96d8533d

Internal chat links not taking the workspace id into consideration which results in LHN with no active item
Steps: Go to any chat and copy its url and paste it into another workspace chat. Navigate to the pasted link
https://github.com/Expensify/App/assets/16493223/db25d104-51ec-480d-90c3-47fad490ae9c

https://github.com/Expensify/App/actions/runs/7700500601

(Oops, fat fingered the comment button)

We're so close! Here's a few remaining nitpicks from me...
For the small down arrow button on the workspace switcher, I think we should give that button the same kind of :hover feedback that any of our standard buttons have:

For the selected workspace, should that have a BG color like our other selected list items do everywhere else in the product? I would think so:

It looks like if "Everything" is selected we give it a BG color, but not if a workspace is selected:

Search is broken for me:

^^ same for me with Search. @mountiny has reported it on the Canvas. The other critical (which looks new) is clicking on the workspace settings of a workspace you aren't an admin. It results in a 404, instead of just the read-only overview page:

Low: Creating a workspace shows the not found view briefly
Steps: 🔧 > Press New workspace button
https://github.com/Expensify/App/assets/16493223/e622118f-6266-4d4d-9679-267b322e1167

Uneven search bar spacing when having a status
Steps: Settings.> Profile > Status and set a status then go back to home screen

The status position should change, its already different on main

Yup, we need to pull main to get the new status stuff in here. It's lovely!

Settings crashes and seeing two console errors
Steps: 🔧

Hmmm I can't even get the test build to work, any ideas? I see this:

I got this from testing in an incognito window btw.

Latest round of bug reports from me...
Profile picture seems to be super low resolution and blurry:

Incorrect padding/spacing on all of the rows on the Wallet page:

The gap underneath the "Profile" page header to the content below is too large. It should just be 12px:

The selected workspace doesn't have the correct BG color applied to it:

Still getting weird behavior when I view a profile and then close the profile view:

@mountiny

adamgrzybowski WojtekBoman Can you add this annotation please

What kind of annotation?

@adamgrzybowski it was a respond to comment from @blazejkustra this style of annotation is not in line wit our typescript guidelines, I cant load the parent comment now since github sucks

Minor: The workspace switcher is missing a tooltip and on hover the arrow icon color is not correct
https://github.com/Expensify/App/assets/16493223/faea93de-5a39-45b4-9110-345d5fbb3714

Accessing a non longer existing workspace section results in 3 not found views
Steps: Go to https://dev.new.expensify.com:8082/workspace/0680EF3C70411F57/invite

Wrong animation when going into a workspace
Steps: 🔧 > Workspaces and select any workspacce
https://github.com/Expensify/App/assets/16493223/51f155f5-2341-4d32-8421-8b02abb90aff

Go to https://dev.new.expensify.com:8082/settings/preferences and press the back button. You should be on the settings page not the home page
https://github.com/Expensify/App/assets/16493223/469924d4-40ae-4344-99f4-946d3478ee27

Improvement: Switching between Chats and Settings should not reload the report and the sidebar.
https://github.com/Expensify/App/assets/16493223/8cd1a07a-3035-40e0-9a2b-e47d96a24b89

Navigating to a non existing workspace overview section e.g. https://dev.new.expensify.com:8082/workspace/CFA2F9EEE37B11139C/overview crashes the app

List of remaining bugs: (with the exception of the ones that were reported today 01 Feb)

Delete popover (in bank accounts) is misplaced https://github.com/Expensify/App/pull/33280#issuecomment-1876972848
Going back takes you to the workspace initial page instead of the workspaces list https://github.com/Expensify/App/pull/33280#issuecomment-1877829079
Go to Workspace Settings and go though the settings (3+) in wide layout, then resize to small window. Pressing go back should take you directly to WorkspaceInitialPage. Instead you'd be going to the previous pages and weirdly end up passing by the Report screen https://github.com/Expensify/App/pull/33280#issuecomment-1880188621
Brick road could be improved https://github.com/Expensify/App/pull/33280#issuecomment-1880199054 https://expensify.slack.com/archives/C06ERGVH1MW/p1706635864894149?thread_ts=1706544402.796999&cid=C06ERGVH1MW
If you switch from Chats to All Settings and back to Chats, the position on Chats is reset https://github.com/Expensify/App/pull/33280#issuecomment-1885789713
When I switch between a page in Settings and the Chats tab I revert back to the “home” page of settings https://github.com/Expensify/App/pull/33280#issuecomment-1887309950
(Not sure - though arrow navigation seems broken) Pressing ENTER in the workspace switcher selects the first workspace despite not being "focused"
Workspace switcher indicators seem broken? Getting unexpected results https://github.com/Expensify/App/pull/33280#issuecomment-1911253960
Refreshing a workspace section causes double navigation https://github.com/Expensify/App/pull/33280#issuecomment-1911319957

mWeb the status bar color does not match
https://github.com/Expensify/App/assets/16493223/42765c78-440c-4f97-8751-16f93fd1482b

Reviewer Checklist

[X] I have verified the author checklist is complete (all boxes are checked off).
[X] I verified the correct issue is linked in the ### Fixed Issues section above
[X] I verified testing steps are clear and they cover the changes made in this PR

[X] I verified the steps for local testing are in the Tests section
[X] I verified the steps for Staging and/or Production testing are in the QA steps section
[X] I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
[X] I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)

[X] I checked that screenshots or videos are included for tests on all platforms
[X] I included screenshots or videos for tests on all platforms
[X] I verified tests pass on all platforms & I tested again on:

[X] Android: Native
[X] Android: mWeb Chrome
[X] iOS: Native
[X] iOS: mWeb Safari
[X] MacOS: Chrome / Safari
[X] MacOS: Desktop

[X] If there are any errors in the console that are unrelated to this PR, I either fixed them (preferred) or linked to where I reported them in Slack
[X] I verified proper code patterns were followed (see Reviewing the code)

[X] I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick).
[X] I verified that the left part of a conditional rendering a React component is a boolean and NOT a string, e.g. myBool && <MyComponent />.
[X] I verified that comments were added to code that is not self explanatory
[X] I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
[X] I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
[X] I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
[X] I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is approved by marketing by adding the Waiting for Copy label for a copy review on the original GH to get the correct copy.
[X] I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
[X] I verified the JSDocs style guidelines (in STYLE.md) were followed

[X] If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
[X] I verified that this PR follows the guidelines as stated in the Review Guidelines
[X] I verified other components that can be impacted by these changes have been tested, and I retested again (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar have been tested & I retested again)
[X] I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
[X] I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
[X] If a new component is created I verified that:

[X] A similar component doesn't exist in the codebase
[X] All props are defined accurately and each prop has a /** comment above it */
[X] The file is named correctly
[X] The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
[X] The only data being stored in the state is data necessary for rendering and nothing else
[X] For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
[X] Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
[X] All JSX used for rendering exists in the render method
[X] The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions

[X] If any new file was added I verified that:

[X] The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory

[X] If a new CSS style is added I verified that:

[X] A similar style doesn't already exist
[X] The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(theme.componentBG)

[X] If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
[X] If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
[X] If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
[X] If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
[X] If the PR modifies the form input styles:

[X] I verified that all the inputs inside a form are aligned with each other.
[X] I added Design label so the design team can review the changes.

[X] If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
[X] If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.
[X] I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

Screenshots/Videos

Android: Native

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

MacOS: Desktop

we're merging this without the performance tests passing

Carlos, Vit and I discussing merging this without the performance test passing. As the cache from the main branch is apparently interferring with the test.

:hand: This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

I am getting lots of dependency cycle console errors on iOS:

BUG:

our navigation code has become really complex, and some documentation to break it down a bit could be helpful

@adamgrzybowski once the major regression issues are complete, are you up to authoring a REDME file with more details on App's navigation structure?

List of remaining bugs: (with the exception of the ones that were reported today 01 Feb)

Delete popover (in bank accounts) is misplaced https://github.com/Expensify/App/pull/33280#issuecomment-1876972848
@s77rt I couldn't reproduce this. Could you double check on this, please?
Going back takes you to the workspace initial page instead of the workspaces list https://github.com/Expensify/App/pull/33280#issuecomment-1877829079 -> https://github.com/Expensify/App/issues/35610
Go to Workspace Settings and go though the settings (3+) in wide layout, then resize to small window. Pressing go back should take you directly to WorkspaceInitialPage. Instead you'd be going to the previous pages and weirdly end up passing by the Report screen https://github.com/Expensify/App/pull/33280#issuecomment-1880188621 -> https://github.com/Expensify/App/issues/35611 -> https://github.com/Expensify/App/issues/35612
Brick road could be improved https://github.com/Expensify/App/pull/33280#issuecomment-1880199054 https://expensify.slack.com/archives/C06ERGVH1MW/p1706635864894149?thread_ts=1706544402.796999&cid=C06ERGVH1MW
If you switch from Chats to All Settings and back to Chats, the position on Chats is reset https://github.com/Expensify/App/pull/33280#issuecomment-1885789713 -> https://github.com/Expensify/App/issues/35602
When I switch between a page in Settings and the Chats tab I revert back to the “home” page of settings https://github.com/Expensify/App/pull/33280#issuecomment-1887309950 -> https://github.com/Expensify/App/issues/35613
(Not sure - though arrow navigation seems broken) Pressing ENTER in the workspace switcher selects the first workspace despite not being "focused"
I couldn't reproduce this. @s77rt could you double check on this please?
Workspace switcher indicators seem broken? Getting unexpected results https://github.com/Expensify/App/pull/33280#issuecomment-1911253960 This was combined with the issue No. 4
Refreshing a workspace section causes double navigation https://github.com/Expensify/App/pull/33280#issuecomment-1911319957 -> https://github.com/Expensify/App/issues/35614

@s77rt could you go through the issues found today and make a list of them please? (except of those you already summarized here)

@situchan, looks like the same as someone else ran into. You need to do an npm ci to fix these types of issues. Feel free to bring it up here if that doesn't fix it. https://expensify.slack.com/archives/C01GTK53T8Q/p1706825462525599?thread_ts=1706821785.743269&cid=C01GTK53T8Q

@s77rt do you know what is the correct icon color for this and what the tooltip should display (the full workspace name?)

@s77rt I went over the issues you discovered today and created a list
could you go over it to make sure I'm not missing anything?

[ ]  [No tooltip and wrong icon color](https://github.com/Expensify/App/pull/33280#issuecomment-1921818283)

[ ]  Triple Not Found pages

[ ]  [Wrong animation (close animation) when selecting a workspace](https://github.com/Expensify/App/pull/33280#issuecomment-1921860615)

[ ]  [Back navigation from the Account Setting/Preferences page is incorrect](https://github.com/Expensify/App/pull/33280#issuecomment-1921882304)

[ ]  [Switching between Chats and Settings should not reload the report and the sidebar.](https://github.com/Expensify/App/pull/33280#issuecomment-1921929113)
→ This was combined with [this](https://github.com/Expensify/App/issues/35602)

[ ]  [Navigating to a non-existing Workspace Overview page crashes the app](https://github.com/Expensify/App/pull/33280#issuecomment-1921944802)

[ ]  [Status bar color is not consistent](https://github.com/Expensify/App/pull/33280#issuecomment-1922009959)

@situchan I have a question about this TypeError
Does it appear on a particular page or after a particular action is taken, or does it appear always?

@roryabraham Definitely agreed! We have chatted with @adamgrzybowski and the navigation readme will be updated https://github.com/Expensify/App/blob/main/contributingGuides/NAVIGATION.md

@hayata-suenaga @mountiny Is the screen layout final for every page? Or will it move for any page at all? Example - Workspace BA flow.

@shubham1206agra some pages and menus are expected to be added in the coming months.
I believe the flow of adding a bank account will stay on the RHP.
I'm curious why you asked the question? 😄

@s77rt Does the issue described in your comment [here])https://github.com/Expensify/App/pull/33280#issuecomment-1922009959) only happen on iOS?

@situchan When does this TypeError happen?

@situchan When does this TypeError happen?

On first app launch. Repro step:

npm run web
https://dev.new.expensify.com:8082 is opened automatically
Check browser console

I believe the flow of adding a bank account will stay on the RHP.

Yeah, though accessed via the main pane:

App crashes on launch

For debugging, here's policy data in WorkspaceOverviewPage:

@hayata-suenaga

Delete popover (in bank accounts) is misplaced [Wave 8] Ideal nav  #33280 (comment)
@s77rt I couldn't reproduce this. Could you double check on this, please?

The delete popover feels detached. It should be closer and probably anchored at the top/bottom left

(Not sure - though arrow navigation seems broken) Pressing ENTER in the workspace switcher selects the first workspace despite not being "focused"
I couldn't reproduce this. @s77rt could you double check on this please?

I'm seeing a different bug. The arrow navigation works but there the focused element is not highlighted
https://github.com/Expensify/App/assets/16493223/3a495006-8f74-4f6c-ab8e-17cb096c5260

@s77rt for https://github.com/Expensify/App/pull/33280#issuecomment-1921818283, do you know what is the correct icon color and what the tooltip should display (the full workspace name?)

I think Shawn answered these question on https://github.com/Expensify/App/issues/35618

🚀 Deployed to production by https://github.com/marcaaron in version: 1.4.36-5 🚀

platform
result

🤖 android 🤖
success ✅

🖥 desktop 🖥
success ✅

🍎 iOS 🍎
failure ❌

🕸 web 🕸
success ✅

We missed updating a goBack here:

Coming from https://github.com/Expensify/App/issues/37982. We missed updating a goBack here:
https://github.com/Expensify/App/blob/46d5d8546b6f9bfa7ab869462fa0e1387874d471/src/libs/actions/PaymentMethods.ts#L287
https://github.com/Expensify/App/blob/46d5d8546b6f9bfa7ab869462fa0e1387874d471/src/pages/settings/Wallet/TransferBalancePage.js#L182
https://github.com/Expensify/App/blob/46d5d8546b6f9bfa7ab869462fa0e1387874d471/src/pages/settings/Wallet/TransferBalancePage.js#L187

authors: MaciejSWM OSBotify WojtekBoman adamgrzybowski dannymcclain dubielzyk-expensify getusha hayata-suenaga jayeshmangwani jjcoffee kosmydel mountiny s77rt shawnborton shubham1206agra situchan trjExpensify


text:
Fixed message for invalid merchant

Details

Fixed Issues

$
PROPOSAL:
Tests

[x] Verify that no errors appear in the JS console

Offline tests

QA Steps

[ ] Verify that no errors appear in the JS console

PR Author Checklist

[ ] I linked the correct issue in the ### Fixed Issues section above
[ ] I wrote clear testing steps that cover the changes made in this PR

[ ] I added steps for local testing in the Tests section
[ ] I added steps for the expected offline behavior in the Offline steps section
[ ] I added steps for Staging and/or Production testing in the QA steps section
[ ] I added steps to cover failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
[ ] I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
[ ] I tested this PR with a High Traffic account against the staging or production API to ensure there are no regressions (e.g. long loading states that impact usability).

[ ] I included screenshots or videos for tests on all platforms
[ ] I ran the tests on all platforms & verified they passed on:

[ ] Android: Native
[ ] Android: mWeb Chrome
[ ] iOS: Native
[ ] iOS: mWeb Safari
[ ] MacOS: Chrome / Safari
[ ] MacOS: Desktop

[ ] I verified there are no console errors (if there's a console error not related to the PR, report it or open an issue for it to be fixed)
[ ] I followed proper code patterns (see Reviewing the code)

[ ] I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick)
[ ] I verified that the left part of a conditional rendering a React component is a boolean and NOT a string, e.g. myBool && <MyComponent />.
[ ] I verified that comments were added to code that is not self explanatory
[ ] I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
[ ] I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method

[ ] If any non-english text was added/modified, I verified the translation was requested/reviewed in #expensify-open-source and it was approved by an internal Expensify engineer. Link to Slack message:

[ ] I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
[ ] I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is approved by marketing by adding the Waiting for Copy label for a copy review on the original GH to get the correct copy.
[ ] I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
[ ] I verified the JSDocs style guidelines (in STYLE.md) were followed

[ ] If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
[ ] I followed the guidelines as stated in the Review Guidelines
[ ] I tested other components that can be impacted by my changes (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar are working as expected)
[ ] I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
[ ] I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
[ ] I verified that if a function's arguments changed that all usages have also been updated correctly
[ ] If any new file was added I verified that:

[ ] The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory

[ ] If a new CSS style is added I verified that:

[ ] A similar style doesn't already exist
[ ] The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))

[ ] If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
[ ] If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
[ ] If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
[ ] If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
[ ] If the PR modifies the form input styles:

[ ] I verified that all the inputs inside a form are aligned with each other.
[ ] I added Design label so the design team can review the changes.

[ ] If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
[ ] If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.

Screenshots/Videos

Android: Native

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

MacOS: Desktop

@Kunals1996 please review the guidelines and do not post a PR without being hired for an issue.


text:
Stop call to Get&rvl=reportStuff with reportID = undefined

Details
Weird thing I came across on dev that should be fixed. Noticed a 2 second call to Get&returnValueList=reportStuff that was being called with a  reportID of undefined and traced it to the IOU code. When we do not find an IOU reportID for any reason we are continuing to fetch the report. Which makes no sense + takes a significant amount of time to process.
Basically, we log this:
GetIOUReport returned a reportID of 0, not fetching IOU report data
And then go ahead and fetch it anyway which takes 2 seconds for some reason (production web server used)...

Fixed Issues
No issue. Just noticed on dev that this should be cleaned up.
Tests
QA Steps
Test IOU features for any possible regressions.
Tested On

[x] Web
[ ] Mobile Web
[ ] Desktop
[ ] iOS
[ ] Android

Screenshots

Web

Mobile Web

Desktop

iOS

Android

:hand: 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         in version: 1.0.79-5🚀

platform
result

🤖 android 🤖
success ✅

🖥 desktop 🖥
success ✅

🍎 iOS 🍎
success ✅

🕸 web 🕸
success ✅

🚀 Deployed to production         in version: 1.0.80-2🚀

platform
result

🤖 android 🤖
success ✅

🖥 desktop 🖥
success ✅

🍎 iOS 🍎
success ✅

🕸 web 🕸
success ✅

authors: OSBotify marcaaron