-
Notifications
You must be signed in to change notification settings - Fork 68
fix(store,samples): support multi-login hydrate and WebRTC gating #703
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.
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
base: task-refactor
Are you sure you want to change the base?
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -88,6 +88,18 @@ function App() { | |
| const savedAllowInternationalDn = window.localStorage.getItem('allowInternationalDn'); | ||
| return savedAllowInternationalDn === 'true'; | ||
| }); | ||
| const [disableWebRTCRegistration, setDisableWebRTCRegistration] = useState(() => { | ||
| const savedDisableWebRTCRegistration = window.localStorage.getItem('disableWebRTCRegistration'); | ||
| return savedDisableWebRTCRegistration === 'true'; | ||
| }); | ||
| const [isWebRTCWidgetSelectionLocked, setIsWebRTCWidgetSelectionLocked] = useState(() => { | ||
| const savedDisableWebRTCRegistration = window.localStorage.getItem('disableWebRTCRegistration'); | ||
| return savedDisableWebRTCRegistration === 'true'; | ||
| }); | ||
|
|
||
| const WEBRTC_DEPENDENT_WIDGETS = ['incomingTask', 'taskList', 'callControl', 'callControlCAD']; | ||
| const isWidgetDisabledByWebRTC = (widget: string) => | ||
| isWebRTCWidgetSelectionLocked && WEBRTC_DEPENDENT_WIDGETS.includes(widget); | ||
|
Comment on lines
+100
to
+102
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
With Useful? React with 👍 / 👎. |
||
|
|
||
| const handleSaveStart = () => { | ||
| setShowLoader(true); | ||
|
|
@@ -136,6 +148,7 @@ function App() { | |
| }, | ||
| cc: { | ||
| allowMultiLogin: isMultiLoginEnabled, | ||
| disableWebRTCRegistration, | ||
| }, | ||
| ...(integrationEnv && { | ||
| services: { | ||
|
|
@@ -222,6 +235,26 @@ function App() { | |
| } | ||
| }; | ||
|
|
||
| const toggleDisableWebRTCRegistration = () => { | ||
| const newValue = !disableWebRTCRegistration; | ||
|
|
||
| if (!newValue) { | ||
| setDisableWebRTCRegistration(false); | ||
| return; | ||
| } | ||
|
|
||
| // Ensure dependent widgets are unchecked first, then lock their selection. | ||
| setIsWebRTCWidgetSelectionLocked(false); | ||
| setSelectedWidgets((prev) => { | ||
| const next = {...prev}; | ||
| WEBRTC_DEPENDENT_WIDGETS.forEach((widget) => { | ||
| next[widget] = false; | ||
| }); | ||
| return next; | ||
| }); | ||
| setDisableWebRTCRegistration(true); | ||
| }; | ||
|
|
||
| function playNotificationSound() { | ||
| const ctx = new AudioContext(); | ||
| const osc = ctx.createOscillator(); | ||
|
|
@@ -326,6 +359,9 @@ function App() { | |
| redirect_uri: redirectUri, | ||
| scope: requestedScopes, | ||
| }, | ||
| cc: { | ||
| disableWebRTCRegistration, | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
|
|
@@ -363,6 +399,36 @@ function App() { | |
| useEffect(() => { | ||
| window.localStorage.setItem('hideDesktopLogin', JSON.stringify(hideDesktopLogin)); | ||
| }, [hideDesktopLogin]); | ||
| useEffect(() => { | ||
| window.localStorage.setItem('disableWebRTCRegistration', JSON.stringify(disableWebRTCRegistration)); | ||
| }, [disableWebRTCRegistration]); | ||
|
|
||
| useEffect(() => { | ||
| if (!disableWebRTCRegistration) { | ||
| setIsWebRTCWidgetSelectionLocked(false); | ||
| return; | ||
| } | ||
|
|
||
| const hasDependentWidgetChecked = WEBRTC_DEPENDENT_WIDGETS.some((widget) => selectedWidgets[widget]); | ||
| if (hasDependentWidgetChecked) { | ||
| setSelectedWidgets((prev) => { | ||
| const next = {...prev}; | ||
| let changed = false; | ||
|
|
||
| WEBRTC_DEPENDENT_WIDGETS.forEach((widget) => { | ||
| if (next[widget]) { | ||
| next[widget] = false; | ||
| changed = true; | ||
| } | ||
| }); | ||
|
|
||
| return changed ? next : prev; | ||
| }); | ||
| return; | ||
| } | ||
|
|
||
| setIsWebRTCWidgetSelectionLocked(true); | ||
| }, [disableWebRTCRegistration, selectedWidgets]); | ||
|
|
||
| useEffect(() => { | ||
| store.setIncomingTaskCb(onIncomingTaskCB); | ||
|
|
@@ -524,6 +590,7 @@ function App() { | |
| name={widget} | ||
| checked={selectedWidgets[widget]} | ||
| onChange={handleCheckboxChange} | ||
| disabled={isWidgetDisabledByWebRTC(widget)} | ||
| data-testid={`samples:widget-${widget}`} | ||
| /> | ||
| | ||
|
|
@@ -542,7 +609,7 @@ function App() { | |
| 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 | ||
| accept via an Extension, Dial Number, or Browser. It is recommended to have the | ||
| incoming task/task list widget and call controls widget according to your needs. | ||
| </div> | ||
| </Text> | ||
|
|
@@ -631,11 +698,50 @@ function App() { | |
| <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 | ||
| <strong>Note:</strong> The Enable Multi Login option must be set before initializing the | ||
| SDK. Changes to this setting after SDK initialization will not take effect. Please ensure | ||
| you configure this option before clicking the "Init Widgets" button. | ||
| you configure this option before clicking the Init Widgets button. | ||
| </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} | ||
| />{' '} | ||
| 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 | ||
| 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> | ||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
When
task:multiLoginHydratecarries one of the SDK task-class payloads supported by the newgetInteractionId()/getInteractionState()fallbacks, passing the raw object intohandleTaskAssignedstores it ascurrentTask. The rest of the store/widgets still readtask.data.*, so a class payload without legacydatawill crash on the next refresh/render instead of hydrating the mirrored session; normalize to the legacy shape or keep all downstream access class-safe.Useful? React with 👍 / 👎.