feat(task): Update Outdial Dialpad UI to Match Figma by brain-frog · Pull Request #538 · webex/widgets

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

cmullenx

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

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

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

+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.

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

+  );
+
+  // 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

+        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.

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

  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

+                        <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

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

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

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


Il check this.

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

+      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?

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

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

# [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