[$250] Add an "Invite" button to the workspace profile page

[jamesdeanexpensify]

Slack convo https://expensify.slack.com/archives/C03U7DCU4/p1733359568246879

Problem Our success depends on the virality of New Expensify, and the ease with which each member can invite other members. Currently, the options to invite other members are quite limited in New Expensify.

Solution Add an "Invite" button to the workspace profile page. It will simply route to the Members page and open the RHP of the invite flow.

Screenshot The button should be here:

It will open up the invite RHP of the Members page here:

cc @neil-marcellini not sure if you want to be assigned or just cc'd, so starting with cc now

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021865113085333240261
• Upwork Job ID: 1865113085333240261
• Last Price Increase: 2024-12-06
• Automatic offers:
• allgandalf | Reviewer | 105228402
• Krishna2323 | Contributor | 105228403

Issue Owner

Current Issue Owner: @allgandalf

[melvin-bot[bot]]

Triggered auto assignment to @adelekennedy (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details. Please add this Feature request to a GH project, as outlined in the SO.

[FitseTLT]

Edited by proposal-police: This proposal was edited at 2024-12-06 18:59:40 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

Add an "Invite" button to the workspace profile page

What is the root cause of that problem?

New Feature

What changes do you think we should make in order to solve the problem?

Add the invite button with the proper icon and copy above this button (the !readOnly check will ensure it will be displayed for policy admins only) here https://github.com/Expensify/App/blob/48b80f65e80d304965cbeb3573d7d6678fb9bd3a/src/pages/workspace/WorkspaceProfilePage.tsx#L272-L274

                                    <Button
                                        onPress={inviteUser}
                                        text={translate('common.invite')}
                                        icon={Expensicons.UserPlus}
                                        style={[styles.mr2]}
                                    />

if needed we can change copy and icon accordingly and clear draft and navigate to the members page like here https://github.com/Expensify/App/blob/48b80f65e80d304965cbeb3573d7d6678fb9bd3a/src/pages/workspace/WorkspaceMembersPage.tsx#L208-L210

const clearInviteDraft = useCallback(() => {
        setWorkspaceInviteMembersDraft(route.params.policyID, {});
        clearDraftValues(ONYXKEYS.FORMS.WORKSPACE_INVITE_MESSAGE_FORM);
    }, [route.params.policyID]);
    const inviteUser = () => {
        clearInviteDraft();
        Navigation.navigate(ROUTES.WORKSPACE_INVITE.getRoute(route.params.policyID));
    };

POC:

### What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future? I don't think it is needed but we can render the profile page and fire press on the new invite button and assert that `Navigation.navigate` is called with the workspace member route param 👍 ### What alternative solutions did you explore? (Optional)

[Krishna2323]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Add an "Invite" button to the workspace profile page

What is the root cause of that problem?

New feat

What changes do you think we should make in order to solve the problem?

Add invite button here: https://github.com/Expensify/App/blob/48b80f65e80d304965cbeb3573d7d6678fb9bd3a/src/pages/workspace/WorkspaceProfilePage.tsx#L271

{isPolicyAdmin && (
                                    <Button
                                        onPress={() => Navigation.navigate(ROUTES.WORKSPACE_INVITE.getRoute(route.params.policyID))}
                                        text={translate('common.invite')}
                                        icon={Expensicons.UserPlus}
                                        style={[styles.mr2]}
                                        accessibilityLabel={translate('common.invite')}
                                    />
                                )}

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?


What alternative solutions did you explore? (Optional)

[Krishna2323]

PROPOSAL UPDATED

• Updated code

[FitseTLT]

Added Code detail

[melvin-bot[bot]]

Job added to Upwork: https://www.upwork.com/jobs/~021865113085333240261

[melvin-bot[bot]]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @allgandalf (External)

[neil-marcellini]

Wow, speedy proposals guys! It's very close on the timing and the proposals are very similar, but ultimately I want to go with @Krishna2323's proposal because I think it's redundant to clear the invite draft as @FitseTLT suggested, since it's cleared here when the page opens. https://github.com/Expensify/App/blob/e99ede55a720b8bbb749912a01ade6f8ebe0cc77/src/pages/workspace/WorkspaceMembersPage.tsx#L419-L429

[melvin-bot[bot]]

📣 @allgandalf 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link Upwork job

[melvin-bot[bot]]

📣 @Krishna2323 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link Upwork job Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻 Keep in mind: Code of Conduct | Contributing 📖

[allgandalf]

🔴 Update: Design team suggested some changes in the implementation and we are working through it

[allgandalf]

♻️ PR is on staging

[melvin-bot[bot]]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot[bot]]

The solution for this issue has been :rocket: deployed to production :rocket: in version 9.0.79-5 and is now subject to a 7-day regression period :calendar:. Here is the list of pull requests that resolve this issue:

• https://github.com/Expensify/App/pull/53719

If no regressions arise, payment will be issued on 2025-01-07. :confetti_ball:

For reference, here are some details about the assignees on this issue:

• @Krishna2323 requires payment automatic offer (Contributor)
• @allgandalf requires payment automatic offer (Reviewer)

[melvin-bot[bot]]

BugZero Checklist: The PR adding this new feature has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [ ] [@allgandalf] Please propose regression test steps to ensure the new feature will work correctly on production in further releases.
• [ ] [@adelekennedy] Link the GH issue for creating/updating the regression test once above steps have been agreed upon.

[allgandalf]

Regression Test Proposal

• Open App > settings > workspaces > select a workspace where you are admin
• On profile page:

Verify there is a invite button beside share button

• Click on the invite button:

Verify you are taken to invite members page and members page is loaded in the background

Do we agree 👍 or 👎

[melvin-bot[bot]]

@jamesdeanexpensify, @neil-marcellini, @adelekennedy, @Krishna2323, @allgandalf Whoops! This issue is 2 days overdue. Let's get this updated quick!

[adelekennedy]

Sorry for the delay here all!

• [x] Contributor: @Krishna2323 paid $250 via Upwork @Krishna2323 the offer expired so I just created a new one

• [x] Contributor+: @allgandalf  owed $250 via Upwork

[Krishna2323]

@adelekennedy offer accepted, thanks!

[adelekennedy]

Just paid!