CounterpartDetails

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

Preview

`CounterpartsDetails` component showing the — `CounterpartDetails` component with the Counterpart Creation modal.

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:

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

...

// TODO: This component must be rendered within the MoniteProvider wrapper
const CounterpartDetailsPage = () => {
  return (
    <Dialog open alignDialog="right">
      <CounterpartDetails 
        id="COUNTERPART_ID" 
      />
    </Dialog>
  );
};

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

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

...

// TODO: This component must be rendered within the MoniteProvider wrapper
const CounterpartDetailsPage = () => {
  return (
    <Dialog open fullScreen>
      // type can be `individual` or `organization`
      <CounterpartDetails 
        type="organization"
        defaultValues={{
          isVendor: true,
          isCustomer: false,
        }}
      />
    </Dialog>
  );
};

📘
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:

Prop	Type	Default	Description
`defaultValues`	`object`		This prop determines the default values of the "counterpart type" checkbox on the counterpart creation form.
`id`	`string`		This prop accepts the ID of the counterpart details to be displayed, edited or removed.
`onAddressUpdate`	`function`		Triggered when an existing counterpart's address is updated.
`onBankCreate`	`function`		Triggered when a new bank account is created for an existing counterpart.
`onBankDelete`	`function`		Triggered when an existing counterpart's bank account is deleted.
`onBankUpdate`	`function`		Triggered when an existing counterpart's bank account is edited.
`onClose`	`function`		This callback can be triggered when the `CounterpartDetails` modal is closed.
`onContactCreate`	`function`		Triggered when new contact information is created for an existing counterpart.
`onContactDelete`	`function`		Triggered when an existing counterpart's contact information is deleted.
`onContactUpdate`	`function`		Triggered when an existing counterpart's contact information is updated.
`onCreate`	`function`		This callback can be triggered when a new counterpart is created.
`onDelete`	`function`		This callback can be triggered when an existing counterpart is deleted.
`onUpdate`	`function`		This callback can be triggered when any of an existing counterpart's details are updated.
`onVatCreate`	`function`		This callback is triggered when a new VAT ID is created for a counterpart.
`onVatDelete`	`function`		This callback is triggered when a counterpart's VAT ID is deleted.
`onVatUpdate`	`function`		This callback is triggered when a counterpart's VAT information is updated.
`showBankAccounts`	`boolean`	`true`	This determines whether or not the counterpart's bank account data will be shown on the Counterpart details page.
`showCategories`	`boolean`	`true`	This 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.