Feature/kuba nowakowski/add empty state to expense view #58795

sumo-slonik · 2025-03-20T13:06:52Z

Explanation of Change

The created PR adds an empty state for the new report view and fixes a bug related to displaying two reports in the workspace.

Fixed Issues

$ #57654
$ #58426
$ #58425

$
PROPOSAL:

Tests

Click the FAB.
Click "Create Report."
Check if the empty state looks good.
Check if only one report appears in the workspace after creating it.

Verify that no errors appear in the JS console

Offline tests

unnecessary

QA Steps

Same as test

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Android: Native

Screen.Recording.2025-03-20.at.14.45.18.mov

Android: mWeb Chrome

Screen.Recording.2025-03-20.at.14.51.28.mov

iOS: Native

Uploading Screen Recording 2025-03-20 at 15.51.45.mov…

iOS: mWeb Safari

Screen.Recording.2025-03-20.at.14.51.28.mov

MacOS: Chrome / Safari

Screen.Recording.2025-03-20.at.14.07.55.mov

MacOS: Desktop

Screen.Recording.2025-03-20.at.14.07.55.mov

sumo-slonik · 2025-03-20T14:23:34Z

src/components/MoneyReportHeader.tsx

@@ -346,6 +346,9 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
        if (hasScanningReceipt) {
            return {icon: getStatusIcon(Expensicons.ReceiptScan), description: translate('iou.receiptScanInProgressDescription')};
        }
+        if (isEmpty) {


I'm not sure if this should be done this way or as the expected optimistic next step. I did it this way because it was easier to implement and didn't require changes in Onyx.

hmm, I'll give it a thought and get back tomorrow

jnowakow

Looks nice but I left some minor comments

src/components/EmptyStateComponent/index.tsx

src/components/MoneyReportHeader.tsx

src/pages/home/report/ReportActionsList.tsx

src/pages/Search/SearchMoneyRequestReportPage.tsx

allgandalf

few comments, please address these

src/components/EmptyStateComponent/index.tsx

src/components/EmptyStateComponent/types.ts

allgandalf · 2025-03-20T18:21:20Z

src/components/MoneyReportHeader.tsx

@@ -199,6 +199,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
    const isAdmin = policy?.role === CONST.POLICY.ROLE.ADMIN;

    const filteredTransactions = transactions?.filter((t) => t) ?? [];
+    const isEmpty = filteredTransactions.length === 0;


areFilteredTransactionsEmpty ? wdyt?

If there are no transactions, it's a good indicator that we should display the empty state. This is possible right after creating reports.

Cool thanks !

actually no @mountiny need your input here we use isEmpty below:

It doesn't affect logic but the name doesn't ring a bell to me what is empty , should we change it or keep it as is

hasNoTransactions might be more explicit

maybe following our guidelines to not negate variable names, it should be !hasTransactions

allgandalf · 2025-03-20T18:21:56Z

src/components/MoneyReportHeader.tsx

@@ -346,6 +346,9 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
        if (hasScanningReceipt) {
            return {icon: getStatusIcon(Expensicons.ReceiptScan), description: translate('iou.receiptScanInProgressDescription')};
        }
+        if (isEmpty) {


hmm, I'll give it a thought and get back tomorrow

src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx

src/languages/es.ts

src/libs/API/parameters/CreateAppReportParams.ts

src/pages/Search/SearchMoneyRequestReportPage.tsx

allgandalf · 2025-03-20T18:28:02Z

src/pages/home/sidebar/FloatingActionButtonAndPopover.tsx

@@ -218,7 +212,8 @@ function FloatingActionButtonAndPopover({onHideCreateMenu, onShowCreateMenu, isT
        isCreateMenuActive && (!shouldUseNarrowLayout || isFocused),
    );

-    const groupPoliciesWithChatEnabled = useMemo(() => getGroupPaidPoliciesWithExpenseChatEnabled(allPolicies as OnyxCollection<OnyxTypes.Policy>), [allPolicies]);
+    const paidGroupPolicies = useMemo(() => Object.values((allPolicies as OnyxCollection<OnyxTypes.Policy>) ?? {}).filter((policy) => isPaidGroupPolicy(policy)), [allPolicies]);


i think we have a util already present to check this one, can you use that?

Which utility are you referring to? Could you point me to the specific one?

Is this what you want:

App/src/libs/PolicyUtils.ts

Lines 436 to 438 in 79dcb22

function getOwnedPaidPolicies(policies: OnyxCollection<Policy> | null, currentUserAccountID: number): Policy[] {

return Object.values(policies ?? {}).filter((policy): policy is Policy => isPolicyOwner(policy, currentUserAccountID ?? CONST.DEFAULT_NUMBER_ID) && isPaidGroupPolicy(policy));

}

allgandalf · 2025-03-20T18:29:54Z

@sumo-slonik this branch has conflicts, can those be fixed please

…xpense-View # Conflicts: # src/pages/home/sidebar/FloatingActionButtonAndPopover.tsx

melvin-bot · 2025-03-21T15:01:44Z

@DylanDylann 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]

shawnborton · 2025-03-28T09:54:36Z

One thing I'm not sure if we covered - there should be a way to delete the report directly from the details view, right? Not sure if we need to consider it in this or not, but just wanted to flag it cc @mountiny @trjExpensify

shawnborton · 2025-03-28T10:22:34Z

Just calling this out for the @Expensify/design team - we have an orphan of "expenses" dangling on the second line but I don't feel like it's so bad we need to fix it since the word itself is wide:

Any strong thoughts?

shawnborton · 2025-03-28T10:23:40Z

Otherwise this is feeling really good to me, nice work!

sumo-slonik · 2025-03-28T10:35:31Z

Just calling this out for the @Expensify/design team - we have an orphan of "expenses" dangling on the second line but I don't feel like it's so bad we need to fix it since the word itself is wide:

if you think it needs to be changed then I will look into it, if not I guess that means we can merge?

shawnborton · 2025-03-28T10:37:47Z

Yeah, it's something we could easily do as a follow up so we don't need to block on it for merge.

allgandalf · 2025-03-28T10:43:47Z

Bug: There should be option to create workspace is not workspace exist:

@shawnborton to confirm, alternative is we should not show create report option if no workspace if present

Screen.Recording.2025-03-28.at.4.13.03.PM.mov

allgandalf · 2025-03-28T10:45:47Z

Bug: If we are opening i report then i would expect the Expense Report tab to get highlighted in the LHN, @mountiny @trjExpensify gut check please

Screen.Recording.2025-03-28.at.4.14.52.PM.mov

allgandalf · 2025-03-28T10:47:09Z

Bug: No option to add expense if report is created offline:
(I think this can be done in a follow up PR)

Screen.Recording.2025-03-28.at.4.16.47.PM.mov

allgandalf · 2025-03-28T10:49:26Z

Bug?: We should have option to Create Report in the workspace chat + icon too right ? @trjExpensify @shawnborton ?

Screen.Recording.2025-03-28.at.4.18.24.PM.mov

shawnborton · 2025-03-28T10:50:53Z

Good catch, I agree we should be able to create a report from the workspace chat.

allgandalf · 2025-03-28T10:56:41Z

Looking at the mocks, I expect the empty view to also open on the chat screen LHN:

But it only opens up on the reports page:

How do i open the empty view in the chats page?

Are the mocks outdated? or am i not aware of the latest conversation 😅

mountiny · 2025-03-28T10:57:32Z

How do i open the empty view in the chats page?

this was agreed to be handled in future once the views are ready we will incorporate them to the Inbox page too

sumo-slonik · 2025-03-28T10:58:00Z

I agree with @allgandalf comments, but I'm not sure they are related to the empty state itself, when it comes to creating reports and expensives it's probably a separate issue

trjExpensify · 2025-03-28T11:20:33Z

Bug: If we are opening i report then i would expect the Expense Report tab to get highlighted in the LHN, @mountiny @trjExpensify gut check please

Fixed in this PR #58903 (comment)

Bug: No option to add expense if report is created offline:
(I think this can be done in a follow up PR)

Agreed, you should be able to do that offline. Can be taken care in a follow-up.

Bug?: We should have option to Create Report in the workspace chat + icon too right ? @trjExpensify @shawnborton ?

Yes you should, and opened in the Inbox when you take that action. I agree with Vit to handle that when the views are ready for the Inbox page.

Bug: There should be option to create workspace is not workspace exist:

@shawnborton to confirm, alternative is we should not show create report option if no workspace if present

Create report should only be shown if you're a member of a group workspace. CC: @SzymczakJ

sumo-slonik · 2025-03-28T11:24:08Z

So if I understand correctly, all the bugs can be handled as a follow-up in the next PRs?

allgandalf · 2025-03-28T11:25:36Z

YESS!!!!, Gimmme 5 to approve this one

sumo-slonik · 2025-03-28T11:26:25Z

yeeeeah 🚀

mountiny · 2025-03-28T11:29:51Z

all the bugs can be handled as a follow-up in the next PRs?

Could @allgandalf List them all so we can put it into one issue and then also let QA know to check that before creating a new ones?

allgandalf

Thanks for all the hard work in this one @sumo-slonik ❤️ , looks good to get this one shipped

Here's the list of bugs:

There is option to Create Report in FAB when no workspaces are present
No create report option in workspace chat
New expenses added from the report view page doesn't get updated in the table of the report view.
No option to add expense if report is created offline
Expense tab is highlighted when report is opened in the search page

@mountiny feel free to create the tracking issue

sumo-slonik · 2025-03-28T11:45:26Z

thanks for the review 🤗

mountiny

One comment left and added those follow ups here #59295

mountiny · 2025-03-28T12:26:37Z

src/libs/NextStepUtils.ts

@@ -229,7 +235,7 @@ function buildNextStep(report: OnyxEntry<Report>, predictedNextStatus: ValueOf<t
            };

            // Scheduled submit enabled
-            if (harvesting?.enabled && autoReportingFrequency !== CONST.POLICY.AUTO_REPORTING_FREQUENCIES.MANUAL) {
+            if (harvesting?.enabled && autoReportingFrequency !== CONST.POLICY.AUTO_REPORTING_FREQUENCIES.MANUAL && isReportContainingTransactions) {


We should add test for NextStepsUtils for this - added here #59295

mountiny · 2025-03-28T12:28:39Z

Since carlos already approved, and design has done a thorough review, I am going to merge this one

OSBotify · 2025-03-28T12:38:52Z

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

github-actions · 2025-03-31T10:42:38Z

🚀 Deployed to staging by https://github.com/mountiny in version: 9.1.21-0 🚀

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

github-actions · 2025-04-01T15:01:41Z

🚀 Deployed to production by https://github.com/grgia in version: 9.1.21-3 🚀

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

SzymczakJ and others added 10 commits March 18, 2025 12:40

fix logic for showing Create report button

17ede8a

modify EmptyStateComponent to accept new styles

b701d06

empty state

ea89c3a

moving widget to correct place

f1fec3c

moving widget to correct place

efd6879

work in progress

c451508

fix bug with duplicate report

4dac413

Merge branch 'main' into @szymczak/Add-empty-State-to-Expense-View

e3fd62d

add header state

013aa45

add header state

89828e5

sumo-slonik commented Mar 20, 2025

View reviewed changes

fix lint

d7c0c5a

sumo-slonik changed the title ~~Feature/kuba nowakowski/add empty state to expense view~~ [DRAFT] Feature/kuba nowakowski/add empty state to expense view Mar 20, 2025

mountiny requested a review from allgandalf March 20, 2025 15:24

jnowakow reviewed Mar 20, 2025

View reviewed changes

This was referenced Mar 20, 2025

[Due for payment 2025-04-08] [Report Creation UI] Create report - App crashes after changing report name #58425

Closed

[Due for payment 2025-04-08] [Report Creation UI] Create report - There are two expense previews after creating a new report #58426

Closed

allgandalf suggested changes Mar 20, 2025

View reviewed changes

changes after review

f89ed26

sumo-slonik changed the title ~~[DRAFT] Feature/kuba nowakowski/add empty state to expense view~~ Feature/kuba nowakowski/add empty state to expense view Mar 21, 2025

Merge branch 'main' into feature/kuba-nowakowski/Add-empty-State-to-E…

11a2d5c

…xpense-View # Conflicts: # src/pages/home/sidebar/FloatingActionButtonAndPopover.tsx

sumo-slonik marked this pull request as ready for review March 21, 2025 15:01

sumo-slonik requested review from a team as code owners March 21, 2025 15:01

melvin-bot bot requested review from DylanDylann and removed request for a team March 21, 2025 15:01

mountiny assigned sumo-slonik Mar 21, 2025

trjExpensify removed the request for review from DylanDylann March 21, 2025 16:26

allgandalf approved these changes Mar 28, 2025

View reviewed changes

melvin-bot bot requested a review from mountiny March 28, 2025 11:41

mountiny mentioned this pull request Mar 28, 2025

[Due for payment 2025-04-23] [Due for payment 2025-04-16] [Report Creation UI] Follow up tasks #59295

Closed

7 tasks

mountiny approved these changes Mar 28, 2025

View reviewed changes

mountiny merged commit 6f51252 into Expensify:main Mar 28, 2025
18 checks passed

github-actions bot mentioned this pull request Mar 31, 2025

Deploy Checklist: New Expensify 2025-03-31 #59334

Closed

62 tasks

melvin-bot bot mentioned this pull request Apr 1, 2025

[Due for payment 2025-04-08] [Report Creation UI] Add empty State to Expense View and Expense Preview #57654

Closed

	function getOwnedPaidPolicies(policies: OnyxCollection<Policy> \| null, currentUserAccountID: number): Policy[] {
	return Object.values(policies ?? {}).filter((policy): policy is Policy => isPolicyOwner(policy, currentUserAccountID ?? CONST.DEFAULT_NUMBER_ID) && isPaidGroupPolicy(policy));
	}

Feature/kuba nowakowski/add empty state to expense view #58795

Feature/kuba nowakowski/add empty state to expense view #58795

Uh oh!

Conversation

sumo-slonik commented Mar 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Explanation of Change

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jnowakow left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

allgandalf left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

allgandalf commented Mar 20, 2025

Uh oh!

melvin-bot bot commented Mar 21, 2025

Uh oh!

shawnborton commented Mar 28, 2025

Uh oh!

shawnborton commented Mar 28, 2025

Uh oh!

shawnborton commented Mar 28, 2025

Uh oh!

sumo-slonik commented Mar 28, 2025

Uh oh!

shawnborton commented Mar 28, 2025

Uh oh!

allgandalf commented Mar 28, 2025

Uh oh!

allgandalf commented Mar 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

allgandalf commented Mar 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

allgandalf commented Mar 28, 2025

sumo-slonik commented Mar 20, 2025 •

edited

Loading

allgandalf commented Mar 28, 2025 •

edited

Loading

allgandalf commented Mar 28, 2025 •

edited

Loading

allgandalf commented Mar 28, 2025 •

edited

Loading

mountiny commented Mar 28, 2025 •

edited

Loading

trjExpensify commented Mar 28, 2025 •

edited

Loading