From 57168f380a8a9d56c73e9e68ea5f2d78bfb84802 Mon Sep 17 00:00:00 2001
From: Kesava Krishnan Madavan <mkesavan13@gmail.com>
Date: Fri, 8 May 2026 11:05:52 +0530
Subject: [PATCH] docs(samples): disableWebRTCRegistration toggle

---
 .../cc/samples-cc-react-app/src/App.tsx       | 68 ++++++++++++++++++-
 1 file changed, 67 insertions(+), 1 deletion(-)

diff --git a/widgets-samples/cc/samples-cc-react-app/src/App.tsx b/widgets-samples/cc/samples-cc-react-app/src/App.tsx
index 8860bf10e..286c35bbe 100644
--- a/widgets-samples/cc/samples-cc-react-app/src/App.tsx
+++ b/widgets-samples/cc/samples-cc-react-app/src/App.tsx
@@ -90,6 +90,14 @@ 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 WEBRTC_DEPENDENT_WIDGETS = ['incomingTask', 'taskList', 'callControl', 'callControlCAD'];
+  const isWidgetDisabledByWebRTC = (widget: string) =>
+    disableWebRTCRegistration && WEBRTC_DEPENDENT_WIDGETS.includes(widget);
 
   const handleSaveStart = () => {
     setShowLoader(true);
@@ -138,6 +146,7 @@ function App() {
     },
     cc: {
       allowMultiLogin: isMultiLoginEnabled,
+      disableWebRTCRegistration,
     },
     ...(integrationEnv && {
       services: {
@@ -224,6 +233,17 @@ function App() {
     }
   };
 
+  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();
@@ -328,6 +348,9 @@ function App() {
           redirect_uri: redirectUri,
           scope: requestedScopes,
         },
+        cc: {
+          disableWebRTCRegistration,
+        },
       },
     };
 
@@ -365,6 +388,9 @@ function App() {
   useEffect(() => {
     window.localStorage.setItem('hideDesktopLogin', JSON.stringify(hideDesktopLogin));
   }, [hideDesktopLogin]);
+  useEffect(() => {
+    window.localStorage.setItem('disableWebRTCRegistration', JSON.stringify(disableWebRTCRegistration));
+  }, [disableWebRTCRegistration]);
 
   useEffect(() => {
     store.setIncomingTaskCb(onIncomingTaskCB);
@@ -526,6 +552,7 @@ function App() {
                               name={widget}
                               checked={selectedWidgets[widget]}
                               onChange={handleCheckboxChange}
+                              disabled={isWidgetDisabledByWebRTC(widget)}
                               data-testid={`samples:widget-${widget}`}
                             />
                             &nbsp;
@@ -633,7 +660,11 @@ 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
                             SDK. Changes to this setting after SDK initialization will not take effect. Please ensure
@@ -642,6 +673,41 @@ function App() {
                         </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"
+                            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>