PR Comments

Author: molker

packages/contact-center/cc-components/src/components/task/OutdialCall/outdial-call.style.scss

@@ -4,6 +4,7 @@
   align-items: center;
   border-radius: 0.625rem;
   width: 15.625rem;
+
 
   mdc-input {
     padding-bottom: 0; // default is 1 rem, 1.5 rem needed but provided by .keys
@@ -13,14 +14,9 @@
     margin-bottom: 1rem;
   }
 
-  .input {
+  .outdial-input {
     width: 100%;
   }
-
-  .button {
-    width: 2.5rem;
-    height: 2.5rem;
-  }
 
   .keys {
     display: grid;

packages/contact-center/cc-components/src/components/task/OutdialCall/outdial-call.tsx

@@ -40,7 +40,7 @@ interface OutdialANIEntry {
  * @property startOutdial - Function to initiate the outdial call with the entered destination number.
  */
 const OutdialCallComponent: React.FunctionComponent<OutdialCallComponentProps> = (props) => {
-  const {startOutdial, getOutdialANIEntries} = props;
+  const {logger, startOutdial, getOutdialANIEntries} = props;
 
   // State Hooks
   const [destination, setDestination] = useState('');
@@ -62,7 +62,7 @@ const OutdialCallComponent: React.FunctionComponent<OutdialCallComponentProps> =
         const result = await getOutdialANIEntries();
         setOutdialANIList(result);
       } catch (error) {
-        console.error('Error fetching outdial ANI entries:', error);
+        logger?.error('Error fetching outdial ANI entries:', error);
         setOutdialANIList([]);
       }
     };
@@ -83,11 +83,11 @@ const OutdialCallComponent: React.FunctionComponent<OutdialCallComponentProps> =
   };
 
   /**
-   * handleKeyPress
+   * handleOnClick
    * @param value The key value pressed
    * Appends the pressed key to the destination input field
    */
-  const handleKeyPress = (value: string) => {
+  const handleOnClick = (value: string) => {
     setDestination(destination + value);
     validateOutboundNumber(destination + value);
   };
@@ -105,7 +105,7 @@ const OutdialCallComponent: React.FunctionComponent<OutdialCallComponentProps> =
         ></Tab>
       </header>
       <Input
-        className="input"
+        className="outdial-input"
         id="outdial-number-input"
         name="outdial-number-input"
         data-testid="outdial-number-input"
@@ -122,14 +122,14 @@ const OutdialCallComponent: React.FunctionComponent<OutdialCallComponentProps> =
       <ul className="keys">
         {KEY_LIST.map((key) => (
           <li key={key}>
-            <Button className="key button" onClick={() => handleKeyPress(key)}>
+            <Button className="key button" onClick={() => handleOnClick(key)}>
               {key}
             </Button>
           </li>
         ))}
       </ul>
       <Select
-        className="input"
+        className="outdial-input"
         label={OutdialStrings.ANI_SELECT_LABEL}
         id="outdial-ani-option"
         name="outdial-ani-option-select"
@@ -155,10 +155,10 @@ const OutdialCallComponent: React.FunctionComponent<OutdialCallComponentProps> =
       </Select>
       <Button
         data-testid="outdial-call-button"
-        className="button"
         prefixIcon={'handset-regular'}
         onClick={() => startOutdial(destination, selectedANI)}
         disabled={!!isValidNumber || !destination}
+        size={40}
       />
     </article>
   );

packages/contact-center/cc-components/src/components/task/task.types.ts

@@ -496,7 +496,7 @@ export interface OutdialCallProps {
   logger: ILogger;
 }
 
-export type OutdialCallComponentProps = Pick<OutdialCallProps, 'startOutdial' | 'getOutdialANIEntries'>;
+export type OutdialCallComponentProps = Pick<OutdialCallProps, 'logger' | 'startOutdial' | 'getOutdialANIEntries'>;
 
 /**
  * Interface representing the properties for CallControlListItem component.

packages/contact-center/cc-components/tests/components/task/OutdialCall/out-dial-call.tsx

@@ -3,30 +3,33 @@ import {render, fireEvent, screen, waitFor} from '@testing-library/react';
 import '@testing-library/jest-dom';
 import OutdialCallComponent from '../../../../src/components/task/OutdialCall/outdial-call';
 import store from '@webex/cc-store';
+import type {ILogger} from '@webex/cc-store';
 
 describe('OutdialCallComponent', () => {
   const mockStartOutdial = jest.fn();
   const mockGetOutdialANIEntries = jest.fn().mockReturnValue([
     {name: 'name 1', number: '1'},
     {name: 'name 2', number: '2'},
   ]);
-  const KEY_LIST = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '*', '0', '#'];
-  let customEvent;
-
-  // Prevent warning 'CC-Widgets: UI Metrics: No logger found'
-  store.store.logger = {
+  const mockLogger: ILogger = {
     log: jest.fn(),
     info: jest.fn(),
     warn: jest.fn(),
     error: jest.fn(),
     trace: jest.fn(),
   };
+  const KEY_LIST = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '*', '0', '#'];
+  let customEvent;
+
+  // Prevent warning 'CC-Widgets: UI Metrics: No logger found'
+  store.store.logger = mockLogger;
 
   beforeEach(() => {
     jest.clearAllMocks();
   });
 
   const props = {
+    logger: mockLogger,
     startOutdial: mockStartOutdial,
     getOutdialANIEntries: mockGetOutdialANIEntries,
   };

packages/contact-center/task/src/OutdialCall/index.tsx

@@ -10,6 +10,7 @@ const OutdialCallInternal: React.FunctionComponent = observer(() => {
 
   const result = useOutdialCall({cc, logger});
   const props = {
+    logger,
     ...result,
   };
 

packages/contact-center/task/src/helper.ts

@@ -874,7 +874,10 @@ export const useOutdialCall = (props: useOutdialCallProps) => {
   const getOutdialANIEntries = async () => {
     try {
       const agentProfile = cc.agentConfig;
-      const outdialANIId = agentProfile?.outdialANIId || '';
+      const outdialANIId = agentProfile?.outdialANIId;
+      if (!outdialANIId) {
+        throw Error('No OutdialANI Id received.');
+      }
       const result = await cc.getOutdialAniEntries({outdialANI: outdialANIId});
       return result;
     } catch (error) {