From 7d8e32238f278745b3e6f58a20e0d9c3a732bb33 Mon Sep 17 00:00:00 2001 From: molker Date: Mon, 5 Jan 2026 15:04:55 -0500 Subject: [PATCH 1/2] Update OutdialCall CSS --- .../components/task/OutdialCall/constants.ts | 5 + .../task/OutdialCall/outdial-call.style.scss | 44 +- .../task/OutdialCall/outdial-call.tsx | 41 +- .../out-dial-call.snapshot.tsx.snap | 5509 ++++++++--------- .../task/OutdialCall/out-dial-call.tsx | 4 +- .../task/tests/OutdialCall/index.tsx | 6 - 6 files changed, 2769 insertions(+), 2840 deletions(-) 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..71bfd35b2 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,12 @@ 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.', }; // 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..3d0183824 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,6 +122,7 @@ } .tab-list { + padding-bottom: 1rem; mdc-button { display: none; } @@ -125,16 +132,5 @@ padding: 0; } } - - .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..87ca2f742 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 && ( <> @@ -308,29 +303,34 @@ const OutdialCallComponent: React.FunctionComponent = tabId={TABS.DIAL_PAD} aria-controls={TABS.DIAL_PAD} variant="glass" - onClick={handleDiapadTabClick} + onClick={handleDialpadTabClick} > {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 +4342,7 @@ exports[`Outdial Call Component allows special characters (* # +) from keypad 1` style="--local-width: 100%;" >
@@ -4165,197 +4437,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 +4639,7 @@ exports[`Outdial Call Component calls startOutdial with correct payload when cli style="--local-width: 100%;" >
    @@ -4467,213 +4736,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 +6004,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 +6318,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 +6617,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', () => { From b0f7ba62c12adbf942b915aafd06090bcc8dced5 Mon Sep 17 00:00:00 2001 From: molker Date: Wed, 14 Jan 2026 10:12:19 -0500 Subject: [PATCH 2/2] Add labels --- .../components/task/OutdialCall/constants.ts | 2 ++ .../task/OutdialCall/outdial-call.style.scss | 15 +++++++++++-- .../task/OutdialCall/outdial-call.tsx | 2 ++ .../out-dial-call.snapshot.tsx.snap | 22 +++++++++++++++++++ 4 files changed, 39 insertions(+), 2 deletions(-) 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 71bfd35b2..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 @@ -8,6 +8,8 @@ export const OutdialStrings = { 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 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 3d0183824..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 @@ -123,14 +123,25 @@ .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; } + } } 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 87ca2f742..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 @@ -296,6 +296,7 @@ const OutdialCallComponent: React.FunctionComponent = aria-controls={TABS.ADDRESS_BOOK} variant="glass" onClick={handleAddressBookTabClick} + text={OutdialStrings.TAB_ADDRESS_BOOK} > = aria-controls={TABS.DIAL_PAD} variant="glass" onClick={handleDialpadTabClick} + text={OutdialStrings.TAB_DIALPAD} > diff --git a/packages/contact-center/cc-components/tests/components/task/OutdialCall/__snapshots__/out-dial-call.snapshot.tsx.snap b/packages/contact-center/cc-components/tests/components/task/OutdialCall/__snapshots__/out-dial-call.snapshot.tsx.snap index 2b8dc124c..664b64572 100644 --- a/packages/contact-center/cc-components/tests/components/task/OutdialCall/__snapshots__/out-dial-call.snapshot.tsx.snap +++ b/packages/contact-center/cc-components/tests/components/task/OutdialCall/__snapshots__/out-dial-call.snapshot.tsx.snap @@ -18,6 +18,7 @@ exports[`Outdial Call Component Address Book functionality displays address book role="tab" tab-id="address_book" tabindex="0" + text="Address Book" variant="glass" /> @@ -219,6 +221,7 @@ exports[`Outdial Call Component Address Book functionality renders address book role="tab" tab-id="address_book" tabindex="0" + text="Address Book" variant="glass" /> @@ -420,6 +424,7 @@ exports[`Outdial Call Component Address Book functionality renders address book role="tab" tab-id="address_book" tabindex="0" + text="Address Book" variant="glass" /> @@ -1038,6 +1044,7 @@ exports[`Outdial Call Component Address Book functionality renders address book role="tab" tab-id="address_book" tabindex="0" + text="Address Book" variant="glass" /> @@ -1383,6 +1391,7 @@ exports[`Outdial Call Component Address Book functionality renders loading spinn role="tab" tab-id="address_book" tabindex="0" + text="Address Book" variant="glass" /> @@ -2009,6 +2019,7 @@ exports[`Outdial Call Component Address Book functionality renders with address role="tab" tab-id="address_book" tabindex="-1" + text="Address Book" variant="glass" /> @@ -2339,6 +2351,7 @@ exports[`Outdial Call Component Address Book functionality renders with address role="tab" tab-id="address_book" tabindex="-1" + text="Address Book" variant="glass" /> @@ -2660,6 +2674,7 @@ exports[`Outdial Call Component Address Book functionality selects an address bo role="tab" tab-id="address_book" tabindex="0" + text="Address Book" variant="glass" /> @@ -2861,6 +2877,7 @@ exports[`Outdial Call Component Address Book functionality shows empty state whe role="tab" tab-id="address_book" tabindex="0" + text="Address Book" variant="glass" /> @@ -3028,6 +3046,7 @@ exports[`Outdial Call Component Address Book functionality switches back to dial role="tab" tab-id="address_book" tabindex="-1" + text="Address Book" variant="glass" /> @@ -3359,6 +3379,7 @@ exports[`Outdial Call Component Address Book functionality switches to address b role="tab" tab-id="address_book" tabindex="0" + text="Address Book" variant="glass" />