Order Data & Events

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

Version: 3.1.0

Events reference

Event	Direction	Description
cart/reset	Emits	Emitted when the component state is reset.
order/placed	Emits	Emitted when an order is placed.
companyContext/changed	Listens	Fired by Company Context (companyContext) when a change occurs.
order/data	Emits and listens	Triggered when data is available or changes.
order/error	Emits and listens	Triggered when an error occurs.

Event details

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

cart/reset (emits)

Emitted when the component state is reset.

Event payload

Example

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

events.on('cart/reset', (payload) => {
  console.log('cart/reset event received:', payload);
  // Add your custom logic here
});

companyContext/changed (listens)

Fired by Company Context (companyContext) when a change occurs.

Event payload

string | null | undefined

Example

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

events.on('companyContext/changed', (payload) => {
  console.log('companyContext/changed event received:', payload);
  // Add your custom logic here
});

order/data (emits and listens)

Emitted when order data is loaded or updated. This includes order details, items, shipping information, and payment status.

Event payload

OrderDataModel

See OrderDataModel for full type definition.

Example

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

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

order/error (emits and listens)

Emitted when an error occurs during order operations such as fetching order details, reordering items, or processing returns.

Event payload

{ source: string; type: string; error: Error | string }

Example

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

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

order/placed (emits)

Emitted when an order is placed.

Event payload

OrderDataModel

See OrderDataModel for full type definition.

Example

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

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

Data Models

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

OrderDataModel

Used in: order/data, order/placed.

type OrderDataModel = {
  giftReceiptIncluded: boolean;
  printedCardIncluded: boolean;
  giftWrappingOrder: {
    price: MoneyProps;
    uid: string;
  };
  placeholderImage?: string;
  returnNumber?: string;
  id: string;
  orderStatusChangeDate?: string;
  number: string;
  email: string;
  token?: string;
  status: string;
  isVirtual: boolean;
  totalQuantity: number;
  shippingMethod?: string;
  carrier?: string;
  orderDate: string;
  returns: OrdersReturnPropsModel[];
  discounts: { amount: MoneyProps; label: string }[];
  coupons: {
    code: string;
  }[];
  payments: {
    code: string;
    name: string;
  }[];
  shipping?: { code: string; amount: number; currency: string };
  shipments: ShipmentsModel[];
  items: OrderItemModel[];
  totalGiftCard: MoneyProps;
  grandTotal: MoneyProps;
  grandTotalExclTax: MoneyProps;
  totalShipping?: MoneyProps;
  subtotalExclTax: MoneyProps;
  subtotalInclTax: MoneyProps;
  totalTax: MoneyProps;
  shippingAddress: OrderAddressModel;
  totalGiftOptions: {
    giftWrappingForItems: MoneyProps;
    giftWrappingForItemsInclTax: MoneyProps;
    giftWrappingForOrder: MoneyProps;
    giftWrappingForOrderInclTax: MoneyProps;
    printedCard: MoneyProps;
    printedCardInclTax: MoneyProps;
  };
  billingAddress: OrderAddressModel;
  availableActions: AvailableActionsProps[];
  taxes: { amount: MoneyProps; rate: number; title: string }[];
  appliedGiftCards: {
    code: string;
    appliedBalance: MoneyProps;
  }[];
};

OrderItemProductModel

type OrderItemProductModel = {
  onlyXLeftInStock?: number;
  priceRange?: {
    maximumPrice?: {
      regularPrice?: MoneyProps;
    };
  };
  uid: string;
  __typename: string;
  stockStatus?: string;
  canonicalUrl?: string;
  urlKey?: string;
  id: string;
  image?: string;
  imageAlt?: string;
  name: string;
  productType: string;
  sku: string;
  thumbnail: {
    url: string;
    label: string;
  };
  giftWrappingAvailable?: boolean;
};

OrderItemModel

type OrderItemModel = {
  giftMessage: {
    senderName: string;
    recipientName: string;
    message: string;
  };
  giftWrappingPrice: MoneyProps;
  productGiftWrapping: {
    uid: string;
    design: string;
    selected: boolean;
    image: {
      url: string;
      label: string;
    };
    price: MoneyProps;
  }[];
  taxCalculations: {
    includeAndExcludeTax: {
      originalPrice: MoneyProps;
      baseOriginalPrice: MoneyProps;
      baseDiscountedPrice: MoneyProps;
      baseExcludingTax: MoneyProps;
    };
    excludeTax: {
      originalPrice: MoneyProps;
      baseOriginalPrice: MoneyProps;
      baseDiscountedPrice: MoneyProps;
      baseExcludingTax: MoneyProps;
    };
    includeTax: {
      singleItemPrice: MoneyProps;
      baseOriginalPrice: MoneyProps;
      baseDiscountedPrice: MoneyProps;
    };
  };
  productSalePrice: MoneyProps;
  status?: string;
  currentReturnOrderQuantity?: number;
  eligibleForReturn: boolean;
  productSku?: string;
  type?: string;
  discounted?: boolean;
  id: string;
  productName?: string;
  productUrlKey?: string;
  regularPrice?: MoneyProps;
  price: MoneyProps;
  product?: OrderItemProductModel;
  selectedOptions?: Array<{
    label: string;
    value: any;
  }>;
  thumbnail?: {
    label: string;
    url: string;
  };
  downloadableLinks: {
    count: number;
    result: string;
  } | null;
  prices: {
    priceIncludingTax: MoneyProps;
    originalPrice: MoneyProps;
    originalPriceIncludingTax: MoneyProps;
    price: MoneyProps;
    discounts: {
      label: string;
      amount: { value: number };
    }[];
  };
  itemPrices: {
    priceIncludingTax: MoneyProps;
    originalPrice: MoneyProps;
    originalPriceIncludingTax: MoneyProps;
    price: MoneyProps;
    discounts: {
      label: string;
      amount: { value: number };
    }[];
  };
  bundleOptions: Record<string, string> | null;
  totalInclTax: MoneyProps;
  priceInclTax: MoneyProps;
  total: MoneyProps;
  configurableOptions: Record<string, string | number | boolean> | undefined;
  giftCard?: {
    senderName: string;
    senderEmail: string;
    recipientEmail: string;
    recipientName: string;
    message: string;
  };
  quantityCanceled: number;
  quantityInvoiced: number;
  quantityOrdered: number;
  quantityRefunded: number;
  quantityReturned: number;
  quantityShipped: number;
  requestQuantity?: number;
  totalQuantity: number;
  returnableQuantity?: number;
  quantityReturnRequested: number;
};