[Awaiting Payment 17th April] [Wave Collect][QBO] Implement Accounting page

[hayata-suenaga]

Implement a new page called "Accounting page" for the QuickBooks Online (QBO) connection project.

QBO is a well-known accounting software that Expensify supports integration with. Once the user establishes a connection to QBO, Expensify exports expense reports, also known as money requests, to QBO. This enables expenses, referred to as transactions in QBO terminology, to appear in the accounting software.

Your task is to implement the Accounting page where the user can set up and configure the accounting integration with QBO.

This page has two states: before connection and after connection.

• Before the connection, the page presents the option to connect to the QBO.
• After the connection is established, the page shows the main menu items. These items represent different configurations that the user can adjust concerning the QBO connection. When a menu item is clicked, the user is taken to another page where they can modify the configuration. This task does not include creating these individual configuration pages.

Refer to the mockups in the Production Specifications section below for visual information.

Product Specifications

1

2

3

4

5

Design documentation excerpts

code skeleton

supporting text and error handling

menu items

connection setup button

Assets

Integration.Logo.Icons.zip

Notes

The tasks in the QBO project is done in parallel, including the work in the backend code. Thera are some functions or navigations that are incomplete at the time of this writing. This section lists out these items.

• QBO setup (i.e. synchronization) logic.
  When a connection with QBO isn't established, the Accounting page displays a user interface with a button to set up the connection. If the logic to establish the connection isn't available yet, leave the button's callback blank.

• A function to check if a connection has been established.
  The Account page displays different UIs based on the existence of a connection. This can be verified by examining the policy object, which can be subscribed to using withPolicy or withOnyx Higher Order Components. However, if the logic to establish a connection with QBO is unavailable, the policy object will lack connection information. In such a scenario, declare a temporary boolean variable within the component to toggle between the two states of being connected and not connected.

• Information about the synchronization state
  During QBO connection and synchronization, the progress should be displayed on the Accounting page (refer to the above excerpts for more details). However, this progress information comes from data stored in Onyx. Since the actual connection might not be ready yet, you need to create mock data for this. This also applies to the error state of synchronization, if any. Please contact @hayata-suenaga for more details.

• Navigation when the menu item is clicked
  Certain configuration pages linked from the Accounting page might not be available. If this happens, leave the callback blank. This allows for navigation logic to be added later. If the PR is completed before individual pages are implemented, we may merge the PR with these blank callbacks.

Please ask questions

This task comes with a lengthy list of specifications. Please direct any questions you may have to @hayata-suenaga. You most likely will have some. 🙇

[melvin-bot]

Triggered auto assignment to @abekkala (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details.

[abekkala]

@hayata-suenaga I have to say I'm a bit lost on this one:

What exactly is:

Your task is to implement the Accounting page where the user can set up and configure the accounting integration with QBO.

Implement, how?

[hayata-suenaga]

@abekkala this is an engineering issue. A CallStack engineer is going to work on it next week. The specifications are written in the design doc, and there are screenshots of the design doc in the OP.

You're auto-assigned to this issue because of the NewFeature flag. You will handle the payments to a C+ that is going to review the PRs once they're ready.

However, this might take some time. Please feel free to un-assign yourself until payments are needed. 🙇

[hayata-suenaga]

@teneeto, please review the requirements of this GH ticket and don't hesitate to ask questions. The requirements are somewhat complex, so any clarifying questions are welcome 😄

I look forward to working with you 🚀

[teneeto]

Hi @hayata-suenaga apologies for the slow response here, The flow and explanation looks quite straight forward for now.

However, I understand we could run into some deep concerns as we progress with implementation, which I believe you'll guide and assist along the way.

I'll move discussion back to the slack thread

[hayata-suenaga]

@teneeto, thank you for reviewing the requirements and for your questions 😄

I answer your questions in Slack here in this comment.

1. I see we have to toggle on the Accounting Feature on the integration section of the More Features. Where do we find the initial QBO connection setup Page - what workspace has the more features? (I couldn't find it).

In short, you don't need to concern yourself with this aspect. There's no need to implement the 'More Features' page or the logic to toggle the accounting feature. Assume that the information on whether the accounting feature is activated for the workspace is available on the 'Accounting' page, which you will be implementing. For now, implement the routing logic regardless of whether the accounting feature is on or off. I'll continue to provide updates on this.

2. For Confirmation, Xero is not within the scope of this implementation, right?

That's correct 👍 Xero is not in the scope of this GH ticket.

3. We Will need all icon assets.

I'll provide the icon assets shortly.

4. We need any API calls ? - how do we receive/discuss endpoints? on slack?

There's no need to call the API for this GitHub ticket's pull request, as it will initially be under a dark launch. Although we'll deploy the code, it won't be in use immediately. Please refer to the "Note" section in the initial post, the relevant parts of which are copied below for convenience.

When a connection with QBO isn't established, the Accounting page displays a user interface with a button to set up the connection. If the logic to establish the connection isn't available yet, leave the button's callback blank.

5. Is it possible we have a design doc. - screenshots are too small here.

The doc is now shared with your CallStack email address 😄

[teneeto]

Thank you @hayata-suenaga

[abekkala]

Ah I see I'm only applied via new feature to process payments.
Based on @hayata-suenaga's comment above - I'm going to unassign for now

[hayata-suenaga]

@teneeto if you could share your daily progress in this GH ticket, we'd appreciate it 🙇 😄

Also, in the original post of this GH ticket, I attached the zipped folder for the assets you need for the import page. It's in the section, "Assets".

[teneeto]

UPDATE📍
Hi @hayata-suenaga I have created the navigation and accounting page for QBO integration with a Draft_PR

[teneeto]

@hayata-suenaga I have added all possible initial components and flow, next is to set up a connection for QBO and authorize the sharing of data between Expensify and Intuit.

I have also opened PR for soft review - any early tips on how to set up a connection for QBO are welcomed. 😉

[hayata-suenaga]

great! thank you for the update! I'll take a look at your PR today

[trjExpensify]

@dylanexpensify assigning yah as #39954 was closed in favour of this and there's no BZ. Hit staging 5 days ago.

[dylanexpensify]

Sounds good @trjExpensify!!

[trjExpensify]

Can you pay this one out and close it? Thanks!

[dylanexpensify]

Yes! Sorry, was OOO! Finishing today 👍

[dylanexpensify]

Payment summary:

• Contributor: @teneeto
• Contributor+: @s77rt $250

Please request or apply here!

[s77rt]

@dylanexpensify This should be $250 or does this include other PRs? @teneeto is a contractor (not paid via Upwork)

[dylanexpensify]

@s77rt updated!

[dylanexpensify]

Invited to job @s77rt!

[s77rt]

@dylanexpensify Applied!

[dylanexpensify]

Offer sent!

[inwake]

Contributor details
Expensify account email: [will create one]
Upwork Profile Link: https://www.upwork.com/freelancers/vitaliyd33

Hi @hayata-suenaga and the Expensify team,

I've been closely following the [Wave Collect][QBO] Implement Accounting page project and have been diligently preparing a proposal for the task. However, I've noticed that the issue is currently in the "Awaiting Payment" status, and I'm a bit confused about the workflow and whether new proposals are still being considered.

Given the current status of the project, I wanted to reach out and clarify if it would still be beneficial for me to submit my proposal. I've invested a significant amount of time in understanding the requirements and drafting a comprehensive solution, and I'm eager to contribute to the project if there's still an opportunity to do so.

Could you please provide some guidance on whether the project is still open to new proposals, or if it has indeed moved past the proposal stage? I want to ensure that my efforts align with the current needs of the project and that any contribution I make will be timely and relevant.

Thank you for your time and assistance. I look forward to your response and the possibility of contributing to this and future projects.

Best regards,

• Vitaliy

[melvin-bot]

📣 @inwake! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[dylanexpensify]

Hi @inwake! Thanks for reaching out! We've had this one done, so no new proposals are needed. We just need to finish it by paying the contracts out. Thanks for your interest here, and please keep looking at our available bugs!

[s77rt]

@dylanexpensify Accepted! Thanks!

[dylanexpensify]

Wahoo!

[dylanexpensify]

Done!