text:
[HOLD for payment 2023-10-18] [$500] Chat - No loading animation when scrolling through chat history offline

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

Action Performed:

Open Desktop App or go to staging.new.expensify.com
Login to any account
Open chat with long history
Go Offline
Scroll chat history that has been cached

Expected Result:
Loading animation will be shown when the cached part of the chat ends
Actual Result:
Loading animation is not shown
Workaround:
Unknown
Platforms:

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

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

Version Number: 1.3.75-0
Reproducible in staging?: Yes
Reproducible in production?: No
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation
https://github.com/Expensify/App/assets/78819774/6e8e96e2-2e7c-4135-a110-248a2968d085

Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:
View all open jobs on GitHub
Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~0115f790294bf26093
Upwork Job ID: 1708780525432848384
Last Price Increase: 2023-10-02
Automatic offers:

situchan | Reviewer | 27034754
bernhardoj | Contributor | 27034757

:wave: Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open StagingDeployCash deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

Identify the pull request that introduced this issue and revert it.
Find someone who can quickly fix the issue.
Fix the issue yourself.

Reproduced  with build 1.3.75-3
https://github.com/Expensify/App/assets/93399543/6b7e775c-9619-4f8b-b111-f2693bdfc268

I think this regression was introduced by this PR, but I would revert it because it's a big one and brings performance optimizations. I will remove the deploy blocker and fix this as a regular issue. It's a minor UI bug reproducible in a corner(ish) use case.

I think we can make this one External

@situchan Are we waiting for more proposals on this one?

@bernhardoj thanks for the proposal. The root cause is correct.
Can you share demo videos? (before fix and after fix)

Proposal from @bernhardoj LGTM!
🎀 👀 🎀 C+ reviewed

Payment summary:

Issuer reporter: N/A
Contributor: @bernhardoj $750
Contributor+: @situchan $750

@situchan Do you mind completing the BZ checklist above?

bump @situchan

I was not able to find offending PR.
Recent PR should have reverted the changes made in https://github.com/Expensify/App/pull/26772 but git blame shows nothing. @bernhardoj it would be great if you can help finding.
As this was caught by Applause team, no need another regression test.

Thanks for that. Payment issued. Closing since we're also covered on regression tests.

authors: JmillsExpensify OSBotify cristipaval kbecciv lanitochka17 situchan


text:
[$500] Web - Chat - After Ctrl+R(app reload), the attachment preview modal becomes blank when pressing CTRL+K

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

Version Number: 1.4.42.1
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/4316393
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:
Action Performed:
precondition: user has an existing chat with an attachment .

Navigate to app and log in.
Open any chat with an attachment
Click the attachment to open the preview modal
Press CTRL+K or CMD+K to open the search page
Dismiss the search page
Open another attachment preview in any chat
Reload the app (CTRL+R)
Press CTRL+K or CMD+K to open the search page

Expected Result:
When the search page is opened , the conversation with the attachment is greyed out but visible on the backdrop
Actual Result:
After reloading the app, the preview modal becomes blank.
Workaround:
Unknown
Platforms:

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

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

Screenshots/Videos
Add any screenshot/video evidence
https://github.com/Expensify/App/assets/93399543/190dcc46-2b03-4274-93c9-15791d2326f3
View all open jobs on GitHub
Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~017fb8d3967819dfb5
Upwork Job ID: 1758163790823956480
Last Price Increase: 2024-02-15

We think that this bug might be related #vip-vsb
CC @quinthar

Proposal
Please re-state the problem that we are trying to solve in this issue.
When we reload the web while on the attachment previews and use search shortcut, the central screen is blank.
What is the root cause of that problem?
When we reload the web, the nav stack only contains bottom tab navigator and the report attachments page. We have a custom router that modify the stack to includes neccessary route to the stack, but for report attachments, the state is undefined. I think the state won't be undefined only if it's a nested navigator.
https://github.com/Expensify/App/blob/e3331db018e826dc20bb34ad33b3fb77ee6e8fb8/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts#L33-L37
But even if we remove the early return, it still won't work correctly because getAdaptedStateFromPath returns undefined. getAdaptedStateFromPath is the one that decides what routes to include on the stack. For example, if there is a full screen navigator, we want to make sure there is a bottom tab navigator, central pane navigator (on large screen), and the full screen navigator itself.
https://github.com/Expensify/App/blob/e3331db018e826dc20bb34ad33b3fb77ee6e8fb8/src/libs/Navigation/linkingConfig/getAdaptedStateFromPath.ts#L211-L238
In our case the bottom navigator is found on the stack, but matchingCentralPaneRoute is undefined because topmostBottomTabRoute and that is because the bottom navigator doesn't have a state.
https://github.com/Expensify/App/blob/e3331db018e826dc20bb34ad33b3fb77ee6e8fb8/src/libs/Navigation/linkingConfig/getAdaptedStateFromPath.ts#L253-L268
https://github.com/Expensify/App/blob/e3331db018e826dc20bb34ad33b3fb77ee6e8fb8/src/libs/Navigation/linkingConfig/getMatchingCentralPaneRouteForState.ts#L35-L36
https://github.com/Expensify/App/blob/e3331db018e826dc20bb34ad33b3fb77ee6e8fb8/src/libs/Navigation/getTopmostBottomTabRoute.ts#L6-L9

The only case I can see the bottom navigator state is when I open /home.
What changes do you think we should make in order to solve the problem?

Add a new case in getAdaptedState to handle report attachments.
const reportAttachmentsScreen = state.routes.find((route) => route.name === SCREENS.REPORT_ATTACHMENTS);

If report attachments is found on the stack, we want to make sure there is a report screen behind it.
if (reportAttachmentsScreen) {
    const routes = [];

    // bottom tab navigator
    const matchingBottomTabRoute = getMatchingBottomTabRouteForState(state);
    routes.push(createBottomTabNavigator(matchingBottomTabRoute, policyID));
    // maybe we can add it on large screen only
    routes.push(createCentralPaneNavigator({name: SCREENS.REPORT, params: {reportID: reportAttachmentsScreen.params?.reportID ?? ''}}));
    // attachments preview
    routes.push(reportAttachmentsScreen)

    return {
        adaptedState: getRoutesWithIndex(routes),
        metainfo,
    }
}

@bernhardoj The proposal looks like and clear explanation of the root cause 👍
There is just one problem with the solution. After the search page opens, the navigation history seems of where I can't navigate back or forward to the previous search page.
https://github.com/Expensify/App/assets/25520267/58a1d806-8977-4553-9e5a-56cc346591c5

I don't really understand how the history is handled by rn-navigation, but looks like that's the common behavior when you refresh the page as shown below:
https://github.com/Expensify/App/assets/50919443/93bcb42e-370a-4ae7-b0b8-41e1cb543b98

Yeah, that's the current behavior and we can skip it for now.
The proposal looks good to me!
🎀 👀 🎀 C+ reviewed!

PR is ready
cc: @mollfpr

@mollfpr could you complete the checklist please?

[@mollfpr] The PR that introduced the bug has been identified. Link to the PR:
[@mollfpr] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:

I can't find the offending PR.

[@mollfpr] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:

The regression step should be good.

[@mollfpr] Determine if we should create a regression test for this bug.
[@mollfpr] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.

Web/Desktop

Open any chat with an attachment (send one that doesn't exist)
Open the attachment
Refresh the web
Use the CMD/CTRL+K shortcut
Verify the search page is open, the attachment preview is closed, and a report screen is shown behind the overlay

Android/iOS/mWeb
You can't use the shortcut, so make sure the user can still access the attachment preview

@JmillsExpensify Could you post the payment summary? Thank you!

Payment summary:

Contributor: @bernhardoj $500
Contributor+: @mollfpr $500

Released the payment for @bernhardoj. @laurenreidexpensify Could you please confirm the payment summary above before I approve for @mollfpr?

Actually scratch that. @trjExpensify Can you confirm the payment summary above so that I can release payment?

Payment summary here looks good!

Thank you! $500 approved for @mollfpr based on summary.

Regression test request created, so closing this issue.

source: gharchive/issue

authors: JmillsExpensify amyevans bernhardoj kbecciv mollfpr trjExpensify

repo: Expensify/App

license: MIT

license_type: permissive

license_source: github-api


text:
WS-There is a noticeable lag when typing in search field in invite members page for HT

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

Found when validating PR : https://github.com/Expensify/App/pull/36681
Version Number: 1.4.47-0
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers): nathanmulugetatesting@gmail.com
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal Team
Action Performed:
Precondition: Sign in with a High traffic account

Go to WS invite members page
Click on search bar
Type something

Expected Result:
There should be no lag that is very noticeable
Actual Result:
There is a noticeable lag when typing the first letters in the search filed and when typing fast and using backspace to delete letters
Workaround:
Can the user still use Expensify without this being fixed? Have you informed them of the workaround?
Platforms:

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

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

Screenshots/Videos
https://github.com/Expensify/App/assets/115492554/b8836d32-9046-4f12-a6d7-32d9114d9549
https://github.com/Expensify/App/assets/115492554/25dc7094-5bb7-4e12-a30d-9214d7943a62

View all open jobs on GitHub

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

Noted, I will add this to my test list.

Still on my testing list, I'll review it soon.

No update yet, I need to test.

I tested today and am unable to replicate the same experience. I think the lag might have been temporary and no issues today to load the emails from the Invite list today.

authors: alexpensify izarutskaya


text:
[Search v1] - "Delete" option appears for paid expenses for submitter

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

Issue found when validating #44385
Version Number: 9.0.4-0
Reproducible in staging?: y
Reproducible in production?: no
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause internal team
Slack conversation:
Action Performed:

User as a submitter has at least one paid expense.

Go to staging.new.expensify.com
Go to Search > Expenses.
Click on the checkbox of the paid expense.
Click on the dropdown button.

Expected Result:
"Delete" option will not appear for paid expenses.
Actual Result:
"Delete" option appears for paid expenses, and nothing happens when deleting it.
As a result, user cannot bulk delete the expenses when both paid and unpaid expenses are selected.
Workaround:
unknown
Platforms:

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

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

Screenshots/Videos
https://github.com/Expensify/App/assets/38435837/056aee1b-4408-41d9-93fd-508971e89b6a

View all open jobs on GitHub

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

We think that this bug might be related to  #vip-vsb

Proposal
Please re-state the problem that we are trying to solve in this issue.
"Delete" option appears for paid expenses, and nothing happens when deleting it.
As a result, user cannot bulk delete the expenses when both paid and unpaid expenses are selected.
What is the root cause of that problem?
We show the delete option if itemsToDelete is not an empty array and the itemsToDelete is filtered out from selectedItemsKeys by checking item.canDelete. But after the transaction is paid, item.canDelete still true. And then the delete option still appears if we only selected the paid expense.
https://github.com/Expensify/App/blob/a84f68eeb1f72d0ca3308a4bdc9dc78e59a46d2e/src/components/Search/SearchPageHeader.tsx#L50-L55
What changes do you think we should make in order to solve the problem?
We should filter out the item here if it's paid by checking item.action is CONST.SEARCH.ACTION_TYPES.PAID or not.
const itemsToDelete = selectedItemsKeys.filter((id) => selectedItems[id].canDelete && item.action !== CONST.SEARCH.ACTION_TYPES.PAID);

https://github.com/Expensify/App/blob/a84f68eeb1f72d0ca3308a4bdc9dc78e59a46d2e/src/components/Search/SearchPageHeader.tsx#L50
And I think BE also need to update canDelete of transaction item to false when it's paid.
What alternative solutions did you explore? (Optional)
NA

This should be fixed on the backend, since the backend has all the information to decide if a transaction can be deleted or not.

Not overdue!

PR up

@luacmartins looks like we can close this, yeah?

Yea, I confirmed the fix in staging

authors: kadiealexander luacmartins m-natarajan nkdengineer


text:
[$250] Workspace - Role changed to admin member can't access compose box in workspace chat

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

Version Number: 9.0.24-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers): biruknew45+171@gmail.com
Issue reported by: Applause - Internal Team
Action Performed:

Go to [https://staging.new.expensify.com/]
As User A, create a workspace and add User B
Navigate to the workspace chat
Click on the header and then "Settings."
Click on the "Who Can Post" settings
Change it to "Admin Only."
Go to the workspace settings
Change User B's role to admin
Observe the behavior as User B
Go to the workspace settings
Change User B's role to "Member."
Observe the behavior as User B

Expected Result:
After changing the member's role to admin, the member should be able to post immediately.
The compose box and permission message should update consistently based on role and "Who Can Post" settings. after reverting the member's role to "Member," the compose box should be hidden again, preventing the member from attempting to send messages
Actual Result:
After changing the member's role to admin, the member cannot post. the compose box and permission message disappear and reappear inconsistently then the compose box remains visible even after reverting the member's role to "Member," but sending a message results in an error
Workaround:
Unknown
Platforms:

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

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

Screenshots/Videos
Add any screenshot/video evidence

https://github.com/user-attachments/assets/30438e8b-9992-4d7e-a8a0-529295cf4592
View all open jobs on GitHub
Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~01c1f02627a154bb67
Upwork Job ID: 1828876093361855716
Last Price Increase: 2024-08-28
Automatic offers:

allgandalf | Contributor | 103786652

Issue OwnerCurrent Issue Owner: @allgandalf

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

We think that this bug might be related to #wave-collect - Release 1

Oops, I messed up and removed and added again @allgandalf , not sure what happened with the upwork job when I did that 😬

Deployed to Production Sept 12
PAYMENT SUMMARY:
Fix: @daledah - I was unable to find you in Upwork https://github.com/Expensify/App/issues/47919#issuecomment-2325246229
PR Review: @allgandalf [$250] Offer Link

@allgandalf It is not completed yet.
@daledah has still not responded for my request of their upwork profile link.
I've been unable to find their profile to send payment offer.

@daledah OFFER

@daledah payment sent and contract ended - thank you! 🎉

authors: abekkala aldo-expensify lanitochka17


text:
[$250] Update the icon size in icon-only buttons to match the icon size in our regular buttons

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

Version Number:
Reproducible in staging?:
Reproducible in production?:
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?:
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @dannymcclain
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1729695613695369
Action Performed:

Go to staging.new.expensify.com
Observe the icon-only buttons

Expected Result:
Update the icon size in icon-only buttons to use the same size
Actual Result:
Currently, the icons in icon-only buttons are 4px larger than in our regular buttons of the same size
Workaround:
Unknown
Platforms:

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

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

Screenshots/Videos

Add any screenshot/video evidence

View all open jobs on GitHub
Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~021849243090532893090
Upwork Job ID: 1849243090532893090
Last Price Increase: 2024-10-24

Issue OwnerCurrent Issue Owner: @rojiphil

Proposal
Please re-state the problem that we are trying to solve in this issue.
We need to update the icon size for icon-only buttons to match the icon size used in our regular buttons.
What is the root cause of that problem?
UI Enhancements
What changes do you think we should make in order to solve the problem?
To achieve this, we can remove the hasText condition, which was initially added intentionally. Removing this will ensure consistency between buttons with and without text.
For sizing of height and width:
Small: Use iconSizeExtraSmall
Medium: Use iconSizeSmall
Large: Use iconSizeNormal
https://github.com/Expensify/App/blob/3ddc1dd1c1475d65ed4a49e4ebf2cc57b8fa0108/src/styles/utils/index.ts#L493-L503
What alternative solutions did you explore? (Optional)

Proposal
Please re-state the problem that we are trying to solve in this issue.
Icon-only buttons are 4px larger in width and height than regular buttons with both text and an icon.
What is the root cause of that problem?
The extra 4px is added due to the logic in this part of the code, where the hasText argument is being used to increase the button's dimensions when no text is present:
https://github.com/Expensify/App/blob/3ddc1dd1c1475d65ed4a49e4ebf2cc57b8fa0108/src/styles/utils/index.ts#L493.
What changes do you think we should make in order to solve the problem?

Modify the getIconWidthAndHeightStyle function:

Remove the hasText argument from the function signature.
Return the button's width and height purely based on the button size, ignoring the hasText condition. The updated logic should look like this:

case small:
     return {width: variables.iconSizeExtraSmall, height: variables.iconSizeExtraSmall};
case medium:
     return {width: variables.iconSizeSmall, height: variables.iconSizeSmall};
case large:
     return {width: variables.iconSizeNormal, height: variables.iconSizeNormal};

Delete the hasText prop from the IconProps definition here: :
https://github.com/Expensify/App/blob/0c3996be52f8dd4b7ce13fe2983411795a6429d0/src/components/Icon/index.tsx#L44

3.Don't accept the hasText prop in the Icon component https://github.com/Expensify/App/blob/0c3996be52f8dd4b7ce13fe2983411795a6429d0/src/components/Icon/index.tsx#L44.

Remove the hasText prop when passing it to the Icon component in this part of the code:
https://github.com/Expensify/App/blob/0c3996be52f8dd4b7ce13fe2983411795a6429d0/src/components/Button/index.tsx#L294-L298

Edited by proposal-police: This proposal was edited at 2024-10-23 19:06:30 UTC.
Proposal
Please re-state the problem that we are trying to solve in this issue.
Icon-only buttons are 4px larger in width and height than regular buttons with both text and an icon.
What is the root cause of that problem?
Specifically, the CSS or design system may have different size definitions or padding for icons in icon-only buttons, causing them to render 4px larger.
What changes do you think we should make in order to solve the problem?
To solve the problem of inconsistent icon sizes in the icon-only buttons, the following changes should be made:
1. Standardize Icon Sizing:
Ensure that the same size is applied to icons in both icon-only buttons and regular buttons. Check the CSS properties like >font-size or width and height for the icons in both button types and make sure they match.
2. Adjust Padding/Margins:
If the size discrepancy is caused by extra padding or margins around the icons in icon-only buttons, adjust these properties to >match those used in regular buttons.
3. Use a Consistent Class or Style:
Apply a shared class for icon styling that ensures uniform size across all buttons. This way, any updates to icon sizes will be >reflected consistently in both types of buttons.
4. Test Across Button Sizes:
After applying changes, test the buttons across different sizes (small, medium, large) to confirm the icons are properly scaled >and consistent.
These changes should ensure the icons in all buttons have the same size.

Contributor details
Your Expensify account email: vinit25radadiya@gmail.com
Upwork Profile Link: <REPLACE LINK HERE>

Contributor details
Your Expensify account email: vinit25radadiya@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~01f3e2273d4d6b87c9

Adding some more detail in case it's helpful:
Our regular buttons use some special padding values when there's an icon present. For icon-only buttons the padding is more straight-forward:

Small: 28px fixed height with a centered 12x12px icon (essentially 8px of padding on all sides)
Medium: 40px fixed height with a centered 16x16px icon (essentially 12px of padding on all sides)
Large: 52px fixed height with a centered 20x20px icon (essentially 16px of padding on all sides)

We do not want to make any changes to how are regular buttons / buttons with icon + text are displayed. Only for buttons with just an icon.

Thanks for the context, Danny. I’ve tested the small, medium, and large icon-only buttons after applying the changes, and they match the styles you mentioned here. It looks like what’s shown in the attached video.
https://github.com/user-attachments/assets/55221bf9-56b1-469d-8109-3dd6ad5e3ba2

@Shahidullah-Muffakir Your proposal has more implementation details but isn’t it essentially the same as @jayeshmangwani proposal?
The implementation details make more sense when there is logic involved but no logical implementation is needed to remove the hastText implementation and to apply the correct variables.

@rojiphil , Thank you for asking.
I agree that the core change aligns with what @jayeshmangwani suggested. However, my proposal includes detailed implementation steps to ensure clarity and avoid any potential issues during execution.
The reason I provided these details is that in few previous proposals of mine in other issues, the ones with more implementation specifics were preferred, but I believe that if the initial proposal includes the essential changes, the additional details will naturally follow in the pull request (PR). For example, removing the hasText prop and its type is necessary; otherwise, the PR will fail linting and TypeScript tests.
So, I concur that if the first proposal captures the main changes, we can proceed with it even without extensive implementation details, as those adjustments are expected to be made in the PR. Given this perspective, I am fine if you  proceed with the @jayeshmangwani's proposal.
Thanks again, and as a friendly suggestion, I think it would be helpful to apply this approach consistently across all issues going forward.

I concur that if the first proposal captures the main changes, we can proceed with it even without extensive implementation details, as those adjustments are expected to be made in the PR

@Shahidullah-Muffakir This is precisely the point. The key aspect of reviewing proposals for me is to look for a distinct advantage over other proposals. Extensive implementation details for something like remove hasText implementation do not give a distinct advantage as that can be figured out in PR. But if the main changes involve multiple logical possibilities, I would like to see more implementation details in the proposal. Thanks for your proposal though. Hopefully, we can work together on some other issue.

@jayeshmangwani proposal LGTM as we can apply the required iconSize variables and remove the hasText implementation.
🎀👀🎀 C+ reviewed

Proposal looks good!

Payment Summary:

@rojiphil paid $250 here (Reviewer)
@jayeshmangwani paid $250 via NewDot Manual Request

(Reviewer) (Waiting on accepting contract)

@twisterdotcom Thanks. Accepted offer here.

$250 approved for @jayeshmangwani

authors: Shahidullah-Muffakir VinitRadadiya dannymcclain garrettmknight jayeshmangwani m-natarajan mjasikowski rojiphil twisterdotcom


text:
[$250] Loading screen displayed even after "Clear Cache and Restart" done in troubleshoot

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

Version Number:
Reproducible in staging?: Needs Reproduction
Reproducible in production?: Needs Reproduction
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?:
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @mateomorris
Slack conversation (hyperlinked to channel name): quality
Action Performed:

Navigate to Troubleshoot in settings
Click  Clear Cache and Restart

Expected Result:
Cache cleared and chat load as per preference
Actual Result:
Nothing loads in the account
Workaround:
Unknown
Platforms:

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

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

Screenshots/Videos

Add any screenshot/video evidence

{
    "onyxData": [
        {
            "key": "userMetadata",
            "onyxMethod": "set",
            "value": {
                "accountID": 6851710,
                "email": "mmoore@expensify.com",
                "freeTrial": false,
                "planType": "corporate",
                "role": "admin",
                "tryNewDotDismissed": "false"
            }
        }
    ],
    "lastUpdateID": "3437597597",
    "previousUpdateID": "3437597597",
    "jsonCode": 200,
    "requestID": "8f31eee7d92f772c-LHR"
}

View all open jobs on GitHub
Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~021869636869236863994
Upwork Job ID: 1869636869236863994
Last Price Increase: 2024-12-19

Issue OwnerCurrent Issue Owner: @shubham1206agra

This has been labelled "Needs Reproduction". Follow the steps here: https://stackoverflowteams.com/c/expensify/questions/16989

I'm pretty sure this can be worked externally... Since the cache lives on the device (not in the DB) - but it's possible this could be caused by something not re-loading from the DB when we restart - I'll still make this external to get some help nailing down reproduction steps

still waiting for proposals & test steps - if we don't get any reproducible steps this week, we can probably close

authors: Beamanator MelvinBot m-natarajan


text:
Corrected - IOU Description extends beyond the page if recipient name is long

@aimane-chnaif @mountiny PR is ready for review.
Details
Whenever we request money from account A to account B and if account B has long name or email at that time IOU  description will extend beyond the page limit. So in this PR we corrected that problem.
Fixed Issues
$ https://github.com/Expensify/App/issues/18882
PROPOSAL: https://github.com/Expensify/App/issues/18882#issuecomment-1546529050
Tests
Preconditions: Make sure account B has long name or long email.

Login to account A
Request money from account A to B
Verify that IOU description (e.g.  'UserB owes ₹287.33') beneath the IOUPreview does not extend beyond the page limit.

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

Offline tests
Preconditions: Make sure account B has long name or long email.

Login to account A
Request money from account A to B
Verify that IOU description (e.g.  'UserB owes ₹287.33') beneath the IOUPreview does not extend beyond the page limit.

QA Steps
Preconditions: Make sure account B has long name or long email.

Login to account A
Request money from account A to B
Verify that IOU description (e.g.  'UserB owes ₹287.33') beneath the IOUPreview does not extend beyond the page limit.

[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] 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 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
Chrome
https://github.com/Expensify/App/assets/7823358/a88c3c33-aacb-450d-a70d-aa18a2d0a704
Safari
https://github.com/Expensify/App/assets/7823358/9d8ea237-f830-4fb8-8f54-d8c752283599

Mobile Web - Chrome
https://github.com/Expensify/App/assets/7823358/9a2d6b65-598a-4d6f-bfff-a38c1936febc

Mobile Web - Safari
https://github.com/Expensify/App/assets/7823358/0ed83c77-8dfd-4a14-9d98-4b546380164b

Desktop
https://github.com/Expensify/App/assets/7823358/2f97f536-236f-4280-b13b-4d1d0ea8ece8

iOS
https://github.com/Expensify/App/assets/7823358/d1b2224a-7143-4f99-ad74-5f50c044bc2a

Android
https://github.com/Expensify/App/assets/7823358/3ab30308-4b4b-4578-b01d-7e6bfafca51c

🚀 Cherry-picked to staging by https://github.com/mountiny in version: 1.3.14-9 🚀

platform
result

🤖 android 🤖
success ✅

🖥 desktop 🖥
success ✅

🍎 iOS 🍎
success ✅

🕸 web 🕸
success ✅

@Expensify/applauseleads please QA this PR and check it off on the deploy checklist if it passes.

@PrashantMangukiya @aimane-chnaif @mountiny we are getting issue on Desktop when resizing. seems minor and not sure if this will block PR. Let me know. We didnt log it yet
https://github.com/Expensify/App/assets/43995119/a41bfb9d-e106-4188-938c-a8dddf4a5256

@mvtglobally  I did test on my pr branch. it looks like working as expected as shown in video.
https://github.com/Expensify/App/assets/7823358/ce186e71-6150-4c09-b526-0202c194efca
https://github.com/Expensify/App/assets/7823358/9983d3ee-7640-498d-84dd-6001b48a5d07

@mvtglobally This I tested on latest main branch. It is working there too.
https://github.com/Expensify/App/assets/7823358/ef2bd8f0-d0e9-48a9-b1c6-c832f629f1a9

🚀 Deployed to production by https://github.com/yuwenmemon in version: 1.3.14-14 🚀

platform
result

🤖 android 🤖
success ✅

🖥 desktop 🖥
success ✅

🍎 iOS 🍎
success ✅

🕸 web 🕸
success ✅

🚀 Cherry-picked to staging by https://github.com/AndrewGable in version: 1.3.28-2 🚀

platform
result

🤖 android 🤖
success ✅

🖥 desktop 🖥
success ✅

🍎 iOS 🍎
success ✅

🕸 web 🕸
success ✅

@Expensify/applauseleads please QA this PR and check it off on the deploy checklist if it passes.

🚀 Deployed to production by https://github.com/AndrewGable in version: 1.3.28-5 🚀

platform
result

🤖 android 🤖
success ✅

🖥 desktop 🖥
success ✅

🍎 iOS 🍎
success ✅

🕸 web 🕸
success ✅

source: gharchive/pull-request

authors: OSBotify PrashantMangukiya mvtglobally


text:
fix for eslint bug #15261

Details
Only the last restricted import from the same path is checked and others are ignored when there are multiple imports due to the eslint bug
Fixed Issues
$ https://github.com/Expensify/App/issues/22459
PROPOSAL: https://github.com/Expensify/App/issues/22459#issuecomment-1627305981
Tests

open a random component file such as src/components/AddressSearch/index.js
at the top of the file, import one of the following packages from react-native

useWindowDimensions
TouchableOpacity
TouchableWithoutFeedback
TouchableNativeFeedback
TouchableHighlight
StatusBar

for each imported component above, see an eslint error appears in VS Code if ESLint extension is added (a hint for error is shown when hovering mouse over the imported component.)

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

Offline tests
Same steps above
QA Steps
Same steps above

[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 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
Since it is not a UI issue, no ui screenshots are added. Eslint gives console error when a restricted component is used as shown in the following:

Web

Mobile Web - Chrome

Mobile Web - Safari

Desktop

iOS

Android

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

looks like there's a prettier diff that needs to be committed

@roryabraham, @allroundexperts: sorry guys

FWIW I have my editor configured to run prettier whenever I save. It's pretty easy to set up that way and then I never think about formatting my code. Just type and press CMD+S and everything's formatted correctly.

🚀 Deployed to staging by https://github.com/roryabraham in version: 1.3.40-0 🚀

platform
result

🤖 android 🤖
success ✅

🖥 desktop 🖥
success ✅

🍎 iOS 🍎
success ✅

🕸 web 🕸
success ✅

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

@HLEDYA @allroundexperts @roryabraham Can you pls QA this internally?

@mvtglobally this should have been marked as No QA, we're good to go here.

FWIW I have my editor configured to run prettier whenever I save. It's pretty easy to set up that way and then I never think about formatting my code. Just type and press CMD+S and everything's formatted correctly.

Thank you @roryabraham, I also enabled format on save for my VS code ide.

🚀 Deployed to production by https://github.com/Julesssss in version: 1.3.40-5 🚀

platform
result

🤖 android 🤖
success ✅

🖥 desktop 🖥
success ✅

🍎 iOS 🍎
success ✅

🕸 web 🕸
success ✅

authors: HLEDYA OSBotify mvtglobally roryabraham


text:
Safely get avatar URL for task

Details
Fixed Issues
$ https://github.com/Expensify/App/issues/22657
Tests

From the FAB, create a new task
Assign the task to a phone number you've never interacted with
After creating the task, make sure the app doesn't crash

Note: there's a known issue with the task not being properly assigned, this will be handled in https://github.com/Expensify/Expensify/issues/294203. We're just wanting to make sure the app doesn't crash here.

[ ] Verify that no errors appear in the JS console

Offline tests
QA Steps
Same as tests

[ ] 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 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/2229301/53367da0-81e5-4c7b-b674-9be7304938b7

Mobile Web - Chrome

Mobile Web - Safari

Desktop

iOS
https://github.com/Expensify/App/assets/2229301/d83a7265-d183-4d24-8433-2bea96353b4d

Android

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 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/16493223/ce84926b-18df-44b4-99ea-f3dee3402fc1

Mobile Web - Chrome

Mobile Web - Safari

Desktop

iOS

https://github.com/Expensify/App/assets/16493223/cbb1f99f-0c5b-4c59-b76d-b68818b4137f

Android

I pushed a small style fix for npm run prettier and accidentally also committed an unrelated Podfile.lock change. I reset it locally and force-pushed the update, should be good now. But it looks like ESLint is still not completing.

: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/francoisl in version: 1.3.39-11 🚀

platform
result

🤖 android 🤖
success ✅

🖥 desktop 🖥
success ✅

🍎 iOS 🍎
success ✅

🕸 web 🕸
success ✅

🚀 Deployed to production by https://github.com/francoisl in version: 1.3.39-11 🚀

platform
result

🤖 android 🤖
success ✅

🖥 desktop 🖥
success ✅

🍎 iOS 🍎
success ✅

🕸 web 🕸
success ✅

authors: OSBotify francoisl s77rt


text:
Fix unexpected back navigation in Bank Connect flow

Ensured a specified fallback route is provided when using Navigation.goBack() within the Bank Connect flow to avoid defaulting to the HOME page unexpectedly after a page refresh.

Details

Fixed Issues

$ https://github.com/Expensify/App/issues/24237
PROPOSAL: https://github.com/Expensify/App/issues/24237#issuecomment-1668823286
Tests

Note: This requires testing only on browsers and not on mobile apps

Open main settings & navigate to the Bank connect page.
Refresh on this page.
Navigate back till the end.
Observe there's navigation happened for all settings pages like (main navigation, workspace pages, etc..)

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

Offline tests

Same as Tests
QA Steps

Same as Tests

[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/65986357/7ebc146b-ceb3-4358-9a72-2e133f63ce9e

Mobile Web - Chrome
https://github.com/Expensify/App/assets/65986357/dc2183f5-0796-48a4-a67f-1aa77f755f85

Mobile Web - Safari
https://github.com/Expensify/App/assets/65986357/f4e8f59f-db91-4698-8fdf-4ba63c5fddcf

Desktop
https://github.com/Expensify/App/assets/65986357/0737ea80-cbb3-464b-9330-32e3d8b4264c

iOS
https://github.com/Expensify/App/assets/65986357/ca799b91-c95a-4596-afa6-756a6c1725d6

Android
https://github.com/Expensify/App/assets/65986357/b3fe3e5b-7150-488b-b2a5-c3c68f664ed5

@burczu Let's try to get this merged within 3 days! Happy to clear any doubts/ issues.

Hey @ygshbht! I'm sorry for the delay - I was ooo on Monday and Tuesday. Just checked the code and have no comments. I'll continue testing and I think we may be good to go today.

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 / Chrome
[ ] iOS / native
[ ] iOS / 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(themeColors.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

Web

Mobile Web - Chrome

Mobile Web - Safari

Desktop

iOS

Android

Sure, no worries!

@ygshbht add two minor comment to the code

@burczu Would you also like to remove this JSdoc here which i had added - as it might seem inconsistent with similar functions?

@ygshbht Yeah, actually it's reasonable to remove it and keep it consistent with the rest of the file

@burczu Done!

: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/yuwenmemon in version: 1.3.55-0 🚀

platform
result

🤖 android 🤖
success ✅

🖥 desktop 🖥
success ✅

🍎 iOS 🍎
success ✅

🕸 web 🕸
success ✅

🚀 Deployed to production by https://github.com/roryabraham in version: 1.3.56-24 🚀

platform
result

🤖 android 🤖
success ✅

🖥 desktop 🖥
success ✅

🍎 iOS 🍎
failure ❌

🕸 web 🕸
success ✅

authors: OSBotify burczu ygshbht


text:
fix: don't show merchant info for split bill

Details

Fixed Issues

$ https://github.com/Expensify/App/issues/25640
PROPOSAL: https://github.com/Expensify/App/issues/25640#issuecomment-1687335264
Tests

Open ND and log in with any account
Create a split bill
Verify that there is no list of users the bill is split between, but only the avatars of the users

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

Offline tests

Open ND and log in with any account
Create a split bill
Verify that there is no list of users the bill is split between, but only the avatars of the users

QA Steps

Open ND and log in with any account
Create a split bill
Verify that there is no list of users the bill is split between, but only the avatars of the users

[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/126839717/0029c05f-65b1-4c1d-87f2-89d279bd3a95

Mobile Web - Chrome
https://github.com/Expensify/App/assets/126839717/b1313c26-9b5b-4ba0-8666-f611fbe6a745

Mobile Web - Safari
https://github.com/Expensify/App/assets/126839717/fb12bdb5-6f25-45e9-a249-9ffcd2209ab4

Desktop
https://github.com/Expensify/App/assets/126839717/f840c28d-98c8-4d9c-a200-4be98464008e

iOS
https://github.com/Expensify/App/assets/126839717/434c1cc0-ab59-4a63-8cce-78871c60b25f

Android
https://github.com/Expensify/App/assets/126839717/558dee48-cb15-408f-a804-83263253202a

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 / Chrome
[ ] iOS / native
[ ] iOS / 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(themeColors.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

Web

Mobile Web - Chrome

Mobile Web - Safari

Desktop

iOS

Android

@jjcoffee
Tests section was updated

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

Going to CP this to staging since it fixes a deploy blocker

🚀 Deployed to staging by https://github.com/robertjchen in version: 1.3.56-8 🚀

platform
result

🤖 android 🤖
failure ❌

🖥 desktop 🖥
success ✅

🍎 iOS 🍎
success ✅

🕸 web 🕸
success ✅

🚀 Deployed to production by https://github.com/roryabraham in version: 1.3.56-24 🚀

platform
result

🤖 android 🤖
success ✅

🖥 desktop 🖥
success ✅

🍎 iOS 🍎
failure ❌

🕸 web 🕸
success ✅

🚀 Deployed to staging by https://github.com/robertjchen in version: 1.3.58-0 🚀

platform
result

🤖 android 🤖
success ✅

🖥 desktop 🖥
success ✅

🍎 iOS 🍎
success ✅

🕸 web 🕸
success ✅

🚀 Deployed to production by https://github.com/luacmartins in version: 1.3.58-5 🚀

platform
result

🤖 android 🤖
success ✅

🖥 desktop 🖥
success ✅

🍎 iOS 🍎
success ✅

🕸 web 🕸
success ✅

authors: OSBotify jjcoffee roryabraham s-alves10


text:
Revert "Revert "feat: Upgrade VisionCamera to V4""

Reverts Expensify/App#39367
Should fix https://github.com/Expensify/App/issues/39285
Will probably break https://github.com/Expensify/App/issues/39241
cc @mrousavy @mountiny
Is anyone else seeing that this revert commit is from @cead22 ? 😅 🤷  I guess that's ... fine?

follow up fix for shutter sound: https://github.com/Expensify/App/pull/39400

🚀 Deployed to staging by https://github.com/Beamanator in version: 1.4.59-0 🚀

platform
result

🤖 android 🤖
success ✅

🖥 desktop 🖥
success ✅

🍎 iOS 🍎
success ✅

🕸 web 🕸
success ✅

🚀 Deployed to production by https://github.com/Julesssss in version: 1.4.60-13 🚀

platform
result

🤖 android 🤖
success ✅

🖥 desktop 🖥
success ✅

🍎 iOS 🍎
success ✅

🕸 web 🕸
success ✅

authors: Beamanator OSBotify mrousavy