feat(task): Update Outdial Dialpad UI to Match Figma #538

brain-frog · 2025-10-03T16:10:56Z

COMPLETES # https://jira-eng-sjc12.cisco.com/jira/browse/CAI-7173

This pull request addresses

The outdial component currently does not have full functionality nor does it match the figma, and this PR addresses those areas

by making the following changes

Adding CSS to match the figma, adding the outdial ani list for the dropdown, fixing the unit tests

Change Type

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to change)
Documentation update
Tooling change
Internal code refactor

The following scenarios were tested

The testing is done with the amplify link
< ENUMERATE TESTS PERFORMED, WHETHER MANUAL OR AUTOMATED >

The OutdialCallComponent:

renders correctly
updates the dial number input correctly when typing directly
updates the dial number input correctly when clicking keypad buttons
calls startOutdial with the correct payload upon clicking the call button
allows special characters (* # +) from keypad
shows the error help text when invalid characters or formats are entered
has no ANI entry options when the list provided by the sdk is empty
correctly sets the ani when the option is selected in the dropdown
disables the call button when the dial number is empty

The GAI Coding Policy And Copyright Annotation Best Practices

Checklist before merging

I have not skipped any automated checks
All existing and new tests passed
I have updated the testing document
I have tested the functionality with amplify link

Make sure to have followed the contributing guidelines before submitting.

aws-amplify-us-east-2 · 2025-10-03T16:17:30Z

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-538.d1b38q61t1z947.amplifyapp.com

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

cmullenx

what happens if you fail to fetch the outdial ani list? what happens if the call fails? Tests?

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

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

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

mkesavan13

It looks like the sync from ccwidgets branch did not happen properly and I see those changes appearing in this PR also
Let us bring back the existing PR description template and fill it in. It is a leadership ask to have the GAI policy as part of all the PRs and filled in appropriately.
Kindly record a vidcast of the changes to showcase and attach it to the description
Add a brief note of all the scenarios that were tested

brain-frog · 2025-10-15T15:08:59Z

vidcast showing functionality: https://app.vidcast.io/share/d0be837f-11f2-4289-ac7c-73d262a78c33

mkesavan13

I see neither the enumerated tests nor the vidcast showing if a task actually came in
The out dial in the Agent Desktop always is auto answered. Did we check for whether it was auto accepted and put in the task list in the widgets?
Did we try to test this scenario in multi-login scenarios? Epic is heavily dependent on multi-login and it is essential to test that
w.r.t the components UT for out dial, we do not have the util methods like regExForDnSpecialChars, validateOutboundNumber, handleOnClick tested. Which is why in other components we have split them into a separate util file to test it separately. We should do the same here

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

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

mkesavan13 · 2025-10-16T13:52:56Z

packages/contact-center/store/src/store.types.ts

+import {
+  OutdialAniEntriesResponse,
+  OutdialAniParams,
+} from 'node_modules/@webex/contact-center/dist/types/services/config/types';


The right way to do this would be to export the type in SDK and then bring it. Pulling it in from node_modules would affect if tomorrow we change the directory structure in the SDK

@mkesavan13 I apologize i was following the example of the other imports in the file. These are indeed being exported by the sdk as seen in Christina's PR, yet when I was trying to import them I was seeing no exported type was found

Oh, I see.

@Shreyas281299 - Could you please check why aren't we able to import directly? Also why do we have other node_modules based imports there?

Il check this.

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

brain-frog · 2025-10-16T14:21:43Z

@mkesavan13
For your first three comments, I will do some additional manual testing

w.r.t the components UT for out dial, we do not have the util methods like regExForDnSpecialChars, validateOutboundNumber, handleOnClick tested. Which is why in other components we have split them into a separate util file to test it separately. We should do the same here

These functions are being unit tested by the tests that change the inputs and simulate clicks. They can be moved to a utils file if that is your preference

mkesavan13 · 2025-10-16T14:39:52Z

These functions are being unit tested by the tests that change the inputs and simulate clicks. They can be moved to a utils file if that is your preference

Did we try and fail the tests to see if the test to read the screen for errors is right? If so, we are good there. @Shreyas281299 - I would like for you to verify this also once

brain-frog · 2025-10-16T16:30:26Z

@mkesavan13 after further reviewing the functionality you suggested could be moved to a utils I don't believe it would make sense to move them.

regExForDnSpecialChars uses the useMemo hook which should be kept within react components
validateOutboundNumber and handleOnClick both directly use useState hook setters which would not make sense to add the extra step of making them parameters to move to a utils file

They are both still tested by existing unit test simulations. Please let me know if you have additional thoughts.

Kesari3008 · 2025-10-16T10:56:22Z

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

+  );
+
+  // useEffect and useState to allow for async fetching of outdial ANI entries
+  useEffect(() => {


What about pulling entries for address book ? When the outdial component loads, we have 3 options in Agent desktop currently: Dialpad, searching from address book and organization search so since address book is available now would be good to add that as well here

Address book is not part of the scope of my current story, that can be added at a later date. This PR is to update the Outdial Dialpad

Kesari3008 · 2025-10-16T13:37:01Z

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

+        const result = await getOutdialANIEntries();
+        setOutdialANIList(result);
+      } catch (error) {
+        logger?.error('Error fetching outdial ANI entries:', error);


Why is logger optional ? This is coming from store and it seems from other components where this is being used, this is not an optional parameter so we can avoid ? here.

@Kesari3008 The optional chaining on logger is required as it will cause unit tests to fail and cause warnings of logger being undefined when running the application otherwise. Logger is not always immediately initialized on first render and throws TypeError: Cannot read properties of undefined in unit tests even when mocked.

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

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

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

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

Kesari3008 · 2025-10-16T16:42:14Z

packages/contact-center/store/src/store.types.ts

  agentConfig?: {
    regexUS: RegExp | string;
    agentId: string;
+    outdialANIId: string;


We will need another value to be read from agentConfig which Outdial flag: isOutboundEnabledForAgent. If outdial is enabled from control hub, this value is received and outdial component should be disabled if this flag is set to false

the ability to show/hide this widget will be in our epic project and not in widgets

Kesari3008 · 2025-10-16T16:43:33Z

widgets-samples/cc/samples-cc-react-app/src/App.tsx

+                        <section className="section-box">
+                          <fieldset className="fieldset">
+                            <legend className="legend-box">Outdial Call</legend>
+                            <OutdialCall />


Hide this component behind the feature flag mentioned for agentConfig

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

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

Kesari3008 · 2025-10-16T16:53:45Z

Please add a vidcast for the testing done in PR description.
Also won't the presentational component changes need to be updated in snapshot tests we have ?
Pipeline checks are not running, please enable

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

Shreyas281299 · 2025-10-16T17:39:45Z

packages/contact-center/store/src/store.types.ts

+import {
+  OutdialAniEntriesResponse,
+  OutdialAniParams,
+} from 'node_modules/@webex/contact-center/dist/types/services/config/types';


Il check this.

Shreyas281299 · 2025-10-16T17:41:42Z

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

+      const agentProfile = cc.agentConfig;
+      const outdialANIId = agentProfile?.outdialANIId;
+      if (!outdialANIId) {
+        throw Error('No OutdialANI Id received.');


We should not be doing this. If this error is ever triggered it will break the component, I think we should just be logging this as this would be a widget's issue. What do you think?

Sure, I can change it to a logging statement so it does not throw a breaking error

Looking at the sdk changes, I believe calling getOutdialAniEntries without a defined outdialANI will throw an error, which would still break the component right? Is it worth logging the error and letting that happen instead of throwing the error prior to the call?

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

brain-frog · 2025-10-21T22:53:21Z

Vidcast showcasing multi-login and desktop call: https://app.vidcast.io/share/be4ad199-98ce-40a7-9007-c70bc4a85e93

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

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

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

# [1.28.0-ccwidgets.119](v1.28.0-ccwidgets.118...v1.28.0-ccwidgets.119) (2025-10-22) ### Features * **task:** Update Outdial Dialpad UI to Match Figma ([#538](#538)) ([07577f6](07577f6))

mkesavan13 · 2025-10-22T15:39:50Z

🎉 This PR is included in version 1.28.0-ccwidgets.119 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

cmullenx reviewed Oct 3, 2025

View reviewed changes

packages/contact-center/cc-components/src/components/task/OutdialCall/outdial-call.tsx Outdated Show resolved Hide resolved

cmullenx reviewed Oct 3, 2025

View reviewed changes

packages/contact-center/cc-components/src/components/task/OutdialCall/outdial-call.tsx Outdated Show resolved Hide resolved

cmullenx reviewed Oct 3, 2025

View reviewed changes

packages/contact-center/cc-components/src/components/task/OutdialCall/outdial-call.tsx Outdated Show resolved Hide resolved

cmullenx reviewed Oct 3, 2025

View reviewed changes

packages/contact-center/cc-components/src/components/task/OutdialCall/outdial-call.tsx Outdated Show resolved Hide resolved

cmullenx reviewed Oct 3, 2025

View reviewed changes

packages/contact-center/cc-components/src/components/task/OutdialCall/outdial-call.tsx Outdated Show resolved Hide resolved

brain-frog marked this pull request as ready for review October 14, 2025 19:02

cmullenx reviewed Oct 14, 2025

View reviewed changes

packages/contact-center/cc-components/src/components/task/OutdialCall/outdial-call.tsx Outdated Show resolved Hide resolved

cmullenx reviewed Oct 14, 2025

View reviewed changes

packages/contact-center/cc-components/src/components/task/OutdialCall/outdial-call.tsx Outdated Show resolved Hide resolved

cmullenx reviewed Oct 14, 2025

View reviewed changes

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

cmullenx reviewed Oct 14, 2025

View reviewed changes

packages/contact-center/task/src/helper.ts Outdated Show resolved Hide resolved

cmullenx reviewed Oct 14, 2025

View reviewed changes

packages/contact-center/task/src/helper.ts Show resolved Hide resolved

cmullenx reviewed Oct 14, 2025

View reviewed changes

packages/contact-center/cc-components/src/components/task/OutdialCall/outdial-call.style.scss Outdated Show resolved Hide resolved

cmullenx reviewed Oct 14, 2025

View reviewed changes

packages/contact-center/cc-components/src/components/task/OutdialCall/outdial-call.style.scss Outdated Show resolved Hide resolved

mkesavan13 requested changes Oct 15, 2025

View reviewed changes

molker added 6 commits October 15, 2025 09:47

[CAI-7173] Task: Outdial Styling Updates

47ee4a5

PR Comments

9fc04b2

Address PR Comments and Prepare for SDK Changes

3198bf6

Update with SDK changes

964cfe3

Fix css collision

8a8f40a

PR Comments

fb3ef3f

brain-frog force-pushed the dialpad branch from 80b0bff to fb3ef3f Compare October 15, 2025 13:48

Merge remote-tracking branch 'upstream/ccwidgets' into dialpad

bcf8f25

mkesavan13 requested changes Oct 16, 2025

View reviewed changes

PR Comments

4f5f80b

Remove Tabs until Addressbook Available

d125fcf

Kesari3008 requested changes Oct 16, 2025

View reviewed changes

PR Comments

f75937c

Shreyas281299 requested changes Oct 16, 2025

View reviewed changes

Shreyas281299 added the validated Indicates that the PR is ready for actions label Oct 16, 2025

molker added 2 commits October 16, 2025 14:33

PR Comments

77f412c

Updated Unit Tests

d1ab166

Shreyas281299 added the run_e2e Add this label to run E2E test for meeting and CC widgets label Oct 22, 2025

Shreyas281299 reviewed Oct 22, 2025

View reviewed changes

...es/contact-center/cc-components/tests/components/task/OutdialCall/out-dial-call.snapshot.tsx Show resolved Hide resolved

Shreyas281299 reviewed Oct 22, 2025

View reviewed changes

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

...es/contact-center/cc-components/tests/components/task/OutdialCall/out-dial-call.snapshot.tsx Show resolved Hide resolved

Shreyas281299 approved these changes Oct 22, 2025

View reviewed changes

mkesavan13 approved these changes Oct 22, 2025

View reviewed changes

mkesavan13 merged commit 07577f6 into webex:ccwidgets Oct 22, 2025
14 of 15 checks passed

mkesavan13 added the released on @ccwidgets label Oct 22, 2025

feat(task): Update Outdial Dialpad UI to Match Figma #538

feat(task): Update Outdial Dialpad UI to Match Figma #538

Uh oh!

Conversation

brain-frog commented Oct 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

COMPLETES # https://jira-eng-sjc12.cisco.com/jira/browse/CAI-7173

This pull request addresses

by making the following changes

Change Type

The following scenarios were tested

The GAI Coding Policy And Copyright Annotation Best Practices

Checklist before merging

Uh oh!

aws-amplify-us-east-2 bot commented Oct 3, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cmullenx left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mkesavan13 left a comment

Choose a reason for hiding this comment

Uh oh!

brain-frog commented Oct 15, 2025

Uh oh!

mkesavan13 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

brain-frog commented Oct 16, 2025

Uh oh!

mkesavan13 commented Oct 16, 2025

Uh oh!

brain-frog commented Oct 16, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Kesari3008 commented Oct 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

brain-frog commented Oct 3, 2025 •

edited

Loading

Kesari3008 commented Oct 16, 2025 •

edited

Loading