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

package/jsx/cs/CallControlPanel/CallControlPanel.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"CallControlPanel.stories.jsx","sourceRoot":"","sources":["../../../src/cs/CallControlPanel/CallControlPanel.stories.tsx"],"names":[],"mappings":"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","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  IncomingCallProps,\n  CallParticipant,\n  TransferData,\n  UserAvailabilityStatusOption,\n  CallControlPanelProps\n} from '@pega/cosmos-react-cs';\n\nimport {\n  contactsList,\n  createExternalIframeContent,\n  ExternalStyles,\n  interactionOptions,\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    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: 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 | 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          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: Story<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        interactionOptions,\n        heading: 'Attach interaction to call',\n        ...(error && {\n          message: {\n            id: 'error',\n            heading: 'Error',\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"]}
+{"version":3,"file":"CallControlPanel.stories.jsx","sourceRoot":"","sources":["../../../src/cs/CallControlPanel/CallControlPanel.stories.tsx"],"names":[],"mappings":"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","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/jsx/cs/DialPad/DialPad.stories.d.ts

@@ -1,9 +1,9 @@
-import { Meta, Story } from '@storybook/react';
-import { DialPadKeyboardProps } from '@pega/cosmos-react-cs';
-declare const _default: Meta<import("@storybook/react").Args>;
+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: Story<DialPadDemoProps>;
+export declare const DialPadDemo: StoryFn<DialPadDemoProps>;
 //# sourceMappingURL=DialPad.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DialPad.stories.d.ts","sourceRoot":"","sources":["../../../src/cs/DialPad/DialPad.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAW,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;;AAEtE,wBAGU;AAEV,UAAU,gBAAgB;IACxB,IAAI,EAAE,oBAAoB,CAAC,MAAM,CAAC,CAAC;CACpC;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,gBAAgB,CAa/C,CAAC"}
+{"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/jsx/cs/DialPad/DialPad.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"DialPad.stories.jsx","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,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,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEnD,OAAO,CACL,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,CAChC;MAAA,CAAC,OAAO,CACN,KAAK,CAAC,CAAC,WAAW,CAAC,CACnB,WAAW,CAAC,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC,CAC3C,QAAQ,CAAC,CAAC,cAAc,CAAC,CACzB,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EAEpB;IAAA,EAAE,GAAG,CAAC,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';\nimport { useState } from '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  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"]}
+{"version":3,"file":"DialPad.stories.jsx","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,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,CAChC;MAAA,CAAC,OAAO,CACN,KAAK,CAAC,CAAC,WAAW,CAAC,CACnB,WAAW,CAAC,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC,CAC3C,QAAQ,CAAC,CAAC,cAAc,CAAC,CACzB,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EAEpB;IAAA,EAAE,GAAG,CAAC,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/jsx/cs/InteractionNotification/InteractionNotification.stories.d.ts

@@ -1,10 +1,12 @@
-import { Meta, Story } from '@storybook/react';
-declare const _default: Meta<import("@storybook/react").Args>;
+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;
-    acceptAvailable: boolean;
+    declineAvailable: boolean;
+    timerAvailable: boolean;
+    answerTimeout: number;
 }
-export declare const InteractionNotificationDemo: Story<InteractionNotificationDemoProps>;
+export declare const InteractionNotificationDemo: StoryFn<InteractionNotificationDemoProps>;
 //# sourceMappingURL=InteractionNotification.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"InteractionNotification.stories.d.ts","sourceRoot":"","sources":["../../../src/cs/InteractionNotification/InteractionNotification.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAK/C,wBAGU;AAEV,UAAU,gCAAgC;IACxC,IAAI,EAAE,MAAM,CAAC;IACb,aAAa,EAAE,MAAM,CAAC;IACtB,eAAe,EAAE,OAAO,CAAC;CAC1B;AAED,eAAO,MAAM,2BAA2B,EAAE,KAAK,CAAC,gCAAgC,CAiC/E,CAAC"}
+{"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/jsx/cs/InteractionNotification/InteractionNotification.stories.jsx

@@ -1,11 +1,15 @@
 import { action } from '@storybook/addon-actions';
+import { useRef } from 'react';
 import { InteractionNotification } from '@pega/cosmos-react-cs';
-import { icons } from '@pega/cosmos-react-core';
+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 (<InteractionNotification icon={args.icon} title='Incoming call' primaryText='John Brown' secondaryText={args.secondaryText} status={{
             variant: 'success',
             text: 'VERIFIED PLATINUM CUSTOMER'
@@ -25,16 +29,26 @@ export const InteractionNotificationDemo = (args) => {
                 name: 'Last interaction',
                 value: new Date().toLocaleDateString()
             }
-        ]} onAccept={args.acceptAvailable ? action('accept') : undefined}/>);
+        ]} 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',
-    acceptAvailable: true
+    declineAvailable: true,
+    timerAvailable: true,
+    answerTimeout: 30
 };
 InteractionNotificationDemo.argTypes = {
     icon: { options: icons, control: { type: 'select', icons: true } },
     secondaryText: { options: { type: 'text' } },
-    acceptAvailable: { options: { type: 'boolean' } }
+    declineAvailable: { options: { type: 'boolean' } },
+    timerAvailable: { options: { type: 'boolean' } },
+    answerTimeout: { options: { type: 'number' } }
 };
 //# sourceMappingURL=InteractionNotification.stories.jsx.map

package/jsx/cs/InteractionNotification/InteractionNotification.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"InteractionNotification.stories.jsx","sourceRoot":"","sources":["../../../src/cs/InteractionNotification/InteractionNotification.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAGlD,OAAO,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAEhD,eAAe;IACb,KAAK,EAAE,0CAA0C;IACjD,SAAS,EAAE,uBAAuB;CAC3B,CAAC;AAQV,MAAM,CAAC,MAAM,2BAA2B,GAA4C,CAClF,IAAsC,EACtC,EAAE;IACF,OAAO,CACL,CAAC,uBAAuB,CACtB,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAChB,KAAK,CAAC,eAAe,CACrB,WAAW,CAAC,YAAY,CACxB,aAAa,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAClC,MAAM,CAAC,CAAC;YACN,OAAO,EAAE,SAAS;YAClB,IAAI,EAAE,4BAA4B;SACnC,CAAC,CACF,MAAM,CAAC,CAAC;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,CAAC,CACF,QAAQ,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,EAC9D,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,2BAA2B,CAAC,IAAI,GAAG;IACjC,IAAI,EAAE,gBAAgB;IACtB,aAAa,EAAE,gBAAgB;IAC/B,eAAe,EAAE,IAAI;CACtB,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,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAClD,CAAC","sourcesContent":["import { action } from '@storybook/addon-actions';\nimport { Meta, Story } from '@storybook/react';\n\nimport { InteractionNotification } from '@pega/cosmos-react-cs';\nimport { icons } 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  acceptAvailable: boolean;\n}\n\nexport const InteractionNotificationDemo: Story<InteractionNotificationDemoProps> = (\n  args: InteractionNotificationDemoProps\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      onAccept={args.acceptAvailable ? action('accept') : undefined}\n    />\n  );\n};\n\nInteractionNotificationDemo.args = {\n  icon: 'phone-in-solid',\n  secondaryText: '(123) 456-7890',\n  acceptAvailable: true\n};\n\nInteractionNotificationDemo.argTypes = {\n  icon: { options: icons, control: { type: 'select', icons: true } },\n  secondaryText: { options: { type: 'text' } },\n  acceptAvailable: { options: { type: 'boolean' } }\n};\n"]}
+{"version":3,"file":"InteractionNotification.stories.jsx","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,CAAC,uBAAuB,CACtB,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAChB,KAAK,CAAC,eAAe,CACrB,WAAW,CAAC,YAAY,CACxB,aAAa,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAClC,MAAM,CAAC,CAAC;YACN,OAAO,EAAE,SAAS;YAClB,IAAI,EAAE,4BAA4B;SACnC,CAAC,CACF,MAAM,CAAC,CAAC;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,CAAC,CACF,2BAA2B,CAAC,CAC1B,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,CACd,CACD,QAAQ,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAC3B,SAAS,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,EACjE,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/jsx/cs/InteractionTimer/InteractionTimer.stories.d.ts

@@ -1,10 +1,11 @@
-import { Meta, Story } from '@storybook/react';
-import { InteractionTimerProps } from '@pega/cosmos-react-cs';
-declare const _default: Meta<import("@storybook/react").Args>;
+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: Story<InteractionTimerStoryProps>;
+export declare const InteractionTimerDemo: StoryFn<InteractionTimerStoryProps>;
 //# sourceMappingURL=InteractionTimer.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"InteractionTimer.stories.d.ts","sourceRoot":"","sources":["../../../src/cs/InteractionTimer/InteractionTimer.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAoB,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;;AAShF,wBAGU;AAEV,MAAM,WAAW,0BAA2B,SAAQ,qBAAqB;IACvE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,0BAA0B,CA0FlE,CAAC"}
+{"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"}

package/jsx/cs/InteractionTimer/InteractionTimer.stories.jsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { InteractionTimer } from '@pega/cosmos-react-cs';
-import { icons } from '@pega/cosmos-react-core';
+import { icons, useLiveLog } from '@pega/cosmos-react-core';
 import { formatDuration, InteractionTimerSLAMileStones, InteractionTimerStages } from './InteractionTimer.mocks';
 export default {
     title: 'Customer Service/InteractionTimer',
@@ -8,12 +8,14 @@ export default {
 };
 export const InteractionTimerDemo = (args) => {
     const [timerState, setTimerState] = useState({
-        ariaLabel: `${args.interactionType ? `${args.interactionType}, ` : ''}goal and 0 seconds passed`,
+        slaAnnouncement: `${args.interactionType ? `${args.interactionType}, ` : ''}goal and 0 seconds passed`,
         timer: '0:00',
         slaStage: 'goal',
         currentProgress: 0,
-        hasNotifications: false
+        hasNotifications: false,
+        ariaLabel: ''
     });
+    const { announcePolite } = useLiveLog();
     useEffect(() => {
         const latestCreatedAt = new Date().getTime();
         const timerInterval = args.showTimer &&
@@ -32,6 +34,7 @@ export const InteractionTimerDemo = (args) => {
                     return {
                         ...prev,
                         timer: formattedDuration.visual,
+                        ariaLabel: `${args.interactionType ? `${args.interactionType}, ` : ''}${formattedDuration.ariaLabel}`,
                         slaStage: InteractionTimerStages[currSlaStage],
                         currentProgress: Math.floor(Math.min(((timeElapsed - InteractionTimerSLAMileStones[currSlaStage].from) * 100) /
                             (InteractionTimerSLAMileStones[currSlaStage].to -
@@ -46,7 +49,7 @@ export const InteractionTimerDemo = (args) => {
             setTimerState(prev => {
                 return {
                     ...prev,
-                    ariaLabel: `${args.interactionType ? `${args.interactionType}, ` : ''}${prev.slaStage} and ${formattedDuration.ariaLabel}passed${prev.hasNotifications ? ' with new notifications' : ''}`
+                    slaAnnouncement: `${args.interactionType ? `${args.interactionType}, ` : ''}${prev.slaStage} and ${formattedDuration.ariaLabel}passed${prev.hasNotifications ? ' with new notifications' : ''}`
                 };
             });
         }, 15000);
@@ -57,7 +60,11 @@ export const InteractionTimerDemo = (args) => {
                 setTimerState({ ...timerState, timer: '0:00' });
             };
     }, [args.hasNotifications, args.showTimer, args.interactionType]);
-    return (<InteractionTimer sla={args.showTimer ? timerState.slaStage : args.sla} hasNotifications={args.hasNotifications ? timerState.hasNotifications : false} icon={args.icon} meta={args.showTimer ? timerState.timer : args.meta} progress={timerState.currentProgress} ariaLabel={timerState.ariaLabel}/>);
+    useEffect(() => {
+        if (timerState.slaAnnouncement)
+            announcePolite({ message: timerState.slaAnnouncement });
+    }, [timerState.slaAnnouncement]);
+    return (<InteractionTimer id={args.id} sla={args.showTimer ? timerState.slaStage : args.sla} hasNotifications={args.hasNotifications ? timerState.hasNotifications : false} icon={args.icon} meta={args.showTimer ? timerState.timer : args.meta} progress={timerState.currentProgress} ariaLabel={timerState.ariaLabel}/>);
 };
 InteractionTimerDemo.args = {
     hasNotifications: true,

package/jsx/cs/InteractionTimer/InteractionTimer.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"InteractionTimer.stories.jsx","sourceRoot":"","sources":["../../../src/cs/InteractionTimer/InteractionTimer.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,gBAAgB,EAAyB,MAAM,uBAAuB,CAAC;AAChF,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAEhD,OAAO,EACL,cAAc,EACd,6BAA6B,EAC7B,sBAAsB,EACvB,MAAM,0BAA0B,CAAC;AAElC,eAAe;IACb,KAAK,EAAE,mCAAmC;IAC1C,SAAS,EAAE,gBAAgB;CACpB,CAAC;AAOV,MAAM,CAAC,MAAM,oBAAoB,GAAsC,CACrE,IAAgC,EAChC,EAAE;IACF,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAMzC;QACD,SAAS,EAAE,GACT,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,eAAe,IAAI,CAAC,CAAC,CAAC,EACvD,2BAA2B;QAC3B,KAAK,EAAE,MAAM;QACb,QAAQ,EAAE,MAAM;QAChB,eAAe,EAAE,CAAC;QAClB,gBAAgB,EAAE,KAAK;KACxB,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,eAAe,GAAG,IAAI,IAAI,EAAE,CAAC,OAAO,EAAE,CAAC;QAC7C,MAAM,aAAa,GACjB,IAAI,CAAC,SAAS;YACd,WAAW,CAAC,GAAG,EAAE;gBACf,MAAM,WAAW,GAAG,CAAC,IAAI,IAAI,EAAE,CAAC,OAAO,EAAE,GAAG,eAAe,CAAC,GAAG,IAAI,CAAC;gBACpE,MAAM,YAAY,GAAG,6BAA6B,CAAC,MAAM,CACvD,CAAC,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,EAAE,EAAE;oBAC1C,IACE,WAAW,IAAI,SAAS,CAAC,IAAI;wBAC7B,CAAC,WAAW,IAAI,SAAS,CAAC,EAAE,IAAI,YAAY,KAAK,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,EAChE;wBACA,OAAO,YAAY,CAAC;qBACrB;oBACD,OAAO,SAAS,CAAC;gBACnB,CAAC,EACD,CAAC,CACF,CAAC;gBAEF,MAAM,gBAAgB,GAAG,YAAY,GAAG,CAAC,CAAC;gBAC1C,MAAM,iBAAiB,GAAG,cAAc,CAAC,WAAW,CAAC,CAAC;gBACtD,aAAa,CAAC,IAAI,CAAC,EAAE;oBACnB,OAAO;wBACL,GAAG,IAAI;wBACP,KAAK,EAAE,iBAAiB,CAAC,MAAM;wBAC/B,QAAQ,EAAE,sBAAsB,CAAC,YAAY,CAAC;wBAC9C,eAAe,EAAE,IAAI,CAAC,KAAK,CACzB,IAAI,CAAC,GAAG,CACN,CAAC,CAAC,WAAW,GAAG,6BAA6B,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,CAAC;4BACtE,CAAC,6BAA6B,CAAC,YAAY,CAAC,CAAC,EAAE;gCAC7C,6BAA6B,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,EACrD,GAAG,CACJ,CACF;wBACD,gBAAgB;qBACjB,CAAC;gBACJ,CAAC,CAAC,CAAC;YACL,CAAC,EAAE,IAAI,CAAC,CAAC;QAEX,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE;YACpC,MAAM,WAAW,GAAG,CAAC,IAAI,IAAI,EAAE,CAAC,OAAO,EAAE,GAAG,eAAe,CAAC,GAAG,IAAI,CAAC;YACpE,MAAM,iBAAiB,GAAG,cAAc,CAAC,WAAW,CAAC,CAAC;YACtD,aAAa,CAAC,IAAI,CAAC,EAAE;gBACnB,OAAO;oBACL,GAAG,IAAI;oBACP,SAAS,EAAE,GAAG,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,eAAe,IAAI,CAAC,CAAC,CAAC,EAAE,GACnE,IAAI,CAAC,QACP,QAAQ,iBAAiB,CAAC,SAAS,SACjC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,EACtD,EAAE;iBACH,CAAC;YACJ,CAAC,CAAC,CAAC;QACL,CAAC,EAAE,KAAK,CAAC,CAAC;QACV,IAAI,aAAa,IAAI,YAAY;YAC/B,OAAO,GAAG,EAAE;gBACV,aAAa,CAAC,aAAa,CAAC,CAAC;gBAC7B,aAAa,CAAC,YAAY,CAAC,CAAC;gBAC5B,aAAa,CAAC,EAAE,GAAG,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC;YAClD,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC;IAElE,OAAO,CACL,CAAC,gBAAgB,CACf,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CACrD,gBAAgB,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAAC,CAAC,KAAK,CAAC,CAC9E,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAChB,IAAI,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CACpD,QAAQ,CAAC,CAAC,UAAU,CAAC,eAAe,CAAC,CACrC,SAAS,CAAC,CAAC,UAAU,CAAC,SAAS,CAAC,EAChC,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,oBAAoB,CAAC,IAAI,GAAG;IAC1B,gBAAgB,EAAE,IAAI;IACtB,IAAI,EAAE,YAAY;IAClB,SAAS,EAAE,IAAI;IACf,IAAI,EAAE,IAAI;IACV,eAAe,EAAE,kBAAkB;CACpC,CAAC;AAEF,oBAAoB,CAAC,QAAQ,GAAG;IAC9B,gBAAgB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAClD,IAAI,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;IAClE,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC3C,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACnC,eAAe,EAAE;QACf,KAAK,EAAE;YACL,OAAO,EAAE,IAAI;SACd;KACF;CACF,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useEffect, useState } from 'react';\n\nimport { InteractionTimer, InteractionTimerProps } from '@pega/cosmos-react-cs';\nimport { icons } from '@pega/cosmos-react-core';\n\nimport {\n  formatDuration,\n  InteractionTimerSLAMileStones,\n  InteractionTimerStages\n} from './InteractionTimer.mocks';\n\nexport default {\n  title: 'Customer Service/InteractionTimer',\n  component: InteractionTimer\n} as Meta;\n\nexport interface InteractionTimerStoryProps extends InteractionTimerProps {\n  showTimer?: boolean;\n  interactionType?: string;\n}\n\nexport const InteractionTimerDemo: Story<InteractionTimerStoryProps> = (\n  args: InteractionTimerStoryProps\n) => {\n  const [timerState, setTimerState] = useState<{\n    timer: string;\n    ariaLabel: string;\n    slaStage: InteractionTimerProps['sla'];\n    currentProgress: number;\n    hasNotifications: boolean;\n  }>({\n    ariaLabel: `${\n      args.interactionType ? `${args.interactionType}, ` : ''\n    }goal and 0 seconds passed`,\n    timer: '0:00',\n    slaStage: 'goal',\n    currentProgress: 0,\n    hasNotifications: false\n  });\n\n  useEffect(() => {\n    const latestCreatedAt = new Date().getTime();\n    const timerInterval =\n      args.showTimer &&\n      setInterval(() => {\n        const timeElapsed = (new Date().getTime() - latestCreatedAt) / 1000;\n        const currSlaStage = InteractionTimerSLAMileStones.reduce(\n          (prevValue, currValue, currentIndex, arr) => {\n            if (\n              timeElapsed >= currValue.from &&\n              (timeElapsed <= currValue.to || currentIndex === arr.length - 1)\n            ) {\n              return currentIndex;\n            }\n            return prevValue;\n          },\n          0\n        );\n\n        const hasNotifications = currSlaStage > 0;\n        const formattedDuration = formatDuration(timeElapsed);\n        setTimerState(prev => {\n          return {\n            ...prev,\n            timer: formattedDuration.visual,\n            slaStage: InteractionTimerStages[currSlaStage],\n            currentProgress: Math.floor(\n              Math.min(\n                ((timeElapsed - InteractionTimerSLAMileStones[currSlaStage].from) * 100) /\n                  (InteractionTimerSLAMileStones[currSlaStage].to -\n                    InteractionTimerSLAMileStones[currSlaStage].from),\n                100\n              )\n            ),\n            hasNotifications\n          };\n        });\n      }, 1000);\n\n    const ariaInterval = setInterval(() => {\n      const timeElapsed = (new Date().getTime() - latestCreatedAt) / 1000;\n      const formattedDuration = formatDuration(timeElapsed);\n      setTimerState(prev => {\n        return {\n          ...prev,\n          ariaLabel: `${args.interactionType ? `${args.interactionType}, ` : ''}${\n            prev.slaStage\n          } and ${formattedDuration.ariaLabel}passed${\n            prev.hasNotifications ? ' with new notifications' : ''\n          }`\n        };\n      });\n    }, 15000);\n    if (timerInterval && ariaInterval)\n      return () => {\n        clearInterval(timerInterval);\n        clearInterval(ariaInterval);\n        setTimerState({ ...timerState, timer: '0:00' });\n      };\n  }, [args.hasNotifications, args.showTimer, args.interactionType]);\n\n  return (\n    <InteractionTimer\n      sla={args.showTimer ? timerState.slaStage : args.sla}\n      hasNotifications={args.hasNotifications ? timerState.hasNotifications : false}\n      icon={args.icon}\n      meta={args.showTimer ? timerState.timer : args.meta}\n      progress={timerState.currentProgress}\n      ariaLabel={timerState.ariaLabel}\n    />\n  );\n};\n\nInteractionTimerDemo.args = {\n  hasNotifications: true,\n  icon: 'chat-solid',\n  showTimer: true,\n  meta: 'QR',\n  interactionType: 'Chat interaction'\n};\n\nInteractionTimerDemo.argTypes = {\n  hasNotifications: { control: { type: 'boolean' } },\n  icon: { options: icons, control: { type: 'select', icons: true } },\n  showTimer: { control: { type: 'boolean' } },\n  meta: { control: { type: 'text' } },\n  interactionType: {\n    table: {\n      disable: true\n    }\n  }\n};\n"]}
+{"version":3,"file":"InteractionTimer.stories.jsx","sourceRoot":"","sources":["../../../src/cs/InteractionTimer/InteractionTimer.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useEffect, useState } from 'react';\n\nimport { InteractionTimer } from '@pega/cosmos-react-cs';\nimport type { InteractionTimerProps } from '@pega/cosmos-react-cs';\nimport { icons, useLiveLog } from '@pega/cosmos-react-core';\n\nimport {\n  formatDuration,\n  InteractionTimerSLAMileStones,\n  InteractionTimerStages\n} from './InteractionTimer.mocks';\n\nexport default {\n  title: 'Customer Service/InteractionTimer',\n  component: InteractionTimer\n} as Meta;\n\nexport interface InteractionTimerStoryProps extends InteractionTimerProps {\n  id?: string;\n  showTimer?: boolean;\n  interactionType?: string;\n}\n\nexport const InteractionTimerDemo: StoryFn<InteractionTimerStoryProps> = (\n  args: InteractionTimerStoryProps\n) => {\n  const [timerState, setTimerState] = useState<{\n    timer: string;\n    ariaLabel: string;\n    slaStage: InteractionTimerProps['sla'];\n    currentProgress: number;\n    hasNotifications: boolean;\n    slaAnnouncement: string;\n  }>({\n    slaAnnouncement: `${\n      args.interactionType ? `${args.interactionType}, ` : ''\n    }goal and 0 seconds passed`,\n    timer: '0:00',\n    slaStage: 'goal',\n    currentProgress: 0,\n    hasNotifications: false,\n    ariaLabel: ''\n  });\n  const { announcePolite } = useLiveLog();\n\n  useEffect(() => {\n    const latestCreatedAt = new Date().getTime();\n    const timerInterval =\n      args.showTimer &&\n      setInterval(() => {\n        const timeElapsed = (new Date().getTime() - latestCreatedAt) / 1000;\n        const currSlaStage = InteractionTimerSLAMileStones.reduce(\n          (prevValue, currValue, currentIndex, arr) => {\n            if (\n              timeElapsed >= currValue.from &&\n              (timeElapsed <= currValue.to || currentIndex === arr.length - 1)\n            ) {\n              return currentIndex;\n            }\n            return prevValue;\n          },\n          0\n        );\n\n        const hasNotifications = currSlaStage > 0;\n        const formattedDuration = formatDuration(timeElapsed);\n        setTimerState(prev => {\n          return {\n            ...prev,\n            timer: formattedDuration.visual,\n            ariaLabel: `${args.interactionType ? `${args.interactionType}, ` : ''}${\n              formattedDuration.ariaLabel\n            }`,\n            slaStage: InteractionTimerStages[currSlaStage],\n            currentProgress: Math.floor(\n              Math.min(\n                ((timeElapsed - InteractionTimerSLAMileStones[currSlaStage].from) * 100) /\n                  (InteractionTimerSLAMileStones[currSlaStage].to -\n                    InteractionTimerSLAMileStones[currSlaStage].from),\n                100\n              )\n            ),\n            hasNotifications\n          };\n        });\n      }, 1000);\n\n    const ariaInterval = setInterval(() => {\n      const timeElapsed = (new Date().getTime() - latestCreatedAt) / 1000;\n      const formattedDuration = formatDuration(timeElapsed);\n      setTimerState(prev => {\n        return {\n          ...prev,\n          slaAnnouncement: `${args.interactionType ? `${args.interactionType}, ` : ''}${\n            prev.slaStage\n          } and ${formattedDuration.ariaLabel}passed${\n            prev.hasNotifications ? ' with new notifications' : ''\n          }`\n        };\n      });\n    }, 15000);\n\n    if (timerInterval && ariaInterval)\n      return () => {\n        clearInterval(timerInterval);\n        clearInterval(ariaInterval);\n        setTimerState({ ...timerState, timer: '0:00' });\n      };\n  }, [args.hasNotifications, args.showTimer, args.interactionType]);\n\n  useEffect(() => {\n    if (timerState.slaAnnouncement) announcePolite({ message: timerState.slaAnnouncement });\n  }, [timerState.slaAnnouncement]);\n\n  return (\n    <InteractionTimer\n      id={args.id}\n      sla={args.showTimer ? timerState.slaStage : args.sla}\n      hasNotifications={args.hasNotifications ? timerState.hasNotifications : false}\n      icon={args.icon}\n      meta={args.showTimer ? timerState.timer : args.meta}\n      progress={timerState.currentProgress}\n      ariaLabel={timerState.ariaLabel}\n    />\n  );\n};\n\nInteractionTimerDemo.args = {\n  hasNotifications: true,\n  icon: 'chat-solid',\n  showTimer: true,\n  meta: 'QR',\n  interactionType: 'Chat interaction'\n};\n\nInteractionTimerDemo.argTypes = {\n  hasNotifications: { control: { type: 'boolean' } },\n  icon: { options: icons, control: { type: 'select', icons: true } },\n  showTimer: { control: { type: 'boolean' } },\n  meta: { control: { type: 'text' } },\n  interactionType: {\n    table: {\n      disable: true\n    }\n  }\n};\n"]}

package/jsx/cs/Picker/Picker.stories.d.ts

@@ -0,0 +1,11 @@
+import type { StoryFn } from '@storybook/react';
+import type { OmitStrict } from '@pega/cosmos-react-core';
+import type { PickerProps } from '@pega/cosmos-react-cs/lib/components/Picker/Picker.types';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export interface PickerStoryProps extends OmitStrict<PickerProps, 'selections'> {
+    title?: string;
+}
+export declare const PickerDemo: StoryFn<PickerStoryProps>;
+export declare const PickerInModal: StoryFn<PickerStoryProps>;
+//# sourceMappingURL=Picker.stories.d.ts.map

package/jsx/cs/Picker/Picker.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Picker.stories.d.ts","sourceRoot":"","sources":["../../../src/cs/Picker/Picker.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAGtD,OAAO,KAAK,EAAE,UAAU,EAAiB,MAAM,yBAAyB,CAAC;AAEzE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0DAA0D,CAAC;;AAI5F,wBAeU;AAEV,MAAM,WAAW,gBAAiB,SAAQ,UAAU,CAAC,WAAW,EAAE,YAAY,CAAC;IAC7E,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,UAAU,EAAE,OAAO,CAAC,gBAAgB,CAgBhD,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,OAAO,CAAC,gBAAgB,CAuDnD,CAAC"}

package/jsx/cs/Picker/Picker.stories.jsx

@@ -0,0 +1,64 @@
+import { useMemo, useState } from 'react';
+import { Button, Modal, useModalManager, useModalContext } from '@pega/cosmos-react-core';
+import { Picker } from '@pega/cosmos-react-cs';
+import { TaskPickerMockData } from '../TaskManager/TaskManager.mocks';
+export default {
+    title: 'Customer Service/Picker',
+    component: Picker,
+    args: {
+        title: 'Add customer inquiry',
+        contextualLabel: 'inquiries',
+        multiSelect: false,
+        reorderSelections: false
+    },
+    argTypes: {
+        title: { control: { type: 'text' } },
+        contextualLabel: { control: { type: 'text' } },
+        multiSelect: { control: { type: 'boolean' } },
+        reorderSelections: { control: { type: 'boolean' } }
+    }
+};
+export const PickerDemo = (args) => {
+    const [selectedItems, setSelectedItems] = useState([]);
+    const onSelectionChange = (items) => {
+        setSelectedItems(items);
+    };
+    return (<Picker items={TaskPickerMockData.tasks} contextualLabel={args.contextualLabel} reorderSelections={args.reorderSelections} multiSelect={args.multiSelect} onSelectionChange={onSelectionChange} selections={selectedItems}/>);
+};
+export const PickerInModal = (args) => {
+    const MyModal = () => {
+        const { dismiss } = useModalContext();
+        const [selectedItems, setSelectedItems] = useState([]);
+        const actions = useMemo(() => {
+            return (<>
+          <Button onClick={dismiss}>Close</Button>
+          <Button variant='primary' onClick={() => {
+                    dismiss();
+                }} disabled={!selectedItems.length}>
+            Save
+          </Button>
+        </>);
+        }, [dismiss, selectedItems]);
+        return (<Modal actions={actions} heading={args.title} onRequestDismiss={dismiss}>
+        <Picker contextualLabel={args.contextualLabel} items={TaskPickerMockData.tasks} multiSelect={args.multiSelect} reorderSelections={args.reorderSelections} onSelectionChange={selections => {
+                setSelectedItems(selections);
+            }} selections={selectedItems}/>
+      </Modal>);
+    };
+    const ModalButton = () => {
+        const { create } = useModalManager();
+        return (<Button onClick={() => {
+                create(MyModal, undefined, {
+                    onDismiss: () => { }
+                });
+            }}>
+        Open Picker
+      </Button>);
+    };
+    return <ModalButton />;
+};
+PickerInModal.args = {
+    multiSelect: true,
+    reorderSelections: false
+};
+//# sourceMappingURL=Picker.stories.jsx.map

package/jsx/cs/Picker/Picker.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Picker.stories.jsx","sourceRoot":"","sources":["../../../src/cs/Picker/Picker.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useMemo, useState } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\n\nimport { Button, Modal, useModalManager, useModalContext } from '@pega/cosmos-react-core';\nimport type { OmitStrict, MenuItemProps } from '@pega/cosmos-react-core';\nimport { Picker } from '@pega/cosmos-react-cs';\nimport type { PickerProps } from '@pega/cosmos-react-cs/lib/components/Picker/Picker.types';\n\nimport { TaskPickerMockData } from '../TaskManager/TaskManager.mocks';\n\nexport default {\n  title: 'Customer Service/Picker',\n  component: Picker,\n  args: {\n    title: 'Add customer inquiry',\n    contextualLabel: 'inquiries',\n    multiSelect: false,\n    reorderSelections: false\n  },\n  argTypes: {\n    title: { control: { type: 'text' } },\n    contextualLabel: { control: { type: 'text' } },\n    multiSelect: { control: { type: 'boolean' } },\n    reorderSelections: { control: { type: 'boolean' } }\n  }\n} as Meta;\n\nexport interface PickerStoryProps extends OmitStrict<PickerProps, 'selections'> {\n  title?: string;\n}\n\nexport const PickerDemo: StoryFn<PickerStoryProps> = (args: PickerStoryProps) => {\n  const [selectedItems, setSelectedItems] = useState<MenuItemProps[]>([]);\n\n  const onSelectionChange = (items: MenuItemProps[]) => {\n    setSelectedItems(items);\n  };\n  return (\n    <Picker\n      items={TaskPickerMockData.tasks}\n      contextualLabel={args.contextualLabel}\n      reorderSelections={args.reorderSelections}\n      multiSelect={args.multiSelect}\n      onSelectionChange={onSelectionChange}\n      selections={selectedItems}\n    />\n  );\n};\n\nexport const PickerInModal: StoryFn<PickerStoryProps> = (args: PickerStoryProps) => {\n  const MyModal = () => {\n    const { dismiss } = useModalContext();\n    const [selectedItems, setSelectedItems] = useState<MenuItemProps[]>([]);\n\n    const actions = useMemo(() => {\n      return (\n        <>\n          <Button onClick={dismiss}>Close</Button>\n          <Button\n            variant='primary'\n            onClick={() => {\n              dismiss();\n            }}\n            disabled={!selectedItems.length}\n          >\n            Save\n          </Button>\n        </>\n      );\n    }, [dismiss, selectedItems]);\n\n    return (\n      <Modal actions={actions} heading={args.title} onRequestDismiss={dismiss}>\n        <Picker\n          contextualLabel={args.contextualLabel}\n          items={TaskPickerMockData.tasks}\n          multiSelect={args.multiSelect}\n          reorderSelections={args.reorderSelections}\n          onSelectionChange={selections => {\n            setSelectedItems(selections);\n          }}\n          selections={selectedItems}\n        />\n      </Modal>\n    );\n  };\n\n  const ModalButton = () => {\n    const { create } = useModalManager();\n\n    return (\n      <Button\n        onClick={() => {\n          create(MyModal, undefined, {\n            onDismiss: () => {}\n          });\n        }}\n      >\n        Open Picker\n      </Button>\n    );\n  };\n\n  return <ModalButton />;\n};\n\nPickerInModal.args = {\n  multiSelect: true,\n  reorderSelections: false\n};\n"]}

package/jsx/cs/TaskManager/TaskManager.stories.d.ts

@@ -1,7 +1,7 @@
-import { ReactNode } from 'react';
-import { Meta, Story } from '@storybook/react';
-import { DialogueProps, TaskManagerProps, TaskProps } from '@pega/cosmos-react-cs';
-declare const _default: Meta<import("@storybook/react").Args>;
+import type { ReactNode } from 'react';
+import type { StoryFn } from '@storybook/react';
+import type { DialogueProps, TaskManagerProps, TaskProps } 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 TaskManagerStoryProps extends TaskManagerProps {
     initialTasks?: TaskProps[];
@@ -11,5 +11,5 @@ export interface TaskManagerStoryProps extends TaskManagerProps {
     rowGap?: number;
     verbatimStatus?: DialogueProps['verbatimStatus'];
 }
-export declare const TaskManagerDemo: Story<TaskManagerStoryProps>;
+export declare const TaskManagerDemo: StoryFn<TaskManagerStoryProps>;
 //# sourceMappingURL=TaskManager.stories.d.ts.map

package/jsx/cs/TaskManager/TaskManager.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TaskManager.stories.d.ts","sourceRoot":"","sources":["../../../src/cs/TaskManager/TaskManager.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA2C,MAAM,OAAO,CAAC;AAE3E,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAkB/C,OAAO,EACL,aAAa,EAEb,gBAAgB,EAChB,SAAS,EAEV,MAAM,uBAAuB,CAAC;;AAU/B,wBAGU;AAIV,MAAM,WAAW,qBAAsB,SAAQ,gBAAgB;IAC7D,YAAY,CAAC,EAAE,SAAS,EAAE,CAAC;IAC3B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;CAClD;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,qBAAqB,CA0exD,CAAC"}
+{"version":3,"file":"TaskManager.stories.d.ts","sourceRoot":"","sources":["../../../src/cs/TaskManager/TaskManager.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAc,MAAM,OAAO,CAAC;AAEnD,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAkBtD,OAAO,KAAK,EAAE,aAAa,EAAE,gBAAgB,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;;AAWxF,wBAGU;AAIV,MAAM,WAAW,qBAAsB,SAAQ,gBAAgB;IAC7D,YAAY,CAAC,EAAE,SAAS,EAAE,CAAC;IAC3B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;CAClD;AAED,eAAO,MAAM,eAAe,EAAE,OAAO,CAAC,qBAAqB,CA2e1D,CAAC"}

package/jsx/cs/TaskManager/TaskManager.stories.jsx

@@ -351,7 +351,7 @@ export const TaskManagerDemo = (args) => {
             icon: 'script',
             content: 'Hi Ms. Ventura, I see that you are interested in changing your monthly due date, is that correct?',
             verbatimStatus: args.verbatimStatus
-        }} onTaskLaunch={args.onTaskLaunch || handleLaunch} onTaskDismiss={args.onTaskDismiss || handleDismiss} addTask={{
+        }} onTaskLaunch={args.onTaskLaunch || handleLaunch} onTaskDismiss={args.onTaskDismiss || handleDismiss} addTask={args.addTask || {
             items: TaskPickerMockData.tasks,
             onAdd: renderTasks
         }} wrapUp={args.wrapUp || wrapUp} main={args.main || (<TaskView header={<Flex container={{ justify: 'start', gap: 1, alignItems: 'center' }}>