@webex/cc-components 1.28.0-ccwidgets.53 → 1.28.0-ccwidgets.54

package/dist/index.js

@@ -2878,7 +2878,7 @@ eval("var $51588fd411aace25$exports = __webpack_require__(/*! ./CollectionBuilde
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../../../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"../../../node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../../../node_modules/css-loader/dist/runtime/api.js */ \"../../../node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `.box.station-login {\n  border-radius: 0.5rem;\n  padding: 1.25rem;\n  max-width: 50rem;\n  margin: 0 auto;\n}\n.box.station-login .section-box {\n  padding: 0.625rem;\n  border-radius: 0.5rem;\n  border: none !important;\n}\n.box.station-login .fieldset {\n  border-radius: 0.3125rem;\n  border: none !important;\n  margin-bottom: 0 !important;\n}\n.box.station-login .btn-container {\n  padding-bottom: 0.625rem;\n  display: flex;\n  flex-flow: row-reverse;\n  gap: 0.5rem;\n}\n.box.station-login .modal {\n  width: 25rem;\n  border: none;\n  border-radius: 0.625rem;\n  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);\n  padding: 1.25rem;\n  text-align: center;\n}\n.box.station-login .modal-content {\n  display: flex;\n  justify-content: flex-end;\n}\n.box.station-login .modal::backdrop {\n  background: rgba(0, 0, 0, 0.5);\n}\n.box.station-login h2 {\n  margin-top: 0;\n}\n.box.station-login #ContinueButton {\n  background-color: #0078d4;\n  color: white;\n  border: none;\n  padding: 0.625rem 1.25rem;\n  border-radius: 0.3125rem;\n  cursor: pointer;\n  font-size: 1rem;\n  cursor: pointer;\n}\n.box.station-login #ContinueButton:hover {\n  background-color: #005a9e;\n}\n\n.select-arrow-icon {\n  position: absolute;\n  right: 1rem; /* Adjusted to leave space for the arrow icon */\n  top: 50%;\n  transform: translateY(-50%);\n  display: flex;\n  align-items: center;\n  pointer-events: none;\n  z-index: 1;\n}\n\n.select-container {\n  position: relative;\n  width: 100%; /* Ensure the select trigger takes the full width of its parent */\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.station-login-select {\n  width: 100%;\n}\n\n.md-text-input-wrapper .md-text-input-container {\n  border: 0.0625rem solid var(--mds-color-theme-outline-input-normal) !important;\n}\n\n#agent-login-label {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.agent-login-popover {\n  width: 18.25rem;\n  max-height: 10rem;\n  flex-shrink: 0;\n  fill: var(--color-theme-inverted-background-normal, #000);\n  stroke-width: 0.0625rem;\n  stroke: var(--color-theme-common-control-share-content-inactive, #707070);\n  filter: drop-shadow(0 1.5rem 3rem rgba(0, 0, 0, 0.2));\n}\n\nmdc-select, mdc-input {\n  padding-bottom: 1rem;\n}\n\n.white-button {\n  border-color: var(--mdc-button-secondary-border-color) !important;\n}\n\n.cc-logout-modal {\n  width: 25rem;\n  border-radius: 0.5rem;\n  border-color: transparent;\n  /* Elevation/elevation-2 */\n  box-shadow: 0rem 0.25rem 0.5rem 0rem rgba(0, 0, 0, 0.16), 0rem 0rem 0.0625rem 0rem rgba(0, 0, 0, 0.16);\n}\n\n.cc-logout-modal-content {\n  display: flex;\n  justify-content: flex-end;\n  gap: 0.5rem;\n}`, \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/StationLogin/station-login.style.scss?../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/sass-loader/dist/cjs.js");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../../../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"../../../node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../../../node_modules/css-loader/dist/runtime/api.js */ \"../../../node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `.box.station-login {\n  border-radius: 0.5rem;\n  padding: 1.25rem;\n  max-width: 50rem;\n  margin: 0 auto;\n}\n.box.station-login .section-box {\n  padding: 0.625rem;\n  border-radius: 0.5rem;\n  border: none !important;\n}\n.box.station-login .fieldset {\n  border-radius: 0.3125rem;\n  border: none !important;\n  margin-bottom: 0 !important;\n}\n.box.station-login .btn-container {\n  padding-bottom: 0.625rem;\n  display: flex;\n  flex-flow: row-reverse;\n  gap: 0.5rem;\n}\n.box.station-login .modal {\n  width: 25rem;\n  border: none;\n  border-radius: 0.625rem;\n  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);\n  padding: 1.25rem;\n  text-align: center;\n}\n.box.station-login .modal-content {\n  display: flex;\n  justify-content: flex-end;\n}\n.box.station-login .modal::backdrop {\n  background: rgba(0, 0, 0, 0.5);\n}\n.box.station-login h2 {\n  margin-top: 0;\n}\n.box.station-login #ContinueButton {\n  background-color: #0078d4;\n  color: white;\n  border: none;\n  padding: 0.625rem 1.25rem;\n  border-radius: 0.3125rem;\n  cursor: pointer;\n  font-size: 1rem;\n  cursor: pointer;\n}\n.box.station-login #ContinueButton:hover {\n  background-color: #005a9e;\n}\n\n.select-arrow-icon {\n  position: absolute;\n  right: 1rem; /* Adjusted to leave space for the arrow icon */\n  top: 50%;\n  transform: translateY(-50%);\n  display: flex;\n  align-items: center;\n  pointer-events: none;\n  z-index: 1;\n}\n\n.select-container {\n  position: relative;\n  width: 100%; /* Ensure the select trigger takes the full width of its parent */\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.station-login-select {\n  width: 100%;\n}\n\n.md-text-input-wrapper .md-text-input-container {\n  border: 0.0625rem solid var(--mds-color-theme-outline-input-normal) !important;\n}\n\n#agent-login-label {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.agent-login-popover {\n  width: 18.25rem;\n  max-height: 10rem;\n  flex-shrink: 0;\n  fill: var(--color-theme-inverted-background-normal, #000);\n  stroke-width: 0.0625rem;\n  stroke: var(--color-theme-common-control-share-content-inactive, #707070);\n  filter: drop-shadow(0 1.5rem 3rem rgba(0, 0, 0, 0.2));\n}\n\nmdc-select, mdc-input {\n  padding-bottom: 1rem;\n}\n\n.white-button {\n  border-color: var(--mdc-button-secondary-border-color) !important;\n}\n\n.cc-logout-modal {\n  width: 25rem;\n  border-radius: 0.5rem;\n  border-color: transparent;\n  /* Elevation/elevation-2 */\n  box-shadow: 0rem 0.25rem 0.5rem 0rem rgba(0, 0, 0, 0.16), 0rem 0rem 0.0625rem 0rem rgba(0, 0, 0, 0.16);\n}\n\n.cc-logout-modal-content {\n  display: flex;\n  justify-content: flex-end;\n  gap: 0.5rem;\n}\n\n.error-text-color {\n  color: var(--color-theme-text-error-normal, #AB0A15);\n}`, \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/StationLogin/station-login.style.scss?../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/sass-loader/dist/cjs.js");
 
 /***/ }),
 
@@ -3120,7 +3120,7 @@ eval("\n\n/* istanbul ignore next  */\nfunction styleTagTransform(css, styleElem
 /***/ ((__unused_webpack_module, exports) => {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.LoginOptions = exports.DESKTOP = exports.EXTENSION = exports.DIALNUMBER = exports.StationLoginLabels = void 0;\n// String consts\nexports.StationLoginLabels = {\n    MULTIPLE_SIGN_IN_ALERT_MESSAGE: 'You are signed in to the Desktop in multiple application instances. Click Continue to proceed with the Desktop in this application instance. Else, close this window.',\n    MULTIPLE_SIGN_IN_ALERT_TITLE: 'Multiple Sign In Alert',\n    CONTINUE: 'Continue',\n    CANCEL: 'Cancel',\n    SIGN_OUT: 'Sign out',\n    LOGOUT: 'Logout',\n    SAVE_AND_CONTINUE: 'Save & Continue',\n    CC_SIGN_OUT: 'Sign out of Contact Center',\n    CC_SIGN_OUT_CONFIRM: 'Are you sure you want to sign out?',\n    INTERACTION_PREFERENCES: 'Set your interaction preferences',\n    HANDLE_CALLS: 'Handle calls using',\n    HANDLE_CALLS_TOOLTIP: 'This is your preferred method for receiving and making calls. Choose between your phone number, extension (if available), or your web browser.',\n};\n// Utility consts\nconst DIALNUMBER = 'AGENT_DN';\nexports.DIALNUMBER = DIALNUMBER;\nconst EXTENSION = 'EXTENSION';\nexports.EXTENSION = EXTENSION;\nconst DESKTOP = 'BROWSER';\nexports.DESKTOP = DESKTOP;\nconst LoginOptions = {\n    [DIALNUMBER]: 'Dial Number',\n    [EXTENSION]: 'Extension',\n    [DESKTOP]: 'Desktop',\n};\nexports.LoginOptions = LoginOptions;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/StationLogin/constants.ts?");
+eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.LoginOptions = exports.DESKTOP = exports.EXTENSION = exports.DIALNUMBER = exports.SignInErrors = exports.StationLoginLabels = void 0;\n// String consts\nexports.StationLoginLabels = {\n    MULTIPLE_SIGN_IN_ALERT_MESSAGE: 'You are signed in to the Desktop in multiple application instances. Click Continue to proceed with the Desktop in this application instance. Else, close this window.',\n    MULTIPLE_SIGN_IN_ALERT_TITLE: 'Multiple Sign In Alert',\n    CONTINUE: 'Continue',\n    CANCEL: 'Cancel',\n    SIGN_OUT: 'Sign Out',\n    LOGOUT: 'Logout',\n    SAVE_AND_CONTINUE: 'Save & Continue',\n    CC_SIGN_OUT: 'Sign out of Contact Center',\n    CC_SIGN_OUT_CONFIRM: 'Are you sure you want to sign out?',\n    INTERACTION_PREFERENCES: 'Set your interaction preferences',\n    HANDLE_CALLS: 'Handle calls using',\n    HANDLE_CALLS_TOOLTIP: 'This is your preferred method for receiving and making calls. Choose between your phone number, extension (if available), or your web browser.',\n    YOUR_TEAM: 'Your Team',\n    IS_REQUIRED: ' is required',\n    DN_FORMAT_ERROR: 'Enter a valid US dial number. For help, reach out to your administrator or support team.',\n    DEFAULT_ERROR: 'Error logging in: ',\n};\nexports.SignInErrors = {\n    ['DUPLICATE_LOCATION']: 'This extension is already in use.',\n};\n// Utility consts\nconst DIALNUMBER = 'AGENT_DN';\nexports.DIALNUMBER = DIALNUMBER;\nconst EXTENSION = 'EXTENSION';\nexports.EXTENSION = EXTENSION;\nconst DESKTOP = 'BROWSER';\nexports.DESKTOP = DESKTOP;\nconst LoginOptions = {\n    [DIALNUMBER]: 'Dial Number',\n    [EXTENSION]: 'Extension',\n    [DESKTOP]: 'Desktop',\n};\nexports.LoginOptions = LoginOptions;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/StationLogin/constants.ts?");
 
 /***/ }),
 
@@ -3131,7 +3131,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexpo
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    var desc = Object.getOwnPropertyDescriptor(m, k);\n    if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n      desc = { enumerable: true, get: function() { return m[k]; } };\n    }\n    Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n    Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n    o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n    if (mod && mod.__esModule) return mod;\n    var result = {};\n    if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n    __setModuleDefault(result, mod);\n    return result;\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst react_1 = __importStar(__webpack_require__(/*! react */ \"react\"));\n__webpack_require__(/*! ./station-login.style.scss */ \"./src/components/StationLogin/station-login.style.scss\");\nconst constants_1 = __webpack_require__(/*! ./constants */ \"./src/components/StationLogin/constants.ts\");\nconst react_2 = __webpack_require__(/*! @momentum-design/components/dist/react */ \"../../../node_modules/@momentum-design/components/dist/react/index.js\");\nconst StationLoginComponent = (props) => {\n    const { teams, loginOptions, login, logout, setDeviceType, setDialNumber, setTeam, isAgentLoggedIn, deviceType, dialNumber, showMultipleLoginAlert, handleContinue, onCCSignOut, } = props;\n    const modalRef = (0, react_1.useRef)(null);\n    const ccSignOutModalRef = (0, react_1.useRef)(null);\n    const [dialNumberLabel, setDialNumberLabel] = (0, react_1.useState)('');\n    const [dialNumberPlaceholder, setDialNumberPlaceholder] = (0, react_1.useState)('');\n    const [dialNumberValue, setDialNumberValue] = (0, react_1.useState)(dialNumber || '');\n    const [showCCSignOutModal, setShowCCSignOutModal] = (0, react_1.useState)(false);\n    const [selectedDeviceType, setSelectedDeviceType] = (0, react_1.useState)(deviceType || '');\n    // useEffect to be called on mount\n    (0, react_1.useEffect)(() => {\n        setSelectedDeviceType(deviceType || '');\n        setDialNumberValue(dialNumber || '');\n        updateDialNumberLabel(deviceType || '');\n    }, [isAgentLoggedIn]);\n    // TODO: should be set from the store\n    (0, react_1.useEffect)(() => {\n        if (teams.length > 0) {\n            const firstTeam = teams[0].id;\n            setTeam(firstTeam);\n        }\n    }, [teams]);\n    // show modals\n    (0, react_1.useEffect)(() => {\n        var _a, _b;\n        if (showMultipleLoginAlert && modalRef.current) {\n            modalRef.current.showModal();\n        }\n        if (showCCSignOutModal && !((_a = ccSignOutModalRef === null || ccSignOutModalRef === void 0 ? void 0 : ccSignOutModalRef.current) === null || _a === void 0 ? void 0 : _a.open)) {\n            (_b = ccSignOutModalRef.current) === null || _b === void 0 ? void 0 : _b.showModal();\n        }\n    }, [showMultipleLoginAlert, showCCSignOutModal]);\n    const continueClicked = (0, react_1.useCallback)(() => {\n        if (modalRef.current) {\n            modalRef.current.close();\n            handleContinue();\n        }\n    }, [handleContinue]);\n    /**\n     * Handler for the Contact Center logout confirmation modal cancel button\n     *\n     * Closes the dialog if it is currently open\n     */\n    const ccCancelButtonClicked = (0, react_1.useCallback)(() => {\n        var _a;\n        if ((_a = ccSignOutModalRef === null || ccSignOutModalRef === void 0 ? void 0 : ccSignOutModalRef.current) === null || _a === void 0 ? void 0 : _a.open) {\n            ccSignOutModalRef.current.close();\n            setShowCCSignOutModal(false);\n        }\n    }, []);\n    const updateDialNumberLabel = (selectedOption) => {\n        if (selectedOption != constants_1.DESKTOP && Object.keys(constants_1.LoginOptions).includes(selectedOption)) {\n            setDialNumberLabel(constants_1.LoginOptions[selectedOption]);\n            setDialNumberPlaceholder(constants_1.LoginOptions[selectedOption]);\n        }\n    };\n    return (react_1.default.createElement(react_1.default.Fragment, null,\n        react_1.default.createElement(\"dialog\", { ref: modalRef, className: \"modal\", open: showMultipleLoginAlert },\n            react_1.default.createElement(\"h2\", null, constants_1.StationLoginLabels.MULTIPLE_SIGN_IN_ALERT_TITLE),\n            react_1.default.createElement(\"p\", null, constants_1.StationLoginLabels.MULTIPLE_SIGN_IN_ALERT_MESSAGE),\n            react_1.default.createElement(\"div\", { className: \"modal-content\" },\n                react_1.default.createElement(\"button\", { id: \"ContinueButton\", \"data-testid\": \"ContinueButton\", onClick: continueClicked }, constants_1.StationLoginLabels.CONTINUE))),\n        react_1.default.createElement(\"dialog\", { ref: ccSignOutModalRef, className: \"cc-logout-modal\" },\n            react_1.default.createElement(react_2.Text, { tagname: \"h2\", type: \"body-large-bold\", className: \"modal-text\" }, constants_1.StationLoginLabels.CC_SIGN_OUT),\n            react_1.default.createElement(react_2.Text, { tagname: \"p\", type: \"body-midsize-regular\", className: \"modal-text\" }, constants_1.StationLoginLabels.CC_SIGN_OUT_CONFIRM),\n            react_1.default.createElement(\"div\", { className: \"cc-logout-modal-content\" },\n                react_1.default.createElement(react_2.Button, { onClick: ccCancelButtonClicked, variant: \"secondary\", className: \"white-button\" }, constants_1.StationLoginLabels.CANCEL),\n                react_1.default.createElement(react_2.Button, { onClick: onCCSignOut }, constants_1.StationLoginLabels.SIGN_OUT))),\n        react_1.default.createElement(\"div\", { className: \"box station-login\" },\n            react_1.default.createElement(\"section\", { className: \"section-box\" },\n                react_1.default.createElement(react_2.Text, { tagname: 'span', type: \"body-large-bold\" }, constants_1.StationLoginLabels.INTERACTION_PREFERENCES),\n                react_1.default.createElement(\"div\", null,\n                    react_1.default.createElement(\"div\", { id: \"agent-login-label\" },\n                        react_1.default.createElement(react_2.Text, { type: \"body-midsize-regular\" }, constants_1.StationLoginLabels.HANDLE_CALLS),\n                        react_1.default.createElement(react_2.Icon, { name: \"info-badge-filled\", id: \"agent-login-info-badge\" }),\n                        react_1.default.createElement(react_2.Tooltip, { color: \"contrast\", id: \"agent-login-label-tooltip\", showArrow: true, triggerID: \"agent-login-info-badge\" },\n                            react_1.default.createElement(react_2.Text, { tagname: 'div', type: \"body-large-regular\", className: \"agent-login-popover\" }, constants_1.StationLoginLabels.HANDLE_CALLS_TOOLTIP))),\n                    react_1.default.createElement(\"div\", null,\n                        react_1.default.createElement(react_2.Select, { id: \"login-option\", name: \"login-option\", onChange: (event) => {\n                                const selectedOption = event.detail.value;\n                                // TODO: Select component is calling onChange with first label on load\n                                // TODO: add bug issue link once created\n                                if (Object.keys(constants_1.LoginOptions).includes(selectedOption)) {\n                                    setDeviceType(selectedOption);\n                                    setSelectedDeviceType(selectedOption);\n                                    updateDialNumberLabel(selectedOption);\n                                    // clear dial number when switching between DN and Extension\n                                    setDialNumber('');\n                                }\n                            }, value: selectedDeviceType, className: \"station-login-select\", selectedValue: selectedDeviceType, selectedValueText: constants_1.LoginOptions[selectedDeviceType] }, Object.keys(constants_1.LoginOptions).map((option, index) => {\n                            // only show loginOptions provided by store\n                            if (loginOptions.includes(option)) {\n                                return (react_1.default.createElement(react_2.Option, { selected: option === selectedDeviceType, key: index, value: option }, constants_1.LoginOptions[option]));\n                            }\n                        })))),\n                selectedDeviceType && selectedDeviceType !== constants_1.DESKTOP && (react_1.default.createElement(react_2.Input, { label: dialNumberLabel, placeholder: dialNumberPlaceholder, value: dialNumberValue, onChange: (event) => {\n                        const newDialNumber = event.target.value;\n                        setDialNumberValue(newDialNumber);\n                        setDialNumber(newDialNumber);\n                    }, helpText: dialNumberValue.length === 0 ? `${dialNumberLabel} is required` : undefined, helpTextType: dialNumberValue.length === 0 ? 'error' : undefined })),\n                react_1.default.createElement(\"div\", { className: \"select-container\" },\n                    react_1.default.createElement(react_2.Select, { label: \"Your Team\", id: \"teams-dropdown\", name: \"teams-dropdown\", onChange: (event) => {\n                            setTeam(event.detail.value);\n                        }, className: \"station-login-select\", placeholder: \"Your Team\" }, teams.map((team, index) => {\n                        return (react_1.default.createElement(react_2.Option, { key: index, value: team.id }, team.name));\n                    }))),\n                react_1.default.createElement(\"div\", { className: \"btn-container\" },\n                    isAgentLoggedIn ? (react_1.default.createElement(react_2.Button, { id: \"logoutAgent\", onClick: logout, color: \"positive\" }, constants_1.StationLoginLabels.SIGN_OUT)) : (react_1.default.createElement(react_2.Button, { onClick: login }, constants_1.StationLoginLabels.SAVE_AND_CONTINUE)),\n                    onCCSignOut && (react_1.default.createElement(react_2.Button, { onClick: () => setShowCCSignOutModal(true), variant: \"secondary\", className: \"white-button\" }, constants_1.StationLoginLabels.SIGN_OUT)))))));\n};\nexports[\"default\"] = StationLoginComponent;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/StationLogin/station-login.tsx?");
+eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    var desc = Object.getOwnPropertyDescriptor(m, k);\n    if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n      desc = { enumerable: true, get: function() { return m[k]; } };\n    }\n    Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n    Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n    o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n    if (mod && mod.__esModule) return mod;\n    var result = {};\n    if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n    __setModuleDefault(result, mod);\n    return result;\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst react_1 = __importStar(__webpack_require__(/*! react */ \"react\"));\n__webpack_require__(/*! ./station-login.style.scss */ \"./src/components/StationLogin/station-login.style.scss\");\nconst constants_1 = __webpack_require__(/*! ./constants */ \"./src/components/StationLogin/constants.ts\");\nconst react_2 = __webpack_require__(/*! @momentum-design/components/dist/react */ \"../../../node_modules/@momentum-design/components/dist/react/index.js\");\nconst StationLoginComponent = (props) => {\n    var _a;\n    const { teams, loginOptions, login, logout, loginFailure, setDeviceType, setDialNumber, setTeam, isAgentLoggedIn, deviceType, dialNumber, dialNumberRegex, showMultipleLoginAlert, handleContinue, onCCSignOut, } = props;\n    const modalRef = (0, react_1.useRef)(null);\n    const ccSignOutModalRef = (0, react_1.useRef)(null);\n    const [dialNumberLabel, setDialNumberLabel] = (0, react_1.useState)('');\n    const [dialNumberPlaceholder, setDialNumberPlaceholder] = (0, react_1.useState)('');\n    const [dialNumberValue, setDialNumberValue] = (0, react_1.useState)(dialNumber || '');\n    const [showCCSignOutModal, setShowCCSignOutModal] = (0, react_1.useState)(false);\n    const [selectedDeviceType, setSelectedDeviceType] = (0, react_1.useState)(deviceType || '');\n    const [showDNError, setShowDNError] = (0, react_1.useState)(false);\n    const [dnErrorText, setDNErrorText] = (0, react_1.useState)('');\n    // useEffect to be called on mount\n    (0, react_1.useEffect)(() => {\n        setSelectedDeviceType(deviceType || '');\n        setDialNumberValue(dialNumber || '');\n        updateDialNumberLabel(deviceType || '');\n    }, [isAgentLoggedIn]);\n    // TODO: should be set from the store\n    (0, react_1.useEffect)(() => {\n        if (teams.length > 0) {\n            const firstTeam = teams[0].id;\n            setTeam(firstTeam);\n        }\n    }, [teams]);\n    // show modals\n    (0, react_1.useEffect)(() => {\n        var _a, _b;\n        if (showMultipleLoginAlert && modalRef.current) {\n            modalRef.current.showModal();\n        }\n        if (showCCSignOutModal && !((_a = ccSignOutModalRef === null || ccSignOutModalRef === void 0 ? void 0 : ccSignOutModalRef.current) === null || _a === void 0 ? void 0 : _a.open)) {\n            (_b = ccSignOutModalRef.current) === null || _b === void 0 ? void 0 : _b.showModal();\n        }\n    }, [showMultipleLoginAlert, showCCSignOutModal]);\n    const continueClicked = (0, react_1.useCallback)(() => {\n        if (modalRef.current) {\n            modalRef.current.close();\n            handleContinue();\n        }\n    }, [handleContinue]);\n    /**\n     * Handler for the Contact Center logout confirmation modal cancel button\n     *\n     * Closes the dialog if it is currently open\n     */\n    const ccCancelButtonClicked = (0, react_1.useCallback)(() => {\n        var _a;\n        if ((_a = ccSignOutModalRef === null || ccSignOutModalRef === void 0 ? void 0 : ccSignOutModalRef.current) === null || _a === void 0 ? void 0 : _a.open) {\n            ccSignOutModalRef.current.close();\n            setShowCCSignOutModal(false);\n        }\n    }, []);\n    const updateDialNumberLabel = (selectedOption) => {\n        if (selectedOption != constants_1.DESKTOP && Object.keys(constants_1.LoginOptions).includes(selectedOption)) {\n            setDialNumberLabel(constants_1.LoginOptions[selectedOption]);\n            setDialNumberPlaceholder(constants_1.LoginOptions[selectedOption]);\n        }\n    };\n    /**\n     * Runs validation tests on a string given as a Dial Number\n     * @param {string} input\n     * @returns {boolean} whether or not to show a validation error\n     */\n    const validateDialNumber = (input) => {\n        const regexForDn = new RegExp(dialNumberRegex !== null && dialNumberRegex !== void 0 ? dialNumberRegex : '1[0-9]{3}[2-9][0-9]{6}([,]{1,10}[0-9]+){0,1}');\n        if (regexForDn.test(input)) {\n            return false;\n        }\n        setDNErrorText(constants_1.StationLoginLabels.DN_FORMAT_ERROR);\n        return true;\n    };\n    return (react_1.default.createElement(react_1.default.Fragment, null,\n        react_1.default.createElement(\"dialog\", { ref: modalRef, className: \"modal\", open: showMultipleLoginAlert },\n            react_1.default.createElement(\"h2\", null, constants_1.StationLoginLabels.MULTIPLE_SIGN_IN_ALERT_TITLE),\n            react_1.default.createElement(\"p\", null, constants_1.StationLoginLabels.MULTIPLE_SIGN_IN_ALERT_MESSAGE),\n            react_1.default.createElement(\"div\", { className: \"modal-content\" },\n                react_1.default.createElement(\"button\", { id: \"ContinueButton\", \"data-testid\": \"ContinueButton\", onClick: continueClicked }, constants_1.StationLoginLabels.CONTINUE))),\n        react_1.default.createElement(\"dialog\", { ref: ccSignOutModalRef, className: \"cc-logout-modal\" },\n            react_1.default.createElement(react_2.Text, { tagname: \"h2\", type: \"body-large-bold\", className: \"modal-text\" }, constants_1.StationLoginLabels.CC_SIGN_OUT),\n            react_1.default.createElement(react_2.Text, { tagname: \"p\", type: \"body-midsize-regular\", className: \"modal-text\" }, constants_1.StationLoginLabels.CC_SIGN_OUT_CONFIRM),\n            react_1.default.createElement(\"div\", { className: \"cc-logout-modal-content\" },\n                react_1.default.createElement(react_2.Button, { onClick: ccCancelButtonClicked, variant: \"secondary\", className: \"white-button\" }, constants_1.StationLoginLabels.CANCEL),\n                react_1.default.createElement(react_2.Button, { onClick: onCCSignOut }, constants_1.StationLoginLabels.SIGN_OUT))),\n        react_1.default.createElement(\"div\", { className: \"box station-login\" },\n            react_1.default.createElement(\"section\", { className: \"section-box\" },\n                react_1.default.createElement(react_2.Text, { tagname: 'span', type: \"body-large-bold\" }, constants_1.StationLoginLabels.INTERACTION_PREFERENCES),\n                react_1.default.createElement(\"div\", null,\n                    react_1.default.createElement(\"div\", { id: \"agent-login-label\" },\n                        react_1.default.createElement(react_2.Text, { type: \"body-midsize-regular\" }, constants_1.StationLoginLabels.HANDLE_CALLS),\n                        react_1.default.createElement(react_2.Icon, { name: \"info-badge-filled\", id: \"agent-login-info-badge\" }),\n                        react_1.default.createElement(react_2.Tooltip, { color: \"contrast\", id: \"agent-login-label-tooltip\", showArrow: true, triggerID: \"agent-login-info-badge\" },\n                            react_1.default.createElement(react_2.Text, { tagname: 'div', type: \"body-large-regular\", className: \"agent-login-popover\" }, constants_1.StationLoginLabels.HANDLE_CALLS_TOOLTIP))),\n                    react_1.default.createElement(\"div\", null,\n                        react_1.default.createElement(react_2.Select, { id: \"login-option\", name: \"login-option\", onChange: (event) => {\n                                const selectedOption = event.detail.value;\n                                // TODO: Select component is calling onChange with first label on load\n                                // bug ticket: https://jira-eng-gpk2.cisco.com/jira/browse/MOMENTUM-668\n                                if (Object.keys(constants_1.LoginOptions).includes(selectedOption)) {\n                                    setDeviceType(selectedOption);\n                                    setSelectedDeviceType(selectedOption);\n                                    updateDialNumberLabel(selectedOption);\n                                    // clear dial number when switching between DN and Extension\n                                    setDialNumber('');\n                                    setShowDNError(false);\n                                }\n                            }, value: selectedDeviceType, className: \"station-login-select\", selectedValue: selectedDeviceType, selectedValueText: constants_1.LoginOptions[selectedDeviceType] }, Object.keys(constants_1.LoginOptions).map((option, index) => {\n                            // only show loginOptions provided by store\n                            if (loginOptions.includes(option)) {\n                                return (react_1.default.createElement(react_2.Option, { selected: option === selectedDeviceType, key: index, value: option }, constants_1.LoginOptions[option]));\n                            }\n                        })))),\n                selectedDeviceType && selectedDeviceType !== constants_1.DESKTOP && (react_1.default.createElement(react_2.Input, { label: dialNumberLabel, placeholder: dialNumberPlaceholder, value: dialNumberValue, onChange: (event) => {\n                        const input = event.target.value.trim();\n                        setDialNumberValue(input);\n                        setDialNumber(input);\n                        // validation\n                        if (input.length === 0) {\n                            // show error for empty string\n                            setDNErrorText(`${constants_1.LoginOptions[selectedDeviceType]} ${constants_1.StationLoginLabels.IS_REQUIRED}`);\n                            setShowDNError(true);\n                        }\n                        else if (selectedDeviceType === constants_1.DIALNUMBER) {\n                            setShowDNError(validateDialNumber(input));\n                        }\n                        else {\n                            setShowDNError(false);\n                        }\n                    }, helpText: showDNError ? dnErrorText : undefined, helpTextType: showDNError ? 'error' : undefined })),\n                react_1.default.createElement(\"div\", { className: \"select-container\" },\n                    react_1.default.createElement(react_2.Select, { label: constants_1.StationLoginLabels.YOUR_TEAM, id: \"teams-dropdown\", name: \"teams-dropdown\", onChange: (event) => {\n                            setTeam(event.detail.value);\n                        }, className: \"station-login-select\", placeholder: constants_1.StationLoginLabels.YOUR_TEAM }, teams.map((team, index) => {\n                        return (react_1.default.createElement(react_2.Option, { key: index, value: team.id }, team.name));\n                    }))),\n                loginFailure && (react_1.default.createElement(react_2.Text, { className: \"error-text-color\", type: 'body-midsize-regular' }, (_a = constants_1.SignInErrors[loginFailure.message]) !== null && _a !== void 0 ? _a : constants_1.StationLoginLabels.DEFAULT_ERROR)),\n                react_1.default.createElement(\"div\", { className: \"btn-container\" },\n                    isAgentLoggedIn ? (react_1.default.createElement(react_2.Button, { id: \"logoutAgent\", onClick: logout, color: \"positive\" }, constants_1.StationLoginLabels.SIGN_OUT)) : (react_1.default.createElement(react_2.Button, { onClick: login, disabled: showDNError }, constants_1.StationLoginLabels.SAVE_AND_CONTINUE)),\n                    onCCSignOut && (react_1.default.createElement(react_2.Button, { onClick: () => setShowCCSignOutModal(true), variant: \"secondary\", className: \"white-button\" }, constants_1.StationLoginLabels.SIGN_OUT)))))));\n};\nexports[\"default\"] = StationLoginComponent;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/StationLogin/station-login.tsx?");
 
 /***/ }),
 

package/dist/types/components/StationLogin/constants.d.ts

@@ -11,6 +11,13 @@ export declare const StationLoginLabels: {
     INTERACTION_PREFERENCES: string;
     HANDLE_CALLS: string;
     HANDLE_CALLS_TOOLTIP: string;
+    YOUR_TEAM: string;
+    IS_REQUIRED: string;
+    DN_FORMAT_ERROR: string;
+    DEFAULT_ERROR: string;
+};
+export declare const SignInErrors: {
+    DUPLICATE_LOCATION: string;
 };
 declare const DIALNUMBER: string;
 declare const EXTENSION: string;

package/dist/types/components/StationLogin/station-login.types.d.ts

@@ -50,6 +50,10 @@ export interface IStationLoginProps {
      * The saved dial number for agent login
      */
     dialNumber: string;
+    /**
+     * The regex provided by the API for validating Dial Number
+     */
+    dialNumberRegex?: RegExp | string;
     /**
      * Callback function to be invoked once the agent login is successful
      */
@@ -87,4 +91,4 @@ export interface IStationLoginProps {
      */
     onCCSignOut?: () => void;
 }
-export type StationLoginComponentProps = Pick<IStationLoginProps, 'teams' | 'loginOptions' | 'login' | 'logout' | 'loginSuccess' | 'loginFailure' | 'logoutSuccess' | 'setDeviceType' | 'setDialNumber' | 'setTeam' | 'isAgentLoggedIn' | 'handleContinue' | 'deviceType' | 'dialNumber' | 'showMultipleLoginAlert' | 'onCCSignOut'>;
+export type StationLoginComponentProps = Pick<IStationLoginProps, 'teams' | 'loginOptions' | 'login' | 'logout' | 'loginSuccess' | 'loginFailure' | 'logoutSuccess' | 'setDeviceType' | 'setDialNumber' | 'setTeam' | 'isAgentLoggedIn' | 'handleContinue' | 'deviceType' | 'dialNumber' | 'dialNumberRegex' | 'showMultipleLoginAlert' | 'onCCSignOut'>;

package/dist/wc.js

@@ -2878,7 +2878,7 @@ eval("var $51588fd411aace25$exports = __webpack_require__(/*! ./CollectionBuilde
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../../../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"../../../node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../../../node_modules/css-loader/dist/runtime/api.js */ \"../../../node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `.box.station-login {\n  border-radius: 0.5rem;\n  padding: 1.25rem;\n  max-width: 50rem;\n  margin: 0 auto;\n}\n.box.station-login .section-box {\n  padding: 0.625rem;\n  border-radius: 0.5rem;\n  border: none !important;\n}\n.box.station-login .fieldset {\n  border-radius: 0.3125rem;\n  border: none !important;\n  margin-bottom: 0 !important;\n}\n.box.station-login .btn-container {\n  padding-bottom: 0.625rem;\n  display: flex;\n  flex-flow: row-reverse;\n  gap: 0.5rem;\n}\n.box.station-login .modal {\n  width: 25rem;\n  border: none;\n  border-radius: 0.625rem;\n  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);\n  padding: 1.25rem;\n  text-align: center;\n}\n.box.station-login .modal-content {\n  display: flex;\n  justify-content: flex-end;\n}\n.box.station-login .modal::backdrop {\n  background: rgba(0, 0, 0, 0.5);\n}\n.box.station-login h2 {\n  margin-top: 0;\n}\n.box.station-login #ContinueButton {\n  background-color: #0078d4;\n  color: white;\n  border: none;\n  padding: 0.625rem 1.25rem;\n  border-radius: 0.3125rem;\n  cursor: pointer;\n  font-size: 1rem;\n  cursor: pointer;\n}\n.box.station-login #ContinueButton:hover {\n  background-color: #005a9e;\n}\n\n.select-arrow-icon {\n  position: absolute;\n  right: 1rem; /* Adjusted to leave space for the arrow icon */\n  top: 50%;\n  transform: translateY(-50%);\n  display: flex;\n  align-items: center;\n  pointer-events: none;\n  z-index: 1;\n}\n\n.select-container {\n  position: relative;\n  width: 100%; /* Ensure the select trigger takes the full width of its parent */\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.station-login-select {\n  width: 100%;\n}\n\n.md-text-input-wrapper .md-text-input-container {\n  border: 0.0625rem solid var(--mds-color-theme-outline-input-normal) !important;\n}\n\n#agent-login-label {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.agent-login-popover {\n  width: 18.25rem;\n  max-height: 10rem;\n  flex-shrink: 0;\n  fill: var(--color-theme-inverted-background-normal, #000);\n  stroke-width: 0.0625rem;\n  stroke: var(--color-theme-common-control-share-content-inactive, #707070);\n  filter: drop-shadow(0 1.5rem 3rem rgba(0, 0, 0, 0.2));\n}\n\nmdc-select, mdc-input {\n  padding-bottom: 1rem;\n}\n\n.white-button {\n  border-color: var(--mdc-button-secondary-border-color) !important;\n}\n\n.cc-logout-modal {\n  width: 25rem;\n  border-radius: 0.5rem;\n  border-color: transparent;\n  /* Elevation/elevation-2 */\n  box-shadow: 0rem 0.25rem 0.5rem 0rem rgba(0, 0, 0, 0.16), 0rem 0rem 0.0625rem 0rem rgba(0, 0, 0, 0.16);\n}\n\n.cc-logout-modal-content {\n  display: flex;\n  justify-content: flex-end;\n  gap: 0.5rem;\n}`, \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/StationLogin/station-login.style.scss?../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/sass-loader/dist/cjs.js");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../../../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"../../../node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../../../node_modules/css-loader/dist/runtime/api.js */ \"../../../node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `.box.station-login {\n  border-radius: 0.5rem;\n  padding: 1.25rem;\n  max-width: 50rem;\n  margin: 0 auto;\n}\n.box.station-login .section-box {\n  padding: 0.625rem;\n  border-radius: 0.5rem;\n  border: none !important;\n}\n.box.station-login .fieldset {\n  border-radius: 0.3125rem;\n  border: none !important;\n  margin-bottom: 0 !important;\n}\n.box.station-login .btn-container {\n  padding-bottom: 0.625rem;\n  display: flex;\n  flex-flow: row-reverse;\n  gap: 0.5rem;\n}\n.box.station-login .modal {\n  width: 25rem;\n  border: none;\n  border-radius: 0.625rem;\n  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);\n  padding: 1.25rem;\n  text-align: center;\n}\n.box.station-login .modal-content {\n  display: flex;\n  justify-content: flex-end;\n}\n.box.station-login .modal::backdrop {\n  background: rgba(0, 0, 0, 0.5);\n}\n.box.station-login h2 {\n  margin-top: 0;\n}\n.box.station-login #ContinueButton {\n  background-color: #0078d4;\n  color: white;\n  border: none;\n  padding: 0.625rem 1.25rem;\n  border-radius: 0.3125rem;\n  cursor: pointer;\n  font-size: 1rem;\n  cursor: pointer;\n}\n.box.station-login #ContinueButton:hover {\n  background-color: #005a9e;\n}\n\n.select-arrow-icon {\n  position: absolute;\n  right: 1rem; /* Adjusted to leave space for the arrow icon */\n  top: 50%;\n  transform: translateY(-50%);\n  display: flex;\n  align-items: center;\n  pointer-events: none;\n  z-index: 1;\n}\n\n.select-container {\n  position: relative;\n  width: 100%; /* Ensure the select trigger takes the full width of its parent */\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.station-login-select {\n  width: 100%;\n}\n\n.md-text-input-wrapper .md-text-input-container {\n  border: 0.0625rem solid var(--mds-color-theme-outline-input-normal) !important;\n}\n\n#agent-login-label {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.agent-login-popover {\n  width: 18.25rem;\n  max-height: 10rem;\n  flex-shrink: 0;\n  fill: var(--color-theme-inverted-background-normal, #000);\n  stroke-width: 0.0625rem;\n  stroke: var(--color-theme-common-control-share-content-inactive, #707070);\n  filter: drop-shadow(0 1.5rem 3rem rgba(0, 0, 0, 0.2));\n}\n\nmdc-select, mdc-input {\n  padding-bottom: 1rem;\n}\n\n.white-button {\n  border-color: var(--mdc-button-secondary-border-color) !important;\n}\n\n.cc-logout-modal {\n  width: 25rem;\n  border-radius: 0.5rem;\n  border-color: transparent;\n  /* Elevation/elevation-2 */\n  box-shadow: 0rem 0.25rem 0.5rem 0rem rgba(0, 0, 0, 0.16), 0rem 0rem 0.0625rem 0rem rgba(0, 0, 0, 0.16);\n}\n\n.cc-logout-modal-content {\n  display: flex;\n  justify-content: flex-end;\n  gap: 0.5rem;\n}\n\n.error-text-color {\n  color: var(--color-theme-text-error-normal, #AB0A15);\n}`, \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/StationLogin/station-login.style.scss?../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/sass-loader/dist/cjs.js");
 
 /***/ }),
 
@@ -3109,7 +3109,7 @@ eval("\n\n/* istanbul ignore next  */\nfunction styleTagTransform(css, styleElem
 /***/ ((__unused_webpack_module, exports) => {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.LoginOptions = exports.DESKTOP = exports.EXTENSION = exports.DIALNUMBER = exports.StationLoginLabels = void 0;\n// String consts\nexports.StationLoginLabels = {\n    MULTIPLE_SIGN_IN_ALERT_MESSAGE: 'You are signed in to the Desktop in multiple application instances. Click Continue to proceed with the Desktop in this application instance. Else, close this window.',\n    MULTIPLE_SIGN_IN_ALERT_TITLE: 'Multiple Sign In Alert',\n    CONTINUE: 'Continue',\n    CANCEL: 'Cancel',\n    SIGN_OUT: 'Sign out',\n    LOGOUT: 'Logout',\n    SAVE_AND_CONTINUE: 'Save & Continue',\n    CC_SIGN_OUT: 'Sign out of Contact Center',\n    CC_SIGN_OUT_CONFIRM: 'Are you sure you want to sign out?',\n    INTERACTION_PREFERENCES: 'Set your interaction preferences',\n    HANDLE_CALLS: 'Handle calls using',\n    HANDLE_CALLS_TOOLTIP: 'This is your preferred method for receiving and making calls. Choose between your phone number, extension (if available), or your web browser.',\n};\n// Utility consts\nconst DIALNUMBER = 'AGENT_DN';\nexports.DIALNUMBER = DIALNUMBER;\nconst EXTENSION = 'EXTENSION';\nexports.EXTENSION = EXTENSION;\nconst DESKTOP = 'BROWSER';\nexports.DESKTOP = DESKTOP;\nconst LoginOptions = {\n    [DIALNUMBER]: 'Dial Number',\n    [EXTENSION]: 'Extension',\n    [DESKTOP]: 'Desktop',\n};\nexports.LoginOptions = LoginOptions;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/StationLogin/constants.ts?");
+eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.LoginOptions = exports.DESKTOP = exports.EXTENSION = exports.DIALNUMBER = exports.SignInErrors = exports.StationLoginLabels = void 0;\n// String consts\nexports.StationLoginLabels = {\n    MULTIPLE_SIGN_IN_ALERT_MESSAGE: 'You are signed in to the Desktop in multiple application instances. Click Continue to proceed with the Desktop in this application instance. Else, close this window.',\n    MULTIPLE_SIGN_IN_ALERT_TITLE: 'Multiple Sign In Alert',\n    CONTINUE: 'Continue',\n    CANCEL: 'Cancel',\n    SIGN_OUT: 'Sign Out',\n    LOGOUT: 'Logout',\n    SAVE_AND_CONTINUE: 'Save & Continue',\n    CC_SIGN_OUT: 'Sign out of Contact Center',\n    CC_SIGN_OUT_CONFIRM: 'Are you sure you want to sign out?',\n    INTERACTION_PREFERENCES: 'Set your interaction preferences',\n    HANDLE_CALLS: 'Handle calls using',\n    HANDLE_CALLS_TOOLTIP: 'This is your preferred method for receiving and making calls. Choose between your phone number, extension (if available), or your web browser.',\n    YOUR_TEAM: 'Your Team',\n    IS_REQUIRED: ' is required',\n    DN_FORMAT_ERROR: 'Enter a valid US dial number. For help, reach out to your administrator or support team.',\n    DEFAULT_ERROR: 'Error logging in: ',\n};\nexports.SignInErrors = {\n    ['DUPLICATE_LOCATION']: 'This extension is already in use.',\n};\n// Utility consts\nconst DIALNUMBER = 'AGENT_DN';\nexports.DIALNUMBER = DIALNUMBER;\nconst EXTENSION = 'EXTENSION';\nexports.EXTENSION = EXTENSION;\nconst DESKTOP = 'BROWSER';\nexports.DESKTOP = DESKTOP;\nconst LoginOptions = {\n    [DIALNUMBER]: 'Dial Number',\n    [EXTENSION]: 'Extension',\n    [DESKTOP]: 'Desktop',\n};\nexports.LoginOptions = LoginOptions;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/StationLogin/constants.ts?");
 
 /***/ }),
 
@@ -3120,7 +3120,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexpo
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    var desc = Object.getOwnPropertyDescriptor(m, k);\n    if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n      desc = { enumerable: true, get: function() { return m[k]; } };\n    }\n    Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n    Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n    o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n    if (mod && mod.__esModule) return mod;\n    var result = {};\n    if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n    __setModuleDefault(result, mod);\n    return result;\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst react_1 = __importStar(__webpack_require__(/*! react */ \"react\"));\n__webpack_require__(/*! ./station-login.style.scss */ \"./src/components/StationLogin/station-login.style.scss\");\nconst constants_1 = __webpack_require__(/*! ./constants */ \"./src/components/StationLogin/constants.ts\");\nconst react_2 = __webpack_require__(/*! @momentum-design/components/dist/react */ \"../../../node_modules/@momentum-design/components/dist/react/index.js\");\nconst StationLoginComponent = (props) => {\n    const { teams, loginOptions, login, logout, setDeviceType, setDialNumber, setTeam, isAgentLoggedIn, deviceType, dialNumber, showMultipleLoginAlert, handleContinue, onCCSignOut, } = props;\n    const modalRef = (0, react_1.useRef)(null);\n    const ccSignOutModalRef = (0, react_1.useRef)(null);\n    const [dialNumberLabel, setDialNumberLabel] = (0, react_1.useState)('');\n    const [dialNumberPlaceholder, setDialNumberPlaceholder] = (0, react_1.useState)('');\n    const [dialNumberValue, setDialNumberValue] = (0, react_1.useState)(dialNumber || '');\n    const [showCCSignOutModal, setShowCCSignOutModal] = (0, react_1.useState)(false);\n    const [selectedDeviceType, setSelectedDeviceType] = (0, react_1.useState)(deviceType || '');\n    // useEffect to be called on mount\n    (0, react_1.useEffect)(() => {\n        setSelectedDeviceType(deviceType || '');\n        setDialNumberValue(dialNumber || '');\n        updateDialNumberLabel(deviceType || '');\n    }, [isAgentLoggedIn]);\n    // TODO: should be set from the store\n    (0, react_1.useEffect)(() => {\n        if (teams.length > 0) {\n            const firstTeam = teams[0].id;\n            setTeam(firstTeam);\n        }\n    }, [teams]);\n    // show modals\n    (0, react_1.useEffect)(() => {\n        var _a, _b;\n        if (showMultipleLoginAlert && modalRef.current) {\n            modalRef.current.showModal();\n        }\n        if (showCCSignOutModal && !((_a = ccSignOutModalRef === null || ccSignOutModalRef === void 0 ? void 0 : ccSignOutModalRef.current) === null || _a === void 0 ? void 0 : _a.open)) {\n            (_b = ccSignOutModalRef.current) === null || _b === void 0 ? void 0 : _b.showModal();\n        }\n    }, [showMultipleLoginAlert, showCCSignOutModal]);\n    const continueClicked = (0, react_1.useCallback)(() => {\n        if (modalRef.current) {\n            modalRef.current.close();\n            handleContinue();\n        }\n    }, [handleContinue]);\n    /**\n     * Handler for the Contact Center logout confirmation modal cancel button\n     *\n     * Closes the dialog if it is currently open\n     */\n    const ccCancelButtonClicked = (0, react_1.useCallback)(() => {\n        var _a;\n        if ((_a = ccSignOutModalRef === null || ccSignOutModalRef === void 0 ? void 0 : ccSignOutModalRef.current) === null || _a === void 0 ? void 0 : _a.open) {\n            ccSignOutModalRef.current.close();\n            setShowCCSignOutModal(false);\n        }\n    }, []);\n    const updateDialNumberLabel = (selectedOption) => {\n        if (selectedOption != constants_1.DESKTOP && Object.keys(constants_1.LoginOptions).includes(selectedOption)) {\n            setDialNumberLabel(constants_1.LoginOptions[selectedOption]);\n            setDialNumberPlaceholder(constants_1.LoginOptions[selectedOption]);\n        }\n    };\n    return (react_1.default.createElement(react_1.default.Fragment, null,\n        react_1.default.createElement(\"dialog\", { ref: modalRef, className: \"modal\", open: showMultipleLoginAlert },\n            react_1.default.createElement(\"h2\", null, constants_1.StationLoginLabels.MULTIPLE_SIGN_IN_ALERT_TITLE),\n            react_1.default.createElement(\"p\", null, constants_1.StationLoginLabels.MULTIPLE_SIGN_IN_ALERT_MESSAGE),\n            react_1.default.createElement(\"div\", { className: \"modal-content\" },\n                react_1.default.createElement(\"button\", { id: \"ContinueButton\", \"data-testid\": \"ContinueButton\", onClick: continueClicked }, constants_1.StationLoginLabels.CONTINUE))),\n        react_1.default.createElement(\"dialog\", { ref: ccSignOutModalRef, className: \"cc-logout-modal\" },\n            react_1.default.createElement(react_2.Text, { tagname: \"h2\", type: \"body-large-bold\", className: \"modal-text\" }, constants_1.StationLoginLabels.CC_SIGN_OUT),\n            react_1.default.createElement(react_2.Text, { tagname: \"p\", type: \"body-midsize-regular\", className: \"modal-text\" }, constants_1.StationLoginLabels.CC_SIGN_OUT_CONFIRM),\n            react_1.default.createElement(\"div\", { className: \"cc-logout-modal-content\" },\n                react_1.default.createElement(react_2.Button, { onClick: ccCancelButtonClicked, variant: \"secondary\", className: \"white-button\" }, constants_1.StationLoginLabels.CANCEL),\n                react_1.default.createElement(react_2.Button, { onClick: onCCSignOut }, constants_1.StationLoginLabels.SIGN_OUT))),\n        react_1.default.createElement(\"div\", { className: \"box station-login\" },\n            react_1.default.createElement(\"section\", { className: \"section-box\" },\n                react_1.default.createElement(react_2.Text, { tagname: 'span', type: \"body-large-bold\" }, constants_1.StationLoginLabels.INTERACTION_PREFERENCES),\n                react_1.default.createElement(\"div\", null,\n                    react_1.default.createElement(\"div\", { id: \"agent-login-label\" },\n                        react_1.default.createElement(react_2.Text, { type: \"body-midsize-regular\" }, constants_1.StationLoginLabels.HANDLE_CALLS),\n                        react_1.default.createElement(react_2.Icon, { name: \"info-badge-filled\", id: \"agent-login-info-badge\" }),\n                        react_1.default.createElement(react_2.Tooltip, { color: \"contrast\", id: \"agent-login-label-tooltip\", showArrow: true, triggerID: \"agent-login-info-badge\" },\n                            react_1.default.createElement(react_2.Text, { tagname: 'div', type: \"body-large-regular\", className: \"agent-login-popover\" }, constants_1.StationLoginLabels.HANDLE_CALLS_TOOLTIP))),\n                    react_1.default.createElement(\"div\", null,\n                        react_1.default.createElement(react_2.Select, { id: \"login-option\", name: \"login-option\", onChange: (event) => {\n                                const selectedOption = event.detail.value;\n                                // TODO: Select component is calling onChange with first label on load\n                                // TODO: add bug issue link once created\n                                if (Object.keys(constants_1.LoginOptions).includes(selectedOption)) {\n                                    setDeviceType(selectedOption);\n                                    setSelectedDeviceType(selectedOption);\n                                    updateDialNumberLabel(selectedOption);\n                                    // clear dial number when switching between DN and Extension\n                                    setDialNumber('');\n                                }\n                            }, value: selectedDeviceType, className: \"station-login-select\", selectedValue: selectedDeviceType, selectedValueText: constants_1.LoginOptions[selectedDeviceType] }, Object.keys(constants_1.LoginOptions).map((option, index) => {\n                            // only show loginOptions provided by store\n                            if (loginOptions.includes(option)) {\n                                return (react_1.default.createElement(react_2.Option, { selected: option === selectedDeviceType, key: index, value: option }, constants_1.LoginOptions[option]));\n                            }\n                        })))),\n                selectedDeviceType && selectedDeviceType !== constants_1.DESKTOP && (react_1.default.createElement(react_2.Input, { label: dialNumberLabel, placeholder: dialNumberPlaceholder, value: dialNumberValue, onChange: (event) => {\n                        const newDialNumber = event.target.value;\n                        setDialNumberValue(newDialNumber);\n                        setDialNumber(newDialNumber);\n                    }, helpText: dialNumberValue.length === 0 ? `${dialNumberLabel} is required` : undefined, helpTextType: dialNumberValue.length === 0 ? 'error' : undefined })),\n                react_1.default.createElement(\"div\", { className: \"select-container\" },\n                    react_1.default.createElement(react_2.Select, { label: \"Your Team\", id: \"teams-dropdown\", name: \"teams-dropdown\", onChange: (event) => {\n                            setTeam(event.detail.value);\n                        }, className: \"station-login-select\", placeholder: \"Your Team\" }, teams.map((team, index) => {\n                        return (react_1.default.createElement(react_2.Option, { key: index, value: team.id }, team.name));\n                    }))),\n                react_1.default.createElement(\"div\", { className: \"btn-container\" },\n                    isAgentLoggedIn ? (react_1.default.createElement(react_2.Button, { id: \"logoutAgent\", onClick: logout, color: \"positive\" }, constants_1.StationLoginLabels.SIGN_OUT)) : (react_1.default.createElement(react_2.Button, { onClick: login }, constants_1.StationLoginLabels.SAVE_AND_CONTINUE)),\n                    onCCSignOut && (react_1.default.createElement(react_2.Button, { onClick: () => setShowCCSignOutModal(true), variant: \"secondary\", className: \"white-button\" }, constants_1.StationLoginLabels.SIGN_OUT)))))));\n};\nexports[\"default\"] = StationLoginComponent;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/StationLogin/station-login.tsx?");
+eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    var desc = Object.getOwnPropertyDescriptor(m, k);\n    if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n      desc = { enumerable: true, get: function() { return m[k]; } };\n    }\n    Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n    Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n    o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n    if (mod && mod.__esModule) return mod;\n    var result = {};\n    if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n    __setModuleDefault(result, mod);\n    return result;\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst react_1 = __importStar(__webpack_require__(/*! react */ \"react\"));\n__webpack_require__(/*! ./station-login.style.scss */ \"./src/components/StationLogin/station-login.style.scss\");\nconst constants_1 = __webpack_require__(/*! ./constants */ \"./src/components/StationLogin/constants.ts\");\nconst react_2 = __webpack_require__(/*! @momentum-design/components/dist/react */ \"../../../node_modules/@momentum-design/components/dist/react/index.js\");\nconst StationLoginComponent = (props) => {\n    var _a;\n    const { teams, loginOptions, login, logout, loginFailure, setDeviceType, setDialNumber, setTeam, isAgentLoggedIn, deviceType, dialNumber, dialNumberRegex, showMultipleLoginAlert, handleContinue, onCCSignOut, } = props;\n    const modalRef = (0, react_1.useRef)(null);\n    const ccSignOutModalRef = (0, react_1.useRef)(null);\n    const [dialNumberLabel, setDialNumberLabel] = (0, react_1.useState)('');\n    const [dialNumberPlaceholder, setDialNumberPlaceholder] = (0, react_1.useState)('');\n    const [dialNumberValue, setDialNumberValue] = (0, react_1.useState)(dialNumber || '');\n    const [showCCSignOutModal, setShowCCSignOutModal] = (0, react_1.useState)(false);\n    const [selectedDeviceType, setSelectedDeviceType] = (0, react_1.useState)(deviceType || '');\n    const [showDNError, setShowDNError] = (0, react_1.useState)(false);\n    const [dnErrorText, setDNErrorText] = (0, react_1.useState)('');\n    // useEffect to be called on mount\n    (0, react_1.useEffect)(() => {\n        setSelectedDeviceType(deviceType || '');\n        setDialNumberValue(dialNumber || '');\n        updateDialNumberLabel(deviceType || '');\n    }, [isAgentLoggedIn]);\n    // TODO: should be set from the store\n    (0, react_1.useEffect)(() => {\n        if (teams.length > 0) {\n            const firstTeam = teams[0].id;\n            setTeam(firstTeam);\n        }\n    }, [teams]);\n    // show modals\n    (0, react_1.useEffect)(() => {\n        var _a, _b;\n        if (showMultipleLoginAlert && modalRef.current) {\n            modalRef.current.showModal();\n        }\n        if (showCCSignOutModal && !((_a = ccSignOutModalRef === null || ccSignOutModalRef === void 0 ? void 0 : ccSignOutModalRef.current) === null || _a === void 0 ? void 0 : _a.open)) {\n            (_b = ccSignOutModalRef.current) === null || _b === void 0 ? void 0 : _b.showModal();\n        }\n    }, [showMultipleLoginAlert, showCCSignOutModal]);\n    const continueClicked = (0, react_1.useCallback)(() => {\n        if (modalRef.current) {\n            modalRef.current.close();\n            handleContinue();\n        }\n    }, [handleContinue]);\n    /**\n     * Handler for the Contact Center logout confirmation modal cancel button\n     *\n     * Closes the dialog if it is currently open\n     */\n    const ccCancelButtonClicked = (0, react_1.useCallback)(() => {\n        var _a;\n        if ((_a = ccSignOutModalRef === null || ccSignOutModalRef === void 0 ? void 0 : ccSignOutModalRef.current) === null || _a === void 0 ? void 0 : _a.open) {\n            ccSignOutModalRef.current.close();\n            setShowCCSignOutModal(false);\n        }\n    }, []);\n    const updateDialNumberLabel = (selectedOption) => {\n        if (selectedOption != constants_1.DESKTOP && Object.keys(constants_1.LoginOptions).includes(selectedOption)) {\n            setDialNumberLabel(constants_1.LoginOptions[selectedOption]);\n            setDialNumberPlaceholder(constants_1.LoginOptions[selectedOption]);\n        }\n    };\n    /**\n     * Runs validation tests on a string given as a Dial Number\n     * @param {string} input\n     * @returns {boolean} whether or not to show a validation error\n     */\n    const validateDialNumber = (input) => {\n        const regexForDn = new RegExp(dialNumberRegex !== null && dialNumberRegex !== void 0 ? dialNumberRegex : '1[0-9]{3}[2-9][0-9]{6}([,]{1,10}[0-9]+){0,1}');\n        if (regexForDn.test(input)) {\n            return false;\n        }\n        setDNErrorText(constants_1.StationLoginLabels.DN_FORMAT_ERROR);\n        return true;\n    };\n    return (react_1.default.createElement(react_1.default.Fragment, null,\n        react_1.default.createElement(\"dialog\", { ref: modalRef, className: \"modal\", open: showMultipleLoginAlert },\n            react_1.default.createElement(\"h2\", null, constants_1.StationLoginLabels.MULTIPLE_SIGN_IN_ALERT_TITLE),\n            react_1.default.createElement(\"p\", null, constants_1.StationLoginLabels.MULTIPLE_SIGN_IN_ALERT_MESSAGE),\n            react_1.default.createElement(\"div\", { className: \"modal-content\" },\n                react_1.default.createElement(\"button\", { id: \"ContinueButton\", \"data-testid\": \"ContinueButton\", onClick: continueClicked }, constants_1.StationLoginLabels.CONTINUE))),\n        react_1.default.createElement(\"dialog\", { ref: ccSignOutModalRef, className: \"cc-logout-modal\" },\n            react_1.default.createElement(react_2.Text, { tagname: \"h2\", type: \"body-large-bold\", className: \"modal-text\" }, constants_1.StationLoginLabels.CC_SIGN_OUT),\n            react_1.default.createElement(react_2.Text, { tagname: \"p\", type: \"body-midsize-regular\", className: \"modal-text\" }, constants_1.StationLoginLabels.CC_SIGN_OUT_CONFIRM),\n            react_1.default.createElement(\"div\", { className: \"cc-logout-modal-content\" },\n                react_1.default.createElement(react_2.Button, { onClick: ccCancelButtonClicked, variant: \"secondary\", className: \"white-button\" }, constants_1.StationLoginLabels.CANCEL),\n                react_1.default.createElement(react_2.Button, { onClick: onCCSignOut }, constants_1.StationLoginLabels.SIGN_OUT))),\n        react_1.default.createElement(\"div\", { className: \"box station-login\" },\n            react_1.default.createElement(\"section\", { className: \"section-box\" },\n                react_1.default.createElement(react_2.Text, { tagname: 'span', type: \"body-large-bold\" }, constants_1.StationLoginLabels.INTERACTION_PREFERENCES),\n                react_1.default.createElement(\"div\", null,\n                    react_1.default.createElement(\"div\", { id: \"agent-login-label\" },\n                        react_1.default.createElement(react_2.Text, { type: \"body-midsize-regular\" }, constants_1.StationLoginLabels.HANDLE_CALLS),\n                        react_1.default.createElement(react_2.Icon, { name: \"info-badge-filled\", id: \"agent-login-info-badge\" }),\n                        react_1.default.createElement(react_2.Tooltip, { color: \"contrast\", id: \"agent-login-label-tooltip\", showArrow: true, triggerID: \"agent-login-info-badge\" },\n                            react_1.default.createElement(react_2.Text, { tagname: 'div', type: \"body-large-regular\", className: \"agent-login-popover\" }, constants_1.StationLoginLabels.HANDLE_CALLS_TOOLTIP))),\n                    react_1.default.createElement(\"div\", null,\n                        react_1.default.createElement(react_2.Select, { id: \"login-option\", name: \"login-option\", onChange: (event) => {\n                                const selectedOption = event.detail.value;\n                                // TODO: Select component is calling onChange with first label on load\n                                // bug ticket: https://jira-eng-gpk2.cisco.com/jira/browse/MOMENTUM-668\n                                if (Object.keys(constants_1.LoginOptions).includes(selectedOption)) {\n                                    setDeviceType(selectedOption);\n                                    setSelectedDeviceType(selectedOption);\n                                    updateDialNumberLabel(selectedOption);\n                                    // clear dial number when switching between DN and Extension\n                                    setDialNumber('');\n                                    setShowDNError(false);\n                                }\n                            }, value: selectedDeviceType, className: \"station-login-select\", selectedValue: selectedDeviceType, selectedValueText: constants_1.LoginOptions[selectedDeviceType] }, Object.keys(constants_1.LoginOptions).map((option, index) => {\n                            // only show loginOptions provided by store\n                            if (loginOptions.includes(option)) {\n                                return (react_1.default.createElement(react_2.Option, { selected: option === selectedDeviceType, key: index, value: option }, constants_1.LoginOptions[option]));\n                            }\n                        })))),\n                selectedDeviceType && selectedDeviceType !== constants_1.DESKTOP && (react_1.default.createElement(react_2.Input, { label: dialNumberLabel, placeholder: dialNumberPlaceholder, value: dialNumberValue, onChange: (event) => {\n                        const input = event.target.value.trim();\n                        setDialNumberValue(input);\n                        setDialNumber(input);\n                        // validation\n                        if (input.length === 0) {\n                            // show error for empty string\n                            setDNErrorText(`${constants_1.LoginOptions[selectedDeviceType]} ${constants_1.StationLoginLabels.IS_REQUIRED}`);\n                            setShowDNError(true);\n                        }\n                        else if (selectedDeviceType === constants_1.DIALNUMBER) {\n                            setShowDNError(validateDialNumber(input));\n                        }\n                        else {\n                            setShowDNError(false);\n                        }\n                    }, helpText: showDNError ? dnErrorText : undefined, helpTextType: showDNError ? 'error' : undefined })),\n                react_1.default.createElement(\"div\", { className: \"select-container\" },\n                    react_1.default.createElement(react_2.Select, { label: constants_1.StationLoginLabels.YOUR_TEAM, id: \"teams-dropdown\", name: \"teams-dropdown\", onChange: (event) => {\n                            setTeam(event.detail.value);\n                        }, className: \"station-login-select\", placeholder: constants_1.StationLoginLabels.YOUR_TEAM }, teams.map((team, index) => {\n                        return (react_1.default.createElement(react_2.Option, { key: index, value: team.id }, team.name));\n                    }))),\n                loginFailure && (react_1.default.createElement(react_2.Text, { className: \"error-text-color\", type: 'body-midsize-regular' }, (_a = constants_1.SignInErrors[loginFailure.message]) !== null && _a !== void 0 ? _a : constants_1.StationLoginLabels.DEFAULT_ERROR)),\n                react_1.default.createElement(\"div\", { className: \"btn-container\" },\n                    isAgentLoggedIn ? (react_1.default.createElement(react_2.Button, { id: \"logoutAgent\", onClick: logout, color: \"positive\" }, constants_1.StationLoginLabels.SIGN_OUT)) : (react_1.default.createElement(react_2.Button, { onClick: login, disabled: showDNError }, constants_1.StationLoginLabels.SAVE_AND_CONTINUE)),\n                    onCCSignOut && (react_1.default.createElement(react_2.Button, { onClick: () => setShowCCSignOutModal(true), variant: \"secondary\", className: \"white-button\" }, constants_1.StationLoginLabels.SIGN_OUT)))))));\n};\nexports[\"default\"] = StationLoginComponent;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/StationLogin/station-login.tsx?");
 
 /***/ }),
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@webex/cc-components",
   "description": "Webex Contact Center UI Components Library for your custom contact center solutions",
-  "version": "1.28.0-ccwidgets.53",
+  "version": "1.28.0-ccwidgets.54",
   "main": "dist/index.js",
   "publishConfig": {
     "access": "public"
@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@r2wc/react-to-web-component": "2.0.3",
-    "@webex/cc-store": "1.28.0-ccwidgets.53"
+    "@webex/cc-store": "1.28.0-ccwidgets.54"
   },
   "devDependencies": {
     "@babel/core": "7.25.2",