@pega/cosmos-react-demos 3.0.0-dev.2.0 → 3.0.0-dev.21.0

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

@@ -1,17 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { array, text } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
-import { useRef, useState } from 'react';
-import { createUID } from '@pega/cosmos-react-core';
-import { CallControlPanel, CalleePicker } from '@pega/cosmos-react-cs';
-import { contactsList, transferReasons, userStatusOptions } from './CallControlPanel.mocks';
+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, transferReasons, userStatusOptions } from './CallControlPanel.mocks';
 export default {
     title: 'Customer Service/CallControlPanel',
     component: CallControlPanel,
     args: {
+        heading: 'Agent',
         isDraggable: true
     },
     argTypes: {
+        heading: { control: { type: 'text' } },
         isDraggable: { control: { type: 'boolean' } }
     }
 };
@@ -19,47 +21,76 @@ export const CallControlPanelDemo = (args) => {
     const [currentStatus, setCurrentStatus] = useState(args.status || 'available');
     const inStatusSince = useRef(Date.now());
     const [calls, setCalls] = useState([]);
-    const slaConfig = array('SLA timeouts', ['30', '50']).map(Number);
     const [contacts, setContacts] = useState(contactsList);
-    const [error, setError] = useState();
     const callsList = useRef(calls);
     callsList.current = calls;
-    const onPauseToggle = (id) => {
-        const activeCallIndex = callsList.current.findIndex((call) => call.id === id);
-        const activeCall = callsList.current[activeCallIndex];
-        callsList.current.splice(activeCallIndex, 1, {
-            ...activeCall,
-            onHoldSince: activeCall.onHoldSince === undefined ? Date.now() : undefined
-        });
-        setCalls([...callsList.current]);
-    };
     const onMuteToggle = (id) => {
-        const activeCallIndex = callsList.current.findIndex((call) => call.id === id);
-        const activeCall = callsList.current[activeCallIndex];
-        callsList.current.splice(activeCallIndex, 1, {
-            ...activeCall,
-            muted: !activeCall.muted
+        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 activeCall = callsList.current.find((call) => call.id === id);
-        if (!activeCall)
+        const thisCall = callsList.current.find(call => call.id === id);
+        const activeCallIndex = callsList.current.findIndex(call => !call.onHoldSince);
+        if (!thisCall || !activeCallIndex)
             return;
-        callsList.current.splice(0, 1, {
-            ...callsList.current[0],
-            participants: [...callsList.current[0].participants, ...activeCall.participants],
+        callsList.current.splice(activeCallIndex, 1, {
+            ...callsList.current[activeCallIndex],
+            participants: [...callsList.current[activeCallIndex].participants, ...thisCall.participants],
             onHoldSince: undefined
         });
-        setCalls([...callsList.current.filter(callId => callId.id !== id)]);
+        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) => {
-        const newList = callsList.current.filter(item => item.id !== id);
-        setCalls(newList);
+        setCalls(callsList.current.filter(item => item.id !== id));
     };
-    const onConsultAction = (id, phoneNumber) => {
-        const caller = contactsList.find(person => person.phoneNumber === phoneNumber);
-        const consultCall = {
+    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,
@@ -67,93 +98,66 @@ export const CallControlPanelDemo = (args) => {
             muted: false,
             onMuteToggle,
             onPauseToggle,
+            onHandOffCall,
+            onEndCall,
             participants: [
                 {
                     name: caller?.primary || '',
                     info: caller?.secondary || '',
                     id: caller?.primary || '',
-                    onEndCall: (callId, participantId) => {
-                        // find consult call
-                        const callIndex = callsList.current.findIndex(call => call.id === consultCall.id);
-                        // end consult call if still exists
-                        if (callIndex !== -1)
-                            onEndCall(callId);
-                        else {
-                            const activeCallIndex = callsList.current.findIndex(call => call.id === callId);
-                            const activeCall = callsList.current[activeCallIndex];
-                            callsList.current.splice(activeCallIndex, 1, {
-                                ...activeCall,
-                                participants: [
-                                    ...activeCall.participants.filter(participant => participant.id === participantId)
-                                ]
-                            });
-                            setCalls([...callsList.current]);
-                        }
-                    }
+                    onHangUp
                 }
             ]
         };
-        const updatedCalls = callsList.current.map((call) => {
-            return { ...call, onHoldSince: Date.now() };
+        callsList.current.splice(0, 1, {
+            ...callsList.current[0],
+            participants: [...callsList.current[0].participants, ...conferenceCall.participants],
+            onHoldSince: undefined
         });
-        updatedCalls.push(consultCall);
-        setCalls(updatedCalls);
+        setCalls([...callsList.current.filter(call => call.id !== conferenceCall.id)]);
     };
-    const onConferenceAction = (id, phoneNumber) => {
-        const caller = contactsList.find(person => person.phoneNumber === phoneNumber);
-        const conferenceCall = {
+    const onConsultAction = (id, data) => {
+        const caller = contactsList.find(person => person.phoneNumber === data.phoneNumber);
+        const consultCall = {
             id: createUID(),
             startedAt: Date.now(),
-            onMergeCall,
             transferOptions: transferReasons,
             muted: false,
             onMuteToggle,
             onPauseToggle,
+            onMergeCall,
+            onHandOffCall,
+            onDTMFPress: action('onDTMFPress'),
+            onTransferAction: (callId, transferData) => {
+                action('onTransferAction')(callId, transferData);
+                onEndCall(id);
+            },
+            onConsultAction,
+            onConferenceAction,
+            onEndCall,
             participants: [
                 {
                     name: caller?.primary || '',
                     info: caller?.secondary || '',
                     id: caller?.primary || '',
-                    onEndCall: (callId, participantId) => {
-                        // find conference call
-                        const callIndex = callsList.current.findIndex(call => call.id === conferenceCall.id);
-                        // end conference call if still exists
-                        if (callIndex !== -1)
-                            onEndCall(callId);
-                        else {
-                            const activeCallIndex = callsList.current.findIndex(call => call.id === callId);
-                            const activeCall = callsList.current[activeCallIndex];
-                            callsList.current.splice(activeCallIndex, 1, {
-                                ...activeCall,
-                                participants: [
-                                    ...activeCall.participants.filter(participant => participant.id === participantId)
-                                ]
-                            });
-                            setCalls([...callsList.current]);
-                        }
-                    }
+                    onHangUp
                 }
             ]
         };
-        callsList.current.splice(0, 1, {
-            ...callsList.current[0],
-            participants: [...callsList.current[0].participants, ...conferenceCall.participants],
-            onHoldSince: undefined
+        const updatedCalls = callsList.current.map(call => {
+            return { ...call, onHoldSince: Date.now(), onMergeCall, onPauseToggle: undefined };
         });
-        setCalls([...callsList.current.filter(callId => callId.id !== conferenceCall.id)]);
+        updatedCalls.push(consultCall);
+        setCalls(updatedCalls);
     };
-    return (_jsx(CallControlPanel, { heading: text('Heading', 'Agent Smith'), statusOptions: userStatusOptions, status: currentStatus, inStatusSince: inStatusSince.current, onStatusChange: value => {
-            if (value === 'reconnecting') {
-                setError('You cannot set this status');
-                return;
-            }
+    return (_jsx(CallControlPanel, { visible: args.visible ?? true, heading: args.heading, statusOptions: userStatusOptions, status: currentStatus, inStatusSince: inStatusSince.current, onStatusChange: value => {
             setCurrentStatus(value);
-            args.onStatusChange?.(userStatusOptions.find(s => s.id === value));
-        }, message: error, calls: calls, draggable: args.isDraggable, onAddCall: (phoneNumber) => {
+            args.onStatusChange?.(userStatusOptions.find(s => s.id === value) ?? userStatusOptions[0]);
+        }, calls: calls, draggable: args.isDraggable, onAddCall: (phoneNumber) => {
             const call = {
                 id: createUID(),
                 startedAt: Date.now(),
-                slaConfig,
+                slaConfig: [30, 50],
                 onConsultAction,
                 onConferenceAction,
                 transferOptions: transferReasons,
@@ -164,13 +168,15 @@ export const CallControlPanelDemo = (args) => {
                 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',
-                        onEndCall: () => onEndCall(call.id)
+                        onHangUp
                     }
                 ]
             };
@@ -180,14 +186,53 @@ export const CallControlPanelDemo = (args) => {
             const element = contacts.find(item => item.phoneNumber === phoneNumber);
             element.favorite = !favorite;
             setContacts([...contacts]);
-        } }, void 0));
+        } }));
 };
-export const NewCallDemo = () => {
-    const [items, setItems] = useState(contactsList);
-    return (_jsx(CalleePicker, { heading: 'New call', contactsList: contactsList, onFavoriteToggle: (phoneNumber, favorite) => {
-            const element = items.find(item => item.phoneNumber === phoneNumber);
-            element.favorite = !favorite;
-            setItems([...items]);
-        }, onCall: phoneNumber => action('onCall')(phoneNumber) }, void 0));
+export const ExternalCTIDemo = (args) => {
+    const containerRef = useRef(null);
+    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 }));
+};
+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 +1 @@
-{"version":3,"file":"CallControlPanel.stories.js","sourceRoot":"","sources":["../../../src/cs/CallControlPanel/CallControlPanel.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { array, text } from '@storybook/addon-knobs';\nimport { action } from '@storybook/addon-actions';\nimport { useRef, useState } from 'react';\nimport { Meta, Story } from '@storybook/react';\n\nimport { createUID } from '@pega/cosmos-react-core';\nimport {\n  CallControlPanel,\n  CalleePicker,\n  CallProps,\n  UserAvailabilityStatusOption\n} from '@pega/cosmos-react-cs';\n\nimport { contactsList, transferReasons, userStatusOptions } from './CallControlPanel.mocks';\n\nexport default {\n  title: 'Customer Service/CallControlPanel',\n  component: CallControlPanel,\n  args: {\n    isDraggable: true\n  },\n  argTypes: {\n    isDraggable: { control: { type: 'boolean' } }\n  }\n} as Meta;\n\ninterface CallControlPanelStoryProps {\n  isDraggable?: boolean;\n  status?: UserAvailabilityStatusOption['id'];\n  onStatusChange?: (newStatus: UserAvailabilityStatusOption) => void;\n}\n\nexport const CallControlPanelDemo: Story<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[]>([]);\n  const slaConfig = array('SLA timeouts', ['30', '50']).map(Number);\n  const [contacts, setContacts] = useState(contactsList);\n  const [error, setError] = useState<string>();\n  const callsList = useRef(calls);\n  callsList.current = calls;\n\n  const onPauseToggle = (id: string) => {\n    const activeCallIndex = callsList.current.findIndex((call: CallProps) => call.id === id);\n    const activeCall = callsList.current[activeCallIndex];\n    callsList.current.splice(activeCallIndex, 1, {\n      ...activeCall,\n      onHoldSince: activeCall.onHoldSince === undefined ? Date.now() : undefined\n    });\n    setCalls([...callsList.current]);\n  };\n\n  const onMuteToggle = (id: string) => {\n    const activeCallIndex = callsList.current.findIndex((call: CallProps) => call.id === id);\n    const activeCall = callsList.current[activeCallIndex];\n    callsList.current.splice(activeCallIndex, 1, {\n      ...activeCall,\n      muted: !activeCall.muted\n    });\n    setCalls([...callsList.current]);\n  };\n\n  const onMergeCall = (id: string) => {\n    const activeCall = callsList.current.find((call: CallProps) => call.id === id);\n    if (!activeCall) return;\n    callsList.current.splice(0, 1, {\n      ...callsList.current[0],\n      participants: [...callsList.current[0].participants, ...activeCall.participants],\n      onHoldSince: undefined\n    });\n    setCalls([...callsList.current.filter(callId => callId.id !== id)]);\n  };\n\n  const onEndCall = (id: CallProps['id']) => {\n    const newList = callsList.current.filter(item => item.id !== id);\n    setCalls(newList);\n  };\n\n  const onConsultAction = (id: string, phoneNumber: string) => {\n    const caller = contactsList.find(person => person.phoneNumber === phoneNumber);\n    const consultCall: CallProps = {\n      id: createUID(),\n      startedAt: Date.now(),\n      onMergeCall,\n      transferOptions: transferReasons,\n      muted: false,\n      onMuteToggle,\n      onPauseToggle,\n      participants: [\n        {\n          name: caller?.primary || '',\n          info: caller?.secondary || '',\n          id: caller?.primary || '',\n          onEndCall: (callId, participantId) => {\n            // find consult call\n            const callIndex = callsList.current.findIndex(call => call.id === consultCall.id);\n            // end consult call if still exists\n            if (callIndex !== -1) onEndCall(callId);\n            else {\n              const activeCallIndex = callsList.current.findIndex(call => call.id === callId);\n              const activeCall = callsList.current[activeCallIndex];\n              callsList.current.splice(activeCallIndex, 1, {\n                ...activeCall,\n                participants: [\n                  ...activeCall.participants.filter(participant => participant.id === participantId)\n                ]\n              });\n              setCalls([...callsList.current]);\n            }\n          }\n        }\n      ]\n    };\n    const updatedCalls: CallProps[] = callsList.current.map((call: CallProps) => {\n      return { ...call, onHoldSince: Date.now() };\n    });\n    updatedCalls.push(consultCall);\n    setCalls(updatedCalls);\n  };\n\n  const onConferenceAction = (id: string, phoneNumber: string) => {\n    const caller = contactsList.find(person => person.phoneNumber === phoneNumber);\n    const conferenceCall: CallProps = {\n      id: createUID(),\n      startedAt: Date.now(),\n      onMergeCall,\n      transferOptions: transferReasons,\n      muted: false,\n      onMuteToggle,\n      onPauseToggle,\n      participants: [\n        {\n          name: caller?.primary || '',\n          info: caller?.secondary || '',\n          id: caller?.primary || '',\n          onEndCall: (callId, participantId) => {\n            // find conference call\n            const callIndex = callsList.current.findIndex(call => call.id === conferenceCall.id);\n            // end conference call if still exists\n            if (callIndex !== -1) onEndCall(callId);\n            else {\n              const activeCallIndex = callsList.current.findIndex(call => call.id === callId);\n              const activeCall = callsList.current[activeCallIndex];\n              callsList.current.splice(activeCallIndex, 1, {\n                ...activeCall,\n                participants: [\n                  ...activeCall.participants.filter(participant => participant.id === participantId)\n                ]\n              });\n              setCalls([...callsList.current]);\n            }\n          }\n        }\n      ]\n    };\n\n    callsList.current.splice(0, 1, {\n      ...callsList.current[0],\n      participants: [...callsList.current[0].participants, ...conferenceCall.participants],\n      onHoldSince: undefined\n    });\n    setCalls([...callsList.current.filter(callId => callId.id !== conferenceCall.id)]);\n  };\n\n  return (\n    <CallControlPanel\n      heading={text('Heading', 'Agent Smith')}\n      statusOptions={userStatusOptions as UserAvailabilityStatusOption[]}\n      status={currentStatus}\n      inStatusSince={inStatusSince.current}\n      onStatusChange={value => {\n        if (value === 'reconnecting') {\n          setError('You cannot set this status');\n          return;\n        }\n        setCurrentStatus(value);\n        args.onStatusChange?.(\n          userStatusOptions.find(s => s.id === value) as UserAvailabilityStatusOption\n        );\n      }}\n      message={error}\n      calls={calls}\n      draggable={args.isDraggable}\n      onAddCall={(phoneNumber: string) => {\n        const call: CallProps = {\n          id: createUID(),\n          startedAt: Date.now(),\n          slaConfig,\n          onConsultAction,\n          onConferenceAction,\n          transferOptions: transferReasons,\n          onTransferAction: (id, data) => {\n            action('onTransferAction')(id, data);\n            onEndCall(id);\n          },\n          muted: false,\n          onMuteToggle,\n          onPauseToggle,\n          onDTMFPress: action('onDTMFPress'),\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              onEndCall: () => onEndCall(call.id)\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 NewCallDemo = () => {\n  const [items, setItems] = useState(contactsList);\n  return (\n    <CalleePicker\n      heading='New call'\n      contactsList={contactsList}\n      onFavoriteToggle={(phoneNumber: string, favorite: boolean) => {\n        const element = items.find(item => item.phoneNumber === phoneNumber);\n        element!.favorite = !favorite;\n        setItems([...items]);\n      }}\n      onCall={phoneNumber => action('onCall')(phoneNumber)}\n    />\n  );\n};\n"]}
+{"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,EACL,gBAAgB,EAChB,WAAW,EAMZ,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EACL,YAAY,EACZ,2BAA2B,EAE3B,eAAe,EACf,iBAAiB,EAClB,MAAM,0BAA0B,CAAC;AAElC,eAAe;IACb,KAAK,EAAE,mCAAmC;IAC1C,SAAS,EAAE,gBAAgB;IAC3B,IAAI,EAAE;QACJ,OAAO,EAAE,OAAO;QAChB,WAAW,EAAE,IAAI;KAClB;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;KAC9C;CACM,CAAC;AAUV,MAAM,CAAC,MAAM,oBAAoB,GAAsC,CACrE,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,CAAc,EAAE,CAAC,CAAC;IACpD,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,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,CAAC,QAAQ,CAAC,KAAK;SACvB,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;QAChE,MAAM,eAAe,GAAG,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAE/E,IAAI,CAAC,QAAQ,IAAI,CAAC,eAAe;YAAE,OAAO;QAC1C,SAAS,CAAC,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,CAAC,EAAE;YAC3C,GAAG,SAAS,CAAC,OAAO,CAAC,eAAe,CAAC;YACrC,YAAY,EAAE,CAAC,GAAG,SAAS,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC,YAAY,EAAE,GAAG,QAAQ,CAAC,YAAY,CAAC;YAC5F,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,CAAC,GAAG,SAAS,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;IACtF,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,CAAC,QAAQ,CAAC,WAAW,CAAC;QACzC,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;IAC7D,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;QACxD,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,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,SAAS,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE;YAC7B,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC;YACvB,YAAY,EAAE,CAAC,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,YAAY,EAAE,GAAG,cAAc,CAAC,YAAY,CAAC;YACpF,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,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;QACF,MAAM,YAAY,GAAgB,SAAS,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YAC7D,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,OAAO,CACL,KAAC,gBAAgB,IACf,OAAO,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,EAC7B,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,aAAa,EAAE,iBAAiB,EAChC,MAAM,EAAE,aAAa,EACrB,aAAa,EAAE,aAAa,CAAC,OAAO,EACpC,cAAc,EAAE,KAAK,CAAC,EAAE;YACtB,gBAAgB,CAAC,KAAK,CAAC,CAAC;YACxB,IAAI,CAAC,cAAc,EAAE,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,KAAK,CAAC,IAAI,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC;QAC7F,CAAC,EACD,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,gBAAgB,EAAE,CAAC,EAAE,EAAE,IAAI,EAAE,EAAE;oBAC7B,MAAM,CAAC,kBAAkB,CAAC,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC;oBACrC,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;YACF,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,GAAqE,CAC/F,IAA+D,EAC/D,EAAE;IACF,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAElD,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,GACjB,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 { Meta, Story } from '@storybook/react';\nimport { lighten, readableColor } from 'polished';\n\nimport { createUID, tryCatch, useTheme } from '@pega/cosmos-react-core';\nimport {\n  CallControlPanel,\n  ExternalCTI,\n  CallProps,\n  CallParticipant,\n  TransferData,\n  UserAvailabilityStatusOption,\n  CallControlPanelProps\n} from '@pega/cosmos-react-cs';\n\nimport {\n  contactsList,\n  createExternalIframeContent,\n  ExternalStyles,\n  transferReasons,\n  userStatusOptions\n} from './CallControlPanel.mocks';\n\nexport default {\n  title: 'Customer Service/CallControlPanel',\n  component: CallControlPanel,\n  args: {\n    heading: 'Agent',\n    isDraggable: true\n  },\n  argTypes: {\n    heading: { control: { type: 'text' } },\n    isDraggable: { control: { type: 'boolean' } }\n  }\n} as Meta;\n\ninterface CallControlPanelStoryProps {\n  heading: string;\n  isDraggable?: boolean;\n  status?: UserAvailabilityStatusOption['id'];\n  onStatusChange?: (newStatus: UserAvailabilityStatusOption) => void;\n  visible?: CallControlPanelProps['visible'];\n}\n\nexport const CallControlPanelDemo: Story<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[]>([]);\n  const [contacts, setContacts] = useState(contactsList);\n  const callsList = useRef(calls);\n  callsList.current = calls;\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.muted\n    });\n    setCalls([...callsList.current]);\n  };\n\n  const onMergeCall = (id: CallProps['id']) => {\n    const thisCall = callsList.current.find(call => call.id === id);\n    const activeCallIndex = callsList.current.findIndex(call => !call.onHoldSince);\n\n    if (!thisCall || !activeCallIndex) return;\n    callsList.current.splice(activeCallIndex, 1, {\n      ...callsList.current[activeCallIndex],\n      participants: [...callsList.current[activeCallIndex].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([...callsList.current.filter(call => call.id !== id && call.onHoldSince)]);\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.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  };\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];\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      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    callsList.current.splice(0, 1, {\n      ...callsList.current[0],\n      participants: [...callsList.current[0].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        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    const updatedCalls: CallProps[] = callsList.current.map(call => {\n      return { ...call, onHoldSince: Date.now(), onMergeCall, onPauseToggle: undefined };\n    });\n    updatedCalls.push(consultCall);\n    setCalls(updatedCalls);\n  };\n\n  return (\n    <CallControlPanel\n      visible={args.visible ?? true}\n      heading={args.heading}\n      statusOptions={userStatusOptions}\n      status={currentStatus}\n      inStatusSince={inStatusSince.current}\n      onStatusChange={value => {\n        setCurrentStatus(value);\n        args.onStatusChange?.(userStatusOptions.find(s => s.id === value) ?? userStatusOptions[0]);\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          onTransferAction: (id, data) => {\n            action('onTransferAction')(id, data);\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        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: Story<CallControlPanelStoryProps & { applyAppStyling: boolean }> = (\n  args: CallControlPanelStoryProps & { applyAppStyling: boolean }\n) => {\n  const containerRef = useRef<HTMLDivElement>(null);\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    />\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.js

@@ -6,7 +6,7 @@ export default {
     component: DialPad
 };
 export const DialPadDemo = (args) => {
-    return (_jsx("div", { style: { maxWidth: '25rem' }, children: _jsx(DialPad, { onCallButtonClick: action('Call button clicked'), onDialButtonClick: charCode => action('Dial button clicked')(String.fromCharCode(charCode)), mode: args.mode }, void 0) }, void 0));
+    return (_jsx("div", { style: { maxWidth: '25rem' }, children: _jsx(DialPad, { onCallButtonClick: action('Call button clicked'), onDialButtonClick: charCode => action('Dial button clicked')(String.fromCharCode(charCode)), mode: args.mode }) }));
 };
 DialPadDemo.args = {
     mode: 'default'

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

@@ -1 +1 @@
-{"version":3,"file":"DialPad.stories.js","sourceRoot":"","sources":["../../../src/cs/DialPad/DialPad.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAGlD,OAAO,EAAE,OAAO,EAAwB,MAAM,uBAAuB,CAAC;AAEtE,eAAe;IACb,KAAK,EAAE,0BAA0B;IACjC,SAAS,EAAE,OAAO;CACX,CAAC;AAMV,MAAM,CAAC,MAAM,WAAW,GAA4B,CAAC,IAAsB,EAAE,EAAE;IAC7E,OAAO,CACL,cAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,YAC/B,KAAC,OAAO,IACN,iBAAiB,EAAE,MAAM,CAAC,qBAAqB,CAAC,EAChD,iBAAiB,EAAE,QAAQ,CAAC,EAAE,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,EAC3F,IAAI,EAAE,IAAI,CAAC,IAAI,WACf,WACE,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 { Meta, Story } from '@storybook/react';\n\nimport { DialPad, 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: Story<DialPadDemoProps> = (args: DialPadDemoProps) => {\n  return (\n    <div style={{ maxWidth: '25rem' }}>\n      <DialPad\n        onCallButtonClick={action('Call button clicked')}\n        onDialButtonClick={charCode => action('Dial button clicked')(String.fromCharCode(charCode))}\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"]}
+{"version":3,"file":"DialPad.stories.js","sourceRoot":"","sources":["../../../src/cs/DialPad/DialPad.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAGlD,OAAO,EAAE,OAAO,EAAwB,MAAM,uBAAuB,CAAC;AAEtE,eAAe;IACb,KAAK,EAAE,0BAA0B;IACjC,SAAS,EAAE,OAAO;CACX,CAAC;AAMV,MAAM,CAAC,MAAM,WAAW,GAA4B,CAAC,IAAsB,EAAE,EAAE;IAC7E,OAAO,CACL,cAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,YAC/B,KAAC,OAAO,IACN,iBAAiB,EAAE,MAAM,CAAC,qBAAqB,CAAC,EAChD,iBAAiB,EAAE,QAAQ,CAAC,EAAE,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,EAC3F,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 { Meta, Story } from '@storybook/react';\n\nimport { DialPad, 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: Story<DialPadDemoProps> = (args: DialPadDemoProps) => {\n  return (\n    <div style={{ maxWidth: '25rem' }}>\n      <DialPad\n        onCallButtonClick={action('Call button clicked')}\n        onDialButtonClick={charCode => action('Dial button clicked')(String.fromCharCode(charCode))}\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/IntelligentGuidance/IntelligentGuidance.stories.d.ts

@@ -1,13 +1,6 @@
-/// <reference types="react" />
-import { IntelligentGuidanceProps } from '@pega/cosmos-react-cs';
-declare const _default: {
-    title: string;
-    component: import("react").FunctionComponent<IntelligentGuidanceProps & import("@pega/cosmos-react-core").ForwardProps>;
-    parameters: {
-        layout: string;
-    };
-};
+import { Meta, Story } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const IntelligentGuidanceDemo: () => JSX.Element;
-export declare const CaseViewWithIntelligentGuidance: () => JSX.Element;
+export declare const IntelligentGuidanceDemo: Story;
+export declare const CaseViewWithIntelligentGuidance: Story;
 //# sourceMappingURL=IntelligentGuidance.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"IntelligentGuidance.stories.d.ts","sourceRoot":"","sources":["../../../src/cs/IntelligentGuidance/IntelligentGuidance.stories.tsx"],"names":[],"mappings":";AAkBA,OAAO,EAML,wBAAwB,EACzB,MAAM,uBAAuB,CAAC;;;;;;;;AAgB/B,wBAME;AAEF,eAAO,MAAM,uBAAuB,mBA6BnC,CAAC;AAQF,eAAO,MAAM,+BAA+B,mBAyX3C,CAAC"}
+{"version":3,"file":"IntelligentGuidance.stories.d.ts","sourceRoot":"","sources":["../../../src/cs/IntelligentGuidance/IntelligentGuidance.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAuC/C,wBAMU;AAEV,eAAO,MAAM,uBAAuB,EAAE,KA6BrC,CAAC;AAIF,eAAO,MAAM,+BAA+B,EAAE,KA6X7C,CAAC"}

package/lib/cs/IntelligentGuidance/IntelligentGuidance.stories.js

@@ -4,14 +4,14 @@ import { Button, createUID, Form, Grid, Icon, registerIcon, Input, MenuButton, S
 import { CaseSummaryFields } from '@pega/cosmos-react-work';
 import { CSCaseView, TaskManager, TaskView, IntelligentGuidance } from '@pega/cosmos-react-cs';
 import * as userSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/user-solid.icon';
-import { AppShellDemo } from '@pega/cosmos-react-demos/lib/core/AppShell/AppShell.stories';
-import { TableDemo } from '@pega/cosmos-react-demos/lib/core/Table/Table.stories';
-import { AttachmentsMock } from '@pega/cosmos-react-demos/lib/work/CaseView/Attachments.mocks';
-import { Details } from '@pega/cosmos-react-demos/lib/work/CaseView/Details.mocks';
-import { PulseMock } from '@pega/cosmos-react-demos/lib/work/CaseView/Pulse.mocks';
-import { getTabs, MockSummaryList } from '@pega/cosmos-react-demos/lib/work/CaseView/CaseView.mocks';
-import { TimelineDemo } from '@pega/cosmos-react-demos/lib/work/Timeline/Timeline.stories';
-import { TaskPickerMockData } from '@pega/cosmos-react-demos/lib/cs/TaskManager/TaskManager.mocks';
+import { AppShellDemo } from '../../core/AppShell/AppShell.stories';
+import { TableDemo } from '../../core/Table/Table.stories';
+import { AttachmentsMock } from '../../work/CaseView/Attachments.mocks';
+import { Details } from '../../work/CaseView/Details.mocks';
+import { PulseMock } from '../../work/CaseView/Pulse.mocks';
+import { getTabs, MockSummaryList } from '../../work/CaseView/CaseView.mocks';
+import { TimelineDemo } from '../../work/Timeline/Timeline.stories';
+import { TaskPickerMockData } from '../TaskManager/TaskManager.mocks';
 registerIcon(userSolidIcon);
 export default {
     title: 'Customer Service/IntelligentGuidance',
@@ -47,12 +47,12 @@ export const IntelligentGuidanceDemo = () => {
             }
         }
     ]);
-    return _jsx(IntelligentGuidance, { items: items, heading: 'Intelligent guidance' }, void 0);
+    return _jsx(IntelligentGuidance, { items: items, heading: 'Intelligent guidance' });
 };
-const WRAP_UP_TASK_ID = createUID();
-const CHANGE_ADDRESS_TASK_ID = createUID();
-const UPDATE_PROFILE_TASK_ID = createUID();
 export const CaseViewWithIntelligentGuidance = () => {
+    const WRAP_UP_TASK_ID = createUID();
+    const CHANGE_ADDRESS_TASK_ID = createUID();
+    const UPDATE_PROFILE_TASK_ID = createUID();
     const [serviceTasks, setServiceTasks] = useState([
         {
             id: CHANGE_ADDRESS_TASK_ID,
@@ -95,19 +95,19 @@ export const CaseViewWithIntelligentGuidance = () => {
         return [
             {
                 id: 'Details',
-                content: _jsx(Details, {}, void 0)
+                content: _jsx(Details, {})
             },
             {
                 id: 'Pulse',
-                content: _jsx(PulseMock, {}, void 0)
+                content: _jsx(PulseMock, {})
             },
             {
                 id: 'Accounts',
-                content: _jsx(TableDemo, {}, void 0)
+                content: _jsx(TableDemo, {})
             },
             {
                 id: 'not found',
-                content: _jsx("h2", { children: "Not Found" }, void 0)
+                content: _jsx("h2", { children: "Not Found" })
             }
         ];
     }, []);
@@ -281,24 +281,24 @@ export const CaseViewWithIntelligentGuidance = () => {
             active: activeTaskId === WRAP_UP_TASK_ID
         }, main: _jsx(TaskView, { header: _jsx(Text, { variant: 'h2', children: activeTaskId === WRAP_UP_TASK_ID
                     ? 'Wrap up'
-                    : serviceTasks.find(task => task.id === activeTaskId)?.name }, void 0), actions: _jsx(MenuButton, { ref: formActionsElemRef, menu: {
+                    : serviceTasks.find(task => task.id === activeTaskId)?.name }), actions: _jsx(MenuButton, { ref: formActionsElemRef, menu: {
                     items: ['Option Number 1', 'Option Number 2', 'Option Number 3'].map((name) => ({
                         primary: name,
                         id: name,
                         onClick: () => { }
                     }))
-                }, text: 'Actions' }, void 0), children: _jsx(Form, { actions: _jsxs(_Fragment, { children: [_jsx(Button, { name: 'Cancel', onClick: () => {
+                }, text: 'Actions' }), children: _jsx(Form, { actions: _jsxs(_Fragment, { children: [_jsx(Button, { name: 'Cancel', onClick: () => {
                                 performTaskAction(activeTaskId, 'cancel');
-                            }, children: "Cancel" }, void 0), _jsxs("div", { children: [_jsx(Button, { name: 'Save', children: "Save" }, void 0), _jsx(Button, { name: 'Submit', variant: 'primary', onClick: () => {
+                            }, children: "Cancel" }), _jsxs("div", { children: [_jsx(Button, { name: 'Save', children: "Save" }), _jsx(Button, { name: 'Submit', variant: 'primary', onClick: () => {
                                         performTaskAction(activeTaskId, 'submit');
-                                    }, children: "Submit" }, void 0)] }, void 0)] }, void 0), children: _jsx(Grid, { container: { rowGap: 2 }, children: activeTaskId === WRAP_UP_TASK_ID ? (_jsx(TimelineDemo, {}, void 0)) : (Array.from({ length: 15 }, (undef, i) => {
+                                    }, children: "Submit" })] })] }), children: _jsx(Grid, { container: { rowGap: 2 }, children: activeTaskId === WRAP_UP_TASK_ID ? (_jsx(TimelineDemo, {})) : (Array.from({ length: 15 }, (undef, i) => {
                         const idx = i + 1;
                         return _jsx(Input, { label: `Field ${idx}` }, idx);
-                    })) }, void 0) }, void 0) }, void 0) }, void 0));
+                    })) }) }) }) }));
     const createDate = new Date(2016, 1, 8);
     const msInYear = 1000 * 60 * 60 * 24 * 365;
     const diffInYears = Math.floor((Date.now() - createDate.getTime()) / msInYear);
-    return (_jsx(AppShellDemo, { main: _jsx(CSCaseView, { caseId: caseId, heading: 'Intelligent Guidance demo case', icon: _jsx(Icon, { name: 'user-solid' }, void 0), tasks: taskWidget, summary: _jsx(CaseSummaryFields, { primaryFields: [
+    return (_jsx(AppShellDemo, { main: _jsx(CSCaseView, { caseId: caseId, heading: 'Intelligent Guidance demo case', icon: _jsx(Icon, { name: 'user-solid' }), tasks: taskWidget, summary: _jsx(CaseSummaryFields, { primaryFields: [
                     {
                         name: 'Member ID',
                         value: 'M204859F438G'
@@ -310,7 +310,7 @@ export const CaseViewWithIntelligentGuidance = () => {
                 ].map((f, i) => ({ ...f, id: `p-${i}` })), secondaryFields: [
                     {
                         name: 'Status',
-                        value: _jsx(Status, { variant: 'info', children: "New" }, void 0)
+                        value: _jsx(Status, { variant: 'info', children: "New" })
                     },
                     {
                         name: 'Assigned to',
@@ -324,14 +324,14 @@ export const CaseViewWithIntelligentGuidance = () => {
                         name: 'Update date',
                         value: `${diffInYears} years ago`
                     }
-                ].map((f, i) => ({ ...f, id: `s-${i}` })) }, void 0), tabs: {
+                ].map((f, i) => ({ ...f, id: `s-${i}` })) }), tabs: {
                 items: demoTabItems,
                 currentTabId: demoCurrentTabId,
                 onClick: (id) => setDemoCurrentTabId(id)
-            }, tabContent: demoTabContent, utilities: _jsxs(_Fragment, { children: [_jsx(AttachmentsMock, {}, void 0), _jsx(MockSummaryList, { icon: 'user-search', name: 'Stakeholders' }, void 0), _jsx(MockSummaryList, { icon: 'user-star', name: 'Followers' }, void 0)] }, void 0), utilitiesSummaryItems: [
+            }, tabContent: demoTabContent, utilities: _jsxs(_Fragment, { children: [_jsx(AttachmentsMock, {}), _jsx(MockSummaryList, { icon: 'user-search', name: 'Stakeholders' }), _jsx(MockSummaryList, { icon: 'user-star', name: 'Followers' })] }), utilitiesSummaryItems: [
                 { iconName: 'paper-clip', count: 4 },
                 { iconName: 'user-search-solid', count: 10 },
                 { iconName: 'user-star-solid', count: 5 }
-            ], intelligentGuidance: _jsx(IntelligentGuidance, { items: items, heading: 'Intelligent guidance' }, void 0) }, void 0) }, void 0));
+            ], intelligentGuidance: _jsx(IntelligentGuidance, { items: items, heading: 'Intelligent guidance' }) }) }));
 };
 //# sourceMappingURL=IntelligentGuidance.stories.js.map