Skip to main content

​
Overview

The Monite components use the default settings by default. However, there are scenarios where you can to customize this settings to match the needs of your business. Below, see a component settings object, with its parameters and default values. This object must be inserted into the <MoniteProvider> component: 
const componentSettings = {
  general: {},
  approvalPolicies: {
    pageSizeOptions: [20, 50, 100]
  },
  approvalRequests: {
    pageSizeOptions: [20, 50, 100]
  },
  counterparts: {
    pageSizeOptions: [20, 50, 100],
    customerTypes: ["customer", "vendor"]
  },
  payables: {
    pageSizeOptions: [20, 50, 100],
    isShowingSummaryCards: true,
    fieldOrder: ["document_id", "counterpart_id", "created_at", "due_date", "status", "amount", "amount_paid", "pay"],
    summaryCardFilters: {
      "Overdue Invoices": {
        status__in: ["waiting_to_be_paid"],
        overdue: true
      },
      "High-Value Invoices": {
        amount__gte: 10000
      }
    },
    requiredColumns: ["document_id"],
    optionalFields: {
      invoiceDate: true,
      tags: true
    },
    ocrRequiredFields: {
      currency: true,
      invoiceDate: true,
      counterpart: true,
      invoiceNumber: true,
      counterpartBankAccount: true,
      document_issued_at_date: true,
      dueDate: true,
      tags: true,
      counterpartName: true,
      contactPerson: true,
      issueDate: true,
      amount: true,
      appliedPolicy: true,
      addedByUser: true,
      addedOn: true,
      updatedOn: true
    },
    ocrMismatchFields: {
      amount_to_pay: true,
      counterpart_bank_account_id: true
    },
    isTagsDisabled: false
  },
  products: {
    pageSizeOptions: [20, 50, 100]
  },
  receivables: {
    pageSizeOptions: [20, 50, 100],
    tab: 0,
    tabs: [
      {
        label: "Invoices",
        query: { type: "invoice" },
        filters: ["document_id__contains", "counterpart_id", "due_date__lte"]
      },
      {
        label: "Quotes",
        query: { type: "quote" }
      },
      {
        label: "Credit notes",
        query: { type: "credit_note" }
      },
      {
        label: "Financing",
        query: { type: "financing" }
      }
    ],
    onCreate: (receivableId) => {},
    onUpdate: (receivableId, invoice) => {},
    onDelete: (receivableId) => {},
    onInvoiceSent: (invoiceId) => {},
    enableEntityBankAccount: false,
    bankAccountCountries: ["US", "DE", "GB"],
    bankAccountCurrencies: ["USD", "EUR", "GBP"]
  },
  tags: {
    pageSizeOptions: [20, 50, 100]
  },
  userRoles: {
    pageSizeOptions: [20, 50, 100]
  },
  onboarding: {
    footerLogoUrl: "https://example.com/logo.png",
    footerWebsiteUrl: "https://example.com",
    hideFooter: false,
    showContinueButton: false,
    allowedCurrencies: ["USD", "EUR", "GBP"],
    allowedCountries: ["US", "DE", "GB"],
    onComplete: () => {},
    onContinue: () => {},
    onWorkingCapitalOnboardingComplete: (entityId) => {}
  },
  financing: {
    enableFinanceWidgetButton: true
  }
};

​
Components settings

This table lists all configurable SDK components with their properties, descriptions, and default values. Use it as a reference to customize the SDK for your needs.

​
general

PropertyDescriptionDefault
No properties definedEmpty configuration object{}

​
approvalPolicies

PropertyDescriptionDefault
pageSizeOptionsTable results per page options[20, 50, 100]

​
approvalRequests

PropertyDescriptionDefault
pageSizeOptionsTable results per page options[20, 50, 100]

​
counterparts

PropertyDescriptionDefault
pageSizeOptionsTable results per page options[20, 50, 100]
customerTypesCustomer types supported in counterpart forms["customer", "vendor"]

​
payables

PropertyDescriptionDefault
enableGLCodesEnables GL code field in payable creation and editing.false
fieldOrderTable columns order["amount", "amount_paid", "counterpart_id", "created_at", "document_id", "due_date", "pay", "status"]
isShowingSummaryCardsShow/hide summary cards on table viewtrue
isTagsDisabledEnable/disable tags functionalityfalse
ocrMismatchFieldsFields to check for OCR mismatches{ amount_to_pay: true, counterpart_bank_account_id: true }
ocrRequiredFieldsRequired fields for OCR processingObject with multiple fields set to true (currency, invoiceDate, counterpart, etc.)
optionalFieldsOptional fields configuration{ invoiceDate: true, tags: true }
pageSizeOptionsTable results per page options[20, 50, 100]
requiredColumnsRequired columns in the table["document_id"]
summaryCardFiltersPredefined filters for summary cardsObject with "Overdue Invoices" and "High-Value Invoices" filters

​
products

PropertyDescriptionDefault
pageSizeOptionsTable results per page options[20, 50, 100]

​
receivables

PropertyDescriptionDefault
pageSizeOptionsTable results per page options[20, 50, 100]
tabIndex of default open tab0
tabsTabs displayed in the invoicing table. Note: the Financing tab might not show if the entity is in an unsupported countryArray with Invoices, Quotes, Credit notes, and Financing tabs
onCreateCallback function when receivable is created(receivableId) => {}
onUpdateCallback function when receivable is updated(receivableId, invoice) => {}
onDeleteCallback function when receivable is deleted(receivableId) => {}
onInvoiceSentCallback function when invoice is sent(invoiceId) => {}
enableEntityBankAccountEnable entity bank account featurefalse
bankAccountCountriesSupported countries for bank accounts["US", "DE", "GB"]
bankAccountCurrenciesSupported currencies for bank accounts["USD", "EUR", "GBP"]

​
tags

PropertyDescriptionDefault
pageSizeOptionsTable results per page options[20, 50, 100]

​
userRoles

PropertyDescriptionDefault
pageSizeOptionsTable results per page options[20, 50, 100]

​
onboarding

PropertyDescriptionDefault
footerLogoUrlURL for footer logo"https://example.com/logo.png"
footerWebsiteUrlURL for footer website link"https://example.com"
hideFooterShow/hide footerfalse
showContinueButtonShow/hide continue buttonfalse
allowedCurrenciesCurrencies allowed during onboarding["USD", "EUR", "GBP"]
allowedCountriesCountries allowed during onboarding["US", "DE", "GB"]
onCompleteCallback function when onboarding completes() => {}
onContinueCallback function when continue is clicked() => {}
onWorkingCapitalOnboardingCompleteCallback when working capital onboarding completes(entityId) => {}

​
financing

PropertyDescriptionDefault
enableFinanceWidgetButtonEnable/disable finance widget buttontrue