feat(widget-cc-station-login): Spark 575845 login widget

docs/react-samples/src/App.tsx

@@ -1,12 +1,38 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import store from '@webex/cc-store'
 import {StationLogin} from '@webex/cc-station-login';
 import {UserState} from '@webex/cc-user-state';
 
 function App() {
+  const token = '';
+
+  const webexConfig = {
+      fedramp: false,
+      logger: {
+      level: 'log'  // TODO: We will add more logging levels later and set the righ levels
+      },
+  }
+
+  useEffect(() => {
+    const init = async () => {
+      await store.init(webexConfig, token);
+    }
+
+    init();
+  }, []) 
+
+  const onLogin = () => {
+    console.log('Agent login has been succesful');
+  }
+
+  const onLogout = () => {
+    console.log('Agent logout has been succesful');
+  }
+
   return (
     <>
       <h1>Contact Center widgets in a react app</h1>
-      <StationLogin />
+      <StationLogin  onLogin={onLogin} onLogout={onLogout} />
       <UserState />
     </>
   );

docs/web-component-samples/index.html

@@ -11,4 +11,16 @@ <h1>Contact Center widgets as web-component</h1>
     <widget-cc-station-login></widget-cc-station-login>
     <widget-cc-user-state></widget-cc-user-state>
   </body>
+  <script>
+    const token = '';
+
+    const webexConfig = {
+        fedramp: false,
+        logger: {
+        level: 'log'  // TODO: We will add more logging levels later and set the righ levels
+        },
+    }
+
+    store.init(webexConfig, token);
+  </script>
 </html>

docs/web-component-samples/src/index.ts

@@ -1,2 +1,6 @@
+import store from '@webex/cc-store';
 import '@webex/cc-station-login';
 import '@webex/cc-user-state';
+
+//@ts-ignore
+window.store = store;

package.json

@@ -16,11 +16,18 @@
     "@semantic-release/exec": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/github": "^11.0.1",
+    "@testing-library/react-hooks": "^8.0.1",
+    "crypto-browserify": "^3.12.1",
     "html-webpack-plugin": "^5.6.3",
     "jest": "29.7.0",
     "node-gyp": "^10.2.0",
+    "os-browserify": "^0.3.0",
+    "process": "^0.11.10",
+    "querystring-es3": "^0.2.1",
     "semantic-release": "^24.2.0",
+    "stream-browserify": "^3.0.0",
     "typescript": "^5.6.3",
+    "vm-browserify": "^1.1.2",
     "webpack": "^5.96.1",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.1.0"

packages/contact-center/station-login/package.json

@@ -21,8 +21,7 @@
     "@webex/cc-store": "workspace:*",
     "mobx-react": "9.1.1",
     "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "typescript": "5.6.3"
+    "react-dom": "18.3.1"
   },
   "devDependencies": {
     "@babel/core": "7.25.2",
@@ -40,6 +39,7 @@
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "ts-loader": "9.5.1",
+    "typescript": "5.6.3",
     "webpack": "5.94.0",
     "webpack-cli": "5.1.4",
     "webpack-merge": "6.0.1"

packages/contact-center/station-login/src/helper.ts

@@ -1,3 +1,39 @@
-export const useStationLogin = () => {
-  return {name: 'StationLogin'};
-};
+import {useState} from "react";
+import {StationLoginSuccess, StationLogoutSuccess} from '@webex/plugin-cc';
+import {UseStationLoginProps} from "./station-login/station-login.types";
+
+export const useStationLogin = (props: UseStationLoginProps) => {
+  const cc = props.cc;
+  const loginCb = props.onLogin;
+  const logoutCb = props.onLogout;
+  const [dialNumber, setDialNumber] = useState('');
+  const [deviceType, setDeviceType] = useState('');
+  const [team, setTeam] = useState('');
+  const [loginSuccess, setLoginSuccess] = useState<StationLoginSuccess>();
+  const [loginFailure, setLoginFailure] = useState<Error>();
+  const [logoutSuccess, setLogoutSuccess] = useState<StationLogoutSuccess>();
+
+  const login = () => {
+    cc.stationLogin({teamId: team, loginOption: deviceType, dialNumber: dialNumber})
+      .then((res: StationLoginSuccess) => {
+        setLoginSuccess(res);
+        loginCb();
+      }).catch((error: Error) => {
+        console.error(error);
+        setLoginFailure(error);
+      });
+  };
+
+  const logout = () => {
+    cc.stationLogout({logoutReason: 'User requested logout'})
+      .then((res: StationLogoutSuccess) => {
+        setLogoutSuccess(res);
+        logoutCb();
+      }).catch((error: any) => {
+        console.error(error);
+      });
+  };
+
+  return {name: 'StationLogin', setDeviceType, setDialNumber, setTeam, login, logout, loginSuccess, loginFailure, logoutSuccess};
+}
+

packages/contact-center/station-login/src/station-login/index.tsx

@@ -5,17 +5,16 @@ import {observer} from 'mobx-react';
 
 import StationLoginPresentational from './station-login.presentational';
 import {useStationLogin} from '../helper';
+import { StationLoginProps } from './station-login.types';
 
-const StationLogin: React.FunctionComponent = observer(() => {
-  const {loginState, setLoginState, ccSdk, isAvailable} = store;
-  const result = useStationLogin();
+const StationLogin: React.FunctionComponent<StationLoginProps> = observer(({onLogin, onLogout}) => {
+  const {cc, teams, loginOptions} = store;
+  const result = useStationLogin({cc, onLogin, onLogout});
 
   const props = {
     ...result,
-    loginState,
-    setLoginState,
-    ccSdk,
-    isAvailable,
+    teams,
+    loginOptions
   };
   return <StationLoginPresentational {...props} />;
 });

packages/contact-center/station-login/src/station-login/station-login.presentational.tsx

@@ -1,14 +1,137 @@
-import React from 'react';
+import React, {useEffect} from 'react';
+import {StationLoginPresentationalProps} from './station-login.types';
 
-import {IStationLoginProps} from './station-login.types';
+const StationLoginPresentational: React.FunctionComponent<StationLoginPresentationalProps> = (props) => {
+  const {name, teams, loginOptions, login, logout, setDeviceType, setDialNumber, setTeam} = props; // TODO: Use the  loginSuccess, loginFailure, logoutSuccess props returned fromthe API response via helper file to reflect UI changes
+
+  useEffect(() => {
+    const teamsDropdown = document.getElementById('teamsDropdown') as HTMLSelectElement;
+    const agentLogin = document.querySelector('#LoginOption') as HTMLSelectElement;
+    const dialNumber = document.querySelector('#dialNumber') as HTMLInputElement;
+    if (teamsDropdown) {
+      teamsDropdown.innerHTML = '';
+      if (teams) {
+        teams.forEach((team) => {
+          const option = document.createElement('option');
+          option.value = team.id;
+          option.text = team.name;
+          teamsDropdown.add(option);
+        });
+        setTeam(teamsDropdown.value);
+        dialNumber.value = '';
+        dialNumber.disabled = true;
+      }
+    }
+    if (loginOptions.length > 0) {
+      loginOptions.forEach((options)=> {
+        const option = document.createElement('option');
+        option.text = options;
+        option.value = options;
+        agentLogin.add(option);
+      });
+    }
+  }, [teams, loginOptions]);
+
+  const selectLoginOption = (event: { target: { value: string; }; }) => {
+    const dialNumber = document.querySelector('#dialNumber') as HTMLInputElement;
+    const deviceType = event.target.value;
+    setDeviceType(deviceType);
+    if (deviceType === 'AGENT_DN' || deviceType === 'EXTENSION') {
+      dialNumber.disabled = false;
+    } else {
+      dialNumber.disabled = true;
+    }
+  };
+
+  function updateDN() {
+    const dialNumber = document.querySelector('#dialNumber') as HTMLInputElement;
+    setDialNumber(dialNumber.value);
+  }
+
+  const styles = {
+    box: {
+      backgroundColor: '#ffffff',
+      borderRadius: '8px',
+      boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
+      padding: '20px',
+      maxWidth: '800px',
+      margin: '0 auto'
+    },
+
+    sectionBox: {
+      padding: '10px',
+      border: '1px solid #ddd',
+      borderRadius: '8px'
+    },
+
+    fieldset:  {
+      border: '1px solid #ccc',
+      borderRadius: '5px',
+      padding: '10px',
+      marginBottom: '20px'
+    },
+
+    legendBox: {
+      fontWeight: 'bold',
+      color: '#0052bf'
+    },
+
+    btn: {
+      padding: '10px 20px',
+      backgroundColor: '#0052bf',
+      color: 'white',
+      border: 'none',
+      borderRadius: '4px',
+      cursor: 'pointer',
+      transition: 'background-color 0.3s',
+      marginRight: '8px' 
+    },
+
+    select: {
+      width: '100%',
+      padding: '8px',
+      marginTop: '8px',
+      marginBottom: '12px',
+      border: '1px solid #ccc',
+      borderRadius: '4px'
+    },
+
+    input: {
+      width: '97%',
+      padding: '8px',
+      marginTop: '8px',
+      marginBottom: '12px',
+      border: '1px solid #ccc',
+      borderRadius: '4px'
+    }
+  }
 
-const StationLoginPresentational: React.FunctionComponent<IStationLoginProps> = (props) => {
   return (
-    <>
-      <h1 data-testid="station-login-heading">{props.name}</h1>
-      <h4>Station Login State: {props.loginState}</h4>
-      <button onClick={() => props.setLoginState('Logged In')}>Click to change state</button>
-    </>
+    <><h1 data-testid="station-login-heading">{name}</h1>
+      <div style={styles.box}>
+      <section style={styles.sectionBox}>
+        <fieldset style={styles.fieldset}>
+        <legend style={styles.legendBox}>Agent</legend>
+          <div style={{ display: 'flex', flexDirection: 'column', flexGrow: 1 }}>
+            <div style={{ display: 'flex', gap: '1rem' }}>
+              <fieldset style={{border: '1px solid #ccc', borderRadius: '5px', padding: '10px', marginBottom: '20px', flex: 0.69 }}>
+                <legend style={styles.legendBox}>Select Team</legend>
+                <select id="teamsDropdown" style={styles.select}>Teams</select>
+              </fieldset>
+              <fieldset style={styles.fieldset}>
+                <legend style={styles.legendBox}>Agent Login</legend>
+                <select name="LoginOption" id="LoginOption" style={styles.select} onChange={selectLoginOption}>
+                  <option value="" selected hidden>Choose Agent Login Option...</option>
+                </select>
+                <input style={styles.input} id="dialNumber" name="dialNumber" placeholder="Extension/Dial Number" type="text" onInput={updateDN} />
+                <button id="AgentLogin" style={styles.btn} onClick={login}>Login</button>
+                <button id="logoutAgent" style={styles.btn} onClick={logout}>Logout</button>
+              </fieldset>
+            </div>
+          </div>
+        </fieldset> 
+      </section>
+    </div></>
   );
 };