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

package.json

@@ -11,9 +11,17 @@
   ],
   "packageManager": "[email protected]",
   "devDependencies": {
+    "@testing-library/react-hooks": "^8.0.1",
+    "crypto-browserify": "^3.12.1",
     "html-webpack-plugin": "^5.6.3",
+    "mini-css-extract-plugin": "^2.9.2",
     "node-gyp": "^10.2.0",
+    "os-browserify": "^0.3.0",
+    "process": "^0.11.10",
+    "querystring-es3": "^0.2.1",
+    "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

@@ -14,8 +14,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",
@@ -29,10 +28,15 @@
     "@types/react-test-renderer": "18",
     "babel-jest": "29.7.0",
     "babel-loader": "9.2.1",
+    "css-loader": "^7.1.2",
     "file-loader": "6.2.0",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
+    "sass": "1.69.5",
+    "sass-loader": "^16.0.3",
+    "style-loader": "^4.0.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,36 @@
-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 webex = props.webex;
+  const loginReqParam= props.loginReqParam;
+  const [loginSuccess, setLoginSuccess] = useState<StationLoginSuccess>();
+  const [loginFailure, setLoginFailure] = useState<Error>();
+  const [logoutSuccess, setLogoutSuccess] = useState<StationLogoutSuccess>();
+
+  const login = () => {
+    webex.cc.stationLogin({teamId: loginReqParam.teamId, loginOption: loginReqParam.loginOption, dialNumber: loginReqParam.dialNumber})
+      .then((res: StationLoginSuccess) => {
+        console.log('Successful Agent login: ', res);
+        setLoginSuccess(res);
+
+      }).catch((error: Error) => {
+        console.error(error);
+        setLoginFailure(error);
+      });
+  };
+
+  const logout = () => {
+    webex.cc.stationLogout({logoutReason: 'User requested logout'})
+      .then((res: StationLogoutSuccess) => {
+        console.log('Successful Agent logout: ', res);
+        setLogoutSuccess(res);
+      }).catch((error: any) => {
+        console.error(error);
+      });
+  };
+
+  return {name: 'StationLogin', login, logout, loginSuccess, loginFailure, logoutSuccess};
+}
+

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

@@ -7,15 +7,16 @@ import StationLoginPresentational from './station-login.presentational';
 import {useStationLogin} from '../helper';
 
 const StationLogin: React.FunctionComponent = observer(() => {
-  const {loginState, setLoginState, ccSdk, isAvailable} = store;
-  const result = useStationLogin();
+  const {webex, teams, loginOptions, loginReqParam, setDeviceType, setDialNumber, setTeam} = store;
+  const result = useStationLogin({webex, loginReqParam});
 
   const props = {
     ...result,
-    loginState,
-    setLoginState,
-    ccSdk,
-    isAvailable,
+    teams,
+    loginOptions,
+    setDeviceType,
+    setDialNumber,
+    setTeam
   };
   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></>
   );
 };
 

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

@@ -1,3 +1,5 @@
+import Webex from 'webex';
+import {AgentLogin, StationLoginSuccess, StationLogoutSuccess, Team} from '@webex/plugin-cc';
 /**
  * Interface representing the properties for the Station Login component.
  */
@@ -8,22 +10,66 @@ export interface IStationLoginProps {
   name: string;
 
   /**
-   * The current login state of the station.
+   * Webex instance.
    */
-  loginState: any;
+  webex: Webex;
 
   /**
-   * Function to set the login state of the station.
+   * Array of the team IDs that agent belongs to
    */
-  setLoginState: any;
+  teams: Team[];
+
+   /**
+   * Station login options available for the agent
+   */
+  loginOptions: string[];
+
+  /**
+   *  Request Param object to be sent to the SDK station login method
+   */
+  loginReqParam: AgentLogin;
+
+  /**
+   * Handler to initiate the agent login
+   */
+  login: () => void;
+
+  /**
+   * Handler for agent logout
+   */
+  logout: () => void;
+
+  /**
+   * Response data received on agent login success
+   */
+  loginSuccess?: StationLoginSuccess;
+
+  /**
+   * Error received on agent login failure
+   */
+  loginFailure?: Error;
+
+    /**
+   * Response data received on agent login success
+   */
+  logoutSuccess?: StationLogoutSuccess;
+
+  /**
+   * Handler to set device type
+   */
+  setDeviceType: (deviceType: string) => void;
 
   /**
-   * The Customer Care SDK instance.
+   * Handler to set the entered dial number
    */
-  ccSdk: any;
+  setDialNumber: (dn: string) => void;
 
   /**
-   * Indicates whether the station is available.
+   * Handler to set the selected agent team
    */
-  isAvailable: any;
+  setTeam: (team: string) => void;
 }
+
+export type StationLoginPresentationalProps = Pick<IStationLoginProps, 'name' | 'teams' | 'loginOptions' | 'login' | 'logout' | 'loginSuccess' | 'loginFailure' | 'logoutSuccess' | 'setDeviceType' | 'setDialNumber' | 'setTeam'>;
+
+export type UseStationLoginProps = Pick<IStationLoginProps, 'webex' | 'loginReqParam'>;