Company Switcher Functions

The Company Switcher drop-in provides API functions for managing company context and headers in multi-company B2B scenarios.

Function	Description
getCatalogViewContext	Retrieves the catalog view context for the current company, including the catalog view ID and optional access token.
getCatalogViewHeaderManager	Returns the singleton CatalogViewHeaderManager instance that manages catalog-view headers for all configured GraphQL modules.
getCompanyHeaderManager	Returns the singleton CompanyHeaderManager instance that manages company-specific headers for all configured GraphQL modules.
getCustomerCompanyInfo	Retrieves the customer’s current company context information including the active company ID, company name, and list of available companies for the user.
getGroupHeaderManager	Returns the singleton GroupHeaderManager instance that manages customer group headers for all configured GraphQL modules.
updateCustomerGroup	Updates the customer group context for the current shopper.

getCatalogViewContext

Retrieves the catalog view context for the current company. The catalog view context identifies which catalog view the shopper sees and, when present, the access token used to fetch it. Use it together with getCatalogViewHeaderManager to apply the correct catalog-view headers to GraphQL requests.

function getCatalogViewContext(): Promise<CatalogViewContext | null>

Events

Does not emit any drop-in events.

Returns

Returns a CatalogViewContext object, or null when no catalog view context is available:

interface CatalogViewContext {
  catalogViewId: string;
  accessToken: string | null;
}

getCatalogViewHeaderManager

Returns the singleton CatalogViewHeaderManager instance that manages catalog-view headers for all configured GraphQL modules. Use the returned manager to apply, remove, or check the catalog-view headers that control which catalog view a shopper sees.

function getCatalogViewHeaderManager(): any

Tip

The CatalogViewHeaderManager is a singleton. Calling getCatalogViewHeaderManager() multiple times returns the same instance, ensuring consistent header management across your application.

Events

Does not emit any drop-in events.

Returns

Returns a CatalogViewHeaderManager instance with the following methods:

{
  setCatalogViewHeaders(context: CatalogViewContext | null): void;
  removeCatalogViewHeaders(): void;
  isCatalogViewHeaderSet(): boolean;
  setViewIdHeaderKey(headerKey: string): void;
  setAccessTokenHeaderKey(headerKey: string): void;
  setViewIdDefault(defaultViewId: string): void;
  setFetchGraphQlModules(modules: FetchGraphQL[]): void;
}

Example

import { getCatalogViewContext, getCatalogViewHeaderManager } from '/@dropins/storefront-company-switcher/api.js';

// Get the manager instance
const manager = getCatalogViewHeaderManager();

// Fetch the current catalog view context and apply its headers
const context = await getCatalogViewContext();
manager.setCatalogViewHeaders(context);

// Subsequent requests use the catalog view headers
await loadProducts();

// Remove catalog view headers (resets to the default/public view)
manager.removeCatalogViewHeaders();

// Check if headers are set
if (manager.isCatalogViewHeaderSet()) {
  console.log('Catalog view context is active');
}

getCompanyHeaderManager

Returns the singleton CompanyHeaderManager instance that manages company-specific headers for all configured GraphQL modules. Use the returned manager to set, remove, or check company headers.

function getCompanyHeaderManager(): any

Caution

After calling manager.setCompanyHeaders(), all subsequent GraphQL requests will operate in the context of the specified company. Ensure you refresh all company-dependent data after switching companies.

Note

Passing null to setCompanyHeaders() removes the company context headers from all GraphQL requests. This is useful when logging out or switching to a non-company user context.

Tip

The CompanyHeaderManager is a singleton. Calling getCompanyHeaderManager() multiple times returns the same instance, ensuring consistent header management across your application.

Usage scenarios

• Switch between companies for multi-company users.
• Set company context after user selection.
• Initialize company context on page load.
• Change active company from a dropdown selector.
• Restore company context from session storage.
• Remove company context by passing null.
• Check the current company header state.
• Configure custom header keys dynamically.

Events

The manager’s setCompanyHeaders() method emits the companyContext/changed event after successfully setting or removing the company headers.

Returns

Returns a CompanyHeaderManager instance with the following methods:

{
  setCompanyHeaders(companyId: string | null): void;
  removeCompanyHeaders(): void;
  isCompanyHeaderSet(): boolean;
  setHeaderKey(headerKey: string): void;
  setFetchGraphQlModules(modules: FetchGraphQL[]): void;
}

Example

import { getCompanyHeaderManager } from '/@dropins/storefront-company-switcher/api.js';
import { events } from '/@dropins/tools/event-bus.js';

// Get the manager instance
const manager = getCompanyHeaderManager();

// Switch to a specific company
manager.setCompanyHeaders('company-123');

// Remove company headers (switch to no-company context)
manager.setCompanyHeaders(null);

// Check if headers are set
if (manager.isCompanyHeaderSet()) {
  console.log('Company context is active');
}

// Listen for context changes
events.on('companyContext/changed', (companyId) => {
  if (companyId) {
    console.log('Switched to company:', companyId);
  } else {
    console.log('Company context removed');
  }

  // Refresh all company-dependent data
  refreshCompanyData();
});

getCustomerCompanyInfo

Retrieves the customer’s current company context information including the active company ID, company name, and list of available companies for the user.

function getCustomerCompanyInfo(): Promise<CustomerCompanyInfo>

Usage scenarios

• Determine which company is currently active.
• Load company-specific data on page load.
• Check if user has company access.
• Display current company information.
• Conditional rendering based on company context.
• Populate company dropdown selector with available companies.

Events

Does not emit any drop-in events.

Returns

Returns a Promise that resolves to a CustomerCompanyInfo object containing:

{
  currentCompany: {
    companyId: string;
    companyName: string;
  };
  customerCompanies: Array<{
    value: string;  // Company ID
    text: string;   // Company name
  }>;
}

Example

import { getCustomerCompanyInfo } from '/@dropins/storefront-company-switcher/api.js';

// Get current company context
const info = await getCustomerCompanyInfo();
console.log('Active company:', info.currentCompany.companyName);
console.log('Company ID:', info.currentCompany.companyId);
console.log('Available companies:', info.customerCompanies.length);

// Use context to load company-specific data
if (info.currentCompany.companyId) {
  loadCompanyData(info.currentCompany.companyId);
}

getGroupHeaderManager

Returns the singleton GroupHeaderManager instance that manages customer group headers for all configured GraphQL modules. Use the returned manager to set, remove, or check group headers for proper pricing and catalog visibility.

function getGroupHeaderManager(): any

Note

Customer group changes typically happen automatically based on the company context. You usually only need to call manager.setGroupHeaders() directly in advanced scenarios like admin impersonation or testing.

Tip

The GroupHeaderManager is a singleton. Calling getGroupHeaderManager() multiple times returns the same instance, ensuring consistent header management across your application.

Usage scenarios

• Set the customer group context for proper pricing.
• Apply group-specific catalog rules.
• Initialize the group context on login.
• Switch groups for testing or admin purposes.
• Coordinate with company context changes.
• Check current group header state.
• Configure custom header keys dynamically.

Events

Does not emit any drop-in events.

Returns

Returns a GroupHeaderManager instance with the following methods:

{
  setGroupHeaders(groupId: string | null): void;
  removeGroupHeaders(): void;
  isGroupHeaderSet(): boolean;
  setHeaderKey(headerKey: string): void;
  setFetchGraphQlModules(modules: FetchGraphQL[]): void;
}

Example

import { getGroupHeaderManager } from '/@dropins/storefront-company-switcher/api.js';

// Get the manager instance
const manager = getGroupHeaderManager();

// Set customer group for pricing
manager.setGroupHeaders('wholesale-group-id');

// Subsequent requests will use this group context
// Prices and catalog visibility will reflect group settings
await loadProducts(); // Products will show group-specific prices

// Remove group headers
manager.setGroupHeaders(null);

// Check if headers are set
if (manager.isGroupHeaderSet()) {
  console.log('Group context is active');
}

updateCustomerGroup

The updateCustomerGroup function updates the customer group context for the current shopper (for example, after company or role changes).

const updateCustomerGroup = async (): Promise<string | null>

Events

Does not emit any drop-in events.

Returns

Returns string | null.

Data models

The following data models are used by functions in this drop-in.

CustomerCompanyInfo

The CustomerCompanyInfo object is returned by the following functions: getCustomerCompanyInfo.

interface CustomerCompanyInfo {
  currentCompany: Company;
  customerCompanies: CompanyOption[];
  customerGroupId: string;
}

Integration with company context

The Company Switcher functions work together to manage the complete company and group context:

import {
  getCustomerCompanyInfo,
  getCompanyHeaderManager,
  getGroupHeaderManager
} from '/@dropins/storefront-company-switcher/api.js';

// Get manager instances
const companyManager = getCompanyHeaderManager();
const groupManager = getGroupHeaderManager();

// Complete company switch workflow
async function switchCompany(companyId, groupId) {
  // 1. Set the company headers
  companyManager.setCompanyHeaders(companyId);

  // 2. Set the group headers
  if (groupId) {
    groupManager.setGroupHeaders(groupId);
  }

  // 3. Verify the context
  const info = await getCustomerCompanyInfo();
  console.log('Switched to:', info.currentCompany.companyName);

  // 4. Refresh all company-dependent data
  await Promise.all([
    refreshPurchaseOrders(),
    refreshQuotes(),
    refreshRequisitionLists(),
    refreshCompanyUsers()
  ]);
}