@pega/cosmos-react-cs 3.0.0-dev.26.0 → 3.0.0-dev.27.2
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 +4 -4
- 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 +3 -2
- package/lib/components/CallControlPanel/CallControlPanel.js.map +1 -1
- package/lib/components/CallControlPanel/CallControlPanel.styles.d.ts +2 -1
- package/lib/components/CallControlPanel/CallControlPanel.styles.d.ts.map +1 -1
- package/lib/components/CallControlPanel/CallControlPanel.styles.js +14 -3
- package/lib/components/CallControlPanel/CallControlPanel.styles.js.map +1 -1
- package/lib/components/CallControlPanel/CallControlPanel.types.d.ts +15 -1
- package/lib/components/CallControlPanel/CallControlPanel.types.d.ts.map +1 -1
- package/lib/components/CallControlPanel/CallControlPanel.types.js.map +1 -1
- package/lib/components/CallControlPanel/CallHandover/CallHandover.types.d.ts +2 -0
- package/lib/components/CallControlPanel/CallHandover/CallHandover.types.d.ts.map +1 -1
- package/lib/components/CallControlPanel/CallHandover/CallHandover.types.js.map +1 -1
- package/lib/components/CallControlPanel/CallHandover/CallHandoverDialog.d.ts +1 -0
- package/lib/components/CallControlPanel/CallHandover/CallHandoverDialog.d.ts.map +1 -1
- package/lib/components/CallControlPanel/CallHandover/CallHandoverDialog.js +6 -6
- package/lib/components/CallControlPanel/CallHandover/CallHandoverDialog.js.map +1 -1
- package/lib/components/CallControlPanel/CallHandover/CallHandoverForm.d.ts +2 -0
- package/lib/components/CallControlPanel/CallHandover/CallHandoverForm.d.ts.map +1 -1
- package/lib/components/CallControlPanel/CallHandover/CallHandoverForm.js +18 -5
- package/lib/components/CallControlPanel/CallHandover/CallHandoverForm.js.map +1 -1
- package/lib/components/CallControlPanel/ExternalCTI.d.ts +34 -1
- package/lib/components/CallControlPanel/ExternalCTI.d.ts.map +1 -1
- package/lib/components/CallControlPanel/ExternalCTI.js +59 -9
- package/lib/components/CallControlPanel/ExternalCTI.js.map +1 -1
- package/lib/components/CallControlPanel/IncomingCall.d.ts +6 -0
- package/lib/components/CallControlPanel/IncomingCall.d.ts.map +1 -0
- package/lib/components/CallControlPanel/IncomingCall.js +18 -0
- package/lib/components/CallControlPanel/IncomingCall.js.map +1 -0
- package/lib/components/CallControlPanel/index.d.ts +1 -1
- package/lib/components/CallControlPanel/index.d.ts.map +1 -1
- package/lib/components/CallControlPanel/index.js.map +1 -1
- package/package.json +3 -3
|
@@ -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;
|
|
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,CAwRrD,CAAC;AAEF,eAAe,IAAI,CAAC"}
|
|
@@ -10,12 +10,12 @@ import * as phoneSplitSolidIcon from '@pega/cosmos-react-core/lib/components/Ico
|
|
|
10
10
|
import * as phoneOutSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-out-solid.icon';
|
|
11
11
|
import * as phoneHangupSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-hangup-solid.icon';
|
|
12
12
|
import { DialPadDialog } from '../DialPad';
|
|
13
|
-
import { StyledHoldInfo,
|
|
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
17
|
registerIcon(arrowUpIcon, micSolidIcon, micOffSolidIcon, playSoldIcon, pauseSolidIcon, phoneSplitSolidIcon, phoneOutSolidIcon, phoneHangupSolidIcon);
|
|
18
|
-
const Call = ({ id: callId, startedAt, onHoldSince, slaConfig, participants, onPauseToggle, muted, onMuteToggle, onDTMFPress, onConsultAction, onConferenceAction, onTransferAction, onMergeCall, onHandOffCall, onEndCall, transferOptions }) => {
|
|
18
|
+
const Call = ({ id: callId, startedAt, onHoldSince, slaConfig, participants, onPauseToggle, muted, onMuteToggle, onDTMFPress, onConsultAction, onConferenceAction, onTransferAction, onMergeCall, onHandOffCall, onEndCall, transferOptions, interactionOptions }) => {
|
|
19
19
|
const t = useI18n();
|
|
20
20
|
const moreActionsButtonRef = useRef(null);
|
|
21
21
|
const inCallSince = startedAt instanceof Date ? startedAt.getUTCMilliseconds() : startedAt;
|
|
@@ -35,7 +35,7 @@ const Call = ({ id: callId, startedAt, onHoldSince, slaConfig, participants, onP
|
|
|
35
35
|
}, slaDurationInMillis);
|
|
36
36
|
return () => clearTimeout(timer);
|
|
37
37
|
}, [inCallSince, slaLevel]);
|
|
38
|
-
return (_jsxs(
|
|
38
|
+
return (_jsxs(StyledCallContainer, { children: [_jsx(StyledSLAProgress, { determinate: true, placement: 'local', slaDuration: slaDuration, slaLevel: slaLevel }), participants.map((item, index) => {
|
|
39
39
|
return (_jsx(SummaryItem, { container: index === 0
|
|
40
40
|
? {
|
|
41
41
|
areas: '"primary secondary actions"',
|
|
@@ -109,7 +109,7 @@ const Call = ({ id: callId, startedAt, onHoldSince, slaConfig, participants, onP
|
|
|
109
109
|
} }))] })) : (_jsx(Button, { icon: true, variant: 'simple', disabled: !item.onHangUp, onClick: () => item.onHangUp?.(callId, item.id), label: t('call_panel_hangup_call_menu_item'), children: _jsx(Icon, { name: 'phone-hangup-solid' }) }, 'hang_up')) }, item.id));
|
|
110
110
|
}), onHoldSince !== undefined && (_jsx(Status, { as: StyledHoldInfo, variant: 'pending', children: t('call_panel_call_on_hold', [
|
|
111
111
|
_jsx(StopWatch, { startTime: onHoldSince })
|
|
112
|
-
]) })), dialogType && (_jsx(CallHandoverDialog, { target: moreActionsButtonRef.current, type: dialogType, transferOptions: transferOptions, onCancel: () => {
|
|
112
|
+
]) })), dialogType && (_jsx(CallHandoverDialog, { target: moreActionsButtonRef.current, type: dialogType, transferOptions: transferOptions, interactionOptions: interactionOptions, onCancel: () => {
|
|
113
113
|
setDialogType(undefined);
|
|
114
114
|
moreActionsButtonRef.current?.focus();
|
|
115
115
|
}, onSubmit: transferData => {
|
|
@@ -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 {\n StyledHoldInfo,\n StyledProgressContainer,\n StyledSLAProgress\n} 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 transferOptions\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 | 'conference'\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 <StyledProgressContainer>\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 onClick: () => setDialogType('conference')\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 disabled: !onTransferAction,\n onClick: () => setDialogType('consultWithInteractions')\n },\n {\n id: 'consultCallOnly',\n primary: t('call_panel_menu_item_call_only'),\n disabled: !onTransferAction,\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 disabled: !onTransferAction,\n onClick: () => setDialogType('transferWithInteractions')\n },\n {\n id: 'transferCallOnly',\n primary: t('call_panel_menu_item_call_only'),\n disabled: !onTransferAction,\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 transferOptions={transferOptions}\n onCancel={() => {\n setDialogType(undefined);\n moreActionsButtonRef.current?.focus();\n }}\n onSubmit={transferData => {\n switch (dialogType) {\n case 'conference':\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 </StyledProgressContainer>\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 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 transferOptions,\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 | 'conference'\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 onClick: () => setDialogType('conference')\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 disabled: !onTransferAction,\n onClick: () => setDialogType('consultWithInteractions')\n },\n {\n id: 'consultCallOnly',\n primary: t('call_panel_menu_item_call_only'),\n disabled: !onTransferAction,\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 disabled: !onTransferAction,\n onClick: () => setDialogType('transferWithInteractions')\n },\n {\n id: 'transferCallOnly',\n primary: t('call_panel_menu_item_call_only'),\n disabled: !onTransferAction,\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 transferOptions={transferOptions}\n interactionOptions={interactionOptions}\n onCancel={() => {\n setDialogType(undefined);\n moreActionsButtonRef.current?.focus();\n }}\n onSubmit={transferData => {\n switch (dialogType) {\n case 'conference':\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,EAAqC,MAAM,OAAO,CAAC;AAEzF,OAAO,EAQL,YAAY,
|
|
1
|
+
{"version":3,"file":"CallControlPanel.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAqC,MAAM,OAAO,CAAC;AAEzF,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,CA4J7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef, useRef, useState } from 'react';
|
|
3
|
-
import { CardContent, useI18n, registerIcon, Flex, ComboBox, Popover, useOuterEvent, useConsolidatedRef, useEscape, Button, CardHeader, Icon, Text, Banner } from '@pega/cosmos-react-core';
|
|
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';
|
|
6
6
|
import StopWatch from './StopWatch';
|
|
@@ -9,6 +9,7 @@ import { UserStatusIcon } from './CallControlPanelIcon';
|
|
|
9
9
|
import FloatingPanel from './FloatingPanel';
|
|
10
10
|
import { ContactsContext } from './ContactList';
|
|
11
11
|
import CalleePicker from './ContactList/CalleePicker';
|
|
12
|
+
import IncomingCall from './IncomingCall';
|
|
12
13
|
registerIcon(plusIcon);
|
|
13
14
|
const CallControlPanel = forwardRef(({ heading, status, statusOptions, onStatusChange, inStatusSince, message, draggable = false, calls, onAddCall, contactsList, onFavoriteToggle, visible, interactionTransfer, ...restProps }, ref) => {
|
|
14
15
|
const t = useI18n();
|
|
@@ -41,7 +42,7 @@ const CallControlPanel = forwardRef(({ heading, status, statusOptions, onStatusC
|
|
|
41
42
|
return { id, primary: label, selected: id === status, disabled };
|
|
42
43
|
}),
|
|
43
44
|
onItemClick: onStatusChange
|
|
44
|
-
} }) }), _jsx(StopWatch, { startTime: inStatusSince })] }), calls.map(callProps => (_jsx(Call, { ...callProps }, callProps.id)))] }), showPopover && (_jsx(Popover, { target: newCallButtonRef.current, ref: popoverRef, placement: 'top-end', modifiers: [
|
|
45
|
+
} }) }), _jsx(StopWatch, { startTime: inStatusSince })] }), 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: [
|
|
45
46
|
{
|
|
46
47
|
name: 'flip',
|
|
47
48
|
options: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CallControlPanel.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.tsx"],"names":[],"mappings":"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","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} 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';\n\nregisterIcon(plusIcon);\n\nconst CallControlPanel: FunctionComponent<CallControlPanelProps & ForwardProps> = forwardRef(\n (\n {\n heading,\n status,\n statusOptions,\n onStatusChange,\n inStatusSince,\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 = statusOptions.find(s => s.id === 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 <Banner\n id='interaction-transfer'\n variant='info'\n heading={t('call_panel_interaction_transfer_heading')}\n onDismiss={interactionTransfer.onCancel}\n messages={[]}\n action={\n <Flex container>\n <Button variant='simple' 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 </Flex>\n }\n />\n )}\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: status,\n text: selectedStatusOption?.label || ''\n }\n }}\n menu={{\n items: statusOptions.map(({ id, label, disabled }) => {\n return { id, primary: label, selected: id === status, disabled };\n }),\n onItemClick: onStatusChange\n }}\n />\n </Flex>\n <StopWatch startTime={inStatusSince} />\n </Flex>\n {calls.map(callProps => (\n <Call key={callProps.id} {...callProps} />\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, 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 status,\n statusOptions,\n onStatusChange,\n inStatusSince,\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 = statusOptions.find(s => s.id === 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 <Banner\n id='interaction-transfer'\n variant='info'\n heading={t('call_panel_interaction_transfer_heading')}\n onDismiss={interactionTransfer.onCancel}\n messages={[]}\n action={\n <Flex container>\n <Button variant='simple' 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 </Flex>\n }\n />\n )}\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: status,\n text: selectedStatusOption?.label || ''\n }\n }}\n menu={{\n items: statusOptions.map(({ id, label, disabled }) => {\n return { id, primary: label, selected: id === status, disabled };\n }),\n onItemClick: onStatusChange\n }}\n />\n </Flex>\n <StopWatch startTime={inStatusSince} />\n </Flex>\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,6 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { ProgressProps } from '@pega/cosmos-react-core';
|
|
3
|
-
export declare const
|
|
3
|
+
export declare const StyledCallContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
4
|
+
export declare const StyledIncomingContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
4
5
|
export declare const StyledHoldInfo: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, import("@pega/cosmos-react-core").StatusProps, never>;
|
|
5
6
|
export declare const StyledStatusRow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
6
7
|
export declare const StyledSLAProgress: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ProgressProps & {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CallControlPanel.styles.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.styles.ts"],"names":[],"mappings":";AAEA,OAAO,EAQL,aAAa,EAKd,MAAM,yBAAyB,CAAC;AAMjC,eAAO,MAAM,
|
|
1
|
+
{"version":3,"file":"CallControlPanel.styles.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.styles.ts"],"names":[],"mappings":";AAEA,OAAO,EAQL,aAAa,EAKd,MAAM,yBAAyB,CAAC;AAMjC,eAAO,MAAM,mBAAmB,yGAoC/B,CAAC;AAIF,eAAO,MAAM,uBAAuB,yGASlC,CAAC;AAIH,eAAO,MAAM,cAAc,qJAI1B,CAAC;AAIF,eAAO,MAAM,eAAe,yGAiB3B,CAAC;AAIF,eAAO,MAAM,iBAAiB;;;;;SAwC5B,CAAC;AAIH,eAAO,MAAM,kBAAkB,mOAI9B,CAAC"}
|
|
@@ -3,7 +3,7 @@ import { defaultThemeProp, StyledBackdrop, StyledButton, StyledFlex, StyledProgr
|
|
|
3
3
|
import { StyledStatus } from '@pega/cosmos-react-core/lib/components/Badges/Status';
|
|
4
4
|
import { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';
|
|
5
5
|
import { StyledStopWatch } from './StopWatch';
|
|
6
|
-
export const
|
|
6
|
+
export const StyledCallContainer = styled.div(({ theme: { base: { spacing }, components: { card } } }) => {
|
|
7
7
|
return css `
|
|
8
8
|
position: relative;
|
|
9
9
|
> ${StyledBackdrop} {
|
|
@@ -18,7 +18,7 @@ export const StyledProgressContainer = styled.div(({ theme: { base: { spacing },
|
|
|
18
18
|
box-sizing: content-box;
|
|
19
19
|
position: relative;
|
|
20
20
|
height: 2rem;
|
|
21
|
-
padding:
|
|
21
|
+
padding-inline: calc(2 * ${spacing});
|
|
22
22
|
border-top: 0;
|
|
23
23
|
> ${StyledVisual} {
|
|
24
24
|
transform: rotate(50deg);
|
|
@@ -33,7 +33,18 @@ export const StyledProgressContainer = styled.div(({ theme: { base: { spacing },
|
|
|
33
33
|
}
|
|
34
34
|
`;
|
|
35
35
|
});
|
|
36
|
-
|
|
36
|
+
StyledCallContainer.defaultProps = defaultThemeProp;
|
|
37
|
+
export const StyledIncomingContainer = styled(StyledCallContainer)(({ theme }) => {
|
|
38
|
+
return css `
|
|
39
|
+
background-color: ${theme.base.colors.gray['extra-light']};
|
|
40
|
+
border-radius: calc(0.5 * ${theme.base['border-radius']});
|
|
41
|
+
|
|
42
|
+
> ${StyledSummaryItem} {
|
|
43
|
+
height: 3rem;
|
|
44
|
+
}
|
|
45
|
+
`;
|
|
46
|
+
});
|
|
47
|
+
StyledIncomingContainer.defaultProps = defaultThemeProp;
|
|
37
48
|
export const StyledHoldInfo = styled(StyledStatus) `
|
|
38
49
|
position: absolute;
|
|
39
50
|
top: 0;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CallControlPanel.styles.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,gBAAgB,EAChB,cAAc,EACd,YAAY,EACZ,UAAU,EACV,iBAAiB,EACjB,wBAAwB,EACxB,YAAY,EAEZ,iBAAiB,EACjB,aAAa,EACb,eAAe,EACf,IAAI,EACL,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,sDAAsD,CAAC;AACpF,OAAO,EAAE,cAAc,EAAE,MAAM,sDAAsD,CAAC;AAEtF,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAE9C,MAAM,CAAC,MAAM,
|
|
1
|
+
{"version":3,"file":"CallControlPanel.styles.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n defaultThemeProp,\n StyledBackdrop,\n StyledButton,\n StyledFlex,\n StyledProgressBar,\n StyledSummaryItemActions,\n StyledVisual,\n ProgressProps,\n StyledSummaryItem,\n StyledPrimary,\n StyledSecondary,\n Card\n} from '@pega/cosmos-react-core';\nimport { StyledStatus } from '@pega/cosmos-react-core/lib/components/Badges/Status';\nimport { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';\n\nimport { StyledStopWatch } from './StopWatch';\n\nexport const StyledCallContainer = styled.div(\n ({\n theme: {\n base: { spacing },\n components: { card }\n }\n }) => {\n return css`\n position: relative;\n > ${StyledBackdrop} {\n z-index: 0;\n }\n\n ${StyledSummaryItemActions} ${StyledFlex} + ${StyledButton} {\n margin-inline-start: ${spacing};\n }\n\n > ${StyledSummaryItem} {\n box-sizing: content-box;\n position: relative;\n height: 2rem;\n padding-inline: calc(2 * ${spacing});\n border-top: 0;\n > ${StyledVisual} {\n transform: rotate(50deg);\n }\n > ${StyledPrimary}, > ${StyledSecondary} {\n align-self: center;\n }\n }\n\n > ${StyledSummaryItem} ~ ${StyledSummaryItem} {\n border-top: 0.125rem solid ${card.background};\n }\n `;\n }\n);\n\nStyledCallContainer.defaultProps = defaultThemeProp;\n\nexport const StyledIncomingContainer = styled(StyledCallContainer)(({ theme }) => {\n return css`\n background-color: ${theme.base.colors.gray['extra-light']};\n border-radius: calc(0.5 * ${theme.base['border-radius']});\n\n > ${StyledSummaryItem} {\n height: 3rem;\n }\n `;\n});\n\nStyledIncomingContainer.defaultProps = defaultThemeProp;\n\nexport const StyledHoldInfo = styled(StyledStatus)`\n position: absolute;\n top: 0;\n transform: translateY(-50%);\n`;\n\nStyledHoldInfo.defaultProps = defaultThemeProp;\n\nexport const StyledStatusRow = styled.div(\n ({\n theme: {\n components: {\n input: { height }\n }\n }\n }) => {\n return css`\n > * {\n min-height: ${height};\n }\n > ${StyledStopWatch} {\n line-height: ${height};\n }\n `;\n }\n);\n\nStyledStatusRow.defaultProps = defaultThemeProp;\n\nexport const StyledSLAProgress = styled(StyledProgressBar)<\n ProgressProps & { slaDuration?: number; slaLevel?: number }\n>(({ theme, slaDuration = 0, slaLevel }) => {\n const {\n base: { colors }\n } = theme;\n\n const { bgColor = colors.red['extra-light'], fgColor = colors.red.light } =\n slaLevel !== undefined\n ? [\n { bgColor: colors.green['extra-light'], fgColor: colors.green.light },\n { bgColor: colors.orange['extra-light'], fgColor: colors.orange.light },\n { bgColor: colors.red['extra-light'], fgColor: colors.red.light }\n ][slaLevel]\n : { bgColor: colors.slate.light, fgColor: colors.slate.light };\n\n return css`\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: ${bgColor};\n border-radius: calc(0.5 * ${theme.base['border-radius']});\n\n /* Fancy way to restart the animation by changing it's name. */\n @keyframes FillIn-${slaLevel} {\n 0% {\n transform: translateX(-100%);\n }\n\n 100% {\n transform: translateX(0);\n }\n }\n\n &::before {\n background-color: ${fgColor};\n border-radius: 0;\n animation: FillIn-${slaLevel} ${slaDuration}s linear;\n }\n `;\n});\n\nStyledSLAProgress.defaultProps = defaultThemeProp;\n\nexport const StyledCalleePicker = styled(Card)`\n ${StyledTabPanel} {\n height: 24rem;\n }\n`;\n\nStyledCalleePicker.defaultProps = defaultThemeProp;\n"]}
|
|
@@ -50,6 +50,20 @@ export interface CallProps {
|
|
|
50
50
|
* Transfer reason options
|
|
51
51
|
*/
|
|
52
52
|
transferOptions: Readonly<TransferReasonOption[]>;
|
|
53
|
+
/**
|
|
54
|
+
* Interaction options
|
|
55
|
+
*/
|
|
56
|
+
interactionOptions?: Readonly<TransferReasonOption[]>;
|
|
57
|
+
}
|
|
58
|
+
export interface IncomingCallProps {
|
|
59
|
+
/** Call identifier. */
|
|
60
|
+
id: string;
|
|
61
|
+
/** Call participants. */
|
|
62
|
+
participant: CallParticipant;
|
|
63
|
+
/** Callback fired when the user ends the call. */
|
|
64
|
+
onRejectCall?: (id: CallProps['id']) => void;
|
|
65
|
+
/** Callback fired when the user accept the call. */
|
|
66
|
+
onAcceptCall: (id: CallProps['id']) => void;
|
|
53
67
|
}
|
|
54
68
|
export declare type UserAvailabilityStatus = 'available' | 'unavailable' | 'busy' | 'after_work' | 'logout';
|
|
55
69
|
export interface UserAvailabilityStatusOption {
|
|
@@ -88,7 +102,7 @@ export interface CallControlPanelProps extends BaseProps, NoChildrenProp {
|
|
|
88
102
|
* List of current calls. Having two or more not declared as "on hold" (onHoldSince defined) means there's
|
|
89
103
|
* a conference call.
|
|
90
104
|
*/
|
|
91
|
-
calls: CallProps[];
|
|
105
|
+
calls: (CallProps | IncomingCallProps)[];
|
|
92
106
|
/**
|
|
93
107
|
* Callback fired on new call made by the user. 'Add call' button is not present if callback is not passed.
|
|
94
108
|
* @param phoneNumber the number chosen.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CallControlPanel.types.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAEtF,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,iCAAiC,CAAC;AAC1D,OAAO,KAAK,EAAE,YAAY,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAEzE,MAAM,WAAW,eAAe;IAC9B,iBAAiB;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,qBAAqB;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,gCAAgC;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,eAAe,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;CAChF;AAED,MAAM,WAAW,SAAS;IACxB,uBAAuB;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,yCAAyC;IACzC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,yBAAyB;IACzB,YAAY,EAAE,eAAe,EAAE,CAAC;IAChC,sDAAsD;IACtD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yDAAyD;IACzD,aAAa,CAAC,EAAE,CAAC,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC9C,wDAAwD;IACxD,YAAY,EAAE,CAAC,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC5C,6DAA6D;IAC7D,eAAe,CAAC,EAAE,CAAC,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,EAAE,YAAY,EAAE,YAAY,KAAK,IAAI,CAAC;IAC5E,gEAAgE;IAChE,kBAAkB,CAAC,EAAE,CAAC,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,EAAE,YAAY,EAAE,YAAY,KAAK,IAAI,CAAC;IAC/E,+DAA+D;IAC/D,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC5C,mDAAmD;IACnD,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,8DAA8D;IAC9D,gBAAgB,CAAC,EAAE,CAAC,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,EAAE,YAAY,EAAE,YAAY,KAAK,IAAI,CAAC;IAC7E,8DAA8D;IAC9D,aAAa,CAAC,EAAE,CAAC,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC9C,kDAAkD;IAClD,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC1C;;OAEG;IACH,eAAe,EAAE,QAAQ,CAAC,oBAAoB,EAAE,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"CallControlPanel.types.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.types.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CallControlPanel.types.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { Ref } from 'react';\n\nimport type { BannerProps, BaseProps, NoChildrenProp } from '@pega/cosmos-react-core';\n\nimport type { FloatingPanelProps } from './FloatingPanel';\nimport { Contact } from './ContactList/ContactList.types';\nimport type { TransferData, TransferReasonOption } from './CallHandover';\n\nexport interface CallParticipant {\n /** Caller id. */\n id: string;\n /** Caller's name. */\n name: string;\n /** Additional caller's info. */\n info?: string;\n /** Callback fired when the user ends the call. */\n onHangUp?: (id: CallProps['id'], participantId: CallParticipant['id']) => void;\n}\n\nexport interface CallProps {\n /** Call identifier. */\n id: string;\n /** Timestamp when the call has begun. */\n startedAt: number | Date;\n /** Timestamp when the call has been put on hold. */\n onHoldSince?: number | Date;\n /** SLA configuration timeups. Array of numbers of seconds after which the particular SLA level\n * time is up.\n */\n slaConfig?: number[];\n /** Call participants. */\n participants: CallParticipant[];\n /** The flag whether the mic is muted on this call. */\n muted?: boolean;\n /** Callback fired when 'pause' icon has been clicked. */\n onPauseToggle?: (id: CallProps['id']) => void;\n /** Callback fired when 'mute' icon has been clicked. */\n onMuteToggle: (id: CallProps['id']) => void;\n /** Callback fired when 'Consult' action has been clicked. */\n onConsultAction?: (id: CallProps['id'], transferData: TransferData) => void;\n /** Callback fired when 'Conference' action has been clicked. */\n onConferenceAction?: (id: CallProps['id'], transferData: TransferData) => void;\n /** Callback fired when 'Merge call' action has been chosen. */\n onMergeCall?: (id: CallProps['id']) => void;\n /** Callback fired for every dial pad key press. */\n onDTMFPress?: (id: CallProps['id'], key: string) => void;\n /** Callback fired when 'Transfer' action has been clicked. */\n onTransferAction?: (id: CallProps['id'], transferData: TransferData) => void;\n /** Callback fired when 'Transfer' action has been clicked. */\n onHandOffCall?: (id: CallProps['id']) => void;\n /** Callback fired when the user ends the call. */\n onEndCall?: (id: CallProps['id']) => void;\n /**\n * Transfer reason options\n */\n transferOptions: Readonly<TransferReasonOption[]>;\n}\n\nexport type UserAvailabilityStatus = 'available' | 'unavailable' | 'busy' | 'after_work' | 'logout';\n\nexport interface UserAvailabilityStatusOption {\n readonly id: string;\n readonly label: string;\n readonly status: UserAvailabilityStatus;\n readonly disabled?: boolean;\n}\n\nexport interface InteractionTransferData {\n onCancel: () => void;\n onComplete: () => void;\n}\n\nexport interface CallControlPanelProps extends BaseProps, NoChildrenProp {\n /** The heading rendered. */\n heading: string;\n /**\n * User availability statuses.\n */\n statusOptions: Readonly<UserAvailabilityStatusOption[]>;\n /** User current status. */\n status: UserAvailabilityStatusOption['id'];\n /** Timestamp since the user is in the current status. */\n inStatusSince: number | Date;\n /** If true, the component will be draggable */\n draggable?: boolean;\n /**\n * Region for messages: errors, notifications, etc.\n */\n message?: Pick<BannerProps, 'id' | 'variant' | 'heading' | 'messages' | 'onDismiss'>;\n /**\n * Callback fired when user changes their status.\n * @param value new chosen status.\n */\n onStatusChange: (value: UserAvailabilityStatusOption['id']) => void;\n /**\n * List of current calls. Having two or more not declared as \"on hold\" (onHoldSince defined) means there's\n * a conference call.\n */\n calls: CallProps[];\n /**\n * Callback fired on new call made by the user. 'Add call' button is not present if callback is not passed.\n * @param phoneNumber the number chosen.\n */\n onAddCall?: (phoneNumber: string) => void;\n /**\n * Intraction transfer popup options.\n */\n interactionTransfer?: InteractionTransferData;\n /** An array of contacts objects. */\n contactsList: Contact[];\n /** Callback fired on adding/removing contact to/from favorites */\n onFavoriteToggle: (phoneNumber: string, favorite: boolean) => void;\n /** Flag driving panel visibility. */\n visible?: FloatingPanelProps['visible'];\n /** Reference to the root component. */\n ref?: Ref<HTMLDivElement>;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"CallControlPanel.types.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { Ref } from 'react';\n\nimport type { BannerProps, BaseProps, NoChildrenProp } from '@pega/cosmos-react-core';\n\nimport type { FloatingPanelProps } from './FloatingPanel';\nimport { Contact } from './ContactList/ContactList.types';\nimport type { TransferData, TransferReasonOption } from './CallHandover';\n\nexport interface CallParticipant {\n /** Caller id. */\n id: string;\n /** Caller's name. */\n name: string;\n /** Additional caller's info. */\n info?: string;\n /** Callback fired when the user ends the call. */\n onHangUp?: (id: CallProps['id'], participantId: CallParticipant['id']) => void;\n}\n\nexport interface CallProps {\n /** Call identifier. */\n id: string;\n /** Timestamp when the call has begun. */\n startedAt: number | Date;\n /** Timestamp when the call has been put on hold. */\n onHoldSince?: number | Date;\n /** SLA configuration timeups. Array of numbers of seconds after which the particular SLA level\n * time is up.\n */\n slaConfig?: number[];\n /** Call participants. */\n participants: CallParticipant[];\n /** The flag whether the mic is muted on this call. */\n muted?: boolean;\n /** Callback fired when 'pause' icon has been clicked. */\n onPauseToggle?: (id: CallProps['id']) => void;\n /** Callback fired when 'mute' icon has been clicked. */\n onMuteToggle: (id: CallProps['id']) => void;\n /** Callback fired when 'Consult' action has been clicked. */\n onConsultAction?: (id: CallProps['id'], transferData: TransferData) => void;\n /** Callback fired when 'Conference' action has been clicked. */\n onConferenceAction?: (id: CallProps['id'], transferData: TransferData) => void;\n /** Callback fired when 'Merge call' action has been chosen. */\n onMergeCall?: (id: CallProps['id']) => void;\n /** Callback fired for every dial pad key press. */\n onDTMFPress?: (id: CallProps['id'], key: string) => void;\n /** Callback fired when 'Transfer' action has been clicked. */\n onTransferAction?: (id: CallProps['id'], transferData: TransferData) => void;\n /** Callback fired when 'Transfer' action has been clicked. */\n onHandOffCall?: (id: CallProps['id']) => void;\n /** Callback fired when the user ends the call. */\n onEndCall?: (id: CallProps['id']) => void;\n /**\n * Transfer reason options\n */\n transferOptions: Readonly<TransferReasonOption[]>;\n /**\n * Interaction options\n */\n interactionOptions?: Readonly<TransferReasonOption[]>;\n}\n\nexport interface IncomingCallProps {\n /** Call identifier. */\n id: string;\n /** Call participants. */\n participant: CallParticipant;\n /** Callback fired when the user ends the call. */\n onRejectCall?: (id: CallProps['id']) => void;\n /** Callback fired when the user accept the call. */\n onAcceptCall: (id: CallProps['id']) => void;\n}\n\nexport type UserAvailabilityStatus = 'available' | 'unavailable' | 'busy' | 'after_work' | 'logout';\n\nexport interface UserAvailabilityStatusOption {\n readonly id: string;\n readonly label: string;\n readonly status: UserAvailabilityStatus;\n readonly disabled?: boolean;\n}\n\nexport interface InteractionTransferData {\n onCancel: () => void;\n onComplete: () => void;\n}\n\nexport interface CallControlPanelProps extends BaseProps, NoChildrenProp {\n /** The heading rendered. */\n heading: string;\n /**\n * User availability statuses.\n */\n statusOptions: Readonly<UserAvailabilityStatusOption[]>;\n /** User current status. */\n status: UserAvailabilityStatusOption['id'];\n /** Timestamp since the user is in the current status. */\n inStatusSince: number | Date;\n /** If true, the component will be draggable */\n draggable?: boolean;\n /**\n * Region for messages: errors, notifications, etc.\n */\n message?: Pick<BannerProps, 'id' | 'variant' | 'heading' | 'messages' | 'onDismiss'>;\n /**\n * Callback fired when user changes their status.\n * @param value new chosen status.\n */\n onStatusChange: (value: UserAvailabilityStatusOption['id']) => void;\n /**\n * List of current calls. Having two or more not declared as \"on hold\" (onHoldSince defined) means there's\n * a conference call.\n */\n calls: (CallProps | IncomingCallProps)[];\n /**\n * Callback fired on new call made by the user. 'Add call' button is not present if callback is not passed.\n * @param phoneNumber the number chosen.\n */\n onAddCall?: (phoneNumber: string) => void;\n /**\n * Intraction transfer popup options.\n */\n interactionTransfer?: InteractionTransferData;\n /** An array of contacts objects. */\n contactsList: Contact[];\n /** Callback fired on adding/removing contact to/from favorites */\n onFavoriteToggle: (phoneNumber: string, favorite: boolean) => void;\n /** Flag driving panel visibility. */\n visible?: FloatingPanelProps['visible'];\n /** Reference to the root component. */\n ref?: Ref<HTMLDivElement>;\n}\n"]}
|
|
@@ -11,5 +11,7 @@ export interface TransferData {
|
|
|
11
11
|
interaction: boolean;
|
|
12
12
|
/** Phone number to transfer the call to. */
|
|
13
13
|
phoneNumber: string;
|
|
14
|
+
/** Selected transferred interation option identifier. */
|
|
15
|
+
transferredInteractionId?: TransferReasonOption['id'];
|
|
14
16
|
}
|
|
15
17
|
//# sourceMappingURL=CallHandover.types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CallHandover.types.d.ts","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/CallHandover/CallHandover.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,oBAAoB;IACnC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,YAAY;IAC3B,yCAAyC;IACzC,MAAM,CAAC,EAAE,oBAAoB,CAAC,IAAI,CAAC,CAAC;IACpC,yBAAyB;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+EAA+E;IAC/E,WAAW,EAAE,OAAO,CAAC;IACrB,4CAA4C;IAC5C,WAAW,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"CallHandover.types.d.ts","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/CallHandover/CallHandover.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,oBAAoB;IACnC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,YAAY;IAC3B,yCAAyC;IACzC,MAAM,CAAC,EAAE,oBAAoB,CAAC,IAAI,CAAC,CAAC;IACpC,yBAAyB;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+EAA+E;IAC/E,WAAW,EAAE,OAAO,CAAC;IACrB,4CAA4C;IAC5C,WAAW,EAAE,MAAM,CAAC;IACpB,yDAAyD;IACzD,wBAAwB,CAAC,EAAE,oBAAoB,CAAC,IAAI,CAAC,CAAC;CACvD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CallHandover.types.js","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/CallHandover/CallHandover.types.ts"],"names":[],"mappings":"","sourcesContent":["export interface TransferReasonOption {\n id: string;\n label: string;\n}\n\nexport interface TransferData {\n /** Selected reason option identifier. */\n reason?: TransferReasonOption['id'];\n /** Transfer comments. */\n comments?: string;\n /** Flag determining where interaction should be transferred along the call. */\n interaction: boolean;\n /** Phone number to transfer the call to. */\n phoneNumber: string;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"CallHandover.types.js","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/CallHandover/CallHandover.types.ts"],"names":[],"mappings":"","sourcesContent":["export interface TransferReasonOption {\n id: string;\n label: string;\n}\n\nexport interface TransferData {\n /** Selected reason option identifier. */\n reason?: TransferReasonOption['id'];\n /** Transfer comments. */\n comments?: string;\n /** Flag determining where interaction should be transferred along the call. */\n interaction: boolean;\n /** Phone number to transfer the call to. */\n phoneNumber: string;\n /** Selected transferred interation option identifier. */\n transferredInteractionId?: TransferReasonOption['id'];\n}\n"]}
|
|
@@ -7,6 +7,7 @@ export interface CallHandoverDialogProps {
|
|
|
7
7
|
onCancel: () => void;
|
|
8
8
|
onSubmit: (data: TransferData) => void;
|
|
9
9
|
transferOptions: Readonly<TransferReasonOption[]>;
|
|
10
|
+
interactionOptions?: Readonly<TransferReasonOption[]>;
|
|
10
11
|
}
|
|
11
12
|
declare const CallHandoverDialog: FunctionComponent<CallHandoverDialogProps>;
|
|
12
13
|
export default CallHandoverDialog;
|
|
@@ -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,oBAAY,YAAY,GACpB,YAAY,GACZ,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,EAAE,QAAQ,CAAC,oBAAoB,EAAE,CAAC,CAAC;
|
|
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,oBAAY,YAAY,GACpB,YAAY,GACZ,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,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,CAwHlE,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
|
|
@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { useEffect, useRef } from 'react';
|
|
3
3
|
import { Text, Button, Card, CardContent, CardHeader, Icon, Popover, useEscape, useFocusTrap, useI18n, useOuterEvent, getFocusables } from '@pega/cosmos-react-core';
|
|
4
4
|
import CallHandoverForm from './CallHandoverForm';
|
|
5
|
-
const CallHandoverDialog = ({ target, type, onSubmit, onCancel, transferOptions }) => {
|
|
5
|
+
const CallHandoverDialog = ({ target, type, onSubmit, onCancel, transferOptions, interactionOptions }) => {
|
|
6
6
|
const popoverRef = useRef(null);
|
|
7
7
|
const t = useI18n();
|
|
8
8
|
useOuterEvent('mousedown', [popoverRef], onCancel);
|
|
@@ -16,23 +16,23 @@ const CallHandoverDialog = ({ target, type, onSubmit, onCancel, transferOptions
|
|
|
16
16
|
switch (type) {
|
|
17
17
|
case 'conference':
|
|
18
18
|
dialogHeading = t('call_panel_conference_heading');
|
|
19
|
-
dialogContent = (_jsx(CallHandoverForm, { onCancel: onCancel, variant: 'call', submitButtonText: t('call_panel_conference_submit'), onSubmit: onSubmit, transferOptions: transferOptions }));
|
|
19
|
+
dialogContent = (_jsx(CallHandoverForm, { onCancel: onCancel, variant: 'call', submitButtonText: t('call_panel_conference_submit'), onSubmit: onSubmit, transferOptions: transferOptions, interactionOptions: interactionOptions }));
|
|
20
20
|
break;
|
|
21
21
|
case 'consultCallOnly':
|
|
22
22
|
dialogHeading = t('call_panel_consult_with_call_heading');
|
|
23
|
-
dialogContent = (_jsx(CallHandoverForm, { onCancel: onCancel, variant: 'call', submitButtonText: t('call_panel_consult_call_submit'), onSubmit: onSubmit, transferOptions: transferOptions }));
|
|
23
|
+
dialogContent = (_jsx(CallHandoverForm, { onCancel: onCancel, variant: 'call', submitButtonText: t('call_panel_consult_call_submit'), onSubmit: onSubmit, transferOptions: transferOptions, interactionOptions: interactionOptions }));
|
|
24
24
|
break;
|
|
25
25
|
case 'consultWithInteractions':
|
|
26
26
|
dialogHeading = t('call_panel_consult_with_call_and_interactions_heading');
|
|
27
|
-
dialogContent = (_jsx(CallHandoverForm, { onCancel: onCancel, variant: 'call+interaction', submitButtonText: t('call_panel_consult_call_submit'), onSubmit: onSubmit, transferOptions: transferOptions }));
|
|
27
|
+
dialogContent = (_jsx(CallHandoverForm, { onCancel: onCancel, variant: 'call+interaction', submitButtonText: t('call_panel_consult_call_submit'), onSubmit: onSubmit, transferOptions: transferOptions, interactionOptions: interactionOptions }));
|
|
28
28
|
break;
|
|
29
29
|
case 'transferCallOnly':
|
|
30
30
|
dialogHeading = t('call_panel_transfer_with_call_heading');
|
|
31
|
-
dialogContent = (_jsx(CallHandoverForm, { submitButtonText: t('call_panel_transfer_call_submit'), onCancel: onCancel, variant: 'call', onSubmit: onSubmit, transferOptions: transferOptions }));
|
|
31
|
+
dialogContent = (_jsx(CallHandoverForm, { submitButtonText: t('call_panel_transfer_call_submit'), onCancel: onCancel, variant: 'call', onSubmit: onSubmit, transferOptions: transferOptions, interactionOptions: interactionOptions }));
|
|
32
32
|
break;
|
|
33
33
|
case 'transferWithInteractions':
|
|
34
34
|
dialogHeading = t('call_panel_transfer_with_call_and_interactions_heading');
|
|
35
|
-
dialogContent = (_jsx(CallHandoverForm, { submitButtonText: t('call_panel_transfer_call_submit'), onCancel: onCancel, variant: 'call+interaction', onSubmit: onSubmit, transferOptions: transferOptions }));
|
|
35
|
+
dialogContent = (_jsx(CallHandoverForm, { submitButtonText: t('call_panel_transfer_call_submit'), onCancel: onCancel, variant: 'call+interaction', onSubmit: onSubmit, transferOptions: transferOptions, interactionOptions: interactionOptions }));
|
|
36
36
|
break;
|
|
37
37
|
default:
|
|
38
38
|
dialogHeading = '';
|
|
@@ -1 +1 @@
|
|
|
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;
|
|
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 | 'conference'\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 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}: 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 'conference':\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 />\n );\n break;\n case 'consultCallOnly':\n dialogHeading = t('call_panel_consult_with_call_heading');\n dialogContent = (\n <CallHandoverForm\n onCancel={onCancel}\n variant='call'\n submitButtonText={t('call_panel_consult_call_submit')}\n onSubmit={onSubmit}\n transferOptions={transferOptions}\n interactionOptions={interactionOptions}\n />\n );\n break;\n case 'consultWithInteractions':\n dialogHeading = t('call_panel_consult_with_call_and_interactions_heading');\n dialogContent = (\n <CallHandoverForm\n onCancel={onCancel}\n variant='call+interaction'\n submitButtonText={t('call_panel_consult_call_submit')}\n onSubmit={onSubmit}\n transferOptions={transferOptions}\n interactionOptions={interactionOptions}\n />\n );\n break;\n case 'transferCallOnly':\n dialogHeading = t('call_panel_transfer_with_call_heading');\n dialogContent = (\n <CallHandoverForm\n submitButtonText={t('call_panel_transfer_call_submit')}\n onCancel={onCancel}\n variant='call'\n onSubmit={onSubmit}\n transferOptions={transferOptions}\n interactionOptions={interactionOptions}\n />\n );\n break;\n case 'transferWithInteractions':\n dialogHeading = t('call_panel_transfer_with_call_and_interactions_heading');\n dialogContent = (\n <CallHandoverForm\n submitButtonText={t('call_panel_transfer_call_submit')}\n onCancel={onCancel}\n variant='call+interaction'\n onSubmit={onSubmit}\n transferOptions={transferOptions}\n interactionOptions={interactionOptions}\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"]}
|
|
@@ -10,6 +10,8 @@ export interface CallHandoverFormProps {
|
|
|
10
10
|
onCancel: () => void;
|
|
11
11
|
/** Transfer reason options. */
|
|
12
12
|
transferOptions: Readonly<TransferReasonOption[]>;
|
|
13
|
+
/** Interaction options. */
|
|
14
|
+
interactionOptions?: Readonly<TransferReasonOption[]>;
|
|
13
15
|
/** Reference to the root component. */
|
|
14
16
|
ref?: Ref<HTMLDivElement>;
|
|
15
17
|
/** Variant of component. */
|
|
@@ -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,EAAyB,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"CallHandoverForm.d.ts","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/CallHandover/CallHandoverForm.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,GAAG,EAAyB,MAAM,OAAO,CAAC;AAmBtE,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,+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,cAAc,CAAC,CAAC;IAC1B,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,CAwG9D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { jsx as _jsx,
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { useState } from 'react';
|
|
3
3
|
import styled from 'styled-components';
|
|
4
|
-
import { Button, registerIcon, defaultThemeProp, useI18n, TextArea, ComboBox, Form } from '@pega/cosmos-react-core';
|
|
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';
|
|
6
6
|
import * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';
|
|
7
7
|
import CalleePicker from '../ContactList/CalleePicker';
|
|
@@ -14,10 +14,11 @@ export const StyledCallHandoverForm = styled(Form) `
|
|
|
14
14
|
}
|
|
15
15
|
`;
|
|
16
16
|
StyledCallHandoverForm.defaultProps = defaultThemeProp;
|
|
17
|
-
const CallHandoverForm = ({ onCancel, onSubmit, transferOptions, variant, submitButtonText }) => {
|
|
17
|
+
const CallHandoverForm = ({ onCancel, onSubmit, transferOptions, variant, submitButtonText, interactionOptions }) => {
|
|
18
18
|
const t = useI18n();
|
|
19
19
|
const [selectedReason, setSelectedReason] = useState();
|
|
20
20
|
const [selectedContact, setSelectedContact] = useState();
|
|
21
|
+
const [selectedInteraction, setSelectedInteraction] = useState();
|
|
21
22
|
const [comments, setComments] = useState('');
|
|
22
23
|
return (_jsxs(StyledCallHandoverForm, { actions: _jsxs(_Fragment, { children: [_jsx(Button, { variant: 'secondary', onClick: onCancel, children: t('cancel') }), _jsx(Button, { variant: 'primary', disabled: !(selectedContact &&
|
|
23
24
|
(variant === 'call+interaction' ? selectedReason && comments : true)), onClick: () => {
|
|
@@ -27,9 +28,21 @@ const CallHandoverForm = ({ onCancel, onSubmit, transferOptions, variant, submit
|
|
|
27
28
|
reason: selectedReason?.id,
|
|
28
29
|
comments,
|
|
29
30
|
interaction: variant === 'call+interaction',
|
|
30
|
-
phoneNumber: selectedContact
|
|
31
|
+
phoneNumber: selectedContact,
|
|
32
|
+
transferredInteractionId: selectedInteraction?.id
|
|
31
33
|
});
|
|
32
|
-
}, children: submitButtonText })] }), children: [variant === 'call+interaction' && (_jsxs(
|
|
34
|
+
}, children: submitButtonText })] }), children: [variant === 'call+interaction' && (_jsxs(Flex, { container: { direction: 'column', itemGap: 1 }, children: [interactionOptions && (_jsx(ComboBox, { label: t('call_panel_handover_interaction_label'), selected: {
|
|
35
|
+
items: selectedInteraction
|
|
36
|
+
? { id: selectedInteraction.id, text: selectedInteraction.label }
|
|
37
|
+
: undefined
|
|
38
|
+
}, menu: {
|
|
39
|
+
items: interactionOptions.map(({ id, label }) => ({
|
|
40
|
+
id,
|
|
41
|
+
primary: label,
|
|
42
|
+
selected: id === selectedInteraction?.id
|
|
43
|
+
})),
|
|
44
|
+
onItemClick: id => setSelectedInteraction(interactionOptions.find(option => option.id === id))
|
|
45
|
+
} })), _jsx(ComboBox, { label: t('call_panel_handover_reason_label'), required: true, selected: {
|
|
33
46
|
items: selectedReason
|
|
34
47
|
? { id: selectedReason.id, text: selectedReason.label }
|
|
35
48
|
: undefined
|
|
@@ -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;AACtE,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EACL,MAAM,EACN,YAAY,EACZ,gBAAgB,EAChB,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,IAAI,EACL,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,cAAc,EAAE,MAAM,sDAAsD,CAAC;AACtF,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAG1F,OAAO,YAAY,MAAM,6BAA6B,CAAC;AAIvD,YAAY,CAAC,SAAS,CAAC,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 } 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 /** Transfer reason options. */\n transferOptions: Readonly<TransferReasonOption[]>;\n /** Interaction options. */\n interactionOptions?: Readonly<TransferReasonOption[]>;\n /** Reference to the root component. */\n ref?: Ref<HTMLDivElement>;\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> = ({\n onCancel,\n onSubmit,\n transferOptions,\n variant,\n submitButtonText,\n interactionOptions\n}: CallHandoverFormProps) => {\n const t = useI18n();\n\n const [selectedReason, setSelectedReason] = useState<TransferReasonOption>();\n const [selectedContact, setSelectedContact] = useState<Contact['phoneNumber']>();\n const [selectedInteraction, setSelectedInteraction] = useState<TransferReasonOption>();\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={\n !(\n selectedContact &&\n (variant === 'call+interaction' ? selectedReason && comments : true)\n )\n }\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 >\n {variant === 'call+interaction' && (\n <Flex container={{ direction: 'column', itemGap: 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 required\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 => 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\nexport default CallHandoverForm;\n"]}
|
|
@@ -1,6 +1,34 @@
|
|
|
1
1
|
import { FunctionComponent, Ref } from 'react';
|
|
2
|
-
import { ForwardProps } from '@pega/cosmos-react-core';
|
|
2
|
+
import { BannerProps, ForwardProps } from '@pega/cosmos-react-core';
|
|
3
3
|
import { FloatingPanelProps } from './FloatingPanel';
|
|
4
|
+
export interface InteractionOption {
|
|
5
|
+
id: string;
|
|
6
|
+
label: string;
|
|
7
|
+
}
|
|
8
|
+
export interface AttachInteractionData {
|
|
9
|
+
/** Selected reason option identifier. */
|
|
10
|
+
reason?: InteractionOption['id'];
|
|
11
|
+
/** Interaction comments. */
|
|
12
|
+
comments?: string;
|
|
13
|
+
/** Selected interation option identifier. */
|
|
14
|
+
interactionOption?: InteractionOption['id'];
|
|
15
|
+
}
|
|
16
|
+
export interface AttachInteractionFormProps {
|
|
17
|
+
/** The heading rendered. */
|
|
18
|
+
heading: string;
|
|
19
|
+
/** Callback fired when 'Submit' interaction action has been clicked. */
|
|
20
|
+
onAddInteraction: (data: AttachInteractionData) => void;
|
|
21
|
+
/** Callback fired when 'Cancel' interaction action has been clicked. */
|
|
22
|
+
onCancel: () => void;
|
|
23
|
+
/** Reason options. */
|
|
24
|
+
reasonOptions: Readonly<InteractionOption[]>;
|
|
25
|
+
/** Interaction options. */
|
|
26
|
+
interactionOptions?: Readonly<InteractionOption[]>;
|
|
27
|
+
/**
|
|
28
|
+
* Region for messages: errors, notifications, etc.
|
|
29
|
+
*/
|
|
30
|
+
message?: Pick<BannerProps, 'id' | 'variant' | 'heading' | 'messages' | 'onDismiss'>;
|
|
31
|
+
}
|
|
4
32
|
export interface ExternalCTIProps {
|
|
5
33
|
/** The heading rendered. */
|
|
6
34
|
heading: string;
|
|
@@ -15,7 +43,12 @@ export interface ExternalCTIProps {
|
|
|
15
43
|
};
|
|
16
44
|
/** Reference to the container. */
|
|
17
45
|
ref?: Ref<HTMLDivElement>;
|
|
46
|
+
/**
|
|
47
|
+
* Attach intraction popup options.
|
|
48
|
+
*/
|
|
49
|
+
attachInteractionProps?: AttachInteractionFormProps;
|
|
18
50
|
}
|
|
51
|
+
export declare const StyledInteractionForm: import("styled-components").StyledComponent<import("react").FC<import("@pega/cosmos-react-core").FormProps & ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
|
|
19
52
|
declare const ExternalCTI: FunctionComponent<ExternalCTIProps & ForwardProps>;
|
|
20
53
|
export default ExternalCTI;
|
|
21
54
|
//# sourceMappingURL=ExternalCTI.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExternalCTI.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/ExternalCTI.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"ExternalCTI.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/ExternalCTI.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,iBAAiB,EAEjB,GAAG,EAGJ,MAAM,OAAO,CAAC;AAGf,OAAO,EACL,WAAW,EAGX,YAAY,EAQb,MAAM,yBAAyB,CAAC;AAEjC,OAAsB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAEpE,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,qBAAqB;IACpC,yCAAyC;IACzC,MAAM,CAAC,EAAE,iBAAiB,CAAC,IAAI,CAAC,CAAC;IACjC,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6CAA6C;IAC7C,iBAAiB,CAAC,EAAE,iBAAiB,CAAC,IAAI,CAAC,CAAC;CAC7C;AAED,MAAM,WAAW,0BAA0B;IACzC,4BAA4B;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,wEAAwE;IACxE,gBAAgB,EAAE,CAAC,IAAI,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACxD,wEAAwE;IACxE,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,sBAAsB;IACtB,aAAa,EAAE,QAAQ,CAAC,iBAAiB,EAAE,CAAC,CAAC;IAC7C,2BAA2B;IAC3B,kBAAkB,CAAC,EAAE,QAAQ,CAAC,iBAAiB,EAAE,CAAC,CAAC;IACnD;;OAEG;IACH,OAAO,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,WAAW,CAAC,CAAC;CACtF;AAED,MAAM,WAAW,gBAAgB;IAC/B,4BAA4B;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,kBAAkB,CAAC,SAAS,CAAC,CAAC;IACxC,oCAAoC;IACpC,IAAI,CAAC,EAAE;QACL,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,kCAAkC;IAClC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B;;OAEG;IACH,sBAAsB,CAAC,EAAE,0BAA0B,CAAC;CACrD;AA8BD,eAAO,MAAM,qBAAqB,kLAUjC,CAAC;AAIF,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAgInE,CAAC;AAEF,eAAe,WAAW,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { forwardRef } from 'react';
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef, useRef, useState } from 'react';
|
|
3
3
|
import styled, { css } from 'styled-components';
|
|
4
|
-
import { defaultThemeProp } from '@pega/cosmos-react-core';
|
|
4
|
+
import { defaultThemeProp, Flex, useI18n, Dialog, useDialog, Form, Banner, ComboBox, TextArea } from '@pega/cosmos-react-core';
|
|
5
5
|
import FloatingPanel from './FloatingPanel';
|
|
6
6
|
const StyledExternalCTIPanel = styled(FloatingPanel)(({ theme: { components: { card: { 'border-radius': borderRadius } } } }) => {
|
|
7
7
|
return css `
|
|
@@ -20,14 +20,64 @@ const StyledCTIContainer = styled.div `
|
|
|
20
20
|
height: var(--cti-container-height, auto);
|
|
21
21
|
overflow-y: auto;
|
|
22
22
|
`;
|
|
23
|
+
export const StyledInteractionForm = styled(Form)(({ theme: { base: { 'content-width': contentWidth } } }) => {
|
|
24
|
+
return css `
|
|
25
|
+
min-width: ${contentWidth.sm};
|
|
26
|
+
`;
|
|
27
|
+
});
|
|
23
28
|
StyledCTIContainer.defaultProps = defaultThemeProp;
|
|
24
|
-
const ExternalCTI = forwardRef(({ heading, draggable = false, visible = true, size }, ref) => {
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
+
const ExternalCTI = forwardRef(({ heading, draggable = false, visible = true, size, attachInteractionProps }, ref) => {
|
|
30
|
+
const t = useI18n();
|
|
31
|
+
const interactionButtonRef = useRef(null);
|
|
32
|
+
const [selectedReason, setSelectedReason] = useState();
|
|
33
|
+
const [selectedInteraction, setSelectedInteraction] = useState();
|
|
34
|
+
const [comments, setComments] = useState('');
|
|
35
|
+
const { target, events } = useDialog();
|
|
36
|
+
return (_jsxs(StyledExternalCTIPanel, { heading: heading, draggable: draggable, visible: visible, actions: attachInteractionProps
|
|
37
|
+
? [
|
|
38
|
+
{
|
|
39
|
+
id: 'add-interaction',
|
|
40
|
+
text: attachInteractionProps.heading,
|
|
41
|
+
icon: 'plus',
|
|
42
|
+
ref: interactionButtonRef,
|
|
43
|
+
...events
|
|
29
44
|
}
|
|
30
|
-
|
|
45
|
+
]
|
|
46
|
+
: undefined, children: [_jsx(StyledCTIContainer, { style: size
|
|
47
|
+
? {
|
|
48
|
+
'--cti-container-width': `${size.width}px`,
|
|
49
|
+
'--cti-container-height': `${size.height}px`
|
|
50
|
+
}
|
|
51
|
+
: undefined, ref: ref }), attachInteractionProps && (_jsx(Dialog, { target: target, heading: attachInteractionProps.heading, placement: 'top-end', onClose: attachInteractionProps.onCancel, onSubmit: ({ close }) => {
|
|
52
|
+
attachInteractionProps.onAddInteraction({
|
|
53
|
+
reason: selectedReason?.id,
|
|
54
|
+
comments,
|
|
55
|
+
interactionOption: selectedInteraction?.id
|
|
56
|
+
});
|
|
57
|
+
close();
|
|
58
|
+
}, children: _jsx(StyledInteractionForm, { children: _jsxs(Flex, { container: { direction: 'column', itemGap: 1 }, children: [attachInteractionProps.message && _jsx(Banner, { ...attachInteractionProps.message }), attachInteractionProps.interactionOptions && (_jsx(ComboBox, { label: t('call_panel_handover_interaction_label'), selected: {
|
|
59
|
+
items: selectedInteraction
|
|
60
|
+
? { id: selectedInteraction.id, text: selectedInteraction.label }
|
|
61
|
+
: undefined
|
|
62
|
+
}, menu: {
|
|
63
|
+
items: attachInteractionProps.interactionOptions.map(({ id, label }) => ({
|
|
64
|
+
id,
|
|
65
|
+
primary: label,
|
|
66
|
+
selected: id === selectedInteraction?.id
|
|
67
|
+
})),
|
|
68
|
+
onItemClick: id => setSelectedInteraction(attachInteractionProps.interactionOptions?.find(option => option.id === id))
|
|
69
|
+
} })), attachInteractionProps.reasonOptions && (_jsx(ComboBox, { label: t('call_panel_handover_reason_label'), required: true, selected: {
|
|
70
|
+
items: selectedReason
|
|
71
|
+
? { id: selectedReason.id, text: selectedReason.label }
|
|
72
|
+
: undefined
|
|
73
|
+
}, menu: {
|
|
74
|
+
items: attachInteractionProps.reasonOptions?.map(({ id, label }) => ({
|
|
75
|
+
id,
|
|
76
|
+
primary: label,
|
|
77
|
+
selected: id === selectedReason?.id
|
|
78
|
+
})),
|
|
79
|
+
onItemClick: id => setSelectedReason(attachInteractionProps.reasonOptions?.find(option => option.id === id))
|
|
80
|
+
} })), _jsx(TextArea, { label: t('call_panel_handover_comments_label'), displayCharCount: true, maxLength: 300, value: comments, onChange: (e) => setComments(e.target.value) })] }) }) }))] }));
|
|
31
81
|
});
|
|
32
82
|
export default ExternalCTI;
|
|
33
83
|
//# sourceMappingURL=ExternalCTI.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExternalCTI.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/ExternalCTI.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAiB,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC3F,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAgB,MAAM,yBAAyB,CAAC;AAEzE,OAAO,aAAqC,MAAM,iBAAiB,CAAC;AAkBpE,MAAM,sBAAsB,GAAG,MAAM,CAAC,aAAa,CAAC,CAClD,CAAC,EACC,KAAK,EAAE,EACL,UAAU,EAAE,EACV,IAAI,EAAE,EAAE,eAAe,EAAE,YAAY,EAAE,EACxC,EACF,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;;;;mCAKqB,YAAY;iCACd,YAAY;;KAExC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAIpC,CAAC;AAEF,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,WAAW,GAAuD,UAAU,CAChF,CACE,EAAE,OAAO,EAAE,SAAS,GAAG,KAAK,EAAE,OAAO,GAAG,IAAI,EAAE,IAAI,EAAqC,EACvF,GAA4B,EAC5B,EAAE;IACF,OAAO,CACL,KAAC,sBAAsB,IAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,YAC9E,KAAC,kBAAkB,IACjB,KAAK,EACH,IAAI;gBACF,CAAC,CAAE;oBACC,uBAAuB,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI;oBAC1C,wBAAwB,EAAE,GAAG,IAAI,CAAC,MAAM,IAAI;iBAC3B;gBACrB,CAAC,CAAC,SAAS,EAEf,GAAG,EAAE,GAAG,GACR,GACqB,CAC1B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { CSSProperties, forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, ForwardProps } from '@pega/cosmos-react-core';\n\nimport FloatingPanel, { FloatingPanelProps } from './FloatingPanel';\n\nexport interface ExternalCTIProps {\n /** The heading rendered. */\n heading: string;\n /** If true, the component will be draggable. */\n draggable?: boolean;\n /** If true, the component will be visible. */\n visible?: FloatingPanelProps['visible'];\n /** Container element size in px. */\n size?: {\n width: number;\n height: number;\n };\n /** Reference to the container. */\n ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledExternalCTIPanel = styled(FloatingPanel)(\n ({\n theme: {\n components: {\n card: { 'border-radius': borderRadius }\n }\n }\n }) => {\n return css`\n width: auto;\n iframe {\n border: transparent;\n display: block;\n border-end-start-radius: ${borderRadius};\n border-end-end-radius: ${borderRadius};\n }\n `;\n }\n);\n\nStyledExternalCTIPanel.defaultProps = defaultThemeProp;\n\nconst StyledCTIContainer = styled.div`\n width: var(--cti-container-width, auto);\n height: var(--cti-container-height, auto);\n overflow-y: auto;\n`;\n\nStyledCTIContainer.defaultProps = defaultThemeProp;\n\nconst ExternalCTI: FunctionComponent<ExternalCTIProps & ForwardProps> = forwardRef(\n (\n { heading, draggable = false, visible = true, size }: PropsWithoutRef<ExternalCTIProps>,\n ref: ExternalCTIProps['ref']\n ) => {\n return (\n <StyledExternalCTIPanel heading={heading} draggable={draggable} visible={visible}>\n <StyledCTIContainer\n style={\n size\n ? ({\n '--cti-container-width': `${size.width}px`,\n '--cti-container-height': `${size.height}px`\n } as CSSProperties)\n : undefined\n }\n ref={ref}\n />\n </StyledExternalCTIPanel>\n );\n }\n);\n\nexport default ExternalCTI;\n"]}
|
|
1
|
+
{"version":3,"file":"ExternalCTI.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/ExternalCTI.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n ChangeEvent,\n CSSProperties,\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n useRef,\n useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n BannerProps,\n defaultThemeProp,\n Flex,\n ForwardProps,\n useI18n,\n Dialog,\n useDialog,\n Form,\n Banner,\n ComboBox,\n TextArea\n} from '@pega/cosmos-react-core';\n\nimport FloatingPanel, { FloatingPanelProps } from './FloatingPanel';\n\nexport interface InteractionOption {\n id: string;\n label: string;\n}\n\nexport interface AttachInteractionData {\n /** Selected reason option identifier. */\n reason?: InteractionOption['id'];\n /** Interaction comments. */\n comments?: string;\n /** Selected interation option identifier. */\n interactionOption?: InteractionOption['id'];\n}\n\nexport interface AttachInteractionFormProps {\n /** The heading rendered. */\n heading: string;\n /** Callback fired when 'Submit' interaction action has been clicked. */\n onAddInteraction: (data: AttachInteractionData) => void;\n /** Callback fired when 'Cancel' interaction action has been clicked. */\n onCancel: () => void;\n /** Reason options. */\n reasonOptions: Readonly<InteractionOption[]>;\n /** Interaction options. */\n interactionOptions?: Readonly<InteractionOption[]>;\n /**\n * Region for messages: errors, notifications, etc.\n */\n message?: Pick<BannerProps, 'id' | 'variant' | 'heading' | 'messages' | 'onDismiss'>;\n}\n\nexport interface ExternalCTIProps {\n /** The heading rendered. */\n heading: string;\n /** If true, the component will be draggable. */\n draggable?: boolean;\n /** If true, the component will be visible. */\n visible?: FloatingPanelProps['visible'];\n /** Container element size in px. */\n size?: {\n width: number;\n height: number;\n };\n /** Reference to the container. */\n ref?: Ref<HTMLDivElement>;\n /**\n * Attach intraction popup options.\n */\n attachInteractionProps?: AttachInteractionFormProps;\n}\n\nconst StyledExternalCTIPanel = styled(FloatingPanel)(\n ({\n theme: {\n components: {\n card: { 'border-radius': borderRadius }\n }\n }\n }) => {\n return css`\n width: auto;\n iframe {\n border: transparent;\n display: block;\n border-end-start-radius: ${borderRadius};\n border-end-end-radius: ${borderRadius};\n }\n `;\n }\n);\n\nStyledExternalCTIPanel.defaultProps = defaultThemeProp;\n\nconst StyledCTIContainer = styled.div`\n width: var(--cti-container-width, auto);\n height: var(--cti-container-height, auto);\n overflow-y: auto;\n`;\n\nexport const StyledInteractionForm = styled(Form)(\n ({\n theme: {\n base: { 'content-width': contentWidth }\n }\n }) => {\n return css`\n min-width: ${contentWidth.sm};\n `;\n }\n);\n\nStyledCTIContainer.defaultProps = defaultThemeProp;\n\nconst ExternalCTI: FunctionComponent<ExternalCTIProps & ForwardProps> = forwardRef(\n (\n {\n heading,\n draggable = false,\n visible = true,\n size,\n attachInteractionProps\n }: PropsWithoutRef<ExternalCTIProps>,\n ref: ExternalCTIProps['ref']\n ) => {\n const t = useI18n();\n const interactionButtonRef = useRef<HTMLButtonElement>(null);\n const [selectedReason, setSelectedReason] = useState<InteractionOption>();\n const [selectedInteraction, setSelectedInteraction] = useState<InteractionOption>();\n const [comments, setComments] = useState('');\n const { target, events } = useDialog();\n\n return (\n <StyledExternalCTIPanel\n heading={heading}\n draggable={draggable}\n visible={visible}\n actions={\n attachInteractionProps\n ? [\n {\n id: 'add-interaction',\n text: attachInteractionProps.heading,\n icon: 'plus',\n ref: interactionButtonRef,\n ...events\n }\n ]\n : undefined\n }\n >\n <StyledCTIContainer\n style={\n size\n ? ({\n '--cti-container-width': `${size.width}px`,\n '--cti-container-height': `${size.height}px`\n } as CSSProperties)\n : undefined\n }\n ref={ref}\n />\n {attachInteractionProps && (\n <Dialog\n target={target}\n heading={attachInteractionProps.heading}\n placement='top-end'\n onClose={attachInteractionProps.onCancel}\n onSubmit={({ close }) => {\n attachInteractionProps.onAddInteraction({\n reason: selectedReason?.id,\n comments,\n interactionOption: selectedInteraction?.id\n });\n close();\n }}\n >\n <StyledInteractionForm>\n <Flex container={{ direction: 'column', itemGap: 1 }}>\n {attachInteractionProps.message && <Banner {...attachInteractionProps.message} />}\n\n {attachInteractionProps.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: attachInteractionProps.interactionOptions.map(({ id, label }) => ({\n id,\n primary: label,\n selected: id === selectedInteraction?.id\n })),\n onItemClick: id =>\n setSelectedInteraction(\n attachInteractionProps.interactionOptions?.find(\n option => option.id === id\n )\n )\n }}\n />\n )}\n\n {attachInteractionProps.reasonOptions && (\n <ComboBox\n label={t('call_panel_handover_reason_label')}\n required\n selected={{\n items: selectedReason\n ? { id: selectedReason.id, text: selectedReason.label }\n : undefined\n }}\n menu={{\n items: attachInteractionProps.reasonOptions?.map(({ id, label }) => ({\n id,\n primary: label,\n selected: id === selectedReason?.id\n })),\n onItemClick: id =>\n setSelectedReason(\n attachInteractionProps.reasonOptions?.find(option => option.id === id)\n )\n }}\n />\n )}\n\n <TextArea\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 </StyledInteractionForm>\n </Dialog>\n )}\n </StyledExternalCTIPanel>\n );\n }\n);\n\nexport default ExternalCTI;\n"]}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { FunctionComponent } from 'react';
|
|
2
|
+
import { ForwardProps } from '@pega/cosmos-react-core';
|
|
3
|
+
import type { IncomingCallProps } from './CallControlPanel.types';
|
|
4
|
+
declare const IncomingCall: FunctionComponent<IncomingCallProps & ForwardProps>;
|
|
5
|
+
export default IncomingCall;
|
|
6
|
+
//# sourceMappingURL=IncomingCall.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"IncomingCall.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/IncomingCall.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAGL,YAAY,EAKb,MAAM,yBAAyB,CAAC;AAWjC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAalE,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CA6BrE,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { Button, Flex, registerIcon, SummaryItem, Text, useI18n } from '@pega/cosmos-react-core';
|
|
3
|
+
import * as arrowUpIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-up.icon';
|
|
4
|
+
import * as micSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/mic-solid.icon';
|
|
5
|
+
import * as micOffSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/mic-off-solid.icon';
|
|
6
|
+
import * as playSoldIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/play-solid.icon';
|
|
7
|
+
import * as pauseSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/pause-solid.icon';
|
|
8
|
+
import * as phoneSplitSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-split-solid.icon';
|
|
9
|
+
import * as phoneOutSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-out-solid.icon';
|
|
10
|
+
import * as phoneHangupSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-hangup-solid.icon';
|
|
11
|
+
import { StyledIncomingContainer } from './CallControlPanel.styles';
|
|
12
|
+
registerIcon(arrowUpIcon, micSolidIcon, micOffSolidIcon, playSoldIcon, pauseSolidIcon, phoneSplitSolidIcon, phoneOutSolidIcon, phoneHangupSolidIcon);
|
|
13
|
+
const IncomingCall = ({ id: callId, participant, onAcceptCall }) => {
|
|
14
|
+
const t = useI18n();
|
|
15
|
+
return (_jsx(StyledIncomingContainer, { children: _jsx(SummaryItem, { overflowStrategy: 'ellipsis', primary: _jsx(Text, { variant: 'secondary', children: t('call_panel_incoming_call') }), secondary: _jsxs(_Fragment, { children: [_jsxs(Text, { variant: 'primary', children: [participant.name, " "] }), ' ', participant.info && _jsx(Text, { variant: 'secondary', children: participant.info })] }), actions: _jsx(Flex, { container: { wrap: 'nowrap' }, children: _jsx(Button, { variant: 'primary', onClick: () => onAcceptCall?.(callId), children: t('accept') }) }) }, participant.id) }));
|
|
16
|
+
};
|
|
17
|
+
export default IncomingCall;
|
|
18
|
+
//# sourceMappingURL=IncomingCall.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"IncomingCall.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/IncomingCall.tsx"],"names":[],"mappings":";AAEA,OAAO,EACL,MAAM,EACN,IAAI,EAEJ,YAAY,EACZ,WAAW,EACX,IAAI,EACJ,OAAO,EACR,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,WAAW,MAAM,iEAAiE,CAAC;AAC/F,OAAO,KAAK,YAAY,MAAM,kEAAkE,CAAC;AACjG,OAAO,KAAK,eAAe,MAAM,sEAAsE,CAAC;AACxG,OAAO,KAAK,YAAY,MAAM,mEAAmE,CAAC;AAClG,OAAO,KAAK,cAAc,MAAM,oEAAoE,CAAC;AACrG,OAAO,KAAK,mBAAmB,MAAM,0EAA0E,CAAC;AAChH,OAAO,KAAK,iBAAiB,MAAM,wEAAwE,CAAC;AAC5G,OAAO,KAAK,oBAAoB,MAAM,2EAA2E,CAAC;AAElH,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAGpE,YAAY,CACV,WAAW,EACX,YAAY,EACZ,eAAe,EACf,YAAY,EACZ,cAAc,EACd,mBAAmB,EACnB,iBAAiB,EACjB,oBAAoB,CACrB,CAAC;AAEF,MAAM,YAAY,GAAwD,CAAC,EACzE,EAAE,EAAE,MAAM,EACV,WAAW,EACX,YAAY,EACqB,EAAE,EAAE;IACrC,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,KAAC,uBAAuB,cACtB,KAAC,WAAW,IACV,gBAAgB,EAAC,UAAU,EAC3B,OAAO,EAAE,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,YAAE,CAAC,CAAC,0BAA0B,CAAC,GAAQ,EACzE,SAAS,EACP,8BACE,MAAC,IAAI,IAAC,OAAO,EAAC,SAAS,aAAE,WAAW,CAAC,IAAI,SAAS,EAAC,GAAG,EACrD,WAAW,CAAC,IAAI,IAAI,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,YAAE,WAAW,CAAC,IAAI,GAAQ,IACvE,EAGL,OAAO,EACL,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,YACjC,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,EAAE,CAAC,MAAM,CAAC,YAC5D,CAAC,CAAC,QAAQ,CAAC,GACL,GACJ,IANJ,WAAW,CAAC,EAAE,CAQnB,GACsB,CAC3B,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { FunctionComponent } from 'react';\n\nimport {\n Button,\n Flex,\n ForwardProps,\n registerIcon,\n SummaryItem,\n Text,\n useI18n\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 { StyledIncomingContainer } from './CallControlPanel.styles';\nimport type { IncomingCallProps } from './CallControlPanel.types';\n\nregisterIcon(\n arrowUpIcon,\n micSolidIcon,\n micOffSolidIcon,\n playSoldIcon,\n pauseSolidIcon,\n phoneSplitSolidIcon,\n phoneOutSolidIcon,\n phoneHangupSolidIcon\n);\n\nconst IncomingCall: FunctionComponent<IncomingCallProps & ForwardProps> = ({\n id: callId,\n participant,\n onAcceptCall\n}: IncomingCallProps & ForwardProps) => {\n const t = useI18n();\n\n return (\n <StyledIncomingContainer>\n <SummaryItem\n overflowStrategy='ellipsis'\n primary={<Text variant='secondary'>{t('call_panel_incoming_call')}</Text>}\n secondary={\n <>\n <Text variant='primary'>{participant.name} </Text>{' '}\n {participant.info && <Text variant='secondary'>{participant.info}</Text>}\n </>\n }\n key={participant.id}\n actions={\n <Flex container={{ wrap: 'nowrap' }}>\n <Button variant='primary' onClick={() => onAcceptCall?.(callId)}>\n {t('accept')}\n </Button>\n </Flex>\n }\n />\n </StyledIncomingContainer>\n );\n};\n\nexport default IncomingCall;\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { CallProps, CallParticipant, CallControlPanelProps, UserAvailabilityStatusOption } from './CallControlPanel.types';
|
|
1
|
+
export { CallProps, IncomingCallProps, CallParticipant, CallControlPanelProps, UserAvailabilityStatusOption } from './CallControlPanel.types';
|
|
2
2
|
export { default as ExternalCTI } from './ExternalCTI';
|
|
3
3
|
export { default } from './CallControlPanel';
|
|
4
4
|
export type { TransferData } from './CallHandover/CallHandover.types';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,eAAe,EACf,qBAAqB,EACrB,4BAA4B,EAC7B,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,YAAY,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,iBAAiB,EACjB,eAAe,EACf,qBAAqB,EACrB,4BAA4B,EAC7B,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,YAAY,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/index.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC","sourcesContent":["export {\n CallProps,\n IncomingCallProps,\n CallParticipant,\n CallControlPanelProps,\n UserAvailabilityStatusOption\n} from './CallControlPanel.types';\nexport { default as ExternalCTI } from './ExternalCTI';\nexport { default } from './CallControlPanel';\nexport type { TransferData } from './CallHandover/CallHandover.types';\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-cs",
|
|
3
|
-
"version": "3.0.0-dev.
|
|
3
|
+
"version": "3.0.0-dev.27.2",
|
|
4
4
|
"author": "Pegasystems",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"repository": {
|
|
@@ -20,8 +20,8 @@
|
|
|
20
20
|
"build": "tsc -b"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@pega/cosmos-react-core": "3.0.0-dev.
|
|
24
|
-
"@pega/cosmos-react-dnd": "3.0.0-dev.
|
|
23
|
+
"@pega/cosmos-react-core": "3.0.0-dev.27.2",
|
|
24
|
+
"@pega/cosmos-react-dnd": "3.0.0-dev.27.2",
|
|
25
25
|
"@types/react": "^16.14.24 || ^17.0.38",
|
|
26
26
|
"@types/react-dom": "^16.9.14 || ^17.0.11",
|
|
27
27
|
"@types/styled-components": "^5.1.7",
|