PayableDetails

Suggest Edits

The PayableDetails component renders the interface for creating a new 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. Use in the PayableDetails component in your application as shown:

import { Dialog, PayableDetails } from "@monite/sdk-react"

...

// TODO: This component must be rendered within the MoniteProvider wrapper
return (
  <Dialog open alignDialog="right">
    <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"

...

// TODO: This component must be rendered within the MoniteProvider wrapper
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.
`onApprove`	`function`	This callback is triggered after a payable is approved by an entity user.
`onCancel`	`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 clicking the "Pay" button.
`onReject`	`function`	This callback is triggered after a payable is rejected by an approver.
`onSave`	`function`	This callback is triggered after clicking the "Save" button.
`onSubmit`	`function`	This callback is triggered after a payable is submitted for approval.

Updated 12 days ago