fix(task): match OutdialCall UI with Figma (#589)

Co-authored-by: molker <molker@cisco.com>

Author: brain-frog

packages/contact-center/cc-components/src/components/task/OutdialCall/constants.ts

@@ -7,7 +7,14 @@ export const OutdialStrings = {
   INCORRECT_DN_FORMAT: 'Incorrect format.',
   OUTDIAL_CALL: 'Outdial Call',
   ADDRESS_BOOK_SEARCH_PLACEHOLDER: 'Search by Name/Number',
+  ADDRESS_BOOK_NO_RESULTS: 'No address book entries found.',
+  TAB_ADDRESS_BOOK: 'Address Book',
+  TAB_DIALPAD: 'Dialpad',
 };
 
 // Utility Constants
 export const KEY_LIST = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '*', '0', '#'];
+export const TABS = {
+  DIAL_PAD: 'dial_pad',
+  ADDRESS_BOOK: 'address_book',
+};

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

@@ -3,12 +3,7 @@
   flex-direction: column;
   align-items: center;
   border-radius: 0.625rem;
-  width: 15.625rem;
-  height: 26.5rem;
-
-  .keypad {
-    width: 100%;
-  }
+  width: 16.5rem;
 
   mdc-input {
     padding-bottom: 0; // default is 1 rem, 1.5 rem needed but provided by .keys
@@ -21,23 +16,27 @@
   .outdial-ani-select-container {
     position: relative;
     width: 100%;
-  }
-
-  .outDialCallButton {
-    margin-top: 1.5rem;
+    padding-bottom: 1rem;
   }
 
   .outdial-select-arrow-icon {
     position: absolute;
-    right: 0;
-    top: 83%;
+    right: 0.375rem;
+    top: 71%;
     transform: translateY(-50%);
     display: flex;
     align-items: center;
     pointer-events: none;
     z-index: 1;
   }
 
+  #outdial-ani-option-select {
+    width: 100%;
+    label {
+      margin: 0;
+    }
+  }
+
   .outdial-ani-option-name {
     display: flex;
     align-items: center;
@@ -51,7 +50,7 @@
     column-gap: 1.5rem;
     padding: 1.5rem 0;
     list-style-type: none;
-    margin: 0 20%;
+    margin: 0;
   }
 
   .key {
@@ -70,6 +69,13 @@
     }
   }
 
+  .dialpad-tab-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 16.5rem;
+  }
+
   .address-book-container {
     width: 100%;
   }
@@ -116,25 +122,26 @@
   }
 
   .tab-list {
+    padding-bottom: 1rem;
+
+    .container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      flex: 2;
+    }
+    
     mdc-button {
       display: none;
     }
 
     mdc-tab {
-      width: 7.395rem;
-      padding: 0;
+      --mdc-tab-glass-active-color: #000000F2;
+      --mdc-tab-glass-active-background-color-hover: #b2b2b2;
+      --mdc-tab-glass-active-background-color-normal: #DEDEDE;
     }
-  }
-
-  .ani-select-input {
-    margin-top: 1rem;
+    
   }
 }
 
-.height-auto {
-  height: auto;
-}
-
-.height-28-5rem {
-  height: 28.5rem;
-}

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

@@ -9,7 +9,7 @@ import {SelectNext} from '@momentum-ui/react-collaboration';
 import {Item} from '@react-stately/collections';
 
 import {OutdialAniEntry, OutdialCallComponentProps} from '../task.types';
-import {OutdialStrings, KEY_LIST} from './constants';
+import {OutdialStrings, KEY_LIST, TABS} from './constants';
 import {DEFAULT_PAGE_SIZE} from '../constants';
 import {createInitials, debounce} from '../CallControl/CallControlCustom/call-control-custom.utils';
 import {useIntersectionObserver} from '../../../hooks';
@@ -37,11 +37,6 @@ const OutdialCallComponent: React.FunctionComponent<OutdialCallComponentProps> =
     isAddressBookEnabled = true,
   } = props;
 
-  const TABS = {
-    DIAL_PAD: 'dial_pad',
-    ADDRESS_BOOK: 'address_book',
-  };
-
   // State Hooks
   const [selectedTab, setSelectedTab] = useState(TABS.DIAL_PAD);
   const [destination, setDestination] = useState('');
@@ -140,7 +135,7 @@ const OutdialCallComponent: React.FunctionComponent<OutdialCallComponentProps> =
     }
   };
 
-  const handleDiapadTabClick = () => {
+  const handleDialpadTabClick = () => {
     setSelectedAddressBookEntry(null);
     // Don't clear destination - preserve selected address book entry number
     setSelectedTab(TABS.DIAL_PAD);
@@ -252,16 +247,16 @@ const OutdialCallComponent: React.FunctionComponent<OutdialCallComponentProps> =
               <Spinner variant="button" />
             </div>
           ) : (
-            <p>No address book entries found.</p>
+            <p>{OutdialStrings.ADDRESS_BOOK_NO_RESULTS}</p>
           )}
         </ul>
       </section>
     );
   };
 
-  const renderDiapad = () => {
+  const renderDialpad = () => {
     return (
-      <section className="keypad" data-testid="outdial-call-container">
+      <>
         <Input
           className="outdial-input"
           id="outdial-number-input"
@@ -280,18 +275,18 @@ const OutdialCallComponent: React.FunctionComponent<OutdialCallComponentProps> =
         <ul className="keys" data-testid="outdial-keypad-keys">
           {KEY_LIST.map((key) => (
             <li key={key}>
-              <Button className="key button" onClick={() => handleOnClick(key)}>
+              <Button className="key" onClick={() => handleOnClick(key)}>
                 {key}
               </Button>
             </li>
           ))}
         </ul>
-      </section>
+      </>
     );
   };
 
   return (
-    <article className={`outdial-container ${isAddressBookEnabled ? 'height-28-5rem' : ''}`}>
+    <article className="outdial-container" data-testid="outdial-call-container">
       {isAddressBookEnabled && (
         <>
           <TabList activeTabId={selectedTab} dataAriaLabel="Outdial call tabs" className="tab-list">
@@ -301,36 +296,43 @@ const OutdialCallComponent: React.FunctionComponent<OutdialCallComponentProps> =
               aria-controls={TABS.ADDRESS_BOOK}
               variant="glass"
               onClick={handleAddressBookTabClick}
+              text={OutdialStrings.TAB_ADDRESS_BOOK}
             ></Tab>
 
             <Tab
               iconName="dialpad-bold"
               tabId={TABS.DIAL_PAD}
               aria-controls={TABS.DIAL_PAD}
               variant="glass"
-              onClick={handleDiapadTabClick}
+              onClick={handleDialpadTabClick}
+              text={OutdialStrings.TAB_DIALPAD}
             ></Tab>
           </TabList>
 
           {selectedTab === TABS.ADDRESS_BOOK && (
-            <div
+            <section
               id={TABS.ADDRESS_BOOK}
               role="tabpanel"
               aria-labelledby={TABS.ADDRESS_BOOK}
               className="address-book-container"
             >
               {renderAddressBook()}
-            </div>
+            </section>
           )}
           {selectedTab === TABS.DIAL_PAD && (
-            <div id={TABS.DIAL_PAD} role="tabpanel" aria-labelledby={TABS.DIAL_PAD} className="keypad">
-              {renderDiapad()}
-            </div>
+            <section
+              id={TABS.DIAL_PAD}
+              role="tabpanel"
+              aria-labelledby={TABS.DIAL_PAD}
+              className="dialpad-tab-container"
+            >
+              {renderDialpad()}
+            </section>
           )}
         </>
       )}
 
-      {!isAddressBookEnabled && renderDiapad()}
+      {!isAddressBookEnabled && renderDialpad()}
 
       <div className="outdial-ani-select-container">
         <Icon
@@ -371,7 +373,6 @@ const OutdialCallComponent: React.FunctionComponent<OutdialCallComponentProps> =
       <Button
         data-testid="outdial-call-button"
         prefixIcon={'handset-regular'}
-        className="outDialCallButton"
         onClick={() => {
           startOutdial(destination, selectedANI);
           // Clear input field after initiating the call