@pega/cosmos-react-cs 4.0.0-dev.12.1 → 4.0.0-dev.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/CallControlPanel/Call.d.ts.map +1 -1
- package/lib/components/CallControlPanel/Call.js +14 -12
- package/lib/components/CallControlPanel/Call.js.map +1 -1
- package/lib/components/CallControlPanel/CallControlPanel.d.ts.map +1 -1
- package/lib/components/CallControlPanel/CallControlPanel.js +7 -5
- package/lib/components/CallControlPanel/CallControlPanel.js.map +1 -1
- package/lib/components/CallControlPanel/CallHandover/CallHandoverDialog.d.ts.map +1 -1
- package/lib/components/CallControlPanel/CallHandover/CallHandoverDialog.js +1 -0
- package/lib/components/CallControlPanel/CallHandover/CallHandoverDialog.js.map +1 -1
- package/lib/components/CallControlPanel/CallHandover/CallHandoverForm.d.ts +1 -1
- package/lib/components/CallControlPanel/CallHandover/CallHandoverForm.d.ts.map +1 -1
- package/lib/components/CallControlPanel/CallHandover/CallHandoverForm.js +4 -4
- package/lib/components/CallControlPanel/CallHandover/CallHandoverForm.js.map +1 -1
- package/lib/components/CallControlPanel/utils.d.ts.map +1 -1
- package/lib/components/CallControlPanel/utils.js +0 -1
- package/lib/components/CallControlPanel/utils.js.map +1 -1
- package/lib/components/DialPad/DialPadDialog.d.ts.map +1 -1
- package/lib/components/DialPad/DialPadDialog.js +1 -0
- package/lib/components/DialPad/DialPadDialog.js.map +1 -1
- package/lib/components/DialPad/KeyboardNavigation.js.map +1 -1
- package/lib/components/InteractionTimer/InteractionTimer.d.ts.map +1 -1
- package/lib/components/InteractionTimer/InteractionTimer.js +22 -4
- package/lib/components/InteractionTimer/InteractionTimer.js.map +1 -1
- package/lib/components/TaskManager/Picker/Picker.d.ts +0 -4
- package/lib/components/TaskManager/Picker/Picker.d.ts.map +1 -1
- package/lib/components/TaskManager/Picker/Picker.js +90 -89
- package/lib/components/TaskManager/Picker/Picker.js.map +1 -1
- package/lib/components/TaskManager/TaskManager.d.ts.map +1 -1
- package/lib/components/TaskManager/TaskManager.js +15 -22
- package/lib/components/TaskManager/TaskManager.js.map +1 -1
- package/lib/components/TaskManager/TaskManager.types.d.ts +4 -2
- package/lib/components/TaskManager/TaskManager.types.d.ts.map +1 -1
- package/lib/components/TaskManager/TaskManager.types.js.map +1 -1
- package/lib/components/TaskManager/TaskManagerTabs.d.ts.map +1 -1
- package/lib/components/TaskManager/TaskManagerTabs.js +4 -4
- package/lib/components/TaskManager/TaskManagerTabs.js.map +1 -1
- package/package.json +4 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Call.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/Call.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAqC,MAAM,OAAO,CAAC;AAE7E,OAAO,EAGL,YAAY,EAQb,MAAM,yBAAyB,CAAC;AAajC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAgB1D,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,
|
|
1
|
+
{"version":3,"file":"Call.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/Call.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAqC,MAAM,OAAO,CAAC;AAE7E,OAAO,EAGL,YAAY,EAQb,MAAM,yBAAyB,CAAC;AAajC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAgB1D,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CAmSrD,CAAC;AAEF,eAAe,IAAI,CAAC"}
|
|
@@ -6,15 +6,15 @@ import * as micSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons
|
|
|
6
6
|
import * as micOffSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/mic-off-solid.icon';
|
|
7
7
|
import * as playSoldIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/play-solid.icon';
|
|
8
8
|
import * as pauseSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/pause-solid.icon';
|
|
9
|
-
import * as phoneSplitSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-split-solid.icon';
|
|
10
9
|
import * as phoneOutSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-out-solid.icon';
|
|
11
10
|
import * as phoneHangupSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-hangup-solid.icon';
|
|
11
|
+
import * as phoneMergeSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-merge-solid.icon';
|
|
12
12
|
import { DialPadDialog } from '../DialPad';
|
|
13
13
|
import { StyledHoldInfo, StyledCallContainer, StyledSLAProgress } from './CallControlPanel.styles';
|
|
14
14
|
import StopWatch from './StopWatch';
|
|
15
15
|
import { calculateSla } from './utils';
|
|
16
16
|
import CallHandoverDialog from './CallHandover';
|
|
17
|
-
registerIcon(arrowUpIcon, micSolidIcon, micOffSolidIcon, playSoldIcon, pauseSolidIcon,
|
|
17
|
+
registerIcon(arrowUpIcon, micSolidIcon, micOffSolidIcon, playSoldIcon, pauseSolidIcon, phoneOutSolidIcon, phoneHangupSolidIcon, phoneMergeSolidIcon);
|
|
18
18
|
const Call = ({ id: callId, startedAt, onHoldSince, slaConfig, participants, onPauseToggle, muted, onMuteToggle, onDTMFPress, onConsultAction, onConferenceAction, onTransferAction, onMergeCall, onHandOffCall, onEndCall, defaultTransfer, transferOptions, defaultInteraction, interactionOptions }) => {
|
|
19
19
|
const t = useI18n();
|
|
20
20
|
const moreActionsButtonRef = useRef(null);
|
|
@@ -36,17 +36,19 @@ const Call = ({ id: callId, startedAt, onHoldSince, slaConfig, participants, onP
|
|
|
36
36
|
return () => clearTimeout(timer);
|
|
37
37
|
}, [inCallSince, slaLevel]);
|
|
38
38
|
return (_jsxs(StyledCallContainer, { children: [_jsx(StyledSLAProgress, { determinate: true, placement: 'local', slaDuration: slaDuration, slaLevel: slaLevel }), participants.map((item, index) => {
|
|
39
|
-
return (_jsx(SummaryItem, {
|
|
40
|
-
? {
|
|
41
|
-
areas: '"primary secondary actions"',
|
|
42
|
-
cols: 'auto minmax(0, 2fr) auto'
|
|
43
|
-
}
|
|
44
|
-
: {
|
|
45
|
-
areas: '"visual primary secondary actions"',
|
|
46
|
-
cols: 'auto auto minmax(0, 2fr) auto'
|
|
47
|
-
}, overflowStrategy: 'ellipsis', visual: index !== 0 && _jsx(Icon, { name: 'arrow-up' }), primary: item.name, secondary: item.info && _jsx(Text, { variant: 'secondary', children: item.info }), actions: index === 0 ? (_jsxs(Flex, { container: { wrap: 'nowrap' }, children: [slaConfig && (_jsx(Flex, { container: { alignItems: 'center' }, children: _jsx(StopWatch, { startTime: startedAt, timeout: slaTimeout }) })), _jsx(Button, { icon: true, variant: 'simple', disabled: onHoldSince !== undefined, onClick: () => onMuteToggle(callId), label: t(muted ? 'call_panel_unmute_mic_menu_item' : 'call_panel_mute_mic_menu_item'), children: _jsx(Icon, { name: muted ? 'mic-solid' : 'mic-off-solid' }) }), _jsx(Button, { icon: true, variant: 'simple', disabled: !onPauseToggle, onClick: () => onPauseToggle?.(callId), label: t(onHoldSince !== undefined
|
|
39
|
+
return (_jsx(SummaryItem, { overflowStrategy: 'ellipsis', visual: index !== 0 && _jsx(Icon, { name: 'arrow-up' }), primary: item.name, secondary: item.info && _jsx(Text, { variant: 'secondary', children: item.info }), actions: index === 0 ? (_jsxs(Flex, { container: { wrap: 'nowrap' }, children: [_jsx(Flex, { container: { alignItems: 'center' }, children: _jsx(StopWatch, { startTime: startedAt, timeout: slaConfig ? slaTimeout : undefined }) }), _jsx(Button, { icon: true, variant: 'simple', disabled: onHoldSince !== undefined, onClick: () => onMuteToggle(callId), label: t(muted ? 'call_panel_unmute_mic_menu_item' : 'call_panel_mute_mic_menu_item'), children: _jsx(Icon, { name: muted ? 'mic-solid' : 'mic-off-solid' }) }), _jsx(Button, { icon: true, variant: 'simple', disabled: !onPauseToggle, onClick: () => onPauseToggle?.(callId), label: t(onHoldSince !== undefined
|
|
48
40
|
? 'call_panel_resume_call_menu_item'
|
|
49
|
-
: 'call_panel_pause_call_menu_item'), children: _jsx(Icon, { name: onHoldSince !== undefined ? 'play-solid' : 'pause-solid' }) }), onHoldSince ? (_jsxs(_Fragment, { children: [onMergeCall && (_jsx(Button, { icon: true, variant: 'simple', onClick: () => onMergeCall(callId), label: t('call_panel_merge_call_menu_item'), children: _jsx(Icon, { name: 'phone-
|
|
41
|
+
: 'call_panel_pause_call_menu_item'), children: _jsx(Icon, { name: onHoldSince !== undefined ? 'play-solid' : 'pause-solid' }) }), onHoldSince ? (_jsxs(_Fragment, { children: [onMergeCall && (_jsx(Button, { icon: true, variant: 'simple', onClick: () => onMergeCall(callId), label: t('call_panel_merge_call_menu_item'), children: _jsx(Icon, { name: 'phone-merge-solid' }) })), onHandOffCall && (_jsx(Button, { icon: true, variant: 'simple', onClick: () => onHandOffCall(callId), label: t('call_panel_handoff_call_menu_item'), children: _jsx(Icon, { name: 'phone-out-solid' }) })), _jsx(Button, { icon: true, variant: 'simple', disabled: !onEndCall, onClick: () => onEndCall?.(callId), label: t('call_panel_hangup_call_menu_item'), children: _jsx(Icon, { name: 'phone-hangup-solid' }) }, 'hang_up')] })) : (_jsx(MenuButton, { ref: moreActionsButtonRef, text: t('actions'), iconOnly: true, icon: 'more', variant: 'simple', popover: {
|
|
42
|
+
modifiers: [
|
|
43
|
+
{
|
|
44
|
+
name: 'flip',
|
|
45
|
+
enabled: true,
|
|
46
|
+
options: {
|
|
47
|
+
fallbackPlacements: ['bottom-end', 'left', 'right']
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
]
|
|
51
|
+
}, menu: {
|
|
50
52
|
variant: 'flyout',
|
|
51
53
|
items: [
|
|
52
54
|
{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Call.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/Call.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, useLayoutEffect, useRef, useState } from 'react';\n\nimport {\n Button,\n Flex,\n ForwardProps,\n Icon,\n registerIcon,\n Status,\n SummaryItem,\n Text,\n useI18n,\n MenuButton\n} from '@pega/cosmos-react-core';\nimport * as arrowUpIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-up.icon';\nimport * as micSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/mic-solid.icon';\nimport * as micOffSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/mic-off-solid.icon';\nimport * as playSoldIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/play-solid.icon';\nimport * as pauseSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/pause-solid.icon';\nimport * as phoneSplitSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-split-solid.icon';\nimport * as phoneOutSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-out-solid.icon';\nimport * as phoneHangupSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-hangup-solid.icon';\n\nimport { DialPadDialog } from '../DialPad';\n\nimport { StyledHoldInfo, StyledCallContainer, StyledSLAProgress } from './CallControlPanel.styles';\nimport type { CallProps } from './CallControlPanel.types';\nimport StopWatch from './StopWatch';\nimport { calculateSla } from './utils';\nimport CallHandoverDialog from './CallHandover';\n\nregisterIcon(\n arrowUpIcon,\n micSolidIcon,\n micOffSolidIcon,\n playSoldIcon,\n pauseSolidIcon,\n phoneSplitSolidIcon,\n phoneOutSolidIcon,\n phoneHangupSolidIcon\n);\n\nconst Call: FunctionComponent<CallProps & ForwardProps> = ({\n id: callId,\n startedAt,\n onHoldSince,\n slaConfig,\n participants,\n onPauseToggle,\n muted,\n onMuteToggle,\n onDTMFPress,\n onConsultAction,\n onConferenceAction,\n onTransferAction,\n onMergeCall,\n onHandOffCall,\n onEndCall,\n defaultTransfer,\n transferOptions,\n defaultInteraction,\n interactionOptions\n}: CallProps & ForwardProps) => {\n const t = useI18n();\n const moreActionsButtonRef = useRef<HTMLButtonElement>(null);\n const inCallSince = startedAt instanceof Date ? startedAt.getUTCMilliseconds() : startedAt;\n const [slaLevel, setSlaLevel] = useState<number | undefined>(undefined);\n const [dialogType, setDialogType] = useState<\n | 'conferenceWithInteractions'\n | 'conferenceCallOnly'\n | 'transferWithInteractions'\n | 'transferCallOnly'\n | 'consultWithInteractions'\n | 'consultCallOnly'\n | undefined\n >();\n const [showDTMF, setShowDTMF] = useState(false);\n\n const { slaTimeout, slaDuration } = calculateSla(Date.now() - inCallSince, slaConfig);\n\n const calculateCurrentSlaLevel = (): void => {\n const { currentSlaLevel } = calculateSla(Date.now() - inCallSince, slaConfig);\n setSlaLevel(currentSlaLevel);\n };\n\n useLayoutEffect(() => {\n calculateCurrentSlaLevel();\n const slaDurationInMillis = slaDuration && slaDuration * 1000;\n\n const timer = setTimeout(() => {\n calculateCurrentSlaLevel();\n }, slaDurationInMillis);\n\n return () => clearTimeout(timer);\n }, [inCallSince, slaLevel]);\n\n return (\n <StyledCallContainer>\n <StyledSLAProgress\n determinate\n placement='local'\n slaDuration={slaDuration}\n slaLevel={slaLevel}\n />\n {participants.map((item, index) => {\n return (\n <SummaryItem\n container={\n index === 0\n ? {\n areas: '\"primary secondary actions\"',\n cols: 'auto minmax(0, 2fr) auto'\n }\n : {\n areas: '\"visual primary secondary actions\"',\n cols: 'auto auto minmax(0, 2fr) auto'\n }\n }\n overflowStrategy='ellipsis'\n visual={index !== 0 && <Icon name='arrow-up' />}\n primary={item.name}\n secondary={item.info && <Text variant='secondary'>{item.info}</Text>}\n key={item.id}\n actions={\n index === 0 ? (\n <Flex container={{ wrap: 'nowrap' }}>\n {slaConfig && (\n <Flex container={{ alignItems: 'center' }}>\n <StopWatch startTime={startedAt} timeout={slaTimeout} />\n </Flex>\n )}\n\n <Button\n icon\n variant='simple'\n disabled={onHoldSince !== undefined}\n onClick={() => onMuteToggle(callId)}\n label={t(\n muted ? 'call_panel_unmute_mic_menu_item' : 'call_panel_mute_mic_menu_item'\n )}\n >\n <Icon name={muted ? 'mic-solid' : 'mic-off-solid'} />\n </Button>\n\n <Button\n icon\n variant='simple'\n disabled={!onPauseToggle}\n onClick={() => onPauseToggle?.(callId)}\n label={t(\n onHoldSince !== undefined\n ? 'call_panel_resume_call_menu_item'\n : 'call_panel_pause_call_menu_item'\n )}\n >\n <Icon name={onHoldSince !== undefined ? 'play-solid' : 'pause-solid'} />\n </Button>\n {onHoldSince ? (\n <>\n {onMergeCall && (\n <Button\n icon\n variant='simple'\n onClick={() => onMergeCall(callId)}\n label={t('call_panel_merge_call_menu_item')}\n >\n <Icon name='phone-split-solid' />\n </Button>\n )}\n {onHandOffCall && (\n <Button\n icon\n variant='simple'\n onClick={() => onHandOffCall(callId)}\n label={t('call_panel_handoff_call_menu_item')}\n >\n <Icon name='phone-out-solid' />\n </Button>\n )}\n <Button\n icon\n variant='simple'\n key='hang_up'\n disabled={!onEndCall}\n onClick={() => onEndCall?.(callId)}\n label={t('call_panel_hangup_call_menu_item')}\n >\n <Icon name='phone-hangup-solid' />\n </Button>\n </>\n ) : (\n <MenuButton\n ref={moreActionsButtonRef}\n text={t('actions')}\n iconOnly\n icon='more'\n variant='simple'\n menu={{\n variant: 'flyout',\n items: [\n {\n id: 'conference',\n primary: t('call_panel_conference_call_menu_item'),\n disabled: !onConferenceAction,\n items: [\n {\n id: 'conferenceCallWithInteraction',\n primary: t('call_panel_menu_item_call_with_interaction'),\n onClick: () => setDialogType('conferenceWithInteractions')\n },\n {\n id: 'conferenceCallOnly',\n primary: t('call_panel_menu_item_call_only'),\n onClick: () => setDialogType('conferenceCallOnly')\n }\n ]\n },\n {\n id: 'consult',\n primary: t('call_panel_consult_call_menu_item'),\n disabled: !onConsultAction,\n items: [\n {\n id: 'consultCallWithInteraction',\n primary: t('call_panel_menu_item_call_with_interaction'),\n onClick: () => setDialogType('consultWithInteractions')\n },\n {\n id: 'consultCallOnly',\n primary: t('call_panel_menu_item_call_only'),\n onClick: () => setDialogType('consultCallOnly')\n }\n ]\n },\n {\n id: 'transfer',\n primary: t('call_panel_transfer_call_menu_item'),\n disabled: !onTransferAction,\n items: [\n {\n id: 'transferCallWithInteraction',\n primary: t('call_panel_menu_item_call_with_interaction'),\n onClick: () => setDialogType('transferWithInteractions')\n },\n {\n id: 'transferCallOnly',\n primary: t('call_panel_menu_item_call_only'),\n onClick: () => setDialogType('transferCallOnly')\n }\n ]\n },\n {\n id: 'dtmf',\n primary: t('call_panel_send_dtmf_menu_item'),\n disabled: !onDTMFPress,\n onClick: () => setShowDTMF(true)\n },\n {\n id: 'hang_up',\n primary: t('call_panel_hangup_call_menu_item'),\n disabled: !onEndCall,\n onClick: () => onEndCall?.(callId)\n }\n ]\n }}\n />\n )}\n </Flex>\n ) : (\n <Button\n icon\n variant='simple'\n key='hang_up'\n disabled={!item.onHangUp}\n onClick={() => item.onHangUp?.(callId, item.id)}\n label={t('call_panel_hangup_call_menu_item')}\n >\n <Icon name='phone-hangup-solid' />\n </Button>\n )\n }\n />\n );\n })}\n {onHoldSince !== undefined && (\n <Status as={StyledHoldInfo} variant='pending'>\n {\n t('call_panel_call_on_hold', [\n <StopWatch startTime={onHoldSince} />\n ]) as unknown as string\n }\n </Status>\n )}\n {dialogType && (\n <CallHandoverDialog\n target={moreActionsButtonRef.current}\n type={dialogType}\n defaultTransfer={defaultTransfer}\n transferOptions={transferOptions}\n defaultInteraction={defaultInteraction}\n interactionOptions={interactionOptions}\n onCancel={() => {\n setDialogType(undefined);\n moreActionsButtonRef.current?.focus();\n }}\n onSubmit={transferData => {\n switch (dialogType) {\n case 'conferenceCallOnly':\n case 'conferenceWithInteractions':\n onConferenceAction?.(callId, transferData);\n break;\n case 'consultCallOnly':\n case 'consultWithInteractions':\n onConsultAction?.(callId, transferData);\n break;\n case 'transferCallOnly':\n case 'transferWithInteractions':\n onTransferAction?.(callId, transferData);\n break;\n default:\n }\n setDialogType(undefined);\n moreActionsButtonRef.current?.focus();\n }}\n />\n )}\n {showDTMF && (\n <DialPadDialog\n target={moreActionsButtonRef.current}\n onClose={() => setShowDTMF(false)}\n onDialButtonClick={(key: number) => onDTMFPress?.(callId, String.fromCharCode(key))}\n />\n )}\n </StyledCallContainer>\n );\n};\n\nexport default Call;\n"]}
|
|
1
|
+
{"version":3,"file":"Call.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/Call.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, useLayoutEffect, useRef, useState } from 'react';\n\nimport {\n Button,\n Flex,\n ForwardProps,\n Icon,\n registerIcon,\n Status,\n SummaryItem,\n Text,\n useI18n,\n MenuButton\n} from '@pega/cosmos-react-core';\nimport * as arrowUpIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-up.icon';\nimport * as micSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/mic-solid.icon';\nimport * as micOffSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/mic-off-solid.icon';\nimport * as playSoldIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/play-solid.icon';\nimport * as pauseSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/pause-solid.icon';\nimport * as phoneOutSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-out-solid.icon';\nimport * as phoneHangupSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-hangup-solid.icon';\nimport * as phoneMergeSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-merge-solid.icon';\n\nimport { DialPadDialog } from '../DialPad';\n\nimport { StyledHoldInfo, StyledCallContainer, StyledSLAProgress } from './CallControlPanel.styles';\nimport type { CallProps } from './CallControlPanel.types';\nimport StopWatch from './StopWatch';\nimport { calculateSla } from './utils';\nimport CallHandoverDialog from './CallHandover';\n\nregisterIcon(\n arrowUpIcon,\n micSolidIcon,\n micOffSolidIcon,\n playSoldIcon,\n pauseSolidIcon,\n phoneOutSolidIcon,\n phoneHangupSolidIcon,\n phoneMergeSolidIcon\n);\n\nconst Call: FunctionComponent<CallProps & ForwardProps> = ({\n id: callId,\n startedAt,\n onHoldSince,\n slaConfig,\n participants,\n onPauseToggle,\n muted,\n onMuteToggle,\n onDTMFPress,\n onConsultAction,\n onConferenceAction,\n onTransferAction,\n onMergeCall,\n onHandOffCall,\n onEndCall,\n defaultTransfer,\n transferOptions,\n defaultInteraction,\n interactionOptions\n}: CallProps & ForwardProps) => {\n const t = useI18n();\n const moreActionsButtonRef = useRef<HTMLButtonElement>(null);\n const inCallSince = startedAt instanceof Date ? startedAt.getUTCMilliseconds() : startedAt;\n const [slaLevel, setSlaLevel] = useState<number | undefined>(undefined);\n const [dialogType, setDialogType] = useState<\n | 'conferenceWithInteractions'\n | 'conferenceCallOnly'\n | 'transferWithInteractions'\n | 'transferCallOnly'\n | 'consultWithInteractions'\n | 'consultCallOnly'\n | undefined\n >();\n const [showDTMF, setShowDTMF] = useState(false);\n\n const { slaTimeout, slaDuration } = calculateSla(Date.now() - inCallSince, slaConfig);\n\n const calculateCurrentSlaLevel = (): void => {\n const { currentSlaLevel } = calculateSla(Date.now() - inCallSince, slaConfig);\n setSlaLevel(currentSlaLevel);\n };\n\n useLayoutEffect(() => {\n calculateCurrentSlaLevel();\n const slaDurationInMillis = slaDuration && slaDuration * 1000;\n\n const timer = setTimeout(() => {\n calculateCurrentSlaLevel();\n }, slaDurationInMillis);\n\n return () => clearTimeout(timer);\n }, [inCallSince, slaLevel]);\n\n return (\n <StyledCallContainer>\n <StyledSLAProgress\n determinate\n placement='local'\n slaDuration={slaDuration}\n slaLevel={slaLevel}\n />\n {participants.map((item, index) => {\n return (\n <SummaryItem\n overflowStrategy='ellipsis'\n visual={index !== 0 && <Icon name='arrow-up' />}\n primary={item.name}\n secondary={item.info && <Text variant='secondary'>{item.info}</Text>}\n key={item.id}\n actions={\n index === 0 ? (\n <Flex container={{ wrap: 'nowrap' }}>\n <Flex container={{ alignItems: 'center' }}>\n <StopWatch startTime={startedAt} timeout={slaConfig ? slaTimeout : undefined} />\n </Flex>\n\n <Button\n icon\n variant='simple'\n disabled={onHoldSince !== undefined}\n onClick={() => onMuteToggle(callId)}\n label={t(\n muted ? 'call_panel_unmute_mic_menu_item' : 'call_panel_mute_mic_menu_item'\n )}\n >\n <Icon name={muted ? 'mic-solid' : 'mic-off-solid'} />\n </Button>\n\n <Button\n icon\n variant='simple'\n disabled={!onPauseToggle}\n onClick={() => onPauseToggle?.(callId)}\n label={t(\n onHoldSince !== undefined\n ? 'call_panel_resume_call_menu_item'\n : 'call_panel_pause_call_menu_item'\n )}\n >\n <Icon name={onHoldSince !== undefined ? 'play-solid' : 'pause-solid'} />\n </Button>\n {onHoldSince ? (\n <>\n {onMergeCall && (\n <Button\n icon\n variant='simple'\n onClick={() => onMergeCall(callId)}\n label={t('call_panel_merge_call_menu_item')}\n >\n <Icon name='phone-merge-solid' />\n </Button>\n )}\n {onHandOffCall && (\n <Button\n icon\n variant='simple'\n onClick={() => onHandOffCall(callId)}\n label={t('call_panel_handoff_call_menu_item')}\n >\n <Icon name='phone-out-solid' />\n </Button>\n )}\n <Button\n icon\n variant='simple'\n key='hang_up'\n disabled={!onEndCall}\n onClick={() => onEndCall?.(callId)}\n label={t('call_panel_hangup_call_menu_item')}\n >\n <Icon name='phone-hangup-solid' />\n </Button>\n </>\n ) : (\n <MenuButton\n ref={moreActionsButtonRef}\n text={t('actions')}\n iconOnly\n icon='more'\n variant='simple'\n popover={{\n modifiers: [\n {\n name: 'flip',\n enabled: true,\n options: {\n fallbackPlacements: ['bottom-end', 'left', 'right']\n }\n }\n ]\n }}\n menu={{\n variant: 'flyout',\n items: [\n {\n id: 'conference',\n primary: t('call_panel_conference_call_menu_item'),\n disabled: !onConferenceAction,\n items: [\n {\n id: 'conferenceCallWithInteraction',\n primary: t('call_panel_menu_item_call_with_interaction'),\n onClick: () => setDialogType('conferenceWithInteractions')\n },\n {\n id: 'conferenceCallOnly',\n primary: t('call_panel_menu_item_call_only'),\n onClick: () => setDialogType('conferenceCallOnly')\n }\n ]\n },\n {\n id: 'consult',\n primary: t('call_panel_consult_call_menu_item'),\n disabled: !onConsultAction,\n items: [\n {\n id: 'consultCallWithInteraction',\n primary: t('call_panel_menu_item_call_with_interaction'),\n onClick: () => setDialogType('consultWithInteractions')\n },\n {\n id: 'consultCallOnly',\n primary: t('call_panel_menu_item_call_only'),\n onClick: () => setDialogType('consultCallOnly')\n }\n ]\n },\n {\n id: 'transfer',\n primary: t('call_panel_transfer_call_menu_item'),\n disabled: !onTransferAction,\n items: [\n {\n id: 'transferCallWithInteraction',\n primary: t('call_panel_menu_item_call_with_interaction'),\n onClick: () => setDialogType('transferWithInteractions')\n },\n {\n id: 'transferCallOnly',\n primary: t('call_panel_menu_item_call_only'),\n onClick: () => setDialogType('transferCallOnly')\n }\n ]\n },\n {\n id: 'dtmf',\n primary: t('call_panel_send_dtmf_menu_item'),\n disabled: !onDTMFPress,\n onClick: () => setShowDTMF(true)\n },\n {\n id: 'hang_up',\n primary: t('call_panel_hangup_call_menu_item'),\n disabled: !onEndCall,\n onClick: () => onEndCall?.(callId)\n }\n ]\n }}\n />\n )}\n </Flex>\n ) : (\n <Button\n icon\n variant='simple'\n key='hang_up'\n disabled={!item.onHangUp}\n onClick={() => item.onHangUp?.(callId, item.id)}\n label={t('call_panel_hangup_call_menu_item')}\n >\n <Icon name='phone-hangup-solid' />\n </Button>\n )\n }\n />\n );\n })}\n {onHoldSince !== undefined && (\n <Status as={StyledHoldInfo} variant='pending'>\n {\n t('call_panel_call_on_hold', [\n <StopWatch startTime={onHoldSince} />\n ]) as unknown as string\n }\n </Status>\n )}\n {dialogType && (\n <CallHandoverDialog\n target={moreActionsButtonRef.current}\n type={dialogType}\n defaultTransfer={defaultTransfer}\n transferOptions={transferOptions}\n defaultInteraction={defaultInteraction}\n interactionOptions={interactionOptions}\n onCancel={() => {\n setDialogType(undefined);\n moreActionsButtonRef.current?.focus();\n }}\n onSubmit={transferData => {\n switch (dialogType) {\n case 'conferenceCallOnly':\n case 'conferenceWithInteractions':\n onConferenceAction?.(callId, transferData);\n break;\n case 'consultCallOnly':\n case 'consultWithInteractions':\n onConsultAction?.(callId, transferData);\n break;\n case 'transferCallOnly':\n case 'transferWithInteractions':\n onTransferAction?.(callId, transferData);\n break;\n default:\n }\n setDialogType(undefined);\n moreActionsButtonRef.current?.focus();\n }}\n />\n )}\n {showDTMF && (\n <DialPadDialog\n target={moreActionsButtonRef.current}\n onClose={() => setShowDTMF(false)}\n onDialButtonClick={(key: number) => onDTMFPress?.(callId, String.fromCharCode(key))}\n />\n )}\n </StyledCallContainer>\n );\n};\n\nexport default Call;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CallControlPanel.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,
|
|
1
|
+
{"version":3,"file":"CallControlPanel.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAA8C,MAAM,OAAO,CAAC;AAElG,OAAO,EAQL,YAAY,EASb,MAAM,yBAAyB,CAAC;AAGjC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAYtE,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,CA2J7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { forwardRef, useRef, useState } from 'react';
|
|
2
|
+
import { forwardRef, useMemo, useRef, useState } from 'react';
|
|
3
3
|
import { CardContent, useI18n, registerIcon, Flex, ComboBox, Popover, useOuterEvent, useConsolidatedRef, useEscape, Button, CardHeader, Icon, Text, Banner, hasProp } from '@pega/cosmos-react-core';
|
|
4
4
|
import * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';
|
|
5
5
|
import Call from './Call';
|
|
@@ -29,10 +29,11 @@ const CallControlPanel = forwardRef(({ heading, userStatus, message, draggable =
|
|
|
29
29
|
icon: 'plus',
|
|
30
30
|
ref: newCallButtonRef
|
|
31
31
|
};
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
32
|
+
const ctx = useMemo(() => ({
|
|
33
|
+
contacts: contactsList,
|
|
34
|
+
onFavoriteToggle
|
|
35
|
+
}), [contactsList, onFavoriteToggle]);
|
|
36
|
+
return (_jsx(ContactsContext.Provider, { value: ctx, children: _jsxs(FloatingPanel, { ...restProps, ref: containerRef, draggable: draggable, visible: visible, heading: heading, actions: onAddCall ? [newCallButton] : undefined, children: [_jsxs(CardContent, { container: { itemGap: 2 }, children: [message && _jsx(Banner, { ...message }), interactionTransfer && (_jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h4', as: 'span', children: t('call_panel_interaction_transfer_heading') }), _jsxs("div", { children: [_jsx(Button, { variant: 'secondary', onClick: interactionTransfer.onCancel, children: t('cancel') }), _jsx(Button, { variant: 'primary', onClick: interactionTransfer.onComplete, children: t('call_panel_interaction_transfer_complete_button_label') })] })] })), userStatus ? (_jsxs(Flex, { as: StyledStatusRow, container: { alignItems: 'start', itemGap: 1 }, children: [_jsx(UserStatusIcon, { variant: 'dot', status: selectedStatusOption?.status }), _jsx(Flex, { item: { grow: 1 }, children: _jsx(ComboBox, { label: t('call_panel_agent_status'), labelHidden: true, selected: {
|
|
36
37
|
items: {
|
|
37
38
|
id: userStatus.status,
|
|
38
39
|
text: selectedStatusOption?.label || userStatus.status
|
|
@@ -45,6 +46,7 @@ const CallControlPanel = forwardRef(({ heading, userStatus, message, draggable =
|
|
|
45
46
|
} }) }), _jsx(StopWatch, { startTime: userStatus.inStatusSince })] })) : undefined, calls.map(callProps => hasProp(callProps, 'onAcceptCall') ? (_jsx(IncomingCall, { ...callProps }, callProps.id)) : (_jsx(Call, { ...callProps }, callProps.id)))] }), showPopover && (_jsx(Popover, { target: newCallButtonRef.current, ref: popoverRef, placement: 'top-end', modifiers: [
|
|
46
47
|
{
|
|
47
48
|
name: 'flip',
|
|
49
|
+
enabled: true,
|
|
48
50
|
options: {
|
|
49
51
|
fallbackPlacements: ['bottom-end', 'left', 'right']
|
|
50
52
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CallControlPanel.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAsC,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzF,OAAO,EACL,WAAW,EACX,OAAO,EACP,YAAY,EACZ,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,aAAa,EAEb,kBAAkB,EAClB,SAAS,EACT,MAAM,EACN,UAAU,EACV,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,OAAO,EACR,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,QAAQ,MAAM,6DAA6D,CAAC;AAGxF,OAAO,IAAI,MAAM,QAAQ,CAAC;AAC1B,OAAO,SAAS,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAChF,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,aAA2C,MAAM,iBAAiB,CAAC;AAC1E,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,YAAY,MAAM,4BAA4B,CAAC;AACtD,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAE1C,YAAY,CAAC,QAAQ,CAAC,CAAC;AAEvB,MAAM,gBAAgB,GAA4D,UAAU,CAC1F,CACE,EACE,OAAO,EACP,UAAU,EACV,OAAO,EACP,SAAS,GAAG,KAAK,EACjB,KAAK,EACL,SAAS,EACT,YAAY,EACZ,gBAAgB,EAChB,OAAO,EACP,mBAAmB,EACnB,GAAG,SAAS,EAC2B,EACzC,GAAiC,EACjC,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,gBAAgB,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IACzD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,MAAM,YAAY,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAC7C,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEhD,aAAa,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,EAAE,GAAG,EAAE;QAC5C,cAAc,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,CAAC;IAEnD,MAAM,oBAAoB,GAAG,UAAU,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,UAAU,CAAC,MAAM,CAAC,CAAC;IAE7F,MAAM,aAAa,GAA6B;QAC9C,EAAE,EAAE,UAAU;QACd,IAAI,EAAE,CAAC,CAAC,0BAA0B,CAAC;QACnC,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC;QACnC,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,gBAAgB;KACtB,CAAC;IAEF,OAAO,CACL,KAAC,eAAe,CAAC,QAAQ,IACvB,KAAK,EAAE;YACL,QAAQ,EAAE,YAAY;YACtB,gBAAgB;SACjB,YAED,MAAC,aAAa,OACR,SAAS,EACb,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,SAAS,aAEhD,MAAC,WAAW,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,aACnC,OAAO,IAAI,KAAC,MAAM,OAAK,OAAO,GAAI,EAClC,mBAAmB,IAAI,CACtB,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC9C,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,EAAC,EAAE,EAAC,MAAM,YACzB,CAAC,CAAC,yCAAyC,CAAC,GACxC,EACP,0BACE,KAAC,MAAM,IAAC,OAAO,EAAC,WAAW,EAAC,OAAO,EAAE,mBAAmB,CAAC,QAAQ,YAC9D,CAAC,CAAC,QAAQ,CAAC,GACL,EACT,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,mBAAmB,CAAC,UAAU,YAC9D,CAAC,CAAC,uDAAuD,CAAC,GACpD,IACL,IACD,CACR,EACA,UAAU,CAAC,CAAC,CAAC,CACZ,MAAC,IAAI,IAAC,EAAE,EAAE,eAAe,EAAE,SAAS,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,aACvE,KAAC,cAAc,IAAC,OAAO,EAAC,KAAK,EAAC,MAAM,EAAE,oBAAoB,EAAE,MAAM,GAAI,EACtE,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YACrB,KAAC,QAAQ,IACP,KAAK,EAAE,CAAC,CAAC,yBAAyB,CAAC,EACnC,WAAW,QACX,QAAQ,EAAE;4CACR,KAAK,EAAE;gDACL,EAAE,EAAE,UAAU,CAAC,MAAM;gDACrB,IAAI,EAAE,oBAAoB,EAAE,KAAK,IAAI,UAAU,CAAC,MAAM;6CACvD;yCACF,EACD,IAAI,EAAE;4CACJ,KAAK,EAAE,UAAU,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;gDAC9D,OAAO,EAAE,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,KAAK,UAAU,CAAC,MAAM,EAAE,QAAQ,EAAE,CAAC;4CAC9E,CAAC,CAAC;4CACF,WAAW,EAAE,UAAU,CAAC,QAAQ;yCACjC,GACD,GACG,EACP,KAAC,SAAS,IAAC,SAAS,EAAE,UAAU,CAAC,aAAa,GAAI,IAC7C,CACR,CAAC,CAAC,CAAC,SAAS,EAEZ,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,CACrB,OAAO,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,CACnC,KAAC,YAAY,OAAwB,SAAS,IAA3B,SAAS,CAAC,EAAE,CAAmB,CACnD,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,OAAwB,SAAS,IAA3B,SAAS,CAAC,EAAE,CAAmB,CAC3C,CACF,IACW,EACb,WAAW,IAAI,CACd,KAAC,OAAO,IACN,MAAM,EAAE,gBAAgB,CAAC,OAAO,EAChC,GAAG,EAAE,UAAU,EACf,SAAS,EAAC,SAAS,EACnB,SAAS,EAAE;wBACT;4BACE,IAAI,EAAE,MAAM;4BACZ,OAAO,EAAE;gCACP,kBAAkB,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,OAAO,CAAC;6BACpD;yBACF;qBACF,YAED,MAAC,kBAAkB,eACjB,KAAC,UAAU,IACT,OAAO,EACL,KAAC,MAAM,IACL,IAAI,QACJ,OAAO,EAAC,QAAQ,gBACJ,CAAC,CAAC,OAAO,CAAC,EACtB,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,YAEpC,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,YAGX,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EAAE,YACnD,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,6BAA6B,CAAC,GAAQ,GACvD,GACI,EACb,KAAC,WAAW,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,YACpC,KAAC,YAAY,IACX,OAAO,EAAC,QAAQ,EAChB,WAAW,EAAE,WAAW,CAAC,EAAE;wCACzB,SAAS,EAAE,CAAC,WAAW,CAAC,CAAC;wCACzB,cAAc,CAAC,KAAK,CAAC,CAAC;oCACxB,CAAC,GACD,GACU,IACK,GACb,CACX,IACa,GACS,CAC5B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, useRef, useState } from 'react';\n\nimport {\n CardContent,\n useI18n,\n registerIcon,\n Flex,\n ComboBox,\n Popover,\n useOuterEvent,\n ForwardProps,\n useConsolidatedRef,\n useEscape,\n Button,\n CardHeader,\n Icon,\n Text,\n Banner,\n hasProp\n} from '@pega/cosmos-react-core';\nimport * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';\n\nimport type { CallControlPanelProps } from './CallControlPanel.types';\nimport Call from './Call';\nimport StopWatch from './StopWatch';\nimport { StyledCalleePicker, StyledStatusRow } from './CallControlPanel.styles';\nimport { UserStatusIcon } from './CallControlPanelIcon';\nimport FloatingPanel, { FloatingPanelActionProps } from './FloatingPanel';\nimport { ContactsContext } from './ContactList';\nimport CalleePicker from './ContactList/CalleePicker';\nimport IncomingCall from './IncomingCall';\n\nregisterIcon(plusIcon);\n\nconst CallControlPanel: FunctionComponent<CallControlPanelProps & ForwardProps> = forwardRef(\n (\n {\n heading,\n userStatus,\n message,\n draggable = false,\n calls,\n onAddCall,\n contactsList,\n onFavoriteToggle,\n visible,\n interactionTransfer,\n ...restProps\n }: PropsWithoutRef<CallControlPanelProps>,\n ref: CallControlPanelProps['ref']\n ) => {\n const t = useI18n();\n const newCallButtonRef = useRef<HTMLButtonElement>(null);\n const [showPopover, setShowPopover] = useState(false);\n const containerRef = useConsolidatedRef(ref);\n const popoverRef = useRef<HTMLDivElement>(null);\n\n useOuterEvent('mousedown', [popoverRef], () => {\n setShowPopover(false);\n });\n\n useEscape(() => setShowPopover(false), popoverRef);\n\n const selectedStatusOption = userStatus?.statusOptions.find(s => s.id === userStatus.status);\n\n const newCallButton: FloatingPanelActionProps = {\n id: 'new-call',\n text: t('call_panel_make_new_call'),\n onClick: () => setShowPopover(true),\n icon: 'plus',\n ref: newCallButtonRef\n };\n\n return (\n <ContactsContext.Provider\n value={{\n contacts: contactsList,\n onFavoriteToggle\n }}\n >\n <FloatingPanel\n {...restProps}\n ref={containerRef}\n draggable={draggable}\n visible={visible}\n heading={heading}\n actions={onAddCall ? [newCallButton] : undefined}\n >\n <CardContent container={{ itemGap: 2 }}>\n {message && <Banner {...message} />}\n {interactionTransfer && (\n <Flex container={{ direction: 'column', gap: 1 }}>\n <Text variant='h4' as='span'>\n {t('call_panel_interaction_transfer_heading')}\n </Text>\n <div>\n <Button variant='secondary' onClick={interactionTransfer.onCancel}>\n {t('cancel')}\n </Button>\n <Button variant='primary' onClick={interactionTransfer.onComplete}>\n {t('call_panel_interaction_transfer_complete_button_label')}\n </Button>\n </div>\n </Flex>\n )}\n {userStatus ? (\n <Flex as={StyledStatusRow} container={{ alignItems: 'start', itemGap: 1 }}>\n <UserStatusIcon variant='dot' status={selectedStatusOption?.status} />\n <Flex item={{ grow: 1 }}>\n <ComboBox\n label={t('call_panel_agent_status')}\n labelHidden\n selected={{\n items: {\n id: userStatus.status,\n text: selectedStatusOption?.label || userStatus.status\n }\n }}\n menu={{\n items: userStatus.statusOptions.map(({ id, label, disabled }) => {\n return { id, primary: label, selected: id === userStatus.status, disabled };\n }),\n onItemClick: userStatus.onChange\n }}\n />\n </Flex>\n <StopWatch startTime={userStatus.inStatusSince} />\n </Flex>\n ) : undefined}\n\n {calls.map(callProps =>\n hasProp(callProps, 'onAcceptCall') ? (\n <IncomingCall key={callProps.id} {...callProps} />\n ) : (\n <Call key={callProps.id} {...callProps} />\n )\n )}\n </CardContent>\n {showPopover && (\n <Popover\n target={newCallButtonRef.current}\n ref={popoverRef}\n placement='top-end'\n modifiers={[\n {\n name: 'flip',\n options: {\n fallbackPlacements: ['bottom-end', 'left', 'right']\n }\n }\n ]}\n >\n <StyledCalleePicker>\n <CardHeader\n actions={\n <Button\n icon\n variant='simple'\n aria-label={t('close')}\n onClick={() => setShowPopover(false)}\n >\n <Icon name='times' />\n </Button>\n }\n >\n <Flex container={{ alignItems: 'center', itemGap: 1 }}>\n <Text variant='h3'>{t('call_panel_new_call_heading')}</Text>\n </Flex>\n </CardHeader>\n <CardContent container={{ itemGap: 2 }}>\n <CalleePicker\n variant='action'\n onSelection={phoneNumber => {\n onAddCall?.(phoneNumber);\n setShowPopover(false);\n }}\n />\n </CardContent>\n </StyledCalleePicker>\n </Popover>\n )}\n </FloatingPanel>\n </ContactsContext.Provider>\n );\n }\n);\n\nexport default CallControlPanel;\n"]}
|
|
1
|
+
{"version":3,"file":"CallControlPanel.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, useMemo, useRef, useState } from 'react';\n\nimport {\n CardContent,\n useI18n,\n registerIcon,\n Flex,\n ComboBox,\n Popover,\n useOuterEvent,\n ForwardProps,\n useConsolidatedRef,\n useEscape,\n Button,\n CardHeader,\n Icon,\n Text,\n Banner,\n hasProp\n} from '@pega/cosmos-react-core';\nimport * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';\n\nimport type { CallControlPanelProps } from './CallControlPanel.types';\nimport Call from './Call';\nimport StopWatch from './StopWatch';\nimport { StyledCalleePicker, StyledStatusRow } from './CallControlPanel.styles';\nimport { UserStatusIcon } from './CallControlPanelIcon';\nimport FloatingPanel, { FloatingPanelActionProps } from './FloatingPanel';\nimport { ContactsContext } from './ContactList';\nimport CalleePicker from './ContactList/CalleePicker';\nimport IncomingCall from './IncomingCall';\n\nregisterIcon(plusIcon);\n\nconst CallControlPanel: FunctionComponent<CallControlPanelProps & ForwardProps> = forwardRef(\n (\n {\n heading,\n userStatus,\n message,\n draggable = false,\n calls,\n onAddCall,\n contactsList,\n onFavoriteToggle,\n visible,\n interactionTransfer,\n ...restProps\n }: PropsWithoutRef<CallControlPanelProps>,\n ref: CallControlPanelProps['ref']\n ) => {\n const t = useI18n();\n const newCallButtonRef = useRef<HTMLButtonElement>(null);\n const [showPopover, setShowPopover] = useState(false);\n const containerRef = useConsolidatedRef(ref);\n const popoverRef = useRef<HTMLDivElement>(null);\n\n useOuterEvent('mousedown', [popoverRef], () => {\n setShowPopover(false);\n });\n\n useEscape(() => setShowPopover(false), popoverRef);\n\n const selectedStatusOption = userStatus?.statusOptions.find(s => s.id === userStatus.status);\n\n const newCallButton: FloatingPanelActionProps = {\n id: 'new-call',\n text: t('call_panel_make_new_call'),\n onClick: () => setShowPopover(true),\n icon: 'plus',\n ref: newCallButtonRef\n };\n\n const ctx = useMemo(\n () => ({\n contacts: contactsList,\n onFavoriteToggle\n }),\n [contactsList, onFavoriteToggle]\n );\n\n return (\n <ContactsContext.Provider value={ctx}>\n <FloatingPanel\n {...restProps}\n ref={containerRef}\n draggable={draggable}\n visible={visible}\n heading={heading}\n actions={onAddCall ? [newCallButton] : undefined}\n >\n <CardContent container={{ itemGap: 2 }}>\n {message && <Banner {...message} />}\n {interactionTransfer && (\n <Flex container={{ direction: 'column', gap: 1 }}>\n <Text variant='h4' as='span'>\n {t('call_panel_interaction_transfer_heading')}\n </Text>\n <div>\n <Button variant='secondary' onClick={interactionTransfer.onCancel}>\n {t('cancel')}\n </Button>\n <Button variant='primary' onClick={interactionTransfer.onComplete}>\n {t('call_panel_interaction_transfer_complete_button_label')}\n </Button>\n </div>\n </Flex>\n )}\n {userStatus ? (\n <Flex as={StyledStatusRow} container={{ alignItems: 'start', itemGap: 1 }}>\n <UserStatusIcon variant='dot' status={selectedStatusOption?.status} />\n <Flex item={{ grow: 1 }}>\n <ComboBox\n label={t('call_panel_agent_status')}\n labelHidden\n selected={{\n items: {\n id: userStatus.status,\n text: selectedStatusOption?.label || userStatus.status\n }\n }}\n menu={{\n items: userStatus.statusOptions.map(({ id, label, disabled }) => {\n return { id, primary: label, selected: id === userStatus.status, disabled };\n }),\n onItemClick: userStatus.onChange\n }}\n />\n </Flex>\n <StopWatch startTime={userStatus.inStatusSince} />\n </Flex>\n ) : undefined}\n\n {calls.map(callProps =>\n hasProp(callProps, 'onAcceptCall') ? (\n <IncomingCall key={callProps.id} {...callProps} />\n ) : (\n <Call key={callProps.id} {...callProps} />\n )\n )}\n </CardContent>\n {showPopover && (\n <Popover\n target={newCallButtonRef.current}\n ref={popoverRef}\n placement='top-end'\n modifiers={[\n {\n name: 'flip',\n enabled: true,\n options: {\n fallbackPlacements: ['bottom-end', 'left', 'right']\n }\n }\n ]}\n >\n <StyledCalleePicker>\n <CardHeader\n actions={\n <Button\n icon\n variant='simple'\n aria-label={t('close')}\n onClick={() => setShowPopover(false)}\n >\n <Icon name='times' />\n </Button>\n }\n >\n <Flex container={{ alignItems: 'center', itemGap: 1 }}>\n <Text variant='h3'>{t('call_panel_new_call_heading')}</Text>\n </Flex>\n </CardHeader>\n <CardContent container={{ itemGap: 2 }}>\n <CalleePicker\n variant='action'\n onSelection={phoneNumber => {\n onAddCall?.(phoneNumber);\n setShowPopover(false);\n }}\n />\n </CardContent>\n </StyledCalleePicker>\n </Popover>\n )}\n </FloatingPanel>\n </ContactsContext.Provider>\n );\n }\n);\n\nexport default CallControlPanel;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CallHandoverDialog.d.ts","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/CallHandover/CallHandoverDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAgC,MAAM,OAAO,CAAC;AAkBxE,OAAO,KAAK,EAAE,YAAY,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAE/E,MAAM,MAAM,YAAY,GACpB,4BAA4B,GAC5B,oBAAoB,GACpB,0BAA0B,GAC1B,kBAAkB,GAClB,yBAAyB,GACzB,iBAAiB,CAAC;AAEtB,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,IAAI,EAAE,YAAY,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IACvC,eAAe,CAAC,EAAE,oBAAoB,CAAC,IAAI,CAAC,CAAC;IAC7C,kBAAkB,CAAC,EAAE,oBAAoB,CAAC,IAAI,CAAC,CAAC;IAChD,eAAe,EAAE,QAAQ,CAAC,oBAAoB,EAAE,CAAC,CAAC;IAClD,kBAAkB,CAAC,EAAE,QAAQ,CAAC,oBAAoB,EAAE,CAAC,CAAC;CACvD;AAED,QAAA,MAAM,kBAAkB,EAAE,iBAAiB,CAAC,uBAAuB,
|
|
1
|
+
{"version":3,"file":"CallHandoverDialog.d.ts","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/CallHandover/CallHandoverDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAgC,MAAM,OAAO,CAAC;AAkBxE,OAAO,KAAK,EAAE,YAAY,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAE/E,MAAM,MAAM,YAAY,GACpB,4BAA4B,GAC5B,oBAAoB,GACpB,0BAA0B,GAC1B,kBAAkB,GAClB,yBAAyB,GACzB,iBAAiB,CAAC;AAEtB,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,IAAI,EAAE,YAAY,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IACvC,eAAe,CAAC,EAAE,oBAAoB,CAAC,IAAI,CAAC,CAAC;IAC7C,kBAAkB,CAAC,EAAE,oBAAoB,CAAC,IAAI,CAAC,CAAC;IAChD,eAAe,EAAE,QAAQ,CAAC,oBAAoB,EAAE,CAAC,CAAC;IAClD,kBAAkB,CAAC,EAAE,QAAQ,CAAC,oBAAoB,EAAE,CAAC,CAAC;CACvD;AAED,QAAA,MAAM,kBAAkB,EAAE,iBAAiB,CAAC,uBAAuB,CAoJlE,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
|
|
@@ -45,6 +45,7 @@ const CallHandoverDialog = ({ target, type, onSubmit, onCancel, transferOptions,
|
|
|
45
45
|
return (_jsx(Popover, { target: target, ref: popoverRef, placement: 'top-end', modifiers: [
|
|
46
46
|
{
|
|
47
47
|
name: 'flip',
|
|
48
|
+
enabled: true,
|
|
48
49
|
options: {
|
|
49
50
|
fallbackPlacements: ['bottom-end', 'left', 'right']
|
|
50
51
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CallHandoverDialog.js","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/CallHandover/CallHandoverDialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, ReactNode, useEffect, useRef } from 'react';\n\nimport {\n Text,\n Button,\n Card,\n CardContent,\n CardHeader,\n Icon,\n Popover,\n useEscape,\n useFocusTrap,\n useI18n,\n useOuterEvent,\n getFocusables\n} from '@pega/cosmos-react-core';\n\nimport CallHandoverForm from './CallHandoverForm';\nimport type { TransferData, TransferReasonOption } from './CallHandover.types';\n\nexport type HandoverType =\n | 'conferenceWithInteractions'\n | 'conferenceCallOnly'\n | 'transferWithInteractions'\n | 'transferCallOnly'\n | 'consultWithInteractions'\n | 'consultCallOnly';\n\nexport interface CallHandoverDialogProps {\n target: HTMLElement | null;\n type: HandoverType;\n onCancel: () => void;\n onSubmit: (data: TransferData) => void;\n defaultTransfer?: TransferReasonOption['id'];\n defaultInteraction?: TransferReasonOption['id'];\n transferOptions: Readonly<TransferReasonOption[]>;\n interactionOptions?: Readonly<TransferReasonOption[]>;\n}\n\nconst CallHandoverDialog: FunctionComponent<CallHandoverDialogProps> = ({\n target,\n type,\n onSubmit,\n onCancel,\n transferOptions,\n interactionOptions,\n defaultTransfer,\n defaultInteraction\n}: CallHandoverDialogProps) => {\n const popoverRef = useRef<HTMLDivElement>(null);\n const t = useI18n();\n\n useOuterEvent('mousedown', [popoverRef], onCancel);\n useEscape(onCancel, popoverRef);\n useFocusTrap(popoverRef);\n\n useEffect(() => {\n getFocusables(popoverRef)[0]?.focus();\n }, []);\n\n let dialogContent: ReactNode;\n let dialogHeading: string;\n switch (type) {\n case 'conferenceCallOnly':\n dialogHeading = t('call_panel_conference_heading');\n dialogContent = (\n <CallHandoverForm\n onCancel={onCancel}\n variant='call'\n submitButtonText={t('call_panel_conference_submit')}\n onSubmit={onSubmit}\n transferOptions={transferOptions}\n interactionOptions={interactionOptions}\n defaultTransfer={defaultTransfer}\n defaultInteraction={defaultInteraction}\n />\n );\n break;\n case 'conferenceWithInteractions':\n dialogHeading = t('call_panel_conference_call_and_interactions_heading');\n dialogContent = (\n <CallHandoverForm\n onCancel={onCancel}\n variant='call+interaction'\n submitButtonText={t('call_panel_conference_submit')}\n onSubmit={onSubmit}\n transferOptions={transferOptions}\n interactionOptions={interactionOptions}\n defaultTransfer={defaultTransfer}\n defaultInteraction={defaultInteraction}\n />\n );\n break;\n case 'consultCallOnly':\n dialogHeading = t('call_panel_consult_heading');\n dialogContent = (\n <CallHandoverForm\n onCancel={onCancel}\n variant='call'\n submitButtonText={t('call_panel_consult_submit')}\n onSubmit={onSubmit}\n transferOptions={transferOptions}\n interactionOptions={interactionOptions}\n defaultTransfer={defaultTransfer}\n defaultInteraction={defaultInteraction}\n />\n );\n break;\n case 'consultWithInteractions':\n dialogHeading = t('call_panel_consult_call_and_interactions_heading');\n dialogContent = (\n <CallHandoverForm\n onCancel={onCancel}\n variant='call+interaction'\n submitButtonText={t('call_panel_consult_submit')}\n onSubmit={onSubmit}\n transferOptions={transferOptions}\n interactionOptions={interactionOptions}\n defaultTransfer={defaultTransfer}\n defaultInteraction={defaultInteraction}\n />\n );\n break;\n case 'transferCallOnly':\n dialogHeading = t('call_panel_transfer_heading');\n dialogContent = (\n <CallHandoverForm\n submitButtonText={t('call_panel_transfer_submit')}\n onCancel={onCancel}\n variant='call'\n onSubmit={onSubmit}\n transferOptions={transferOptions}\n interactionOptions={interactionOptions}\n defaultTransfer={defaultTransfer}\n defaultInteraction={defaultInteraction}\n />\n );\n break;\n case 'transferWithInteractions':\n dialogHeading = t('call_panel_transfer_call_and_interactions_heading');\n dialogContent = (\n <CallHandoverForm\n submitButtonText={t('call_panel_transfer_submit')}\n onCancel={onCancel}\n variant='call+interaction'\n onSubmit={onSubmit}\n transferOptions={transferOptions}\n interactionOptions={interactionOptions}\n defaultTransfer={defaultTransfer}\n defaultInteraction={defaultInteraction}\n />\n );\n break;\n default:\n dialogHeading = '';\n dialogContent = null;\n }\n\n return (\n <Popover\n target={target}\n ref={popoverRef}\n placement='top-end'\n modifiers={[\n {\n name: 'flip',\n options: {\n fallbackPlacements: ['bottom-end', 'left', 'right']\n }\n }\n ]}\n >\n <Card>\n <CardHeader\n actions={\n <Button icon variant='simple' aria-label={t('close')} onClick={onCancel}>\n <Icon name='times' />\n </Button>\n }\n >\n <Text variant='h3'>{dialogHeading}</Text>\n </CardHeader>\n <CardContent>{dialogContent}</CardContent>\n </Card>\n </Popover>\n );\n};\n\nexport default CallHandoverDialog;\n"]}
|
|
1
|
+
{"version":3,"file":"CallHandoverDialog.js","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/CallHandover/CallHandoverDialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAgC,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAExE,OAAO,EACL,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,WAAW,EACX,UAAU,EACV,IAAI,EACJ,OAAO,EACP,SAAS,EACT,YAAY,EACZ,OAAO,EACP,aAAa,EACb,aAAa,EACd,MAAM,yBAAyB,CAAC;AAEjC,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAsBlD,MAAM,kBAAkB,GAA+C,CAAC,EACtE,MAAM,EACN,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,eAAe,EACf,kBAAkB,EAClB,eAAe,EACf,kBAAkB,EACM,EAAE,EAAE;IAC5B,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAChD,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,aAAa,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,EAAE,QAAQ,CAAC,CAAC;IACnD,SAAS,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;IAChC,YAAY,CAAC,UAAU,CAAC,CAAC;IAEzB,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC;IACxC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAI,aAAwB,CAAC;IAC7B,IAAI,aAAqB,CAAC;IAC1B,QAAQ,IAAI,EAAE;QACZ,KAAK,oBAAoB;YACvB,aAAa,GAAG,CAAC,CAAC,+BAA+B,CAAC,CAAC;YACnD,aAAa,GAAG,CACd,KAAC,gBAAgB,IACf,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAC,MAAM,EACd,gBAAgB,EAAE,CAAC,CAAC,8BAA8B,CAAC,EACnD,QAAQ,EAAE,QAAQ,EAClB,eAAe,EAAE,eAAe,EAChC,kBAAkB,EAAE,kBAAkB,EACtC,eAAe,EAAE,eAAe,EAChC,kBAAkB,EAAE,kBAAkB,GACtC,CACH,CAAC;YACF,MAAM;QACR,KAAK,4BAA4B;YAC/B,aAAa,GAAG,CAAC,CAAC,qDAAqD,CAAC,CAAC;YACzE,aAAa,GAAG,CACd,KAAC,gBAAgB,IACf,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAC,kBAAkB,EAC1B,gBAAgB,EAAE,CAAC,CAAC,8BAA8B,CAAC,EACnD,QAAQ,EAAE,QAAQ,EAClB,eAAe,EAAE,eAAe,EAChC,kBAAkB,EAAE,kBAAkB,EACtC,eAAe,EAAE,eAAe,EAChC,kBAAkB,EAAE,kBAAkB,GACtC,CACH,CAAC;YACF,MAAM;QACR,KAAK,iBAAiB;YACpB,aAAa,GAAG,CAAC,CAAC,4BAA4B,CAAC,CAAC;YAChD,aAAa,GAAG,CACd,KAAC,gBAAgB,IACf,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAC,MAAM,EACd,gBAAgB,EAAE,CAAC,CAAC,2BAA2B,CAAC,EAChD,QAAQ,EAAE,QAAQ,EAClB,eAAe,EAAE,eAAe,EAChC,kBAAkB,EAAE,kBAAkB,EACtC,eAAe,EAAE,eAAe,EAChC,kBAAkB,EAAE,kBAAkB,GACtC,CACH,CAAC;YACF,MAAM;QACR,KAAK,yBAAyB;YAC5B,aAAa,GAAG,CAAC,CAAC,kDAAkD,CAAC,CAAC;YACtE,aAAa,GAAG,CACd,KAAC,gBAAgB,IACf,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAC,kBAAkB,EAC1B,gBAAgB,EAAE,CAAC,CAAC,2BAA2B,CAAC,EAChD,QAAQ,EAAE,QAAQ,EAClB,eAAe,EAAE,eAAe,EAChC,kBAAkB,EAAE,kBAAkB,EACtC,eAAe,EAAE,eAAe,EAChC,kBAAkB,EAAE,kBAAkB,GACtC,CACH,CAAC;YACF,MAAM;QACR,KAAK,kBAAkB;YACrB,aAAa,GAAG,CAAC,CAAC,6BAA6B,CAAC,CAAC;YACjD,aAAa,GAAG,CACd,KAAC,gBAAgB,IACf,gBAAgB,EAAE,CAAC,CAAC,4BAA4B,CAAC,EACjD,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAC,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,eAAe,EAAE,eAAe,EAChC,kBAAkB,EAAE,kBAAkB,EACtC,eAAe,EAAE,eAAe,EAChC,kBAAkB,EAAE,kBAAkB,GACtC,CACH,CAAC;YACF,MAAM;QACR,KAAK,0BAA0B;YAC7B,aAAa,GAAG,CAAC,CAAC,mDAAmD,CAAC,CAAC;YACvE,aAAa,GAAG,CACd,KAAC,gBAAgB,IACf,gBAAgB,EAAE,CAAC,CAAC,4BAA4B,CAAC,EACjD,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAC,kBAAkB,EAC1B,QAAQ,EAAE,QAAQ,EAClB,eAAe,EAAE,eAAe,EAChC,kBAAkB,EAAE,kBAAkB,EACtC,eAAe,EAAE,eAAe,EAChC,kBAAkB,EAAE,kBAAkB,GACtC,CACH,CAAC;YACF,MAAM;QACR;YACE,aAAa,GAAG,EAAE,CAAC;YACnB,aAAa,GAAG,IAAI,CAAC;KACxB;IAED,OAAO,CACL,KAAC,OAAO,IACN,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,UAAU,EACf,SAAS,EAAC,SAAS,EACnB,SAAS,EAAE;YACT;gBACE,IAAI,EAAE,MAAM;gBACZ,OAAO,EAAE,IAAI;gBACb,OAAO,EAAE;oBACP,kBAAkB,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,OAAO,CAAC;iBACpD;aACF;SACF,YAED,MAAC,IAAI,eACH,KAAC,UAAU,IACT,OAAO,EACL,KAAC,MAAM,IAAC,IAAI,QAAC,OAAO,EAAC,QAAQ,gBAAa,CAAC,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,QAAQ,YACrE,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,YAGX,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,aAAa,GAAQ,GAC9B,EACb,KAAC,WAAW,cAAE,aAAa,GAAe,IACrC,GACC,CACX,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,kBAAkB,CAAC","sourcesContent":["import { FunctionComponent, ReactNode, useEffect, useRef } from 'react';\n\nimport {\n Text,\n Button,\n Card,\n CardContent,\n CardHeader,\n Icon,\n Popover,\n useEscape,\n useFocusTrap,\n useI18n,\n useOuterEvent,\n getFocusables\n} from '@pega/cosmos-react-core';\n\nimport CallHandoverForm from './CallHandoverForm';\nimport type { TransferData, TransferReasonOption } from './CallHandover.types';\n\nexport type HandoverType =\n | 'conferenceWithInteractions'\n | 'conferenceCallOnly'\n | 'transferWithInteractions'\n | 'transferCallOnly'\n | 'consultWithInteractions'\n | 'consultCallOnly';\n\nexport interface CallHandoverDialogProps {\n target: HTMLElement | null;\n type: HandoverType;\n onCancel: () => void;\n onSubmit: (data: TransferData) => void;\n defaultTransfer?: TransferReasonOption['id'];\n defaultInteraction?: TransferReasonOption['id'];\n transferOptions: Readonly<TransferReasonOption[]>;\n interactionOptions?: Readonly<TransferReasonOption[]>;\n}\n\nconst CallHandoverDialog: FunctionComponent<CallHandoverDialogProps> = ({\n target,\n type,\n onSubmit,\n onCancel,\n transferOptions,\n interactionOptions,\n defaultTransfer,\n defaultInteraction\n}: CallHandoverDialogProps) => {\n const popoverRef = useRef<HTMLDivElement>(null);\n const t = useI18n();\n\n useOuterEvent('mousedown', [popoverRef], onCancel);\n useEscape(onCancel, popoverRef);\n useFocusTrap(popoverRef);\n\n useEffect(() => {\n getFocusables(popoverRef)[0]?.focus();\n }, []);\n\n let dialogContent: ReactNode;\n let dialogHeading: string;\n switch (type) {\n case 'conferenceCallOnly':\n dialogHeading = t('call_panel_conference_heading');\n dialogContent = (\n <CallHandoverForm\n onCancel={onCancel}\n variant='call'\n submitButtonText={t('call_panel_conference_submit')}\n onSubmit={onSubmit}\n transferOptions={transferOptions}\n interactionOptions={interactionOptions}\n defaultTransfer={defaultTransfer}\n defaultInteraction={defaultInteraction}\n />\n );\n break;\n case 'conferenceWithInteractions':\n dialogHeading = t('call_panel_conference_call_and_interactions_heading');\n dialogContent = (\n <CallHandoverForm\n onCancel={onCancel}\n variant='call+interaction'\n submitButtonText={t('call_panel_conference_submit')}\n onSubmit={onSubmit}\n transferOptions={transferOptions}\n interactionOptions={interactionOptions}\n defaultTransfer={defaultTransfer}\n defaultInteraction={defaultInteraction}\n />\n );\n break;\n case 'consultCallOnly':\n dialogHeading = t('call_panel_consult_heading');\n dialogContent = (\n <CallHandoverForm\n onCancel={onCancel}\n variant='call'\n submitButtonText={t('call_panel_consult_submit')}\n onSubmit={onSubmit}\n transferOptions={transferOptions}\n interactionOptions={interactionOptions}\n defaultTransfer={defaultTransfer}\n defaultInteraction={defaultInteraction}\n />\n );\n break;\n case 'consultWithInteractions':\n dialogHeading = t('call_panel_consult_call_and_interactions_heading');\n dialogContent = (\n <CallHandoverForm\n onCancel={onCancel}\n variant='call+interaction'\n submitButtonText={t('call_panel_consult_submit')}\n onSubmit={onSubmit}\n transferOptions={transferOptions}\n interactionOptions={interactionOptions}\n defaultTransfer={defaultTransfer}\n defaultInteraction={defaultInteraction}\n />\n );\n break;\n case 'transferCallOnly':\n dialogHeading = t('call_panel_transfer_heading');\n dialogContent = (\n <CallHandoverForm\n submitButtonText={t('call_panel_transfer_submit')}\n onCancel={onCancel}\n variant='call'\n onSubmit={onSubmit}\n transferOptions={transferOptions}\n interactionOptions={interactionOptions}\n defaultTransfer={defaultTransfer}\n defaultInteraction={defaultInteraction}\n />\n );\n break;\n case 'transferWithInteractions':\n dialogHeading = t('call_panel_transfer_call_and_interactions_heading');\n dialogContent = (\n <CallHandoverForm\n submitButtonText={t('call_panel_transfer_submit')}\n onCancel={onCancel}\n variant='call+interaction'\n onSubmit={onSubmit}\n transferOptions={transferOptions}\n interactionOptions={interactionOptions}\n defaultTransfer={defaultTransfer}\n defaultInteraction={defaultInteraction}\n />\n );\n break;\n default:\n dialogHeading = '';\n dialogContent = null;\n }\n\n return (\n <Popover\n target={target}\n ref={popoverRef}\n placement='top-end'\n modifiers={[\n {\n name: 'flip',\n enabled: true,\n options: {\n fallbackPlacements: ['bottom-end', 'left', 'right']\n }\n }\n ]}\n >\n <Card>\n <CardHeader\n actions={\n <Button icon variant='simple' aria-label={t('close')} onClick={onCancel}>\n <Icon name='times' />\n </Button>\n }\n >\n <Text variant='h3'>{dialogHeading}</Text>\n </CardHeader>\n <CardContent>{dialogContent}</CardContent>\n </Card>\n </Popover>\n );\n};\n\nexport default CallHandoverDialog;\n"]}
|
|
@@ -17,7 +17,7 @@ export interface CallHandoverFormProps {
|
|
|
17
17
|
/** Interaction options. */
|
|
18
18
|
interactionOptions?: Readonly<TransferReasonOption[]>;
|
|
19
19
|
/** Reference to the root component. */
|
|
20
|
-
ref?: Ref<
|
|
20
|
+
ref?: Ref<HTMLFormElement>;
|
|
21
21
|
/** Variant of component. */
|
|
22
22
|
variant?: 'call' | 'call+interaction';
|
|
23
23
|
/** Label of the submit button. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CallHandoverForm.d.ts","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/CallHandover/CallHandoverForm.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,GAAG,
|
|
1
|
+
{"version":3,"file":"CallHandoverForm.d.ts","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/CallHandover/CallHandoverForm.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,GAAG,EAAsD,MAAM,OAAO,CAAC;AAmBnG,OAAO,KAAK,EAAE,oBAAoB,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAI/E,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IACvC,gDAAgD;IAChD,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,uCAAuC;IACvC,eAAe,CAAC,EAAE,oBAAoB,CAAC,IAAI,CAAC,CAAC;IAC7C,mCAAmC;IACnC,kBAAkB,CAAC,EAAE,oBAAoB,CAAC,IAAI,CAAC,CAAC;IAChD,+BAA+B;IAC/B,eAAe,EAAE,QAAQ,CAAC,oBAAoB,EAAE,CAAC,CAAC;IAClD,2BAA2B;IAC3B,kBAAkB,CAAC,EAAE,QAAQ,CAAC,oBAAoB,EAAE,CAAC,CAAC;IACtD,uCAAuC;IACvC,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAC;IAC3B,4BAA4B;IAC5B,OAAO,CAAC,EAAE,MAAM,GAAG,kBAAkB,CAAC;IACtC,kCAAkC;IAClC,gBAAgB,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,sBAAsB,oNAMlC,CAAC;AAIF,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,CAmH9D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
import { useState } from 'react';
|
|
2
|
+
import { useState, forwardRef } from 'react';
|
|
3
3
|
import styled from 'styled-components';
|
|
4
4
|
import { Button, registerIcon, defaultThemeProp, useI18n, TextArea, ComboBox, Form, Flex } from '@pega/cosmos-react-core';
|
|
5
5
|
import { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';
|
|
@@ -14,7 +14,7 @@ export const StyledCallHandoverForm = styled(Form) `
|
|
|
14
14
|
}
|
|
15
15
|
`;
|
|
16
16
|
StyledCallHandoverForm.defaultProps = defaultThemeProp;
|
|
17
|
-
const CallHandoverForm = ({ onCancel, onSubmit, transferOptions, variant, submitButtonText, interactionOptions, defaultTransfer, defaultInteraction }) => {
|
|
17
|
+
const CallHandoverForm = forwardRef(({ onCancel, onSubmit, transferOptions, variant, submitButtonText, interactionOptions, defaultTransfer, defaultInteraction }, ref) => {
|
|
18
18
|
const t = useI18n();
|
|
19
19
|
const [selectedContact, setSelectedContact] = useState();
|
|
20
20
|
const initialReason = transferOptions.find(reason => reason.id === defaultTransfer);
|
|
@@ -32,7 +32,7 @@ const CallHandoverForm = ({ onCancel, onSubmit, transferOptions, variant, submit
|
|
|
32
32
|
phoneNumber: selectedContact,
|
|
33
33
|
transferredInteractionId: selectedInteraction?.id
|
|
34
34
|
});
|
|
35
|
-
}, children: submitButtonText })] }), children: [variant === 'call+interaction' && (_jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [interactionOptions && (_jsx(ComboBox, { label: t('call_panel_handover_interaction_label'), selected: {
|
|
35
|
+
}, children: submitButtonText })] }), ref: ref, children: [variant === 'call+interaction' && (_jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [interactionOptions && (_jsx(ComboBox, { label: t('call_panel_handover_interaction_label'), selected: {
|
|
36
36
|
items: selectedInteraction
|
|
37
37
|
? { id: selectedInteraction.id, text: selectedInteraction.label }
|
|
38
38
|
: undefined
|
|
@@ -55,6 +55,6 @@ const CallHandoverForm = ({ onCancel, onSubmit, transferOptions, variant, submit
|
|
|
55
55
|
})),
|
|
56
56
|
onItemClick: id => setSelectedReason(transferOptions.find(option => option.id === id))
|
|
57
57
|
} }), _jsx(TextArea, { name: 'comments', required: true, label: t('call_panel_handover_comments_label'), displayCharCount: true, maxLength: 300, value: comments, onChange: (e) => setComments(e.target.value) })] })), _jsx(CalleePicker, { selectedContact: selectedContact, onSelection: setSelectedContact, variant: 'select' })] }));
|
|
58
|
-
};
|
|
58
|
+
});
|
|
59
59
|
export default CallHandoverForm;
|
|
60
60
|
//# sourceMappingURL=CallHandoverForm.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CallHandoverForm.js","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/CallHandover/CallHandoverForm.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA0B,QAAQ,EAAe,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"CallHandoverForm.js","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/CallHandover/CallHandoverForm.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, Ref, useState, ChangeEvent, forwardRef, PropsWithoutRef } from 'react';\nimport styled from 'styled-components';\n\nimport {\n Button,\n registerIcon,\n defaultThemeProp,\n useI18n,\n TextArea,\n ComboBox,\n Form,\n Flex\n} from '@pega/cosmos-react-core';\nimport { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\n\nimport type { Contact } from '../ContactList';\nimport CalleePicker from '../ContactList/CalleePicker';\n\nimport type { TransferReasonOption, TransferData } from './CallHandover.types';\n\nregisterIcon(timesIcon);\n\nexport interface CallHandoverFormProps {\n /**\n * Callback fired on handover submission.\n * @param data the transfer parameters.\n */\n onSubmit: (data: TransferData) => void;\n /** Callback fired on clicking Cancel button. */\n onCancel: () => void;\n /** Current selected transfer reason */\n defaultTransfer?: TransferReasonOption['id'];\n /** Current selected interaction */\n defaultInteraction?: TransferReasonOption['id'];\n /** Transfer reason options. */\n transferOptions: Readonly<TransferReasonOption[]>;\n /** Interaction options. */\n interactionOptions?: Readonly<TransferReasonOption[]>;\n /** Reference to the root component. */\n ref?: Ref<HTMLFormElement>;\n /** Variant of component. */\n variant?: 'call' | 'call+interaction';\n /** Label of the submit button. */\n submitButtonText: string;\n}\n\nexport const StyledCallHandoverForm = styled(Form)`\n min-width: 50ch;\n\n ${StyledTabPanel} {\n height: 24rem;\n }\n`;\n\nStyledCallHandoverForm.defaultProps = defaultThemeProp;\n\nconst CallHandoverForm: FunctionComponent<CallHandoverFormProps> = forwardRef(\n (\n {\n onCancel,\n onSubmit,\n transferOptions,\n variant,\n submitButtonText,\n interactionOptions,\n defaultTransfer,\n defaultInteraction\n }: PropsWithoutRef<CallHandoverFormProps>,\n ref: CallHandoverFormProps['ref']\n ) => {\n const t = useI18n();\n\n const [selectedContact, setSelectedContact] = useState<Contact['phoneNumber']>();\n const initialReason = transferOptions.find(reason => reason.id === defaultTransfer);\n const initialInteraction = interactionOptions?.find(\n interaction => interaction.id === defaultInteraction\n );\n const [selectedReason, setSelectedReason] = useState<TransferReasonOption | undefined>(\n initialReason\n );\n const [selectedInteraction, setSelectedInteraction] = useState<\n TransferReasonOption | undefined\n >(initialInteraction);\n const [comments, setComments] = useState('');\n\n return (\n <StyledCallHandoverForm\n actions={\n <>\n <Button variant='secondary' onClick={onCancel}>\n {t('cancel')}\n </Button>\n <Button\n variant='primary'\n disabled={!(selectedContact && (variant === 'call+interaction' ? comments : true))}\n onClick={() => {\n if (!selectedContact) return;\n onSubmit({\n reason: selectedReason?.id,\n comments,\n interaction: variant === 'call+interaction',\n phoneNumber: selectedContact,\n transferredInteractionId: selectedInteraction?.id\n });\n }}\n >\n {submitButtonText}\n </Button>\n </>\n }\n ref={ref}\n >\n {variant === 'call+interaction' && (\n <Flex container={{ direction: 'column', gap: 1 }}>\n {interactionOptions && (\n <ComboBox\n label={t('call_panel_handover_interaction_label')}\n selected={{\n items: selectedInteraction\n ? { id: selectedInteraction.id, text: selectedInteraction.label }\n : undefined\n }}\n menu={{\n items: interactionOptions.map(({ id, label }) => ({\n id,\n primary: label,\n selected: id === selectedInteraction?.id\n })),\n onItemClick: id =>\n setSelectedInteraction(interactionOptions.find(option => option.id === id))\n }}\n />\n )}\n\n <ComboBox\n label={t('call_panel_handover_reason_label')}\n selected={{\n items: selectedReason\n ? { id: selectedReason.id, text: selectedReason.label }\n : undefined\n }}\n menu={{\n items: transferOptions.map(({ id, label }) => ({\n id,\n primary: label,\n selected: id === selectedReason?.id\n })),\n onItemClick: id =>\n setSelectedReason(transferOptions.find(option => option.id === id))\n }}\n />\n\n <TextArea\n name='comments'\n required\n label={t('call_panel_handover_comments_label')}\n displayCharCount\n maxLength={300}\n value={comments}\n onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setComments(e.target.value)}\n />\n </Flex>\n )}\n <CalleePicker\n selectedContact={selectedContact}\n onSelection={setSelectedContact}\n variant='select'\n />\n </StyledCallHandoverForm>\n );\n }\n);\n\nexport default CallHandoverForm;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/utils.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,WAAY,MAAM,KAAG,MAG/C,CAAC;AAEF,eAAO,MAAM,YAAY,iBACT,MAAM,cACR,MAAM,EAAE,KACnB;IACD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/utils.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,WAAY,MAAM,KAAG,MAG/C,CAAC;AAEF,eAAO,MAAM,YAAY,iBACT,MAAM,cACR,MAAM,EAAE,KACnB;IACD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;CA4B1B,CAAC"}
|
|
@@ -13,7 +13,6 @@ export const calculateSla = (callDuration, slaConfig) => {
|
|
|
13
13
|
currentSlaLevel: undefined
|
|
14
14
|
};
|
|
15
15
|
}
|
|
16
|
-
// eslint-disable-next-line no-restricted-syntax
|
|
17
16
|
for (const { prev: prevSlaTimeout = 0, current: slaTimeoutInSeconds } of triple(slaConfig)) {
|
|
18
17
|
const slaInMillis = slaTimeoutInSeconds * 1000;
|
|
19
18
|
if (callDuration < slaInMillis) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEjD,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,MAAc,EAAU,EAAE;IACvD,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC1C,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC;AACrF,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,CAC1B,YAAoB,EACpB,SAAoB,EAKpB,EAAE;IACF,IAAI,QAAQ,GAAG,CAAC,CAAC;IACjB,IAAI,cAAc,GAAG,CAAC,CAAC;IACvB,IAAI,CAAC,SAAS,EAAE;QACd,OAAO;YACL,UAAU,EAAE,SAAS;YACrB,WAAW,EAAE,SAAS;YACtB,eAAe,EAAE,SAAS;SAC3B,CAAC;KACH;IACD,
|
|
1
|
+
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEjD,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,MAAc,EAAU,EAAE;IACvD,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC1C,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC;AACrF,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,CAC1B,YAAoB,EACpB,SAAoB,EAKpB,EAAE;IACF,IAAI,QAAQ,GAAG,CAAC,CAAC;IACjB,IAAI,cAAc,GAAG,CAAC,CAAC;IACvB,IAAI,CAAC,SAAS,EAAE;QACd,OAAO;YACL,UAAU,EAAE,SAAS;YACrB,WAAW,EAAE,SAAS;YACtB,eAAe,EAAE,SAAS;SAC3B,CAAC;KACH;IACD,KAAK,MAAM,EAAE,IAAI,EAAE,cAAc,GAAG,CAAC,EAAE,OAAO,EAAE,mBAAmB,EAAE,IAAI,MAAM,CAAC,SAAS,CAAC,EAAE;QAC1F,MAAM,WAAW,GAAG,mBAAmB,GAAG,IAAI,CAAC;QAC/C,IAAI,YAAY,GAAG,WAAW,EAAE;YAC9B,OAAO;gBACL,UAAU,EAAE,WAAW;gBACvB,WAAW,EAAE,mBAAmB,GAAG,cAAc;gBACjD,eAAe,EAAE,QAAQ;aAC1B,CAAC;SACH;QACD,QAAQ,IAAI,CAAC,CAAC;QACd,cAAc,GAAG,WAAW,CAAC;KAC9B;IACD,OAAO;QACL,UAAU,EAAE,cAAc;QAC1B,WAAW,EAAE,CAAC;QACd,eAAe,EAAE,QAAQ;KAC1B,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { triple } from '@pega/cosmos-react-core';\n\nexport const formatDuration = (millis: number): string => {\n const seconds = Math.round(millis / 1000);\n return `${Math.floor(seconds / 60)}:${(seconds % 60).toString().padStart(2, '0')}`;\n};\n\nexport const calculateSla = (\n callDuration: number,\n slaConfig?: number[]\n): {\n slaTimeout?: number;\n slaDuration?: number;\n currentSlaLevel?: number;\n} => {\n let slaLevel = 0;\n let lastSlaTimeout = 0;\n if (!slaConfig) {\n return {\n slaTimeout: undefined,\n slaDuration: undefined,\n currentSlaLevel: undefined\n };\n }\n for (const { prev: prevSlaTimeout = 0, current: slaTimeoutInSeconds } of triple(slaConfig)) {\n const slaInMillis = slaTimeoutInSeconds * 1000;\n if (callDuration < slaInMillis) {\n return {\n slaTimeout: slaInMillis,\n slaDuration: slaTimeoutInSeconds - prevSlaTimeout,\n currentSlaLevel: slaLevel\n };\n }\n slaLevel += 1;\n lastSlaTimeout = slaInMillis;\n }\n return {\n slaTimeout: lastSlaTimeout,\n slaDuration: 0,\n currentSlaLevel: slaLevel\n };\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DialPadDialog.d.ts","sourceRoot":"","sources":["../../../src/components/DialPad/DialPadDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA+B,MAAM,OAAO,CAAC;AAmBvE,UAAU,kBAAkB;IAC1B,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,iBAAiB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/C;AAED,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,
|
|
1
|
+
{"version":3,"file":"DialPadDialog.d.ts","sourceRoot":"","sources":["../../../src/components/DialPad/DialPadDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA+B,MAAM,OAAO,CAAC;AAmBvE,UAAU,kBAAkB;IAC1B,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,iBAAiB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/C;AAED,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,CAgExD,CAAC;AAEF,eAAe,aAAa,CAAC"}
|
|
@@ -19,6 +19,7 @@ const DialPadDialog = ({ target, onClose: onCloseProp, onDialButtonClick }) => {
|
|
|
19
19
|
return (_jsx(Popover, { target: target, ref: popoverRef, placement: 'top-end', modifiers: [
|
|
20
20
|
{
|
|
21
21
|
name: 'flip',
|
|
22
|
+
enabled: true,
|
|
22
23
|
options: {
|
|
23
24
|
fallbackPlacements: ['bottom-end', 'left', 'right']
|
|
24
25
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DialPadDialog.js","sourceRoot":"","sources":["../../../src/components/DialPad/DialPadDialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEvE,OAAO,EACL,MAAM,EACN,IAAI,EACJ,WAAW,EACX,UAAU,EACV,aAAa,EACb,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,SAAS,EACT,YAAY,EACZ,OAAO,EACP,aAAa,EACd,MAAM,yBAAyB,CAAC;AAEjC,OAAO,OAAO,MAAM,WAAW,CAAC;AAQhC,MAAM,aAAa,GAA0C,CAAC,EAC5D,MAAM,EACN,OAAO,EAAE,WAAW,EACpB,iBAAiB,EACE,EAAE,EAAE;IACvB,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEhD,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,WAAW,EAAE,CAAC;QACd,MAAM,EAAE,KAAK,EAAE,CAAC;IAClB,CAAC,CAAC;IAEF,aAAa,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC,CAAC;IAClD,SAAS,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;IAC/B,YAAY,CAAC,UAAU,CAAC,CAAC;IAEzB,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC;IACxC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEnD,OAAO,CACL,KAAC,OAAO,IACN,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,UAAU,EACf,SAAS,EAAC,SAAS,EACnB,SAAS,EAAE;YACT;gBACE,IAAI,EAAE,MAAM;gBACZ,OAAO,EAAE;oBACP,kBAAkB,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,OAAO,CAAC;iBACpD;aACF;SACF,EACD,OAAO,EAAE,CAAC,CAAC,8BAA8B,CAAC,YAE1C,MAAC,IAAI,eACH,KAAC,UAAU,IACT,OAAO,EACL,KAAC,MAAM,IAAC,IAAI,QAAC,OAAO,EAAC,QAAQ,gBAAa,CAAC,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,OAAO,YACpE,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,YAGX,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,8BAA8B,CAAC,GAAQ,GAClD,EACb,KAAC,WAAW,cACV,KAAC,OAAO,IACN,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,SAAS,CAAC,EAAE;4BACpB,cAAc,CAAC,SAAS,CAAC,CAAC;4BAC1B,iFAAiF;4BACjF,gEAAgE;4BAChE,iBAAiB,CAAC,SAAS,CAAC,UAAU,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;wBAChE,CAAC,EACD,IAAI,EAAC,MAAM,GACX,GACU,IACT,GACC,CACX,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { FunctionComponent, useRef, useEffect, useState } from 'react';\n\nimport {\n Button,\n Card,\n CardContent,\n CardHeader,\n getFocusables,\n Icon,\n Popover,\n Text,\n useEscape,\n useFocusTrap,\n useI18n,\n useOuterEvent\n} from '@pega/cosmos-react-core';\n\nimport DialPad from './DialPad';\n\ninterface DialPadDialogProps {\n target: HTMLElement | null;\n onClose: () => void;\n onDialButtonClick: (charCode: number) => void;\n}\n\nconst DialPadDialog: FunctionComponent<DialPadDialogProps> = ({\n target,\n onClose: onCloseProp,\n onDialButtonClick\n}: DialPadDialogProps) => {\n const t = useI18n();\n const popoverRef = useRef<HTMLDivElement>(null);\n\n const onClose = () => {\n onCloseProp();\n target?.focus();\n };\n\n useOuterEvent('mousedown', [popoverRef], onClose);\n useEscape(onClose, popoverRef);\n useFocusTrap(popoverRef);\n\n useEffect(() => {\n getFocusables(popoverRef)[0]?.focus();\n }, []);\n\n const [phoneNumber, setPhoneNumber] = useState('');\n\n return (\n <Popover\n target={target}\n ref={popoverRef}\n placement='top-end'\n modifiers={[\n {\n name: 'flip',\n options: {\n fallbackPlacements: ['bottom-end', 'left', 'right']\n }\n }\n ]}\n heading={t('call_panel_send_dtmf_heading')}\n >\n <Card>\n <CardHeader\n actions={\n <Button icon variant='simple' aria-label={t('close')} onClick={onClose}>\n <Icon name='times' />\n </Button>\n }\n >\n <Text variant='h3'>{t('call_panel_send_dtmf_heading')}</Text>\n </CardHeader>\n <CardContent>\n <DialPad\n value={phoneNumber}\n onChange={inputText => {\n setPhoneNumber(inputText);\n // In DTMF mode only dialpad can be used for input without possibility to delete,\n // so always last character can be send to the parent component.\n onDialButtonClick(inputText.charCodeAt(inputText.length - 1));\n }}\n mode='DTMF'\n />\n </CardContent>\n </Card>\n </Popover>\n );\n};\n\nexport default DialPadDialog;\n"]}
|
|
1
|
+
{"version":3,"file":"DialPadDialog.js","sourceRoot":"","sources":["../../../src/components/DialPad/DialPadDialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEvE,OAAO,EACL,MAAM,EACN,IAAI,EACJ,WAAW,EACX,UAAU,EACV,aAAa,EACb,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,SAAS,EACT,YAAY,EACZ,OAAO,EACP,aAAa,EACd,MAAM,yBAAyB,CAAC;AAEjC,OAAO,OAAO,MAAM,WAAW,CAAC;AAQhC,MAAM,aAAa,GAA0C,CAAC,EAC5D,MAAM,EACN,OAAO,EAAE,WAAW,EACpB,iBAAiB,EACE,EAAE,EAAE;IACvB,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEhD,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,WAAW,EAAE,CAAC;QACd,MAAM,EAAE,KAAK,EAAE,CAAC;IAClB,CAAC,CAAC;IAEF,aAAa,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC,CAAC;IAClD,SAAS,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;IAC/B,YAAY,CAAC,UAAU,CAAC,CAAC;IAEzB,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC;IACxC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEnD,OAAO,CACL,KAAC,OAAO,IACN,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,UAAU,EACf,SAAS,EAAC,SAAS,EACnB,SAAS,EAAE;YACT;gBACE,IAAI,EAAE,MAAM;gBACZ,OAAO,EAAE,IAAI;gBACb,OAAO,EAAE;oBACP,kBAAkB,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,OAAO,CAAC;iBACpD;aACF;SACF,EACD,OAAO,EAAE,CAAC,CAAC,8BAA8B,CAAC,YAE1C,MAAC,IAAI,eACH,KAAC,UAAU,IACT,OAAO,EACL,KAAC,MAAM,IAAC,IAAI,QAAC,OAAO,EAAC,QAAQ,gBAAa,CAAC,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,OAAO,YACpE,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,YAGX,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,8BAA8B,CAAC,GAAQ,GAClD,EACb,KAAC,WAAW,cACV,KAAC,OAAO,IACN,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,SAAS,CAAC,EAAE;4BACpB,cAAc,CAAC,SAAS,CAAC,CAAC;4BAC1B,iFAAiF;4BACjF,gEAAgE;4BAChE,iBAAiB,CAAC,SAAS,CAAC,UAAU,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;wBAChE,CAAC,EACD,IAAI,EAAC,MAAM,GACX,GACU,IACT,GACC,CACX,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { FunctionComponent, useRef, useEffect, useState } from 'react';\n\nimport {\n Button,\n Card,\n CardContent,\n CardHeader,\n getFocusables,\n Icon,\n Popover,\n Text,\n useEscape,\n useFocusTrap,\n useI18n,\n useOuterEvent\n} from '@pega/cosmos-react-core';\n\nimport DialPad from './DialPad';\n\ninterface DialPadDialogProps {\n target: HTMLElement | null;\n onClose: () => void;\n onDialButtonClick: (charCode: number) => void;\n}\n\nconst DialPadDialog: FunctionComponent<DialPadDialogProps> = ({\n target,\n onClose: onCloseProp,\n onDialButtonClick\n}: DialPadDialogProps) => {\n const t = useI18n();\n const popoverRef = useRef<HTMLDivElement>(null);\n\n const onClose = () => {\n onCloseProp();\n target?.focus();\n };\n\n useOuterEvent('mousedown', [popoverRef], onClose);\n useEscape(onClose, popoverRef);\n useFocusTrap(popoverRef);\n\n useEffect(() => {\n getFocusables(popoverRef)[0]?.focus();\n }, []);\n\n const [phoneNumber, setPhoneNumber] = useState('');\n\n return (\n <Popover\n target={target}\n ref={popoverRef}\n placement='top-end'\n modifiers={[\n {\n name: 'flip',\n enabled: true,\n options: {\n fallbackPlacements: ['bottom-end', 'left', 'right']\n }\n }\n ]}\n heading={t('call_panel_send_dtmf_heading')}\n >\n <Card>\n <CardHeader\n actions={\n <Button icon variant='simple' aria-label={t('close')} onClick={onClose}>\n <Icon name='times' />\n </Button>\n }\n >\n <Text variant='h3'>{t('call_panel_send_dtmf_heading')}</Text>\n </CardHeader>\n <CardContent>\n <DialPad\n value={phoneNumber}\n onChange={inputText => {\n setPhoneNumber(inputText);\n // In DTMF mode only dialpad can be used for input without possibility to delete,\n // so always last character can be send to the parent component.\n onDialButtonClick(inputText.charCodeAt(inputText.length - 1));\n }}\n mode='DTMF'\n />\n </CardContent>\n </Card>\n </Popover>\n );\n};\n\nexport default DialPadDialog;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"KeyboardNavigation.js","sourceRoot":"","sources":["../../../src/components/DialPad/KeyboardNavigation.ts"],"names":[],"mappings":"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","sourcesContent":["//
|
|
1
|
+
{"version":3,"file":"KeyboardNavigation.js","sourceRoot":"","sources":["../../../src/components/DialPad/KeyboardNavigation.ts"],"names":[],"mappings":"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","sourcesContent":["// cspell:words PQRS WXYZ\nimport { NavigationGraphElement } from './DialPad.types';\n\nconst baseGraph: NavigationGraphElement[] = [\n {\n sign: '1',\n keyCode: 49,\n ref: undefined,\n right: 1,\n down: 3\n },\n {\n sign: '2',\n alt: 'ABC',\n keyCode: 50,\n ref: undefined,\n right: 2,\n down: 4,\n left: 0\n },\n {\n sign: '3',\n alt: 'DEF',\n keyCode: 51,\n ref: undefined,\n down: 5,\n left: 1\n },\n {\n sign: '4',\n alt: 'GHI',\n keyCode: 52,\n ref: undefined,\n up: 0,\n right: 4,\n down: 6\n },\n {\n sign: '5',\n alt: 'JKL',\n keyCode: 53,\n ref: undefined,\n up: 1,\n right: 5,\n down: 7,\n left: 3\n },\n {\n sign: '6',\n alt: 'MNO',\n keyCode: 54,\n ref: undefined,\n up: 2,\n down: 8,\n left: 4\n },\n {\n sign: '7',\n alt: 'PQRS',\n keyCode: 55,\n ref: undefined,\n up: 3,\n right: 7,\n down: 9\n },\n {\n sign: '8',\n alt: 'TUV',\n keyCode: 56,\n ref: undefined,\n up: 4,\n right: 8,\n down: 10,\n left: 6\n },\n {\n sign: '9',\n alt: 'WXYZ',\n keyCode: 57,\n ref: undefined,\n up: 5,\n down: 11,\n left: 7\n },\n {\n special: '*',\n keyCode: 42,\n ref: undefined,\n up: 6,\n right: 10,\n down: 12\n }\n];\n\nexport const dtmfGraph = baseGraph.concat([\n {\n sign: '0',\n alt: '+',\n keyCode: 48,\n altKeyCode: 43,\n ref: undefined,\n up: 7,\n right: 11,\n left: 9\n },\n {\n special: '#',\n keyCode: 35,\n ref: undefined,\n up: 8,\n left: 10\n },\n {\n icon: 'backspace',\n keyCode: 127,\n ref: undefined,\n up: 10\n }\n]);\n\nexport const defaultGraph = baseGraph.concat([\n {\n sign: '0',\n alt: '+',\n keyCode: 48,\n altKeyCode: 43,\n ref: undefined,\n up: 7,\n right: 11,\n down: 12,\n left: 9\n },\n {\n special: '#',\n keyCode: 35,\n ref: undefined,\n up: 8,\n down: 12,\n left: 10\n },\n {\n icon: 'backspace',\n keyCode: 127,\n ref: undefined,\n up: 10\n }\n]);\n\nexport const defaultButtonGrid = [\n [defaultGraph[0], defaultGraph[1], defaultGraph[2]],\n [defaultGraph[3], defaultGraph[4], defaultGraph[5]],\n [defaultGraph[6], defaultGraph[7], defaultGraph[8]],\n [defaultGraph[9], defaultGraph[10], defaultGraph[11]],\n [defaultGraph[12]]\n];\n\nexport const dtmfButtonGrid = [\n [dtmfGraph[0], dtmfGraph[1], dtmfGraph[2]],\n [dtmfGraph[3], dtmfGraph[4], dtmfGraph[5]],\n [dtmfGraph[6], dtmfGraph[7], dtmfGraph[8]],\n [dtmfGraph[9], dtmfGraph[10], dtmfGraph[11]]\n];\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InteractionTimer.d.ts","sourceRoot":"","sources":["../../../src/components/InteractionTimer/InteractionTimer.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"InteractionTimer.d.ts","sourceRoot":"","sources":["../../../src/components/InteractionTimer/InteractionTimer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAEjB,GAAG,EAIJ,MAAM,OAAO,CAAC;AAGf,OAAO,EACL,SAAS,EACT,MAAM,EAKN,YAAY,EAIZ,cAAc,EAEf,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,qBAAsB,SAAQ,SAAS,EAAE,MAAM,EAAE,cAAc;IAC9E,uBAAuB;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,uBAAuB;IACvB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,gEAAgE;IAChE,GAAG,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,eAAe,CAAC;IAC5C;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gBAAgB;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,iCAAiC,0GAAgB,CAAC;AAC/D,eAAO,MAAM,0BAA0B,yGAAe,CAAC;AACvD,eAAO,MAAM,8BAA8B,0GAAgB,CAAC;AAI5D,eAAO,MAAM,sBAAsB,gOAgElC,CAAC;AAIF,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,CAmE7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
|