@pega/cosmos-react-demos 5.0.0-dev.2.1 → 5.0.0-dev.3.0

package/lib/cs/CallControlPanel/CallControlPanel.stories.js

@@ -1,331 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { action } from '@storybook/addon-actions';
-import { useEffect, useRef, useState } from 'react';
-import { lighten, readableColor } from 'polished';
-import { createUID, tryCatch, useTheme } from '@pega/cosmos-react-core';
-import { CallControlPanel, ExternalCTI } from '@pega/cosmos-react-cs';
-import { contactsList, createExternalIframeContent, interactionOptions, transferReasons, userStatusOptions } from './CallControlPanel.mocks';
-export default {
-    title: 'Customer Service/CallControlPanel',
-    component: CallControlPanel,
-    args: {
-        heading: 'Agent',
-        isDraggable: true,
-        showStatus: true
-    },
-    argTypes: {
-        heading: { control: { type: 'text' } },
-        isDraggable: { control: { type: 'boolean' } },
-        showStatus: { control: { type: 'boolean' } }
-    }
-};
-export const CallControlPanelDemo = (args) => {
-    const [currentStatus, setCurrentStatus] = useState(args.status || 'available');
-    const inStatusSince = useRef(Date.now());
-    const [calls, setCalls] = useState([]);
-    const [contacts, setContacts] = useState(contactsList);
-    const callsList = useRef(calls);
-    callsList.current = calls;
-    const [showInteractionTransfer, setShowInteractionTransfer] = useState(false);
-    const onMuteToggle = (id) => {
-        const thisCallIndex = callsList.current.findIndex(call => call.id === id);
-        if (thisCallIndex < 0)
-            return;
-        const thisCall = callsList.current[thisCallIndex];
-        callsList.current.splice(thisCallIndex, 1, {
-            ...thisCall,
-            muted: !thisCall.muted
-        });
-        setCalls([...callsList.current]);
-    };
-    const onMergeCall = (id) => {
-        const thisCall = callsList.current.find(call => call.id === id);
-        const activeCallIndex = callsList.current.findIndex(call => !call.onHoldSince);
-        const currentCall = callsList.current[activeCallIndex];
-        if (!thisCall || !activeCallIndex)
-            return;
-        callsList.current.splice(activeCallIndex, 1, {
-            ...currentCall,
-            participants: [...currentCall.participants, ...thisCall.participants],
-            onHoldSince: undefined
-        });
-        setCalls([...callsList.current.filter(call => call.id !== id)]);
-    };
-    const onHandOffCall = (id) => {
-        setCalls([
-            ...callsList.current.filter(call => call.id !== id && call.onHoldSince)
-        ]);
-    };
-    const onPauseToggle = (id) => {
-        const thisCall = callsList.current.find(call => call.id === id);
-        if (!thisCall)
-            return;
-        const wasPaused = !!thisCall.onHoldSince;
-        callsList.current = callsList.current.map(call => {
-            if (thisCall.id === call.id)
-                return {
-                    ...call,
-                    onHoldSince: wasPaused ? undefined : Date.now(),
-                    onMergeCall: wasPaused ? onMergeCall : undefined,
-                    onHandOffCall: wasPaused ? onHandOffCall : undefined
-                };
-            return {
-                ...call,
-                onPauseToggle: wasPaused ? undefined : onPauseToggle,
-                onMergeCall: wasPaused ? onMergeCall : undefined,
-                onHandOffCall: wasPaused ? onHandOffCall : undefined
-            };
-        });
-        setCalls([...callsList.current]);
-    };
-    const onEndCall = (id) => {
-        setCalls(callsList.current.filter(item => item.id !== id));
-        setCurrentStatus('available');
-    };
-    const onHangUp = (callId, participantId) => {
-        const currentCallIndex = callsList.current.findIndex(call => call.id === callId);
-        if (currentCallIndex < 0)
-            return;
-        const currentCall = callsList.current[currentCallIndex];
-        callsList.current.splice(currentCallIndex, 1, {
-            ...currentCall,
-            participants: [
-                ...currentCall.participants.filter(participant => participant.id !== participantId)
-            ]
-        });
-        setCalls([...callsList.current]);
-    };
-    const onConferenceAction = (id, data) => {
-        const caller = contactsList.find(person => person.phoneNumber === data.phoneNumber);
-        const conferenceCall = {
-            id: createUID(),
-            startedAt: Date.now(),
-            onMergeCall,
-            transferOptions: transferReasons,
-            interactionOptions,
-            muted: false,
-            onMuteToggle,
-            onPauseToggle,
-            onHandOffCall,
-            onEndCall,
-            participants: [
-                {
-                    name: caller?.primary || '',
-                    info: caller?.secondary || '',
-                    id: caller?.primary || '',
-                    onHangUp
-                }
-            ]
-        };
-        const currentCall = callsList.current[0];
-        callsList.current.splice(0, 1, {
-            ...callsList.current[0],
-            participants: [...currentCall.participants, ...conferenceCall.participants],
-            onHoldSince: undefined
-        });
-        setCalls([...callsList.current.filter(call => call.id !== conferenceCall.id)]);
-    };
-    const onConsultAction = (id, data) => {
-        const caller = contactsList.find(person => person.phoneNumber === data.phoneNumber);
-        const consultCall = {
-            id: createUID(),
-            startedAt: Date.now(),
-            transferOptions: transferReasons,
-            muted: false,
-            onMuteToggle,
-            onPauseToggle,
-            onMergeCall,
-            onHandOffCall,
-            onDTMFPress: action('onDTMFPress'),
-            onTransferAction: (callId, transferData) => {
-                action('onTransferAction')(callId, transferData);
-                if (transferData.interaction)
-                    setShowInteractionTransfer(true);
-                onEndCall(id);
-            },
-            onConsultAction,
-            onConferenceAction,
-            onEndCall,
-            participants: [
-                {
-                    name: caller?.primary || '',
-                    info: caller?.secondary || '',
-                    id: caller?.primary || '',
-                    onHangUp
-                }
-            ]
-        };
-        const updatedCalls = callsList.current.map(call => {
-            return { ...call, onHoldSince: Date.now(), onMergeCall, onPauseToggle: undefined };
-        });
-        updatedCalls.push(consultCall);
-        setCalls(updatedCalls);
-    };
-    useEffect(() => {
-        const timeoutId = setTimeout(() => {
-            const caller = contactsList[0];
-            const consultCall = {
-                id: createUID(),
-                startedAt: Date.now(),
-                transferOptions: transferReasons,
-                muted: false,
-                onMuteToggle,
-                onPauseToggle,
-                onMergeCall,
-                onHandOffCall,
-                onDTMFPress: action('onDTMFPress'),
-                onTransferAction: (callId, transferData) => {
-                    action('onTransferAction')(callId, transferData);
-                    if (transferData.interaction)
-                        setShowInteractionTransfer(true);
-                    onEndCall(callId);
-                },
-                onConsultAction,
-                onConferenceAction,
-                onEndCall,
-                participants: [
-                    {
-                        name: caller?.primary || '',
-                        info: caller?.secondary || '',
-                        id: caller?.primary || '',
-                        onHangUp
-                    }
-                ]
-            };
-            const incomingCall = {
-                id: createUID(),
-                onAcceptCall: () => {
-                    setCalls([consultCall]);
-                },
-                participant: {
-                    name: contactsList[0].primary,
-                    info: contactsList[0].secondary,
-                    id: contactsList[0].primary
-                }
-            };
-            setCalls([incomingCall, ...callsList.current]);
-        }, 4000);
-        return () => clearTimeout(timeoutId);
-    }, []);
-    return (_jsx(CallControlPanel, { visible: args.visible ?? true, heading: args.heading, userStatus: args.showStatus
-            ? {
-                statusOptions: userStatusOptions,
-                status: currentStatus,
-                inStatusSince: inStatusSince.current,
-                onChange: value => {
-                    setCurrentStatus(value);
-                    args.onStatusChange?.(userStatusOptions.find(s => s.id === value) ?? userStatusOptions[0]);
-                }
-            }
-            : undefined, interactionTransfer: showInteractionTransfer
-            ? {
-                onCancel: () => setShowInteractionTransfer(false),
-                onComplete: () => setShowInteractionTransfer(false)
-            }
-            : undefined, calls: calls, draggable: args.isDraggable, onAddCall: (phoneNumber) => {
-            const call = {
-                id: createUID(),
-                startedAt: Date.now(),
-                slaConfig: [30, 50],
-                onConsultAction,
-                onConferenceAction,
-                transferOptions: transferReasons,
-                defaultTransfer: transferReasons[1].id,
-                interactionOptions,
-                onTransferAction: (id, data) => {
-                    action('onTransferAction')(id, data);
-                    if (data.interaction)
-                        setShowInteractionTransfer(true);
-                    onEndCall(id);
-                },
-                muted: false,
-                onMuteToggle,
-                onPauseToggle,
-                onMergeCall,
-                onDTMFPress: action('onDTMFPress'),
-                onEndCall: () => onEndCall(call.id),
-                participants: [
-                    {
-                        id: contactsList.find(person => person.phoneNumber === phoneNumber)?.primary || '',
-                        name: contactsList.find(person => person.phoneNumber === phoneNumber)?.primary ||
-                            'Unknown',
-                        onHangUp
-                    }
-                ]
-            };
-            setCalls([call]);
-            setCurrentStatus('not_available');
-        }, contactsList: contacts, onFavoriteToggle: (phoneNumber, favorite) => {
-            const element = contacts.find(item => item.phoneNumber === phoneNumber);
-            element.favorite = !favorite;
-            setContacts([...contacts]);
-        } }));
-};
-export const ExternalCTIDemo = (args) => {
-    const containerRef = useRef(null);
-    const [error, setError] = useState('');
-    const { base, components } = useTheme();
-    const styling = args.applyAppStyling
-        ? {
-            '--app-bg-color': base.palette['app-background'],
-            '--header-border-color': base.palette['secondary-background'],
-            '--text-color': base.palette['foreground-color'],
-            '--msg-me-bg-color': base.palette.interactive,
-            '--msg-me-text-color': tryCatch(() => readableColor(base.palette.interactive)),
-            '--msg-you-bg-color': base.palette['primary-background'],
-            '--msg-you-text-color': tryCatch(() => readableColor(base.palette['primary-background'])),
-            '--msg-border-radius': '16px',
-            '--button-text-color': tryCatch(() => readableColor(components.button.color)),
-            '--button-bg-color': components.button.color,
-            '--button-border-color': 'transparent',
-            '--button-border-radius': `calc(${components.button['border-radius']} * ${base['border-radius']})`,
-            '--button-hover-bg-color': tryCatch(() => lighten(0.1, components.button.color)),
-            '--button-height': components.input.height,
-            '--input-height': components.input.height,
-            '--input-background-color': components.input['background-color'],
-            '--input-text-color': base.palette['foreground-color'],
-            '--input-border-radius': `calc(0.5 * ${base['border-radius']})`,
-            '--input-focus-border-color': 'transparent',
-            '--input-focus-box-shadow': components.button['focus-shadow'],
-            '--footer-bg-color': base.palette['app-background']
-        }
-        : undefined;
-    useEffect(() => {
-        if (containerRef.current) {
-            containerRef.current.innerHTML = `
-        <iframe id='external-cti' srcdoc='${createExternalIframeContent(styling)}' width='100%' height='500px'></iframe>
-      `;
-        }
-    }, [containerRef.current, styling]);
-    return (_jsx(ExternalCTI, { heading: args.heading, draggable: args.isDraggable, visible: args.visible, ref: containerRef, attachInteractionProps: {
-            onAddInteraction: ({ comments }, { close }) => {
-                if (comments === 'error') {
-                    setError('The service is currently unavailable');
-                }
-                else {
-                    close();
-                }
-            },
-            reasonOptions: transferReasons,
-            defaultInteraction: interactionOptions.find(({ id }) => id === '23254324')?.id,
-            interactionOptions,
-            heading: 'Attach interaction to call',
-            ...(error && {
-                message: {
-                    variant: 'urgent',
-                    messages: [error]
-                }
-            })
-        } }));
-};
-ExternalCTIDemo.args = {
-    heading: 'External CTI',
-    isDraggable: true,
-    applyAppStyling: false
-};
-ExternalCTIDemo.argTypes = {
-    heading: { control: { type: 'text' } },
-    isDraggable: { control: { type: 'boolean' } },
-    applyAppStyling: { control: { type: 'boolean' } }
-};
-//# sourceMappingURL=CallControlPanel.stories.js.map

package/lib/cs/CallControlPanel/CallControlPanel.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CallControlPanel.stories.js","sourceRoot":"","sources":["../../../src/cs/CallControlPanel/CallControlPanel.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAElD,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAUtE,OAAO,EACL,YAAY,EACZ,2BAA2B,EAC3B,kBAAkB,EAClB,eAAe,EACf,iBAAiB,EAClB,MAAM,0BAA0B,CAAC;AAGlC,eAAe;IACb,KAAK,EAAE,mCAAmC;IAC1C,SAAS,EAAE,gBAAgB;IAC3B,IAAI,EAAE;QACJ,OAAO,EAAE,OAAO;QAChB,WAAW,EAAE,IAAI;QACjB,UAAU,EAAE,IAAI;KACjB;IACD,QAAQ,EAAE;QACR,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;QACtC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC7C,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;KAC7C;CACM,CAAC;AAWV,MAAM,CAAC,MAAM,oBAAoB,GAAwC,CACvE,IAAgC,EAChC,EAAE;IACF,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAChD,IAAI,CAAC,MAAM,IAAI,WAAW,CAC3B,CAAC;IACF,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;IACzC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAoC,EAAE,CAAC,CAAC;IAE1E,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;IACvD,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAChC,SAAS,CAAC,OAAO,GAAG,KAAK,CAAC;IAE1B,MAAM,CAAC,uBAAuB,EAAE,0BAA0B,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9E,MAAM,YAAY,GAAG,CAAC,EAAmB,EAAE,EAAE;QAC3C,MAAM,aAAa,GAAG,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;QAC1E,IAAI,aAAa,GAAG,CAAC;YAAE,OAAO;QAC9B,MAAM,QAAQ,GAAG,SAAS,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;QAClD,SAAS,CAAC,OAAO,CAAC,MAAM,CAAC,aAAa,EAAE,CAAC,EAAE;YACzC,GAAG,QAAQ;YACX,KAAK,EAAE,CAAE,QAAsB,CAAC,KAAK;SACtC,CAAC,CAAC;QACH,QAAQ,CAAC,CAAC,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC;IACnC,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,EAAmB,EAAE,EAAE;QAC1C,MAAM,QAAQ,GAAG,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAc,CAAC;QAC7E,MAAM,eAAe,GAAG,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,CAAE,IAAkB,CAAC,WAAW,CAAC,CAAC;QAC9F,MAAM,WAAW,GAAG,SAAS,CAAC,OAAO,CAAC,eAAe,CAAc,CAAC;QAEpE,IAAI,CAAC,QAAQ,IAAI,CAAC,eAAe;YAAE,OAAO;QAC1C,SAAS,CAAC,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,CAAC,EAAE;YAC3C,GAAG,WAAW;YACd,YAAY,EAAE,CAAC,GAAG,WAAW,CAAC,YAAY,EAAE,GAAG,QAAQ,CAAC,YAAY,CAAC;YACrE,WAAW,EAAE,SAAS;SACvB,CAAC,CAAC;QACH,QAAQ,CAAC,CAAC,GAAG,SAAS,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC;IAClE,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,EAAmB,EAAE,EAAE;QAC5C,QAAQ,CAAC;YACP,GAAG,SAAS,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAK,IAAkB,CAAC,WAAW,CAAC;SACvF,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,EAAmB,EAAE,EAAE;QAC5C,MAAM,QAAQ,GAAG,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;QAChE,IAAI,CAAC,QAAQ;YAAE,OAAO;QACtB,MAAM,SAAS,GAAG,CAAC,CAAE,QAAsB,CAAC,WAAW,CAAC;QACxD,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YAC/C,IAAI,QAAQ,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE;gBACzB,OAAO;oBACL,GAAG,IAAI;oBACP,WAAW,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE;oBAC/C,WAAW,EAAE,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS;oBAChD,aAAa,EAAE,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS;iBACrD,CAAC;YACJ,OAAO;gBACL,GAAG,IAAI;gBACP,aAAa,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa;gBACpD,WAAW,EAAE,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS;gBAChD,aAAa,EAAE,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS;aACrD,CAAC;QACJ,CAAC,CAAC,CAAC;QACH,QAAQ,CAAC,CAAC,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC;IACnC,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,CAAC,EAAmB,EAAE,EAAE;QACxC,QAAQ,CAAC,SAAS,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;QAC3D,gBAAgB,CAAC,WAAW,CAAC,CAAC;IAChC,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,CAAC,MAAuB,EAAE,aAAoC,EAAE,EAAE;QACjF,MAAM,gBAAgB,GAAG,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,MAAM,CAAC,CAAC;QACjF,IAAI,gBAAgB,GAAG,CAAC;YAAE,OAAO;QACjC,MAAM,WAAW,GAAG,SAAS,CAAC,OAAO,CAAC,gBAAgB,CAAc,CAAC;QACrE,SAAS,CAAC,OAAO,CAAC,MAAM,CAAC,gBAAgB,EAAE,CAAC,EAAE;YAC5C,GAAG,WAAW;YACd,YAAY,EAAE;gBACZ,GAAG,WAAW,CAAC,YAAY,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC,WAAW,CAAC,EAAE,KAAK,aAAa,CAAC;aACpF;SACF,CAAC,CAAC;QACH,QAAQ,CAAC,CAAC,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC;IACnC,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,CAAC,EAAmB,EAAE,IAAkB,EAAE,EAAE;QACrE,MAAM,MAAM,GAAG,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,WAAW,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC;QACpF,MAAM,cAAc,GAAc;YAChC,EAAE,EAAE,SAAS,EAAE;YACf,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE;YACrB,WAAW;YACX,eAAe,EAAE,eAAe;YAChC,kBAAkB;YAClB,KAAK,EAAE,KAAK;YACZ,YAAY;YACZ,aAAa;YACb,aAAa;YACb,SAAS;YACT,YAAY,EAAE;gBACZ;oBACE,IAAI,EAAE,MAAM,EAAE,OAAO,IAAI,EAAE;oBAC3B,IAAI,EAAE,MAAM,EAAE,SAAS,IAAI,EAAE;oBAC7B,EAAE,EAAE,MAAM,EAAE,OAAO,IAAI,EAAE;oBACzB,QAAQ;iBACT;aACF;SACF,CAAC;QAEF,MAAM,WAAW,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC,CAAc,CAAC;QACtD,SAAS,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE;YAC7B,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC;YACvB,YAAY,EAAE,CAAC,GAAG,WAAW,CAAC,YAAY,EAAE,GAAG,cAAc,CAAC,YAAY,CAAC;YAC3E,WAAW,EAAE,SAAS;SACvB,CAAC,CAAC;QACH,QAAQ,CAAC,CAAC,GAAG,SAAS,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,cAAc,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;IACjF,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,CAAC,EAAmB,EAAE,IAAkB,EAAE,EAAE;QAClE,MAAM,MAAM,GAAG,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,WAAW,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC;QACpF,MAAM,WAAW,GAAc;YAC7B,EAAE,EAAE,SAAS,EAAE;YACf,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE;YACrB,eAAe,EAAE,eAAe;YAChC,KAAK,EAAE,KAAK;YACZ,YAAY;YACZ,aAAa;YACb,WAAW;YACX,aAAa;YACb,WAAW,EAAE,MAAM,CAAC,aAAa,CAAC;YAClC,gBAAgB,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,EAAE;gBACzC,MAAM,CAAC,kBAAkB,CAAC,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;gBACjD,IAAI,YAAY,CAAC,WAAW;oBAAE,0BAA0B,CAAC,IAAI,CAAC,CAAC;gBAC/D,SAAS,CAAC,EAAE,CAAC,CAAC;YAChB,CAAC;YACD,eAAe;YACf,kBAAkB;YAClB,SAAS;YACT,YAAY,EAAE;gBACZ;oBACE,IAAI,EAAE,MAAM,EAAE,OAAO,IAAI,EAAE;oBAC3B,IAAI,EAAE,MAAM,EAAE,SAAS,IAAI,EAAE;oBAC7B,EAAE,EAAE,MAAM,EAAE,OAAO,IAAI,EAAE;oBACzB,QAAQ;iBACT;aACF;SACF,CAAC;QAEF,MAAM,YAAY,GAAsC,SAAS,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YACnF,OAAO,EAAE,GAAG,IAAI,EAAE,WAAW,EAAE,IAAI,CAAC,GAAG,EAAE,EAAE,WAAW,EAAE,aAAa,EAAE,SAAS,EAAE,CAAC;QACrF,CAAC,CAAC,CAAC;QACH,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC/B,QAAQ,CAAC,YAAY,CAAC,CAAC;IACzB,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,SAAS,GAAG,UAAU,CAAC,GAAG,EAAE;YAChC,MAAM,MAAM,GAAG,YAAY,CAAC,CAAC,CAAC,CAAC;YAC/B,MAAM,WAAW,GAAc;gBAC7B,EAAE,EAAE,SAAS,EAAE;gBACf,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE;gBACrB,eAAe,EAAE,eAAe;gBAChC,KAAK,EAAE,KAAK;gBACZ,YAAY;gBACZ,aAAa;gBACb,WAAW;gBACX,aAAa;gBACb,WAAW,EAAE,MAAM,CAAC,aAAa,CAAC;gBAClC,gBAAgB,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,EAAE;oBACzC,MAAM,CAAC,kBAAkB,CAAC,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;oBACjD,IAAI,YAAY,CAAC,WAAW;wBAAE,0BAA0B,CAAC,IAAI,CAAC,CAAC;oBAC/D,SAAS,CAAC,MAAM,CAAC,CAAC;gBACpB,CAAC;gBACD,eAAe;gBACf,kBAAkB;gBAClB,SAAS;gBACT,YAAY,EAAE;oBACZ;wBACE,IAAI,EAAE,MAAM,EAAE,OAAO,IAAI,EAAE;wBAC3B,IAAI,EAAE,MAAM,EAAE,SAAS,IAAI,EAAE;wBAC7B,EAAE,EAAE,MAAM,EAAE,OAAO,IAAI,EAAE;wBACzB,QAAQ;qBACT;iBACF;aACF,CAAC;YAEF,MAAM,YAAY,GAAsB;gBACtC,EAAE,EAAE,SAAS,EAAE;gBACf,YAAY,EAAE,GAAG,EAAE;oBACjB,QAAQ,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC;gBAC1B,CAAC;gBACD,WAAW,EAAE;oBACX,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,OAAO;oBAC7B,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,SAAS;oBAC/B,EAAE,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,OAAO;iBAC5B;aACF,CAAC;YACF,QAAQ,CAAC,CAAC,YAAY,EAAE,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC;QACjD,CAAC,EAAE,IAAI,CAAC,CAAC;QACT,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;IACvC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,KAAC,gBAAgB,IACf,OAAO,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,EAC7B,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,UAAU,EACR,IAAI,CAAC,UAAU;YACb,CAAC,CAAC;gBACE,aAAa,EAAE,iBAAiB;gBAChC,MAAM,EAAE,aAAa;gBACrB,aAAa,EAAE,aAAa,CAAC,OAAO;gBACpC,QAAQ,EAAE,KAAK,CAAC,EAAE;oBAChB,gBAAgB,CAAC,KAAK,CAAC,CAAC;oBACxB,IAAI,CAAC,cAAc,EAAE,CACnB,iBAAiB,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,KAAK,CAAC,IAAI,iBAAiB,CAAC,CAAC,CAAC,CACpE,CAAC;gBACJ,CAAC;aACF;YACH,CAAC,CAAC,SAAS,EAEf,mBAAmB,EACjB,uBAAuB;YACrB,CAAC,CAAC;gBACE,QAAQ,EAAE,GAAG,EAAE,CAAC,0BAA0B,CAAC,KAAK,CAAC;gBACjD,UAAU,EAAE,GAAG,EAAE,CAAC,0BAA0B,CAAC,KAAK,CAAC;aACpD;YACH,CAAC,CAAC,SAAS,EAEf,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAI,CAAC,WAAW,EAC3B,SAAS,EAAE,CAAC,WAAmB,EAAE,EAAE;YACjC,MAAM,IAAI,GAAc;gBACtB,EAAE,EAAE,SAAS,EAAE;gBACf,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE;gBACrB,SAAS,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC;gBACnB,eAAe;gBACf,kBAAkB;gBAClB,eAAe,EAAE,eAAe;gBAChC,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC,EAAE;gBACtC,kBAAkB;gBAClB,gBAAgB,EAAE,CAAC,EAAE,EAAE,IAAI,EAAE,EAAE;oBAC7B,MAAM,CAAC,kBAAkB,CAAC,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC;oBACrC,IAAI,IAAI,CAAC,WAAW;wBAAE,0BAA0B,CAAC,IAAI,CAAC,CAAC;oBACvD,SAAS,CAAC,EAAE,CAAC,CAAC;gBAChB,CAAC;gBACD,KAAK,EAAE,KAAK;gBACZ,YAAY;gBACZ,aAAa;gBACb,WAAW;gBACX,WAAW,EAAE,MAAM,CAAC,aAAa,CAAC;gBAClC,SAAS,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC;gBACnC,YAAY,EAAE;oBACZ;wBACE,EAAE,EAAE,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,WAAW,KAAK,WAAW,CAAC,EAAE,OAAO,IAAI,EAAE;wBAClF,IAAI,EACF,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,WAAW,KAAK,WAAW,CAAC,EAAE,OAAO;4BACxE,SAAS;wBACX,QAAQ;qBACT;iBACF;aACF,CAAC;YAEF,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;YACjB,gBAAgB,CAAC,eAAe,CAAC,CAAC;QACpC,CAAC,EACD,YAAY,EAAE,QAAQ,EACtB,gBAAgB,EAAE,CAAC,WAAmB,EAAE,QAAiB,EAAE,EAAE;YAC3D,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,KAAK,WAAW,CAAC,CAAC;YACxE,OAAQ,CAAC,QAAQ,GAAG,CAAC,QAAQ,CAAC;YAC9B,WAAW,CAAC,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC;QAC7B,CAAC,GACD,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAuE,CACjG,IAA+D,EAC/D,EAAE;IACF,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEvC,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,QAAQ,EAAE,CAAC;IAExC,MAAM,OAAO,GAA+B,IAAI,CAAC,eAAe;QAC9D,CAAC,CAAC;YACE,gBAAgB,EAAE,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC;YAChD,uBAAuB,EAAE,IAAI,CAAC,OAAO,CAAC,sBAAsB,CAAC;YAC7D,cAAc,EAAE,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC;YAChD,mBAAmB,EAAE,IAAI,CAAC,OAAO,CAAC,WAAW;YAC7C,qBAAqB,EAAE,QAAQ,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;YAC9E,oBAAoB,EAAE,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;YACxD,sBAAsB,EAAE,QAAQ,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC,CAAC;YACzF,qBAAqB,EAAE,MAAM;YAC7B,qBAAqB,EAAE,QAAQ,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YAC7E,mBAAmB,EAAE,UAAU,CAAC,MAAM,CAAC,KAAK;YAC5C,uBAAuB,EAAE,aAAa;YACtC,wBAAwB,EAAE,QAAQ,UAAU,CAAC,MAAM,CAAC,eAAe,CAAC,MAAM,IAAI,CAAC,eAAe,CAAC,GAAG;YAClG,yBAAyB,EAAE,QAAQ,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,GAAG,EAAE,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YAChF,iBAAiB,EAAE,UAAU,CAAC,KAAK,CAAC,MAAM;YAC1C,gBAAgB,EAAE,UAAU,CAAC,KAAK,CAAC,MAAM;YACzC,0BAA0B,EAAE,UAAU,CAAC,KAAK,CAAC,kBAAkB,CAAC;YAChE,oBAAoB,EAAE,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC;YACtD,uBAAuB,EAAE,cAAc,IAAI,CAAC,eAAe,CAAC,GAAG;YAC/D,4BAA4B,EAAE,aAAa;YAC3C,0BAA0B,EAAE,UAAU,CAAC,MAAM,CAAC,cAAc,CAAC;YAC7D,mBAAmB,EAAE,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC;SACpD;QACH,CAAC,CAAC,SAAS,CAAC;IAEd,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,YAAY,CAAC,OAAO,EAAE;YACxB,YAAY,CAAC,OAAO,CAAC,SAAS,GAAG;4CACK,2BAA2B,CAC7D,OAAO,CACR;OACF,CAAC;SACH;IACH,CAAC,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;IAEpC,OAAO,CACL,KAAC,WAAW,IACV,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,SAAS,EAAE,IAAI,CAAC,WAAW,EAC3B,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,GAAG,EAAE,YAAY,EACjB,sBAAsB,EAAE;YACtB,gBAAgB,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE;gBAC5C,IAAI,QAAQ,KAAK,OAAO,EAAE;oBACxB,QAAQ,CAAC,sCAAsC,CAAC,CAAC;iBAClD;qBAAM;oBACL,KAAK,EAAE,CAAC;iBACT;YACH,CAAC;YACD,aAAa,EAAE,eAAe;YAC9B,kBAAkB,EAAE,kBAAkB,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,UAAU,CAAC,EAAE,EAAE;YAC9E,kBAAkB;YAClB,OAAO,EAAE,4BAA4B;YACrC,GAAG,CAAC,KAAK,IAAI;gBACX,OAAO,EAAE;oBACP,OAAO,EAAE,QAAQ;oBACjB,QAAQ,EAAE,CAAC,KAAK,CAAC;iBAClB;aACF,CAAC;SACH,GACD,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,CAAC,IAAI,GAAG;IACrB,OAAO,EAAE,cAAc;IACvB,WAAW,EAAE,IAAI;IACjB,eAAe,EAAE,KAAK;CACvB,CAAC;AAEF,eAAe,CAAC,QAAQ,GAAG;IACzB,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACtC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC7C,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAClD,CAAC","sourcesContent":["import { action } from '@storybook/addon-actions';\nimport { useEffect, useRef, useState } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\nimport { lighten, readableColor } from 'polished';\n\nimport { createUID, tryCatch, useTheme } from '@pega/cosmos-react-core';\nimport { CallControlPanel, ExternalCTI } from '@pega/cosmos-react-cs';\nimport type {\n  CallProps,\n  IncomingCallProps,\n  CallParticipant,\n  TransferData,\n  UserAvailabilityStatusOption,\n  CallControlPanelProps\n} from '@pega/cosmos-react-cs';\n\nimport {\n  contactsList,\n  createExternalIframeContent,\n  interactionOptions,\n  transferReasons,\n  userStatusOptions\n} from './CallControlPanel.mocks';\nimport type { ExternalStyles } from './CallControlPanel.mocks';\n\nexport default {\n  title: 'Customer Service/CallControlPanel',\n  component: CallControlPanel,\n  args: {\n    heading: 'Agent',\n    isDraggable: true,\n    showStatus: true\n  },\n  argTypes: {\n    heading: { control: { type: 'text' } },\n    isDraggable: { control: { type: 'boolean' } },\n    showStatus: { control: { type: 'boolean' } }\n  }\n} as Meta;\n\ninterface CallControlPanelStoryProps {\n  heading: string;\n  isDraggable?: boolean;\n  showStatus: boolean;\n  status?: UserAvailabilityStatusOption['id'];\n  onStatusChange?: (newStatus: UserAvailabilityStatusOption) => void;\n  visible?: CallControlPanelProps['visible'];\n}\n\nexport const CallControlPanelDemo: StoryFn<CallControlPanelStoryProps> = (\n  args: CallControlPanelStoryProps\n) => {\n  const [currentStatus, setCurrentStatus] = useState<UserAvailabilityStatusOption['id']>(\n    args.status || 'available'\n  );\n  const inStatusSince = useRef(Date.now());\n  const [calls, setCalls] = useState<(CallProps | IncomingCallProps)[]>([]);\n\n  const [contacts, setContacts] = useState(contactsList);\n  const callsList = useRef(calls);\n  callsList.current = calls;\n\n  const [showInteractionTransfer, setShowInteractionTransfer] = useState(false);\n\n  const onMuteToggle = (id: CallProps['id']) => {\n    const thisCallIndex = callsList.current.findIndex(call => call.id === id);\n    if (thisCallIndex < 0) return;\n    const thisCall = callsList.current[thisCallIndex];\n    callsList.current.splice(thisCallIndex, 1, {\n      ...thisCall,\n      muted: !(thisCall as CallProps).muted\n    });\n    setCalls([...callsList.current]);\n  };\n\n  const onMergeCall = (id: CallProps['id']) => {\n    const thisCall = callsList.current.find(call => call.id === id) as CallProps;\n    const activeCallIndex = callsList.current.findIndex(call => !(call as CallProps).onHoldSince);\n    const currentCall = callsList.current[activeCallIndex] as CallProps;\n\n    if (!thisCall || !activeCallIndex) return;\n    callsList.current.splice(activeCallIndex, 1, {\n      ...currentCall,\n      participants: [...currentCall.participants, ...thisCall.participants],\n      onHoldSince: undefined\n    });\n    setCalls([...callsList.current.filter(call => call.id !== id)]);\n  };\n\n  const onHandOffCall = (id: CallProps['id']) => {\n    setCalls([\n      ...callsList.current.filter(call => call.id !== id && (call as CallProps).onHoldSince)\n    ]);\n  };\n\n  const onPauseToggle = (id: CallProps['id']) => {\n    const thisCall = callsList.current.find(call => call.id === id);\n    if (!thisCall) return;\n    const wasPaused = !!(thisCall as CallProps).onHoldSince;\n    callsList.current = callsList.current.map(call => {\n      if (thisCall.id === call.id)\n        return {\n          ...call,\n          onHoldSince: wasPaused ? undefined : Date.now(),\n          onMergeCall: wasPaused ? onMergeCall : undefined,\n          onHandOffCall: wasPaused ? onHandOffCall : undefined\n        };\n      return {\n        ...call,\n        onPauseToggle: wasPaused ? undefined : onPauseToggle,\n        onMergeCall: wasPaused ? onMergeCall : undefined,\n        onHandOffCall: wasPaused ? onHandOffCall : undefined\n      };\n    });\n    setCalls([...callsList.current]);\n  };\n\n  const onEndCall = (id: CallProps['id']) => {\n    setCalls(callsList.current.filter(item => item.id !== id));\n    setCurrentStatus('available');\n  };\n\n  const onHangUp = (callId: CallProps['id'], participantId: CallParticipant['id']) => {\n    const currentCallIndex = callsList.current.findIndex(call => call.id === callId);\n    if (currentCallIndex < 0) return;\n    const currentCall = callsList.current[currentCallIndex] as CallProps;\n    callsList.current.splice(currentCallIndex, 1, {\n      ...currentCall,\n      participants: [\n        ...currentCall.participants.filter(participant => participant.id !== participantId)\n      ]\n    });\n    setCalls([...callsList.current]);\n  };\n\n  const onConferenceAction = (id: CallProps['id'], data: TransferData) => {\n    const caller = contactsList.find(person => person.phoneNumber === data.phoneNumber);\n    const conferenceCall: CallProps = {\n      id: createUID(),\n      startedAt: Date.now(),\n      onMergeCall,\n      transferOptions: transferReasons,\n      interactionOptions,\n      muted: false,\n      onMuteToggle,\n      onPauseToggle,\n      onHandOffCall,\n      onEndCall,\n      participants: [\n        {\n          name: caller?.primary || '',\n          info: caller?.secondary || '',\n          id: caller?.primary || '',\n          onHangUp\n        }\n      ]\n    };\n\n    const currentCall = callsList.current[0] as CallProps;\n    callsList.current.splice(0, 1, {\n      ...callsList.current[0],\n      participants: [...currentCall.participants, ...conferenceCall.participants],\n      onHoldSince: undefined\n    });\n    setCalls([...callsList.current.filter(call => call.id !== conferenceCall.id)]);\n  };\n\n  const onConsultAction = (id: CallProps['id'], data: TransferData) => {\n    const caller = contactsList.find(person => person.phoneNumber === data.phoneNumber);\n    const consultCall: CallProps = {\n      id: createUID(),\n      startedAt: Date.now(),\n      transferOptions: transferReasons,\n      muted: false,\n      onMuteToggle,\n      onPauseToggle,\n      onMergeCall,\n      onHandOffCall,\n      onDTMFPress: action('onDTMFPress'),\n      onTransferAction: (callId, transferData) => {\n        action('onTransferAction')(callId, transferData);\n        if (transferData.interaction) setShowInteractionTransfer(true);\n        onEndCall(id);\n      },\n      onConsultAction,\n      onConferenceAction,\n      onEndCall,\n      participants: [\n        {\n          name: caller?.primary || '',\n          info: caller?.secondary || '',\n          id: caller?.primary || '',\n          onHangUp\n        }\n      ]\n    };\n\n    const updatedCalls: (CallProps | IncomingCallProps)[] = callsList.current.map(call => {\n      return { ...call, onHoldSince: Date.now(), onMergeCall, onPauseToggle: undefined };\n    });\n    updatedCalls.push(consultCall);\n    setCalls(updatedCalls);\n  };\n\n  useEffect(() => {\n    const timeoutId = setTimeout(() => {\n      const caller = contactsList[0];\n      const consultCall: CallProps = {\n        id: createUID(),\n        startedAt: Date.now(),\n        transferOptions: transferReasons,\n        muted: false,\n        onMuteToggle,\n        onPauseToggle,\n        onMergeCall,\n        onHandOffCall,\n        onDTMFPress: action('onDTMFPress'),\n        onTransferAction: (callId, transferData) => {\n          action('onTransferAction')(callId, transferData);\n          if (transferData.interaction) setShowInteractionTransfer(true);\n          onEndCall(callId);\n        },\n        onConsultAction,\n        onConferenceAction,\n        onEndCall,\n        participants: [\n          {\n            name: caller?.primary || '',\n            info: caller?.secondary || '',\n            id: caller?.primary || '',\n            onHangUp\n          }\n        ]\n      };\n\n      const incomingCall: IncomingCallProps = {\n        id: createUID(),\n        onAcceptCall: () => {\n          setCalls([consultCall]);\n        },\n        participant: {\n          name: contactsList[0].primary,\n          info: contactsList[0].secondary,\n          id: contactsList[0].primary\n        }\n      };\n      setCalls([incomingCall, ...callsList.current]);\n    }, 4000);\n    return () => clearTimeout(timeoutId);\n  }, []);\n\n  return (\n    <CallControlPanel\n      visible={args.visible ?? true}\n      heading={args.heading}\n      userStatus={\n        args.showStatus\n          ? {\n              statusOptions: userStatusOptions,\n              status: currentStatus,\n              inStatusSince: inStatusSince.current,\n              onChange: value => {\n                setCurrentStatus(value);\n                args.onStatusChange?.(\n                  userStatusOptions.find(s => s.id === value) ?? userStatusOptions[0]\n                );\n              }\n            }\n          : undefined\n      }\n      interactionTransfer={\n        showInteractionTransfer\n          ? {\n              onCancel: () => setShowInteractionTransfer(false),\n              onComplete: () => setShowInteractionTransfer(false)\n            }\n          : undefined\n      }\n      calls={calls}\n      draggable={args.isDraggable}\n      onAddCall={(phoneNumber: string) => {\n        const call: CallProps = {\n          id: createUID(),\n          startedAt: Date.now(),\n          slaConfig: [30, 50],\n          onConsultAction,\n          onConferenceAction,\n          transferOptions: transferReasons,\n          defaultTransfer: transferReasons[1].id,\n          interactionOptions,\n          onTransferAction: (id, data) => {\n            action('onTransferAction')(id, data);\n            if (data.interaction) setShowInteractionTransfer(true);\n            onEndCall(id);\n          },\n          muted: false,\n          onMuteToggle,\n          onPauseToggle,\n          onMergeCall,\n          onDTMFPress: action('onDTMFPress'),\n          onEndCall: () => onEndCall(call.id),\n          participants: [\n            {\n              id: contactsList.find(person => person.phoneNumber === phoneNumber)?.primary || '',\n              name:\n                contactsList.find(person => person.phoneNumber === phoneNumber)?.primary ||\n                'Unknown',\n              onHangUp\n            }\n          ]\n        };\n\n        setCalls([call]);\n        setCurrentStatus('not_available');\n      }}\n      contactsList={contacts}\n      onFavoriteToggle={(phoneNumber: string, favorite: boolean) => {\n        const element = contacts.find(item => item.phoneNumber === phoneNumber);\n        element!.favorite = !favorite;\n        setContacts([...contacts]);\n      }}\n    />\n  );\n};\n\nexport const ExternalCTIDemo: StoryFn<CallControlPanelStoryProps & { applyAppStyling: boolean }> = (\n  args: CallControlPanelStoryProps & { applyAppStyling: boolean }\n) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [error, setError] = useState('');\n\n  const { base, components } = useTheme();\n\n  const styling: ExternalStyles | undefined = args.applyAppStyling\n    ? {\n        '--app-bg-color': base.palette['app-background'],\n        '--header-border-color': base.palette['secondary-background'],\n        '--text-color': base.palette['foreground-color'],\n        '--msg-me-bg-color': base.palette.interactive,\n        '--msg-me-text-color': tryCatch(() => readableColor(base.palette.interactive)),\n        '--msg-you-bg-color': base.palette['primary-background'],\n        '--msg-you-text-color': tryCatch(() => readableColor(base.palette['primary-background'])),\n        '--msg-border-radius': '16px',\n        '--button-text-color': tryCatch(() => readableColor(components.button.color)),\n        '--button-bg-color': components.button.color,\n        '--button-border-color': 'transparent',\n        '--button-border-radius': `calc(${components.button['border-radius']} * ${base['border-radius']})`,\n        '--button-hover-bg-color': tryCatch(() => lighten(0.1, components.button.color)),\n        '--button-height': components.input.height,\n        '--input-height': components.input.height,\n        '--input-background-color': components.input['background-color'],\n        '--input-text-color': base.palette['foreground-color'],\n        '--input-border-radius': `calc(0.5 * ${base['border-radius']})`,\n        '--input-focus-border-color': 'transparent',\n        '--input-focus-box-shadow': components.button['focus-shadow'],\n        '--footer-bg-color': base.palette['app-background']\n      }\n    : undefined;\n\n  useEffect(() => {\n    if (containerRef.current) {\n      containerRef.current.innerHTML = `\n        <iframe id='external-cti' srcdoc='${createExternalIframeContent(\n          styling\n        )}' width='100%' height='500px'></iframe>\n      `;\n    }\n  }, [containerRef.current, styling]);\n\n  return (\n    <ExternalCTI\n      heading={args.heading}\n      draggable={args.isDraggable}\n      visible={args.visible}\n      ref={containerRef}\n      attachInteractionProps={{\n        onAddInteraction: ({ comments }, { close }) => {\n          if (comments === 'error') {\n            setError('The service is currently unavailable');\n          } else {\n            close();\n          }\n        },\n        reasonOptions: transferReasons,\n        defaultInteraction: interactionOptions.find(({ id }) => id === '23254324')?.id,\n        interactionOptions,\n        heading: 'Attach interaction to call',\n        ...(error && {\n          message: {\n            variant: 'urgent',\n            messages: [error]\n          }\n        })\n      }}\n    />\n  );\n};\n\nExternalCTIDemo.args = {\n  heading: 'External CTI',\n  isDraggable: true,\n  applyAppStyling: false\n};\n\nExternalCTIDemo.argTypes = {\n  heading: { control: { type: 'text' } },\n  isDraggable: { control: { type: 'boolean' } },\n  applyAppStyling: { control: { type: 'boolean' } }\n};\n"]}

package/lib/cs/DialPad/DialPad.stories.d.ts

@@ -1,9 +0,0 @@
-import type { StoryFn } from '@storybook/react';
-import type { DialPadKeyboardProps } from '@pega/cosmos-react-cs';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
-export default _default;
-interface DialPadDemoProps {
-    mode: DialPadKeyboardProps['mode'];
-}
-export declare const DialPadDemo: StoryFn<DialPadDemoProps>;
-//# sourceMappingURL=DialPad.stories.d.ts.map

package/lib/cs/DialPad/DialPad.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DialPad.stories.d.ts","sourceRoot":"","sources":["../../../src/cs/DialPad/DialPad.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAItD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;;AAElE,wBAGU;AAEV,UAAU,gBAAgB;IACxB,IAAI,EAAE,oBAAoB,CAAC,MAAM,CAAC,CAAC;CACpC;AAED,eAAO,MAAM,WAAW,EAAE,OAAO,CAAC,gBAAgB,CAajD,CAAC"}

package/lib/cs/DialPad/DialPad.stories.js

@@ -1,19 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { action } from '@storybook/addon-actions';
-import { useState } from 'react';
-import { DialPad } from '@pega/cosmos-react-cs';
-export default {
-    title: 'Customer Service/DialPad',
-    component: DialPad
-};
-export const DialPadDemo = (args) => {
-    const [phoneNumber, setPhoneNumber] = useState('');
-    return (_jsx("div", { style: { maxWidth: '25rem' }, children: _jsx(DialPad, { value: phoneNumber, onCallClick: action('Call button clicked'), onChange: setPhoneNumber, mode: args.mode }) }));
-};
-DialPadDemo.args = {
-    mode: 'default'
-};
-DialPadDemo.argTypes = {
-    mode: { options: ['default', 'DTMF'], control: { type: 'inline-radio' } }
-};
-//# sourceMappingURL=DialPad.stories.js.map

package/lib/cs/DialPad/DialPad.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DialPad.stories.js","sourceRoot":"","sources":["../../../src/cs/DialPad/DialPad.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAGhD,eAAe;IACb,KAAK,EAAE,0BAA0B;IACjC,SAAS,EAAE,OAAO;CACX,CAAC;AAMV,MAAM,CAAC,MAAM,WAAW,GAA8B,CAAC,IAAsB,EAAE,EAAE;IAC/E,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEnD,OAAO,CACL,cAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,YAC/B,KAAC,OAAO,IACN,KAAK,EAAE,WAAW,EAClB,WAAW,EAAE,MAAM,CAAC,qBAAqB,CAAC,EAC1C,QAAQ,EAAE,cAAc,EACxB,IAAI,EAAE,IAAI,CAAC,IAAI,GACf,GACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,WAAW,CAAC,IAAI,GAAG;IACjB,IAAI,EAAE,SAAS;CAChB,CAAC;AAEF,WAAW,CAAC,QAAQ,GAAG;IACrB,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,MAAM,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE,EAAE;CAC1E,CAAC","sourcesContent":["import { action } from '@storybook/addon-actions';\nimport type { Meta, StoryFn } from '@storybook/react';\nimport { useState } from 'react';\n\nimport { DialPad } from '@pega/cosmos-react-cs';\nimport type { DialPadKeyboardProps } from '@pega/cosmos-react-cs';\n\nexport default {\n  title: 'Customer Service/DialPad',\n  component: DialPad\n} as Meta;\n\ninterface DialPadDemoProps {\n  mode: DialPadKeyboardProps['mode'];\n}\n\nexport const DialPadDemo: StoryFn<DialPadDemoProps> = (args: DialPadDemoProps) => {\n  const [phoneNumber, setPhoneNumber] = useState('');\n\n  return (\n    <div style={{ maxWidth: '25rem' }}>\n      <DialPad\n        value={phoneNumber}\n        onCallClick={action('Call button clicked')}\n        onChange={setPhoneNumber}\n        mode={args.mode}\n      />\n    </div>\n  );\n};\n\nDialPadDemo.args = {\n  mode: 'default'\n};\n\nDialPadDemo.argTypes = {\n  mode: { options: ['default', 'DTMF'], control: { type: 'inline-radio' } }\n};\n"]}

package/lib/cs/DialPad/DialPadKeyboardData.mock.d.ts

@@ -1,11 +0,0 @@
-export declare const dialPadKeysMock: {
-    key: string;
-    charCode: number;
-    buttonIndex: number;
-}[];
-export declare const defaultDialPadKeysMock: {
-    key: string;
-    charCode: number;
-    buttonIndex: number;
-}[];
-//# sourceMappingURL=DialPadKeyboardData.mock.d.ts.map

package/lib/cs/DialPad/DialPadKeyboardData.mock.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DialPadKeyboardData.mock.d.ts","sourceRoot":"","sources":["../../../src/cs/DialPad/DialPadKeyboardData.mock.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe;;;;GAc3B,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;GAGlC,CAAC"}

package/lib/cs/DialPad/DialPadKeyboardData.mock.js

@@ -1,20 +0,0 @@
-export const dialPadKeysMock = [
-    { key: '1', charCode: 49, buttonIndex: 0 },
-    { key: '2', charCode: 50, buttonIndex: 1 },
-    { key: '3', charCode: 51, buttonIndex: 2 },
-    { key: '4', charCode: 52, buttonIndex: 3 },
-    { key: '5', charCode: 53, buttonIndex: 4 },
-    { key: '6', charCode: 54, buttonIndex: 5 },
-    { key: '7', charCode: 55, buttonIndex: 6 },
-    { key: '8', charCode: 56, buttonIndex: 7 },
-    { key: '9', charCode: 57, buttonIndex: 8 },
-    { key: '*', charCode: 42, buttonIndex: 9 },
-    { key: '0', charCode: 48, buttonIndex: 10 },
-    { key: '#', charCode: 35, buttonIndex: 11 },
-    { key: '+', charCode: 43, buttonIndex: 10 }
-];
-export const defaultDialPadKeysMock = [
-    ...dialPadKeysMock,
-    { key: 'Backspace', charCode: 127, buttonIndex: 12 }
-];
-//# sourceMappingURL=DialPadKeyboardData.mock.js.map

package/lib/cs/DialPad/DialPadKeyboardData.mock.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DialPadKeyboardData.mock.js","sourceRoot":"","sources":["../../../src/cs/DialPad/DialPadKeyboardData.mock.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,WAAW,EAAE,CAAC,EAAE;IAC1C,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,WAAW,EAAE,CAAC,EAAE;IAC1C,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,WAAW,EAAE,CAAC,EAAE;IAC1C,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,WAAW,EAAE,CAAC,EAAE;IAC1C,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,WAAW,EAAE,CAAC,EAAE;IAC1C,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,WAAW,EAAE,CAAC,EAAE;IAC1C,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,WAAW,EAAE,CAAC,EAAE;IAC1C,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,WAAW,EAAE,CAAC,EAAE;IAC1C,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,WAAW,EAAE,CAAC,EAAE;IAC1C,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,WAAW,EAAE,CAAC,EAAE;IAC1C,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE;IAC3C,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE;IAC3C,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE;CAC5C,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG;IACpC,GAAG,eAAe;IAClB,EAAE,GAAG,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,EAAE,WAAW,EAAE,EAAE,EAAE;CACrD,CAAC","sourcesContent":["export const dialPadKeysMock = [\n  { key: '1', charCode: 49, buttonIndex: 0 },\n  { key: '2', charCode: 50, buttonIndex: 1 },\n  { key: '3', charCode: 51, buttonIndex: 2 },\n  { key: '4', charCode: 52, buttonIndex: 3 },\n  { key: '5', charCode: 53, buttonIndex: 4 },\n  { key: '6', charCode: 54, buttonIndex: 5 },\n  { key: '7', charCode: 55, buttonIndex: 6 },\n  { key: '8', charCode: 56, buttonIndex: 7 },\n  { key: '9', charCode: 57, buttonIndex: 8 },\n  { key: '*', charCode: 42, buttonIndex: 9 },\n  { key: '0', charCode: 48, buttonIndex: 10 },\n  { key: '#', charCode: 35, buttonIndex: 11 },\n  { key: '+', charCode: 43, buttonIndex: 10 }\n];\n\nexport const defaultDialPadKeysMock = [\n  ...dialPadKeysMock,\n  { key: 'Backspace', charCode: 127, buttonIndex: 12 }\n];\n"]}

package/lib/cs/InteractionNotification/InteractionNotification.stories.d.ts

@@ -1,12 +0,0 @@
-import type { StoryFn } from '@storybook/react';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
-export default _default;
-interface InteractionNotificationDemoProps {
-    icon: string;
-    secondaryText: string;
-    declineAvailable: boolean;
-    timerAvailable: boolean;
-    answerTimeout: number;
-}
-export declare const InteractionNotificationDemo: StoryFn<InteractionNotificationDemoProps>;
-//# sourceMappingURL=InteractionNotification.stories.d.ts.map

package/lib/cs/InteractionNotification/InteractionNotification.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"InteractionNotification.stories.d.ts","sourceRoot":"","sources":["../../../src/cs/InteractionNotification/InteractionNotification.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;;AAMtD,wBAGU;AAEV,UAAU,gCAAgC;IACxC,IAAI,EAAE,MAAM,CAAC;IACb,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,cAAc,EAAE,OAAO,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,2BAA2B,EAAE,OAAO,CAAC,gCAAgC,CA+CjF,CAAC"}

package/lib/cs/InteractionNotification/InteractionNotification.stories.js

@@ -1,55 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { action } from '@storybook/addon-actions';
-import { useRef } from 'react';
-import { InteractionNotification } from '@pega/cosmos-react-cs';
-import { icons, useI18n, useToaster } from '@pega/cosmos-react-core';
-export default {
-    title: 'Customer Service/InteractionNotification',
-    component: InteractionNotification
-};
-export const InteractionNotificationDemo = (args) => {
-    const incomingNotificationTimeout = useRef(Date.now());
-    const { push } = useToaster();
-    const t = useI18n();
-    return (_jsx(InteractionNotification, { icon: args.icon, title: 'Incoming call', primaryText: 'John Brown', secondaryText: args.secondaryText, status: {
-            variant: 'success',
-            text: 'VERIFIED PLATINUM CUSTOMER'
-        }, fields: [
-            {
-                id: 'reason',
-                name: 'Reason for calling',
-                value: 'Billing question'
-            },
-            {
-                id: 'openCases',
-                name: 'Open cases',
-                value: '1'
-            },
-            {
-                id: 'lastInteraction',
-                name: 'Last interaction',
-                value: new Date().toLocaleDateString()
-            }
-        ], incomingNotificationTimeout: args.timerAvailable
-            ? {
-                startTime: incomingNotificationTimeout.current,
-                answerTimeout: args.answerTimeout,
-                onTimerEnd: () => push({ content: t('interaction_time_expired') })
-            }
-            : undefined, onAccept: action('accept'), onDecline: args.declineAvailable ? action('decline') : undefined }));
-};
-InteractionNotificationDemo.args = {
-    icon: 'phone-in-solid',
-    secondaryText: '(123) 456-7890',
-    declineAvailable: true,
-    timerAvailable: true,
-    answerTimeout: 30
-};
-InteractionNotificationDemo.argTypes = {
-    icon: { options: icons, control: { type: 'select', icons: true } },
-    secondaryText: { options: { type: 'text' } },
-    declineAvailable: { options: { type: 'boolean' } },
-    timerAvailable: { options: { type: 'boolean' } },
-    answerTimeout: { options: { type: 'number' } }
-};
-//# sourceMappingURL=InteractionNotification.stories.js.map

package/lib/cs/InteractionNotification/InteractionNotification.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"InteractionNotification.stories.js","sourceRoot":"","sources":["../../../src/cs/InteractionNotification/InteractionNotification.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAErE,eAAe;IACb,KAAK,EAAE,0CAA0C;IACjD,SAAS,EAAE,uBAAuB;CAC3B,CAAC;AAUV,MAAM,CAAC,MAAM,2BAA2B,GAA8C,CACpF,IAAsC,EACtC,EAAE;IACF,MAAM,2BAA2B,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;IACvD,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,EAAE,CAAC;IAC9B,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,KAAC,uBAAuB,IACtB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAC,eAAe,EACrB,WAAW,EAAC,YAAY,EACxB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,MAAM,EAAE;YACN,OAAO,EAAE,SAAS;YAClB,IAAI,EAAE,4BAA4B;SACnC,EACD,MAAM,EAAE;YACN;gBACE,EAAE,EAAE,QAAQ;gBACZ,IAAI,EAAE,oBAAoB;gBAC1B,KAAK,EAAE,kBAAkB;aAC1B;YACD;gBACE,EAAE,EAAE,WAAW;gBACf,IAAI,EAAE,YAAY;gBAClB,KAAK,EAAE,GAAG;aACX;YACD;gBACE,EAAE,EAAE,iBAAiB;gBACrB,IAAI,EAAE,kBAAkB;gBACxB,KAAK,EAAE,IAAI,IAAI,EAAE,CAAC,kBAAkB,EAAE;aACvC;SACF,EACD,2BAA2B,EACzB,IAAI,CAAC,cAAc;YACjB,CAAC,CAAC;gBACE,SAAS,EAAE,2BAA2B,CAAC,OAAO;gBAC9C,aAAa,EAAE,IAAI,CAAC,aAAa;gBACjC,UAAU,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,0BAA0B,CAAC,EAAE,CAAC;aACnE;YACH,CAAC,CAAC,SAAS,EAEf,QAAQ,EAAE,MAAM,CAAC,QAAQ,CAAC,EAC1B,SAAS,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,GAChE,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,2BAA2B,CAAC,IAAI,GAAG;IACjC,IAAI,EAAE,gBAAgB;IACtB,aAAa,EAAE,gBAAgB;IAC/B,gBAAgB,EAAE,IAAI;IACtB,cAAc,EAAE,IAAI;IACpB,aAAa,EAAE,EAAE;CAClB,CAAC;AAEF,2BAA2B,CAAC,QAAQ,GAAG;IACrC,IAAI,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;IAClE,aAAa,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC5C,gBAAgB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAClD,cAAc,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAChD,aAAa,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CAC/C,CAAC","sourcesContent":["import { action } from '@storybook/addon-actions';\nimport type { Meta, StoryFn } from '@storybook/react';\nimport { useRef } from 'react';\n\nimport { InteractionNotification } from '@pega/cosmos-react-cs';\nimport { icons, useI18n, useToaster } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Customer Service/InteractionNotification',\n  component: InteractionNotification\n} as Meta;\n\ninterface InteractionNotificationDemoProps {\n  icon: string;\n  secondaryText: string;\n  declineAvailable: boolean;\n  timerAvailable: boolean;\n  answerTimeout: number;\n}\n\nexport const InteractionNotificationDemo: StoryFn<InteractionNotificationDemoProps> = (\n  args: InteractionNotificationDemoProps\n) => {\n  const incomingNotificationTimeout = useRef(Date.now());\n  const { push } = useToaster();\n  const t = useI18n();\n\n  return (\n    <InteractionNotification\n      icon={args.icon}\n      title='Incoming call'\n      primaryText='John Brown'\n      secondaryText={args.secondaryText}\n      status={{\n        variant: 'success',\n        text: 'VERIFIED PLATINUM CUSTOMER'\n      }}\n      fields={[\n        {\n          id: 'reason',\n          name: 'Reason for calling',\n          value: 'Billing question'\n        },\n        {\n          id: 'openCases',\n          name: 'Open cases',\n          value: '1'\n        },\n        {\n          id: 'lastInteraction',\n          name: 'Last interaction',\n          value: new Date().toLocaleDateString()\n        }\n      ]}\n      incomingNotificationTimeout={\n        args.timerAvailable\n          ? {\n              startTime: incomingNotificationTimeout.current,\n              answerTimeout: args.answerTimeout,\n              onTimerEnd: () => push({ content: t('interaction_time_expired') })\n            }\n          : undefined\n      }\n      onAccept={action('accept')}\n      onDecline={args.declineAvailable ? action('decline') : undefined}\n    />\n  );\n};\n\nInteractionNotificationDemo.args = {\n  icon: 'phone-in-solid',\n  secondaryText: '(123) 456-7890',\n  declineAvailable: true,\n  timerAvailable: true,\n  answerTimeout: 30\n};\n\nInteractionNotificationDemo.argTypes = {\n  icon: { options: icons, control: { type: 'select', icons: true } },\n  secondaryText: { options: { type: 'text' } },\n  declineAvailable: { options: { type: 'boolean' } },\n  timerAvailable: { options: { type: 'boolean' } },\n  answerTimeout: { options: { type: 'number' } }\n};\n"]}

package/lib/cs/InteractionTimer/InteractionTimer.mocks.d.ts

@@ -1,11 +0,0 @@
-import { InteractionTimerProps } from '@pega/cosmos-react-cs';
-export declare const formatDuration: (duration: number) => {
-    visual: string;
-    ariaLabel: string;
-};
-export declare const InteractionTimerSLAMileStones: {
-    from: number;
-    to: number;
-}[];
-export declare const InteractionTimerStages: InteractionTimerProps['sla'][];
-//# sourceMappingURL=InteractionTimer.mocks.d.ts.map

package/lib/cs/InteractionTimer/InteractionTimer.mocks.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"InteractionTimer.mocks.d.ts","sourceRoot":"","sources":["../../../src/cs/InteractionTimer/InteractionTimer.mocks.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAE9D,eAAO,MAAM,cAAc,aAAc,MAAM;;;CAY9C,CAAC;AAEF,eAAO,MAAM,6BAA6B;;;GAazC,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,qBAAqB,CAAC,KAAK,CAAC,EAIhE,CAAC"}

package/lib/cs/InteractionTimer/InteractionTimer.mocks.js

@@ -1,29 +0,0 @@
-export const formatDuration = (duration) => {
-    const hours = Math.floor(duration / 3600);
-    const minutes = Math.floor((duration - hours * 3600) / 60);
-    const seconds = Math.floor(duration - hours * 3600 - minutes * 60);
-    return {
-        visual: `${hours > 0 ? `${hours}:` : ''}${hours > 0 && minutes < 10 ? `0${minutes}` : minutes}:${seconds < 10 ? '0' : ''}${seconds}`,
-        ariaLabel: `${hours > 0 ? `${hours} hours ` : ''}${minutes > 0 ? `${minutes} minutes ` : ''}${seconds > 0 ? `${seconds} seconds ` : ''}`
-    };
-};
-export const InteractionTimerSLAMileStones = [
-    {
-        from: 0,
-        to: 60
-    },
-    {
-        from: 60,
-        to: 120
-    },
-    {
-        from: 120,
-        to: 180
-    }
-];
-export const InteractionTimerStages = [
-    'goal',
-    'deadline',
-    'past-deadline'
-];
-//# sourceMappingURL=InteractionTimer.mocks.js.map

package/lib/cs/InteractionTimer/InteractionTimer.mocks.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"InteractionTimer.mocks.js","sourceRoot":"","sources":["../../../src/cs/InteractionTimer/InteractionTimer.mocks.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,QAAgB,EAAE,EAAE;IACjD,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAC;IAC1C,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,QAAQ,GAAG,KAAK,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;IAC3D,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,KAAK,GAAG,IAAI,GAAG,OAAO,GAAG,EAAE,CAAC,CAAC;IACnE,OAAO;QACL,MAAM,EAAE,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,GACrC,KAAK,GAAG,CAAC,IAAI,OAAO,GAAG,EAAE,CAAC,CAAC,CAAC,IAAI,OAAO,EAAE,CAAC,CAAC,CAAC,OAC9C,IAAI,OAAO,GAAG,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,OAAO,EAAE;QACvC,SAAS,EAAE,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,GAAG,OAAO,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,OAAO,WAAW,CAAC,CAAC,CAAC,EAAE,GACzF,OAAO,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,OAAO,WAAW,CAAC,CAAC,CAAC,EACxC,EAAE;KACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,6BAA6B,GAAG;IAC3C;QACE,IAAI,EAAE,CAAC;QACP,EAAE,EAAE,EAAE;KACP;IACD;QACE,IAAI,EAAE,EAAE;QACR,EAAE,EAAE,GAAG;KACR;IACD;QACE,IAAI,EAAE,GAAG;QACT,EAAE,EAAE,GAAG;KACR;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAmC;IACpE,MAAM;IACN,UAAU;IACV,eAAe;CAChB,CAAC","sourcesContent":["import { InteractionTimerProps } from '@pega/cosmos-react-cs';\n\nexport const formatDuration = (duration: number) => {\n  const hours = Math.floor(duration / 3600);\n  const minutes = Math.floor((duration - hours * 3600) / 60);\n  const seconds = Math.floor(duration - hours * 3600 - minutes * 60);\n  return {\n    visual: `${hours > 0 ? `${hours}:` : ''}${\n      hours > 0 && minutes < 10 ? `0${minutes}` : minutes\n    }:${seconds < 10 ? '0' : ''}${seconds}`,\n    ariaLabel: `${hours > 0 ? `${hours} hours ` : ''}${minutes > 0 ? `${minutes} minutes ` : ''}${\n      seconds > 0 ? `${seconds} seconds ` : ''\n    }`\n  };\n};\n\nexport const InteractionTimerSLAMileStones = [\n  {\n    from: 0,\n    to: 60\n  },\n  {\n    from: 60,\n    to: 120\n  },\n  {\n    from: 120,\n    to: 180\n  }\n];\n\nexport const InteractionTimerStages: InteractionTimerProps['sla'][] = [\n  'goal',\n  'deadline',\n  'past-deadline'\n];\n"]}

package/lib/cs/InteractionTimer/InteractionTimer.stories.d.ts

@@ -1,11 +0,0 @@
-import type { StoryFn } from '@storybook/react';
-import type { InteractionTimerProps } from '@pega/cosmos-react-cs';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
-export default _default;
-export interface InteractionTimerStoryProps extends InteractionTimerProps {
-    id?: string;
-    showTimer?: boolean;
-    interactionType?: string;
-}
-export declare const InteractionTimerDemo: StoryFn<InteractionTimerStoryProps>;
-//# sourceMappingURL=InteractionTimer.stories.d.ts.map

package/lib/cs/InteractionTimer/InteractionTimer.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"InteractionTimer.stories.d.ts","sourceRoot":"","sources":["../../../src/cs/InteractionTimer/InteractionTimer.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAItD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;;AASnE,wBAGU;AAEV,MAAM,WAAW,0BAA2B,SAAQ,qBAAqB;IACvE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,oBAAoB,EAAE,OAAO,CAAC,0BAA0B,CAsGpE,CAAC"}