fix(cc-widgets): update station login component to use international dialing prop (#654)

zachraymer · Zach Raymer · web-flow · commit 0cd6188aacd7 · 2026-03-17T11:39:09.000-05:00
Co-authored-by: Zach Raymer &lt;zraymer@cisco.com&gt;
diff --git a/packages/contact-center/cc-components/src/components/StationLogin/station-login.tsx b/packages/contact-center/cc-components/src/components/StationLogin/station-login.tsx
@@ -16,6 +16,7 @@ import {
   saveConfirmCancelClicked,
   updateDialNumberLabel,
   handleCCSignoutKeyDown,
+  INTERNATIONAL_DIAL_NUMBER_REGEX,
 } from './station-login.utils';
 import {withMetrics} from '@webex/cc-ui-logging';
 
@@ -49,8 +50,15 @@ const StationLoginComponent: React.FunctionComponent<StationLoginComponentProps>
     dialNumberValue,
     setSelectedTeamId,
     hideDesktopLogin,
+    allowInternationalDn,
   } = props;
 
+  // Determine the regex to use for dial number validation:
+  // 1. If allowInternationalDn is true, use international regex
+  // 2. Otherwise, use dialNumberRegex from agentConfig (if provided)
+  // 3. If dialNumberRegex is null/undefined, validateDialNumber will fall back to US regex
+  const resolvedDialNumberRegex = allowInternationalDn ? INTERNATIONAL_DIAL_NUMBER_REGEX : dialNumberRegex;
+
   const [dialNumberLabel, setDialNumberLabel] = useState<string>('');
 
   const [dialNumberPlaceholder, setDialNumberPlaceholder] = useState<string>('');
@@ -262,7 +270,7 @@ const StationLoginComponent: React.FunctionComponent<StationLoginComponentProps>
                   setDialNumber,
                   setShowDNError,
                   setDNErrorText,
-                  dialNumberRegex,
+                  resolvedDialNumberRegex,
                   setCurrentLoginOptions,
                   selectedDeviceType,
                   logger
diff --git a/packages/contact-center/cc-components/src/components/StationLogin/station-login.types.ts b/packages/contact-center/cc-components/src/components/StationLogin/station-login.types.ts
@@ -209,6 +209,13 @@ export interface IStationLoginProps {
    * Default: undefined (shows Desktop mode)
    */
   hideDesktopLogin?: boolean;
+
+  /**
+   * If true, uses international dial number regex for validation.
+   * If false or undefined, uses dialNumberRegex from agentConfig or falls back to US regex.
+   * Default: undefined (uses dialNumberRegex or US fallback)
+   */
+  allowInternationalDn?: boolean;
 }
 
 export interface LoginOptionsState {
@@ -251,4 +258,5 @@ export type StationLoginComponentProps = Pick<
   | 'setSelectedTeamId'
   | 'selectedTeamId'
   | 'hideDesktopLogin'
+  | 'allowInternationalDn'
 >;
diff --git a/packages/contact-center/cc-components/src/components/StationLogin/station-login.utils.tsx b/packages/contact-center/cc-components/src/components/StationLogin/station-login.utils.tsx
@@ -104,14 +104,28 @@ const updateDialNumberLabel = (
   }
 };
 
+// Default US dial number regex fallback
+const DEFAULT_US_DIAL_NUMBER_REGEX = '1[0-9]{3}[2-9][0-9]{6}([,]{1,10}[0-9]+){0,1}';
+// International dial number regex
+const INTERNATIONAL_DIAL_NUMBER_REGEX = '^\\+?[0-9]{7,15}([,]{1,10}[0-9]+)?$';
+
 /**
  * Runs validation tests on a string given as a Dial Number
- * @param {string} input
+ * @param {string} input - The dial number to validate
+ * @param {string | null} dialNumberRegex - Optional regex pattern for validation. If null, falls back to default US regex.
+ * @param {function} setDNErrorText - Callback to set error text
+ * @param {object} logger - Logger instance
  * @returns {boolean} whether or not to show a validation error
  */
-const validateDialNumber = (input: string, setDNErrorText: (error: string) => void, logger): boolean => {
+const validateDialNumber = (
+  input: string,
+  dialNumberRegex: string | null,
+  setDNErrorText: (error: string) => void,
+  logger
+): boolean => {
   try {
-    const regexForDn = new RegExp('^\\+?[0-9]{7,15}([,]{1,10}[0-9]+)?$');
+    const regexPattern = dialNumberRegex ?? DEFAULT_US_DIAL_NUMBER_REGEX;
+    const regexForDn = new RegExp(regexPattern);
     if (regexForDn.test(input)) {
       return false;
     }
@@ -266,7 +280,7 @@ const handleDNInputChanged = (
       setDNErrorText(`${LoginOptions[selectedDeviceType]} ${StationLoginLabels.IS_REQUIRED}`);
       setShowDNError(true);
     } else if (selectedDeviceType === DIAL_NUMBER) {
-      setShowDNError(validateDialNumber(input, setDNErrorText, logger));
+      setShowDNError(validateDialNumber(input, dialNumberRegex, setDNErrorText, logger));
     } else {
       setShowDNError(false);
     }
@@ -355,4 +369,6 @@ export {
   handleTeamSelectChanged,
   handleOnCCSignOut,
   handleCCSignoutKeyDown,
+  DEFAULT_US_DIAL_NUMBER_REGEX,
+  INTERNATIONAL_DIAL_NUMBER_REGEX,
 };
diff --git a/packages/contact-center/cc-components/tests/components/StationLogin/station-login.tsx b/packages/contact-center/cc-components/tests/components/StationLogin/station-login.tsx
@@ -906,7 +906,7 @@ describe('Station Login Component', () => {
       }) as unknown as typeof RegExp;
 
       const mockSetError = jest.fn();
-      const result = stationLoginUtils.validateDialNumber('invalid', mockSetError, loggerMock);
+      const result = stationLoginUtils.validateDialNumber('invalid', null, mockSetError, loggerMock);
 
       expect(loggerMock.error).toHaveBeenCalledWith('CC-Widgets: StationLogin: Error in validateDialNumber', {
         module: 'cc-components#station-login.utils.tsx',
diff --git a/packages/contact-center/cc-components/tests/components/StationLogin/station-login.utils.tsx b/packages/contact-center/cc-components/tests/components/StationLogin/station-login.utils.tsx
@@ -15,6 +15,8 @@ import {
   handleTeamSelectChanged,
   handleOnCCSignOut,
   handleCCSignoutKeyDown,
+  DEFAULT_US_DIAL_NUMBER_REGEX,
+  INTERNATIONAL_DIAL_NUMBER_REGEX,
 } from '../../../src/components/StationLogin/station-login.utils';
 import {StationLoginLabels} from '../../../src/components/StationLogin/constants';
 
@@ -224,46 +226,90 @@ describe('Station Login Utils', () => {
       mockSetDNErrorText.mockClear();
     });
 
-    it('should return false for valid US dial number with default regex', () => {
-      const validNumber = '15552234567';
-      const result = validateDialNumber(validNumber, mockSetDNErrorText, loggerMock);
-      expect(result).toBe(false);
-      expect(mockSetDNErrorText).not.toHaveBeenCalled();
-    });
+    describe('with international regex', () => {
+      it('should return false for valid international dial number with + prefix', () => {
+        const validNumber = '+442071234567'; // UK number
+        const result = validateDialNumber(validNumber, INTERNATIONAL_DIAL_NUMBER_REGEX, mockSetDNErrorText, loggerMock);
+        expect(result).toBe(false);
+        expect(mockSetDNErrorText).not.toHaveBeenCalled();
+      });
 
-    it('should return false for valid international dial number with + prefix', () => {
-      const validNumber = '+442071234567'; // UK number
-      const result = validateDialNumber(validNumber, mockSetDNErrorText, loggerMock);
-      expect(result).toBe(false);
-      expect(mockSetDNErrorText).not.toHaveBeenCalled();
-    });
+      it('should return false for valid international dial number without + prefix', () => {
+        const validNumber = '442071234567'; // UK number without +
+        const result = validateDialNumber(validNumber, INTERNATIONAL_DIAL_NUMBER_REGEX, mockSetDNErrorText, loggerMock);
+        expect(result).toBe(false);
+        expect(mockSetDNErrorText).not.toHaveBeenCalled();
+      });
 
-    it('should return false for valid international dial number without + prefix', () => {
-      const validNumber = '442071234567'; // UK number without +
-      const result = validateDialNumber(validNumber, mockSetDNErrorText, loggerMock);
-      expect(result).toBe(false);
-      expect(mockSetDNErrorText).not.toHaveBeenCalled();
-    });
+      it('should return false for valid short international dial number (7 digits)', () => {
+        const validNumber = '1234567'; // 7 digit minimum
+        const result = validateDialNumber(validNumber, INTERNATIONAL_DIAL_NUMBER_REGEX, mockSetDNErrorText, loggerMock);
+        expect(result).toBe(false);
+        expect(mockSetDNErrorText).not.toHaveBeenCalled();
+      });
+
+      it('should return true for invalid dial number (too short) and set error text', () => {
+        const invalidNumber = '911'; // Too short (less than 7 digits)
+        const result = validateDialNumber(
+          invalidNumber,
+          INTERNATIONAL_DIAL_NUMBER_REGEX,
+          mockSetDNErrorText,
+          loggerMock
+        );
+        expect(result).toBe(true);
+        expect(mockSetDNErrorText).toHaveBeenCalledWith(StationLoginLabels.DN_FORMAT_ERROR);
+      });
 
-    it('should return false for valid short international dial number', () => {
-      const validNumber = '1234567'; // 7 digit minimum
-      const result = validateDialNumber(validNumber, mockSetDNErrorText, loggerMock);
-      expect(result).toBe(false);
-      expect(mockSetDNErrorText).not.toHaveBeenCalled();
+      it('should return true for invalid dial number (too long) and set error text', () => {
+        const invalidNumber = '1234567890123456'; // Too long (more than 15 digits)
+        const result = validateDialNumber(
+          invalidNumber,
+          INTERNATIONAL_DIAL_NUMBER_REGEX,
+          mockSetDNErrorText,
+          loggerMock
+        );
+        expect(result).toBe(true);
+        expect(mockSetDNErrorText).toHaveBeenCalledWith(StationLoginLabels.DN_FORMAT_ERROR);
+      });
     });
 
-    it('should return true for invalid dial number (too short) and set error text', () => {
-      const invalidNumber = '911'; // Too short (less than 7 digits)
-      const result = validateDialNumber(invalidNumber, mockSetDNErrorText, loggerMock);
-      expect(result).toBe(true);
-      expect(mockSetDNErrorText).toHaveBeenCalledWith(StationLoginLabels.DN_FORMAT_ERROR);
+    describe('with US regex (null fallback)', () => {
+      it('should return false for valid US dial number with null regex (uses default US)', () => {
+        const validNumber = '15552234567';
+        const result = validateDialNumber(validNumber, null, mockSetDNErrorText, loggerMock);
+        expect(result).toBe(false);
+        expect(mockSetDNErrorText).not.toHaveBeenCalled();
+      });
+
+      it('should return true for international number when using US regex fallback', () => {
+        const internationalNumber = '+442071234567'; // UK number - invalid for US regex
+        const result = validateDialNumber(internationalNumber, null, mockSetDNErrorText, loggerMock);
+        expect(result).toBe(true);
+        expect(mockSetDNErrorText).toHaveBeenCalledWith(StationLoginLabels.DN_FORMAT_ERROR);
+      });
+
+      it('should return true for short number when using US regex fallback', () => {
+        const shortNumber = '1234567'; // Too short for US format
+        const result = validateDialNumber(shortNumber, null, mockSetDNErrorText, loggerMock);
+        expect(result).toBe(true);
+        expect(mockSetDNErrorText).toHaveBeenCalledWith(StationLoginLabels.DN_FORMAT_ERROR);
+      });
     });
 
-    it('should return true for invalid dial number (too long) and set error text', () => {
-      const invalidNumber = '1234567890123456'; // Too long (more than 15 digits)
-      const result = validateDialNumber(invalidNumber, mockSetDNErrorText, loggerMock);
-      expect(result).toBe(true);
-      expect(mockSetDNErrorText).toHaveBeenCalledWith(StationLoginLabels.DN_FORMAT_ERROR);
+    describe('with custom regex from agentConfig', () => {
+      it('should return false for valid number matching custom regex', () => {
+        const validNumber = '15552234567';
+        const result = validateDialNumber(validNumber, DEFAULT_US_DIAL_NUMBER_REGEX, mockSetDNErrorText, loggerMock);
+        expect(result).toBe(false);
+        expect(mockSetDNErrorText).not.toHaveBeenCalled();
+      });
+
+      it('should return true for invalid number not matching custom regex', () => {
+        const invalidNumber = '911';
+        const result = validateDialNumber(invalidNumber, DEFAULT_US_DIAL_NUMBER_REGEX, mockSetDNErrorText, loggerMock);
+        expect(result).toBe(true);
+        expect(mockSetDNErrorText).toHaveBeenCalledWith(StationLoginLabels.DN_FORMAT_ERROR);
+      });
     });
   });
 
@@ -835,7 +881,7 @@ describe('Station Login Utils', () => {
       }) as unknown as typeof RegExp;
 
       const mockSetError = jest.fn();
-      const result = validateDialNumber('15551234567', mockSetError, loggerMock);
+      const result = validateDialNumber('15551234567', null, mockSetError, loggerMock);
 
       expect(loggerMock.error).toHaveBeenCalledWith('CC-Widgets: StationLogin: Error in validateDialNumber', {
         module: 'cc-components#station-login.utils.tsx',
diff --git a/packages/contact-center/station-login/src/station-login/index.tsx b/packages/contact-center/station-login/src/station-login/index.tsx
@@ -8,7 +8,17 @@ import {useStationLogin} from '../helper';
 import {StationLoginProps} from './station-login.types';
 
 const StationLoginInternal: React.FunctionComponent<StationLoginProps> = observer(
-  ({onLogin, onLogout, onCCSignOut, profileMode, onSaveStart, onSaveEnd, doStationLogout, hideDesktopLogin}) => {
+  ({
+    onLogin,
+    onLogout,
+    onCCSignOut,
+    profileMode,
+    onSaveStart,
+    onSaveEnd,
+    doStationLogout,
+    hideDesktopLogin,
+    allowInternationalDn,
+  }) => {
     const {
       cc,
       teams,
@@ -54,6 +64,7 @@ const StationLoginInternal: React.FunctionComponent<StationLoginProps> = observe
       logger,
       profileMode,
       hideDesktopLogin,
+      allowInternationalDn,
     };
 
     return <StationLoginComponent {...props} />;
diff --git a/packages/contact-center/station-login/src/station-login/station-login.types.ts b/packages/contact-center/station-login/src/station-login/station-login.types.ts
@@ -28,5 +28,6 @@ export type StationLoginProps = Pick<IStationLoginProps, 'profileMode'> &
       | 'teamId'
       | 'doStationLogout'
       | 'hideDesktopLogin'
+      | 'allowInternationalDn'
     >
   >;
diff --git a/widgets-samples/cc/samples-cc-react-app/src/App.tsx b/widgets-samples/cc/samples-cc-react-app/src/App.tsx
@@ -84,6 +84,10 @@ function App() {
     const savedHideDesktopLogin = window.localStorage.getItem('hideDesktopLogin');
     return savedHideDesktopLogin === 'true';
   });
+  const [allowInternationalDn, setAllowInternationalDn] = useState(() => {
+    const savedAllowInternationalDn = window.localStorage.getItem('allowInternationalDn');
+    return savedAllowInternationalDn === 'true';
+  });
 
   const handleSaveStart = () => {
     setShowLoader(true);
@@ -767,6 +771,19 @@ function App() {
                               setDoStationLogout(!doStationLogout);
                             }}
                           />
+                          <Checkbox
+                            data-testid="samples:allow-international-dn-checkbox"
+                            checked={allowInternationalDn}
+                            aria-label="allow international dial numbers checkbox"
+                            id="allow-international-dn-checkbox"
+                            label="Allow International Dial Numbers"
+                            // @ts-expect-error: TODO: https://github.com/momentum-design/momentum-design/pull/1118
+                            onchange={() => {
+                              const newValue = !allowInternationalDn;
+                              setAllowInternationalDn(newValue);
+                              window.localStorage.setItem('allowInternationalDn', String(newValue));
+                            }}
+                          />
                         </div>
                         <div className="station-login">
                           <StationLogin
@@ -776,6 +793,7 @@ function App() {
                             profileMode={false}
                             doStationLogout={doStationLogout}
                             hideDesktopLogin={hideDesktopLogin}
+                            allowInternationalDn={allowInternationalDn}
                           />
                         </div>
                       </fieldset>
@@ -799,13 +817,27 @@ function App() {
                               setHideDesktopLogin(!hideDesktopLogin);
                             }}
                           />
+                          <Checkbox
+                            data-testid="samples:allow-international-dn-profile-checkbox"
+                            checked={allowInternationalDn}
+                            aria-label="allow international dial numbers checkbox"
+                            id="allow-international-dn-profile-checkbox"
+                            label="Allow International Dial Numbers"
+                            // @ts-expect-error: TODO: https://github.com/momentum-design/momentum-design/pull/1118
+                            onchange={() => {
+                              const newValue = !allowInternationalDn;
+                              setAllowInternationalDn(newValue);
+                              window.localStorage.setItem('allowInternationalDn', String(newValue));
+                            }}
+                          />
                         </div>
                         <div className="station-login">
                           <StationLogin
                             profileMode={true}
                             onSaveStart={handleSaveStart}
                             onSaveEnd={handleSaveEnd}
                             hideDesktopLogin={hideDesktopLogin}
+                            allowInternationalDn={allowInternationalDn}
                           />
                         </div>
                       </fieldset>

Original file line number	Diff line number	Diff line change
`@@ -28,5 +28,6 @@ export type StationLoginProps = Pick<IStationLoginProps, 'profileMode'> &`
`28`	`28`	`\| 'teamId'`
`29`	`29`	`\| 'doStationLogout'`
`30`	`30`	`\| 'hideDesktopLogin'`
	`31`	`+ \| 'allowInternationalDn'`
`31`	`32`	`>`
`32`	`33`	`>;`