Monite UI Widgets

Overview

Monite UI Widgets is a library of ready-to-use React components that are connected to the Monite API. These components can render and operate with data served by the API, such as payables, counterparts, and others. Monite partners can use UI Widgets to build React-based web applications for their client SMEs, powered by the Monite API.

UI Widgets are part of the Monite SDK.

An example of the CounterpartsTable component

Supported browsers

Monite UI Widgets support the five latest versions of major browsers: Chrome, Firefox, Safari, Edge, Opera.

Installation

npm install @team-monite/ui-widgets-react --save --force

yarn add @team-monite/ui-widgets-react

Components

You can browse https://sdk.dev.monite.com to explore the available components interactively and view additional documentation.

The available components are:

Component	Description
`<MoniteProvider>`	The root component that must wrap all other Monite-connected components. See the usage example below.
Payables
`<PayablesTable>`	A table that displays the list of payable invoices that are available to the owner of the access token. Supports sorting, filtering, and pagination.
`<PayableDetails>`	Displays the details of a single payable and lets the user edit these details.
Tags
`<TagsTable>`	A table that displays the list of existing tags. Supports sorting and pagination.
`<TagFormModal>`	The "create new tag" modal.
`<ConfirmDeleteModal>`	The confirmation modal displayed before a tag is deleted.
Counterparts
`<CounterpartsTable>`	A table that displays the list of counterparts of the authenticated entity. Supports sorting, filtering, and pagination.
`<CounterpartDetails>`	Used to create a new counterpart, as well as view and edit the details of an existing counterpart.
Approval policies
`<ApprovalPoliciesTable>`	A table that displays the list of existing approval policies of the authenticated entity. Supports searching, filtering, sorting, and pagination.
Receivables
`<ReceivablesTable>`	A table that displays all existing receivables (outgoing invoices, quotes, credit notes) of the authenticated entity. The receivables are organized into tabs by their type. The table supports searching, filtering, sorting, and pagination.
`<CreateInvoice>`	The "create new invoice" modal.
`<ReceivableDetails>`	Displays the details of a single receivable document and lets the user edit these details.

Usage

Before using Monite UI Widgets, complete the Getting started guide to set up your partner account and get API the credentials.

We also assume you have already mapped out your customers and their users as entities and entity users in Monite, and that you have the ability to:

look up the Monite entity user ID for the user who is logged in to your application;
look up the Monite entity ID to which the user belongs.

When an entity user logs in to your application, look up the entity ID and user ID for that user, and call Monite's POST /auth/token endpoint to generate a Monite access token for that user.

Once you have a user access token and an entity ID, you can initialize the Monite client and widgets, as shown below.

Example

The example below displays a list of an entity's counterparts. The MoniteProvider element serves as a wrapper for other Monite-connected components. Any other components imported from @team-monite/ui-widgets-react must be placed inside this element.

import { MoniteProvider, MoniteApp, CounterpartsTable } from '@team-monite/ui-widgets-react';

const monite = new MoniteApp({
  apiUrl: 'https://api.sandbox.monite.com/v1',  // Or 'https://api.monite.com/v1' to use Production
  entityId: 'ENTITY_ID',  // Monite entity to which the user belongs
  token: 'ACCESS_TOKEN'   // User access token
});

<MoniteProvider monite={monite}>
  <CounterpartsTable />
</MoniteProvider>