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: Export #43442

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

    • PageComponent: NetSuiteExportConfigurationPage
    • API Calls / Parameters:
      • For "Export foreign currency amount":
        • Calls UpdateNetSuiteAllowForeignCurrency
        • Parameters:
          • enabled - TRUE / FALSE, depending on the toggle
        • Config that will be affected - config.allowForeignCurrency
        • The pendingAction for the OfflineWithFeedback component will be policy.pendingFields.allowForeignCurrency
      • For "Export to next open period":
        • Calls UpdateNetSuiteExportToNextOpenPeriod
        • Parameters:
          • enabled - TRUE / FALSE, depending on the toggle
        • Config that will be affected - config.exportToNextOpenPeriod
        • The pendingAction for the OfflineWithFeedback component will be policy.pendingFields.exportToNextOpenPeriod
  2. Route: /settings/workspaces/{policyID}/accounting/netsuite/export/preferred-exporter/select

    • PageComponent: NetSuitePreferredExporterSelectPage
    • API Call/Parameters:
      • UpdateNetSuiteExporter
      • Parameters:
        • email - one of the policy’s admins email
      • Config that will be affected - config.exporter
      • The pendingAction for the OfflineWithFeedback component will be policy.pendingFields.exporter
  3. Route: /settings/workspaces/{policyID}/accounting/netsuite/export/purchase-bill-date/select

    • PageComponent: NetSuiteDateSelectPage
    • API Call/Parameters:
      • UpdateNetSuiteExportDate
      • Parameters:
        • value - one of the values in DateTypeEnum (SUBMITTED, EXPORTED, LAST_EXPENSE)
      • Config that will be affected - config.exportDate
      • The pendingAction for the OfflineWithFeedback component will be policy.pendingFields.exportDate

Note - For the following routes, we're defining a dynamic parameter in route: {expenseType} which will be either reimbursable or non-reimbursable

  1. Route: /settings/workspaces/{policyID}/accounting/netsuite/export/expenses/{expenseType}

    • PageComponent: NetSuiteExportExpensesPage
    • API Call/Parameters: N/A - this page just routes to the setting of the export destination itself as well as any dependent configurations on that destination.
  2. Route: /settings/workspaces/{policyID}/accounting/netsuite/export/expenses/{expenseType}/destination/select

    • PageComponent: NetSuiteExportExpensesDestinationSelectPage
    • API Call/Parameters:
      • UpdateNetSuiteReimbursableExpensesExportDestination (reimbursable)
      • UpdateNetSuiteNonreimbursableExpensesExportDestination (non-reimbursable)
      • Parameters:
      • value - one of the values in DestinationTypeEnum (EXPENSE_REPORT, VENDOR_BILL, JOURNAL_ENTRY)
      • Config that will be affected - config.reimbursableExpensesExportDestination (reimbursable) / config.nonreimbursableExpensesExportDestination (non-reimbursable)
      • The pendingAction for the OfflineWithFeedback component will be policy.pendingFields.reimbursableExpensesExportDestination (reimbursable) / policy.pendingFields.nonreimbursableExpensesExportDestination (non-reimbursable)
  3. Route: /settings/workspaces/{policyID}/accounting/netsuite/export/expenses/{expenseType}/vendor/select

    • PageComponent: NetSuiteExportExpensesVendorSelectPage
    • API Call/Parameters:
      • UpdateNetSuiteDefaultVendor
      • Parameters:
        • vendorID - one of the vendors available (present under data.vendors)
      • Config that will be affected - config.defaultVendor
      • The pendingAction for the OfflineWithFeedback component will be policy.pendingFields.defaultVendor
  4. Route: /settings/workspaces/{policyID}/accounting/netsuite/export/expenses/{expenseType}/payable-account/select

    • PageComponent: NetSuiteExportExpensesPayableAccountSelectPage
    • API Call/Parameters:
      • UpdateNetSuiteReimbursablePayableAccount (reimbursable) / UpdateNetSuitePayableAcct (non-reimbursable)
        • Parameters:
        • bankAccountID - one of the payable accounts available (present under data.payableList)
        • Config that will be affected - config.reimbursablePayableAccount (reimbursable) / config.payableAcct (non-reimbursable)
        • The pendingAction for the OfflineWithFeedback component will be policy.pendingFields.reimbursablePayableAccount (reimbursable) / policy.pendingFields.payableAcct (non-reimbursable)
  5. Route: /settings/workspaces/{policyID}/accounting/netsuite/export/expenses/{expenseType}/journal-posting-preference/select

    • PageComponent: NetSuiteExportExpensesJournalPostingPreferenceSelectPage
    • API Call/Parameters:
      • UpdateNetSuiteJournalPostingPreference
      • Parameters:
        • value - one of the values in JournalPostingPreferenceTypeEnum (JOURNALS_POSTING_INDIVIDUAL_LINE, JOURNALS_POSTING_TOTAL_LINE)
      • Config that will be affected - config.journalPostingPreference
    • The pendingAction for the OfflineWithFeedback component will be policy.pendingFields.journalPostingPreference
  6. Route: /settings/workspaces/{policyID}/accounting/netsuite/export/receivable-account/select

    • PageComponent: NetSuiteReceivableAccountSelectPage
    • API Call/Parameters:
      • UpdateNetSuiteReceivableAccount
      • Parameters:
        • bankAccountID - one of the receivable accounts available (present under data.receivableList)
      • Config that will be affected - config.receivableAccount
      • The pendingAction for the OfflineWithFeedback component will be policy.pendingFields.receivableAccount
  7. Route: /settings/workspaces/{policyID}/accounting/netsuite/export/invoice-item-preference/select

    • PageComponent: NetSuiteInvoiceItemPreferenceSelectPage
    • API Call/Parameters:
      • UpdateNetSuiteInvoiceItemPreference
      • Parameters:
        • value - one of the values in InvoiceItemPreferenceTypeEnum (create, select)
      • Config that will be affected - config.invoiceItemPreference
      • The pendingAction for the OfflineWithFeedback component will be policy.pendingFields.invoiceItemPreference
  8. Route: /settings/workspaces/{policyID}/accounting/netsuite/export/invoice-item-preference/invoice-item/select

    • PageComponent: NetSuiteInvoiceItemSelectPage
    • API Call/Parameters:
      • UpdateNetSuiteInvoiceItem
      • Parameters:
        • itemID - one of the invoice items available (present under data.items)
      • Config that will be affected - config.invoiceItem
      • The pendingAction for the OfflineWithFeedback component will be policy.pendingFields.invoiceItem
  9. Route: /settings/workspaces/{policyID}/accounting/netsuite/export/tax-posting-account/select

    • PageComponent: NetSuiteTaxPostingAccountSelectPage
    • API Call/Parameters:
      • UpdateNetSuiteTaxPostingAccount
      • Parameters:
        • bankAccountID - one of the tax accounts available (present under data.taxAccountsList)
      • Config that will be affected - config.taxPostingAccount
      • The pendingAction for the OfflineWithFeedback component will be policy.pendingFields.taxPostingAccount
  10. Route: /settings/workspaces/{policyID}/accounting/netsuite/export/tax-posting-account/select

    • PageComponent: NetSuiteProvicincialTaxPostingAccountSelectPage
    • API Call/Parameters:
      • UpdateNetSuiteProvicincialTaxPostingAccount
      • Parameters:
        • bankAccountID - one of the tax accounts available (present under data.taxAccountsList)
      • Config that will be affected - config.provicincialTaxPostingAccount
      • The pendingAction for the OfflineWithFeedback component will be policy.pendingFields.provicincialTaxPostingAccount

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

NetSuiteExportConfigurationPage

AD_4nXfaUDOCOCZLeNkEWCsGAhj5qL02g0PZ24_BFnQl06hiehtRYo3x_szg0mkfKYt8GAT4d9F7Rm2UNwEBRcD8Fx9JzngYILMudUvumxAWChcslVm6PEqcndqg

NetSuiteExportExpensesPage

AD_4nXemJZBNqtdJ1-ALf9iwNYIeRKYKe4i4XLMrU_pfXkMHNdhUtxC7VzURNSeCP-yDzJPfYW-7KI_wPewQmIcCVlWc938DkfozGM-jDALgJueispfTW93E4NgR

We’ll reuse the ConnectionLayout component to display menu items. You can find an example of its implementation here.

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: @
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 @laurenreidexpensify (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 3 weeks ago

Sample NetSuite connection data JSON: sampleNetSuiteJSON.json

This would go under connections.netsuite in your policy object in Onyx, just like for quickbooksOnline

melvin-bot[bot] commented 2 weeks ago

Triggered auto assignment to @dylanexpensify (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.

laurenreidexpensify commented 2 weeks ago

@dylanexpensify adding you as the BZ here for payments etc while I'm on parental leave. Thanks

war-in commented 6 days ago

Hey 👋 Please check my comment here. tl;dr Navigation is connected to the wrong integration

dylanexpensify commented 5 days ago

cc @yuwenmemon @shubham1206agra on above

shubham1206agra commented 5 days ago

@dylanexpensify This was fixed in another PR.