CounterpartDetails

Overview

The CounterpartDetails component renders the interface for creating a new counterpart and managing the details of an existing counterpart. This includes the ability to view and edit counterpart details.

Permissions

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

Preview

CounterpartDetails component preview
CounterpartDetails component preview

Usage

Use the CounterpartDetails component to create new counterparts and view and edit details of an existing counterpart. To view details of an existing counterpart, use the CounterpartDetails component with the id prop as shown:

React.js
1import { CounterpartDetails, Dialog } from "@monite/sdk-react";
2
3...
4
5// TODO: This component must be rendered within the MoniteProvider wrapper
6const CounterpartDetailsPage = () => {
7  return (
8    <Dialog open alignDialog="right">
9      <CounterpartDetails
10        id="COUNTERPART_ID"
11      />
12    </Dialog>
13  );
14};

To create a new counterpart, import the CounterpartDetails component and bring into your application with the type prop as shown:

React.js
1import { CounterpartDetails, Dialog } from "@monite/sdk-react";
2
3...
4
5// TODO: This component must be rendered within the MoniteProvider wrapper
6const CounterpartDetailsPage = () => {
7  return (
8    <Dialog open fullScreen>
9      // type can be `individual` or `organization`
10      <CounterpartDetails
11        type="organization"
12        defaultValues={{
13          isVendor: true,
14          isCustomer: false,
15        }}
16      />
17    </Dialog>
18  );
19};

You can use either the type prop or the id prop on the CounterpartDetails component. Attempting to use both on the same component will return an error.

Props

The following table shows all CounterpartDetails component properties, their types, and description:

PropTypeDefaultDescription
defaultValuesobjectThis prop determines the default values of the “counterpart type” checkbox on the counterpart creation form.
idstringThis prop accepts the ID of the counterpart details to be displayed, edited or removed.
onAddressUpdatefunctionTriggered when an existing counterpart’s address is updated.
onBankCreatefunctionTriggered when a new bank account is created for an existing counterpart.
onBankDeletefunctionTriggered when an existing counterpart’s bank account is deleted.
onBankUpdatefunctionTriggered when an existing counterpart’s bank account is edited.
onClosefunctionThis callback can be triggered when the CounterpartDetails modal is closed.
onContactCreatefunctionTriggered when new contact information is created for an existing counterpart.
onContactDeletefunctionTriggered when an existing counterpart’s contact information is deleted.
onContactUpdatefunctionTriggered when an existing counterpart’s contact information is updated.
onCreatefunctionThis callback can be triggered when a new counterpart is created.
onDeletefunctionThis callback can be triggered when an existing counterpart is deleted.
onUpdatefunctionThis callback can be triggered when any of an existing counterpart’s details are updated.
onVatCreatefunctionThis callback is triggered when a new VAT ID is created for a counterpart.
onVatDeletefunctionThis callback is triggered when a counterpart’s VAT ID is deleted.
onVatUpdatefunctionThis callback is triggered when a counterpart’s VAT information is updated.
showBankAccountsbooleantrueThis determines whether or not the counterpart’s bank account data will be shown on the Counterpart details page.
showCategoriesbooleantrueThis determines whether or not the “Type” field will be shown on the counterpart details page. It also determines if the “counterpart type” checkbox will be displayed on the counterpart creation form.
type("individual"| "organization")This accepts the type of counterpart to be created.