PayableDetails

Suggest Edits

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.

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

Prop	Type	Description
`id`	`string`	This prop accepts the UUID of the payable details to be displayed or updated. This prop is not required for the creation of new payables.
`onApproved`	`function`	This callback is triggered after a payable is approved by an entity user.
`onCanceled`	`function`	This callback is triggered after a payable is canceled. It contains one string argument representing the payable UUID.
`onClose`	`function`	This callback is triggered when the modal form is closed.
`onPay`	`function`	This callback is triggered after a payable is paid.
`onRejected`	`function`	This callback is triggered after a payable is rejected by an approver.
`onSaved`	`function`	This callback is triggered after the "Save" button is clicked.
`onSubmitted`	`function`	This callback is triggered after a payable is submitted for approval.

Updated about 1 month ago