Skip to main content

​
Overview

InvoiceDetails is a React component that renders the interface for creating a new receivable. It also renders the modal form that displays information about the specified invoice and allows performing various actions on the invoice. You can cancel, delete, issue, and mark an invoice as uncollectible from the InvoiceDetails component. You can also send and issue invoices using this component.

​
Permissions

To view details of an existing invoice, the entity user must have read permissions for thereceivable object. To create, edit, and delete receivables, they must also have create, update, or delete permissions for the receivable object. For more information, see List of permissions.

​
Preview

InvoiceDetails component preview

​
Usage

Use the InvoiceDetails component to create new invoices and view details of an existing invoice. To view details of an existing invoice, use the InvoiceDetails component with the id prop as shown:
React.js
import { InvoiceDetails, Dialog } from "@monite/sdk-react";

...

// TODO: This component must be rendered within the MoniteProvider wrapper
const InvoiceDetailsPage = () => {
 return (
   <Dialog open alignDialog="right">
     <InvoiceDetails id="INVOICE_ID" />
   </Dialog>
 );
};
To create a new invoice, import the InvoiceDetails component and bring into your application with the type prop as shown:
React.js
import { InvoiceDetails } from "@monite/sdk-react";

...

// TODO: This component must be rendered within the MoniteProvider wrapper
const InvoiceDetailsPage = () => {
 return <InvoiceDetails type="invoice" />
};

​
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.
onCreatefunctionThis callback is triggered when a new invoice is created.
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.
type("invoice")This prop accepts the type of receivable to be created.