[HOLD for payment 2024-06-13] [$250] [Xero] [QBO] Improve the empty state of pages when there are no imported accounts found

[trjExpensify]

Coming from here

Problem: When there’s no imported accounts found, we show an ambiguous empty page that makes it appear as though something is broken. When in fact, the page is empty because the accounts we're looking for don't exist in the accounting solution to import into Expensify.

Solution:
Add an illustration to the pages with an explainer to explain the lack of accounts being seen.

Copy

No accounts found
Add the account in and sync the connection again

Pages
/quickbooks-online/export/out-of-pocket-expense/account-select
/quickbooks-online/export/company-card-expense-account/account-select
/quickbooks-online/export/company-card-expense-account/default-vendor-select
/quickbooks-online/account-selector
/quickbooks-online/invoice-account-selector
/xero/export/bank-account-select
xero/advanced/bill-payment-account-selector
/xero/advanced/invoice-account-selector

CC: @Expensify/design @lakchote @hayata-suenaga

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01c99a15ca9b588fc0
• Upwork Job ID: 1793697280179924992
• Last Price Increase: 2024-05-23

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @trjExpensify

[melvin-bot]

Current assignee @trjExpensify is eligible for the NewFeature assigner, not assigning anyone new.

[melvin-bot]

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

[melvin-bot]

Current assignee @s77rt is eligible for the External assigner, not assigning anyone new.

[trjExpensify]

@s77rt all yours!

[shawnborton]

We already have the telescope in product - it's shown if you try to make a room but don't have a workspace:

So we can just grab that same asset for this.

[shawnborton]

Feels a little tiny over there though, so maybe we can update the size in both places - maybe 136x144?

[dannymcclain]

Feels a little tiny over there though, so maybe we can update the size in both places - maybe 136x144?

Totally agree! My first thought when I saw your screenshot was "Looks like a telescope for ANTS!" 😆

🔭 🐜

[shawnborton]

That's a solid emoji sequence

[abzokhattab]

Proposal

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

Improve the empty state of pages when there are no imported accounts found

What is the root cause of that problem?

New Feature

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

• we need to use the same blocking view component that is used inside the create room workspace page
  

  App/src/pages/workspace/WorkspaceNewRoomPage.tsx

  Lines 228 to 235 in 9114d95

  	<BlockingView
  	icon={Illustrations.TeleScope}
  	iconWidth={variables.emptyWorkspaceIconWidth}
  	iconHeight={variables.emptyWorkspaceIconHeight}
  	title={translate('workspace.emptyWorkspace.notFound')}
  	subtitle={translate('workspace.emptyWorkspace.description')}
  	shouldShowLink={false}
  	/>

  but both the title and the subtitle should be changed according to each page
• this component should show up if no accounts are found meaning the sections data length is zero below, else the selection list should be displayed.
  

  App/src/pages/workspace/accounting/qbo/export/QuickbooksOutOfPocketExpenseAccountSelectPage.tsx

  Lines 75 to 81 in 678b68f

  	headerContent={<Text style={[styles.ph5, styles.pb5]}>{translate('workspace.qbo.accountsPayableDescription')}</Text>}
  	sections={[{data}]}
  	ListItem={RadioListItem}
  	onSelectRow={selectExportAccount}
  	initiallyFocusedOptionKey={data.find((mode) => mode.isSelected)?.keyForList}
  	/>
  	</ScreenWrapper>

this modification should be added to all other pages that contain the accounts selector

Optional: the icon size inside the blocking view could be changed here to 136x144 as requested in this comment

[s77rt]

@abzokhattab Thanks for your interest and quick proposal! However this issue does not have the Help Wanted label. I am taking this one.

[abzokhattab]

No problem go ahead @s77rt

[s77rt]

PR is ready for review

[trjExpensify]

Merged, awaiting a deploy of the freeze branch later today.

[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 1.4.79-11 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• SelectionList: Added listEmptyContent prop + QBO: Added an illustration for empty lists (when there is no accounts found) #42561

If no regressions arise, payment will be issued on 2024-06-13. 🎊

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

• @s77rt 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:

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

[s77rt]

I don't think this requires a regression test

[trjExpensify]

Agreed. Payment summary as follows:

• $250 to @s77rt for the C+ review

Offer sent!

[s77rt]

@trjExpensify Accepted! Thanks! I believe @rushatgabhane is due payment for PR review

[melvin-bot]

Payment Summary

Upwork Job

• ROLE: @s77rt paid $(AMOUNT) via Upwork (LINK)

BugZero Checklist (@trjExpensify)

• 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/1793697280179924992/hired)
• I have paid out the Upwork contracts or cancelled the ones that are incorrect
• I have verified the payment summary above is correct

[melvin-bot]

@pecanoro, @trjExpensify, @s77rt Eep! 4 days overdue now. Issues have feelings too...

[trjExpensify]

@trjExpensify Accepted! Thanks! I believe @rushatgabhane is due payment for PR review

@rushatgabhane was paid already, settled up with you. Closing!