Skip to content

fix(cc-store): hydrate engaged state on multi-login events #694

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Shreyas281299 wants to merge 4 commits into
base: next
Choose a base branch
from
Open

fix(cc-store): hydrate engaged state on multi-login events #694

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
57168f3
docs(samples): disableWebRTCRegistration toggle
mkesavan13 May 8, 2026
fe87147
fix(cc-store): hydrate engaged state on multi-login events
Shreyas281299 Jun 4, 2026
267b456
Merge remote-tracking branch 'upstream/next' into mobius-reg-config
Shreyas281299 Jun 22, 2026
c5f7419
fix(store): update cc-sdk versions
Shreyas281299 Jun 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/contact-center/store/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
"deploy:npm": "yarn npm publish"
},
"dependencies": {
"@webex/contact-center": "3.12.0-next.42",
"@webex/contact-center": "3.12.0-next.68",
"mobx": "6.13.5",
"typescript": "5.6.3"
},
Expand Down
1 change: 1 addition & 0 deletions packages/contact-center/store/src/store.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -216,6 +216,7 @@ enum TASK_EVENTS {
TASK_WRAPUP = 'task:wrapup',
TASK_REJECT = 'task:rejected',
TASK_HYDRATE = 'task:hydrate',
TASK_MULTI_LOGIN_HYDRATE = 'task:multiLoginHydrate',
TASK_CONSULTING = 'task:consulting',
TASK_CONSULT_QUEUE_CANCELLED = 'task:consultQueueCancelled',
AGENT_CONTACT_ASSIGNED = 'AgentContactAssigned',
Expand Down
23 changes: 23 additions & 0 deletions packages/contact-center/store/src/storeEventsWrapper.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -824,6 +824,27 @@ class StoreWrapper implements IStoreWrapper {
this.refreshTaskList();
};

handleMultiLoginHydrate = (event) => {
const task = event as ITask;
const interactionId = task?.data?.interactionId;
const interactionState = task?.data?.interaction?.state;
if (interactionId && this.store.taskList[interactionId] && interactionState === 'new') {
return;
}

if (!task) {

@Kesari3008 Kesari3008 Jun 30, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This block should be the first block in the method and then the rest of the code since we are checking here the task object existing itself

this.store.logger.warn('CC-Widgets: handleMultiLoginHydrate(): task payload missing', {
module: 'storeEventsWrapper.ts',
method: 'handleMultiLoginHydrate',
});
return;
}

this.registerTaskEventListeners(task);
this.refreshTaskList();
this.handleTaskAssigned(task);

@chatgpt-codex-connector chatgpt-codex-connector Bot Jun 22, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Avoid marking new multi-login tasks engaged

When a task:multiLoginHydrate payload is still in interaction state new but this mirrored session has not yet refreshed store.taskList, it falls through to handleTaskAssigned(). That helper only keeps campaign previews reserved; for normal offered tasks it sets the custom state to ENGAGED, unlike the existing task:incoming/task:hydrate handling for new tasks. This can make a multi-login session show the agent as engaged before the offered interaction is accepted, so new payloads should not be sent through the assigned path unless they are actually accepted.

Useful? React with 👍 / 👎.

@lego0110 lego0110 Jun 29, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

function should mirror handleTaskHydrate's state-aware logic, including the consulting and isTerminated branches.

@Kesari3008 Kesari3008 Jun 30, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Won't registerTAsklistener setup Assigned event listener as well so as part of that handleTaskAssigned won't be invoked ? Why do we need to invoke it separately

};

handleTaskHydrate = (event) => {
const task = event;

Expand Down Expand Up @@ -1043,6 +1064,7 @@ class StoreWrapper implements IStoreWrapper {
method: 'setupIncomingTaskHandler#addEventListeners',
});
ccSDK.on(TASK_EVENTS.TASK_HYDRATE, this.handleTaskHydrate);
ccSDK.on(TASK_EVENTS.TASK_MULTI_LOGIN_HYDRATE, this.handleMultiLoginHydrate);
ccSDK.on(CC_EVENTS.AGENT_STATE_CHANGE, this.handleStateChange);
ccSDK.on(TASK_EVENTS.TASK_INCOMING, this.handleIncomingTask);
ccSDK.on(TASK_EVENTS.TASK_CAMPAIGN_PREVIEW_RESERVATION, this.handleIncomingCampaignPreview);
Expand All @@ -1057,6 +1079,7 @@ class StoreWrapper implements IStoreWrapper {
method: 'setupIncomingTaskHandler#removeEventListeners',
});
ccSDK.off(TASK_EVENTS.TASK_HYDRATE, this.handleTaskHydrate);
ccSDK.off(TASK_EVENTS.TASK_MULTI_LOGIN_HYDRATE, this.handleMultiLoginHydrate);
ccSDK.off(CC_EVENTS.AGENT_STATE_CHANGE, this.handleStateChange);
ccSDK.off(TASK_EVENTS.TASK_INCOMING, this.handleIncomingTask);
ccSDK.off(TASK_EVENTS.TASK_CAMPAIGN_PREVIEW_RESERVATION, this.handleIncomingCampaignPreview);
Expand Down
46 changes: 46 additions & 0 deletions packages/contact-center/store/tests/storeEventsWrapper.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1176,6 +1176,7 @@ describe('storeEventsWrapper', () => {
});

expect(onSpy).toHaveBeenCalledWith(TASK_EVENTS.TASK_HYDRATE, expect.any(Function));
expect(onSpy).toHaveBeenCalledWith(TASK_EVENTS.TASK_MULTI_LOGIN_HYDRATE, expect.any(Function));
expect(onSpy).toHaveBeenCalledWith(TASK_EVENTS.TASK_INCOMING, expect.any(Function));
expect(onSpy).toHaveBeenCalledWith(TASK_EVENTS.TASK_MERGED, expect.any(Function));
expect(onSpy).toHaveBeenCalledWith(CC_EVENTS.AGENT_STATE_CHANGE, expect.any(Function));
Expand Down Expand Up @@ -1601,6 +1602,50 @@ describe('storeEventsWrapper', () => {
});
});

it('should skip multiLoginHydrate when interaction already exists in taskList with new state', () => {
const interactionId = 'multi-hydrate-skip-1';
const task = {
data: {
interactionId,
interaction: {state: 'new'},
},
on: jest.fn(),
off: jest.fn(),
} as unknown as ITask;

storeWrapper['store'].taskList = {[interactionId]: task};

const refreshSpy = jest.spyOn(storeWrapper, 'refreshTaskList');
const assignedSpy = jest.spyOn(storeWrapper, 'handleTaskAssigned');

storeWrapper.handleMultiLoginHydrate(task);

expect(refreshSpy).not.toHaveBeenCalled();
expect(assignedSpy).not.toHaveBeenCalled();

@Kesari3008 Kesari3008 Jun 30, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are we not checking number of times these spies are called ? Just a common practice we followed for all our unit tests so general comment to keep the pattern consistent if possible

});

it('should process multiLoginHydrate when interaction state is connected', () => {
const interactionId = 'multi-hydrate-connected-1';
const task = {
data: {
interactionId,
interaction: {state: 'connected'},
},
on: jest.fn(),
off: jest.fn(),
} as unknown as ITask;

storeWrapper['store'].taskList = {[interactionId]: task};

const refreshSpy = jest.spyOn(storeWrapper, 'refreshTaskList');
const assignedSpy = jest.spyOn(storeWrapper, 'handleTaskAssigned');

storeWrapper.handleMultiLoginHydrate(task);

expect(refreshSpy).toHaveBeenCalled();
expect(assignedSpy).toHaveBeenCalledWith(task);
});

it('should handle hydrating the store with correct data', async () => {
const setCurrentTaskSpy = jest.spyOn(storeWrapper, 'setCurrentTask');
const refreshTaskListSpy = jest.spyOn(storeWrapper, 'refreshTaskList');
Expand Down Expand Up @@ -1665,6 +1710,7 @@ describe('storeEventsWrapper', () => {
});

expect(storeWrapper['cc'].off).toHaveBeenCalledWith(TASK_EVENTS.TASK_HYDRATE, expect.any(Function));
expect(storeWrapper['cc'].off).toHaveBeenCalledWith(TASK_EVENTS.TASK_MULTI_LOGIN_HYDRATE, expect.any(Function));
expect(storeWrapper['cc'].off).toHaveBeenCalledWith(TASK_EVENTS.TASK_INCOMING, expect.any(Function));
expect(storeWrapper['cc'].off).toHaveBeenCalledWith(TASK_EVENTS.TASK_MERGED, expect.any(Function));
expect(storeWrapper['cc'].off).toHaveBeenCalledWith(CC_EVENTS.AGENT_STATE_CHANGE, expect.any(Function));
Expand Down
68 changes: 67 additions & 1 deletion widgets-samples/cc/samples-cc-react-app/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,14 @@
const savedAllowInternationalDn = window.localStorage.getItem('allowInternationalDn');
return savedAllowInternationalDn === 'true';
});
const [disableWebRTCRegistration, setDisableWebRTCRegistration] = useState(() => {
const savedDisableWebRTCRegistration = window.localStorage.getItem('disableWebRTCRegistration');
return savedDisableWebRTCRegistration === 'true';
});

const WEBRTC_DEPENDENT_WIDGETS = ['incomingTask', 'taskList', 'callControl', 'callControlCAD'];
const isWidgetDisabledByWebRTC = (widget: string) =>
disableWebRTCRegistration && WEBRTC_DEPENDENT_WIDGETS.includes(widget);

const handleSaveStart = () => {
setShowLoader(true);
Expand Down Expand Up @@ -140,6 +148,7 @@
},
cc: {
allowMultiLogin: isMultiLoginEnabled,
disableWebRTCRegistration,
},
...(integrationEnv && {
services: {
Expand Down Expand Up @@ -226,6 +235,17 @@
}
};

const toggleDisableWebRTCRegistration = () => {
const newValue = !disableWebRTCRegistration;
setDisableWebRTCRegistration(newValue);
if (newValue) {
setSelectedWidgets((prev) => ({
...prev,
...WEBRTC_DEPENDENT_WIDGETS.reduce((acc, w) => ({...acc, [w]: false}), {}),
}));
}
};

function playNotificationSound() {
const ctx = new AudioContext();
const osc = ctx.createOscillator();
Expand Down Expand Up @@ -330,6 +350,9 @@
redirect_uri: redirectUri,
scope: requestedScopes,
},
cc: {
disableWebRTCRegistration,
},
},
};

Expand Down Expand Up @@ -367,6 +390,9 @@
useEffect(() => {
window.localStorage.setItem('hideDesktopLogin', JSON.stringify(hideDesktopLogin));
}, [hideDesktopLogin]);
useEffect(() => {
window.localStorage.setItem('disableWebRTCRegistration', JSON.stringify(disableWebRTCRegistration));
}, [disableWebRTCRegistration]);

useEffect(() => {
store.setIncomingTaskCb(onIncomingTaskCB);
Expand Down Expand Up @@ -528,6 +554,7 @@
name={widget}
checked={selectedWidgets[widget]}
onChange={handleCheckboxChange}
disabled={isWidgetDisabledByWebRTC(widget)}
data-testid={`samples:widget-${widget}`}
/>
 
Expand All @@ -546,7 +573,7 @@
style={{color: 'var(--mds-color-theme-text-error-normal)', marginBottom: '10px'}}
>
<strong>Note:</strong> When a number is dialed, the agent gets an incoming task to
accept via an Extension, Dial Number, or Browser. It's recommended to have the

Check warning on line 576 in widgets-samples/cc/samples-cc-react-app/src/App.tsx

View workflow job for this annotation

GitHub Actions / linter 

`'` can be escaped with `&apos;`, `&lsquo;`, `&#39;`, `&rsquo;`
incoming task/task list widget and call controls widget according to your needs.
</div>
</Text>
Expand Down Expand Up @@ -635,15 +662,54 @@
<Text>
<div
className="warning-note"
style={{color: 'var(--mds-color-theme-text-error-normal)', marginBottom: '10px'}}
style={{
color: 'var(--mds-color-theme-text-error-normal)',
marginBottom: '10px',
maxWidth: '320px',
}}
>
<strong>Note:</strong> The "Enable Multi Login" option must be set before initializing the

Check warning on line 671 in widgets-samples/cc/samples-cc-react-app/src/App.tsx

View workflow job for this annotation

GitHub Actions / linter 

`"` can be escaped with `&quot;`, `&ldquo;`, `&#34;`, `&rdquo;`

Check warning on line 671 in widgets-samples/cc/samples-cc-react-app/src/App.tsx

View workflow job for this annotation

GitHub Actions / linter 

`"` can be escaped with `&quot;`, `&ldquo;`, `&#34;`, `&rdquo;`
SDK. Changes to this setting after SDK initialization will not take effect. Please ensure
you configure this option before clicking the "Init Widgets" button.

Check warning on line 673 in widgets-samples/cc/samples-cc-react-app/src/App.tsx

View workflow job for this annotation

GitHub Actions / linter 

`"` can be escaped with `&quot;`, `&ldquo;`, `&#34;`, `&rdquo;`

Check warning on line 673 in widgets-samples/cc/samples-cc-react-app/src/App.tsx

View workflow job for this annotation

GitHub Actions / linter 

`"` can be escaped with `&quot;`, `&ldquo;`, `&#34;`, `&rdquo;`
</div>
</Text>
</PopoverNext>
</label>
<label style={{display: 'flex', flexDirection: 'row', alignItems: 'center', marginTop: '10px'}}>
<input
data-testid="samples:disable-webrtc-registration-checkbox"
type="checkbox"
id="disableWebRTCRegistrationFlag"
name="disableWebRTCRegistrationFlag"
onChange={toggleDisableWebRTCRegistration}
checked={disableWebRTCRegistration}
/>{' '}
&nbsp; Disable WebRTC Registration
<PopoverNext
trigger="mouseenter"
triggerComponent={<Icon name="info-badge-filled" />}
placement="auto-end"
closeButtonPlacement="top-left"
closeButtonProps={{'aria-label': 'Close'}}
>
<Text>
<div
className="warning-note"
style={{
color: 'var(--mds-color-theme-text-error-normal)',
marginBottom: '10px',
maxWidth: '320px',
}}
>
<strong>Note:</strong> Disabling WebRTC registration prevents browser-based calling. When
enabled, the "Incoming Task", "Task List", "Call Control", and "Call Control with CAD"

Check warning on line 705 in widgets-samples/cc/samples-cc-react-app/src/App.tsx

View workflow job for this annotation

GitHub Actions / linter 

`"` can be escaped with `&quot;`, `&ldquo;`, `&#34;`, `&rdquo;`

Check warning on line 705 in widgets-samples/cc/samples-cc-react-app/src/App.tsx

View workflow job for this annotation

GitHub Actions / linter 

`"` can be escaped with `&quot;`, `&ldquo;`, `&#34;`, `&rdquo;`

Check warning on line 705 in widgets-samples/cc/samples-cc-react-app/src/App.tsx

View workflow job for this annotation

GitHub Actions / linter 

`"` can be escaped with `&quot;`, `&ldquo;`, `&#34;`, `&rdquo;`

Check warning on line 705 in widgets-samples/cc/samples-cc-react-app/src/App.tsx

View workflow job for this annotation

GitHub Actions / linter 

`"` can be escaped with `&quot;`, `&ldquo;`, `&#34;`, `&rdquo;`

Check warning on line 705 in widgets-samples/cc/samples-cc-react-app/src/App.tsx

View workflow job for this annotation

GitHub Actions / linter 

`"` can be escaped with `&quot;`, `&ldquo;`, `&#34;`, `&rdquo;`
widgets will be unchecked and disabled because they depend on call handling. Set this
option before clicking the "Init Widgets" button — changes after SDK initialization will
not take effect.
</div>
</Text>
</PopoverNext>
</label>
</fieldset>
</section>
</div>
Expand Down
Loading
Loading