Purchase Order Data & Events

The Purchase Order drop-in uses the event bus to emit and listen to events for communication between drop-ins and external integrations.

Version: latest

Events reference

Event	Direction	Description
order/data	Emits	Emitted when data is available or changes.
purchase-order/error	Emits	Emitted when an error occurs.
purchase-order/placed	Emits	Emitted when an order is placed.
auth/permissions	Emits and listens	Triggered when permissions are updated.
purchase-order/data	Emits and listens	Triggered when data is available or changes.
purchase-order/refresh	Emits and listens	Emitted and consumed for internal and external communication.

Event details

The following sections provide detailed information about each event, including its direction, event payload, and usage examples.

auth/permissions (emits and listens)

Triggered when permissions are updated.

Event payload

{
  admin?: boolean;
  [key: string]: boolean | undefined;
}

Usage

Listen to this event in your storefront:

import { events } from '@dropins/tools/event-bus.js';

const authPermissionsListener = events.on('auth/permissions', (data) => {
  console.log('auth/permissions event received:', data);
  // Add your custom logic here
});

// Later, when you want to stop listening
authPermissionsListener.off();

order/data (emits)

Emitted when data is available or changes.

Event payload

PurchaseOrderModel['quote']

See PurchaseOrderModel for full type definition.

Usage

Listen to this event in your storefront:

import { events } from '@dropins/tools/event-bus.js';

const orderDataListener = events.on('order/data', (data) => {
  console.log('order/data event received:', data);
  // Add your custom logic here
});

// Later, when you want to stop listening
orderDataListener.off();

purchase-order/data (emits and listens)

Triggered when data is available or changes.

Event payload

PurchaseOrderModel

See PurchaseOrderModel for full type definition.

Usage

Listen to this event in your storefront:

import { events } from '@dropins/tools/event-bus.js';

const purchaseOrderDataListener = events.on('purchase-order/data', (data) => {
  console.log('purchase-order/data event received:', data);
  // Add your custom logic here
});

// Later, when you want to stop listening
purchaseOrderDataListener.off();

purchase-order/error (emits)

Emitted when an error occurs.

Event payload

Usage

Listen to this event in your storefront:

import { events } from '@dropins/tools/event-bus.js';

const purchaseOrderErrorListener = events.on('purchase-order/error', (data) => {
  console.log('purchase-order/error event received:', data);
  // Add your custom logic here
});

// Later, when you want to stop listening
purchaseOrderErrorListener.off();

purchase-order/placed (emits)

Emitted when an order is placed.

Event payload

PurchaseOrderModel

See PurchaseOrderModel for full type definition.

Usage

Listen to this event in your storefront:

import { events } from '@dropins/tools/event-bus.js';

const purchaseOrderPlacedListener = events.on('purchase-order/placed', (data) => {
  console.log('purchase-order/placed event received:', data);
  // Add your custom logic here
});

// Later, when you want to stop listening
purchaseOrderPlacedListener.off();

purchase-order/refresh (emits and listens)

Emitted and consumed for internal and external communication.

Event payload

Boolean

Usage

Listen to this event in your storefront:

import { events } from '@dropins/tools/event-bus.js';

const purchaseOrderRefreshListener = events.on('purchase-order/refresh', (data) => {
  console.log('purchase-order/refresh event received:', data);
  // Add your custom logic here
});

// Later, when you want to stop listening
purchaseOrderRefreshListener.off();

Data Models

The following data models are used in event payloads for this drop-in.

PurchaseOrderModel

Used in: order/data, purchase-order/data, purchase-order/placed.

interface PurchaseOrderModel {
  typename: string;
  uid: string;
  number: string;
  status: string;
  availableActions: string[];
  approvalFlow:
    | {
        ruleName: string;
        events: Array<{
          message: string;
          name: string;
          role: string;
          status: string;
          updatedAt: string;
        }>;
      }[]
    | [];
  comments?: Array<{
    uid: string;
    createdAt: string;
    author: {
      firstname: string;
      lastname: string;
      email: string;
    };
    text: string;
  }>;
  createdAt: string;
  updatedAt: string;
  createdBy: {
    firstname: string;
    lastname: string;
    email: string;
  };
  historyLog?: Array<{
    activity: string;
    createdAt: string;
    message: string;
    uid: string;
  }>;
  quote: QuoteProps | null;
  order: {
    orderNumber: string;
    id: string;
  };
}