Company Management initialization

The Company Management initializer configures the drop-in for managing company accounts, organizational structures, user roles, and permissions. Use initialization to customize how company data is displayed and enable internationalization for multi-language B2B storefronts.

Version: 1.0.0-beta27

Configuration options

The following table describes the configuration options available for the Company Management initializer:

Parameter	Type	Req?	Description
langDefinitions	LangDefinitions	No	Language definitions for internationalization (i18n). Override dictionary keys for localization or branding.
models	Record<string, any>	No	Custom data models for type transformations. Extend or modify default models with custom fields and transformers.

Default configuration

The initializer runs with these defaults when no configuration is provided:

import { initializers } from '@dropins/tools/initializer.js';
import { initialize } from '@dropins/storefront-company-management';

// All configuration options are optional
await initializers.mountImmediately(initialize, {
  langDefinitions: {}, // Uses built-in English strings
  models: {}, // Uses default data models

});

Language definitions

Override dictionary keys for localization or branding. The langDefinitions object maps locale keys to custom strings that override default text for the drop-in.

import { initializers } from '@dropins/tools/initializer.js';
import { initialize } from '@dropins/storefront-company-management';

const customStrings = {
  'Company.shared.fields.companyName': 'Organization Name',
  'Company.shared.buttons.save': 'Save Changes',
  'Company.CompanyProfile.containerTitle': 'Company Profile',
};

const langDefinitions = {
  default: customStrings,
};

await initializers.mountImmediately(initialize, { langDefinitions });

Tip

For complete dictionary customization including all available keys and multi-language support, see the Company Management Dictionary page.

Customizing data models

Extend or transform data models by providing custom transformer functions. Use the models option to add custom fields or modify existing data structures returned from the backend.

Available models

The following models can be customized through the models configuration option:

Model	Description
CompanyModel	Transforms company data from GraphQL including company profile, legal address, contact information, and settings. Use this to add custom fields or modify existing company data structures.
CompanyUserModel	Transforms company user data including user details, roles, permissions, and team assignments. Use this to add custom fields or modify user data structures.
CompanyStructureNode	Transforms company organizational structure data including teams, hierarchy, and user assignments. Use this to add custom fields or modify structure data.

The following example shows how to customize the CompanyModel model for the Company Management drop-in:

import { initializers } from '@dropins/tools/initializer.js';
import { initialize } from '@dropins/storefront-company-management';

const models = {
  CompanyModel: {
    transformer: (data) => ({
      // Add formatted display name with legal name fallback
      displayName: data?.legalName || data?.name,
      // Add admin contact full name
      adminFullName: data?.companyAdmin ?
        `${data.companyAdmin.firstName} ${data.companyAdmin.lastName}` : null,
      // Add formatted VAT/Tax ID display
      taxIdDisplay: data?.vatTaxId ? `VAT: ${data.vatTaxId}` : null,
    }),
  },
};

await initializers.mountImmediately(initialize, { models });

Configuration types

The following TypeScript definitions show the structure of each configuration object:

langDefinitions

Maps locale identifiers to dictionaries of key-value pairs. The default locale is used as the fallback when no specific locale matches. Each dictionary key corresponds to a text string used in the drop-in UI.

langDefinitions?: {
  [locale: string]: {
    [key: string]: string;
  };
};

models

Maps model names to transformer functions. Each transformer receives data from GraphQL and returns a modified or extended version. Use the Model<T> type from @dropins/tools to create type-safe transformers.

models?: {
  [modelName: string]: Model<any>;
};

Model definitions

The following TypeScript definitions show the structure of each customizable model:

CompanyModel

export interface CompanyModel extends Company {
  // Extended properties for UI and permissions (from Customer context)
  canEditAccount: boolean;
  canEditAddress: boolean;
  customerRole?: CompanyRoleModel;
  customerStatus?: string;
  permissionsFlags: {
    canViewAccount: boolean;
    canEditAccount: boolean;
    canViewAddress: boolean;
    canEditAddress: boolean;
    canViewContacts: boolean;
    canViewPaymentInformation: boolean;
    canViewShippingInformation: boolean;
    // Structure permissions for users/teams
    canViewUsers: boolean;
    canEditUsers: boolean;
    canViewRoles: boolean;
    canManageRoles: boolean;
  };
}

export interface Company {
  id: string;
  name: string;
  email: string;
  legalName?: string;
  vatTaxId?: string;
  resellerId?: string;
  legalAddress?: CompanyLegalAddressModel;
  companyAdmin?: CompanyContact;
  salesRepresentative?: CompanySalesRepresentative;
  availablePaymentMethods?: { code: string; title: string }[];
  availableShippingMethods?: { code: string; title: string }[];
}

CompanyUserModel

export interface CompanyUserModel extends CompanyUser {
  isCompanyAdmin?: boolean;
}

export interface CompanyUser {
  id: string;
  email: string;
  firstName: string;
  lastName: string;
  jobTitle?: string | null;
  telephone?: string | null;
  status?: string | null;
  role?: {
    id: string;
    name: string;
  } | null;
}

CompanyStructureNode

export interface CompanyStructureNode {
  id: string; // structure uid (base64)
  parentId: string | null; // structure uid (base64) or null for root
  label: string;
  type: CompanyStructureNodeType;
  entityId?: string; // entity uid for team/customer
  description?: string | null; // team description if available
}

export type CompanyStructureNodeType = 'team' | 'user';