@pega/cosmos-react-demos 2.1.6 → 2.1.7

package/jsx/cs/CSCaseView/CSAppShell.stories.d.ts

@@ -0,0 +1,45 @@
+import { Story } from '@storybook/react';
+import { InteractionTimerStoryProps } from '@pega/cosmos-react-demos/lib/cs/InteractionTimer/InteractionTimer.stories';
+declare const _default: {
+    title: string;
+    parameters: {
+        layout: string;
+    };
+    args: {
+        isDraggable: boolean;
+        hasInteractionNotifications: boolean;
+        enableSla: boolean;
+    };
+    argTypes: {
+        isDraggable: {
+            control: {
+                type: string;
+            };
+        };
+        hasInteractionNotifications: {
+            control: {
+                type: string;
+            };
+        };
+        enableSla: {
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare type LoginError = string;
+export interface LoginFormProps {
+    ctiLinkOptions: {
+        [key: string]: string;
+    };
+    onLogin: (ctiLinkId: keyof LoginFormProps['ctiLinkOptions'], agentId: string, password: string) => Promise<LoginError | undefined>;
+}
+interface CSAppShellProps {
+    isDraggable?: boolean;
+    hasInteractionNotifications?: InteractionTimerStoryProps['hasNotifications'];
+    enableSla?: InteractionTimerStoryProps['showTimer'];
+}
+export declare const CSAppShell: Story<CSAppShellProps>;
+//# sourceMappingURL=CSAppShell.stories.d.ts.map

package/jsx/cs/CSCaseView/CSAppShell.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CSAppShell.stories.d.ts","sourceRoot":"","sources":["../../../src/cs/CSCaseView/CSAppShell.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AA0BzC,OAAO,EAEL,0BAA0B,EAC3B,MAAM,2EAA2E,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQnF,wBAeE;AAEF,oBAAY,UAAU,GAAG,MAAM,CAAC;AAEhC,MAAM,WAAW,cAAc;IAC7B,cAAc,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAC1C,OAAO,EAAE,CACP,SAAS,EAAE,MAAM,cAAc,CAAC,gBAAgB,CAAC,EACjD,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,KACb,OAAO,CAAC,UAAU,GAAG,SAAS,CAAC,CAAC;CACtC;AAoED,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;CACrD;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,eAAe,CAoS7C,CAAC"}

package/jsx/cs/CSCaseView/CSAppShell.stories.jsx

@@ -0,0 +1,275 @@
+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 = (<>
+      <Button name='cancel' variant='secondary'>
+        Cancel
+      </Button>
+      <Button name='submit' type='submit' variant='primary' disabled={!canSubmit} onClick={(e) => {
+            e.preventDefault();
+            onLogin(ctiLinkId, agentId, password).then(setErrorMessage);
+        }}>
+        Login
+      </Button>
+    </>);
+    return (<Form actions={actions} banners={errorMessage ? <Banner id='error' variant='urgent' messages={[errorMessage]}/> : undefined}>
+      <Select required label='CTI link' onChange={e => setCTILinkId(e.target.value)}>
+        {Object.entries(ctiLinkOptions).map(([id, label]) => (<Option value={id}>{label}</Option>))}
+      </Select>
+      <Input required label='Agent ID' value={agentId} onChange={(e) => setAgentId(e.target.value)}/>
+      <Input type='password' required label='Password' value={password} onChange={(e) => setPassword(e.target.value)}/>
+      <Input required label='Extension' value={extension} onChange={(e) => setExtension(e.target.value)}/>
+    </Form>);
+};
+export const CSAppShell = (args) => {
+    const CaseData = AppShellMockData;
+    const home = <TwoColumnPage a={<FeedDemo />} b={<TasksDemo />} title='Welcome, Sara Davis'/>;
+    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: <Status variant='success'>{field.value}</Status> };
+                }
+                return field;
+            });
+            let persistentUtility;
+            if (name === 'Mail Interaction') {
+                persistentUtility = {
+                    content: <EmailDemo hideSuggestions/>,
+                    title: 'Email'
+                };
+            }
+            else if (name === 'Chat Interaction') {
+                persistentUtility = {
+                    content: <StandardChat chatWidth='100%'/>,
+                    title: 'Chat'
+                };
+            }
+            setMainContent(<CaseViewDemo caseId={caseId} heading={heading} parentCases={[]} actions={demoActions} primaryFields={primaryFields} secondaryFields={secondaryFields} tabs={tabs} stages={false} tasksWidget={<TaskManagerStory />} persistentUtility={persistentUtility} showUtilities={false} showFollowedIcon={false} defaultCollapsedUtilities/>);
+        }
+    };
+    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: (<InteractionTimerStory createdAt={createdAt} icon={icon} showTimer={args.enableSla} hasNotifications={args.hasInteractionNotifications} meta={args.enableSla ? '0:00' : createLink.meta}/>),
+            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 = (<>
+      <Button name='Cancel' variant='secondary' onClick={(e) => {
+            action('Click')(`${e.currentTarget.name}:${e.type}`);
+        }}>
+        Cancel
+      </Button>
+      <Button name='Submit' type='submit' variant='primary'>
+        Log in
+      </Button>
+    </>);
+    const chatSettings = (<Flex container={{ direction: 'column', gap: 2, pad: 2 }} item={{ grow: 1 }}>
+      <Form actions={actions}>
+        <Input name='agentId' label='Agent Id' autoComplete='off'/>
+
+        <Input name='password' type='password' label='Password' autoComplete='off'/>
+        <Select label='Make me'>
+          <Option>Available</Option>
+          <Option>Unavailable</Option>
+        </Select>
+      </Form>
+    </Flex>);
+    const utils = [
+        {
+            name: 'Chat settings',
+            visual: <Icon name='chat-solid'/>,
+            drawerView: chatSettings,
+            drawerHeader: 'Pega Chat Log In'
+        },
+        {
+            name: 'Call panel',
+            visual: (<CallControlPanelIcon status={agentStatus.status} label={agentStatus.label} variant='icon' panelVisible={callPanelVisible}/>),
+            ...(agentStatus.status === 'offline'
+                ? {
+                    drawerView: (<Flex container={{ direction: 'column', gap: 2, pad: 2 }} item={{ grow: 1 }}>
+                <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);
+                        }}/>
+              </Flex>),
+                    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 (<>
+      <AppShellDemo main={mainContent} appInfo={appInfo} cases={cases} createLinks={createLinks} caseLinks={links} utils={utils} onLinkClick={(name) => {
+            if (name === 'Home') {
+                setMainContent(home);
+            }
+            setActiveItem(name);
+        }}/>
+      {callPanelVisible && (<CallControlPanelDemo status={agentStatus.id} onStatusChange={setAgentStatus} isDraggable={args.isDraggable}/>)}
+    </>);
+};
+//# sourceMappingURL=CSAppShell.stories.jsx.map

package/jsx/cs/CSCaseView/CSAppShell.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"CSAppShell.stories.jsx","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/jsx/cs/CSCaseView/CSCaseView.mocks.d.ts

@@ -0,0 +1,57 @@
+export declare const AppShellMockData: {
+    notifications: {
+        id: string;
+        primary: string;
+        secondary: string;
+        visual: string;
+        unread: boolean;
+    }[];
+    recents: {
+        id: string;
+        primary: string;
+        secondary: string;
+    }[];
+    'Phone Interaction': {
+        caseId: string;
+        heading: string;
+        primaryFields: {
+            id: string;
+            name: string;
+            value: string;
+        }[];
+        secondaryFields: {
+            id: string;
+            name: string;
+            value: string;
+        }[];
+    };
+    'Chat Interaction': {
+        caseId: string;
+        heading: string;
+        primaryFields: {
+            id: string;
+            name: string;
+            value: string;
+        }[];
+        secondaryFields: {
+            id: string;
+            name: string;
+            value: string;
+        }[];
+    };
+    'Mail Interaction': {
+        caseId: string;
+        heading: string;
+        primaryFields: {
+            id: string;
+            name: string;
+            value: string;
+        }[];
+        secondaryFields: {
+            id: string;
+            name: string;
+            value: string;
+        }[];
+    };
+};
+//# sourceMappingURL=CSCaseView.mocks.d.ts.map

package/jsx/cs/CSCaseView/CSCaseView.mocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CSCaseView.mocks.d.ts","sourceRoot":"","sources":["../../../src/cs/CSCaseView/CSCaseView.mocks.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmO5B,CAAC"}

package/jsx/cs/CSCaseView/CSCaseView.mocks.js

@@ -0,0 +1,224 @@
+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'
+            }
+        ]
+    }
+};
+//# sourceMappingURL=CSCaseView.mocks.js.map