Expensify / App

Welcome to New Expensify: a complete re-imagination of financial collaboration, centered around chat. Help us build the next generation of Expensify by sharing feedback and contributing to the code.
https://new.expensify.com
MIT License
3.12k stars 2.62k forks source link

[#Wave-Control: Add NetSuite] Settings Configuration in NewDot: Advanced #43443

Open yuwenmemon opened 4 weeks ago

yuwenmemon commented 4 weeks ago

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

AD_4nXfpnu5DWFVYzq7z7Z8iEay73Hw9xN62ptoX-GqfnaYJESeefBcrTMDDDIRYicn8YGPYxpZiz5gtvv91wmcAhRWMPzJkDy_jm28KNa8Rrfd516LaTWzyVYCm

Configuration Detail Page

AD_4nXfaUDOCOCZLeNkEWCsGAhj5qL02g0PZ24_BFnQl06hiehtRYo3x_szg0mkfKYt8GAT4d9F7Rm2UNwEBRcD8Fx9JzngYILMudUvumxAWChcslVm6PEqcndqg

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

AD_4nXfZ_CyTkATV7AN3oGKPRnq_MXg6GAjYnl4-P8GJu9vJRSbz2KDqOcfc1nwAqhuoNG07QVm9Oa4ssaPvHr5Hmoz7DU3ZCdAaKhlKujQvJSz552Ieo06e_kvH

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 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 -

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:

Issue OwnerCurrent Issue Owner: @
Issue OwnerCurrent Issue Owner: @shubham1206agra
Issue OwnerCurrent Issue Owner: @shubham1206agra
melvin-bot[bot] commented 4 weeks ago

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

melvin-bot[bot] commented 4 weeks ago

Triggered auto assignment to @CortneyOfstad (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details. Please add this Feature request to a GH project, as outlined in the SO.

yuwenmemon commented 2 weeks ago

@shubham1206agra is working on Export first.

yuwenmemon commented 1 week ago

@shubham1206agra is almost done with Export and will be moving onto this one shortly.