@pega/cosmos-react-demos 3.0.0-dev.22.0 → 3.0.0-dev.23.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (193) hide show
  1. package/jsx/build/AppHeader/AppHeader.stories.jsx +1 -1
  2. package/jsx/build/AppHeader/AppHeader.stories.jsx.map +1 -1
  3. package/jsx/build/ObjectSelect/ObjectSelect.mocks.d.ts.map +1 -1
  4. package/jsx/build/ObjectSelect/ObjectSelect.mocks.jsx +2 -1
  5. package/jsx/build/ObjectSelect/ObjectSelect.mocks.jsx.map +1 -1
  6. package/jsx/condition-builder/PromotedFilters/PromotedFilters.mocks.d.ts.map +1 -1
  7. package/jsx/condition-builder/PromotedFilters/PromotedFilters.mocks.js +91 -0
  8. package/jsx/condition-builder/PromotedFilters/PromotedFilters.mocks.js.map +1 -1
  9. package/jsx/core/AppShell/AppShell.stories.d.ts +1 -0
  10. package/jsx/core/AppShell/AppShell.stories.d.ts.map +1 -1
  11. package/jsx/core/AppShell/AppShell.stories.jsx +1 -1
  12. package/jsx/core/AppShell/AppShell.stories.jsx.map +1 -1
  13. package/jsx/core/Banner/Banner.stories.d.ts +0 -1
  14. package/jsx/core/Banner/Banner.stories.d.ts.map +1 -1
  15. package/jsx/core/Banner/Banner.stories.jsx +0 -8
  16. package/jsx/core/Banner/Banner.stories.jsx.map +1 -1
  17. package/jsx/core/CreditCard/CreditCard.stories.jsx +1 -1
  18. package/jsx/core/CreditCard/CreditCard.stories.jsx.map +1 -1
  19. package/jsx/core/Currency/Currency.stories.d.ts +5 -3
  20. package/jsx/core/Currency/Currency.stories.d.ts.map +1 -1
  21. package/jsx/core/Currency/Currency.stories.jsx +2 -2
  22. package/jsx/core/Currency/Currency.stories.jsx.map +1 -1
  23. package/jsx/core/DateTime/DateTime.stories.d.ts.map +1 -1
  24. package/jsx/core/DateTime/DateTime.stories.jsx +3 -0
  25. package/jsx/core/DateTime/DateTime.stories.jsx.map +1 -1
  26. package/jsx/core/FieldGroup/FieldGroupList.stories.d.ts.map +1 -1
  27. package/jsx/core/FieldGroup/FieldGroupList.stories.jsx +4 -0
  28. package/jsx/core/FieldGroup/FieldGroupList.stories.jsx.map +1 -1
  29. package/jsx/core/FieldValueList/FieldValueList.stories.jsx +1 -1
  30. package/jsx/core/FieldValueList/FieldValueList.stories.jsx.map +1 -1
  31. package/jsx/core/FieldValueList/FieldValueList.styles.d.ts +2 -0
  32. package/jsx/core/FieldValueList/FieldValueList.styles.d.ts.map +1 -0
  33. package/{lib/core/FieldValueList/FieldValueList.mocks.js → jsx/core/FieldValueList/FieldValueList.styles.js} +2 -3
  34. package/jsx/core/FieldValueList/FieldValueList.styles.js.map +1 -0
  35. package/jsx/core/Number/Number.stories.d.ts +1 -1
  36. package/jsx/core/Number/Number.stories.d.ts.map +1 -1
  37. package/jsx/core/Number/Number.stories.jsx +4 -4
  38. package/jsx/core/Number/Number.stories.jsx.map +1 -1
  39. package/jsx/cs/CallControlPanel/CallControlPanel.stories.d.ts.map +1 -1
  40. package/jsx/cs/CallControlPanel/CallControlPanel.stories.jsx +12 -1
  41. package/jsx/cs/CallControlPanel/CallControlPanel.stories.jsx.map +1 -1
  42. package/jsx/cs/IntelligentGuidance/IntelligentGuidance.stories.jsx +2 -2
  43. package/jsx/cs/IntelligentGuidance/IntelligentGuidance.stories.jsx.map +1 -1
  44. package/jsx/cs/InteractionNotification/InteractionNotification.stories.d.ts +1 -0
  45. package/jsx/cs/InteractionNotification/InteractionNotification.stories.d.ts.map +1 -1
  46. package/jsx/cs/InteractionNotification/InteractionNotification.stories.jsx +6 -6
  47. package/jsx/cs/InteractionNotification/InteractionNotification.stories.jsx.map +1 -1
  48. package/jsx/social/Email/Email.stories.d.ts.map +1 -1
  49. package/jsx/social/Email/Email.stories.jsx +19 -0
  50. package/jsx/social/Email/Email.stories.jsx.map +1 -1
  51. package/jsx/social/Feed/Feed.stories.d.ts.map +1 -1
  52. package/jsx/social/Feed/Feed.stories.jsx +6 -2
  53. package/jsx/social/Feed/Feed.stories.jsx.map +1 -1
  54. package/jsx/social/Feed/FeedNewPost.stories.d.ts.map +1 -1
  55. package/jsx/social/Feed/FeedNewPost.stories.jsx +1 -1
  56. package/jsx/social/Feed/FeedNewPost.stories.jsx.map +1 -1
  57. package/jsx/social/Feed/FeedPost.stories.d.ts.map +1 -1
  58. package/jsx/social/Feed/FeedPost.stories.jsx +2 -2
  59. package/jsx/social/Feed/FeedPost.stories.jsx.map +1 -1
  60. package/jsx/social/Feed/FeedReply.stories.d.ts.map +1 -1
  61. package/jsx/social/Feed/FeedReply.stories.jsx +1 -1
  62. package/jsx/social/Feed/FeedReply.stories.jsx.map +1 -1
  63. package/jsx/social/Feed/FeedReplyInput.stories.d.ts.map +1 -1
  64. package/jsx/social/Feed/FeedReplyInput.stories.jsx +1 -1
  65. package/jsx/social/Feed/FeedReplyInput.stories.jsx.map +1 -1
  66. package/jsx/work/CaseView/CaseView.mocks.d.ts +74 -2
  67. package/jsx/work/CaseView/CaseView.mocks.d.ts.map +1 -1
  68. package/jsx/work/CaseView/CaseView.mocks.jsx +198 -9
  69. package/jsx/work/CaseView/CaseView.mocks.jsx.map +1 -1
  70. package/jsx/work/CaseView/CaseView.stories.d.ts +3 -22
  71. package/jsx/work/CaseView/CaseView.stories.d.ts.map +1 -1
  72. package/jsx/work/CaseView/CaseView.stories.jsx +49 -238
  73. package/jsx/work/CaseView/CaseView.stories.jsx.map +1 -1
  74. package/jsx/wss/AppShell/AppShell.mocks.d.ts +11 -0
  75. package/jsx/wss/AppShell/AppShell.mocks.d.ts.map +1 -1
  76. package/jsx/wss/AppShell/AppShell.mocks.jsx +11 -0
  77. package/jsx/wss/AppShell/AppShell.mocks.jsx.map +1 -1
  78. package/jsx/wss/AppShell/AppShell.stories.d.ts +11 -9
  79. package/jsx/wss/AppShell/AppShell.stories.d.ts.map +1 -1
  80. package/jsx/wss/AppShell/AppShell.stories.jsx +11 -19
  81. package/jsx/wss/AppShell/AppShell.stories.jsx.map +1 -1
  82. package/jsx/wss/PageTemplates/PageTemplates.stories.d.ts +15 -0
  83. package/jsx/wss/PageTemplates/PageTemplates.stories.d.ts.map +1 -0
  84. package/jsx/wss/PageTemplates/PageTemplates.stories.jsx +48 -0
  85. package/jsx/wss/PageTemplates/PageTemplates.stories.jsx.map +1 -0
  86. package/lib/build/AppHeader/AppHeader.stories.js +1 -1
  87. package/lib/build/AppHeader/AppHeader.stories.js.map +1 -1
  88. package/lib/build/ObjectSelect/ObjectSelect.mocks.d.ts.map +1 -1
  89. package/lib/build/ObjectSelect/ObjectSelect.mocks.js +2 -1
  90. package/lib/build/ObjectSelect/ObjectSelect.mocks.js.map +1 -1
  91. package/lib/condition-builder/PromotedFilters/PromotedFilters.mocks.d.ts.map +1 -1
  92. package/lib/condition-builder/PromotedFilters/PromotedFilters.mocks.js +91 -0
  93. package/lib/condition-builder/PromotedFilters/PromotedFilters.mocks.js.map +1 -1
  94. package/lib/core/AppShell/AppShell.stories.d.ts +1 -0
  95. package/lib/core/AppShell/AppShell.stories.d.ts.map +1 -1
  96. package/lib/core/AppShell/AppShell.stories.js +1 -1
  97. package/lib/core/AppShell/AppShell.stories.js.map +1 -1
  98. package/lib/core/Banner/Banner.stories.d.ts +0 -1
  99. package/lib/core/Banner/Banner.stories.d.ts.map +1 -1
  100. package/lib/core/Banner/Banner.stories.js +0 -11
  101. package/lib/core/Banner/Banner.stories.js.map +1 -1
  102. package/lib/core/CreditCard/CreditCard.stories.js +1 -1
  103. package/lib/core/CreditCard/CreditCard.stories.js.map +1 -1
  104. package/lib/core/Currency/Currency.stories.d.ts +5 -3
  105. package/lib/core/Currency/Currency.stories.d.ts.map +1 -1
  106. package/lib/core/Currency/Currency.stories.js +2 -2
  107. package/lib/core/Currency/Currency.stories.js.map +1 -1
  108. package/lib/core/DateTime/DateTime.stories.d.ts.map +1 -1
  109. package/lib/core/DateTime/DateTime.stories.js +3 -0
  110. package/lib/core/DateTime/DateTime.stories.js.map +1 -1
  111. package/lib/core/FieldGroup/FieldGroupList.stories.d.ts.map +1 -1
  112. package/lib/core/FieldGroup/FieldGroupList.stories.js +4 -0
  113. package/lib/core/FieldGroup/FieldGroupList.stories.js.map +1 -1
  114. package/lib/core/FieldValueList/FieldValueList.stories.js +1 -1
  115. package/lib/core/FieldValueList/FieldValueList.stories.js.map +1 -1
  116. package/lib/core/FieldValueList/FieldValueList.styles.d.ts +2 -0
  117. package/lib/core/FieldValueList/FieldValueList.styles.d.ts.map +1 -0
  118. package/{jsx/core/FieldValueList/FieldValueList.mocks.js → lib/core/FieldValueList/FieldValueList.styles.js} +2 -3
  119. package/lib/core/FieldValueList/FieldValueList.styles.js.map +1 -0
  120. package/lib/core/Number/Number.stories.d.ts +1 -1
  121. package/lib/core/Number/Number.stories.d.ts.map +1 -1
  122. package/lib/core/Number/Number.stories.js +4 -4
  123. package/lib/core/Number/Number.stories.js.map +1 -1
  124. package/lib/cs/CallControlPanel/CallControlPanel.stories.d.ts.map +1 -1
  125. package/lib/cs/CallControlPanel/CallControlPanel.stories.js +12 -1
  126. package/lib/cs/CallControlPanel/CallControlPanel.stories.js.map +1 -1
  127. package/lib/cs/IntelligentGuidance/IntelligentGuidance.stories.js +2 -2
  128. package/lib/cs/IntelligentGuidance/IntelligentGuidance.stories.js.map +1 -1
  129. package/lib/cs/InteractionNotification/InteractionNotification.stories.d.ts +1 -0
  130. package/lib/cs/InteractionNotification/InteractionNotification.stories.d.ts.map +1 -1
  131. package/lib/cs/InteractionNotification/InteractionNotification.stories.js +24 -22
  132. package/lib/cs/InteractionNotification/InteractionNotification.stories.js.map +1 -1
  133. package/lib/social/Email/Email.stories.d.ts.map +1 -1
  134. package/lib/social/Email/Email.stories.js +19 -0
  135. package/lib/social/Email/Email.stories.js.map +1 -1
  136. package/lib/social/Feed/Feed.stories.d.ts.map +1 -1
  137. package/lib/social/Feed/Feed.stories.js +6 -2
  138. package/lib/social/Feed/Feed.stories.js.map +1 -1
  139. package/lib/social/Feed/FeedNewPost.stories.d.ts.map +1 -1
  140. package/lib/social/Feed/FeedNewPost.stories.js +1 -1
  141. package/lib/social/Feed/FeedNewPost.stories.js.map +1 -1
  142. package/lib/social/Feed/FeedPost.stories.d.ts.map +1 -1
  143. package/lib/social/Feed/FeedPost.stories.js +2 -2
  144. package/lib/social/Feed/FeedPost.stories.js.map +1 -1
  145. package/lib/social/Feed/FeedReply.stories.d.ts.map +1 -1
  146. package/lib/social/Feed/FeedReply.stories.js +1 -1
  147. package/lib/social/Feed/FeedReply.stories.js.map +1 -1
  148. package/lib/social/Feed/FeedReplyInput.stories.d.ts.map +1 -1
  149. package/lib/social/Feed/FeedReplyInput.stories.js +1 -1
  150. package/lib/social/Feed/FeedReplyInput.stories.js.map +1 -1
  151. package/lib/work/CaseView/CaseView.mocks.d.ts +74 -2
  152. package/lib/work/CaseView/CaseView.mocks.d.ts.map +1 -1
  153. package/lib/work/CaseView/CaseView.mocks.js +188 -9
  154. package/lib/work/CaseView/CaseView.mocks.js.map +1 -1
  155. package/lib/work/CaseView/CaseView.stories.d.ts +3 -22
  156. package/lib/work/CaseView/CaseView.stories.d.ts.map +1 -1
  157. package/lib/work/CaseView/CaseView.stories.js +44 -248
  158. package/lib/work/CaseView/CaseView.stories.js.map +1 -1
  159. package/lib/wss/AppShell/AppShell.mocks.d.ts +11 -0
  160. package/lib/wss/AppShell/AppShell.mocks.d.ts.map +1 -1
  161. package/lib/wss/AppShell/AppShell.mocks.js +11 -0
  162. package/lib/wss/AppShell/AppShell.mocks.js.map +1 -1
  163. package/lib/wss/AppShell/AppShell.stories.d.ts +11 -9
  164. package/lib/wss/AppShell/AppShell.stories.d.ts.map +1 -1
  165. package/lib/wss/AppShell/AppShell.stories.js +12 -19
  166. package/lib/wss/AppShell/AppShell.stories.js.map +1 -1
  167. package/lib/wss/PageTemplates/PageTemplates.stories.d.ts +15 -0
  168. package/lib/wss/PageTemplates/PageTemplates.stories.d.ts.map +1 -0
  169. package/lib/wss/PageTemplates/PageTemplates.stories.js +41 -0
  170. package/lib/wss/PageTemplates/PageTemplates.stories.js.map +1 -0
  171. package/package.json +10 -11
  172. package/jsx/core/FieldValueList/FieldValueList.mocks.d.ts +0 -3
  173. package/jsx/core/FieldValueList/FieldValueList.mocks.d.ts.map +0 -1
  174. package/jsx/core/FieldValueList/FieldValueList.mocks.js.map +0 -1
  175. package/jsx/cs/CSCaseView/CSAppShell.mocks.d.ts +0 -73
  176. package/jsx/cs/CSCaseView/CSAppShell.mocks.d.ts.map +0 -1
  177. package/jsx/cs/CSCaseView/CSAppShell.mocks.jsx +0 -299
  178. package/jsx/cs/CSCaseView/CSAppShell.mocks.jsx.map +0 -1
  179. package/jsx/cs/CSCaseView/CSAppShell.stories.d.ts +0 -13
  180. package/jsx/cs/CSCaseView/CSAppShell.stories.d.ts.map +0 -1
  181. package/jsx/cs/CSCaseView/CSAppShell.stories.jsx +0 -228
  182. package/jsx/cs/CSCaseView/CSAppShell.stories.jsx.map +0 -1
  183. package/lib/core/FieldValueList/FieldValueList.mocks.d.ts +0 -3
  184. package/lib/core/FieldValueList/FieldValueList.mocks.d.ts.map +0 -1
  185. package/lib/core/FieldValueList/FieldValueList.mocks.js.map +0 -1
  186. package/lib/cs/CSCaseView/CSAppShell.mocks.d.ts +0 -73
  187. package/lib/cs/CSCaseView/CSAppShell.mocks.d.ts.map +0 -1
  188. package/lib/cs/CSCaseView/CSAppShell.mocks.js +0 -280
  189. package/lib/cs/CSCaseView/CSAppShell.mocks.js.map +0 -1
  190. package/lib/cs/CSCaseView/CSAppShell.stories.d.ts +0 -13
  191. package/lib/cs/CSCaseView/CSAppShell.stories.d.ts.map +0 -1
  192. package/lib/cs/CSCaseView/CSAppShell.stories.js +0 -210
  193. package/lib/cs/CSCaseView/CSAppShell.stories.js.map +0 -1
@@ -1,228 +0,0 @@
1
- import { useEffect, useState, useMemo } from 'react';
2
- import { action } from '@storybook/addon-actions';
3
- import { createUID, Status, TwoColumnPage, Icon, registerIcon, Button, Form, Flex, Input, Select, Option } from '@pega/cosmos-react-core';
4
- import * as chatSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/chat-solid.icon';
5
- import { AppShellDemo } from '../../core/AppShell/AppShell.stories';
6
- import { CaseViewDemo } from '../../work/CaseView/CaseView.stories';
7
- import { TasksDemo } from '../../work/Tasks/Tasks.stories';
8
- import { FeedDemo } from '../../social/Feed/Feed.stories';
9
- import { EmailShellDemo } from '../../social/Email/Email.stories';
10
- import { StandardChat } from '../../social/Chat/Chat.stories';
11
- import { TaskManagerDemo } from '../TaskManager/TaskManager.stories';
12
- import { InteractionTimerDemo as InteractionTimerStory } from '../InteractionTimer/InteractionTimer.stories';
13
- import { AppShellMockData, CTIControlPanel, CTIControlPanelContext } from './CSAppShell.mocks';
14
- registerIcon(chatSolidIcon);
15
- export default {
16
- title: 'Customer Service/CS App Shell',
17
- parameters: {
18
- layout: 'fullscreen'
19
- },
20
- args: {
21
- isDraggable: true,
22
- hasInteractionNotifications: true,
23
- enableSla: true,
24
- ctiPanel: 'internal',
25
- applyThemeToExternalCTI: false
26
- },
27
- argTypes: {
28
- isDraggable: { control: { type: 'boolean' } },
29
- hasInteractionNotifications: { control: { type: 'boolean' } },
30
- enableSla: { control: { type: 'boolean' } },
31
- ctiPanel: { options: ['internal', 'external'], control: { type: 'inline-radio' } },
32
- applyThemeToExternalCTI: { control: { type: 'boolean' } }
33
- }
34
- };
35
- export const CSAppShell = (args) => {
36
- const CaseData = AppShellMockData;
37
- const home = <TwoColumnPage a={<FeedDemo />} b={<TasksDemo />} title='Welcome, Sara Davis'/>;
38
- const [mainContent, setMainContent] = useState(home);
39
- const [caseID, setCaseID] = useState(1001);
40
- const [cases, setCases] = useState([]);
41
- const [links, setLinks] = useState([
42
- {
43
- id: '01',
44
- name: 'Home',
45
- href: '#home',
46
- icon: 'home-solid'
47
- }
48
- ]);
49
- const tabs = [
50
- { name: 'Customer notes', id: 'Pulse' },
51
- { name: 'Accounts', id: 'Accounts' }
52
- ];
53
- const demoActions = [
54
- {
55
- text: 'Change stage',
56
- id: createUID(),
57
- onClick: action('Clicked on change stage')
58
- },
59
- {
60
- text: 'Wrap up',
61
- id: createUID(),
62
- onClick: action('Clicked on Wrap up')
63
- },
64
- {
65
- text: 'Exit interaction',
66
- id: createUID(),
67
- onClick: action('Clicked on exit interaction')
68
- }
69
- ];
70
- const RenderCaseView = (name) => {
71
- if (name) {
72
- const { caseId, heading, primaryFields, secondaryFields: secondaryField } = CaseData[name];
73
- const secondaryFields = secondaryField.map((field) => {
74
- if (field.name === 'Status') {
75
- return { ...field, value: <Status variant='success'>{field.value}</Status> };
76
- }
77
- return field;
78
- });
79
- let persistentUtility;
80
- if (name === 'Mail Interaction') {
81
- persistentUtility = {
82
- content: <EmailShellDemo hideSuggestions/>,
83
- title: 'Email'
84
- };
85
- }
86
- else if (name === 'Chat Interaction') {
87
- persistentUtility = {
88
- content: <StandardChat chatWidth='100%'/>,
89
- title: 'Chat'
90
- };
91
- }
92
- setMainContent(<CaseViewDemo caseId={caseId} heading={heading} parentCases={[]} actions={demoActions} primaryFields={primaryFields} secondaryFields={secondaryFields} tabs={tabs} stages={false} tasksWidget={<TaskManagerDemo />} persistentUtility={persistentUtility} showUtilities={false} showFollowedIcon={false} defaultCollapsedUtilities/>);
93
- }
94
- };
95
- const setActiveItem = (key) => {
96
- setCases((prevCases = []) => {
97
- return prevCases.map(caseItem => {
98
- return { ...caseItem, active: caseItem.id === key };
99
- });
100
- });
101
- setLinks((prevLinks = []) => {
102
- return prevLinks.map(link => {
103
- return {
104
- ...link,
105
- active: link.name === key
106
- };
107
- });
108
- });
109
- };
110
- const createInteraction = (createLink) => {
111
- const { primary, secondary, icon, customerName } = createLink;
112
- const key = createUID();
113
- const createdAt = new Date().getTime();
114
- const newCase = {
115
- visual: (<InteractionTimerStory icon={icon} showTimer={args.enableSla} hasNotifications={args.hasInteractionNotifications} meta={args.enableSla ? '0:00' : createLink.meta} interactionType={primary}/>),
116
- primary: customerName || 'Unknown customer',
117
- secondary,
118
- createdAt,
119
- id: key,
120
- active: true,
121
- onClick: () => {
122
- setActiveItem(key);
123
- RenderCaseView(primary);
124
- },
125
- onDismiss: (e) => {
126
- setActiveItem('Home');
127
- e.stopPropagation();
128
- setCases((prevCases = []) => prevCases.filter(caseItem => caseItem.id !== key));
129
- setMainContent(home);
130
- }
131
- };
132
- setCases((prevCases = []) => [...prevCases, newCase]);
133
- setActiveItem(key);
134
- setCaseID(caseID + 1);
135
- RenderCaseView(primary);
136
- };
137
- const createLinks = [
138
- {
139
- primary: 'Phone Interaction',
140
- secondary: 'Received 20s ago',
141
- icon: 'phone-solid',
142
- meta: 'FH',
143
- customerName: 'Ginger Ventura'
144
- },
145
- {
146
- primary: 'Chat Interaction',
147
- secondary: 'Sent 2h ago',
148
- icon: 'chat-solid',
149
- meta: 'SC',
150
- customerName: 'Sara Davis'
151
- },
152
- {
153
- primary: 'Mail Interaction',
154
- secondary: 'Received 20s ago',
155
- icon: 'mail-solid',
156
- meta: 'JB',
157
- customerName: 'John Brown'
158
- }
159
- ].map(item => {
160
- const { primary, icon } = item;
161
- return {
162
- name: primary,
163
- icon,
164
- href: '',
165
- onClick: () => {
166
- createInteraction(item);
167
- }
168
- };
169
- });
170
- useEffect(() => {
171
- createInteraction({
172
- primary: 'Phone Interaction',
173
- secondary: 'Received 20s ago',
174
- icon: 'phone-solid',
175
- meta: 'GV',
176
- customerName: 'Ginger Ventura'
177
- });
178
- }, []);
179
- const actions = (<>
180
- <Button name='Cancel' variant='secondary' onClick={(e) => {
181
- action('Click')(`${e.currentTarget.name}:${e.type}`);
182
- }}>
183
- Cancel
184
- </Button>
185
- <Button name='Submit' type='submit' variant='primary'>
186
- Log in
187
- </Button>
188
- </>);
189
- const chatSettings = (<Flex container={{ direction: 'column', gap: 2, pad: 2 }} item={{ grow: 1 }}>
190
- <Form actions={actions}>
191
- <Input name='agentId' label='Agent Id' autoComplete='off'/>
192
-
193
- <Input name='password' type='password' label='Password' autoComplete='off'/>
194
- <Select label='Make me'>
195
- <Option>Available</Option>
196
- <Option>Unavailable</Option>
197
- </Select>
198
- </Form>
199
- </Flex>);
200
- const utils = [
201
- {
202
- name: 'Chat settings',
203
- visual: <Icon name='chat-solid'/>,
204
- drawerView: chatSettings,
205
- drawerHeader: 'Pega Chat Log In'
206
- },
207
- <CTIControlPanel />
208
- ];
209
- const appInfo = {
210
- href: 'https://www.pega.com/',
211
- imageSrc: 'https://www.clipartmax.com/png/middle/345-3454195_account-executive-civilian-pega-logo-png.png',
212
- fullImageSrc: 'Full Image Source',
213
- appName: 'CS AppShell'
214
- };
215
- return (<CTIControlPanelContext.Provider value={useMemo(() => ({
216
- type: args.ctiPanel,
217
- draggable: args.isDraggable,
218
- applyAppStyling: args.applyThemeToExternalCTI
219
- }), [args.isDraggable, args.applyThemeToExternalCTI, args.ctiPanel])}>
220
- <AppShellDemo main={mainContent} appInfo={appInfo} cases={cases} createLinks={createLinks} caseLinks={links} utils={utils} onLinkClick={(name) => {
221
- if (name === 'Home') {
222
- setMainContent(home);
223
- }
224
- setActiveItem(name);
225
- }}/>
226
- </CTIControlPanelContext.Provider>);
227
- };
228
- //# sourceMappingURL=CSAppShell.stories.jsx.map
@@ -1 +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, useMemo } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport { Meta, 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} from '@pega/cosmos-react-core';\nimport * as chatSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/chat-solid.icon';\n\nimport { AppShellDemo } from '../../core/AppShell/AppShell.stories';\nimport { CaseViewDemo } from '../../work/CaseView/CaseView.stories';\nimport { TasksDemo } from '../../work/Tasks/Tasks.stories';\nimport { FeedDemo } from '../../social/Feed/Feed.stories';\nimport { EmailShellDemo } from '../../social/Email/Email.stories';\nimport { StandardChat } from '../../social/Chat/Chat.stories';\nimport { TaskManagerDemo } from '../TaskManager/TaskManager.stories';\nimport {\n InteractionTimerDemo as InteractionTimerStory,\n InteractionTimerStoryProps\n} from '../InteractionTimer/InteractionTimer.stories';\n\nimport { AppShellMockData, CTIControlPanel, CTIControlPanelContext } from './CSAppShell.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 ctiPanel: 'internal',\n applyThemeToExternalCTI: false\n },\n argTypes: {\n isDraggable: { control: { type: 'boolean' } },\n hasInteractionNotifications: { control: { type: 'boolean' } },\n enableSla: { control: { type: 'boolean' } },\n ctiPanel: { options: ['internal', 'external'], control: { type: 'inline-radio' } },\n applyThemeToExternalCTI: { control: { type: 'boolean' } }\n }\n} as Meta;\n\ninterface CSAppShellProps {\n isDraggable?: boolean;\n hasInteractionNotifications?: InteractionTimerStoryProps['hasNotifications'];\n enableSla?: InteractionTimerStoryProps['showTimer'];\n ctiPanel: 'internal' | 'external';\n applyThemeToExternalCTI: boolean;\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 [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: <EmailShellDemo 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={<TaskManagerDemo />}\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 icon={icon}\n showTimer={args.enableSla}\n hasNotifications={args.hasInteractionNotifications}\n meta={args.enableSla ? '0:00' : createLink.meta}\n interactionType={primary}\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\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\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 <CTIControlPanel />\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 <CTIControlPanelContext.Provider\n value={useMemo(\n () => ({\n type: args.ctiPanel,\n draggable: args.isDraggable,\n applyAppStyling: args.applyThemeToExternalCTI\n }),\n [args.isDraggable, args.applyThemeToExternalCTI, args.ctiPanel]\n )}\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 </CTIControlPanelContext.Provider>\n );\n};\n"]}
@@ -1,3 +0,0 @@
1
- declare const StyledDemoContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
2
- export default StyledDemoContainer;
3
- //# sourceMappingURL=FieldValueList.mocks.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"FieldValueList.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/FieldValueList/FieldValueList.mocks.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,mBAAmB,yGAUvB,CAAC;AAEH,eAAe,mBAAmB,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"FieldValueList.mocks.js","sourceRoot":"","sources":["../../../src/core/FieldValueList/FieldValueList.mocks.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACnD,MAAM,EACJ,IAAI,EAAE,EACJ,eAAe,EAAE,EAAE,EAAE,EAAE,EACxB,EACF,GAAG,KAAK,CAAC;IAEV,OAAO,GAAG,CAAA;iBACK,EAAE;GAChB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,mBAAmB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nconst StyledDemoContainer = styled.div(({ theme }) => {\n const {\n base: {\n 'content-width': { md }\n }\n } = theme;\n\n return css`\n max-width: ${md};\n `;\n});\n\nexport default StyledDemoContainer;\n"]}
@@ -1,73 +0,0 @@
1
- import { FunctionComponent } from 'react';
2
- export declare type LoginError = string;
3
- export interface LoginFormProps {
4
- ctiLinkOptions: {
5
- [key: string]: string;
6
- };
7
- onLogin: (ctiLinkId: keyof LoginFormProps['ctiLinkOptions'], agentId: string, password: string) => Promise<LoginError | undefined>;
8
- onCancel: () => void;
9
- }
10
- export declare const CallLoginForm: FunctionComponent<LoginFormProps>;
11
- export declare const CTIControlPanelContext: import("react").Context<{
12
- type: 'internal' | 'external';
13
- draggable?: boolean | undefined;
14
- applyAppStyling: boolean;
15
- }>;
16
- export declare const CTIControlPanel: FunctionComponent;
17
- export declare const AppShellMockData: {
18
- notifications: {
19
- id: string;
20
- primary: string;
21
- secondary: string;
22
- visual: string;
23
- unread: boolean;
24
- }[];
25
- recents: {
26
- id: string;
27
- primary: string;
28
- secondary: string;
29
- }[];
30
- 'Phone Interaction': {
31
- caseId: string;
32
- heading: string;
33
- primaryFields: {
34
- id: string;
35
- name: string;
36
- value: string;
37
- }[];
38
- secondaryFields: {
39
- id: string;
40
- name: string;
41
- value: string;
42
- }[];
43
- };
44
- 'Chat Interaction': {
45
- caseId: string;
46
- heading: string;
47
- primaryFields: {
48
- id: string;
49
- name: string;
50
- value: string;
51
- }[];
52
- secondaryFields: {
53
- id: string;
54
- name: string;
55
- value: string;
56
- }[];
57
- };
58
- 'Mail Interaction': {
59
- caseId: string;
60
- heading: string;
61
- primaryFields: {
62
- id: string;
63
- name: string;
64
- value: string;
65
- }[];
66
- secondaryFields: {
67
- id: string;
68
- name: string;
69
- value: string;
70
- }[];
71
- };
72
- };
73
- //# sourceMappingURL=CSAppShell.mocks.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"CSAppShell.mocks.d.ts","sourceRoot":"","sources":["../../../src/cs/CSCaseView/CSAppShell.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA8B,iBAAiB,EAAwB,MAAM,OAAO,CAAC;AAoB5F,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;IACrC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,aAAa,EAAE,iBAAiB,CAAC,cAAc,CAmE3D,CAAC;AAEF,eAAO,MAAM,sBAAsB;UAC3B,UAAU,GAAG,UAAU;;qBAEZ,OAAO;EAKxB,CAAC;AAEH,eAAO,MAAM,eAAe,EAAE,iBAiE7B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmO5B,CAAC"}
@@ -1,280 +0,0 @@
1
- import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { createContext, useContext, useState } from 'react';
3
- import { AppShellDrawerContext, Banner, Button, Flex, Form, Input, Option, Select } from '@pega/cosmos-react-core';
4
- import { CTIPanel } from '@pega/cosmos-react-cs';
5
- import { userStatusOptions } from '../CallControlPanel/CallControlPanel.mocks';
6
- import { CallControlPanelDemo, ExternalCTIDemo } from '../CallControlPanel/CallControlPanel.stories';
7
- export const CallLoginForm = ({ ctiLinkOptions, onLogin, onCancel }) => {
8
- const [agentId, setAgentId] = useState('');
9
- const [password, setPassword] = useState('');
10
- const [extension, setExtension] = useState('');
11
- const [ctiLinkId, setCTILinkId] = useState(Object.keys(ctiLinkOptions)[0]);
12
- const [errorMessage, setErrorMessage] = useState();
13
- const canSubmit = agentId && password && ctiLinkId && extension;
14
- const actions = (_jsxs(_Fragment, { children: [_jsx(Button, { name: 'cancel', variant: 'secondary', onClick: onCancel, children: "Cancel" }, 'cancel'), _jsx(Button, { name: 'submit', type: 'submit', variant: 'primary', disabled: !canSubmit, onClick: (e) => {
15
- e.preventDefault();
16
- onLogin(ctiLinkId, agentId, password).then(setErrorMessage);
17
- }, children: "Login" }, 'submit')] }));
18
- 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) })] }));
19
- };
20
- export const CTIControlPanelContext = createContext({
21
- type: 'internal',
22
- draggable: true,
23
- applyAppStyling: false
24
- });
25
- export const CTIControlPanel = () => {
26
- const [agentStatus, setAgentStatus] = useState(userStatusOptions[0]);
27
- const [callPanelVisible, setCallPanelVisible] = useState(false);
28
- const { type, draggable, applyAppStyling } = useContext(CTIControlPanelContext);
29
- const { openDrawer, closeDrawer } = useContext(AppShellDrawerContext);
30
- const drawerView = (_jsx(Flex, { container: { direction: 'column', gap: 2, pad: 2 }, item: { grow: 1 }, children: _jsx(CallLoginForm, { ctiLinkOptions: {
31
- valid: 'It will be accepted',
32
- invalid: 'This will raise an error'
33
- }, onLogin: ctiLink => {
34
- if (ctiLink === 'invalid')
35
- return Promise.resolve('Login incorrect');
36
- setAgentStatus(userStatusOptions[0]);
37
- setCallPanelVisible(true);
38
- closeDrawer();
39
- return Promise.resolve(undefined);
40
- }, onCancel: closeDrawer }) }));
41
- const drawerHeader = 'Pega Call Log In';
42
- return (_jsx(_Fragment, { children: _jsx(CTIPanel, { visible: callPanelVisible, status: agentStatus, onClick: () => {
43
- if (agentStatus.status === 'logout')
44
- openDrawer({
45
- drawerHeader,
46
- drawerView,
47
- name: drawerHeader
48
- });
49
- else
50
- setCallPanelVisible(prev => !prev);
51
- }, children: type === 'internal' ? (_jsx(CallControlPanelDemo, { heading: 'Agent', status: agentStatus.id, onStatusChange: status => {
52
- setAgentStatus(status);
53
- if (status.status === 'logout')
54
- setCallPanelVisible(false);
55
- }, isDraggable: draggable, visible: callPanelVisible })) : (_jsx(ExternalCTIDemo, { heading: 'External CTI', isDraggable: draggable, visible: callPanelVisible, applyAppStyling: applyAppStyling })) }) }));
56
- };
57
- export const AppShellMockData = {
58
- notifications: [
59
- {
60
- id: '123',
61
- primary: "Dean Thomas mentioned your team in a bug 'Button does not initiate onClick event handler'.",
62
- secondary: 'BUG-12345',
63
- visual: 'Dean Thomas',
64
- unread: true
65
- },
66
- {
67
- id: '456',
68
- primary: "Seth DeAngelo mentioned your team in a bug 'Text variant h1 renders as h3 in DOM'.",
69
- visual: 'Seth DeAngelo',
70
- secondary: 'BUG-12345',
71
- unread: true
72
- },
73
- {
74
- id: '789',
75
- primary: "Janet Moore mentioned your team in a bug 'Tree expanded state does not match the state that was set on the component'.",
76
- secondary: 'BUG-12345',
77
- visual: 'Janet Moore',
78
- unread: true
79
- },
80
- {
81
- id: '000',
82
- primary: 'You have been awarded Employee of the Month! Congratulations!',
83
- secondary: '',
84
- visual: 'Cindy Turner',
85
- unread: true
86
- }
87
- ],
88
- recents: [
89
- {
90
- id: '123',
91
- primary: "BUG-12345: 'Button does not initiate onClick event handler'.",
92
- secondary: 'BUG-12345'
93
- },
94
- {
95
- id: '456',
96
- primary: "BUG-54321: 'Text variant h1 renders as h3 in DOM'.",
97
- secondary: 'BUG-00000'
98
- },
99
- {
100
- id: '789',
101
- primary: "BUG-00000: 'Tree expanded state does not match the state that was set on the component'.",
102
- secondary: 'BUG-00000'
103
- },
104
- {
105
- id: '111',
106
- primary: "BUG-12345: 'Button does not initiate onClick event handler'.",
107
- secondary: 'BUG-12345'
108
- },
109
- {
110
- id: '222',
111
- primary: "BUG-54321: 'Text variant h1 renders as h3 in DOM'.",
112
- secondary: 'BUG-00000'
113
- },
114
- {
115
- id: '333',
116
- primary: "BUG-00000: 'Tree expanded state does not match the state that was set on the component'.",
117
- secondary: 'BUG-00000'
118
- },
119
- {
120
- id: '444',
121
- primary: "BUG-12345: 'Button does not initiate onClick event handler'.",
122
- secondary: 'BUG-12345'
123
- },
124
- {
125
- id: '555',
126
- primary: "BUG-54321: 'Text variant h1 renders as h3 in DOM'.",
127
- secondary: 'BUG-00000'
128
- },
129
- {
130
- id: '666',
131
- primary: "BUG-00000: 'Tree expanded state does not match the state that was set on the component'.",
132
- secondary: 'BUG-00000'
133
- }
134
- ],
135
- 'Phone Interaction': {
136
- caseId: 'Customer',
137
- heading: 'Ginger Ventura',
138
- primaryFields: [
139
- {
140
- id: '0',
141
- name: 'Lifetime value',
142
- value: 'Gold'
143
- },
144
- {
145
- id: '1',
146
- name: 'Interaction type',
147
- value: 'Phone'
148
- },
149
- {
150
- id: '2',
151
- name: 'Churn risk',
152
- value: 'Low'
153
- },
154
- {
155
- id: '3',
156
- name: 'Status',
157
- value: 'Open'
158
- }
159
- ],
160
- secondaryFields: [
161
- {
162
- id: '0',
163
- name: 'Status',
164
- value: 'Verified'
165
- },
166
- {
167
- id: '1',
168
- name: 'Web login',
169
- value: 'Today'
170
- },
171
- {
172
- id: '2',
173
- name: 'Customer since',
174
- value: 'July 2018'
175
- },
176
- {
177
- id: '3',
178
- name: 'Address',
179
- value: '2213b Gormand street'
180
- }
181
- ]
182
- },
183
- 'Chat Interaction': {
184
- caseId: 'Customer',
185
- heading: 'Sara Davis',
186
- primaryFields: [
187
- {
188
- id: '0',
189
- name: 'Lifetime value',
190
- value: 'Silver'
191
- },
192
- {
193
- id: '1',
194
- name: 'Interaction type',
195
- value: 'Chat'
196
- },
197
- {
198
- id: '2',
199
- name: 'Churn risk',
200
- value: 'High'
201
- },
202
- {
203
- id: '3',
204
- name: 'Status',
205
- value: 'Open'
206
- }
207
- ],
208
- secondaryFields: [
209
- {
210
- id: '0',
211
- name: 'Status',
212
- value: 'Verified'
213
- },
214
- {
215
- id: '1',
216
- name: 'Web login',
217
- value: 'Today'
218
- },
219
- {
220
- id: '2',
221
- name: 'Customer since',
222
- value: 'March 2005'
223
- },
224
- {
225
- id: '3',
226
- name: 'Address',
227
- value: '340 River'
228
- }
229
- ]
230
- },
231
- 'Mail Interaction': {
232
- caseId: 'Customer',
233
- heading: 'John Brown',
234
- primaryFields: [
235
- {
236
- id: '0',
237
- name: 'Lifetime value',
238
- value: 'Bronze'
239
- },
240
- {
241
- id: '1',
242
- name: 'Interaction type',
243
- value: 'Mail'
244
- },
245
- {
246
- id: '2',
247
- name: 'Churn risk',
248
- value: 'Medium'
249
- },
250
- {
251
- id: '3',
252
- name: 'Status',
253
- value: 'Open'
254
- }
255
- ],
256
- secondaryFields: [
257
- {
258
- id: '0',
259
- name: 'Status',
260
- value: 'Verified'
261
- },
262
- {
263
- id: '1',
264
- name: 'Web login',
265
- value: 'Today'
266
- },
267
- {
268
- id: '2',
269
- name: 'Customer since',
270
- value: 'March 1995'
271
- },
272
- {
273
- id: '3',
274
- name: 'Address',
275
- value: '340 River'
276
- }
277
- ]
278
- }
279
- };
280
- //# sourceMappingURL=CSAppShell.mocks.js.map