CounterpartDetails component

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

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:

1
import { CounterpartDetails, Dialog } from "@monite/sdk-react";
2
3
...
4
5
// TODO: This component must be rendered within the MoniteProvider wrapper
6
const 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:

1
import { CounterpartDetails, Dialog } from "@monite/sdk-react";
2
3
...
4
5
// TODO: This component must be rendered within the MoniteProvider wrapper
6
const 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
};

Props

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