diff --git a/packages/contact-center/cc-components/src/components/task/OutdialCall/constants.ts b/packages/contact-center/cc-components/src/components/task/OutdialCall/constants.ts index c4133a2fa..5d65167cf 100644 --- a/packages/contact-center/cc-components/src/components/task/OutdialCall/constants.ts +++ b/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', +}; diff --git a/packages/contact-center/cc-components/src/components/task/OutdialCall/outdial-call.style.scss b/packages/contact-center/cc-components/src/components/task/OutdialCall/outdial-call.style.scss index 2a0cf5046..cd2ae9a6b 100644 --- a/packages/contact-center/cc-components/src/components/task/OutdialCall/outdial-call.style.scss +++ b/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,16 +16,13 @@ .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; @@ -38,6 +30,13 @@ 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; -} diff --git a/packages/contact-center/cc-components/src/components/task/OutdialCall/outdial-call.tsx b/packages/contact-center/cc-components/src/components/task/OutdialCall/outdial-call.tsx index 40c14f9ab..248a61932 100644 --- a/packages/contact-center/cc-components/src/components/task/OutdialCall/outdial-call.tsx +++ b/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 = 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 = } }; - 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 = ) : ( -

No address book entries found.

+

{OutdialStrings.ADDRESS_BOOK_NO_RESULTS}

)} ); }; - const renderDiapad = () => { + const renderDialpad = () => { return ( -
+ <> =
    {KEY_LIST.map((key) => (
  • -
    • ))}
-
+ ); }; return ( -
+
{isAddressBookEnabled && ( <> @@ -301,6 +296,7 @@ const OutdialCallComponent: React.FunctionComponent = aria-controls={TABS.ADDRESS_BOOK} variant="glass" onClick={handleAddressBookTabClick} + text={OutdialStrings.TAB_ADDRESS_BOOK} > = tabId={TABS.DIAL_PAD} aria-controls={TABS.DIAL_PAD} variant="glass" - onClick={handleDiapadTabClick} + onClick={handleDialpadTabClick} + text={OutdialStrings.TAB_DIALPAD} > {selectedTab === TABS.ADDRESS_BOOK && ( -
{renderAddressBook()} -
+ )} {selectedTab === TABS.DIAL_PAD && ( -
- {renderDiapad()} -
+
+ {renderDialpad()} +
)} )} - {!isAddressBookEnabled && renderDiapad()} + {!isAddressBookEnabled && renderDialpad()}
= +
+ + +
+ +`; + +exports[`Outdial Call Component calls startOutdial with correct payload when clicking call button 1`] = ` +
+
+ +
    +
  • + + 1 + +
    • +
  • + + 2 + +
    • +
  • + + 3 + +
    • +
  • + + 4 + +
    • +
  • + + 5 + +
    • +
  • + + 6 + +
    • +
  • + + 7 + +
    • +
  • + + 8 + +
    • +
  • + + 9 + +
    • +
  • + + * + +
    • +
  • + + 0 + +
    • +
  • + + # + +
    • +
@@ -4067,7 +4364,7 @@ exports[`Outdial Call Component allows special characters (* # +) from keypad 1` style="--local-width: 100%;" >
@@ -4165,197 +4459,193 @@ exports[`Outdial Call Component allows special characters (* # +) from keypad 1` `; -exports[`Outdial Call Component calls startOutdial with correct payload when clicking call button 1`] = ` +exports[`Outdial Call Component does not allow empty input 1`] = `
-
+
    - -
      -
    • - - 1 - -
      • -
    • - - 2 - -
      • -
    • - - 3 - -
      • -
    • - - 4 - -
      • -
    • - - 5 - -
      • -
    • - - 6 - -
      • -
    • - - 7 - -
      • -
    • - - 8 - -
      • -
    • - - 9 - -
      • -
    • - - * - -
      • -
    • - - 0 - -
      • -
    • - - # - -
      • -
    -
+
  • + + 1 + +
    • +
  • + + 2 + +
    • +
  • + + 3 + +
    • +
  • + + 4 + +
    • +
  • + + 5 + +
    • +
  • + + 6 + +
    • +
  • + + 7 + +
    • +
  • + + 8 + +
    • +
  • + + 9 + +
    • +
  • + + * + +
    • +
  • + + 0 + +
    • +
  • + + # + +
    • +
    @@ -4371,7 +4661,7 @@ exports[`Outdial Call Component calls startOutdial with correct payload when cli style="--local-width: 100%;" >
    @@ -4467,213 +4758,209 @@ exports[`Outdial Call Component calls startOutdial with correct payload when cli `; -exports[`Outdial Call Component does not allow empty input 1`] = ` +exports[`Outdial Call Component does not allow invalid characters when typing 1`] = `
    -
    +
      - + + 1 + + +
    • + + 2 + +
      • +
    • + + 3 + +
      • +
    • + + 4 + +
      • +
    • + + 5 + +
      • +
    • + + 6 + +
      • +
    • + + 7 + +
      • +
    • + + 8 + +
      • +
    • + + 9 + +
      • +
    • + + * + +
      • +
    • + + 0 + +
      • +
    • + + # + +
      • +
    +
    + -
      -
    • - - 1 - -
      • -
    • - - 2 - -
      • -
    • - - 3 - -
      • -
    • - - 4 - -
      • -
    • - - 5 - -
      • -
    • - - 6 - -
      • -
    • - - 7 - -
      • -
    • - - 8 - -
      • -
    • - - 9 - -
      • -
    • - - * - -
      • -
    • - - 0 - -
      • -
    • - - # - -
      • -
    -
    -
    - -
    `; -exports[`Outdial Call Component does not allow invalid characters when typing 1`] = ` +exports[`Outdial Call Component has no ANI entry options when the entry list is empty 1`] = `
    -
    +
      - + + 1 + + +
    • + + 2 + +
      • +
    • + + 3 + +
      • +
    • + + 4 + +
      • +
    • + + 5 + +
      • +
    • + + 6 + +
      • +
    • + + 7 + +
      • +
    • + + 8 + +
      • +
    • + + 9 + +
      • +
    • + + * + +
      • +
    • + + 0 + +
      • +
    • + + # + +
      • +
    +
    + -
      -
    • - - 1 - -
      • -
    • - + - 2 - -
      • -
    • - - 3 - -
      • -
    • - - 4 - -
      • -
    • - - 5 - -
      • -
    • - - 6 - -
      • -
    • - - 7 - -
      • -
    • - - 8 - -
      • -
    • - - 9 - -
      • -
    • - - * - -
      • -
    • - - 0 - -
      • -
    • - + + +
      • -
    -
    + Enter Outdial ANI + +
    + +
    +
    +`; + +exports[`Outdial Call Component sets selected ani when an option is selected 1`] = ` +
    +
    + +
      +
    • + + 1 + +
      • +
    • + + 2 + +
      • +
    • + + 3 + +
      • +
    • + + 4 + +
      • +
    • + + 5 + +
      • +
    • + + 6 + +
      • +
    • + + 7 + +
      • +
    • + + 8 + +
      • +
    • + + 9 + +
      • +
    • + + * + +
      • +
    • + + 0 + +
      • +
    • + + # + +
      • +
    -
    -
    - -
    - -`; - -exports[`Outdial Call Component has no ANI entry options when the entry list is empty 1`] = ` -
    -
    -
    - -
      -
    • - - 1 - -
      • -
    • - - 2 - -
      • -
    • - - 3 - -
      • -
    • - - 4 - -
      • -
    • - - 5 - -
      • -
    • - - 6 - -
      • -
    • - - 7 - -
      • -
    • - - 8 - -
      • -
    • - - 9 - -
      • -
    • - - * - -
      • -
    • - - 0 - -
      • -
    • - - # - -
      • -
    -
    -
    - -
    - - - -
    -
    -
    - -
    -
    -`; - -exports[`Outdial Call Component sets selected ani when an option is selected 1`] = ` -
    -
    -
    - -
      -
    • - - 1 - -
      • -
    • - - 2 - -
      • -
    • - - 3 - -
      • -
    • - - 4 - -
      • -
    • - - 5 - -
      • -
    • - - 6 - -
      • -
    • - - 7 - -
      • -
    • - - 8 - -
      • -
    • - - 9 - -
      • -
    • - - * - -
      • -
    • - - 0 - -
      • -
    • - - # - -
      • -
    -
    -
    - -
    - - -
    - -
    -
    -`; - -exports[`Outdial Call Component shows error help text when invalid characters are entered 1`] = ` -
    -
    -
    - -
      -
    • - - 1 - -
      • -
    • - - 2 - -
      • -
    • - - 3 - -
      • -
    • - - 4 - -
      • -
    • - - 5 - -
      • -
    • - - 6 - -
      • -
    • - - 7 - -
      • -
    • - - 8 - -
      • -
    • - - 9 - -
      • -
    • - - * - -
      • -
    • - - 0 - -
      • -
    • - - # - -
      • -
    -
    + /> +
    + + + + +`; + +exports[`Outdial Call Component shows error help text when invalid characters are entered 1`] = ` +
    +
    + +
      +
    • + + 1 + +
      • +
    • + + 2 + +
      • +
    • + + 3 + +
      • +
    • + + 4 + +
      • +
    • + + 5 + +
      • +
    • + + 6 + +
      • +
    • + + 7 + +
      • +
    • + + 8 + +
      • +
    • + + 9 + +
      • +
    • + + * + +
      • +
    • + + 0 + +
      • +
    • + + # + +
      • +
    @@ -6058,228 +6026,223 @@ exports[`Outdial Call Component shows error help text when invalid characters ar >
    -
    - ⃞ -
    -
    - - -
    -
    - - - -`; - -exports[`Outdial Call Component updates input value when clicking keypad buttons 1`] = ` -
    -
    -
    - -
      -
    • - - 1 - -
      • -
    • - - 2 - -
      • -
    • - - 3 - -
      • -
    • - - 4 - -
      • -
    • - - 5 - -
      • -
    • - - 6 - -
      • -
    • - - 7 - -
      • -
    • - - 8 - -
      • -
    • - - 9 - -
      • -
    • - - * - -
      • -
    • - - 0 - -
      • -
    • - - # - -
      • -
    -
    + > +
    + ⃞ +
    +
    + + + + + + + +`; + +exports[`Outdial Call Component updates input value when clicking keypad buttons 1`] = ` +
    +
    + +
      +
    • + + 1 + +
      • +
    • + + 2 + +
      • +
    • + + 3 + +
      • +
    • + + 4 + +
      • +
    • + + 5 + +
      • +
    • + + 6 + +
      • +
    • + + 7 + +
      • +
    • + + 8 + +
      • +
    • + + 9 + +
      • +
    • + + * + +
      • +
    • + + 0 + +
      • +
    • + + # + +
      • +
    @@ -6377,7 +6340,6 @@ exports[`Outdial Call Component updates input value when clicking keypad buttons
    -
    +
      - -
        -
      • - - 1 - -
        • -
      • - - 2 - -
        • -
      • - - 3 - -
        • -
      • - - 4 - -
        • -
      • - - 5 - -
        • -
      • - - 6 - -
        • -
      • - - 7 - -
        • -
      • - - 8 - -
        • -
      • - - 9 - -
        • -
      • - - * - -
        • -
      • - - 0 - -
        • -
      • - - # - -
        • -
      -
    +
  • + + 1 + +
    • +
  • + + 2 + +
    • +
  • + + 3 + +
    • +
  • + + 4 + +
    • +
  • + + 5 + +
    • +
  • + + 6 + +
    • +
  • + + 7 + +
    • +
  • + + 8 + +
    • +
  • + + 9 + +
    • +
  • + + * + +
    • +
  • + + 0 + +
    • +
  • + + # + +
    • +
    @@ -6681,7 +6639,6 @@ exports[`Outdial Call Component updates input value when typing directly 1`] = `
    { render(); const article = await screen.findByTestId('outdial-call-container'); expect(article).toBeInTheDocument(); - expect(article).toHaveClass('keypad'); + expect(article).toHaveClass('outdial-container'); }); it('dial number input', async () => { @@ -59,7 +59,7 @@ describe('OutdialCallComponent', () => { const keypadKeys = within(keypadContainer).getAllByRole('button'); expect(keypadKeys).toHaveLength(KEY_LIST.length); keypadKeys.forEach((button) => { - expect(button).toHaveClass('key button'); + expect(button).toHaveClass('key'); expect(button).toHaveAttribute('color', 'default'); expect(button).toHaveAttribute('data-btn-type', 'pill'); expect(button).toHaveAttribute('size', '32'); diff --git a/packages/contact-center/task/tests/OutdialCall/index.tsx b/packages/contact-center/task/tests/OutdialCall/index.tsx index 496d52fe8..7b4564e61 100644 --- a/packages/contact-center/task/tests/OutdialCall/index.tsx +++ b/packages/contact-center/task/tests/OutdialCall/index.tsx @@ -56,8 +56,6 @@ describe('OutdialCall Component', () => { expect(useOutdialCallSpy).toHaveBeenCalled(); // When address book is disabled, there should be no tablist expect(container.querySelector('mdc-tablist')).not.toBeInTheDocument(); - // The container should not have the additional height class - expect(container.querySelector('.height-28-5rem')).not.toBeInTheDocument(); }); it('passes isAddressBookEnabled prop correctly when set to true', () => { @@ -73,8 +71,6 @@ describe('OutdialCall Component', () => { expect(useOutdialCallSpy).toHaveBeenCalled(); // When address book is enabled, there should be a tablist expect(container.querySelector('mdc-tablist')).toBeInTheDocument(); - // The container should have the additional height class - expect(container.querySelector('.height-28-5rem')).toBeInTheDocument(); }); it('enables address book by default when isAddressBookEnabled prop is not provided', () => { @@ -90,8 +86,6 @@ describe('OutdialCall Component', () => { expect(useOutdialCallSpy).toHaveBeenCalled(); // When no prop is provided, address book should be enabled by default expect(container.querySelector('mdc-tablist')).toBeInTheDocument(); - // The container should have the additional height class - expect(container.querySelector('.height-28-5rem')).toBeInTheDocument(); }); describe('ErrorBoundary Tests', () => {