Skip to content

Search is only available in production builds. Try building and previewing the site to test it out locally.

Company Switcher Data & Events

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

Version: 1.0.6-beta5

Events reference

EventDirectionDescription
checkout/initializedListensFired by Checkout (checkout) when the component completes initialization.
checkout/updatedListensFired by Checkout (checkout) when the component state is updated.
company/updatedListensFired by Company (company) when the component state is updated.
companyContext/changedEmits and listensTriggered when a change occurs.

Event details

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

checkout/initialized (listens)

Fired by Checkout (checkout) when the component completes initialization.

Event payload

Cart | NegotiableQuote | null

See Cart, NegotiableQuote for full type definitions.

Example

import { events } from '@dropins/tools/event-bus.js';
events.on('checkout/initialized', (payload) => {
console.log('checkout/initialized event received:', payload);
// Add your custom logic here
});

checkout/updated (listens)

Fired by Checkout (checkout) when the component state is updated.

Event payload

Cart | NegotiableQuote | null

See Cart, NegotiableQuote for full type definitions.

Example

import { events } from '@dropins/tools/event-bus.js';
events.on('checkout/updated', (payload) => {
console.log('checkout/updated event received:', payload);
// Add your custom logic here
});

company/updated (listens)

Fired by Company (company) when the component state is updated.

Event payload

{
company: {
id: string;
name: string;
email: string;
legalAddress: {
street: string[];
city: string;
region: {
region: string;
regionCode: string;
regionId: number;
}
countryCode: string;
postcode: string;
telephone: string;
}
companyAdmin: {
id: string;
firstname: string;
lastname: string;
email: string;
}
salesRepresentative: {
firstname: string;
lastname: string;
email: string;
}
availablePaymentMethods: Array<{
code: string;
title: string;
}>;
availableShippingMethods: Array<{
code: string;
title: string;
}>;
canEditAccount: boolean;
canEditAddress: boolean;
permissionsFlags: {
canViewAccount: boolean;
canEditAccount: boolean;
canViewAddress: boolean;
canEditAddress: boolean;
canViewContacts: boolean;
canViewPaymentInformation: boolean;
canViewShippingInformation: boolean;
}
customerRole: {
id: string;
name: string;
permissions: any[];
}
customerStatus: string;
}
}

Example

import { events } from '@dropins/tools/event-bus.js';
events.on('company/updated', (payload) => {
console.log('company/updated event received:', payload);
// Add your custom logic here
});

companyContext/changed (emits and listens)

Triggered when a change occurs.

Event payload

string | null

When triggered

  • After user selects a different company from the switcher
  • On initial page load when company context is established
  • After successful company context update
  • When company headers are set via setCompanyHeaders()
  • When company headers are removed by passing null to setCompanyHeaders()

Example: Example

import { events } from '@dropins/tools/event-bus.js';
events.on('companyContext/changed', (companyId) => {
if (companyId) {
console.log(`Company context changed to: ${companyId}`);
// Refresh all company-specific data
refreshCompanyData(companyId);
// Update permissions for new company
refreshUserPermissions();
// Reload company-specific UI components
reloadCompanyDependentData();
// Track analytics
trackCompanySwitch(companyId);
} else {
console.log('Company context removed');
// Clear company-specific caches
clearCompanyCache();
}
});

Usage scenarios

  • Refresh company-specific data across the application.
  • Update user permissions for the new company context.
  • Reload company-dependent drop-ins (Purchase Order, Quote Management, and so on).
  • Clear cached data from previous company.
  • Update navigation and menu items based on new company.
  • Track company switching behavior in analytics.
  • Update session storage or cookies.
  • Refresh company structure and hierarchy displays.
  • Update approval rules and workflows.
  • Reload requisition lists for new company.

Integration with other drop-ins

The companyContext/changed event is critical for coordinating multiple B2B drop-ins. When this event fires, other drop-ins should refresh their data: