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

package/lib/cs/CSAppShell/CSAppShell.mocks.js

@@ -1,385 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, useCallback, useContext, useState, useEffect, useMemo } from 'react';
-import { AppShellDrawerContext, Banner, Button, Flex, Form, Input, Option, Select, menuHelpers, CheckboxGroup, Checkbox, ComboBox } from '@pega/cosmos-react-core';
-import { CTIPanel } from '@pega/cosmos-react-cs';
-import ChatSettingsPanel from '@pega/cosmos-react-social/lib/components/Chat/ChatSettingsPanel';
-import { AppshellEmailSummaryList, EmailSummaryList } from '@pega/cosmos-react-social';
-import EmailNotificationPanel from '@pega/cosmos-react-social/lib/components/Email/EmailNotificationPanel';
-import { emailSummaryItems } from '../../social/Email/Email.mocks';
-import { CallControlPanelDemo, ExternalCTIDemo } from '../CallControlPanel/CallControlPanel.stories';
-import { userStatusOptions } from '../CallControlPanel/CallControlPanel.mocks';
-export const CallLoginForm = ({ ctiLinkOptions, onLogin, onCancel }) => {
-    const [agentId, setAgentId] = useState('');
-    const [password, setPassword] = useState('');
-    const [extension, setExtension] = useState('');
-    const [ctiLinkId, setCTILinkId] = useState(Object.keys(ctiLinkOptions)[0]);
-    const [errorMessage, setErrorMessage] = useState();
-    const canSubmit = agentId && password && ctiLinkId && extension;
-    const actions = (_jsxs(_Fragment, { children: [_jsx(Button, { name: 'cancel', variant: 'secondary', onClick: onCancel, children: "Cancel" }, 'cancel'), _jsx(Button, { name: 'submit', type: 'submit', variant: 'primary', disabled: !canSubmit, onClick: (e) => {
-                    e.preventDefault();
-                    onLogin(ctiLinkId, agentId, password).then(setErrorMessage);
-                }, children: "Login" }, 'submit')] }));
-    return (_jsxs(Form, { actions: actions, banners: errorMessage ? _jsx(Banner, { variant: 'urgent', messages: [errorMessage] }) : undefined, children: [_jsx(Select, { required: true, label: 'CTI link', onChange: e => setCTILinkId(e.target.value), children: Object.entries(ctiLinkOptions).map(([id, label]) => (_jsx(Option, { value: id, children: label }))) }), _jsx(Input, { required: true, label: 'Agent ID', value: agentId, onChange: (e) => setAgentId(e.target.value) }), _jsx(Input, { type: 'password', required: true, label: 'Password', value: password, onChange: (e) => setPassword(e.target.value) }), _jsx(Input, { required: true, label: 'Extension', value: extension, onChange: (e) => setExtension(e.target.value) })] }));
-};
-export const CTIControlPanelContext = createContext({
-    type: 'internal',
-    draggable: true,
-    applyAppStyling: false
-});
-export const CTIControlPanel = () => {
-    const [agentStatus, setAgentStatus] = useState(userStatusOptions[0]);
-    const [callPanelVisible, setCallPanelVisible] = useState(false);
-    const { type, draggable, applyAppStyling } = useContext(CTIControlPanelContext);
-    const { openDrawer, closeDrawer } = useContext(AppShellDrawerContext);
-    const drawerView = (_jsx(Flex, { container: { direction: 'column', gap: 2, pad: 2 }, children: _jsx(CallLoginForm, { ctiLinkOptions: {
-                valid: 'It will be accepted',
-                invalid: 'This will raise an error'
-            }, onLogin: ctiLink => {
-                if (ctiLink === 'invalid')
-                    return Promise.resolve('Login incorrect');
-                setAgentStatus(userStatusOptions[0]);
-                setCallPanelVisible(true);
-                closeDrawer();
-                return Promise.resolve(undefined);
-            }, onCancel: closeDrawer }) }));
-    const drawerHeader = 'Pega Call Log In';
-    return (_jsx(CTIPanel, { visible: callPanelVisible, status: agentStatus, onClick: () => {
-            if (agentStatus.status === 'logout')
-                openDrawer({
-                    drawerHeader,
-                    drawerView,
-                    name: drawerHeader
-                });
-            else
-                setCallPanelVisible(prev => !prev);
-        }, children: type === 'internal' ? (_jsx(CallControlPanelDemo, { heading: 'Agent', status: agentStatus.id, onStatusChange: status => {
-                setAgentStatus(status);
-                if (status.status === 'logout')
-                    setCallPanelVisible(false);
-            }, isDraggable: draggable, showStatus: true, visible: callPanelVisible })) : (_jsx(ExternalCTIDemo, { heading: 'External CTI', isDraggable: draggable, showStatus: true, visible: callPanelVisible, applyAppStyling: applyAppStyling })) }));
-};
-export const AppShellMockData = {
-    notifications: [
-        {
-            id: '123',
-            primary: "Dean Thomas mentioned your team in a bug 'Button does not initiate onClick event handler'.",
-            secondary: 'BUG-12345',
-            visual: 'Dean Thomas',
-            unread: true
-        },
-        {
-            id: '456',
-            primary: "Seth DeAngelo mentioned your team in a bug 'Text variant h1 renders as h3 in DOM'.",
-            visual: 'Seth DeAngelo',
-            secondary: 'BUG-12345',
-            unread: true
-        },
-        {
-            id: '789',
-            primary: "Janet Moore mentioned your team in a bug 'Tree expanded state does not match the state that was set on the component'.",
-            secondary: 'BUG-12345',
-            visual: 'Janet Moore',
-            unread: true
-        },
-        {
-            id: '000',
-            primary: 'You have been awarded Employee of the Month! Congratulations!',
-            secondary: '',
-            visual: 'Cindy Turner',
-            unread: true
-        }
-    ],
-    recents: [
-        {
-            id: '123',
-            primary: "BUG-12345: 'Button does not initiate onClick event handler'.",
-            secondary: 'BUG-12345'
-        },
-        {
-            id: '456',
-            primary: "BUG-54321: 'Text variant h1 renders as h3 in DOM'.",
-            secondary: 'BUG-00000'
-        },
-        {
-            id: '789',
-            primary: "BUG-00000: 'Tree expanded state does not match the state that was set on the component'.",
-            secondary: 'BUG-00000'
-        },
-        {
-            id: '111',
-            primary: "BUG-12345: 'Button does not initiate onClick event handler'.",
-            secondary: 'BUG-12345'
-        },
-        {
-            id: '222',
-            primary: "BUG-54321: 'Text variant h1 renders as h3 in DOM'.",
-            secondary: 'BUG-00000'
-        },
-        {
-            id: '333',
-            primary: "BUG-00000: 'Tree expanded state does not match the state that was set on the component'.",
-            secondary: 'BUG-00000'
-        },
-        {
-            id: '444',
-            primary: "BUG-12345: 'Button does not initiate onClick event handler'.",
-            secondary: 'BUG-12345'
-        },
-        {
-            id: '555',
-            primary: "BUG-54321: 'Text variant h1 renders as h3 in DOM'.",
-            secondary: 'BUG-00000'
-        },
-        {
-            id: '666',
-            primary: "BUG-00000: 'Tree expanded state does not match the state that was set on the component'.",
-            secondary: 'BUG-00000'
-        }
-    ],
-    'Phone interaction': {
-        caseId: 'Customer',
-        heading: 'Ginger Ventura',
-        primaryFields: [
-            {
-                id: '0',
-                name: 'Lifetime value',
-                value: 'Gold'
-            },
-            {
-                id: '1',
-                name: 'Interaction type',
-                value: 'Phone'
-            },
-            {
-                id: '2',
-                name: 'Churn risk',
-                value: 'Low'
-            },
-            {
-                id: '3',
-                name: 'Status',
-                value: 'Open'
-            }
-        ],
-        secondaryFields: [
-            {
-                id: '0',
-                name: 'Status',
-                value: 'Verified'
-            },
-            {
-                id: '1',
-                name: 'Web login',
-                value: 'Today'
-            },
-            {
-                id: '2',
-                name: 'Customer since',
-                value: 'July 2018'
-            },
-            {
-                id: '3',
-                name: 'Address',
-                value: '2213b Gormand street'
-            }
-        ]
-    },
-    'Chat interaction': {
-        caseId: 'Customer',
-        heading: 'Sara Davis',
-        primaryFields: [
-            {
-                id: '0',
-                name: 'Lifetime value',
-                value: 'Silver'
-            },
-            {
-                id: '1',
-                name: 'Interaction type',
-                value: 'Chat'
-            },
-            {
-                id: '2',
-                name: 'Churn risk',
-                value: 'High'
-            },
-            {
-                id: '3',
-                name: 'Status',
-                value: 'Open'
-            }
-        ],
-        secondaryFields: [
-            {
-                id: '0',
-                name: 'Status',
-                value: 'Verified'
-            },
-            {
-                id: '1',
-                name: 'Web login',
-                value: 'Today'
-            },
-            {
-                id: '2',
-                name: 'Customer since',
-                value: 'March 2005'
-            },
-            {
-                id: '3',
-                name: 'Address',
-                value: '340 River'
-            }
-        ]
-    },
-    'Mail interaction': {
-        caseId: 'Customer',
-        heading: 'John Brown',
-        primaryFields: [
-            {
-                id: '0',
-                name: 'Lifetime value',
-                value: 'Bronze'
-            },
-            {
-                id: '1',
-                name: 'Interaction type',
-                value: 'Mail'
-            },
-            {
-                id: '2',
-                name: 'Churn risk',
-                value: 'Medium'
-            },
-            {
-                id: '3',
-                name: 'Status',
-                value: 'Open'
-            }
-        ],
-        secondaryFields: [
-            {
-                id: '0',
-                name: 'Status',
-                value: 'Verified'
-            },
-            {
-                id: '1',
-                name: 'Web login',
-                value: 'Today'
-            },
-            {
-                id: '2',
-                name: 'Customer since',
-                value: 'March 1995'
-            },
-            {
-                id: '3',
-                name: 'Address',
-                value: '340 River'
-            }
-        ]
-    }
-};
-export const statuses = [
-    { id: 'available', primary: 'Available', selected: false },
-    {
-        id: 'temporarilyUnavailable',
-        primary: 'Temporarily unavailable',
-        items: [
-            { id: 'quick_break', primary: 'Quick break', selected: false },
-            { id: 'personal_work', primary: 'Personal work', selected: false },
-            { id: 'in_a_meeting', primary: 'In a meeting', selected: false }
-        ]
-    },
-    { id: 'unavailable', primary: 'Unavailable', selected: false }
-];
-export const ChatSettingsPanelMock = () => {
-    const { openDrawer, closeDrawer } = useContext(AppShellDrawerContext);
-    const [chatAlias, setChatAlias] = useState('');
-    const [queues, setQueues] = useState([
-        { id: 'Billing', checked: false },
-        { id: 'General', checked: false },
-        { id: 'Technical', checked: false }
-    ]);
-    const [items, setItems] = useState(() => {
-        return menuHelpers.mapTree(statuses, item => ({
-            ...item,
-            selected: item.items ? undefined : !!item.selected
-        }));
-    });
-    const selected = useMemo(() => menuHelpers.getSelected(items)[0], [items]);
-    const selectItem = useCallback((id) => {
-        setItems(cur => menuHelpers.selectItem(cur, id, 'single-select'));
-    }, []);
-    const formActions = (_jsxs(_Fragment, { children: [_jsx(Button, { name: 'Cancel', variant: 'secondary', onClick: closeDrawer, children: "Cancel" }), _jsx(Button, { name: 'Submit', variant: 'primary', onClick: closeDrawer, children: "Submit" })] }));
-    const chatSettings = useMemo(() => (_jsx(Flex, { container: { direction: 'column', gap: 2, pad: 2 }, item: { grow: 1 }, children: _jsxs(Form, { actions: formActions, children: [_jsx(Flex, { container: { direction: 'column', pad: 0.5 }, children: _jsx(Input, { label: 'Chat alias', value: chatAlias, onChange: (e) => {
-                            setChatAlias(e.target.value);
-                        } }) }), _jsx(Flex, { container: { direction: 'column', pad: 1 }, children: _jsx(CheckboxGroup, { label: 'Joined queues', name: 'queueslist', labelHidden: false, children: queues.map(({ id, checked }) => (_jsx(Checkbox, { label: id, id: id, name: id, checked: checked, onChange: e => setQueues(queues.map(queue => {
-                                if (queue.id === id) {
-                                    return {
-                                        ...queue,
-                                        checked: e.target.checked
-                                    };
-                                }
-                                return queue;
-                            })) }))) }) }), _jsx(Flex, { container: { direction: 'column', pad: 0.5 }, children: _jsx(ComboBox, { label: 'Status', mode: 'single-select', required: true, selected: selected
-                            ? {
-                                items: {
-                                    id: selected?.id,
-                                    text: selected?.primary
-                                }
-                            }
-                            : undefined, menu: {
-                            items,
-                            variant: 'drill-down',
-                            onItemClick: selectItem
-                        } }) })] }) })), [items]);
-    const drawerHeader = 'Chat settings';
-    const drawerContent = {
-        drawerHeader,
-        drawerView: chatSettings,
-        name: drawerHeader
-    };
-    useEffect(() => {
-        if (selected)
-            openDrawer(drawerContent);
-    }, [selected]);
-    return (_jsx(ChatSettingsPanel, { label: drawerHeader, status: menuHelpers.getParentItem(items, selected?.id)?.id === 'temporarilyUnavailable'
-            ? menuHelpers.getParentItem(items, selected?.id)?.id
-            : selected?.id, onClick: () => openDrawer(drawerContent) }));
-};
-const EmailNotifications = () => {
-    const { closeDrawer } = useContext(AppShellDrawerContext);
-    const [sortOptions, setSortOptions] = useState([
-        { id: 'Most recent', primary: 'Most recent', selected: true },
-        { id: 'Most urgent', primary: 'Most urgent', selected: false },
-        { id: 'All unread', primary: 'All unread', selected: false }
-    ]);
-    const selected = menuHelpers.getSelected(sortOptions)[0];
-    const selectItem = (id) => {
-        setSortOptions(cur => menuHelpers.selectItem(cur, id, 'single-select'));
-    };
-    return (_jsxs(Flex, { container: { direction: 'column', gap: 2 }, item: { grow: 1 }, children: [_jsx(Flex, { container: { justify: 'center', pad: [1, 0, 0] }, children: _jsx(Button, { onClick: closeDrawer, children: "Get next email" }) }), _jsx(Flex, { container: { direction: 'column', pad: [0, 2] }, children: _jsx(ComboBox, { label: 'Sorted by', mode: 'single-select', selected: selected
-                        ? {
-                            items: {
-                                id: selected?.id,
-                                text: selected?.primary
-                            }
-                        }
-                        : undefined, menu: {
-                        items: sortOptions,
-                        onItemClick: selectItem
-                    } }) }), _jsx(EmailSummaryList, { items: emailSummaryItems, as: AppshellEmailSummaryList, onItemClick: closeDrawer, emptyMessage: 'No emails', selectable: false })] }));
-};
-export const EmailNotificationPanelMock = () => {
-    const { openDrawer } = useContext(AppShellDrawerContext);
-    const drawerHeader = 'My open emails';
-    const drawerContent = {
-        drawerHeader,
-        drawerView: _jsx(EmailNotifications, {}),
-        name: drawerHeader
-    };
-    return (_jsx(EmailNotificationPanel, { count: 15, label: drawerHeader, onClick: () => openDrawer(drawerContent) }));
-};
-//# sourceMappingURL=CSAppShell.mocks.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"CSAppShell.mocks.js","sourceRoot":"","sources":["../../../src/cs/CSAppShell/CSAppShell.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChangeEvent,\n  createContext,\n  FunctionComponent,\n  MouseEvent,\n  useCallback,\n  useContext,\n  useState,\n  useEffect,\n  useMemo\n} from 'react';\n\nimport {\n  AppShellDrawerContext,\n  Banner,\n  Button,\n  Flex,\n  Form,\n  Input,\n  Option,\n  Select,\n  MenuProps,\n  menuHelpers,\n  MenuItemProps,\n  CheckboxGroup,\n  Checkbox,\n  ComboBox\n} from '@pega/cosmos-react-core';\nimport { type UserAvailabilityStatusOption, CTIPanel } from '@pega/cosmos-react-cs';\nimport ChatSettingsPanel from '@pega/cosmos-react-social/lib/components/Chat/ChatSettingsPanel';\nimport { UserAvailability } from '@pega/cosmos-react-social/lib/components/Chat/Chat.types';\nimport { AppshellEmailSummaryList, EmailSummaryList } from '@pega/cosmos-react-social';\nimport EmailNotificationPanel from '@pega/cosmos-react-social/lib/components/Email/EmailNotificationPanel';\n\nimport { emailSummaryItems } from '../../social/Email/Email.mocks';\nimport {\n  CallControlPanelDemo,\n  ExternalCTIDemo\n} from '../CallControlPanel/CallControlPanel.stories';\nimport { userStatusOptions } from '../CallControlPanel/CallControlPanel.mocks';\n\nexport type LoginError = string;\n\nexport interface LoginFormProps {\n  ctiLinkOptions: { [key: string]: string };\n  onLogin: (\n    ctiLinkId: keyof LoginFormProps['ctiLinkOptions'],\n    agentId: string,\n    password: string\n  ) => Promise<LoginError | undefined>;\n  onCancel: () => void;\n}\n\nexport const CallLoginForm: FunctionComponent<LoginFormProps> = ({\n  ctiLinkOptions,\n  onLogin,\n  onCancel\n}: LoginFormProps) => {\n  const [agentId, setAgentId] = useState<string>('');\n  const [password, setPassword] = useState<string>('');\n  const [extension, setExtension] = useState<string>('');\n  const [ctiLinkId, setCTILinkId] = useState<string>(Object.keys(ctiLinkOptions)[0]);\n  const [errorMessage, setErrorMessage] = useState<string>();\n\n  const canSubmit = agentId && password && ctiLinkId && extension;\n\n  const actions = (\n    <>\n      <Button key='cancel' name='cancel' variant='secondary' onClick={onCancel}>\n        Cancel\n      </Button>\n      <Button\n        key='submit'\n        name='submit'\n        type='submit'\n        variant='primary'\n        disabled={!canSubmit}\n        onClick={(e: MouseEvent) => {\n          e.preventDefault();\n          onLogin(ctiLinkId!, agentId, password).then(setErrorMessage);\n        }}\n      >\n        Login\n      </Button>\n    </>\n  );\n\n  return (\n    <Form\n      actions={actions}\n      banners={errorMessage ? <Banner variant='urgent' messages={[errorMessage]} /> : undefined}\n    >\n      <Select required label='CTI link' onChange={e => setCTILinkId(e.target.value)}>\n        {Object.entries(ctiLinkOptions).map(([id, label]) => (\n          <Option value={id}>{label}</Option>\n        ))}\n      </Select>\n      <Input\n        required\n        label='Agent ID'\n        value={agentId}\n        onChange={(e: ChangeEvent<HTMLInputElement>) => setAgentId(e.target.value)}\n      />\n      <Input\n        type='password'\n        required\n        label='Password'\n        value={password}\n        onChange={(e: ChangeEvent<HTMLInputElement>) => setPassword(e.target.value)}\n      />\n      <Input\n        required\n        label='Extension'\n        value={extension}\n        onChange={(e: ChangeEvent<HTMLInputElement>) => setExtension(e.target.value)}\n      />\n    </Form>\n  );\n};\n\nexport const CTIControlPanelContext = createContext<{\n  type: 'internal' | 'external';\n  draggable?: boolean;\n  applyAppStyling: boolean;\n}>({\n  type: 'internal',\n  draggable: true,\n  applyAppStyling: false\n});\n\nexport const CTIControlPanel: FunctionComponent = () => {\n  const [agentStatus, setAgentStatus] = useState<UserAvailabilityStatusOption>(\n    userStatusOptions[0] as UserAvailabilityStatusOption\n  );\n  const [callPanelVisible, setCallPanelVisible] = useState(false);\n  const { type, draggable, applyAppStyling } = useContext(CTIControlPanelContext);\n  const { openDrawer, closeDrawer } = useContext(AppShellDrawerContext);\n\n  const drawerView = (\n    <Flex container={{ direction: 'column', gap: 2, pad: 2 }}>\n      <CallLoginForm\n        ctiLinkOptions={{\n          valid: 'It will be accepted',\n          invalid: 'This will raise an error'\n        }}\n        onLogin={ctiLink => {\n          if (ctiLink === 'invalid') return Promise.resolve('Login incorrect');\n          setAgentStatus(userStatusOptions[0]);\n          setCallPanelVisible(true);\n          closeDrawer();\n          return Promise.resolve(undefined);\n        }}\n        onCancel={closeDrawer}\n      />\n    </Flex>\n  );\n  const drawerHeader = 'Pega Call Log In';\n\n  return (\n    <CTIPanel\n      visible={callPanelVisible}\n      status={agentStatus}\n      onClick={() => {\n        if (agentStatus.status === 'logout')\n          openDrawer({\n            drawerHeader,\n            drawerView,\n            name: drawerHeader\n          });\n        else setCallPanelVisible(prev => !prev);\n      }}\n    >\n      {type === 'internal' ? (\n        <CallControlPanelDemo\n          heading='Agent'\n          status={agentStatus.id}\n          onStatusChange={status => {\n            setAgentStatus(status);\n            if (status.status === 'logout') setCallPanelVisible(false);\n          }}\n          isDraggable={draggable}\n          showStatus\n          visible={callPanelVisible}\n        />\n      ) : (\n        <ExternalCTIDemo\n          heading='External CTI'\n          isDraggable={draggable}\n          showStatus\n          visible={callPanelVisible}\n          applyAppStyling={applyAppStyling}\n        />\n      )}\n    </CTIPanel>\n  );\n};\n\nexport const AppShellMockData = {\n  notifications: [\n    {\n      id: '123',\n      primary:\n        \"Dean Thomas mentioned your team in a bug 'Button does not initiate onClick event handler'.\",\n      secondary: 'BUG-12345',\n      visual: 'Dean Thomas',\n      unread: true\n    },\n    {\n      id: '456',\n      primary: \"Seth DeAngelo mentioned your team in a bug 'Text variant h1 renders as h3 in DOM'.\",\n      visual: 'Seth DeAngelo',\n      secondary: 'BUG-12345',\n      unread: true\n    },\n    {\n      id: '789',\n      primary:\n        \"Janet Moore mentioned your team in a bug 'Tree expanded state does not match the state that was set on the component'.\",\n      secondary: 'BUG-12345',\n      visual: 'Janet Moore',\n      unread: true\n    },\n    {\n      id: '000',\n      primary: 'You have been awarded Employee of the Month! Congratulations!',\n      secondary: '',\n      visual: 'Cindy Turner',\n      unread: true\n    }\n  ],\n  recents: [\n    {\n      id: '123',\n      primary: \"BUG-12345: 'Button does not initiate onClick event handler'.\",\n      secondary: 'BUG-12345'\n    },\n    {\n      id: '456',\n      primary: \"BUG-54321: 'Text variant h1 renders as h3 in DOM'.\",\n      secondary: 'BUG-00000'\n    },\n    {\n      id: '789',\n      primary:\n        \"BUG-00000: 'Tree expanded state does not match the state that was set on the component'.\",\n      secondary: 'BUG-00000'\n    },\n    {\n      id: '111',\n      primary: \"BUG-12345: 'Button does not initiate onClick event handler'.\",\n      secondary: 'BUG-12345'\n    },\n    {\n      id: '222',\n      primary: \"BUG-54321: 'Text variant h1 renders as h3 in DOM'.\",\n      secondary: 'BUG-00000'\n    },\n    {\n      id: '333',\n      primary:\n        \"BUG-00000: 'Tree expanded state does not match the state that was set on the component'.\",\n      secondary: 'BUG-00000'\n    },\n    {\n      id: '444',\n      primary: \"BUG-12345: 'Button does not initiate onClick event handler'.\",\n      secondary: 'BUG-12345'\n    },\n    {\n      id: '555',\n      primary: \"BUG-54321: 'Text variant h1 renders as h3 in DOM'.\",\n      secondary: 'BUG-00000'\n    },\n    {\n      id: '666',\n      primary:\n        \"BUG-00000: 'Tree expanded state does not match the state that was set on the component'.\",\n      secondary: 'BUG-00000'\n    }\n  ],\n  'Phone interaction': {\n    caseId: 'Customer',\n    heading: 'Ginger Ventura',\n    primaryFields: [\n      {\n        id: '0',\n        name: 'Lifetime value',\n        value: 'Gold'\n      },\n      {\n        id: '1',\n        name: 'Interaction type',\n        value: 'Phone'\n      },\n      {\n        id: '2',\n        name: 'Churn risk',\n        value: 'Low'\n      },\n      {\n        id: '3',\n        name: 'Status',\n        value: 'Open'\n      }\n    ],\n    secondaryFields: [\n      {\n        id: '0',\n        name: 'Status',\n        value: 'Verified'\n      },\n      {\n        id: '1',\n        name: 'Web login',\n        value: 'Today'\n      },\n      {\n        id: '2',\n        name: 'Customer since',\n        value: 'July 2018'\n      },\n      {\n        id: '3',\n        name: 'Address',\n        value: '2213b Gormand street'\n      }\n    ]\n  },\n  'Chat interaction': {\n    caseId: 'Customer',\n    heading: 'Sara Davis',\n    primaryFields: [\n      {\n        id: '0',\n        name: 'Lifetime value',\n        value: 'Silver'\n      },\n      {\n        id: '1',\n        name: 'Interaction type',\n        value: 'Chat'\n      },\n      {\n        id: '2',\n        name: 'Churn risk',\n        value: 'High'\n      },\n      {\n        id: '3',\n        name: 'Status',\n        value: 'Open'\n      }\n    ],\n    secondaryFields: [\n      {\n        id: '0',\n        name: 'Status',\n        value: 'Verified'\n      },\n      {\n        id: '1',\n        name: 'Web login',\n        value: 'Today'\n      },\n      {\n        id: '2',\n        name: 'Customer since',\n        value: 'March 2005'\n      },\n      {\n        id: '3',\n        name: 'Address',\n        value: '340 River'\n      }\n    ]\n  },\n  'Mail interaction': {\n    caseId: 'Customer',\n    heading: 'John Brown',\n    primaryFields: [\n      {\n        id: '0',\n        name: 'Lifetime value',\n        value: 'Bronze'\n      },\n      {\n        id: '1',\n        name: 'Interaction type',\n        value: 'Mail'\n      },\n      {\n        id: '2',\n        name: 'Churn risk',\n        value: 'Medium'\n      },\n      {\n        id: '3',\n        name: 'Status',\n        value: 'Open'\n      }\n    ],\n    secondaryFields: [\n      {\n        id: '0',\n        name: 'Status',\n        value: 'Verified'\n      },\n      {\n        id: '1',\n        name: 'Web login',\n        value: 'Today'\n      },\n      {\n        id: '2',\n        name: 'Customer since',\n        value: 'March 1995'\n      },\n      {\n        id: '3',\n        name: 'Address',\n        value: '340 River'\n      }\n    ]\n  }\n};\n\nexport const statuses = [\n  { id: 'available', primary: 'Available', selected: false },\n  {\n    id: 'temporarilyUnavailable',\n    primary: 'Temporarily unavailable',\n    items: [\n      { id: 'quick_break', primary: 'Quick break', selected: false },\n      { id: 'personal_work', primary: 'Personal work', selected: false },\n      { id: 'in_a_meeting', primary: 'In a meeting', selected: false }\n    ]\n  },\n  { id: 'unavailable', primary: 'Unavailable', selected: false }\n];\n\nexport const ChatSettingsPanelMock: FunctionComponent = () => {\n  const { openDrawer, closeDrawer } = useContext(AppShellDrawerContext);\n\n  const [chatAlias, setChatAlias] = useState('');\n  const [queues, setQueues] = useState<{ id: string; checked: boolean }[]>([\n    { id: 'Billing', checked: false },\n    { id: 'General', checked: false },\n    { id: 'Technical', checked: false }\n  ]);\n\n  const [items, setItems] = useState<MenuProps['items']>((): MenuProps['items'] => {\n    return menuHelpers.mapTree(statuses, item => ({\n      ...item,\n      selected: item.items ? undefined : !!item.selected\n    }));\n  });\n\n  const selected = useMemo(() => menuHelpers.getSelected(items)[0], [items]);\n\n  const selectItem = useCallback((id: MenuItemProps['id']) => {\n    setItems(cur => menuHelpers.selectItem(cur, id, 'single-select'));\n  }, []);\n\n  const formActions = (\n    <>\n      <Button name='Cancel' variant='secondary' onClick={closeDrawer}>\n        Cancel\n      </Button>\n      <Button name='Submit' variant='primary' onClick={closeDrawer}>\n        Submit\n      </Button>\n    </>\n  );\n\n  const chatSettings = useMemo(\n    () => (\n      <Flex container={{ direction: 'column', gap: 2, pad: 2 }} item={{ grow: 1 }}>\n        <Form actions={formActions}>\n          <Flex container={{ direction: 'column', pad: 0.5 }}>\n            <Input\n              label='Chat alias'\n              value={chatAlias}\n              onChange={(e: ChangeEvent<HTMLInputElement>) => {\n                setChatAlias(e.target.value);\n              }}\n            />\n          </Flex>\n          <Flex container={{ direction: 'column', pad: 1 }}>\n            <CheckboxGroup label='Joined queues' name='queueslist' labelHidden={false}>\n              {queues.map(({ id, checked }) => (\n                <Checkbox\n                  label={id}\n                  id={id}\n                  name={id}\n                  checked={checked}\n                  onChange={e =>\n                    setQueues(\n                      queues.map(queue => {\n                        if (queue.id === id) {\n                          return {\n                            ...queue,\n                            checked: e.target.checked\n                          };\n                        }\n                        return queue;\n                      })\n                    )\n                  }\n                />\n              ))}\n            </CheckboxGroup>\n          </Flex>\n          <Flex container={{ direction: 'column', pad: 0.5 }}>\n            <ComboBox\n              label='Status'\n              mode='single-select'\n              required\n              selected={\n                selected\n                  ? {\n                      items: {\n                        id: selected?.id,\n                        text: selected?.primary\n                      }\n                    }\n                  : undefined\n              }\n              menu={{\n                items,\n                variant: 'drill-down',\n                onItemClick: selectItem\n              }}\n            />\n          </Flex>\n        </Form>\n      </Flex>\n    ),\n    [items]\n  );\n\n  const drawerHeader = 'Chat settings';\n\n  const drawerContent = {\n    drawerHeader,\n    drawerView: chatSettings,\n    name: drawerHeader\n  };\n\n  useEffect(() => {\n    if (selected) openDrawer(drawerContent);\n  }, [selected]);\n\n  return (\n    <ChatSettingsPanel\n      label={drawerHeader}\n      status={\n        menuHelpers.getParentItem(items, selected?.id)?.id === 'temporarilyUnavailable'\n          ? (menuHelpers.getParentItem(items, selected?.id)?.id as UserAvailability)\n          : (selected?.id as UserAvailability)\n      }\n      onClick={() => openDrawer(drawerContent)}\n    />\n  );\n};\n\nconst EmailNotifications = () => {\n  const { closeDrawer } = useContext(AppShellDrawerContext);\n\n  const [sortOptions, setSortOptions] = useState<MenuItemProps[]>([\n    { id: 'Most recent', primary: 'Most recent', selected: true },\n    { id: 'Most urgent', primary: 'Most urgent', selected: false },\n    { id: 'All unread', primary: 'All unread', selected: false }\n  ]);\n\n  const selected = menuHelpers.getSelected(sortOptions)[0];\n\n  const selectItem = (id: MenuItemProps['id']) => {\n    setSortOptions(cur => menuHelpers.selectItem(cur, id, 'single-select') as MenuItemProps[]);\n  };\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }} item={{ grow: 1 }}>\n      <Flex container={{ justify: 'center', pad: [1, 0, 0] }}>\n        <Button onClick={closeDrawer}>Get next email</Button>\n      </Flex>\n      <Flex container={{ direction: 'column', pad: [0, 2] }}>\n        <ComboBox\n          label='Sorted by'\n          mode='single-select'\n          selected={\n            selected\n              ? {\n                  items: {\n                    id: selected?.id,\n                    text: selected?.primary\n                  }\n                }\n              : undefined\n          }\n          menu={{\n            items: sortOptions,\n            onItemClick: selectItem\n          }}\n        />\n      </Flex>\n\n      <EmailSummaryList\n        items={emailSummaryItems}\n        as={AppshellEmailSummaryList}\n        onItemClick={closeDrawer}\n        emptyMessage='No emails'\n        selectable={false}\n      />\n    </Flex>\n  );\n};\n\nexport const EmailNotificationPanelMock: FunctionComponent = () => {\n  const { openDrawer } = useContext(AppShellDrawerContext);\n\n  const drawerHeader = 'My open emails';\n\n  const drawerContent = {\n    drawerHeader,\n    drawerView: <EmailNotifications />,\n    name: drawerHeader\n  };\n\n  return (\n    <EmailNotificationPanel\n      count={15}\n      label={drawerHeader}\n      onClick={() => openDrawer(drawerContent)}\n    />\n  );\n};\n"]}

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

@@ -1,13 +0,0 @@
-import type { StoryFn } from '@storybook/react';
-import type { InteractionTimerStoryProps } from '../InteractionTimer/InteractionTimer.stories';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
-export default _default;
-interface CSAppShellProps {
-    isDraggable?: boolean;
-    hasInteractionNotifications?: InteractionTimerStoryProps['hasNotifications'];
-    enableSla?: InteractionTimerStoryProps['showTimer'];
-    ctiPanel: 'internal' | 'external';
-    applyThemeToExternalCTI: boolean;
-}
-export declare const CSAppShell: StoryFn<CSAppShellProps>;
-//# sourceMappingURL=CSAppShell.stories.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"CSAppShell.stories.d.ts","sourceRoot":"","sources":["../../../src/cs/CSAppShell/CSAppShell.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AActD,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,8CAA8C,CAAC;;AAY/F,wBAmBU;AAEV,UAAU,eAAe;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2BAA2B,CAAC,EAAE,0BAA0B,CAAC,kBAAkB,CAAC,CAAC;IAC7E,SAAS,CAAC,EAAE,0BAA0B,CAAC,WAAW,CAAC,CAAC;IACpD,QAAQ,EAAE,UAAU,GAAG,UAAU,CAAC;IAClC,uBAAuB,EAAE,OAAO,CAAC;CAClC;AAED,eAAO,MAAM,UAAU,EAAE,OAAO,CAAC,eAAe,CA4L/C,CAAC"}

package/lib/cs/CSAppShell/CSAppShell.stories.js

@@ -1,172 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useState, useMemo } from 'react';
-import { createUID, TwoColumnPage, registerIcon } from '@pega/cosmos-react-core';
-import * as chatSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/chat-solid.icon';
-import { CaseViewMock } from '../../work/CaseView/CaseView.mocks';
-import { AppShellDemo } from '../../core/AppShell/AppShell.stories';
-import { TasksDemo } from '../../work/Tasks/Tasks.stories';
-import { FeedDemo } from '../../social/Feed/Feed.stories';
-import { EmailShellDemo } from '../../social/Email/Email.stories';
-import { StandardChat } from '../../social/Chat/Chat.stories';
-import { TaskManagerDemo } from '../TaskManager/TaskManager.stories';
-import { InteractionTimerDemo as InteractionTimerStory } from '../InteractionTimer/InteractionTimer.stories';
-import { AppShellMockData, ChatSettingsPanelMock, CTIControlPanel, CTIControlPanelContext, EmailNotificationPanelMock } from './CSAppShell.mocks';
-registerIcon(chatSolidIcon);
-export default {
-    title: 'Customer Service/CS App Shell',
-    parameters: {
-        layout: 'fullscreen'
-    },
-    args: {
-        isDraggable: true,
-        hasInteractionNotifications: true,
-        enableSla: true,
-        ctiPanel: 'internal',
-        applyThemeToExternalCTI: false
-    },
-    argTypes: {
-        isDraggable: { control: { type: 'boolean' } },
-        hasInteractionNotifications: { control: { type: 'boolean' } },
-        enableSla: { control: { type: 'boolean' } },
-        ctiPanel: { options: ['internal', 'external'], control: { type: 'inline-radio' } },
-        applyThemeToExternalCTI: { control: { type: 'boolean' } }
-    }
-};
-export const CSAppShell = (args) => {
-    const CaseData = AppShellMockData;
-    const home = _jsx(TwoColumnPage, { a: _jsx(FeedDemo, {}), b: _jsx(TasksDemo, {}), title: 'Welcome, Sara Davis' });
-    const [mainContent, setMainContent] = useState(home);
-    const [caseID, setCaseID] = useState(1001);
-    const [cases, setCases] = useState([]);
-    const [links, setLinks] = useState([
-        {
-            id: '01',
-            name: 'Home',
-            href: '#home',
-            icon: 'home-solid'
-        }
-    ]);
-    const renderCaseView = (name) => {
-        if (name) {
-            const { heading } = CaseData[name];
-            let persistentUtilityContent;
-            if (name === 'Mail interaction') {
-                persistentUtilityContent = {
-                    content: _jsx(EmailShellDemo, { hideSuggestions: true }),
-                    title: 'Email'
-                };
-            }
-            else if (name === 'Chat interaction') {
-                persistentUtilityContent = {
-                    content: _jsx(StandardChat, { chatHeight: '100%', chatWidth: '100%' }),
-                    title: 'Chat'
-                };
-            }
-            setMainContent(_jsx(CaseViewMock, { caseId: 'C-123', stages: false, tasks: _jsx(TaskManagerDemo, { verbatimStatus: 'pending' }), persistentUtility: persistentUtilityContent, heading: heading }));
-        }
-    };
-    const setActiveItem = (key) => {
-        setCases((prevCases = []) => {
-            return prevCases.map(caseItem => {
-                return { ...caseItem, active: caseItem.id === key };
-            });
-        });
-        setLinks((prevLinks = []) => {
-            return prevLinks.map(link => {
-                return {
-                    ...link,
-                    active: link.name === key
-                };
-            });
-        });
-    };
-    const createInteraction = (createLink) => {
-        const { primary, secondary, icon, customerName } = createLink;
-        const key = createUID();
-        const createdAt = new Date().getTime();
-        const interactionTimerId = createUID();
-        const newCase = {
-            visual: (_jsx(InteractionTimerStory, { id: interactionTimerId, icon: icon, showTimer: args.enableSla, hasNotifications: args.hasInteractionNotifications, meta: args.enableSla ? '0:00' : createLink.meta, interactionType: primary })),
-            primary: customerName || 'Unknown customer',
-            secondary,
-            createdAt,
-            id: key,
-            active: true,
-            onClick: () => {
-                setActiveItem(key);
-                renderCaseView(primary);
-            },
-            onDismiss: (e) => {
-                setActiveItem('Home');
-                e.stopPropagation();
-                setCases((prevCases = []) => prevCases.filter(caseItem => caseItem.id !== key));
-                setMainContent(home);
-            },
-            'aria-labelledby': interactionTimerId
-        };
-        setCases((prevCases = []) => [...prevCases, newCase]);
-        setActiveItem(key);
-        setCaseID(caseID + 1);
-        renderCaseView(primary);
-    };
-    const createLinks = [
-        {
-            primary: 'Phone interaction',
-            secondary: 'Received 20s ago',
-            icon: 'phone-solid',
-            meta: 'FH',
-            customerName: 'Ginger Ventura'
-        },
-        {
-            primary: 'Chat interaction',
-            secondary: 'Sent 2h ago',
-            icon: 'chat-solid',
-            meta: 'SC',
-            customerName: 'Sara Davis'
-        },
-        {
-            primary: 'Mail interaction',
-            secondary: 'Received 20s ago',
-            icon: 'mail-solid',
-            meta: 'JB',
-            customerName: 'John Brown'
-        }
-    ].map(item => {
-        const { primary, icon } = item;
-        return {
-            name: primary,
-            icon,
-            href: '',
-            onClick: () => {
-                createInteraction(item);
-            }
-        };
-    });
-    useEffect(() => {
-        createInteraction({
-            primary: 'Phone interaction',
-            secondary: 'Received 20s ago',
-            icon: 'phone-solid',
-            meta: 'GV',
-            customerName: 'Ginger Ventura'
-        });
-    }, []);
-    const utils = [_jsx(EmailNotificationPanelMock, {}), _jsx(ChatSettingsPanelMock, {}), _jsx(CTIControlPanel, {})];
-    const appInfo = {
-        href: 'https://www.pega.com/',
-        imageSrc: 'https://www.clipartmax.com/png/middle/345-3454195_account-executive-civilian-pega-logo-png.png',
-        fullImageSrc: 'Full Image Source',
-        appName: 'CS AppShell'
-    };
-    return (_jsx(CTIControlPanelContext.Provider, { value: useMemo(() => ({
-            type: args.ctiPanel,
-            draggable: args.isDraggable,
-            applyAppStyling: args.applyThemeToExternalCTI
-        }), [args.isDraggable, args.applyThemeToExternalCTI, args.ctiPanel]), children: _jsx(AppShellDemo, { main: mainContent, appInfo: appInfo, cases: cases, createLinks: createLinks, caseLinks: links, utils: utils, onLinkClick: (name) => {
-                if (name === 'Home') {
-                    setMainContent(home);
-                }
-                setActiveItem(name);
-            }, collapsedHoverMenus: true }) }));
-};
-//# sourceMappingURL=CSAppShell.stories.js.map