Skip to content

Commit cfb6cf4

Browse files
zachraymerZach Raymer
zachraymer
and
Zach Raymer
authored
feat(cc-widgets): Style station login component (#404)
Co-authored-by: Zach Raymer <[email protected]>
1 parent 1e2f13d commit cfb6cf4

File tree

11 files changed

+235
-191
lines changed

11 files changed

+235
-191
lines changed

‎packages/contact-center/cc-components/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -75,4 +75,4 @@
7575
"react": ">=18.3.1",
7676
"react-dom": ">=18.3.1"
7777
}
78-
}
78+
}

‎packages/contact-center/cc-widgets/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -86,4 +86,4 @@
8686
"^.+\\.(css|less|scss)$": "babel-jest"
8787
}
8888
}
89-
}
89+
}

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -72,4 +72,4 @@
7272
"^.+\\.(css|less|scss)$": "babel-jest"
7373
}
7474
}
75-
}
75+
}

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

+136-106
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
1-
import React, {useEffect, useRef} from 'react';
1+
import React, {useEffect, useState, useRef, useCallback} from 'react';
22
import {StationLoginPresentationalProps} from './station-login.types';
33
import './station-login.style.scss';
44
import {MULTIPLE_SIGN_IN_ALERT_MESSAGE, MULTIPLE_SIGN_IN_ALERT_TITLE} from './constants';
5-
import {ButtonPill} from '@momentum-ui/react-collaboration';
5+
import {ButtonPill, Text, SelectNext, TextInput} from '@momentum-ui/react-collaboration';
6+
import {Item} from '@react-stately/collections';
7+
import {Icon} from '@momentum-design/components/dist/react';
68

79
const StationLoginPresentational: React.FunctionComponent<StationLoginPresentationalProps> = (props) => {
810
const {
@@ -17,135 +19,163 @@ const StationLoginPresentational: React.FunctionComponent<StationLoginPresentati
1719
deviceType,
1820
showMultipleLoginAlert,
1921
handleContinue,
20-
} = props; // TODO: Use the loginSuccess, loginFailure, logoutSuccess props returned fromthe API response via helper file to reflect UI changes
22+
} = props;
23+
2124
const modalRef = useRef<HTMLDialogElement>(null);
25+
const [dialNumberValue, setDialNumberValue] = useState<string>('');
26+
const [agentLoginValue, setAgentLoginValue] = useState<string>('');
27+
const [teamsValue, setTeamsValue] = useState<string>('');
28+
const [isDialNumberDisabled, setIsDialNumberDisabled] = useState<boolean>(false);
2229

2330
useEffect(() => {
24-
const teamsDropdown = document.getElementById('teamsDropdown') as HTMLSelectElement;
25-
const agentLogin = document.querySelector('#LoginOption') as HTMLSelectElement;
26-
const dialNumber = document.querySelector('#dialNumber') as HTMLInputElement;
27-
if (teamsDropdown) {
28-
teamsDropdown.innerHTML = '';
29-
if (teams) {
30-
teams.forEach((team) => {
31-
const option = document.createElement('option');
32-
option.value = team.id;
33-
option.text = team.name;
34-
teamsDropdown.add(option);
35-
});
36-
setTeam(teamsDropdown.value);
37-
dialNumber.value = '';
38-
dialNumber.disabled = true;
39-
}
40-
}
4131
if (loginOptions.length > 0) {
42-
loginOptions.forEach((options) => {
43-
const option = document.createElement('option');
44-
option.text = options;
45-
option.value = options;
46-
agentLogin.add(option);
47-
});
48-
if (agentLogin && deviceType) {
49-
agentLogin.value = deviceType;
50-
}
32+
const firstOption = loginOptions[0];
33+
setAgentLoginValue('0');
34+
setDeviceType(firstOption);
5135
}
5236
}, [teams, loginOptions, deviceType]);
5337

5438
useEffect(() => {
55-
const modal = modalRef.current;
56-
if (showMultipleLoginAlert && modal) {
57-
modal.showModal();
39+
if (teams.length > 0) {
40+
const firstTeam = teams[0].id;
41+
setTeamsValue(firstTeam);
42+
setTeam(firstTeam);
5843
}
59-
}, [showMultipleLoginAlert, modalRef]);
44+
}, [teams, setTeam]);
6045

61-
const selectLoginOption = (event: {target: {value: string}}) => {
62-
const dialNumber = document.querySelector('#dialNumber') as HTMLInputElement;
63-
const deviceType = event.target.value;
64-
setDeviceType(deviceType);
65-
if (deviceType === 'AGENT_DN' || deviceType === 'EXTENSION') {
66-
dialNumber.disabled = false;
67-
} else {
68-
dialNumber.disabled = true;
46+
useEffect(() => {
47+
if (showMultipleLoginAlert && modalRef.current) {
48+
modalRef.current.showModal();
6949
}
70-
};
50+
}, [showMultipleLoginAlert]);
7151

72-
const continueClicked = () => {
73-
const modal = modalRef.current;
74-
if (modal) {
75-
modal.close();
52+
const selectLoginOption = useCallback(
53+
(key: string) => {
54+
const index = parseInt(key, 10);
55+
if (!isNaN(index) && loginOptions[index]) {
56+
setAgentLoginValue(key);
57+
setDeviceType(loginOptions[index]);
58+
setIsDialNumberDisabled(!['AGENT_DN', 'EXTENSION'].includes(loginOptions[index]));
59+
}
60+
},
61+
[loginOptions, setDeviceType]
62+
);
63+
64+
const continueClicked = useCallback(() => {
65+
if (modalRef.current) {
66+
modalRef.current.close();
7667
handleContinue();
7768
}
78-
};
69+
}, [handleContinue]);
7970

80-
function updateDN() {
81-
const dialNumber = document.querySelector('#dialNumber') as HTMLInputElement;
82-
setDialNumber(dialNumber.value);
83-
}
71+
const updateDN = useCallback(
72+
(value: string) => {
73+
setDialNumberValue(value);
74+
setDialNumber(value);
75+
},
76+
[setDialNumber]
77+
);
78+
79+
const updateTeam = useCallback(
80+
(value: string) => {
81+
setTeamsValue(value);
82+
setTeam(value);
83+
},
84+
[setTeam]
85+
);
8486

8587
return (
8688
<>
87-
{showMultipleLoginAlert && (
88-
<dialog ref={modalRef} className="modal">
89-
<h2>{MULTIPLE_SIGN_IN_ALERT_TITLE}</h2>
90-
<p>{MULTIPLE_SIGN_IN_ALERT_MESSAGE}</p>
91-
<div className="modal-content">
92-
<button id="ContinueButton" data-testid="ContinueButton" onClick={continueClicked}>
93-
Continue
94-
</button>
95-
</div>
96-
</dialog>
97-
)}
98-
<div className="box">
89+
<dialog ref={modalRef} className="modal" open={showMultipleLoginAlert}>
90+
<h2>{MULTIPLE_SIGN_IN_ALERT_TITLE}</h2>
91+
<p>{MULTIPLE_SIGN_IN_ALERT_MESSAGE}</p>
92+
<div className="modal-content">
93+
<button id="ContinueButton" data-testid="ContinueButton" onClick={continueClicked}>
94+
Continue
95+
</button>
96+
</div>
97+
</dialog>
98+
<div className="box station-login">
9999
<section className="section-box">
100100
<fieldset className="fieldset">
101-
<legend className="legend-box">Agent</legend>
102-
<div style={{display: 'flex', flexDirection: 'column', flexGrow: 1}}>
103-
<div style={{display: 'flex', gap: '1rem'}}>
104-
<fieldset
105-
style={{
106-
border: '1px solid #ccc',
107-
borderRadius: '5px',
108-
padding: '10px',
109-
marginBottom: '20px',
110-
flex: 0.69,
111-
}}
112-
>
113-
<legend className="legend-box">Select Team</legend>
114-
<select id="teamsDropdown" className="select">
115-
Teams
116-
</select>
117-
</fieldset>
118-
<fieldset className="fieldset">
119-
<legend className="legend-box">Agent Login</legend>
120-
<select name="LoginOption" id="LoginOption" className="select" onChange={selectLoginOption}>
121-
<option value="" hidden>
122-
Choose Agent Login Option...
123-
</option>
124-
</select>
125-
<input
126-
className="input"
127-
id="dialNumber"
128-
name="dialNumber"
129-
placeholder="Extension/Dial Number"
130-
type="text"
131-
onInput={updateDN}
132-
/>
133-
{isAgentLoggedIn ? (
134-
<ButtonPill id="logoutAgent" onPress={logout} color="cancel">
135-
Logout
136-
</ButtonPill>
137-
) : (
138-
<ButtonPill id="AgentLogin" onPress={login} color="join">
139-
Login
140-
</ButtonPill>
141-
)}
142-
</fieldset>
143-
</div>
101+
<Text tagName={'span'} type="heading-small-bold">
102+
Set your interaction preferences
103+
</Text>
104+
</fieldset>
105+
<fieldset className="fieldset">
106+
<legend id="agent-login-label">Handle calls using</legend>
107+
<div className="select-container">
108+
<SelectNext
109+
id="login-option"
110+
direction="bottom"
111+
showBorder
112+
aria-labelledby="agent-login-label"
113+
items={loginOptions.map((name, id) => ({key: id.toString(), name}))}
114+
selectedKey={agentLoginValue}
115+
onSelectionChange={selectLoginOption}
116+
className="station-login-select"
117+
>
118+
{(item) => (
119+
<Item textValue={item.name} key={item.key}>
120+
<Text className="state-name" tagName={'small'}>
121+
{item.name}
122+
</Text>
123+
</Item>
124+
)}
125+
</SelectNext>
126+
<Icon className="select-arrow-icon" name="arrow-down-bold" title="" />
127+
</div>
128+
</fieldset>
129+
<fieldset className="fieldset">
130+
<legend id="dial-number-label">Dial number</legend>
131+
<TextInput
132+
clearAriaLabel="Clear"
133+
aria-labelledby="dial-number-label"
134+
placeholder="Extension/Dial Number"
135+
onChange={updateDN}
136+
value={dialNumberValue}
137+
isDisabled={isDialNumberDisabled}
138+
/>
139+
</fieldset>
140+
<fieldset className="fieldset">
141+
<legend id="team-label">Your team</legend>
142+
<div className="select-container">
143+
<SelectNext
144+
id="teams-dropdown"
145+
direction="bottom"
146+
showBorder
147+
aria-labelledby="team-label"
148+
items={teams}
149+
selectedKey={teamsValue}
150+
onSelectionChange={updateTeam}
151+
className="station-login-select"
152+
>
153+
{(item) => (
154+
<Item textValue={item.name} key={item.id}>
155+
<Text className="state-name" tagName={'small'}>
156+
{item.name}
157+
</Text>
158+
</Item>
159+
)}
160+
</SelectNext>
161+
<Icon className="select-arrow-icon" name="arrow-down-bold" title="" />
144162
</div>
145163
</fieldset>
164+
<div className="btn-container">
165+
{isAgentLoggedIn ? (
166+
<ButtonPill id="logoutAgent" onPress={logout} color="cancel">
167+
Logout
168+
</ButtonPill>
169+
) : (
170+
<ButtonPill id="AgentLogin" onPress={login} color="join">
171+
Save & Continue
172+
</ButtonPill>
173+
)}
174+
</div>
146175
</section>
147176
</div>
148177
</>
149178
);
150179
};
180+
151181
export default StationLoginPresentational;

0 commit comments

Comments
 (0)