feat(cc-widgets): integ env

widgets-samples/cc/samples-cc-react-app/src/App.tsx

@@ -59,7 +59,11 @@
 
   const [collapsedTasks, setCollapsedTasks] = React.useState([]);
   const [showLoader, setShowLoader] = useState(false);
-  const [toast, setToast] = useState<{type: 'success' | 'error'}|null>(null);
+  const [toast, setToast] = useState<{type: 'success' | 'error'} | null>(null);
+  const [integrationEnv, setintegrationEnv] = useState(() => {
+    const savedintegrationEnv = window.localStorage.getItem('integrationEnv');
+    return savedintegrationEnv === 'true';
+  });
 
   const handleSaveStart = () => {
   setShowLoader(true);
@@ -115,6 +119,13 @@
     cc: {
       allowMultiLogin: isMultiLoginEnabled,
     },
+    ...(integrationEnv && {
+      services: {
+        discovery: {
+          u2c: 'https://u2c-intb.ciscospark.com/u2c/api/v1',
+        },
+      },
+    }),
   };
 
   const onLogin = () => {
@@ -280,18 +291,21 @@
 
     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: {
+          ...(integrationEnv && {authorizeUrl: 'https://idbrokerbts.webex.com/idb/oauth2/v1/authorize'}),
+          client_id: integrationEnv
+            ? 'Cd0dd53db1f470a5a9941e5eee31575bd0889d7006e3a80a1443ad12a42049da1'
+            : 'C04ef08ffce356c3161bb66b15dbdd98d26b6c683c5ce1a1a89efad545fdadd74',
+          redirect_uri: redirectUri,
+          scope: requestedScopes,
+        },
+      },
     };
 
     const webex = Webex.init(webexConfig);
@@ -319,6 +333,9 @@
   useEffect(() => {
     window.localStorage.setItem('currentTheme', currentTheme);
   }, [currentTheme]);
+  useEffect(() => {
+    window.localStorage.setItem('integrationEnv', JSON.stringify(integrationEnv));
+  }, [integrationEnv]);
 
   useEffect(() => {
     store.setIncomingTaskCb(onIncomingTaskCB);
@@ -475,7 +492,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
                                       incoming task/task list widget and call controls widget according to your needs.
                                     </div>
                                   </Text>
@@ -527,6 +544,16 @@
                         setDoStationLogout(!doStationLogout);
                       }}
                     />
+                    <Checkbox
+                      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={() => {
+                        setintegrationEnv(!integrationEnv);
+                      }}
+                    />
                     {store.isAgentLoggedIn && (
                       <Button id="logoutAgent" onClick={stationLogout} color="positive" className='stationLogoutButtonClass' data-testid="samples:station-logout-button">
                         Station Logout
@@ -560,9 +587,9 @@
                             className="warning-note"
                             style={{color: 'var(--mds-color-theme-text-error-normal)', marginBottom: '10px'}}
                           >
                             <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.
                           </div>
                         </Text>
                       </PopoverNext>

widgets-samples/cc/samples-cc-wc-app/app.js

@@ -2,6 +2,7 @@
 const oAuthLoginBtn = document.getElementById('oauth_login_btn');
 const loginTypeElem = document.getElementById('loginType');
 const themeElem = document.getElementById('theme');
+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');
@@ -25,16 +26,32 @@
 const outdialCallCheckbox = document.getElementById('outdialCallCheckbox');
 
 let isMultiLoginEnabled = false;
+let integrationEnv = false;
+
+// Load integration environment setting from localStorage on page load
+function loadintegrationEnvSetting() {
+  const savedIntegrationEnv = localStorage.getItem('integrationEnv');
+  if (savedIntegrationEnv) {
+    integrationEnv = JSON.parse(savedIntegrationEnv);
+    integrationEnvElem.checked = integrationEnv;
+  }
+}
+
+function toggleintegrationEnv() {
+  integrationEnv = integrationEnvElem.checked;
+  // Store in localStorage for persistence
+  localStorage.setItem('integrationEnv', JSON.stringify(integrationEnv));
+}
 
 themeElem.addEventListener('change', () => {
   store.setCurrentTheme(themeElem.checked ? 'DARK' : 'LIGHT');
   themeProviderElem.setAttribute(
     'themeclass',
     themeElem.checked ? 'mds-theme-stable-darkWebex' : 'mds-theme-stable-lightWebex'
   );
 });
 
 store.setTaskRejected(function (reason) {
   showTaskRejectedPopup(reason);
 });
 
@@ -63,12 +80,12 @@
   }
 }
 
 function enableMultiLogin() {
   if (isMultiLoginEnabled) isMultiLoginEnabled = false;
   else isMultiLoginEnabled = true;
 }
 
 function doOAuthLogin() {
   let redirectUri = `${window.location.protocol}//${window.location.host}`;
 
   if (window.location.pathname) {
@@ -97,7 +114,10 @@
         level: 'info',
       },
       credentials: {
-        client_id: 'C04ef08ffce356c3161bb66b15dbdd98d26b6c683c5ce1a1a89efad545fdadd74',
+        ...(integrationEnv && {authorizeUrl: 'https://idbrokerbts.webex.com/idb/oauth2/v1/authorize'}),
+        client_id: integrationEnv
+          ? 'Cd0dd53db1f470a5a9941e5eee31575bd0889d7006e3a80a1443ad12a42049da1'
+          : 'C04ef08ffce356c3161bb66b15dbdd98d26b6c683c5ce1a1a89efad545fdadd74',
         redirect_uri: redirectUri,
         scope: requestedScopes,
       },
@@ -120,6 +140,7 @@
 
 window.addEventListener('load', () => {
   changeLoginType();
+  loadintegrationEnvSetting(); // Load the setting on page load
   if (window.location.hash) {
     const urlParams = new URLSearchParams(window.location.hash.replace('#', '?'));
 
@@ -150,6 +171,13 @@
     cc: {
       allowMultiLogin: isMultiLoginEnabled,
     },
+    ...(integrationEnv && {
+      services: {
+        discovery: {
+          u2c: 'https://u2c-intb.ciscospark.com/u2c/api/v1',
+        },
+      },
+    }),
   };
   store
     .init({
@@ -322,3 +350,8 @@
   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 () {
+  loadintegrationEnvSetting();
+});

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="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">
             <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.