Track Expense flow

[shubham1206agra]

Details

Fixed Issues

$ #36362

Tests

Test 1

1. Go to Self DM report.
2. Click on + Button.
3. Select Track Expense.
4. Enter the amount (Test using different currencies too).
5. Click on Next (Confirm the amount shown in the confirmation page matches).
6. [Optional] Click on 3 dots > Add receipt to add a receipt.
7. Click on Track Expense at the confirmation step.

Test 2

1. Go to Self DM report.
2. Click on + Button.
3. Select Track Expense.
4. Go to Scan tab.
5. Upload a receipt.
6. Click on Track Expense at the confirmation step.

Test 3

1. Click on FAB.
2. Select Track Expense.
3. Enter the amount (Test using different currencies too).
4. Click on Next (Confirm the amount shown in the confirmation page matches).
5. [Optional] Click on 3 dots > Add receipt to add a receipt.
6. Click on Track Expense at the confirmation step.

Test 4

1. Click on FAB Button.
2. Select Track Expense.
3. Go to Scan tab.
4. Upload a receipt.
5. Click on Track Expense at the confirmation step.

Test 5 (Delete Track Expense)

1. Go to the Track Expense you created.
2. Press on 3 dot menu.
3. Click on Delete expense.
4. Confirm the delete.
5. Verify that the track expense is deleted and you are navigated to self DM.

• Verify that no errors appear in the JS console

Offline tests

Same as Tests

QA Steps

Same as Tests.

PR Author Checklist

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

Screenshots/Videos

Screenshots for Design Reference

Android: Native

Screen.Recording.2024-03-20.at.7.35.56.PM.mov

Android: mWeb Chrome

Screen.Recording.2024-03-20.at.6.31.25.PM.mov

iOS: Native

Screen.Recording.2024-03-20.at.7.19.00.PM.mov

iOS: mWeb Safari

Screen.Recording.2024-03-20.at.6.18.28.PM.mov

MacOS: Chrome / Safari

Screen.Recording.2024-03-20.at.5.44.15.PM.mp4

Screen.Recording.2024-03-20.at.5.46.49.PM.mp4

MacOS: Desktop

Screen.Recording.2024-03-20.at.7.11.40.PM.mov

[shubham1206agra]

@thienlnam I have completed preliminary flow. I want to HOLD this on #37165 as I want to pick some common components from there.Mainly for To section in Confirmation Step.

[thienlnam]

Thanks, just a couple notes for far - it looks the track flow doesn't yet auto-select the self-DM as destination?

[shubham1206agra]

Thanks, just a couple notes for far - it looks the track flow doesn't yet auto-select the self-DM as destination?

It does select. You need to set selfDMReportID in Account Onyx key.

[thienlnam]

Couple comments so far, also looks like we are failing some ts typechecks

[shubham1206agra]

@thienlnam I am thinking of disabling the track expense in workspace temporarily. Will re-enable it in a follow up PR. This is basically for reason that the logic for deleting the request / updating the amount gets complicated, and this feature details in workspace is not flushed through completely. Since the plan was enable this feature to all users in near future, I think, delivering the workspace track expense incomplete may not have best outcome for users.

[thienlnam]

Sure that works, we can create another issue for this to get added into the workspace

[shubham1206agra]

@ishpaul777 Can you start doing preliminary tests here? We want to ship this PR by friday.

[ishpaul777]

Sure! Will start in 1-2 hours

[ishpaul777]

Just so you know i have already started testing, will spend some time testing for the flow before looking deep in code.

[thienlnam]

Awesome, thanks - there's a few things that will need BE updates. I'm planning on making issues so we can track those but it doesn't need to block this PR.

[thienlnam]

@shawnborton / @dubielzyk-expensify The beta takes an hour to kick in, are you able to see the option now?

[shawnborton]

Still no. Are you able to check/add me to the beta in case I messed it up?

[dannymcclain]

I am able to see it! I just used the web ad hoc link. 🤷‍♂️

The first request I tried to do was just a manual $5 request and I got this error:

Then I tried again and it seemed to work fine?

Then I tried a receipt scan and that seems to be working (still scanning):

Then I went back and deleted the request that had the error... and instead of going away I just see the skeleton preview (top of this screenshot):

I did a couple more manual requests just filling out random different things like description and merchant and that all seemed to work. Although I noticed that I can't edit any part of the expense after creating it. I feel like I would expect to be able to at the very least edit the description/merchant?

[thienlnam]

Ah yeah that is currently known
#37282 (review)
Editing and deleting need some additional changes in the BE

[thienlnam]

Merging so we can get this project back on track for the may release - please let us know if there are other design items that look off. We're keeping the beta on until we get these BE issues fixed

[melvin-bot]

@thienlnam looks like this was merged without a test passing. Please add a note explaining why this was done and remove the Emergency label if this is not an emergency.

[thienlnam]

Tests were passing 😵

[OSBotify]

🚀 Deployed to staging by https://github.com/thienlnam in version: 1.4.56-0 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

[OSBotify]

🚀 Deployed to production by https://github.com/yuwenmemon in version: 1.4.56-8 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

[ikevin127]

Because optimisticData related to the ONYXKEYS.NVP_QUICK_ACTION_GLOBAL_CREATE onyx key was missing from the buildOnyxDataForTrackExpense, this caused the quick action to not update while offline (optimistically):

• [HOLD for payment 2024-05-02] [$250] Track expense - Track expense shortcut doesn't update to the correct one in offline mode #40097

[Ollyws]

The early return here was preventing the modal from closing immediately (#39862) we fixed this in #43020

[alitoshmatov]

If merchant present comment should be merchant rather than transaction description #49993