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.
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. |
Updated about 1 month ago
See also