Skip to main content

​
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

PayableDetails component 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: 
import { Dialog, PayableDetails } from "@monite/sdk-react";

// This component must be rendered within the MoniteProvider wrapper
const PayableDetailsPage = () => {
  return (
    <Dialog open fullScreen>
      <PayableDetails id="PAYABLE_ID" />
    </Dialog>
  );
};
To create a new payable, import the PayableDetails component without providing the id prop as shown: 
import { PayableDetails } from "@monite/sdk-react";

// This component must be rendered within the MoniteProvider wrapper
const PayableDetailsPage = () => {
  return <PayableDetails />;
};

​
Props

PropTypeDescription
idstringThis prop accepts the UUID of the payable details to be displayed or updated. This prop is not required for the creation of new payables.
onApprovedfunctionThis callback is triggered after a payable is approved by an entity user.
onCanceledfunctionThis callback is triggered after a payable is canceled. It contains one string argument representing the payable UUID.
onClosefunctionThis callback is triggered when the modal form is closed.
onPayfunctionThis callback is triggered after a payable is paid.
onRejectedfunctionThis callback is triggered after a payable is rejected by an approver.
onSavedfunctionThis callback is triggered after the “Save” button is clicked.
onSubmittedfunctionThis callback is triggered after a payable is submitted for approval.
ocr_requiredFieldsobjectThis object is used to set the required fields that are necessary for OCR, e.g. ocrRequiredFields : {invoiceNumber : true}. The fields that were not filled in the OCR scan are marked with a red asterisk.

​
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: 
curl -X PUT 'https://api.sandbox.monite.com/v1/payables/validations' \
     -H 'X-Monite-Version: 2024-01-31' \
     -H 'Authorization: Bearer ACCESS_TOKEN' 
     -d '{
      "required_fields": [
        "currency",
        "issued_at"
      ]
    }'
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:
Mandatory fields for review after OCR
The required fields must be informed in the payables.ocrRequiredFields field. Here is an example: 
const componentSettings = {
  payables {
    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
    },
  },
},