Skip to content

Commit 936e59c

Browse files
zachraymerZach Raymer
andauthored
fix(cc-widgets): widget station login issues (#638)
Co-authored-by: Zach Raymer <zraymer@cisco.com>
1 parent 3876709 commit 936e59c

9 files changed

Lines changed: 359 additions & 614 deletions

File tree

packages/contact-center/cc-components/src/components/StationLogin/constants.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@ export const StationLoginLabels = {
1616
'This is your preferred method for receiving and making calls. Choose between your phone number, extension (if available), or your web browser.',
1717
YOUR_TEAM: 'Your Team',
1818
IS_REQUIRED: ' is required',
19-
DN_FORMAT_ERROR: 'Enter a valid US dial number. For help, reach out to your administrator or support team.',
19+
DN_FORMAT_ERROR:
20+
'Enter a valid US or international dial number. For help, reach out to your administrator or support team.',
2021
DEFAULT_ERROR: 'Error logging in: ',
2122
CONFIRM: 'Confirm',
2223
CONFIRM_INTERACTION_PREFERENCE_CHANGES_TITLE: 'Confirm interaction preference changes',

packages/contact-center/cc-components/src/components/StationLogin/station-login.tsx

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -330,7 +330,14 @@ const StationLoginComponent: React.FunctionComponent<StationLoginComponentProps>
330330
</Button>
331331
)}
332332
{!isAgentLoggedIn && (
333-
<Button onClick={login} disabled={showDNError} data-testid="login-button">
333+
<Button
334+
onClick={login}
335+
disabled={
336+
!selectedTeamId ||
337+
(selectedDeviceType !== DESKTOP && (dialNumberValue.trim().length === 0 || showDNError))
338+
}
339+
data-testid="login-button"
340+
>
334341
{StationLoginLabels.SAVE_AND_CONTINUE}
335342
</Button>
336343
)}

packages/contact-center/cc-components/src/components/StationLogin/station-login.utils.tsx

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -109,14 +109,9 @@ const updateDialNumberLabel = (
109109
* @param {string} input
110110
* @returns {boolean} whether or not to show a validation error
111111
*/
112-
const validateDialNumber = (
113-
input: string,
114-
dialNumberRegex: null | string,
115-
setDNErrorText: (error: string) => void,
116-
logger
117-
): boolean => {
112+
const validateDialNumber = (input: string, setDNErrorText: (error: string) => void, logger): boolean => {
118113
try {
119-
const regexForDn = new RegExp(dialNumberRegex ?? '1[0-9]{3}[2-9][0-9]{6}([,]{1,10}[0-9]+){0,1}');
114+
const regexForDn = new RegExp('^\\+?[0-9]{7,15}([,]{1,10}[0-9]+)?$');
120115
if (regexForDn.test(input)) {
121116
return false;
122117
}
@@ -271,7 +266,7 @@ const handleDNInputChanged = (
271266
setDNErrorText(`${LoginOptions[selectedDeviceType]} ${StationLoginLabels.IS_REQUIRED}`);
272267
setShowDNError(true);
273268
} else if (selectedDeviceType === DIAL_NUMBER) {
274-
setShowDNError(validateDialNumber(input, dialNumberRegex, setDNErrorText, logger));
269+
setShowDNError(validateDialNumber(input, setDNErrorText, logger));
275270
} else {
276271
setShowDNError(false);
277272
}

packages/contact-center/cc-components/tests/components/StationLogin/__snapshots__/station-login.snapshot.tsx.snap

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -898,8 +898,10 @@ exports[`Station Login Component Actions SignOut Modal Popup should close modal
898898
class="btn-container"
899899
>
900900
<mdc-button
901+
aria-disabled="true"
901902
color="default"
902903
data-testid="login-button"
904+
disabled=""
903905
role="button"
904906
size="32"
905907
tabindex="0"
@@ -2454,8 +2456,10 @@ exports[`Station Login Component Actions calls handleDNInputChanged with correct
24542456
class="btn-container"
24552457
>
24562458
<mdc-button
2459+
aria-disabled="true"
24572460
color="default"
24582461
data-testid="login-button"
2462+
disabled=""
24592463
role="button"
24602464
size="32"
24612465
tabindex="0"
@@ -2774,8 +2778,10 @@ exports[`Station Login Component Actions calls handleTeamSelectChanged utility f
27742778
class="btn-container"
27752779
>
27762780
<mdc-button
2781+
aria-disabled="true"
27772782
color="default"
27782783
data-testid="login-button"
2784+
disabled=""
27792785
role="button"
27802786
size="32"
27812787
tabindex="0"
@@ -3073,8 +3079,10 @@ exports[`Station Login Component Rendering does not render loginOptions if not i
30733079
class="btn-container"
30743080
>
30753081
<mdc-button
3082+
aria-disabled="true"
30763083
color="default"
30773084
data-testid="login-button"
3085+
disabled=""
30783086
role="button"
30793087
size="32"
30803088
tabindex="0"
@@ -3676,8 +3684,10 @@ exports[`Station Login Component Rendering hides Desktop login option when hideD
36763684
class="btn-container"
36773685
>
36783686
<mdc-button
3687+
aria-disabled="true"
36793688
color="default"
36803689
data-testid="login-button"
3690+
disabled=""
36813691
role="button"
36823692
size="32"
36833693
tabindex="0"
@@ -4004,8 +4014,10 @@ exports[`Station Login Component Rendering renders login failure when passed 1`]
40044014
class="btn-container"
40054015
>
40064016
<mdc-button
4017+
aria-disabled="true"
40074018
color="default"
40084019
data-testid="login-button"
4020+
disabled=""
40094021
role="button"
40104022
size="32"
40114023
tabindex="0"
@@ -4332,8 +4344,10 @@ exports[`Station Login Component Rendering renders save error when passed 1`] =
43324344
class="btn-container"
43334345
>
43344346
<mdc-button
4347+
aria-disabled="true"
43354348
color="default"
43364349
data-testid="login-button"
4350+
disabled=""
43374351
role="button"
43384352
size="32"
43394353
tabindex="0"
@@ -4652,8 +4666,10 @@ exports[`Station Login Component Rendering renders the component correctly 1`] =
46524666
class="btn-container"
46534667
>
46544668
<mdc-button
4669+
aria-disabled="true"
46554670
color="default"
46564671
data-testid="login-button"
4672+
disabled=""
46574673
role="button"
46584674
size="32"
46594675
tabindex="0"
@@ -5275,8 +5291,10 @@ exports[`Station Login Component Rendering shows Desktop login option when hideD
52755291
class="btn-container"
52765292
>
52775293
<mdc-button
5294+
aria-disabled="true"
52785295
color="default"
52795296
data-testid="login-button"
5297+
disabled=""
52805298
role="button"
52815299
size="32"
52825300
tabindex="0"
@@ -5595,8 +5613,10 @@ exports[`Station Login Component Rendering shows Desktop login option when hideD
55955613
class="btn-container"
55965614
>
55975615
<mdc-button
5616+
aria-disabled="true"
55985617
color="default"
55995618
data-testid="login-button"
5619+
disabled=""
56005620
role="button"
56015621
size="32"
56025622
tabindex="0"

packages/contact-center/cc-components/tests/components/StationLogin/station-login.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -906,7 +906,7 @@ describe('Station Login Component', () => {
906906
}) as unknown as typeof RegExp;
907907

908908
const mockSetError = jest.fn();
909-
const result = stationLoginUtils.validateDialNumber('invalid', null, mockSetError, loggerMock);
909+
const result = stationLoginUtils.validateDialNumber('invalid', mockSetError, loggerMock);
910910

911911
expect(loggerMock.error).toHaveBeenCalledWith('CC-Widgets: StationLogin: Error in validateDialNumber', {
912912
module: 'cc-components#station-login.utils.tsx',

packages/contact-center/cc-components/tests/components/StationLogin/station-login.utils.tsx

Lines changed: 26 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -224,39 +224,44 @@ describe('Station Login Utils', () => {
224224
mockSetDNErrorText.mockClear();
225225
});
226226

227-
it('should return false for valid dial number with default regex', () => {
228-
const validNumber = '15552234567'; // Changed 4th digit from 1 to 2 to match [2-9] pattern
229-
const result = validateDialNumber(validNumber, null, mockSetDNErrorText, loggerMock);
227+
it('should return false for valid US dial number with default regex', () => {
228+
const validNumber = '15552234567';
229+
const result = validateDialNumber(validNumber, mockSetDNErrorText, loggerMock);
230230
expect(result).toBe(false);
231231
expect(mockSetDNErrorText).not.toHaveBeenCalled();
232232
});
233233

234-
it('should return true for invalid dial number and set error text', () => {
235-
const invalidNumber = '911'; // This should be invalid for the default regex (too short and doesn't match pattern)
236-
const result = validateDialNumber(invalidNumber, null, mockSetDNErrorText, loggerMock);
237-
expect(result).toBe(true);
238-
expect(mockSetDNErrorText).toHaveBeenCalledWith(StationLoginLabels.DN_FORMAT_ERROR);
234+
it('should return false for valid international dial number with + prefix', () => {
235+
const validNumber = '+442071234567'; // UK number
236+
const result = validateDialNumber(validNumber, mockSetDNErrorText, loggerMock);
237+
expect(result).toBe(false);
238+
expect(mockSetDNErrorText).not.toHaveBeenCalled();
239239
});
240240

241-
it('should accept any input when empty string regex is provided', () => {
242-
const anyNumber = '911'; // With empty string regex, this becomes /(?:)/ which matches everything
243-
const result = validateDialNumber(anyNumber, '', mockSetDNErrorText, loggerMock);
244-
expect(result).toBe(false); // Should return false (no error) because empty regex matches everything
241+
it('should return false for valid international dial number without + prefix', () => {
242+
const validNumber = '442071234567'; // UK number without +
243+
const result = validateDialNumber(validNumber, mockSetDNErrorText, loggerMock);
244+
expect(result).toBe(false);
245245
expect(mockSetDNErrorText).not.toHaveBeenCalled();
246246
});
247247

248-
it('should use custom regex when provided', () => {
249-
const customRegex = '^\\d{10}$';
250-
const validNumber = '1234567890';
251-
const result = validateDialNumber(validNumber, customRegex, mockSetDNErrorText, loggerMock);
248+
it('should return false for valid short international dial number', () => {
249+
const validNumber = '1234567'; // 7 digit minimum
250+
const result = validateDialNumber(validNumber, mockSetDNErrorText, loggerMock);
252251
expect(result).toBe(false);
253252
expect(mockSetDNErrorText).not.toHaveBeenCalled();
254253
});
255254

256-
it('should return true for invalid number with custom regex', () => {
257-
const customRegex = '^\\d{10}$';
258-
const invalidNumber = '123';
259-
const result = validateDialNumber(invalidNumber, customRegex, mockSetDNErrorText, loggerMock);
255+
it('should return true for invalid dial number (too short) and set error text', () => {
256+
const invalidNumber = '911'; // Too short (less than 7 digits)
257+
const result = validateDialNumber(invalidNumber, mockSetDNErrorText, loggerMock);
258+
expect(result).toBe(true);
259+
expect(mockSetDNErrorText).toHaveBeenCalledWith(StationLoginLabels.DN_FORMAT_ERROR);
260+
});
261+
262+
it('should return true for invalid dial number (too long) and set error text', () => {
263+
const invalidNumber = '1234567890123456'; // Too long (more than 15 digits)
264+
const result = validateDialNumber(invalidNumber, mockSetDNErrorText, loggerMock);
260265
expect(result).toBe(true);
261266
expect(mockSetDNErrorText).toHaveBeenCalledWith(StationLoginLabels.DN_FORMAT_ERROR);
262267
});
@@ -830,7 +835,7 @@ describe('Station Login Utils', () => {
830835
}) as unknown as typeof RegExp;
831836

832837
const mockSetError = jest.fn();
833-
const result = validateDialNumber('15551234567', null, mockSetError, loggerMock);
838+
const result = validateDialNumber('15551234567', mockSetError, loggerMock);
834839

835840
expect(loggerMock.error).toHaveBeenCalledWith('CC-Widgets: StationLogin: Error in validateDialNumber', {
836841
module: 'cc-components#station-login.utils.tsx',

packages/contact-center/store/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
"deploy:npm": "yarn npm publish"
2424
},
2525
"dependencies": {
26-
"@webex/contact-center": "3.11.0-next.17",
26+
"@webex/contact-center": "3.11.0-next.20",
2727
"mobx": "6.13.5",
2828
"typescript": "5.6.3"
2929
},

widgets-samples/cc/samples-cc-react-app/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
"react-dom": "18.3.1",
3333
"ts-loader": "^9.5.1",
3434
"typescript": "^5.6.3",
35-
"webex": "3.11.0-next.25",
35+
"webex": "3.11.0-next.50",
3636
"webpack": "^5.94.0",
3737
"webpack-cli": "^5.1.4",
3838
"webpack-dev-server": "^5.1.0",

0 commit comments

Comments
 (0)