Partner Portal

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

`InvoiceDetails` component preview.

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

PropTypeDescription
idstringThis is a required prop that accepts the UUID of the invoice details to be displayed, issued or updated.
onCancelfunctionThis callback is triggered after canceling an invoice. It contains one string argument representing the invoice UUID.
onClosefunctionThis callback is triggered when the modal form is closed.
onDeletefunctionThis callback is triggered after deleting an invoice. It contains one string argument that represents the invoice UUID.
onIssuefunctionThis callback is triggered after issuing an invoice.
onMarkAsUncollectiblefunctionThis callback is triggered after marking the invoice as uncollectible.