From 0215461bc94003fe36ba5eb09b7e2da5f44ada07 Mon Sep 17 00:00:00 2001
From: Ravi Chandra Sekhar Sarika <rsarika@cisco.com>
Date: Thu, 3 Jul 2025 22:49:57 +0530
Subject: [PATCH 1/5] feat(cc-widgets): integ env

---
 .../cc/samples-cc-react-app/src/App.tsx       | 44 ++++++++++++++-----
 1 file changed, 32 insertions(+), 12 deletions(-)

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 a9018925..11f6eb9d 100644
--- a/widgets-samples/cc/samples-cc-react-app/src/App.tsx
+++ b/widgets-samples/cc/samples-cc-react-app/src/App.tsx
@@ -59,7 +59,7 @@ function App() {
 
   const [collapsedTasks, setCollapsedTasks] = React.useState([]);
   const [showLoader, setShowLoader] = useState(false);
-  const [toast, setToast] = useState<{type: 'success' | 'error'}|null>(null);
+  const [integrationEnvironment, setIntegrationEnvironment] = useState(false);
 
   const handleSaveStart = () => {
   setShowLoader(true);
@@ -115,6 +115,13 @@ const handleSaveEnd = (isComplete: boolean) => {
     cc: {
       allowMultiLogin: isMultiLoginEnabled,
     },
+    ...(integrationEnvironment && {
+      services: {
+        discovery: {
+          u2c: 'https://u2c-intb.ciscospark.com/u2c/api/v1',
+        },
+      },
+    }),
   };
 
   const onLogin = () => {
@@ -280,18 +287,21 @@ const onTaskDeclined = (task,reason) => {
 
     const webexConfig = {
       config: {
-        "appName": "sdk-samples",
-        "appPlatform": "testClient",
-        "fedramp": false,
-        "logger": {
-          "level": "info"
+        appName: 'sdk-samples',
+        appPlatform: 'testClient',
+        fedramp: false,
+        logger: {
+          level: 'info',
         },
-        "credentials": {
-          "client_id": "C04ef08ffce356c3161bb66b15dbdd98d26b6c683c5ce1a1a89efad545fdadd74",
-          "redirect_uri": redirectUri,
-          "scope": requestedScopes,
-        }
-      }
+        credentials: {
+          ...(integrationEnvironment && {authorizeUrl: 'https://idbrokerbts.webex.com/idb/oauth2/v1/authorize'}),
+          client_id: integrationEnvironment
+            ? 'Cd0dd53db1f470a5a9941e5eee31575bd0889d7006e3a80a1443ad12a42049da1'
+            : 'C04ef08ffce356c3161bb66b15dbdd98d26b6c683c5ce1a1a89efad545fdadd74',
+          redirect_uri: redirectUri,
+          scope: requestedScopes,
+        },
+      },
     };
 
     const webex = Webex.init(webexConfig);
@@ -527,6 +537,16 @@ const onTaskDeclined = (task,reason) => {
                         setDoStationLogout(!doStationLogout);
                       }}
                     />
+                    <Checkbox
+                      checked={integrationEnvironment}
+                      aria-label="integration environment checkbox"
+                      id="integration-environment-checkbox"
+                      label="Enable Integration Environment"
+                      // @ts-expect-error: TODO: https://github.com/momentum-design/momentum-design/pull/1118
+                      onchange={() => {
+                        setIntegrationEnvironment(!integrationEnvironment);
+                      }}
+                    />
                     {store.isAgentLoggedIn && (
                       <Button id="logoutAgent" onClick={stationLogout} color="positive" className='stationLogoutButtonClass' data-testid="samples:station-logout-button">
                         Station Logout

From dbcf86456413921bca9b0bccf0dae6cdc3bae53c Mon Sep 17 00:00:00 2001
From: Ravi Chandra Sekhar Sarika <rsarika@cisco.com>
Date: Fri, 4 Jul 2025 08:33:50 +0530
Subject: [PATCH 2/5] fix: build error

---
 widgets-samples/cc/samples-cc-react-app/src/App.tsx | 1 +
 1 file changed, 1 insertion(+)

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 11f6eb9d..19284c76 100644
--- a/widgets-samples/cc/samples-cc-react-app/src/App.tsx
+++ b/widgets-samples/cc/samples-cc-react-app/src/App.tsx
@@ -59,6 +59,7 @@ function App() {
 
   const [collapsedTasks, setCollapsedTasks] = React.useState([]);
   const [showLoader, setShowLoader] = useState(false);
+  const [toast, setToast] = useState<{type: 'success' | 'error'} | null>(null);
   const [integrationEnvironment, setIntegrationEnvironment] = useState(false);
 
   const handleSaveStart = () => {

From 90f6496bdc8bbf52e3496b84ff9e8290308ca820 Mon Sep 17 00:00:00 2001
From: Ravi Chandra Sekhar Sarika <rsarika@cisco.com>
Date: Fri, 4 Jul 2025 08:44:08 +0530
Subject: [PATCH 3/5] fix: add integ to sample app wc

---
 widgets-samples/cc/samples-cc-wc-app/app.js   | 35 ++++++++++++++++++-
 .../cc/samples-cc-wc-app/index.html           |  2 ++
 2 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/widgets-samples/cc/samples-cc-wc-app/app.js b/widgets-samples/cc/samples-cc-wc-app/app.js
index e8e9847d..ec75daa2 100644
--- a/widgets-samples/cc/samples-cc-wc-app/app.js
+++ b/widgets-samples/cc/samples-cc-wc-app/app.js
@@ -2,6 +2,7 @@ const accessTokenElem = document.getElementById('access_token_elem');
 const oAuthLoginBtn = document.getElementById('oauth_login_btn');
 const loginTypeElem = document.getElementById('loginType');
 const themeElem = document.getElementById('theme');
+const integrationEnvironmentElem = document.getElementById('integrationEnvironment');
 const widgetsContainer = document.getElementById('widgets-container');
 const popupContainer = document.getElementById('popup-container');
 const taskRejectedSubmitButton = document.getElementById('task-rejected-submit-button');
@@ -25,6 +26,22 @@ const callControlCADCheckbox = document.getElementById('callControlCADCheckbox')
 const outdialCallCheckbox = document.getElementById('outdialCallCheckbox');
 
 let isMultiLoginEnabled = false;
+let integrationEnvironment = false;
+
+// Load integration environment setting from localStorage on page load
+function loadIntegrationEnvironmentSetting() {
+  const savedIntegrationEnv = localStorage.getItem('integrationEnvironment');
+  if (savedIntegrationEnv) {
+    integrationEnvironment = JSON.parse(savedIntegrationEnv);
+    integrationEnvironmentElem.checked = integrationEnvironment;
+  }
+}
+
+function toggleIntegrationEnvironment() {
+  integrationEnvironment = integrationEnvironmentElem.checked;
+  // Store in localStorage for persistence
+  localStorage.setItem('integrationEnvironment', JSON.stringify(integrationEnvironment));
+}
 
 themeElem.addEventListener('change', () => {
   store.setCurrentTheme(themeElem.checked ? 'DARK' : 'LIGHT');
@@ -97,7 +114,10 @@ function doOAuthLogin() {
         level: 'info',
       },
       credentials: {
-        client_id: 'C04ef08ffce356c3161bb66b15dbdd98d26b6c683c5ce1a1a89efad545fdadd74',
+        ...(integrationEnvironment && {authorizeUrl: 'https://idbrokerbts.webex.com/idb/oauth2/v1/authorize'}),
+        client_id: integrationEnvironment
+          ? 'Cd0dd53db1f470a5a9941e5eee31575bd0889d7006e3a80a1443ad12a42049da1'
+          : 'C04ef08ffce356c3161bb66b15dbdd98d26b6c683c5ce1a1a89efad545fdadd74',
         redirect_uri: redirectUri,
         scope: requestedScopes,
       },
@@ -120,6 +140,7 @@ accessTokenElem.addEventListener('keyup', updateButtonState);
 
 window.addEventListener('load', () => {
   changeLoginType();
+  loadIntegrationEnvironmentSetting(); // Load the setting on page load
   if (window.location.hash) {
     const urlParams = new URLSearchParams(window.location.hash.replace('#', '?'));
 
@@ -150,6 +171,13 @@ function initWidgets() {
     cc: {
       allowMultiLogin: isMultiLoginEnabled,
     },
+    ...(integrationEnvironment && {
+      services: {
+        discovery: {
+          u2c: 'https://u2c-intb.ciscospark.com/u2c/api/v1',
+        },
+      },
+    }),
   };
   store
     .init({
@@ -322,3 +350,8 @@ function showTaskRejectedPopup(reason) {
   document.getElementById('task-rejected-reason').textContent = 'Reason: ' + (reason || 'No reason provided');
   popupContainer.style.display = 'block';
 }
+
+// Initialize integration environment setting on page load
+document.addEventListener('DOMContentLoaded', function () {
+  loadIntegrationEnvironmentSetting();
+});
diff --git a/widgets-samples/cc/samples-cc-wc-app/index.html b/widgets-samples/cc/samples-cc-wc-app/index.html
index 35732242..78c8ef0f 100644
--- a/widgets-samples/cc/samples-cc-wc-app/index.html
+++ b/widgets-samples/cc/samples-cc-wc-app/index.html
@@ -54,6 +54,8 @@ <h1>Contact Center widgets as web-component</h1>
           <br/>
           <input type="checkbox" id="theme" name="theme" /> Dark Theme
           <br />
+          <input type="checkbox" id="integrationEnvironment" name="integrationEnvironment" onchange="toggleIntegrationEnvironment()" /> Enable Integration Environment
+          <br />
           </div>
           <div class="warning-note" style="color: var(--mds-color-theme-text-error-normal); margin-bottom: 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 incoming task/task list widget and call controls widget according to your needs.

From e44f935dbdca8a7de7f94c755ed9321cc8c6fe59 Mon Sep 17 00:00:00 2001
From: Ravi Chandra Sekhar Sarika <rsarika@cisco.com>
Date: Fri, 4 Jul 2025 16:20:58 +0530
Subject: [PATCH 4/5] fix: comments

---
 .../cc/samples-cc-react-app/src/App.tsx       | 22 +++++++++------
 widgets-samples/cc/samples-cc-wc-app/app.js   | 28 +++++++++----------
 .../cc/samples-cc-wc-app/index.html           |  2 +-
 3 files changed, 29 insertions(+), 23 deletions(-)

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 19284c76..3080e4d7 100644
--- a/widgets-samples/cc/samples-cc-react-app/src/App.tsx
+++ b/widgets-samples/cc/samples-cc-react-app/src/App.tsx
@@ -60,7 +60,10 @@ function App() {
   const [collapsedTasks, setCollapsedTasks] = React.useState([]);
   const [showLoader, setShowLoader] = useState(false);
   const [toast, setToast] = useState<{type: 'success' | 'error'} | null>(null);
-  const [integrationEnvironment, setIntegrationEnvironment] = useState(false);
+  const [integrationEnv, setintegrationEnv] = useState(() => {
+    const savedintegrationEnv = window.localStorage.getItem('integrationEnv');
+    return savedintegrationEnv === 'true';
+  });
 
   const handleSaveStart = () => {
   setShowLoader(true);
@@ -295,8 +298,8 @@ const onTaskDeclined = (task,reason) => {
           level: 'info',
         },
         credentials: {
-          ...(integrationEnvironment && {authorizeUrl: 'https://idbrokerbts.webex.com/idb/oauth2/v1/authorize'}),
-          client_id: integrationEnvironment
+          ...(integrationEnv && {authorizeUrl: 'https://idbrokerbts.webex.com/idb/oauth2/v1/authorize'}),
+          client_id: integrationEnv
             ? 'Cd0dd53db1f470a5a9941e5eee31575bd0889d7006e3a80a1443ad12a42049da1'
             : 'C04ef08ffce356c3161bb66b15dbdd98d26b6c683c5ce1a1a89efad545fdadd74',
           redirect_uri: redirectUri,
@@ -330,6 +333,9 @@ const onTaskDeclined = (task,reason) => {
   useEffect(() => {
     window.localStorage.setItem('currentTheme', currentTheme);
   }, [currentTheme]);
+  useEffect(() => {
+    window.localStorage.setItem('integrationEnv', JSON.stringify(integrationEnv));
+  }, [integrationEnv]);
 
   useEffect(() => {
     store.setIncomingTaskCb(onIncomingTaskCB);
@@ -539,13 +545,13 @@ const onTaskDeclined = (task,reason) => {
                       }}
                     />
                     <Checkbox
-                      checked={integrationEnvironment}
-                      aria-label="integration environment checkbox"
-                      id="integration-environment-checkbox"
-                      label="Enable Integration Environment"
+                      checked={integrationEnv}
+                      aria-label="integration env checkbox"
+                      id="integration-env-checkbox"
+                      label="Enable Integration Env"
                       // @ts-expect-error: TODO: https://github.com/momentum-design/momentum-design/pull/1118
                       onchange={() => {
-                        setIntegrationEnvironment(!integrationEnvironment);
+                        setintegrationEnv(!integrationEnv);
                       }}
                     />
                     {store.isAgentLoggedIn && (
diff --git a/widgets-samples/cc/samples-cc-wc-app/app.js b/widgets-samples/cc/samples-cc-wc-app/app.js
index ec75daa2..df2aea98 100644
--- a/widgets-samples/cc/samples-cc-wc-app/app.js
+++ b/widgets-samples/cc/samples-cc-wc-app/app.js
@@ -2,7 +2,7 @@ const accessTokenElem = document.getElementById('access_token_elem');
 const oAuthLoginBtn = document.getElementById('oauth_login_btn');
 const loginTypeElem = document.getElementById('loginType');
 const themeElem = document.getElementById('theme');
-const integrationEnvironmentElem = document.getElementById('integrationEnvironment');
+const integrationEnvElem = document.getElementById('integrationEnv');
 const widgetsContainer = document.getElementById('widgets-container');
 const popupContainer = document.getElementById('popup-container');
 const taskRejectedSubmitButton = document.getElementById('task-rejected-submit-button');
@@ -26,21 +26,21 @@ const callControlCADCheckbox = document.getElementById('callControlCADCheckbox')
 const outdialCallCheckbox = document.getElementById('outdialCallCheckbox');
 
 let isMultiLoginEnabled = false;
-let integrationEnvironment = false;
+let integrationEnv = false;
 
 // Load integration environment setting from localStorage on page load
-function loadIntegrationEnvironmentSetting() {
-  const savedIntegrationEnv = localStorage.getItem('integrationEnvironment');
+function loadintegrationEnvSetting() {
+  const savedIntegrationEnv = localStorage.getItem('integrationEnv');
   if (savedIntegrationEnv) {
-    integrationEnvironment = JSON.parse(savedIntegrationEnv);
-    integrationEnvironmentElem.checked = integrationEnvironment;
+    integrationEnv = JSON.parse(savedIntegrationEnv);
+    integrationEnvElem.checked = integrationEnv;
   }
 }
 
-function toggleIntegrationEnvironment() {
-  integrationEnvironment = integrationEnvironmentElem.checked;
+function toggleintegrationEnv() {
+  integrationEnv = integrationEnvElem.checked;
   // Store in localStorage for persistence
-  localStorage.setItem('integrationEnvironment', JSON.stringify(integrationEnvironment));
+  localStorage.setItem('integrationEnv', JSON.stringify(integrationEnv));
 }
 
 themeElem.addEventListener('change', () => {
@@ -114,8 +114,8 @@ function doOAuthLogin() {
         level: 'info',
       },
       credentials: {
-        ...(integrationEnvironment && {authorizeUrl: 'https://idbrokerbts.webex.com/idb/oauth2/v1/authorize'}),
-        client_id: integrationEnvironment
+        ...(integrationEnv && {authorizeUrl: 'https://idbrokerbts.webex.com/idb/oauth2/v1/authorize'}),
+        client_id: integrationEnv
           ? 'Cd0dd53db1f470a5a9941e5eee31575bd0889d7006e3a80a1443ad12a42049da1'
           : 'C04ef08ffce356c3161bb66b15dbdd98d26b6c683c5ce1a1a89efad545fdadd74',
         redirect_uri: redirectUri,
@@ -140,7 +140,7 @@ accessTokenElem.addEventListener('keyup', updateButtonState);
 
 window.addEventListener('load', () => {
   changeLoginType();
-  loadIntegrationEnvironmentSetting(); // Load the setting on page load
+  loadintegrationEnvSetting(); // Load the setting on page load
   if (window.location.hash) {
     const urlParams = new URLSearchParams(window.location.hash.replace('#', '?'));
 
@@ -171,7 +171,7 @@ function initWidgets() {
     cc: {
       allowMultiLogin: isMultiLoginEnabled,
     },
-    ...(integrationEnvironment && {
+    ...(integrationEnv && {
       services: {
         discovery: {
           u2c: 'https://u2c-intb.ciscospark.com/u2c/api/v1',
@@ -353,5 +353,5 @@ function showTaskRejectedPopup(reason) {
 
 // Initialize integration environment setting on page load
 document.addEventListener('DOMContentLoaded', function () {
-  loadIntegrationEnvironmentSetting();
+  loadintegrationEnvSetting();
 });
diff --git a/widgets-samples/cc/samples-cc-wc-app/index.html b/widgets-samples/cc/samples-cc-wc-app/index.html
index 78c8ef0f..4f5d5d03 100644
--- a/widgets-samples/cc/samples-cc-wc-app/index.html
+++ b/widgets-samples/cc/samples-cc-wc-app/index.html
@@ -54,7 +54,7 @@ <h1>Contact Center widgets as web-component</h1>
           <br/>
           <input type="checkbox" id="theme" name="theme" /> Dark Theme
           <br />
-          <input type="checkbox" id="integrationEnvironment" name="integrationEnvironment" onchange="toggleIntegrationEnvironment()" /> Enable Integration Environment
+          <input type="checkbox" id="integrationEnv" name="integrationEnv" onchange="toggleintegrationEnv()" /> Enable Integration Env
           <br />
           </div>
           <div class="warning-note" style="color: var(--mds-color-theme-text-error-normal); margin-bottom: 10px">

From 3cb3e872477a24361c2773f420d0cb5381c1f8c1 Mon Sep 17 00:00:00 2001
From: Ravi Chandra Sekhar Sarika <rsarika@cisco.com>
Date: Fri, 4 Jul 2025 16:22:48 +0530
Subject: [PATCH 5/5] fix: comment

---
 widgets-samples/cc/samples-cc-react-app/src/App.tsx | 2 +-
 1 file changed, 1 insertion(+), 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 3080e4d7..df888810 100644
--- a/widgets-samples/cc/samples-cc-react-app/src/App.tsx
+++ b/widgets-samples/cc/samples-cc-react-app/src/App.tsx
@@ -119,7 +119,7 @@ const handleSaveEnd = (isComplete: boolean) => {
     cc: {
       allowMultiLogin: isMultiLoginEnabled,
     },
-    ...(integrationEnvironment && {
+    ...(integrationEnv && {
       services: {
         discovery: {
           u2c: 'https://u2c-intb.ciscospark.com/u2c/api/v1',