Skip to content

Chi 3946 quick dial #4628

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
stephenhand wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Chi 3946 quick dial #4628

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9019320
WIP quick dial
stephenhand Aug 10, 2026
e27f7d2
Fixes, translations, better test phone numbers
stephenhand Aug 17, 2026
4fabdff
Merge branch 'master' into CHI-3946-quick_dial
stephenhand Aug 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions aselo-webchat-react-app/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,7 @@
"start:uscr_stg": "cross-env REACT_APP_CONFIG_URL='http://localhost:9090/uscr/staging.json' REACT_APP_FORM_DEFINITIONS_BASE_URL='http://localhost:8091' run-p staging:merge-configs dev:local-config-server dev:local-form-definition-server start",
"start:ca_stg": "cross-env REACT_APP_CONFIG_URL='http://localhost:9090/ca/staging.json' REACT_APP_FORM_DEFINITIONS_BASE_URL='http://localhost:8091' run-p staging:merge-configs dev:local-config-server dev:local-form-definition-server start",
"start:ca_prod": "cross-env REACT_APP_CONFIG_URL='http://localhost:9090/ca/production.json' REACT_APP_FORM_DEFINITIONS_BASE_URL='http://localhost:8091' run-p production:merge-configs dev:local-config-server dev:local-form-definition-server start",
"start:nzba_prod": "cross-env REACT_APP_CONFIG_URL='http://localhost:9090/nzba/production.json' REACT_APP_FORM_DEFINITIONS_BASE_URL='http://localhost:8091' run-p production:merge-configs dev:local-config-server dev:local-form-definition-server start",
"build": "react-app-rewired build",
"lint": "eslint --ext js --ext jsx --ext ts --ext tsx src/",
"lint:fix": "npm run lint -- --fix",
Expand Down
7 changes: 4 additions & 3 deletions plugin-hrm-form/src/components/Conference/ConferenceActions/ConferencePanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ const ConferencePanel: React.FC<Props> = ({ task, conference }) => {
return null;
}

const handleClick = async () => {
const handleClick = (phoneNumberGetter: () => string) => async () => {
try {
const { status, callStatusSyncDocument } = await createCallStatusSyncDocument(({ data }) => {
setCallStatus(data.CallStatus);
Expand All @@ -70,7 +70,7 @@ const ConferencePanel: React.FC<Props> = ({ task, conference }) => {
}

const from = Manager.getInstance().serviceConfiguration.outbound_call_flows.default.caller_id;
const to = phoneNumber;
const to = phoneNumberGetter();
const label = `External party ${to}`;

await Promise.all(
Expand Down Expand Up @@ -117,7 +117,8 @@ const ConferencePanel: React.FC<Props> = ({ task, conference }) => {
<PhoneInputDialog
targetNumber={phoneNumber}
setTargetNumber={setPhoneNumber}
handleClick={handleClick}
handleManualDialClick={handleClick(() => phoneNumber)}
handleQuickDialClick={(numberToDial: string) => handleClick(() => numberToDial)()}
setIsDialogOpen={setIsDialogOpen}
isLoading={isCallStatusLoading(callStatus)}
/>
Expand Down
87 changes: 63 additions & 24 deletions plugin-hrm-form/src/components/Conference/ConferenceActions/PhoneInputDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,20 +24,49 @@ import { PhoneDialogWrapper, DialogArrow } from './styles';
type PhoneDialogProps = {
targetNumber: string;
setTargetNumber: (targetNumber: string) => void;
handleClick: () => void;
handleManualDialClick: () => void;
handleQuickDialClick: (phoneNumber: string) => void;
setIsDialogOpen: (isDialogOpen: boolean) => void;
isLoading: boolean;
};

const ENTER_NUMBER_KEY = 'Conference-EnterPhoneNumber';

type QuickDialItem = {
labelKey: string;
phoneNumber: string;
};

const TEMPORARY_HARDCODED_QUICKDIAL: QuickDialItem[] = [
{ labelKey: 'Conference-PhoneInputDialog-QuickDialItem/988-English', phoneNumber: '+35314482861' },
{ labelKey: 'Conference-PhoneInputDialog-QuickDialItem/988-Spanish', phoneNumber: '+35317712424 ' },
];

const ALLOW_MANUAL_DIAL: boolean = true;

const PhoneInputDialog: React.FC<PhoneDialogProps> = ({
targetNumber,
setTargetNumber,
handleClick,
handleQuickDialClick,
handleManualDialClick,
setIsDialogOpen,
isLoading,
}) => {
const dialButton = (handleClick: () => void) => {
return (
<SecondaryButton autoFocus onClick={handleClick} disabled={isLoading}>
{isLoading ? (
<CircularProgress size={30} style={{ color: '#fff' }} />
) : (
<>
<CallEndIcon fontSize="medium" /> &nbsp; &nbsp;
<Template code="Conference-DialButton" />
</>
)}
</SecondaryButton>
);
};

const handleNumberChange: React.ChangeEventHandler<HTMLInputElement> = e => {
setTargetNumber(e.target.value);
};
Expand All @@ -50,29 +79,39 @@ const PhoneInputDialog: React.FC<PhoneDialogProps> = ({
</Bold>
<CloseButton onClick={() => setIsDialogOpen(false)} aria-label="CloseButton" style={{ marginLeft: 'auto' }} />
</Row>
<Template code={ENTER_NUMBER_KEY} />
<Row>
<input
type="text"
id="number-input"
placeholder="+1 234-567-8910"
value={targetNumber}
onChange={handleNumberChange}
style={{ width: '60%', padding: '5px' }}
disabled={isLoading}
aria-label={Manager.getInstance().strings[ENTER_NUMBER_KEY]}
/>
<SecondaryButton autoFocus onClick={handleClick} disabled={isLoading}>
{isLoading ? (
<CircularProgress size={30} style={{ color: '#fff' }} />
) : (
<>
<CallEndIcon fontSize="medium" /> &nbsp; &nbsp;
<Template code="Conference-DialButton" />
</>
)}
</SecondaryButton>
{TEMPORARY_HARDCODED_QUICKDIAL.length && (
<Row>
<Template code="Conference-PhoneInputDialog-QuickDialTitle" />
</Row>
)}
{TEMPORARY_HARDCODED_QUICKDIAL.map(({ phoneNumber, labelKey }) => (
<Row key={labelKey}>
<Template code={labelKey} /> {dialButton(() => handleQuickDialClick(phoneNumber))}
</Row>
))}
<Row key="or">
{TEMPORARY_HARDCODED_QUICKDIAL.length && ALLOW_MANUAL_DIAL && (
<Template code="Conference-PhoneInputDialog-Or" />
)}
</Row>
{ALLOW_MANUAL_DIAL && (
<>
<Template code={ENTER_NUMBER_KEY} />
<Row>
<input
type="text"
id="number-input"
placeholder="+1 234-567-8910"
value={targetNumber}
onChange={handleNumberChange}
style={{ width: '60%', padding: '5px' }}
disabled={isLoading}
aria-label={Manager.getInstance().strings[ENTER_NUMBER_KEY]}
/>
{dialButton(handleManualDialClick)}
</Row>
</>
)}
</PhoneDialogWrapper>
);
};
Expand Down
6 changes: 4 additions & 2 deletions plugin-hrm-form/src/states/contacts/selectContactByTaskSid.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,9 @@ import { RootState } from '..';
import { ContactState } from './existingContacts';
import { namespace } from '../storeNamespaces';

const selectContactByTaskSid = (state: RootState, taskSid: string): ContactState =>
Object.values(state[namespace].activeContacts.existingContacts).find(cs => cs.savedContact?.taskId === taskSid);
const selectContactByTaskSid = (state: RootState, taskSid: string | undefined): ContactState =>
Object.values(state[namespace].activeContacts.existingContacts).find(
cs => taskSid && cs.savedContact?.taskId === taskSid,
);

export default selectContactByTaskSid;
23 changes: 13 additions & 10 deletions plugin-hrm-form/src/translations/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,19 +71,18 @@
"SearchResultsIndex-SearchAgainForContact": "Search again for a contact",
"SearchResultsIndex-SaveToNewCase": "save this contact to a new case",
"SearchResultsIndex-Or": "or",
"SearchResults-CounselorName":"Counselor Name:",
"SearchResults-FirstName":"First Name:",
"SearchResults-LastName":"Last Name:",
"SearchResults-PhoneNumber":"Phone Number:",
"SearchResults-DateFrom":"Date From:",
"SearchResults-DateTo":"Date To:",
"SearchResults-CounselorName": "Counselor Name:",
"SearchResults-FirstName": "First Name:",
"SearchResults-LastName": "Last Name:",
"SearchResults-PhoneNumber": "Phone Number:",
"SearchResults-DateFrom": "Date From:",
"SearchResults-DateTo": "Date To:",
"SearchResults-Contact": "1 Contact",
"SearchResults-Contacts": " Contacts",
"SearchResults-Case": "1 Case",
"SearchResults-Cases": " Cases",
"SearchResults-For": " for",


"StandaloneSearch-SideNav": "Search",
"CaseHeader-Opened": "Opened",
"CaseHeader-Updated": "Updated",
Expand Down Expand Up @@ -512,12 +511,12 @@
"BottomBar-Save": "Yes, Save",
"Toolkit-ConfirmTextOne": "You will be redirected to an external knowledge management system.",
"Toolkit-ConfirmTextTwo": "Are you sure you want to continue?",

"MaskIdentifiers": "XXXXXX",
"UnmaskPhoneNumber": "Phone Number Revealed",

"RecordingSection-Error": "Something went wrong on our end. Please contact your support team or supervisor.",

"ReferrableResource-SideNav": "Resources",
"Resources-LoadResourceError": "Something went wrong trying to load this resource.",
"Resources-Search-FormTitle": "Resources",
Expand Down Expand Up @@ -557,7 +556,7 @@
"Resources-View-Details": "Details",
"Resources-View-Notes": "Notes",
"Resources-View-RecordType": "Record Type",
"Resources-View-Taxonomies": "Taxonomy Names",
"Resources-View-Taxonomies": "Taxonomy Names",
"Resources-View-Sites": " ",
"Resources-View-PrivateInformationWarning": "This information is private. Do not share with child.",
"Resources-View-PrimaryAddress": "Primary Address",
Expand Down Expand Up @@ -591,6 +590,10 @@
"Conference-Actions-Dial": "Dial",
"Conference-Participant-Remove": "Remove Participant",
"Conference-Participant-Hold": "Hold Participant",
"Conference-PhoneInputDialog-QuickDialItem/988-English": "988 (English)",
"Conference-PhoneInputDialog-QuickDialItem/988-Spanish": "988 (Spanish)",
"Conference-PhoneInputDialog-QuickDialTitle": "Quick Dial",
"Conference-PhoneInputDialog-Or": "Or",

"Conference-Wrapping-HangupBy/Customer": "Call Ended by Service User",
"Conference-Wrapping-HangupBy/Agent": "Call Ended by Counselor",
Expand Down
Loading