[HOLD for payment 2024-07-22] [HOLD for payment 2024-07-17] [#Wave-Control: Add NetSuite] Settings Configuration in NewDot: Advanced #43443

Tracking Issue: https://github.com/Expensify/Expensify/issues/377671

Design Doc Section: https://docs.google.com/document/d/1WubNv_VAv78IxG4FKsi9aS0pWESfWvUYbqBAAy5b4bc/edit#heading=h.1vf74ijo8qpn

(High-Level Section)

Routes

1. Route: /settings/workspaces/{policyID}/accounting/netsuite/advanced

• PageComponent: NetSuiteAdvancedPage
• Calls / Parameters:
  • Auto-sync
    • Calls UpdateNetSuiteAutoSync
    • Parameters:
      • enabled - TRUE / FALSE, depending on the toggle
    • Config that will be affected - config.syncOptions.hasChosenAutoSyncOption
    • The pendingAction for the OfflineWithFeedback component will be policy.pendingFields.syncOptions
  • Sync reimbursed reports
    • Calls UpdateNetSuiteSyncReimbursedReports
    • Parameters:
      • enabled - TRUE / FALSE, depending on the toggle
    • Config that will be affected - config.syncOptions.syncReimbursedReports
    • The pendingAction for the OfflineWithFeedback component will be policy.pendingFields.syncOptions
  • Invite employees and set approvals
    • Calls UpdateNetSuiteSyncPeople
    • Parameters:
      • enabled - TRUE / FALSE, depending on the toggle
    • Config that will be affected - config.syncOptions.syncPeople
    • The pendingAction for the OfflineWithFeedback component will be policy.pendingFields.syncOptions
  • Auto-create employees/vendors
    • Calls UpdateNetSuiteAutoCreateEntities
    • Parameters:
      • enabled - TRUE / FALSE, depending on the toggle
    • Config that will be affected - config.autoCreateEntities
    • The pendingAction for the OfflineWithFeedback component will be policy.pendingFields.autoCreateEntities
  • Enable newly imported categories
    • Calls UpdateNetSuiteEnableNewCategories
    • Parameters:
      • enabled - TRUE / FALSE, depending on the toggle
    • Config that will be affected - config.syncOptions.enableNewCategories
    • The pendingAction for the OfflineWithFeedback component will be policy.pendingFields.syncOptions

2. Route: /settings/workspaces/{policyID}/accounting/netsuite/advanced/reimbursement-account/select

• PageComponent: NetSuiteReimbursementAccountSelectPage
• API Call/Parameters:
  • UpdateNetSuiteReimbursementAccountID
    • Parameters:
      • bankAccountID - one of the payable accounts available (present under data.payableList)
    • Config that will be affected - config.reimbursementAccountID
    • The pendingAction for the OfflineWithFeedback component will be policy.pendingFields.reimbursementAccountID

3. Route: /settings/workspaces/{policyID}/accounting/netsuite/advanced/collection-account/select

• PageComponent: NetSuiteCollectionAccountSelectPage
• API Call/Parameters:
  • UpdateNetSuiteCollectionAccount
    • Parameters:
      • bankAccountID - one of the payable accounts available (present under data.payableList)
    • Config that will be affected - config.collectionAccount
    • The pendingAction for the OfflineWithFeedback component will be policy.pendingFields.collectionAccount

4. Route: /settings/workspaces/{policyID}/accounting/netsuite/advanced/report-approval-level/select

• PageComponent: NetSuiteExpenseReportApprovalLevelSelectPage
• API Call/Parameters:
  • UpdateNetSuiteExportReportsTo
    • Parameters:
      • value - one of the values in ExpenseReportApprovalLevelTypeEnum (REPORTS_APPROVED_NONE, REPORTS_SUPERVISOR_APPROVED, REPORTS_ACCOUNTING_APPROVED, REPORTS_APPROVED_BOTH)
    • Config that will be affected - config.syncOptions.exportReportsTo
    • The pendingAction for the OfflineWithFeedback component will be policy.pendingFields.syncOptions

5. Route: /settings/workspaces/{policyID}/accounting/netsuite/advanced/vb-approval-level/select

• PageComponent: NetSuiteVendorBillApprovalLevelSelectPage
• API Call/Parameters:
  • UpdateNetSuiteExportVendorBillsTo
    • Parameters:
      • value - one of the values in VendorBillApprovalLevelTypeEnum (VENDOR_BILLS_APPROVED_NONE, VENDOR_BILLS_APPROVAL_PENDING, VENDOR_BILLS_APPROVED)
    • Config that will be affected - config.syncOptions.exportVendorBillsTo
    • The pendingAction for the OfflineWithFeedback component will be policy.pendingFields.syncOptions

6. Route: /settings/workspaces/{policyID}/accounting/netsuite/advanced/je-approval-level/select

• PageComponent: NetSuiteJournalEntryApprovalLevelSelectPage
• API Call/Parameters:
  • UpdateNetSuiteExportJournalsTo
    • Parameters:
      • value - one of the values in JournalEntryApprovalLevelTypeEnum (JOURNALS_APPROVED_NONE, JOURNALS_APPROVAL_PENDING, JOURNALS_APPROVED)
    • Config that will be affected - config.syncOptions.exportJournalsTo
    • The pendingAction for the OfflineWithFeedback component will be policy.pendingFields.syncOptions

7. Route: /settings/workspaces/{policyID}/accounting/netsuite/advanced/approval-account/select

• PageComponent: NetSuiteApprovalAccountSelectPage
• API Call/Parameters:
  • UpdateNetSuiteApprovalAccount
    • Parameters:
      • value - one of the payable accounts available (present under data.payableList) or APPROVAL_ACCOUNT_DEFAULT
    • Config that will be affected - config.approvalAccount
    • The pendingAction for the OfflineWithFeedback component will be policy.pendingFields.approvalAccount

Refer to here and here in order to get the corresponding routes and parameters.
We'll discuss the Export and Advanced Sections together, as these are very similar in design.

The set of pages needed for the export configurations is similar to that for the import configurations.

The first part “UI Components” explains the UI components and their arrangement on the pages. The second part, “Data Retrieval,” discusses how data or options displayed on the pages are fetched or retrieved.

UI Components

We need two types of pages for configuring export/advanced settings. The first type of page displays menu items, each representing a setting that can be configured. When clicked or pressed, it navigates to a configuration detail page. This is the second type of page. On the configuration detail page, the user can edit the chosen configuration.

Menu Items Page

Configuration Detail Page

This section UI Components will be divided into two subsections: Menu Items Page, explaining the first type of screen, and Configuration Detail Page, explaining the second.

Menu Items Pages

NetSuiteAdvancedPage

Configuration Detail Page

The other page type is the Configuration Detail pages. On a Configuration Detail page, users can alter a configuration by selecting from various options or toggling a specific item.

When an option item is selected, a function corresponding to the Selector Page from policy.ts should be invoked to update the connection configuration data. For more information about the API, please refer to the “Saving Connection Settings” section.

We’ll reuse the SelectionScreen component to render the option list. You can find an example of its implementation here.

Data Retrieval

On all pages related to export configuration, we need access to the current configuration. This information is stored in Onyx as part of the policy object, all pages need to subscribe to it.

export default withPolicy()(ComponentForPage);

The Menu Items pages display the preset list of items. Each item of the list is a pair of the configuration item (ex. Preferred exporter) and the current configuration value for the item (ex. The email of the admin who is used as the preferred exporter). The items are static and the values are simply read from the policy object that is provided by Onyx subscription.

For Configuration Detail Pages, we will subdivide the pages into 2 categories:

• Static Options Page
• Dynamic Options Page

Static Options Pages display a preset list of options, i.e., they do not depend on the current data stored in the policy. In this category of pages, the policy data will only be used to determine the currently selected option (initiallyFocusedOptionKey). The pages that fall under this category are -

• NetSuiteDateSelectPage
• NetSuiteExportExpensesDestinationSelectPage
• NetSuiteExportExpensesJournalPostingPreferenceSelectPage
• NetSuiteInvoiceItemPreferenceSelectPage
• NetSuiteExpenseReportApprovalLevelSelectPage
• NetSuiteVendorBillApprovalLevelSelectPage
• NetSuiteJournalEntryApprovalLevelSelectPage

Dynamic Options Pages are the pages where we show a list of options dynamically, i.e., they depend on current data stored in the policy. In this category of pages, the policy data will be used to determine the set of options being shown to the user and the currently selected option (initiallyFocusedOptionKey). The pages which fall under this category are:

• NetSuitePreferredExporterSelectPage
• NetSuiteExportExpensesVendorSelectPage
• NetSuiteExportExpensesPayableAccountSelectPage
• NetSuiteReceivableAccountSelectPage
• NetSuiteInvoiceItemSelectPage
• NetSuiteTaxPostingAccountSelectPage
• NetSuiteProvicincialTaxPostingAccountSelectPage
• NetSuiteReimbursementAccountSelectPage
• NetSuiteCollectionAccountSelectPage
• NetSuiteApprovalAccountSelectPage