${label}
{
const type = e.detail.key;
switch (type) {
case 'route-extension': onChange({ type, extensionId: devices[0]?.extension || '100' }); break;
case 'route-voicemail': onChange({ type, boxId: '' }); break;
case 'submenu': onChange({ type, menuId: menus[0]?.id || '' }); break;
case 'play-message': onChange({ type, promptId: '' }); break;
case 'transfer': onChange({ type, number: '' }); break;
case 'repeat': onChange({ type }); break;
case 'hangup': onChange({ type }); break;
}
}}
>
${action.type === 'route-extension' ? html`
({ option: `${d.displayName} (${d.extension})`, key: d.extension }))}
@selectedOption=${(e: CustomEvent) => { onChange({ ...action, extensionId: e.detail.key }); }}
>
` : ''}
${action.type === 'route-voicemail' ? html`
{ onChange({ ...action, boxId: (e.target as any).value }); }}
>
` : ''}
${action.type === 'submenu' ? html`
m.id === action.menuId)
? { option: menus.find((m) => m.id === action.menuId)!.name, key: action.menuId }
: { option: '(select)', key: '' }}
.options=${menus.map((m) => ({ option: m.name, key: m.id }))}
@selectedOption=${(e: CustomEvent) => { onChange({ ...action, menuId: e.detail.key }); }}
>
` : ''}
${action.type === 'play-message' ? html`
{ onChange({ ...action, promptId: (e.target as any).value }); }}
>
` : ''}
${action.type === 'transfer' ? html`
{ onChange({ ...action, number: (e.target as any).value }); }}
>
({ option: p.displayName || p.id, key: p.id })),
]}
@selectedOption=${(e: CustomEvent) => { onChange({ ...action, providerId: e.detail.key || undefined }); }}
>
` : ''}
`;
}
// ---- menu editor modal ---------------------------------------------------
private async openMenuEditor(existing: IIvrMenu | null) {
const cfg = this.config;
const formData: IIvrMenu = existing
? JSON.parse(JSON.stringify(existing))
: {
id: '',
name: '',
promptText: '',
promptVoice: 'af_bella',
entries: [],
timeoutSec: 5,
maxRetries: 3,
timeoutAction: { type: 'hangup' as const },
invalidAction: { type: 'repeat' as const },
};
// For re-rendering the modal content on state changes we track a version counter.
let version = 0;
const modalContentId = `ivr-modal-${Date.now()}`;
const rerenderContent = () => {
version++;
const container = document.querySelector(`#${modalContentId}`) as HTMLElement
|| document.getElementById(modalContentId);
if (container) {
// Force a re-render by removing and re-adding the modal content.
// We can't use lit's render directly here, so we close and reopen.
}
};
const buildContent = (): TemplateResult => html`
{
formData.name = (e.target as any).value;
if (!existing) {
formData.id = slugify(formData.name);
}
}}
>
{ formData.id = (e.target as any).value; }}
>
{ formData.promptText = (e.target as any).value; }}
>
v.key === formData.promptVoice) || VOICE_OPTIONS[0]}
.options=${VOICE_OPTIONS}
@selectedOption=${(e: CustomEvent) => { formData.promptVoice = e.detail.key; }}
>
Digit Entries
{
const usedDigits = new Set(formData.entries.map((e) => e.digit));
const nextDigit = DIGIT_OPTIONS.find((d) => !usedDigits.has(d)) || '1';
formData.entries = [...formData.entries, { digit: nextDigit, action: makeDefaultAction() }];
rerenderContent();
}}
>+ Add Digit
${formData.entries.length === 0
? html`
No digit entries configured.
`
: formData.entries.map((entry, idx) => html`
({ option: d, key: d }))}
@selectedOption=${(e: CustomEvent) => {
formData.entries[idx].digit = e.detail.key;
}}
>
{
formData.entries = formData.entries.filter((_, i) => i !== idx);
rerenderContent();
}}
>Remove
${this.renderActionEditor(
entry.action,
(a) => { formData.entries[idx].action = a; rerenderContent(); },
'Action',
cfg,
)}
`)
}
Timeout Settings
{ formData.timeoutSec = parseInt((e.target as any).value, 10) || 5; }}
>
{ formData.maxRetries = parseInt((e.target as any).value, 10) || 3; }}
>
${this.renderActionEditor(
formData.timeoutAction,
(a) => { formData.timeoutAction = a; rerenderContent(); },
'Timeout Action (no digit pressed)',
cfg,
)}
${this.renderActionEditor(
formData.invalidAction,
(a) => { formData.invalidAction = a; rerenderContent(); },
'Invalid Digit Action',
cfg,
)}
`;
await DeesModal.createAndShow({
heading: existing ? `Edit Menu: ${existing.name}` : 'New IVR Menu',
width: 'small',
showCloseButton: true,
content: html`