InvoiceDetails

InvoiceDetails is a React component that displays a modal form with information about the specified invoice and allows performing various actions with this invoice. You can cancel, delete, issue, and mark an invoice as uncollectible from the InvoiceDetails component.

Preview

Usage

Use in the InvoicesDetails component in your application as shown:

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

...

// TODO: This component must be rendered within the MoniteProvider wrapper
return (
  <Dialog open alignDialog="right">
    <InvoiceDetails
      id="INVOICE_ID"
    />
  </Dialog>
);

Props

Prop	Type	Description
`id`	`string`	This is a required prop that accepts the UUID of the invoice details to be displayed, issued or updated.
`onCancel`	`function`	This callback is triggered after canceling an invoice. It contains one string argument representing the invoice UUID.
`onClose`	`function`	This callback is triggered when the modal form is closed.
`onDelete`	`function`	This callback is triggered after deleting an invoice. It contains one string argument that represents the invoice UUID.
`onIssue`	`function`	This callback is triggered after issuing an invoice.
`onMarkAsUncollectible`	`function`	This callback is triggered after marking the invoice as uncollectible.