@pega/cosmos-react-demos 2.0.0 → 2.1.3

package/lib/cs/ArticleList/ArticleList.stories.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { action } from '@storybook/addon-actions';
+import { ComboBox, Flex, FormField, Icon, Link, MenuButton, Pagination, SearchInput, Select, Option, Text, menuHelpers, registerIcon } from '@pega/cosmos-react-core';
+import * as thumbsUpSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-up-solid.icon';
+import * as thumbsDownSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-down-solid.icon';
+import * as helpIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/help.icon';
+import { ArticleList, ArticleSummary, ArticleListHeader } from '@pega/cosmos-react-cs';
+import { ArticleListMockData } from './ArticleList.mocks';
+export default {
+    title: 'Customer Service/ArticleList',
+    component: ArticleList,
+    subcomponents: { ArticleSummary, ArticleListHeader },
+    parameters: {
+        layout: 'fullscreen'
+    }
+};
+registerIcon(thumbsUpSolidIcon, thumbsDownSolidIcon, helpIcon);
+export const FirstArticleList = () => {
+    const [query, setQuery] = useState('');
+    const [currentPage, setCurrentPage] = useState(1);
+    const [categoryFilter, setCategoryFilter] = useState(undefined);
+    const [categoriesList, setCategoriesList] = useState(ArticleListMockData.categoriesList.map(({ id, name, level, category }) => {
+        return {
+            id,
+            primary: name,
+            secondary: [level, category],
+            selected: false
+        };
+    }));
+    const handleArticleLinkClick = (event) => {
+        event.preventDefault();
+    };
+    const ALHeader = {
+        icon: _jsx(Icon, { name: 'help' }, void 0),
+        headerText: 'Knowledge articles',
+        primary: {
+            search: (_jsx(SearchInput, { value: query, onChange: (event) => setQuery(event.target.value), onSearchChange: action('Search query'), onSearchSubmit: action('Search submit'), placeholder: 'Search\u2026' }, void 0)),
+            actions: [
+                { text: 'Option Number 1', id: '1a' },
+                { text: 'Option Number 2', id: '2a' }
+            ],
+            followedFilter: (_jsx(Flex, { container: { gap: 1 }, children: _jsx(MenuButton, { variant: 'simple', menu: {
+                        items: [
+                            {
+                                primary: 'Filter 1',
+                                id: 'f1a'
+                            },
+                            {
+                                primary: 'Filter 2',
+                                id: 'f2a'
+                            }
+                        ]
+                    }, icon: 'filter', text: 'filter', iconOnly: true }, void 0) }, void 0))
+        },
+        secondary: (_jsxs(_Fragment, { children: [_jsx(FormField, { label: 'Category', children: _jsx(ComboBox, { selected: { items: categoryFilter }, placeholder: 'Filter by category', menu: {
+                            items: categoriesList,
+                            onItemClick: id => {
+                                const newList = menuHelpers.selectItem(categoriesList, id, 'single-select');
+                                const { primary: itemText } = menuHelpers.getSelected(newList)[0];
+                                setCategoriesList(newList);
+                                setCategoryFilter({ text: itemText, id });
+                            }
+                        } }, void 0) }, void 0), _jsx(Select, { label: 'Sort by', children: ArticleListMockData.sortByOptions.map(opt => (_jsx(Option, { children: opt }, opt))) }, void 0)] }, void 0))
+    };
+    return (_jsx("div", { style: {
+            width: '31.25rem',
+            maxHeight: '100vh'
+        }, children: _jsx(ArticleList, { skeletonize: false, header: _jsx(ArticleListHeader, { icon: ALHeader.icon, headerText: ALHeader.headerText, primary: ALHeader.primary, secondary: ALHeader.secondary, onSubmit: action('Filter details submitted') }, void 0), footer: _jsx(Flex, { container: { alignItems: 'center', justify: 'end' }, item: { grow: 1 }, children: _jsx(Pagination, { total: 70, pageNumber: currentPage, onPageChange: pageNumber => {
+                        setCurrentPage(pageNumber);
+                    } }, void 0) }, void 0), children: ArticleListMockData.articleList.map((dataItem, id) => {
+                return (_jsx(ArticleSummary, { header: _jsx(Link, { href: 'design.pega.com', "data-article-id": dataItem.articleId, onClick: handleArticleLinkClick, children: dataItem.header }, void 0), content: _jsx(Text, { children: dataItem.abstract }, void 0), articleID: `article-${id}`, meta: [
+                        _jsx(Text, { children: dataItem.meta.category }, void 0),
+                        dataItem.meta.publishedDate,
+                        _jsxs(Flex, { container: { gap: 2, alignItems: 'center' }, children: [_jsxs(Flex, { container: { gap: 1, alignItems: 'center' }, children: [_jsx(Icon, { name: 'thumbs-up-solid' }, void 0), _jsxs(Text, { children: ["(", dataItem.meta.likes, ")"] }, void 0)] }, void 0), _jsxs(Flex, { container: { gap: 1, alignItems: 'center' }, children: [_jsx(Icon, { name: 'thumbs-down-solid' }, void 0), _jsxs(Text, { children: ["(", dataItem.meta.disLikes, ")"] }, void 0)] }, void 0)] }, void 0)
+                    ] }, id.toString()));
+            }) }, void 0) }, void 0));
+};
+export const ArticleListWithSkeleton = () => (_jsx("div", { style: {
+        maxWidth: '31.25rem',
+        maxHeight: '100vh'
+    }, children: _jsx(ArticleList, { skeletonize: true }, void 0) }, void 0));
+//# sourceMappingURL=ArticleList.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleList.stories.js","sourceRoot":"","sources":["../../../src/cs/ArticleList/ArticleList.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, MouseEvent, SetStateAction } from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport {\n  ComboBox,\n  Flex,\n  FormField,\n  Icon,\n  Link,\n  MenuButton,\n  Pagination,\n  SearchInput,\n  Select,\n  Option,\n  Text,\n  menuHelpers,\n  MenuProps,\n  registerIcon\n} from '@pega/cosmos-react-core';\nimport * as thumbsUpSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-up-solid.icon';\nimport * as thumbsDownSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-down-solid.icon';\nimport * as helpIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/help.icon';\nimport { ArticleList, ArticleSummary, ArticleListHeader } from '@pega/cosmos-react-cs';\n\nimport { ArticleListMockData } from './ArticleList.mocks';\n\nexport default {\n  title: 'Customer Service/ArticleList',\n  component: ArticleList,\n  subcomponents: { ArticleSummary, ArticleListHeader },\n  parameters: {\n    layout: 'fullscreen'\n  }\n};\n\nregisterIcon(thumbsUpSolidIcon, thumbsDownSolidIcon, helpIcon);\n\nexport const FirstArticleList = () => {\n  const [query, setQuery] = useState('');\n  const [currentPage, setCurrentPage] = useState(1);\n  const [categoryFilter, setCategoryFilter] = useState<{ id: string; text: string } | undefined>(\n    undefined\n  );\n  const [categoriesList, setCategoriesList] = useState<MenuProps['items']>(\n    ArticleListMockData.categoriesList.map(({ id, name, level, category }) => {\n      return {\n        id,\n        primary: name,\n        secondary: [level, category],\n        selected: false\n      };\n    })\n  );\n\n  const handleArticleLinkClick = (event: MouseEvent) => {\n    event.preventDefault();\n  };\n\n  const ALHeader = {\n    icon: <Icon name='help' />,\n    headerText: 'Knowledge articles',\n    primary: {\n      search: (\n        <SearchInput\n          value={query}\n          onChange={(event: { target: { value: SetStateAction<string> } }) =>\n            setQuery(event.target.value)\n          }\n          onSearchChange={action('Search query')}\n          onSearchSubmit={action('Search submit')}\n          placeholder='Search…'\n        />\n      ),\n      actions: [\n        { text: 'Option Number 1', id: '1a' },\n        { text: 'Option Number 2', id: '2a' }\n      ],\n      followedFilter: (\n        <Flex container={{ gap: 1 }}>\n          <MenuButton\n            variant='simple'\n            menu={{\n              items: [\n                {\n                  primary: 'Filter 1',\n                  id: 'f1a'\n                },\n                {\n                  primary: 'Filter 2',\n                  id: 'f2a'\n                }\n              ]\n            }}\n            icon='filter'\n            text='filter'\n            iconOnly\n          />\n        </Flex>\n      )\n    },\n    secondary: (\n      <>\n        <FormField label='Category'>\n          <ComboBox\n            selected={{ items: categoryFilter }}\n            placeholder='Filter by category'\n            menu={{\n              items: categoriesList,\n              onItemClick: id => {\n                const newList = menuHelpers.selectItem(categoriesList, id, 'single-select');\n                const { primary: itemText } = menuHelpers.getSelected(newList)[0];\n                setCategoriesList(newList);\n                setCategoryFilter({ text: itemText, id });\n              }\n            }}\n          />\n        </FormField>\n        <Select label='Sort by'>\n          {ArticleListMockData.sortByOptions.map(opt => (\n            <Option key={opt}>{opt}</Option>\n          ))}\n        </Select>\n      </>\n    )\n  };\n  return (\n    <div\n      style={{\n        width: '31.25rem',\n        maxHeight: '100vh'\n      }}\n    >\n      <ArticleList\n        skeletonize={false}\n        header={\n          <ArticleListHeader\n            icon={ALHeader.icon}\n            headerText={ALHeader.headerText}\n            primary={ALHeader.primary}\n            secondary={ALHeader.secondary}\n            onSubmit={action('Filter details submitted')}\n          />\n        }\n        footer={\n          <Flex container={{ alignItems: 'center', justify: 'end' }} item={{ grow: 1 }}>\n            <Pagination\n              total={70}\n              pageNumber={currentPage}\n              onPageChange={pageNumber => {\n                setCurrentPage(pageNumber);\n              }}\n            />\n          </Flex>\n        }\n      >\n        {ArticleListMockData.articleList.map((dataItem, id) => {\n          return (\n            <ArticleSummary\n              key={id.toString()}\n              header={\n                <Link\n                  href='design.pega.com'\n                  data-article-id={dataItem.articleId}\n                  onClick={handleArticleLinkClick}\n                >\n                  {dataItem.header}\n                </Link>\n              }\n              content={<Text>{dataItem.abstract}</Text>}\n              articleID={`article-${id}`}\n              meta={[\n                <Text>{dataItem.meta.category}</Text>,\n                dataItem.meta.publishedDate,\n                <Flex container={{ gap: 2, alignItems: 'center' }}>\n                  <Flex container={{ gap: 1, alignItems: 'center' }}>\n                    <Icon name='thumbs-up-solid' />\n                    <Text>({dataItem.meta.likes})</Text>\n                  </Flex>\n                  <Flex container={{ gap: 1, alignItems: 'center' }}>\n                    <Icon name='thumbs-down-solid' />\n                    <Text>({dataItem.meta.disLikes})</Text>\n                  </Flex>\n                </Flex>\n              ]}\n            />\n          );\n        })}\n      </ArticleList>\n    </div>\n  );\n};\n\nexport const ArticleListWithSkeleton = () => (\n  <div\n    style={{\n      maxWidth: '31.25rem',\n      maxHeight: '100vh'\n    }}\n  >\n    <ArticleList skeletonize />\n  </div>\n);\n"]}

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

@@ -0,0 +1,240 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { action } from '@storybook/addon-actions';
+import { createUID, Status, TwoColumnPage, Icon, registerIcon, Button, Form, Flex, Input, Select, Option, Banner } from '@pega/cosmos-react-core';
+import * as chatSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/chat-solid.icon';
+import { CallControlPanelIcon } from '@pega/cosmos-react-cs';
+import { AppShellDemo } from '@pega/cosmos-react-demos/lib/core/AppShell/AppShell.stories';
+import { CaseViewDemo } from '@pega/cosmos-react-demos/lib/work/CaseView/CaseView.stories';
+import { TasksDemo } from '@pega/cosmos-react-demos/lib/work/Tasks/Tasks.stories';
+import { FeedDemo } from '@pega/cosmos-react-demos/lib/social/Feed/Feed.stories';
+import { EmailDemo } from '@pega/cosmos-react-demos/lib/social/Email/Email.stories';
+import { StandardChat } from '@pega/cosmos-react-demos/lib/social/Chat/Chat.stories';
+import { TaskManagerDemo as TaskManagerStory } from '@pega/cosmos-react-demos/lib/cs/TaskManager/TaskManager.stories';
+import { InteractionTimerDemo as InteractionTimerStory } from '@pega/cosmos-react-demos/lib/cs/InteractionTimer/InteractionTimer.stories';
+import { CallControlPanelDemo } from '@pega/cosmos-react-demos/lib/cs/CallControlPanel/CallControlPanel.stories';
+import { userStatusOptions } from '@pega/cosmos-react-demos/lib/cs/CallControlPanel/CallControlPanel.mocks';
+import { AppShellMockData } from './CSCaseView.mocks';
+registerIcon(chatSolidIcon);
+export default {
+    title: 'Customer Service/CS App Shell',
+    parameters: {
+        layout: 'fullscreen'
+    },
+    args: {
+        isDraggable: true,
+        hasInteractionNotifications: true,
+        enableSla: true
+    },
+    argTypes: {
+        isDraggable: { control: { type: 'boolean' } },
+        hasInteractionNotifications: { control: { type: 'boolean' } },
+        enableSla: { control: { type: 'boolean' } }
+    }
+};
+const CallLoginForm = ({ ctiLinkOptions, onLogin }) => {
+    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', children: "Cancel" }, void 0), _jsx(Button, { name: 'submit', type: 'submit', variant: 'primary', disabled: !canSubmit, onClick: (e) => {
+                    e.preventDefault();
+                    onLogin(ctiLinkId, agentId, password).then(setErrorMessage);
+                }, children: "Login" }, void 0)] }, void 0));
+    return (_jsxs(Form, { actions: actions, banners: errorMessage ? _jsx(Banner, { id: 'error', variant: 'urgent', messages: [errorMessage] }, void 0) : 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 }, void 0))) }, void 0), _jsx(Input, { required: true, label: 'Agent ID', value: agentId, onChange: (e) => setAgentId(e.target.value) }, void 0), _jsx(Input, { type: 'password', required: true, label: 'Password', value: password, onChange: (e) => setPassword(e.target.value) }, void 0), _jsx(Input, { required: true, label: 'Extension', value: extension, onChange: (e) => setExtension(e.target.value) }, void 0)] }, void 0));
+};
+export const CSAppShell = (args) => {
+    const CaseData = AppShellMockData;
+    const home = _jsx(TwoColumnPage, { a: _jsx(FeedDemo, {}, void 0), b: _jsx(TasksDemo, {}, void 0), title: 'Welcome, Sara Davis' }, void 0);
+    const [mainContent, setMainContent] = useState(home);
+    const [caseID, setCaseID] = useState(1001);
+    const [agentStatus, setAgentStatus] = useState(userStatusOptions[0]);
+    const [callPanelVisible, setCallPanelVisible] = useState(false);
+    const [cases, setCases] = useState([]);
+    const [links, setLinks] = useState([
+        {
+            id: '01',
+            name: 'Home',
+            href: '#home',
+            icon: 'home-solid'
+        }
+    ]);
+    const tabs = [
+        { name: 'Customer  notes', id: 'Pulse' },
+        { name: 'Accounts', id: 'Accounts' }
+    ];
+    const demoActions = [
+        {
+            text: 'Change stage',
+            id: createUID(),
+            onClick: action('Clicked on change stage')
+        },
+        {
+            text: 'Wrap up',
+            id: createUID(),
+            onClick: action('Clicked on Wrap up')
+        },
+        {
+            text: 'Exit interaction',
+            id: createUID(),
+            onClick: action('Clicked on exit interaction')
+        }
+    ];
+    const RenderCaseView = (name) => {
+        if (name) {
+            const { caseId, heading, primaryFields, secondaryFields: secondaryField } = CaseData[name];
+            const secondaryFields = secondaryField.map((field) => {
+                if (field.name === 'Status') {
+                    return { ...field, value: _jsx(Status, { variant: 'success', children: field.value }, void 0) };
+                }
+                return field;
+            });
+            let persistentUtility;
+            if (name === 'Mail Interaction') {
+                persistentUtility = {
+                    content: _jsx(EmailDemo, { hideSuggestions: true }, void 0),
+                    title: 'Email'
+                };
+            }
+            else if (name === 'Chat Interaction') {
+                persistentUtility = {
+                    content: _jsx(StandardChat, { chatWidth: '100%' }, void 0),
+                    title: 'Chat'
+                };
+            }
+            setMainContent(_jsx(CaseViewDemo, { caseId: caseId, heading: heading, parentCases: [], actions: demoActions, primaryFields: primaryFields, secondaryFields: secondaryFields, tabs: tabs, stages: false, tasksWidget: _jsx(TaskManagerStory, {}, void 0), persistentUtility: persistentUtility, showUtilities: false, showFollowedIcon: false, defaultCollapsedUtilities: true }, void 0));
+        }
+    };
+    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 newCase = {
+            visual: (_jsx(InteractionTimerStory, { createdAt: createdAt, icon: icon, showTimer: args.enableSla, hasNotifications: args.hasInteractionNotifications, meta: args.enableSla ? '0:00' : createLink.meta }, void 0)),
+            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);
+            }
+        };
+        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 actions = (_jsxs(_Fragment, { children: [_jsx(Button, { name: 'Cancel', variant: 'secondary', onClick: (e) => {
+                    action('Click')(`${e.currentTarget.name}:${e.type}`);
+                }, children: "Cancel" }, void 0), _jsx(Button, { name: 'Submit', type: 'submit', variant: 'primary', children: "Log in" }, void 0)] }, void 0));
+    const chatSettings = (_jsx(Flex, { container: { direction: 'column', gap: 2, pad: 2 }, item: { grow: 1 }, children: _jsxs(Form, { actions: actions, children: [_jsx(Input, { name: 'agentId', label: 'Agent Id', autoComplete: 'off' }, void 0), _jsx(Input, { name: 'password', type: 'password', label: 'Password', autoComplete: 'off' }, void 0), _jsxs(Select, { label: 'Make me', children: [_jsx(Option, { children: "Available" }, void 0), _jsx(Option, { children: "Unavailable" }, void 0)] }, void 0)] }, void 0) }, void 0));
+    const utils = [
+        {
+            name: 'Chat settings',
+            visual: _jsx(Icon, { name: 'chat-solid' }, void 0),
+            drawerView: chatSettings,
+            drawerHeader: 'Pega Chat Log In'
+        },
+        {
+            name: 'Call panel',
+            visual: (_jsx(CallControlPanelIcon, { status: agentStatus.status, label: agentStatus.label, variant: 'icon', panelVisible: callPanelVisible }, void 0)),
+            ...(agentStatus.status === 'offline'
+                ? {
+                    drawerView: (_jsx(Flex, { container: { direction: 'column', gap: 2, pad: 2 }, item: { grow: 1 }, 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[1]);
+                                setCallPanelVisible(true);
+                                return Promise.resolve(undefined);
+                            } }, void 0) }, void 0)),
+                    drawerHeader: 'Pega Call Log In'
+                }
+                : {
+                    onClick: () => setCallPanelVisible(isVisible => !isVisible)
+                })
+        }
+    ];
+    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 (_jsxs(_Fragment, { children: [_jsx(AppShellDemo, { main: mainContent, appInfo: appInfo, cases: cases, createLinks: createLinks, caseLinks: links, utils: utils, onLinkClick: (name) => {
+                    if (name === 'Home') {
+                        setMainContent(home);
+                    }
+                    setActiveItem(name);
+                } }, void 0), callPanelVisible && (_jsx(CallControlPanelDemo, { status: agentStatus.id, onStatusChange: setAgentStatus, isDraggable: args.isDraggable }, void 0))] }, void 0));
+};
+//# sourceMappingURL=CSAppShell.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CSAppShell.stories.js","sourceRoot":"","sources":["../../../src/cs/CSCaseView/CSAppShell.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useState, MouseEvent, ChangeEvent, FunctionComponent } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport { Story } from '@storybook/react';\n\nimport {\n  AppShellProps,\n  createUID,\n  Status,\n  TwoColumnPage,\n  Icon,\n  registerIcon,\n  Button,\n  Form,\n  Flex,\n  Input,\n  Select,\n  Option,\n  Banner\n} from '@pega/cosmos-react-core';\nimport * as chatSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/chat-solid.icon';\nimport { CallControlPanelIcon, UserAvailabilityStatusOption } from '@pega/cosmos-react-cs';\nimport { AppShellDemo } from '@pega/cosmos-react-demos/lib/core/AppShell/AppShell.stories';\nimport { CaseViewDemo } from '@pega/cosmos-react-demos/lib/work/CaseView/CaseView.stories';\nimport { TasksDemo } from '@pega/cosmos-react-demos/lib/work/Tasks/Tasks.stories';\nimport { FeedDemo } from '@pega/cosmos-react-demos/lib/social/Feed/Feed.stories';\nimport { EmailDemo } from '@pega/cosmos-react-demos/lib/social/Email/Email.stories';\nimport { StandardChat } from '@pega/cosmos-react-demos/lib/social/Chat/Chat.stories';\nimport { TaskManagerDemo as TaskManagerStory } from '@pega/cosmos-react-demos/lib/cs/TaskManager/TaskManager.stories';\nimport {\n  InteractionTimerDemo as InteractionTimerStory,\n  InteractionTimerStoryProps\n} from '@pega/cosmos-react-demos/lib/cs/InteractionTimer/InteractionTimer.stories';\nimport { CallControlPanelDemo } from '@pega/cosmos-react-demos/lib/cs/CallControlPanel/CallControlPanel.stories';\nimport { userStatusOptions } from '@pega/cosmos-react-demos/lib/cs/CallControlPanel/CallControlPanel.mocks';\n\nimport { AppShellMockData } from './CSCaseView.mocks';\n\nregisterIcon(chatSolidIcon);\n\nexport default {\n  title: 'Customer Service/CS App Shell',\n  parameters: {\n    layout: 'fullscreen'\n  },\n  args: {\n    isDraggable: true,\n    hasInteractionNotifications: true,\n    enableSla: true\n  },\n  argTypes: {\n    isDraggable: { control: { type: 'boolean' } },\n    hasInteractionNotifications: { control: { type: 'boolean' } },\n    enableSla: { control: { type: 'boolean' } }\n  }\n};\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}\n\nconst CallLoginForm: FunctionComponent<LoginFormProps> = ({\n  ctiLinkOptions,\n  onLogin\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 name='cancel' variant='secondary'>\n        Cancel\n      </Button>\n      <Button\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={\n        errorMessage ? <Banner id='error' variant='urgent' messages={[errorMessage]} /> : undefined\n      }\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};\ninterface CSAppShellProps {\n  isDraggable?: boolean;\n  hasInteractionNotifications?: InteractionTimerStoryProps['hasNotifications'];\n  enableSla?: InteractionTimerStoryProps['showTimer'];\n}\n\nexport const CSAppShell: Story<CSAppShellProps> = (args: CSAppShellProps) => {\n  const CaseData = AppShellMockData as any;\n\n  const home = <TwoColumnPage a={<FeedDemo />} b={<TasksDemo />} title='Welcome, Sara Davis' />;\n\n  const [mainContent, setMainContent] = useState(home);\n  const [caseID, setCaseID] = useState(1001);\n  const [agentStatus, setAgentStatus] = useState<UserAvailabilityStatusOption>(\n    userStatusOptions[0] as UserAvailabilityStatusOption\n  );\n  const [callPanelVisible, setCallPanelVisible] = useState(false);\n  const [cases, setCases] = useState<AppShellProps['cases']>([]);\n  const [links, setLinks] = useState<AppShellProps['links']>([\n    {\n      id: '01',\n      name: 'Home',\n      href: '#home',\n      icon: 'home-solid'\n    }\n  ]);\n\n  const tabs = [\n    { name: 'Customer  notes', id: 'Pulse' },\n    { name: 'Accounts', id: 'Accounts' }\n  ];\n\n  const demoActions = [\n    {\n      text: 'Change stage',\n      id: createUID(),\n      onClick: action('Clicked on change stage')\n    },\n    {\n      text: 'Wrap up',\n      id: createUID(),\n      onClick: action('Clicked on Wrap up')\n    },\n    {\n      text: 'Exit interaction',\n      id: createUID(),\n      onClick: action('Clicked on exit interaction')\n    }\n  ];\n\n  const RenderCaseView = (name: string) => {\n    if (name) {\n      const { caseId, heading, primaryFields, secondaryFields: secondaryField } = CaseData[name];\n      const secondaryFields = secondaryField.map((field: any) => {\n        if (field.name === 'Status') {\n          return { ...field, value: <Status variant='success'>{field.value}</Status> };\n        }\n        return field;\n      });\n      let persistentUtility;\n      if (name === 'Mail Interaction') {\n        persistentUtility = {\n          content: <EmailDemo hideSuggestions />,\n          title: 'Email'\n        };\n      } else if (name === 'Chat Interaction') {\n        persistentUtility = {\n          content: <StandardChat chatWidth='100%' />,\n          title: 'Chat'\n        };\n      }\n      setMainContent(\n        <CaseViewDemo\n          caseId={caseId}\n          heading={heading}\n          parentCases={[]}\n          actions={demoActions}\n          primaryFields={primaryFields}\n          secondaryFields={secondaryFields}\n          tabs={tabs}\n          stages={false}\n          tasksWidget={<TaskManagerStory />}\n          persistentUtility={persistentUtility}\n          showUtilities={false}\n          showFollowedIcon={false}\n          defaultCollapsedUtilities\n        />\n      );\n    }\n  };\n\n  const setActiveItem = (key: string) => {\n    setCases((prevCases = []) => {\n      return prevCases.map(caseItem => {\n        return { ...caseItem, active: caseItem.id === key };\n      });\n    });\n    setLinks((prevLinks = []) => {\n      return prevLinks.map(link => {\n        return {\n          ...link,\n          active: link.name === key\n        };\n      });\n    });\n  };\n\n  const createInteraction = (createLink: {\n    primary: string;\n    secondary?: string;\n    icon: string;\n    meta: string;\n    customerName?: string;\n  }) => {\n    const { primary, secondary, icon, customerName } = createLink;\n    const key: string = createUID();\n    const createdAt = new Date().getTime();\n    const newCase = {\n      visual: (\n        <InteractionTimerStory\n          createdAt={createdAt}\n          icon={icon as string}\n          showTimer={args.enableSla}\n          hasNotifications={args.hasInteractionNotifications}\n          meta={args.enableSla ? '0:00' : createLink.meta}\n        />\n      ),\n      primary: customerName || 'Unknown customer',\n      secondary,\n      createdAt,\n      id: key,\n      active: true,\n      onClick: () => {\n        setActiveItem(key);\n        RenderCaseView(primary);\n      },\n      onDismiss: (e: any) => {\n        setActiveItem('Home');\n        e.stopPropagation();\n        setCases((prevCases = []) => prevCases.filter(caseItem => caseItem.id !== key));\n        setMainContent(home);\n      }\n    };\n    setCases((prevCases = []) => [...prevCases, newCase]);\n    setActiveItem(key);\n    setCaseID(caseID + 1);\n    RenderCaseView(primary);\n  };\n\n  const createLinks = [\n    {\n      primary: 'Phone Interaction',\n      secondary: 'Received 20s ago',\n      icon: 'phone-solid',\n      meta: 'FH',\n      customerName: 'Ginger Ventura'\n    },\n    {\n      primary: 'Chat Interaction',\n      secondary: 'Sent 2h ago',\n      icon: 'chat-solid',\n      meta: 'SC',\n      customerName: 'Sara Davis'\n    },\n    {\n      primary: 'Mail Interaction',\n      secondary: 'Received 20s ago',\n      icon: 'mail-solid',\n      meta: 'JB',\n      customerName: 'John Brown'\n    }\n  ].map(item => {\n    const { primary, icon } = item;\n    return {\n      name: primary,\n      icon,\n      href: '',\n      onClick: () => {\n        createInteraction(item);\n      }\n    };\n  });\n\n  useEffect(() => {\n    createInteraction({\n      primary: 'Phone Interaction',\n      secondary: 'Received 20s ago',\n      icon: 'phone-solid',\n      meta: 'GV',\n      customerName: 'Ginger Ventura'\n    });\n  }, []);\n  const actions = (\n    <>\n      <Button\n        name='Cancel'\n        variant='secondary'\n        onClick={(e: MouseEvent<HTMLButtonElement>) => {\n          action('Click')(`${e.currentTarget.name}:${e.type}`);\n        }}\n      >\n        Cancel\n      </Button>\n      <Button name='Submit' type='submit' variant='primary'>\n        Log in\n      </Button>\n    </>\n  );\n  const chatSettings = (\n    <Flex container={{ direction: 'column', gap: 2, pad: 2 }} item={{ grow: 1 }}>\n      <Form actions={actions}>\n        <Input name='agentId' label='Agent Id' autoComplete='off' />\n\n        <Input name='password' type='password' label='Password' autoComplete='off' />\n        <Select label='Make me'>\n          <Option>Available</Option>\n          <Option>Unavailable</Option>\n        </Select>\n      </Form>\n    </Flex>\n  );\n\n  const utils = [\n    {\n      name: 'Chat settings',\n      visual: <Icon name='chat-solid' />,\n      drawerView: chatSettings,\n      drawerHeader: 'Pega Chat Log In'\n    },\n    {\n      name: 'Call panel',\n      visual: (\n        <CallControlPanelIcon\n          status={agentStatus.status}\n          label={agentStatus.label}\n          variant='icon'\n          panelVisible={callPanelVisible}\n        />\n      ),\n      ...(agentStatus.status === 'offline'\n        ? {\n            drawerView: (\n              <Flex container={{ direction: 'column', gap: 2, pad: 2 }} item={{ grow: 1 }}>\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[1] as UserAvailabilityStatusOption);\n                    setCallPanelVisible(true);\n                    return Promise.resolve(undefined);\n                  }}\n                />\n              </Flex>\n            ),\n            drawerHeader: 'Pega Call Log In'\n          }\n        : {\n            onClick: () => setCallPanelVisible(isVisible => !isVisible)\n          })\n    }\n  ];\n\n  const appInfo = {\n    href: 'https://www.pega.com/',\n    imageSrc:\n      'https://www.clipartmax.com/png/middle/345-3454195_account-executive-civilian-pega-logo-png.png',\n    fullImageSrc: 'Full Image Source',\n    appName: 'CS AppShell'\n  };\n\n  return (\n    <>\n      <AppShellDemo\n        main={mainContent}\n        appInfo={appInfo}\n        cases={cases}\n        createLinks={createLinks}\n        caseLinks={links}\n        utils={utils}\n        onLinkClick={(name: string) => {\n          if (name === 'Home') {\n            setMainContent(home);\n          }\n          setActiveItem(name);\n        }}\n      />\n      {callPanelVisible && (\n        <CallControlPanelDemo\n          status={agentStatus.id}\n          onStatusChange={setAgentStatus}\n          isDraggable={args.isDraggable}\n        />\n      )}\n    </>\n  );\n};\n"]}

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

@@ -0,0 +1,193 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { array, text } from '@storybook/addon-knobs';
+import { action } from '@storybook/addon-actions';
+import { useRef, useState } from 'react';
+import { createUID } from '@pega/cosmos-react-core';
+import { CallControlPanel, CalleePicker } from '@pega/cosmos-react-cs';
+import { contactsList, transferReasons, userStatusOptions } from './CallControlPanel.mocks';
+export default {
+    title: 'Customer Service/CallControlPanel',
+    component: CallControlPanel,
+    args: {
+        isDraggable: true
+    },
+    argTypes: {
+        isDraggable: { control: { type: 'boolean' } }
+    }
+};
+export const CallControlPanelDemo = (args) => {
+    const [currentStatus, setCurrentStatus] = useState(args.status || 'available');
+    const inStatusSince = useRef(Date.now());
+    const [calls, setCalls] = useState([]);
+    const slaConfig = array('SLA timeouts', ['30', '50']).map(Number);
+    const [contacts, setContacts] = useState(contactsList);
+    const [error, setError] = useState();
+    const callsList = useRef(calls);
+    callsList.current = calls;
+    const onPauseToggle = (id) => {
+        const activeCallIndex = callsList.current.findIndex((call) => call.id === id);
+        const activeCall = callsList.current[activeCallIndex];
+        callsList.current.splice(activeCallIndex, 1, {
+            ...activeCall,
+            onHoldSince: activeCall.onHoldSince === undefined ? Date.now() : undefined
+        });
+        setCalls([...callsList.current]);
+    };
+    const onMuteToggle = (id) => {
+        const activeCallIndex = callsList.current.findIndex((call) => call.id === id);
+        const activeCall = callsList.current[activeCallIndex];
+        callsList.current.splice(activeCallIndex, 1, {
+            ...activeCall,
+            muted: !activeCall.muted
+        });
+        setCalls([...callsList.current]);
+    };
+    const onMergeCall = (id) => {
+        const activeCall = callsList.current.find((call) => call.id === id);
+        if (!activeCall)
+            return;
+        callsList.current.splice(0, 1, {
+            ...callsList.current[0],
+            participants: [...callsList.current[0].participants, ...activeCall.participants],
+            onHoldSince: undefined
+        });
+        setCalls([...callsList.current.filter(callId => callId.id !== id)]);
+    };
+    const onEndCall = (id) => {
+        const newList = callsList.current.filter(item => item.id !== id);
+        setCalls(newList);
+    };
+    const onConsultAction = (id, phoneNumber) => {
+        const caller = contactsList.find(person => person.phoneNumber === phoneNumber);
+        const consultCall = {
+            id: createUID(),
+            startedAt: Date.now(),
+            onMergeCall,
+            transferOptions: transferReasons,
+            muted: false,
+            onMuteToggle,
+            onPauseToggle,
+            participants: [
+                {
+                    name: caller?.primary || '',
+                    info: caller?.secondary || '',
+                    id: caller?.primary || '',
+                    onEndCall: (callId, participantId) => {
+                        // find consult call
+                        const callIndex = callsList.current.findIndex(call => call.id === consultCall.id);
+                        // end consult call if still exists
+                        if (callIndex !== -1)
+                            onEndCall(callId);
+                        else {
+                            const activeCallIndex = callsList.current.findIndex(call => call.id === callId);
+                            const activeCall = callsList.current[activeCallIndex];
+                            callsList.current.splice(activeCallIndex, 1, {
+                                ...activeCall,
+                                participants: [
+                                    ...activeCall.participants.filter(participant => participant.id === participantId)
+                                ]
+                            });
+                            setCalls([...callsList.current]);
+                        }
+                    }
+                }
+            ]
+        };
+        const updatedCalls = callsList.current.map((call) => {
+            return { ...call, onHoldSince: Date.now() };
+        });
+        updatedCalls.push(consultCall);
+        setCalls(updatedCalls);
+    };
+    const onConferenceAction = (id, phoneNumber) => {
+        const caller = contactsList.find(person => person.phoneNumber === phoneNumber);
+        const conferenceCall = {
+            id: createUID(),
+            startedAt: Date.now(),
+            onMergeCall,
+            transferOptions: transferReasons,
+            muted: false,
+            onMuteToggle,
+            onPauseToggle,
+            participants: [
+                {
+                    name: caller?.primary || '',
+                    info: caller?.secondary || '',
+                    id: caller?.primary || '',
+                    onEndCall: (callId, participantId) => {
+                        // find conference call
+                        const callIndex = callsList.current.findIndex(call => call.id === conferenceCall.id);
+                        // end conference call if still exists
+                        if (callIndex !== -1)
+                            onEndCall(callId);
+                        else {
+                            const activeCallIndex = callsList.current.findIndex(call => call.id === callId);
+                            const activeCall = callsList.current[activeCallIndex];
+                            callsList.current.splice(activeCallIndex, 1, {
+                                ...activeCall,
+                                participants: [
+                                    ...activeCall.participants.filter(participant => participant.id === participantId)
+                                ]
+                            });
+                            setCalls([...callsList.current]);
+                        }
+                    }
+                }
+            ]
+        };
+        callsList.current.splice(0, 1, {
+            ...callsList.current[0],
+            participants: [...callsList.current[0].participants, ...conferenceCall.participants],
+            onHoldSince: undefined
+        });
+        setCalls([...callsList.current.filter(callId => callId.id !== conferenceCall.id)]);
+    };
+    return (_jsx(CallControlPanel, { heading: text('Heading', 'Agent Smith'), statusOptions: userStatusOptions, status: currentStatus, inStatusSince: inStatusSince.current, onStatusChange: value => {
+            if (value === 'reconnecting') {
+                setError('You cannot set this status');
+                return;
+            }
+            setCurrentStatus(value);
+            args.onStatusChange?.(userStatusOptions.find(s => s.id === value));
+        }, message: error, calls: calls, draggable: args.isDraggable, onAddCall: (phoneNumber) => {
+            const call = {
+                id: createUID(),
+                startedAt: Date.now(),
+                slaConfig,
+                onConsultAction,
+                onConferenceAction,
+                transferOptions: transferReasons,
+                onTransferAction: (id, data) => {
+                    action('onTransferAction')(id, data);
+                    onEndCall(id);
+                },
+                muted: false,
+                onMuteToggle,
+                onPauseToggle,
+                onDTMFPress: action('onDTMFPress'),
+                participants: [
+                    {
+                        id: contactsList.find(person => person.phoneNumber === phoneNumber)?.primary || '',
+                        name: contactsList.find(person => person.phoneNumber === phoneNumber)?.primary ||
+                            'Unknown',
+                        onEndCall: () => onEndCall(call.id)
+                    }
+                ]
+            };
+            setCalls([call]);
+            setCurrentStatus('not_available');
+        }, contactsList: contacts, onFavoriteToggle: (phoneNumber, favorite) => {
+            const element = contacts.find(item => item.phoneNumber === phoneNumber);
+            element.favorite = !favorite;
+            setContacts([...contacts]);
+        } }, void 0));
+};
+export const NewCallDemo = () => {
+    const [items, setItems] = useState(contactsList);
+    return (_jsx(CalleePicker, { heading: 'New call', contactsList: contactsList, onFavoriteToggle: (phoneNumber, favorite) => {
+            const element = items.find(item => item.phoneNumber === phoneNumber);
+            element.favorite = !favorite;
+            setItems([...items]);
+        }, onCall: phoneNumber => action('onCall')(phoneNumber) }, void 0));
+};
+//# sourceMappingURL=CallControlPanel.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CallControlPanel.stories.js","sourceRoot":"","sources":["../../../src/cs/CallControlPanel/CallControlPanel.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { array, text } from '@storybook/addon-knobs';\nimport { action } from '@storybook/addon-actions';\nimport { useRef, useState } from 'react';\nimport { Meta, Story } from '@storybook/react';\n\nimport { createUID } from '@pega/cosmos-react-core';\nimport {\n  CallControlPanel,\n  CalleePicker,\n  CallProps,\n  UserAvailabilityStatusOption\n} from '@pega/cosmos-react-cs';\n\nimport { contactsList, transferReasons, userStatusOptions } from './CallControlPanel.mocks';\n\nexport default {\n  title: 'Customer Service/CallControlPanel',\n  component: CallControlPanel,\n  args: {\n    isDraggable: true\n  },\n  argTypes: {\n    isDraggable: { control: { type: 'boolean' } }\n  }\n} as Meta;\n\ninterface CallControlPanelStoryProps {\n  isDraggable?: boolean;\n  status?: UserAvailabilityStatusOption['id'];\n  onStatusChange?: (newStatus: UserAvailabilityStatusOption) => void;\n}\n\nexport const CallControlPanelDemo: Story<CallControlPanelStoryProps> = (\n  args: CallControlPanelStoryProps\n) => {\n  const [currentStatus, setCurrentStatus] = useState<UserAvailabilityStatusOption['id']>(\n    args.status || 'available'\n  );\n  const inStatusSince = useRef(Date.now());\n  const [calls, setCalls] = useState<CallProps[]>([]);\n  const slaConfig = array('SLA timeouts', ['30', '50']).map(Number);\n  const [contacts, setContacts] = useState(contactsList);\n  const [error, setError] = useState<string>();\n  const callsList = useRef(calls);\n  callsList.current = calls;\n\n  const onPauseToggle = (id: string) => {\n    const activeCallIndex = callsList.current.findIndex((call: CallProps) => call.id === id);\n    const activeCall = callsList.current[activeCallIndex];\n    callsList.current.splice(activeCallIndex, 1, {\n      ...activeCall,\n      onHoldSince: activeCall.onHoldSince === undefined ? Date.now() : undefined\n    });\n    setCalls([...callsList.current]);\n  };\n\n  const onMuteToggle = (id: string) => {\n    const activeCallIndex = callsList.current.findIndex((call: CallProps) => call.id === id);\n    const activeCall = callsList.current[activeCallIndex];\n    callsList.current.splice(activeCallIndex, 1, {\n      ...activeCall,\n      muted: !activeCall.muted\n    });\n    setCalls([...callsList.current]);\n  };\n\n  const onMergeCall = (id: string) => {\n    const activeCall = callsList.current.find((call: CallProps) => call.id === id);\n    if (!activeCall) return;\n    callsList.current.splice(0, 1, {\n      ...callsList.current[0],\n      participants: [...callsList.current[0].participants, ...activeCall.participants],\n      onHoldSince: undefined\n    });\n    setCalls([...callsList.current.filter(callId => callId.id !== id)]);\n  };\n\n  const onEndCall = (id: CallProps['id']) => {\n    const newList = callsList.current.filter(item => item.id !== id);\n    setCalls(newList);\n  };\n\n  const onConsultAction = (id: string, phoneNumber: string) => {\n    const caller = contactsList.find(person => person.phoneNumber === phoneNumber);\n    const consultCall: CallProps = {\n      id: createUID(),\n      startedAt: Date.now(),\n      onMergeCall,\n      transferOptions: transferReasons,\n      muted: false,\n      onMuteToggle,\n      onPauseToggle,\n      participants: [\n        {\n          name: caller?.primary || '',\n          info: caller?.secondary || '',\n          id: caller?.primary || '',\n          onEndCall: (callId, participantId) => {\n            // find consult call\n            const callIndex = callsList.current.findIndex(call => call.id === consultCall.id);\n            // end consult call if still exists\n            if (callIndex !== -1) onEndCall(callId);\n            else {\n              const activeCallIndex = callsList.current.findIndex(call => call.id === callId);\n              const activeCall = callsList.current[activeCallIndex];\n              callsList.current.splice(activeCallIndex, 1, {\n                ...activeCall,\n                participants: [\n                  ...activeCall.participants.filter(participant => participant.id === participantId)\n                ]\n              });\n              setCalls([...callsList.current]);\n            }\n          }\n        }\n      ]\n    };\n    const updatedCalls: CallProps[] = callsList.current.map((call: CallProps) => {\n      return { ...call, onHoldSince: Date.now() };\n    });\n    updatedCalls.push(consultCall);\n    setCalls(updatedCalls);\n  };\n\n  const onConferenceAction = (id: string, phoneNumber: string) => {\n    const caller = contactsList.find(person => person.phoneNumber === phoneNumber);\n    const conferenceCall: CallProps = {\n      id: createUID(),\n      startedAt: Date.now(),\n      onMergeCall,\n      transferOptions: transferReasons,\n      muted: false,\n      onMuteToggle,\n      onPauseToggle,\n      participants: [\n        {\n          name: caller?.primary || '',\n          info: caller?.secondary || '',\n          id: caller?.primary || '',\n          onEndCall: (callId, participantId) => {\n            // find conference call\n            const callIndex = callsList.current.findIndex(call => call.id === conferenceCall.id);\n            // end conference call if still exists\n            if (callIndex !== -1) onEndCall(callId);\n            else {\n              const activeCallIndex = callsList.current.findIndex(call => call.id === callId);\n              const activeCall = callsList.current[activeCallIndex];\n              callsList.current.splice(activeCallIndex, 1, {\n                ...activeCall,\n                participants: [\n                  ...activeCall.participants.filter(participant => participant.id === participantId)\n                ]\n              });\n              setCalls([...callsList.current]);\n            }\n          }\n        }\n      ]\n    };\n\n    callsList.current.splice(0, 1, {\n      ...callsList.current[0],\n      participants: [...callsList.current[0].participants, ...conferenceCall.participants],\n      onHoldSince: undefined\n    });\n    setCalls([...callsList.current.filter(callId => callId.id !== conferenceCall.id)]);\n  };\n\n  return (\n    <CallControlPanel\n      heading={text('Heading', 'Agent Smith')}\n      statusOptions={userStatusOptions as UserAvailabilityStatusOption[]}\n      status={currentStatus}\n      inStatusSince={inStatusSince.current}\n      onStatusChange={value => {\n        if (value === 'reconnecting') {\n          setError('You cannot set this status');\n          return;\n        }\n        setCurrentStatus(value);\n        args.onStatusChange?.(\n          userStatusOptions.find(s => s.id === value) as UserAvailabilityStatusOption\n        );\n      }}\n      message={error}\n      calls={calls}\n      draggable={args.isDraggable}\n      onAddCall={(phoneNumber: string) => {\n        const call: CallProps = {\n          id: createUID(),\n          startedAt: Date.now(),\n          slaConfig,\n          onConsultAction,\n          onConferenceAction,\n          transferOptions: transferReasons,\n          onTransferAction: (id, data) => {\n            action('onTransferAction')(id, data);\n            onEndCall(id);\n          },\n          muted: false,\n          onMuteToggle,\n          onPauseToggle,\n          onDTMFPress: action('onDTMFPress'),\n          participants: [\n            {\n              id: contactsList.find(person => person.phoneNumber === phoneNumber)?.primary || '',\n              name:\n                contactsList.find(person => person.phoneNumber === phoneNumber)?.primary ||\n                'Unknown',\n              onEndCall: () => onEndCall(call.id)\n            }\n          ]\n        };\n        setCalls([call]);\n        setCurrentStatus('not_available');\n      }}\n      contactsList={contacts}\n      onFavoriteToggle={(phoneNumber: string, favorite: boolean) => {\n        const element = contacts.find(item => item.phoneNumber === phoneNumber);\n        element!.favorite = !favorite;\n        setContacts([...contacts]);\n      }}\n    />\n  );\n};\n\nexport const NewCallDemo = () => {\n  const [items, setItems] = useState(contactsList);\n  return (\n    <CalleePicker\n      heading='New call'\n      contactsList={contactsList}\n      onFavoriteToggle={(phoneNumber: string, favorite: boolean) => {\n        const element = items.find(item => item.phoneNumber === phoneNumber);\n        element!.favorite = !favorite;\n        setItems([...items]);\n      }}\n      onCall={phoneNumber => action('onCall')(phoneNumber)}\n    />\n  );\n};\n"]}