@pega/cosmos-react-demos 3.0.0-dev.9.0 → 3.0.0-rc.2

package/lib/cs/CSCaseView/CSCaseView.mocks.d.ts

@@ -1,66 +0,0 @@
-import { FunctionComponent } from 'react';
-export declare type LoginError = string;
-export interface LoginFormProps {
-    ctiLinkOptions: {
-        [key: string]: string;
-    };
-    onLogin: (ctiLinkId: keyof LoginFormProps['ctiLinkOptions'], agentId: string, password: string) => Promise<LoginError | undefined>;
-}
-export declare const CallLoginForm: FunctionComponent<LoginFormProps>;
-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/lib/cs/CSCaseView/CSCaseView.mocks.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CSCaseView.mocks.d.ts","sourceRoot":"","sources":["../../../src/cs/CSCaseView/CSCaseView.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,iBAAiB,EAAY,MAAM,OAAO,CAAC;AAIjE,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;AAED,eAAO,MAAM,aAAa,EAAE,iBAAiB,CAAC,cAAc,CAiE3D,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmO5B,CAAC"}

package/lib/cs/CSCaseView/CSCaseView.mocks.js

@@ -1,240 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import { Banner, Button, Form, Input, Option, Select } from '@pega/cosmos-react-core';
-export 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" }), _jsx(Button, { name: 'submit', type: 'submit', variant: 'primary', disabled: !canSubmit, onClick: (e) => {
-                    e.preventDefault();
-                    onLogin(ctiLinkId, agentId, password).then(setErrorMessage);
-                }, children: "Login" })] }));
-    return (_jsxs(Form, { actions: actions, banners: errorMessage ? _jsx(Banner, { id: 'error', 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 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

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

@@ -1 +0,0 @@
-{"version":3,"file":"CSCaseView.mocks.js","sourceRoot":"","sources":["../../../src/cs/CSCaseView/CSCaseView.mocks.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAkC,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAatF,MAAM,CAAC,MAAM,aAAa,GAAsC,CAAC,EAC/D,cAAc,EACd,OAAO,EACQ,EAAE,EAAE;IACnB,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAC;IACnD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAC;IACrD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAC;IACvD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAS,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACnF,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,EAAU,CAAC;IAE3D,MAAM,SAAS,GAAG,OAAO,IAAI,QAAQ,IAAI,SAAS,IAAI,SAAS,CAAC;IAEhE,MAAM,OAAO,GAAG,CACd,8BACE,KAAC,MAAM,IAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAC,WAAW,uBAEhC,EACT,KAAC,MAAM,IACL,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,SAAS,EACjB,QAAQ,EAAE,CAAC,SAAS,EACpB,OAAO,EAAE,CAAC,CAAa,EAAE,EAAE;oBACzB,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,OAAO,CAAC,SAAU,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;gBAC/D,CAAC,sBAGM,IACR,CACJ,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,IACH,OAAO,EAAE,OAAO,EAChB,OAAO,EACL,YAAY,CAAC,CAAC,CAAC,KAAC,MAAM,IAAC,EAAE,EAAC,OAAO,EAAC,OAAO,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,YAAY,CAAC,GAAI,CAAC,CAAC,CAAC,SAAS,aAG7F,KAAC,MAAM,IAAC,QAAQ,QAAC,KAAK,EAAC,UAAU,EAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,YAC1E,MAAM,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CACnD,KAAC,MAAM,IAAC,KAAK,EAAE,EAAE,YAAG,KAAK,GAAU,CACpC,CAAC,GACK,EACT,KAAC,KAAK,IACJ,QAAQ,QACR,KAAK,EAAC,UAAU,EAChB,KAAK,EAAE,OAAO,EACd,QAAQ,EAAE,CAAC,CAAgC,EAAE,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,GAC1E,EACF,KAAC,KAAK,IACJ,IAAI,EAAC,UAAU,EACf,QAAQ,QACR,KAAK,EAAC,UAAU,EAChB,KAAK,EAAE,QAAQ,EACf,QAAQ,EAAE,CAAC,CAAgC,EAAE,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,GAC3E,EACF,KAAC,KAAK,IACJ,QAAQ,QACR,KAAK,EAAC,WAAW,EACjB,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,CAAC,CAAgC,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,GAC5E,IACG,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,aAAa,EAAE;QACb;YACE,EAAE,EAAE,KAAK;YACT,OAAO,EACL,4FAA4F;YAC9F,SAAS,EAAE,WAAW;YACtB,MAAM,EAAE,aAAa;YACrB,MAAM,EAAE,IAAI;SACb;QACD;YACE,EAAE,EAAE,KAAK;YACT,OAAO,EAAE,oFAAoF;YAC7F,MAAM,EAAE,eAAe;YACvB,SAAS,EAAE,WAAW;YACtB,MAAM,EAAE,IAAI;SACb;QACD;YACE,EAAE,EAAE,KAAK;YACT,OAAO,EACL,wHAAwH;YAC1H,SAAS,EAAE,WAAW;YACtB,MAAM,EAAE,aAAa;YACrB,MAAM,EAAE,IAAI;SACb;QACD;YACE,EAAE,EAAE,KAAK;YACT,OAAO,EAAE,+DAA+D;YACxE,SAAS,EAAE,EAAE;YACb,MAAM,EAAE,cAAc;YACtB,MAAM,EAAE,IAAI;SACb;KACF;IACD,OAAO,EAAE;QACP;YACE,EAAE,EAAE,KAAK;YACT,OAAO,EAAE,8DAA8D;YACvE,SAAS,EAAE,WAAW;SACvB;QACD;YACE,EAAE,EAAE,KAAK;YACT,OAAO,EAAE,oDAAoD;YAC7D,SAAS,EAAE,WAAW;SACvB;QACD;YACE,EAAE,EAAE,KAAK;YACT,OAAO,EACL,0FAA0F;YAC5F,SAAS,EAAE,WAAW;SACvB;QACD;YACE,EAAE,EAAE,KAAK;YACT,OAAO,EAAE,8DAA8D;YACvE,SAAS,EAAE,WAAW;SACvB;QACD;YACE,EAAE,EAAE,KAAK;YACT,OAAO,EAAE,oDAAoD;YAC7D,SAAS,EAAE,WAAW;SACvB;QACD;YACE,EAAE,EAAE,KAAK;YACT,OAAO,EACL,0FAA0F;YAC5F,SAAS,EAAE,WAAW;SACvB;QACD;YACE,EAAE,EAAE,KAAK;YACT,OAAO,EAAE,8DAA8D;YACvE,SAAS,EAAE,WAAW;SACvB;QACD;YACE,EAAE,EAAE,KAAK;YACT,OAAO,EAAE,oDAAoD;YAC7D,SAAS,EAAE,WAAW;SACvB;QACD;YACE,EAAE,EAAE,KAAK;YACT,OAAO,EACL,0FAA0F;YAC5F,SAAS,EAAE,WAAW;SACvB;KACF;IACD,mBAAmB,EAAE;QACnB,MAAM,EAAE,UAAU;QAClB,OAAO,EAAE,gBAAgB;QACzB,aAAa,EAAE;YACb;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,gBAAgB;gBACtB,KAAK,EAAE,MAAM;aACd;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,kBAAkB;gBACxB,KAAK,EAAE,OAAO;aACf;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,YAAY;gBAClB,KAAK,EAAE,KAAK;aACb;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,QAAQ;gBACd,KAAK,EAAE,MAAM;aACd;SACF;QACD,eAAe,EAAE;YACf;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,QAAQ;gBACd,KAAK,EAAE,UAAU;aAClB;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,WAAW;gBACjB,KAAK,EAAE,OAAO;aACf;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,gBAAgB;gBACtB,KAAK,EAAE,WAAW;aACnB;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,SAAS;gBACf,KAAK,EAAE,sBAAsB;aAC9B;SACF;KACF;IACD,kBAAkB,EAAE;QAClB,MAAM,EAAE,UAAU;QAClB,OAAO,EAAE,YAAY;QACrB,aAAa,EAAE;YACb;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,gBAAgB;gBACtB,KAAK,EAAE,QAAQ;aAChB;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,kBAAkB;gBACxB,KAAK,EAAE,MAAM;aACd;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,YAAY;gBAClB,KAAK,EAAE,MAAM;aACd;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,QAAQ;gBACd,KAAK,EAAE,MAAM;aACd;SACF;QACD,eAAe,EAAE;YACf;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,QAAQ;gBACd,KAAK,EAAE,UAAU;aAClB;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,WAAW;gBACjB,KAAK,EAAE,OAAO;aACf;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,gBAAgB;gBACtB,KAAK,EAAE,YAAY;aACpB;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,SAAS;gBACf,KAAK,EAAE,WAAW;aACnB;SACF;KACF;IACD,kBAAkB,EAAE;QAClB,MAAM,EAAE,UAAU;QAClB,OAAO,EAAE,YAAY;QACrB,aAAa,EAAE;YACb;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,gBAAgB;gBACtB,KAAK,EAAE,QAAQ;aAChB;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,kBAAkB;gBACxB,KAAK,EAAE,MAAM;aACd;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,YAAY;gBAClB,KAAK,EAAE,QAAQ;aAChB;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,QAAQ;gBACd,KAAK,EAAE,MAAM;aACd;SACF;QACD,eAAe,EAAE;YACf;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,QAAQ;gBACd,KAAK,EAAE,UAAU;aAClB;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,WAAW;gBACjB,KAAK,EAAE,OAAO;aACf;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,gBAAgB;gBACtB,KAAK,EAAE,YAAY;aACpB;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,SAAS;gBACf,KAAK,EAAE,WAAW;aACnB;SACF;KACF;CACF,CAAC","sourcesContent":["import { ChangeEvent, FunctionComponent, useState } from 'react';\n\nimport { Banner, Button, Form, Input, Option, Select } from '@pega/cosmos-react-core';\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\nexport const 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};\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"]}