|
| 1 | +# Contact Center Store (`@webex/cc-store`) |
| 2 | + |
| 3 | +## Overview |
| 4 | + |
| 5 | +`@webex/cc-store` is the shared, singleton MobX store for all Contact Center widgets. It holds global agent,session and task state, proxies SDK events, and exposes convenience APIs for fetching lists (queues, entry points, address book), task lifecycle handling, and common mutations. |
| 6 | + |
| 7 | +**Package:** `@webex/cc-store` |
| 8 | +**Version:** See package.json |
| 9 | + |
| 10 | +--- |
| 11 | + |
| 12 | +## Why and What is This Used For? |
| 13 | + |
| 14 | +### Purpose |
| 15 | + |
| 16 | +The store enables Contact Center widgets to: |
| 17 | +- **Initialize and register** with the Webex Contact Center SDK |
| 18 | +- **Observe global state** (teams, device type, login options, agent state, tasks and many more) |
| 19 | +- **Handle SDK events** (login, logout, multi-login, task lifecycle, agent state changes) |
| 20 | +- **Fetch domain data** (buddy agents, queues, entry points, address book) |
| 21 | +- **Centralize callbacks and error handling** for consistent behavior across widgets |
| 22 | + |
| 23 | +### Key Capabilities |
| 24 | + |
| 25 | +- **Singleton** state via MobX observables |
| 26 | +- **Event wiring** to SDK (TASK_EVENTS and CC_EVENTS) |
| 27 | +- **Task list management** and current task tracking |
| 28 | +- **Helpers** for buddy agents, queues, entry points, address book |
| 29 | +- **Error propagation** via `setOnError` |
| 30 | +- **Feature flags** parsing from SDK profile |
| 31 | + |
| 32 | +--- |
| 33 | + |
| 34 | +## Examples and Usage |
| 35 | + |
| 36 | +### Basic Initialization |
| 37 | + |
| 38 | +```typescript |
| 39 | +import store from '@webex/cc-store'; |
| 40 | + |
| 41 | +// Option A: If you already have a Webex instance, best for existing webex enabled apps |
| 42 | +await store.init({ |
| 43 | + webex: someWebexInstance, // must include cc |
| 44 | +}); |
| 45 | + |
| 46 | +// Option B: Let the store initialize Webex for you, best for new apps |
| 47 | +await store.init({ |
| 48 | + webexConfig: {/* sdk config */}, |
| 49 | + access_token: authToken, |
| 50 | +}); |
| 51 | +``` |
| 52 | + |
| 53 | +### Registration (when Webex is ready) |
| 54 | + |
| 55 | +```typescript |
| 56 | +// If you need explicit (re-)registration using an existing webex |
| 57 | +await store.registerCC(someWebexInstance); |
| 58 | +``` |
| 59 | + |
| 60 | +### Observing State in React |
| 61 | + |
| 62 | +```typescript |
| 63 | +import {observer} from 'mobx-react-lite'; |
| 64 | +import store from '@webex/cc-store'; |
| 65 | + |
| 66 | +const Header = observer(() => { |
| 67 | + return ( |
| 68 | + <div> |
| 69 | + <div>Agent ID: {store.agentId}</div> |
| 70 | + <div>Logged In: {store.isAgentLoggedIn ? 'Yes' : 'No'}</div> |
| 71 | + <div>Device: {store.deviceType}</div> |
| 72 | + <div>Team: {store.teamId}</div> |
| 73 | + </div> |
| 74 | + ); |
| 75 | +}); |
| 76 | +``` |
| 77 | + |
| 78 | +### Setting Up Error Callback |
| 79 | + |
| 80 | +```typescript |
| 81 | +import store from '@webex/cc-store'; |
| 82 | + |
| 83 | +store.setOnError((componentName, error) => { |
| 84 | + console.error(`Error from ${componentName}`, error); |
| 85 | + // forward to telemetry |
| 86 | +}); |
| 87 | +``` |
| 88 | + |
| 89 | +### Subscribing/Unsubscribing to SDK Events on contact center object |
| 90 | + |
| 91 | +```typescript |
| 92 | +import store, {CC_EVENTS, TASK_EVENTS} from '@webex/cc-store'; |
| 93 | + |
| 94 | +const onLogin = (payload) => console.log('Login success:', payload); |
| 95 | +store.setCCCallback(CC_EVENTS.AGENT_STATION_LOGIN_SUCCESS, onLogin); |
| 96 | + |
| 97 | +// Later |
| 98 | +store.removeCCCallback(CC_EVENTS.AGENT_STATION_LOGIN_SUCCESS); |
| 99 | +``` |
| 100 | + |
| 101 | +### Subscribing/Unsubscribing to Task Events on task object |
| 102 | + |
| 103 | +```typescript |
| 104 | +import store, {TASK_EVENTS} from '@webex/cc-store'; |
| 105 | + |
| 106 | +// Choose a task (e.g., current task) |
| 107 | +const taskId = store.currentTask?.data?.interactionId; |
| 108 | +if (taskId) { |
| 109 | + const handleMedia = (track) => { |
| 110 | + // e.g., use track for call control audio |
| 111 | + console.log('Media track received', track?.kind); |
| 112 | + }; |
| 113 | + |
| 114 | + // Subscribe to a task event |
| 115 | + store.setTaskCallback(TASK_EVENTS.TASK_MEDIA, handleMedia, taskId); |
| 116 | + |
| 117 | + // Later, unsubscribe |
| 118 | + store.removeTaskCallback(TASK_EVENTS.TASK_MEDIA, handleMedia, taskId); |
| 119 | +} |
| 120 | +``` |
| 121 | + |
| 122 | +### Fetching Lists |
| 123 | + |
| 124 | +```typescript |
| 125 | +// Buddy agents for current task media type |
| 126 | +const buddies = await store.getBuddyAgents(); |
| 127 | + |
| 128 | +// Queues for a channel |
| 129 | +const {data: queues} = await store.getQueues('TELEPHONY', {page: 0, pageSize: 25}); |
| 130 | + |
| 131 | +// Entry points |
| 132 | +const entryPoints = await store.getEntryPoints({page: 0, pageSize: 50}); |
| 133 | + |
| 134 | +// Address book (no-op if disabled) |
| 135 | +const addressBook = await store.getAddressBookEntries({page: 0, pageSize: 50}); |
| 136 | +``` |
| 137 | + |
| 138 | +### Mutating Common State |
| 139 | + |
| 140 | +```typescript |
| 141 | +store.setDeviceType('BROWSER'); |
| 142 | +store.setDialNumber('12345'); |
| 143 | +store.setTeamId('teamId123'); |
| 144 | +store.setState({id: 'Available', name: 'Available', isSystem: true, isDefault: true}); |
| 145 | +``` |
| 146 | + |
| 147 | +--- |
| 148 | + |
| 149 | +## Key API (Selected) |
| 150 | + |
| 151 | +Properties (observable via MobX): |
| 152 | +- `teams`, `loginOptions`, `idleCodes`, `wrapupCodes`, `featureFlags` |
| 153 | +- `agentId`, `agentProfile`, `isAgentLoggedIn`, `deviceType`, `dialNumber`, `teamId` |
| 154 | +- `currentTask`, `taskList`, `currentState`, `lastStateChangeTimestamp`, `lastIdleCodeChangeTimestamp` |
| 155 | +- `showMultipleLoginAlert`, `currentTheme`, `customState`, `isMuted`, `isAddressBookEnabled` |
| 156 | + |
| 157 | +Methods: |
| 158 | +- `init(params)`, `registerCC(webex?)` |
| 159 | +- `setOnError(cb)`, `setCCCallback(event, cb)`, `removeCCCallback(event)` |
| 160 | +- `refreshTaskList()`, `setCurrentTask(task, isClicked?)` |
| 161 | +- `setDeviceType(option)`, `setDialNumber(value)`, `setTeamId(id)` |
| 162 | +- `setCurrentState(stateId)`, `setState(state | {reset:true})` |
| 163 | +- `getBuddyAgents(mediaType?)`, `getQueues(mediaType?, params?)` |
| 164 | +- `getEntryPoints(params?)`, `getAddressBookEntries(params?)` |
| 165 | + |
| 166 | +For full types, see src/store.types.ts. |
| 167 | + |
| 168 | +--- |
| 169 | + |
| 170 | +## Dependencies |
| 171 | + |
| 172 | +See exact versions in package.json |
| 173 | + |
| 174 | +### Runtime |
| 175 | + |
| 176 | +| Package | Purpose | |
| 177 | +|---------|---------| |
| 178 | +| `@webex/contact-center` | SDK integration (methods/events) | |
| 179 | +| `mobx` | Observable state management | |
| 180 | + |
| 181 | +### Dev/Test |
| 182 | + |
| 183 | +TypeScript, Jest, ESLint, Webpack (see [package.json](../package.json)). |
| 184 | + |
| 185 | +--- |
| 186 | + |
| 187 | +## Installation |
| 188 | + |
| 189 | +```bash |
| 190 | +yarn add @webex/cc-store |
| 191 | +``` |
| 192 | + |
| 193 | +--- |
| 194 | + |
| 195 | +## Additional Resources |
| 196 | + |
| 197 | +For detailed store architecture, event flows, and sequence diagrams, see [architecture.md](./architecture.md). |
| 198 | + |
| 199 | +--- |
| 200 | + |
| 201 | +_Last Updated: 2025-11-26_ |
| 202 | + |
| 203 | + |
| 204 | + |
| 205 | + |
0 commit comments