[HOLD for payment 2024-12-16] [$250] Update empty state for workspace feeds

[JmillsExpensify]

As part of an on-going update throughout the app, we are updating the empty state of workspace feeds to include the call-to-action directly within the empty state modal, like so.

To summarize this empty state/action framework, it works like this:

• If there is an empty state and we want you to take an action (in this case assign your first card), we put a (green) button in the empty state
• Once you take the action (assign one card), we move the (green) button to where it's located now in the top right of the page.

cc @joekaufmanexpensify in case you want to assign yourself. I'm going to keep the internal label on this issue since it's since in development and hard to test.

Issue Owner

Current Issue Owner: @

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021863095443820024887
• Upwork Job ID: 1863095443820024887
• Last Price Increase: 2024-12-01

Issue Owner

Current Issue Owner: @jliexpensify

[melvin-bot]

Triggered auto assignment to @jliexpensify (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.

[mkzie2]

Edited by proposal-police: This proposal was edited at 2024-11-25 23:03:21 UTC.

Proposal

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

Update empty state for workspace feeds

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 Assign card button to WorkspaceCompanyCardsFeedAddedEmptyPage using buttons prop of EmptyStateComponent where handleAssignCard is taken from here.

We might need to add icon prop to EmptyStateComponent's Button and implement it here.

buttons={[{
    success: true,
    buttonText: translate('workspace.companyCards.assignCard'),
    buttonAction: handleAssignCard,
    icon: Expensicons.Plus,
}]}

As my observation, we also need to update the prompt from Get started by assigning your first card to a member. to Get started by assigning your first card.

[joekaufmanexpensify]

@mkzie2 This is part of an ongoing project and is not currently soliciting volunteers (and doesn't have the Help wanted label). Please reference the contributing guidelines if you have any Q's!

[joekaufmanexpensify]

cc @joekaufmanexpensify in case you want to assign yourself. I'm going to keep the internal label on this issue since it's since in development and hard to test.

Awesome. I will work on getting this assigned out!

[mountiny]

@allgandalf, @dukenv0307 or @DylanDylann would you like to implement this change?

[dukenv0307]

@mountiny I can help

[DylanDylann]

I can help as c+

[DylanDylann]

@JmillsExpensify @dukenv0307 Do we also apply this design for direct feed?

cc @mountiny

[dukenv0307]

@DylanDylann I handle the logic in WorkspaceCompanyCardPage, so I think it will cover both custom and direct feeds. Please correct me If I'm wrong

[mountiny]

@DylanDylann @dukenv0307 yes, majority of these changes should work same for both direct and custom feeds

[JmillsExpensify]

Agreed

[joekaufmanexpensify]

Left a comment on the PR, I don't think the current solution did exactly what we were intending.

[mountiny]

Discussing here, seems like C+ cannot reproduce your issue

[mountiny]

@dukenv0307 @DylanDylann coming from here https://expensify.slack.com/archives/C06ML6X0W9L/p1733253221396639?thread_ts=1733200020.036699&cid=C06ML6X0W9L seems like @joekaufmanexpensify is still able to reproduce using direct feed on mobile. Can you please have a look?

[melvin-bot]

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

[melvin-bot]

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

• fix: remove cardList when showing assign card button #53538

If no regressions arise, payment will be issued on 2024-12-16. 🎊

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

• @dukenv0307 requires payment through NewDot Manual Requests
• @DylanDylann requires payment (Needs manual offer from BZ)

[melvin-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:

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

[jliexpensify]

Checking here - does @dukenv0307 require payment?

[jliexpensify]

Also bumping @DylanDylann for the checklist

[DylanDylann]

BugZero Checklist:

• [Contributor] Classify the bug:

Bug classification

Source of bug:

• 1a. Result of the original design (eg. a case wasn't considered)
• 1b. Mistake during implementation
• 1c. Backend bug
• 1z. Other:

Where bug was reported:

• 2a. Reported on production
• 2b. Reported on staging (deploy blocker)
• 2c. Reported on both staging and production
• 2d. Reported on a PR
• 2z. Other:

Who reported the bug:

• 3a. Expensify user
• 3b. Expensify employee
• 3c. Contributor
• 3d. QA
• 3z. Other:

• [Contributor] 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: No because this seems like a case wasn't considered in the document

• [Contributor] If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source 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:

• [Contributor] If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.

• [BugZero Assignee] Create a GH issue for creating/updating the regression test once above steps have been agreed upon.

  Link to issue:

Regression Test Proposal

Test 1

1. Go to a new WS
2. Open the company card page
3. Add new Feed successful
4. The empty state view displays with a green Assign Card button in the empty state
5. Click on Assign Card button in the empty state and complete the assign card flow
6. The green Assign Card button shows at the top right of page

Test 2

1. Go to a new WS
2. Open the company card page
3. Add new Feed
4. And the feed is pending
5. The App shows a greyed assign card button at the top right of the page

Do we agree 👍 or 👎

[jliexpensify]

For Step 6, should it be:

The green Assign Card button shows at the top right of page

because its not really moving right?

[jliexpensify]

^ @DylanDylann sorry forgot to tag you

[DylanDylann]

@jliexpensify Updated

[melvin-bot]

Payment Summary

Upwork Job

• Reviewer: @dukenv0307 owed $250 via NewDot
• ROLE: @DylanDylann paid $(AMOUNT) via Upwork (LINK)

BugZero Checklist (@jliexpensify)

• I have verified the correct assignees and roles are listed above and updated the neccesary manual offers
• I have verified that there are no duplicate or incorrect contracts on Upwork for this job (https://www.upwork.com/ab/applicants/1863095443820024887/hired)
• I have paid out the Upwork contracts or cancelled the ones that are incorrect
• I have verified the payment summary above is correct

[dukenv0307]

@jliexpensify No need for payment here. The project issue will be paid later

[jliexpensify]

Thanks everyone, closing this!