Adds optimistic data for transaction threads with violations

[cdanwards]

Details

Fixed Issues

$https://github.com/Expensify/App/issues/31411 $https://github.com/Expensify/App/issues/34548 PROPOSAL:

This PR addresses the need to add the optimistic data necessary for transaction threads to display in the LHN even when offline. We do this by creating transaction threads and created actions for those threads and adding that data to the optimistic data within RequestMoney, CreateDistanceRequest, and SplitBill and subsequently passing that thread and created action data to the API Calls.

There were a few instances where logic needed to be altered in order for transaction threads with violations to correctly display in the LHN.

Some bug fixes that were discovered in the creation of this:

• originalMessage needed to be added to the mapped version of reportActions in SidebarLinksData so that we correctly identify threads with violations
• adding policy, policyTags, and policyCategories to the splitBill function to correctly create transactionViolations onyx collections for those transactions

Issue 34548 is also resolved within this PR by adding a check to ReportUtils for the status of the report and if it is reimbursed, we don't want to display a transaction thread with violations.

Tests

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

Pre-testing Instructions

• [ ] Verify you have a workspace with violations enabled and that have required Tags and Categories and that you have an account with that workspace.
• [ ] Verify that you have the canUseViolations beta enabled

Testing Money Request

• [ ] Select the Floating Action Button (FAB) within the Left Hand Navigation (LHN) and then select Request Money
• [ ] Select Manual as the entry method and enter an amount.
• [ ] Select the Next button.
• [ ] Select your workspace from the possible options.
• [ ] Verify you have been taken to the Money Request Confirmation Screen.
• [ ] Select the Merchant row and enter a merchant name, then hit the Save button. (It can be anything and this is required to continue)
• [ ] Select the Request button
• [ ] Verify that the Money Request you just created appears in the LHN with an RBR indicator.
• [ ] Select and verify the information.

Testing Distance Requests

• [ ] Select the Floating Action Button (FAB) within the Left Hand Navigation (LHN) and then select Request Money
• [ ] Select the Distance tab
• [ ] Select the Start row and in the input screen type 100 5th Ave New York NY and select the address
• [ ] Select the End row and in the input screen type 400 5th Ave New York NY and select the address
• [ ] Select the Next button
• [ ] Select your Workspace from the available options
• [ ] Verify that the amount 1.41 miles and that the date is correct.
• [ ] Select the Request button
• [ ] Verify that the transaction thread correctly appears in the LHN with the correct information and an RBR indicator.

Splits are included in the functionality of this PR and so transaction threads are created optimistically however because violations aren't created for splits, they will not appear in the LHN. To test that they are created correctly, you can log the optimisticTransactionThread and optimisticCreatedActionForTransactionThread within the createSplitsAndOnyxData in the IOU.js file. Then within the OnyxDB in the Storage browser tab you can verify that those reports and report actions have been created.

Offline tests

Same as Tests

QA Steps

Same as Tests

PR Author Checklist

• [x] I linked the correct issue in the ### Fixed Issues section above
• [x] I wrote clear testing steps that cover the changes made in this PR
  • [x] I added steps for local testing in the Tests section
  • [x] I added steps for the expected offline behavior in the Offline steps section
  • [x] I added steps for Staging and/or Production testing in the QA steps section
  • [x] I added steps to cover failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
  • [x] I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
  • [x] I tested this PR with a High Traffic account against the staging or production API to ensure there are no regressions (e.g. long loading states that impact usability).
• [x] I included screenshots or videos for tests on all platforms
• [x] I ran the tests on all platforms & verified they passed on:
  • [x] Android: Native
  • [x] Android: mWeb Chrome
  • [x] iOS: Native
  • [x] iOS: mWeb Safari
  • [x] MacOS: Chrome / Safari
  • [x] MacOS: Desktop
• [x] I verified there are no console errors (if there's a console error not related to the PR, report it or open an issue for it to be fixed)
• [x] I followed proper code patterns (see Reviewing the code)
  • [x] I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick)
  • [x] I verified that the left part of a conditional rendering a React component is a boolean and NOT a string, e.g. myBool && <MyComponent />.
  • [x] I verified that comments were added to code that is not self explanatory
  • [x] I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
  • [x] I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
    • [x] If any non-english text was added/modified, I verified the translation was requested/reviewed in #expensify-open-source and it was approved by an internal Expensify engineer. Link to Slack message:
  • [x] I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
  • [x] I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is approved by marketing by adding the Waiting for Copy label for a copy review on the original GH to get the correct copy.
  • [x] I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
  • [x] I verified the JSDocs style guidelines (in STYLE.md) were followed
• [x] If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
• [x] I followed the guidelines as stated in the Review Guidelines
• [x] I tested other components that can be impacted by my changes (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar are working as expected)
• [x] I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
• [x] I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
• [x] I verified that if a function's arguments changed that all usages have also been updated correctly
• [x] If any new file was added I verified that:
  • [x] The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
• [x] If a new CSS style is added I verified that:
  • [x] A similar style doesn't already exist
  • [x] The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))
• [x] If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
• [x] If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
• [x] If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
• [x] If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
• [x] If the PR modifies the form input styles:
  • [x] I verified that all the inputs inside a form are aligned with each other.
  • [x] I added Design label so the design team can review the changes.
• [x] If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
• [x] If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.

Screenshots/Videos

Android: Native

https://github.com/Expensify/App/assets/8878532/8bec347d-5c9b-4f0d-a270-72ec3ab39181

Android: mWeb Chrome

https://github.com/Expensify/App/assets/8878532/3b68bdfd-70f8-48c7-b323-8ef834b3296f

iOS: Native

https://github.com/Expensify/App/assets/8878532/77b74b1e-19ee-4d0f-958c-f24e9ceaed31

iOS: mWeb Safari

https://github.com/Expensify/App/assets/8878532/aa51f8bc-0a00-4c4c-b65a-a1cfe7c26564

MacOS: Chrome / Safari

https://github.com/Expensify/App/assets/8878532/9a512fe4-761c-49cf-bcae-c34279b2184b

MacOS: Desktop

https://github.com/Expensify/App/assets/8878532/04d2274c-1b61-4552-81cb-4acaf3a150ea

[cdanwards]

@cead22 this is ready for review!

[melvin-bot[bot]]

@grgia Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

[cead22]

Thanks! There are conflicts on this branch, once they're resolved I'll bring a C+ to review

[cdanwards]

@cead22 saw the conflicts at end of day today, will be fixing tomorrow morning!

[cead22]

Sounds good, thank you!

[situchan]

Thanks! There are conflicts on this branch, once they're resolved I'll bring a C+ to review

Can I be brought?

[cead22]

@situchan if we can get into a quick update/review cycle with the different timezones to prevent the delays caused in some of the last PRs, I can add you. Please let me know if that's feasible

There's still conflicts

[situchan]

feasible

[cead22]

TS checks are failing

[cdanwards]

@cead22 started to have conversation in open-source here to come to a consensus about how to handle some of the conflicting types.

[cdanwards]

@cead22 checks are now passing!

[situchan]

Code looking good so far. Is this PR supposed to fix https://github.com/Expensify/App/issues/33114 as well?

[cdanwards]

@situchan taking another look at that ticket to double check.

[cdanwards]

@situchan was double checking that the same functions were used for that flow and it looks like it is. I'll update the PR description to add that issue in.

[situchan]

Reviewer Checklist

• [x] I have verified the author checklist is complete (all boxes are checked off).
• [x] I verified the correct issue is linked in the ### Fixed Issues section above
• [x] I verified testing steps are clear and they cover the changes made in this PR
  • [x] I verified the steps for local testing are in the Tests section
  • [x] I verified the steps for Staging and/or Production testing are in the QA steps section
  • [x] I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
  • [x] I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
• [x] I checked that screenshots or videos are included for tests on all platforms
• [x] I included screenshots or videos for tests on all platforms
• [x] I verified tests pass on all platforms & I tested again on:
  • [x] Android: Native
  • [x] Android: mWeb Chrome
  • [x] iOS: Native
  • [x] iOS: mWeb Safari
  • [x] MacOS: Chrome / Safari
  • [x] MacOS: Desktop
• [x] If there are any errors in the console that are unrelated to this PR, I either fixed them (preferred) or linked to where I reported them in Slack
• [x] I verified proper code patterns were followed (see Reviewing the code)
  • [x] I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick).
  • [x] I verified that the left part of a conditional rendering a React component is a boolean and NOT a string, e.g. myBool && <MyComponent />.
  • [x] I verified that comments were added to code that is not self explanatory
  • [x] I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
  • [x] I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
  • [x] I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
  • [x] I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is approved by marketing by adding the Waiting for Copy label for a copy review on the original GH to get the correct copy.
  • [x] I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
  • [x] I verified the JSDocs style guidelines (in STYLE.md) were followed
• [x] If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
• [x] I verified that this PR follows the guidelines as stated in the Review Guidelines
• [x] I verified other components that can be impacted by these changes have been tested, and I retested again (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar have been tested & I retested again)
• [x] I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
• [x] I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
• [x] If a new component is created I verified that:
  • [x] A similar component doesn't exist in the codebase
  • [x] All props are defined accurately and each prop has a /** comment above it */
  • [x] The file is named correctly
  • [x] The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
  • [x] The only data being stored in the state is data necessary for rendering and nothing else
  • [x] For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
  • [x] Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
  • [x] All JSX used for rendering exists in the render method
  • [x] The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
• [x] If any new file was added I verified that:
  • [x] The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
• [x] If a new CSS style is added I verified that:
  • [x] A similar style doesn't already exist
  • [x] The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(theme.componentBG)
• [x] If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
• [x] If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
• [x] If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
• [x] If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
• [x] If the PR modifies the form input styles:
  • [x] I verified that all the inputs inside a form are aligned with each other.
  • [x] I added Design label so the design team can review the changes.
• [x] If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
• [x] If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.
• [x] I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

Screenshots/Videos

Android: Native

https://github.com/Expensify/App/assets/108292595/d67891bd-a12e-4ba1-b976-18d46b52754b

Android: mWeb Chrome

https://github.com/Expensify/App/assets/108292595/bd853a01-7769-46c4-b352-dfe32a973728

iOS: Native

https://github.com/Expensify/App/assets/108292595/b188f73e-cfc4-4c89-beb6-e601ffb9a0c9

iOS: mWeb Safari

https://github.com/Expensify/App/assets/108292595/c45d5225-60bb-4b6c-86a0-a7c38f7a0d97

MacOS: Chrome / Safari

https://github.com/Expensify/App/assets/108292595/56c93af6-e2d4-4fed-bcaa-c1492affb7b9

MacOS: Desktop

https://github.com/Expensify/App/assets/108292595/66625880-ae1e-41b0-84c8-e252a2b46849

[cdanwards]

Looks like typecheck is failing on main.

[situchan]

Looks like typecheck is failing on main.

yes, it's known. Should be fixed soon

[situchan]

Please merge main. Lint fixed now

[situchan]

There's conflict. Just to confirm all comments are addressed?

[cdanwards]

@situchan correct! I'll fix the conflicts.

[cdanwards]

@situchan Anything else I can help you with for your review? Tomorrow is my last day working on the project and I won't be available to make any further changes or updates after that.

[situchan]

I was just waiting for fixing conflict

[cdanwards]

@situchan sorry, hadn't seen that there was a new conflict. It's updated now!

[situchan]

@cdanwards splitBill, splitBillAndOpenReport params are updated again in https://github.com/Expensify/App/pull/35141. created was sandwiched between merchant and category Please update accordingly.

Actually, I don't think MoneyRequestConfirmPage is used anywhere. If you confirmed, please undo all changes in this file. Now we're using IOURequestStepConfirmation

[situchan]

And I see you linked https://github.com/Expensify/App/issues/33114 as well. Then you should add that test case in QA Steps as well.

[cdanwards]

@situchan references were removed in the files you mentioned and I've updated the testing instructions for #33114

[situchan]

Please resolve conflict when you get a chance

[cdanwards]

@situchan conflicts resolved.

[situchan]

Maybe not caused by this PR but minus amount shows in header after creating offline request

[situchan]

https://github.com/Expensify/App/issues/33114 is not fixed yet. Bug still happening:

https://github.com/Expensify/App/assets/108292595/d87ca323-b4f2-438f-b851-9be289faccc0