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. 🙇
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.
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
withPolicyorwithOnyxHigher 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. 🙇