PayableDetails component

Overview

The PayableDetails component renders the interface for creating, uploading, editing, and transitioning a payable. It also displays a copy of the uploaded payable alongside details of a payable, allowing a user to edit these details.

Permissions

To view details of an existing payable, the entity user must have read permissions for the payable object. To create, edit, and delete payables, they must also have create, update, or delete permissions for the payable object. For more information, see List of permissions.

Preview

Usage

Use the PayableDetails component to create new payables and view and edit details of an existing payable. To view details of an existing payable, use the PayableDetails component with the id prop as shown:

1
import { Dialog, PayableDetails } from "@monite/sdk-react";
2
3
// This component must be rendered within the MoniteProvider wrapper
4
const PayableDetailsPage = () => {
5
  return (
6
    <Dialog open fullScreen>
7
      <PayableDetails id="PAYABLE_ID" />
8
    </Dialog>
9
  );
10
};

To create a new payable, import the PayableDetails component without providing the id prop as shown:

1
import { PayableDetails } from "@monite/sdk-react";
2
3
// This component must be rendered within the MoniteProvider wrapper
4
const PayableDetailsPage = () => {
5
  return <PayableDetails />;
6
};

Props

Customization

Customize mandatory fields

You can set the fields counterpart_id, counterpart_bank_account_id, issued_at, and currency as mandatory, in addition to the required fields, for the payable creation. To do this, call PUT /payables/validations:

1
curl -X PUT 'https://api.sandbox.monite.com/v1/payables/validations' \
2
     -H 'X-Monite-Version: 2024-05-25' \
3
     -H 'Authorization: Bearer ACCESS_TOKEN' 
4
     -d '{
5
      "required_fields": [
6
        "currency",
7
        "issued_at"
8
      ]
9
    }'

The component will mark the selected mandatory fields with a red asterix and validate them.

Set fields to be mandatory for review after OCR

You can select which fields of the Payable are mandatory to be filled after the OCR process. The fields that were not scanned will be marked as required with a red asterisk:

The required fields must be informed in the payables.ocrRequiredFields field. Here is an example:

1
const componentSettings = {
2
  payables {
3
    ocrRequiredFields: {
4
      currency: true,
5
      invoiceDate: true,
6
      counterpart: true,
7
      invoiceNumber: true,
8
      counterpartBankAccount: true,
9
      document_issued_at_date: true,
10
      dueDate: true,
11
      tags: true,
12
      counterpartName: true,
13
      contactPerson: true,
14
      issueDate: true,
15
      amount: true,
16
      appliedPolicy: true,
17
      addedByUser: true,
18
      addedOn: true,
19
      updatedOn: true
20
    },
21
  },
22
},