Company Management Data & Events

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

Version: 1.0.0-beta19

Events reference

Event	Direction	Description
company/updated	Emits	Emitted when the component state is updated.
companyStructure/updated	Emits	Emitted when the component state is updated.
companyContext/changed	Listens	Fired by Company Context (`companyContext`) when a change occurs.

Event details

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

`company/updated` (emits)

Emitted when the component state is updated.

Event payload

1
{ company?: unknown; message?: string; error?: unknown }

When triggered

After successful company profile update
After updating company legal address
After updating company contact information
After updating sales representative information

Example 1: Basic company update handler

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

3
// Listen for company updates
4
events.on('company/updated', (payload) => {
5
  console.log('Company updated:', payload.data);
6

7
  // Update UI or trigger other actions
8
  refreshCompanyDisplay();
9
});

Example 2: Update with notification and error handling

1
import { events } from '@dropins/tools/event-bus.js';
2
import { updateCompany } from '@dropins/storefront-company-management/api.js';
3

4
async function updateCompanyProfile(updates) {
5
  try {
6
    // Show loading state
7
    showLoadingIndicator('Updating company profile...');
8

9
    // Update the company
10
    await updateCompany(updates);
11

12
    // Listen for successful update
13
    events.once('company/updated', (payload) => {
14
      hideLoadingIndicator();
15
      showSuccessNotification('Company profile updated successfully');
16

17
      // Update the displayed company information
18
      document.querySelector('.company-name').textContent = payload.data.companyName;
19
      document.querySelector('.company-email').textContent = payload.data.email;
20

21
      // Track the update in analytics
22
      trackEvent('company_profile_updated', {
23
        companyId: payload.data.id,
24
        fieldsUpdated: Object.keys(updates)
25
      });
26
    });
27

28
  } catch (error) {
29
    hideLoadingIndicator();
30
    showErrorNotification('Failed to update company profile: ' + error.message);
31
    console.error('Company update error:', error);
32
  }
33
}
34

35
// Usage
36
updateCompanyProfile({
37
  companyName: 'Acme Corporation',
38
  email: 'info@acme.com',
39
  telephone: '+1-555-0123'
40
});

Example 3: Real-time multi-component sync

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

3
// Central company data manager
4
class CompanyDataManager {
5
  constructor() {
6
    this.subscribers = [];
7

8
    // Listen for company updates
9
    events.on('company/updated', this.handleCompanyUpdate.bind(this));
10
  }
11

12
  handleCompanyUpdate(payload) {
13
    const companyData = payload.data;
14

15
    // Update all subscribed components
16
    this.subscribers.forEach(callback => {
17
      try {
18
        callback(companyData);
19
      } catch (error) {
20
        console.error('Error updating subscriber:', error);
21
      }
22
    });
23

24
    // Update local storage for offline support
25
    localStorage.setItem('companyData', JSON.stringify(companyData));
26

27
    // Sync with external CRM
28
    this.syncWithCRM(companyData);
29
  }
30

31
  subscribe(callback) {
32
    this.subscribers.push(callback);
33
  }
34

35
  async syncWithCRM(companyData) {
36
    try {
37
      await fetch('/api/crm/update-company', {
38
        method: 'POST',
39
        headers: { 'Content-Type': 'application/json' },
40
        body: JSON.stringify(companyData)
41
      });
42
    } catch (error) {
43
      console.error('CRM sync failed:', error);
44
    }
45
  }
46
}
47

48
// Initialize manager
49
const companyManager = new CompanyDataManager();
50

51
// Subscribe components
52
companyManager.subscribe((data) => {
53
  // Update header component
54
  document.querySelector('.header-company-name').textContent = data.companyName;
55
});
56

57
companyManager.subscribe((data) => {
58
  // Update sidebar widget
59
  updateCompanySidebarWidget(data);
60
});

Usage scenarios

Refresh company profile display after edits.
Trigger analytics tracking for profile changes.
Update related UI components (headers, sidebars, widgets).
Sync company data with external systems (CRM, ERP).
Show success notifications to users.
Update cached data and local storage.
Refresh company-dependent permissions.
Update breadcrumbs and navigation with company name.

`companyContext/changed` (listens)

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

Event payload

1
string | null | undefined

Example

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

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

`companyStructure/updated` (emits)

Emitted when the component state is updated.

Event payload

1
{
2
  message?: string;
3
  action?: 'move' | 'remove' | 'add';
4
  nodeId?: string;
5
  newParentId?: string;
6
  nodeIds?: string[];
7
  nodes?: unknown[];
8
  error?: unknown;
9
}

When triggered

After creating a new team
After updating team information
After deleting a team
After creating a new user
After updating user details
After moving users between teams
After changing team hierarchy

Example 1: Interactive structure tree with live updates

1
import { events } from '@dropins/tools/event-bus.js';
2
import { getCompanyStructure } from '@dropins/storefront-company-management/api.js';
3

4
class CompanyStructureTree {
5
  constructor(containerElement) {
6
    this.container = containerElement;
7
    this.structureData = null;
8

9
    // Listen for structure updates
10
    events.on('companyStructure/updated', this.handleUpdate.bind(this));
11

12
    // Initial load
13
    this.loadStructure();
14
  }
15

16
  async loadStructure() {
17
    try {
18
      this.showLoading();
19
      this.structureData = await getCompanyStructure();
20
      this.render();
21
    } catch (error) {
22
      this.showError('Failed to load company structure');
23
      console.error(error);
24
    }
25
  }
26

27
  async handleUpdate(payload) {
28
    console.log('Structure updated:', payload.data);
29

30
    // Highlight the updated section
31
    const updatedNodeId = payload.data.updatedNodeId;
32
    if (updatedNodeId) {
33
      this.highlightNode(updatedNodeId);
34
    }
35

36
    // Reload the full structure
37
    await this.loadStructure();
38

39
    // Show success message
40
    this.showNotification('Organization structure updated', 'success');
41

42
    // Refresh permissions for all users in the tree
43
    await this.refreshPermissions();
44
  }
45

46
  highlightNode(nodeId) {
47
    const nodeElement = this.container.querySelector(`[data-node-id="${nodeId}"]`);
48
    if (nodeElement) {
49
      nodeElement.classList.add('highlight-update');
50
      setTimeout(() => nodeElement.classList.remove('highlight-update'), 2000);
51
    }
52
  }
53

54
  render() {
55
    // Render the structure tree
56
    this.container.innerHTML = this.buildTreeHTML(this.structureData);
57
    this.attachEventListeners();
58
  }
59

60
  buildTreeHTML(structure) {
61
    // Build hierarchical HTML for the structure
62
    return `<div class="structure-tree">...</div>`;
63
  }
64

65
  async refreshPermissions() {
66
    // Refresh permissions after structure change
67
    events.emit('permissions/refresh-needed');
68
  }
69

70
  showLoading() {
71
    this.container.innerHTML = '<div class="loading">Loading structure...</div>';
72
  }
73

74
  showError(message) {
75
    this.container.innerHTML = `<div class="error">${message}</div>`;
76
  }
77

78
  showNotification(message, type) {
79
    // Show toast notification
80
    const notification = document.createElement('div');
81
    notification.className = `notification notification-${type}`;
82
    notification.textContent = message;
83
    document.body.appendChild(notification);
84
    setTimeout(() => notification.remove(), 3000);
85
  }
86

87
  attachEventListeners() {
88
    // Add drag-and-drop, expand/collapse, etc.
89
  }
90
}
91

92
// Initialize the tree
93
const tree = new CompanyStructureTree(document.querySelector('#company-structure'));

Example 2: Team-based notification system

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

3
// Track structure changes and notify affected users
4
events.on('companyStructure/updated', async (payload) => {
5
  const { data } = payload;
6

7
  // Determine what changed
8
  const changeType = determineChangeType(data);
9

10
  switch (changeType) {
11
    case 'team-created':
12
      notifyTeamCreation(data.newTeam);
13
      break;
14
    case 'team-deleted':
15
      notifyTeamDeletion(data.deletedTeam);
16
      break;
17
    case 'user-moved':
18
      notifyUserReassignment(data.user, data.oldTeam, data.newTeam);
19
      break;
20
    case 'hierarchy-changed':
21
      notifyHierarchyChange(data.affectedTeams);
22
      break;
23
  }
24

25
  // Update all team-based UI components
26
  updateTeamSelectors();
27
  updateUserFilters();
28
  refreshTeamDashboards();
29

30
  // Log for audit trail
31
  logStructureChange({
32
    timestamp: new Date(),
33
    changeType,
34
    userId: getCurrentUserId(),
35
    details: data
36
  });
37
});
38

39
function determineChangeType(data) {
40
  // Logic to determine what type of change occurred
41
  if (data.newTeam) return 'team-created';
42
  if (data.deletedTeam) return 'team-deleted';
43
  if (data.userMoved) return 'user-moved';
44
  return 'hierarchy-changed';
45
}
46

47
async function notifyUserReassignment(user, oldTeam, newTeam) {
48
  const message = `${user.name} has been moved from ${oldTeam.name} to ${newTeam.name}`;
49

50
  // Notify team managers
51
  await sendNotification([oldTeam.managerId, newTeam.managerId], message);
52

53
  // Notify the user
54
  await sendNotification([user.id], `You have been assigned to ${newTeam.name}`);
55

56
  // Update UI
57
  showToast(message, 'info');
58
}
59

60
function logStructureChange(logEntry) {
61
  // Send to audit log
62
  fetch('/api/audit/log', {
63
    method: 'POST',
64
    headers: { 'Content-Type': 'application/json' },
65
    body: JSON.stringify(logEntry)
66
  });
67
}

Usage scenarios

Refresh the company structure tree display in real-time.
Update user access controls based on new hierarchy.
Trigger notifications to affected team members.
Log organizational changes for audit and compliance.
Update cached structure data and local storage.
Refresh team-based dropdowns and filters.
Update permission matrices after reassignments.
Highlight changes in the structure visualization.
Trigger workflow updates (approval chains, and so on).
Sync organizational structure with external HR systems.

Listening to events

All Company Management events are emitted through the centralized event bus. Subscribe to events using the events.on() method:

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

3
// Single event listener
4
events.on('company/updated', (payload) => {
5
  // Handle company update
6
});
7

8
// Multiple event listeners
9
events.on('company/updated', handleCompanyUpdate);
10
events.on('companyStructure/updated', handleStructureUpdate);
11

12
// Remove listeners when no longer needed
13
events.off('company/updated', handleCompanyUpdate);

Functions - API functions that emit these events
Containers - UI components that respond to events
Event bus documentation - Learn more about the event system

Company Management Data & Events

Events reference

Event details

company/updated (emits)

Event payload

When triggered

Example 1: Basic company update handler

Example 2: Update with notification and error handling

Example 3: Real-time multi-component sync

Usage scenarios

companyContext/changed (listens)

Event payload

Example

companyStructure/updated (emits)

Event payload

When triggered

Example 1: Interactive structure tree with live updates

Example 2: Team-based notification system

Usage scenarios

Listening to events

Related documentation

`company/updated` (emits)

`companyContext/changed` (listens)

`companyStructure/updated` (emits)