Implement Send Invoice flow from Global Create #40015

VickyStash · 2024-04-10T15:07:29Z

Details

Implementation of invoice creation flow from Global Create

Fixed Issues

$ #40012
PROPOSAL: N/A

Tests

Verify that no errors appear in the JS console

Note (!): Use staging server by turning it on in Settings -> Troubleshoot -> Use Staging Server
Note (!): the backend has a know issue related to the invoice currency. If you want your test results to not be affected by that issue, set the sender workspace and the invoice currencies to be USD.

Flow 1

Sign in to the app with a workspace admin account
Open Global Create and verify Send Invoice appears in Global Create
Click Send invoice in Global Create:
3.1 Verify “Distance” and “Scan" do not appear in the big number pad (BNP) screen.
3.2 Verify the Currency can be modified
Add an amount -> tap Next
Select the participant, and make sure the participant's step works as expected. Press Next.
Verify all of the information on the confirmation screen looks as expected.
6.1 The sender Workspace is displayed as expected.
6.2 The receiver is displayed as expected.
Tap on the Send from workspace, you should be navigated to the Send from the screen.
Select another workspace, and make sure it works as expected.
tap Send $XX.XX invoice, verify all of the necessary data is created in Onyx.

Flow 2

Repeat Flow 1, but select the same sender and receiver.
Make sure you are navigated to the same room after invoice confirmation.

Flow 3

Sign in to the app with an account without workspaces
Confirm you have no Send Invoice option in Global Create

Offline tests

Same as in the Tests section

QA Steps

Verify that no errors appear in the JS console

Same as in the Tests section

PR Author Checklist

Screenshots/Videos

Android: Native

android1.mp4

Android: mWeb Chrome

android_web1.mp4

iOS: Native

ios1.mp4

iOS: mWeb Safari

ios_web1.mp4

MacOS: Chrome / Safari

web1.mp4

MacOS: Desktop

desktop1.mp4

…nvoices

# Conflicts: # src/pages/iou/request/IOURequestStartPage.js # src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js # src/pages/iou/request/step/withWritableReportOrNotFound.tsx

# Conflicts: # src/components/MoneyTemporaryForRefactorRequestConfirmationList.tsx # src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js # src/pages/iou/request/step/withFullTransactionOrNotFound.tsx # src/pages/iou/request/step/withWritableReportOrNotFound.tsx

src/languages/es.ts

src/styles/index.ts

# Conflicts: # src/libs/API/parameters/index.ts # src/libs/API/types.ts # src/libs/Navigation/types.ts # src/libs/ReportUtils.ts # src/pages/iou/request/IOURequestStartPage.tsx # src/pages/iou/request/step/withFullTransactionOrNotFound.tsx

# Conflicts: # src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js

rezkiy37

Left comments.

src/components/MoneyTemporaryForRefactorRequestConfirmationList.tsx

src/libs/actions/IOU.ts

# Conflicts: # src/components/MoneyTemporaryForRefactorRequestConfirmationList.tsx # src/libs/PolicyUtils.ts # src/libs/actions/IOU.ts # src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js # src/pages/iou/request/step/IOURequestStepConfirmation.tsx

…member

shubham1206agra · 2024-04-29T13:47:53Z

Reviewer Checklist

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

Screenshots/Videos

Android: Native

Android: mWeb Chrome

Screen.Recording.2024-04-29.at.6.40.34.PM.mov

iOS: Native

Screen.Recording.2024-04-29.at.7.07.41.PM.mov

iOS: mWeb Safari

Screen.Recording.2024-04-29.at.6.23.20.PM.mov

MacOS: Chrome / Safari

Screen.Recording.2024-04-29.at.5.46.11.PM.mp4

MacOS: Desktop

Screen.Recording.2024-04-29.at.6.50.35.PM.mov

OSBotify · 2024-04-29T14:05:54Z

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

shawnborton · 2024-04-29T16:44:42Z

Similar comment here as the other PR, I think we might not be using the correct room avatars here? cc @puneetlath

I think the idea was to do this for Workspace to Workspace:

And to do this for Workspace to Individual:

Does that sound right Puneet & @davidcardoza ?

puneetlath · 2024-04-29T17:18:47Z

Yes, that's right. Just like workspace chats we'd have the big sender avatar of the sender's workspace with the small payer user avatar.

VickyStash · 2024-04-29T17:40:55Z

@cristipaval Can we please create a follow-up issue to update the invoice room avatars display?
cc @waterim

Similar comment here as the other PR, I think we might not be using the correct room avatars here? cc @puneetlath

I think the idea was to do this for Workspace to Workspace:

And to do this for Workspace to Individual:

Does that sound right Puneet & @davidcardoza ?

danielrvidal · 2024-04-29T22:13:22Z

Can we please create a follow-up issue to update the invoice room avatars display?

I created the issue here: #41261

Let me know if I need to do anything else.

OSBotify · 2024-04-29T23:33:42Z

🚀 Cherry-picked to staging by https://github.com/francoisl in version: 1.4.67-7 🚀

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

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

OSBotify · 2024-04-30T01:13:39Z

🚀 Deployed to staging by https://github.com/cristipaval in version: 1.4.68-0 🚀

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

OSBotify · 2024-04-30T02:34:27Z

🚀 Cherry-picked to staging by https://github.com/francoisl in version: 1.4.67-7 🚀

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

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

MonilBhavsar · 2024-04-30T05:48:38Z

There's a bug noted mostly coming from this PR #41287. If anyone can please take a look

OSBotify · 2024-05-01T02:37:49Z

🚀 Deployed to production by https://github.com/francoisl in version: 1.4.68-3 🚀

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

roryabraham · 2024-06-05T05:04:50Z

src/libs/API/parameters/SendInvoiceParams.ts

+type SendInvoiceParams = {
+    senderWorkspaceID: string;
+    accountID: number;
+    receiverEmail?: string;


Nice little pro tip: either receiverEmail or receiverInvoiceRoomID is required. So I see why you made them both optional, but it later led to a problem here. So what you can do is use RequireAtLeastOne from type-fest.

Pujan92 · 2024-06-05T13:22:57Z

We missed considering the enabled features of the collect workspace to show in the send invoice confirmation screen which raised an issue here.

shubham1206agra · 2024-08-13T12:16:59Z

src/libs/actions/IOU.ts

+    }
+    const reportPreviewAction = ReportUtils.buildOptimisticReportPreview(chatReport, optimisticInvoiceReport, trimmedComment, optimisticTransaction);
+
+    // STEP 6: Build Onyx Data


We forgot to properly link the reportAction and parent report, which led to bug mentioned #43582

rayane-djouah · 2024-09-10T10:39:41Z

src/libs/API/parameters/SendInvoiceParams.ts

@@ -0,0 +1,19 @@
+type SendInvoiceParams = {


FYI, This PR missed createdIOUReportActionID, createdReportActionIDForThread, reportActionID Send Invoice params and caused these issues: #43797, #43571, #43577, #44992. More info in this proposal: #43797 (comment)

rojiphil · 2024-09-10T17:46:07Z

src/libs/actions/Policy.ts

+ */
+function getPrimaryPolicy(activePolicyID?: string): Policy | undefined {
+    const activeAdminWorkspaces = PolicyUtils.getActiveAdminWorkspaces(allPolicies);
+    const primaryPolicy: Policy | null | undefined = allPolicies?.[activePolicyID ?? ''];


As we did not exclude personal policies while fetching primary policy, this resulted in #46705

rayane-djouah · 2024-10-06T21:04:01Z

src/pages/iou/request/step/IOURequestStepConfirmation.tsx

FYI, this PR caused this issue: #47922 because it missed updating the logic for invoking openDraftWorkspaceRequest to retrieve the policy details (e.g., categories) when changing the invoice sender policy. More info in this proposal: #47922 (comment)

VickyStash added 6 commits April 10, 2024 17:03

Partly update start, participants and confirmation steps to support i…

820276d

…nvoices

Implement send from (select sender) screen

b6689d3

Merge branch 'main' into feature/global-send-invoice

dd8d87b

# Conflicts: # src/pages/iou/request/IOURequestStartPage.js # src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js # src/pages/iou/request/step/withWritableReportOrNotFound.tsx

Implement send invoice functionality

059f946

Fix ts issues after merging main

56e3b9a

VickyStash commented Apr 12, 2024

View reviewed changes

src/languages/es.ts Outdated Show resolved Hide resolved

VickyStash commented Apr 12, 2024

View reviewed changes

src/styles/index.ts Outdated Show resolved Hide resolved

VickyStash added 10 commits April 12, 2024 10:41

Code improvements

23be9e4

IOU file updates and lint fixes

36b645e

Implement buildOptimisticInviteReportAction function

f611c60

Fix navigation

c4b0fdb

Fix invoice creation from global in invoice chat room already exists

ad6829b

Minor lint fix

8895b17

Enable add receipt file feature, lint fixes

7526db1

Minor UI fixes

e8f56c4

Fix translation

66e6a31

rezkiy37 mentioned this pull request Apr 15, 2024

[HOLD for payment 2024-05-08] CRITICAL: [Invoice Rooms] Implement Invoice rooms with individual receivers in the App #40013

Closed

VickyStash added 6 commits April 15, 2024 17:10

Fix report preview message

0c2b802

Merge branch 'main' into feature/global-send-invoice

290eeb4

# Conflicts: # src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js

Minor code improvements

d831b0d

Fix canSendInvoice check

531b3c5

Minor code improvements

dafdc75

Put iouCreatedAction to optimistic data

96aa755

rezkiy37 suggested changes Apr 16, 2024

View reviewed changes

rezkiy37 mentioned this pull request Apr 16, 2024

Implement Invoice rooms with individual receivers #40303

Merged

50 tasks

VickyStash added 3 commits April 17, 2024 09:53

Minor improvements

4d872eb

Update optimistic invoice room creation to include current user as a …

75f8b23

…member

shubham1206agra approved these changes Apr 29, 2024

View reviewed changes

cristipaval approved these changes Apr 29, 2024

View reviewed changes

cristipaval merged commit 84b7ce7 into Expensify:main Apr 29, 2024
16 checks passed

danielrvidal mentioned this pull request Apr 29, 2024

[HOLD for payment 2024-05-09] CRITICAL [Invoice Rooms]: Update invoice rooms to use correct avatars #41261

Closed

github-actions bot mentioned this pull request Apr 29, 2024

Deploy Checklist: New Expensify 2024-04-29 #41266

Closed

74 tasks

lanitochka17 mentioned this pull request Apr 30, 2024

[HOLD for payment 2024-05-14][$250] Send invoice - Hide visibility and room name fields in the Settings page of the Invoice room #41280

Closed

6 tasks

marcaaron mentioned this pull request Apr 30, 2024

[HOLD for payment 2024-05-09] [HOLD for payment 2024-05-08] Send invoice - App returns to member list when selecting a workspace via keyboard #41271

Closed

6 tasks

MonilBhavsar mentioned this pull request Apr 30, 2024

[HOLD for payment 2024-05-22] Send invoice - Right caret disappears after editing and saving details several times #41287

Closed

6 tasks

VickyStash mentioned this pull request Apr 30, 2024

Update invoice rooms to use correct avatars and show correct threads subtitles #41316

Merged

50 tasks

roryabraham reviewed Jun 5, 2024

View reviewed changes

Pujan92 mentioned this pull request Jun 5, 2024

[HIGH][$250] Send invoice - Category is missing in confirmation page but it is present in invoice view #41281

Closed

6 tasks

shubham1206agra reviewed Aug 13, 2024

View reviewed changes

shubham1206agra mentioned this pull request Aug 13, 2024

[$250] Send invoice - Invoice thread name can renamed when created offline #43582

Closed

6 tasks

rayane-djouah reviewed Sep 10, 2024

View reviewed changes

rojiphil reviewed Sep 10, 2024

View reviewed changes

rojiphil mentioned this pull request Sep 10, 2024

[HOLD for Payment 2024-09-02] [$250] Send invoice - Individual workspace is in 'Send from' field #46705

Closed

6 tasks

rayane-djouah reviewed Oct 6, 2024

View reviewed changes

rayane-djouah mentioned this pull request Oct 6, 2024

[$250] Invoice - Category field does not show up on confirmation page after relogin #47922

Closed

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement Send Invoice flow from Global Create #40015

Implement Send Invoice flow from Global Create #40015

VickyStash commented Apr 10, 2024 •

edited

Loading

rezkiy37 left a comment

shubham1206agra commented Apr 29, 2024

OSBotify commented Apr 29, 2024

shawnborton commented Apr 29, 2024

puneetlath commented Apr 29, 2024

VickyStash commented Apr 29, 2024

danielrvidal commented Apr 29, 2024 •

edited

Loading

OSBotify commented Apr 29, 2024

OSBotify commented Apr 30, 2024

OSBotify commented Apr 30, 2024

MonilBhavsar commented Apr 30, 2024

OSBotify commented May 1, 2024

roryabraham Jun 5, 2024

Pujan92 commented Jun 5, 2024

shubham1206agra Aug 13, 2024

rayane-djouah Sep 10, 2024 •

edited

Loading

rojiphil Sep 10, 2024

rayane-djouah Oct 6, 2024

Implement Send Invoice flow from Global Create #40015

Implement Send Invoice flow from Global Create #40015

Conversation

VickyStash commented Apr 10, 2024 • edited Loading

Details

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

rezkiy37 left a comment

Choose a reason for hiding this comment

shubham1206agra commented Apr 29, 2024

Reviewer Checklist

Screenshots/Videos

OSBotify commented Apr 29, 2024

shawnborton commented Apr 29, 2024

puneetlath commented Apr 29, 2024

VickyStash commented Apr 29, 2024

danielrvidal commented Apr 29, 2024 • edited Loading

OSBotify commented Apr 29, 2024

OSBotify commented Apr 30, 2024

OSBotify commented Apr 30, 2024

MonilBhavsar commented Apr 30, 2024

OSBotify commented May 1, 2024

roryabraham Jun 5, 2024

Choose a reason for hiding this comment

Pujan92 commented Jun 5, 2024

shubham1206agra Aug 13, 2024

Choose a reason for hiding this comment

rayane-djouah Sep 10, 2024 • edited Loading

Choose a reason for hiding this comment

rojiphil Sep 10, 2024

Choose a reason for hiding this comment

rayane-djouah Oct 6, 2024

Choose a reason for hiding this comment

VickyStash commented Apr 10, 2024 •

edited

Loading

danielrvidal commented Apr 29, 2024 •

edited

Loading

rayane-djouah Sep 10, 2024 •

edited

Loading