SDK customization

Learn how to customize the components on the Monite React SDK.

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 complete component settings object, with its parameters and default values. This object must be inserted into the <MoniteProvider> component:

1const componentSettings = {
2 general: {},
3 approvalPolicies: {
4 pageSizeOptions: [20, 50, 100]
5 },
6 approvalRequests: {
7 pageSizeOptions: [20, 50, 100]
8 },
9 counterparts: {
10 pageSizeOptions: [20, 50, 100],
11 customerTypes: ["customer", "vendor"]
12 },
13 payables: {
14 pageSizeOptions: [20, 50, 100],
15 isShowingSummaryCards: true,
16 fieldOrder: ["document_id", "counterpart_id", "created_at", "due_date", "status", "amount", "amount_paid", "pay"],
17 summaryCardFilters: {
18 "Overdue Invoices": {
19 status__in: ["waiting_to_be_paid"],
20 overdue: true
21 },
22 "High-Value Invoices": {
23 amount__gte: 10000
24 }
25 },
26 requiredColumns: ["document_id"],
27 optionalFields: {
28 invoiceDate: true,
29 tags: true
30 },
31 ocrRequiredFields: {
32 currency: true,
33 invoiceDate: true,
34 counterpart: true,
35 invoiceNumber: true,
36 counterpartBankAccount: true,
37 document_issued_at_date: true,
38 dueDate: true,
39 tags: true,
40 counterpartName: true,
41 contactPerson: true,
42 issueDate: true,
43 amount: true,
44 appliedPolicy: true,
45 addedByUser: true,
46 addedOn: true,
47 updatedOn: true
48 },
49 ocrMismatchFields: {
50 amount_to_pay: true,
51 counterpart_bank_account_id: true
52 },
53 isTagsDisabled: false
54 },
55 products: {
56 pageSizeOptions: [20, 50, 100]
57 },
58 receivables: {
59 pageSizeOptions: [20, 50, 100],
60 tab: 0,
61 tabs: [
62 {
63 label: "Invoices",
64 query: { type: "invoice" },
65 filters: ["document_id__contains", "counterpart_id", "due_date__lte"]
66 },
67 {
68 label: "Quotes",
69 query: { type: "quote" }
70 },
71 {
72 label: "Credit notes",
73 query: { type: "credit_note" }
74 },
75 {
76 label: "Financing",
77 query: { type: "financing" }
78 }
79 ],
80 onCreate: (receivableId) => {},
81 onUpdate: (receivableId, invoice) => {},
82 onDelete: (receivableId) => {},
83 onInvoiceSent: (invoiceId) => {},
84 enableEntityBankAccount: false,
85 bankAccountCountries: ["US", "DE", "GB"],
86 bankAccountCurrencies: ["USD", "EUR", "GBP"]
87 },
88 tags: {
89 pageSizeOptions: [20, 50, 100]
90 },
91 userRoles: {
92 pageSizeOptions: [20, 50, 100]
93 },
94 onboarding: {
95 footerLogoUrl: "https://example.com/logo.png",
96 footerWebsiteUrl: "https://example.com",
97 hideFooter: false,
98 showContinueButton: false,
99 allowedCurrencies: ["USD", "EUR", "GBP"],
100 allowedCountries: ["US", "DE", "GB"],
101 onComplete: () => {},
102 onContinue: () => {},
103 onWorkingCapitalOnboardingComplete: (entityId) => {}
104 },
105 financing: {
106 enableFinanceWidgetButton: true
107 }
108};