@pega/cosmos-react-demos 3.0.0-dev.26.0 → 3.0.0-dev.27.2

package/lib/social/Email/Email.stories.d.ts

@@ -1,6 +1,6 @@
 import { MouseEvent } from 'react';
 import { Meta, Story } from '@storybook/react';
-import { EmailSummaryListProps } from '@pega/cosmos-react-social';
+import { EmailSummaryListProps, EmailCaseViewProps } from '@pega/cosmos-react-social';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 interface EmailDemoProps {
@@ -8,14 +8,20 @@ interface EmailDemoProps {
     enableContextMenu?: boolean;
     forwardedContent?: string;
     showEmailBanner?: boolean;
+    showDraft?: boolean;
 }
 export declare const Email: Story<EmailDemoProps>;
-export declare const Composer: Story;
+interface ComposerDemoProps {
+    enableResponseTypeToggle?: boolean;
+    enableSaveAsDraft?: boolean;
+}
+export declare const Composer: Story<ComposerDemoProps>;
 export declare const Conversation: Story;
 interface EmailShellDemoProps {
     autoCollapse?: boolean;
     hideSuggestions?: boolean;
     singleConversation?: boolean;
+    showHeader?: boolean;
 }
 export declare const EmailShellDemo: Story<EmailShellDemoProps>;
 interface EntityListDemoProps {
@@ -35,9 +41,20 @@ interface EmailSummaryListStoryProps {
     loading?: EmailSummaryListProps['loading'];
 }
 export declare const EmailSummaryListDemo: Story<EmailSummaryListStoryProps>;
+interface EmailCaseViewStoryProps extends EmailCaseViewProps {
+    showBanners?: boolean;
+    noUtilityView?: boolean;
+    showHeader?: boolean;
+}
+export declare const EmailCaseViewDemo: Story<EmailCaseViewStoryProps>;
 interface EmailManagerAppShellProps {
     enableContextMenu?: boolean;
     onContextMenu?: (e: MouseEvent) => void;
+    showEmptyView?: boolean;
+    showHeader?: boolean;
+    showCaseViewBanners?: boolean;
+    noItemViewInEmailCaseView?: boolean;
+    showUtilities: boolean;
 }
 export declare const EmailManagerAppShell: Story<EmailManagerAppShellProps>;
 //# sourceMappingURL=Email.stories.d.ts.map

package/lib/social/Email/Email.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Email.stories.d.ts","sourceRoot":"","sources":["../../../src/social/Email/Email.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAOL,UAAU,EAEX,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AA4B/C,OAAO,EAaL,qBAAqB,EAEtB,MAAM,2BAA2B,CAAC;;AA+CnC,wBAGU;AASV,UAAU,cAAc;IACtB,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,cAAc,CAqGvC,CAAC;AAwBF,eAAO,MAAM,QAAQ,EAAE,KAgLtB,CAAC;AASF,eAAO,MAAM,YAAY,EAAE,KA2C1B,CAAC;AASF,UAAU,mBAAmB;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,mBAAmB,CA8kBrD,CAAC;AAqBF,UAAU,mBAAmB;IAC3B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CACzC;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,mBAAmB,CAoDrD,CAAC;AAiBF,UAAU,yBAAyB;IACjC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,yBAAyB,CA8BjE,CAAC;AAmBF,UAAU,0BAA0B;IAClC,WAAW,CAAC,EAAE,qBAAqB,CAAC,aAAa,CAAC,CAAC;IACnD,KAAK,CAAC,EAAE,qBAAqB,CAAC,OAAO,CAAC,CAAC;IACvC,UAAU,CAAC,EAAE,qBAAqB,CAAC,YAAY,CAAC,CAAC;IACjD,OAAO,CAAC,EAAE,qBAAqB,CAAC,SAAS,CAAC,CAAC;CAC5C;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,0BAA0B,CAkElE,CAAC;AASF,UAAU,yBAAyB;IACjC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CACzC;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,yBAAyB,CA+HjE,CAAC"}
+{"version":3,"file":"Email.stories.d.ts","sourceRoot":"","sources":["../../../src/social/Email/Email.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAOL,UAAU,EAEX,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AA2B/C,OAAO,EAaL,qBAAqB,EAGrB,kBAAkB,EACnB,MAAM,2BAA2B,CAAC;;AA8CnC,wBAGU;AASV,UAAU,cAAc;IACtB,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,cAAc,CAuGvC,CAAC;AA2BF,UAAU,iBAAiB;IACzB,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,iBAAiB,CAoL7C,CAAC;AAuBF,eAAO,MAAM,YAAY,EAAE,KAyC1B,CAAC;AASF,UAAU,mBAAmB;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,mBAAmB,CAwlBrD,CAAC;AAuBF,UAAU,mBAAmB;IAC3B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CACzC;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,mBAAmB,CAoDrD,CAAC;AAiBF,UAAU,yBAAyB;IACjC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,yBAAyB,CA8BjE,CAAC;AAmBF,UAAU,0BAA0B;IAClC,WAAW,CAAC,EAAE,qBAAqB,CAAC,aAAa,CAAC,CAAC;IACnD,KAAK,CAAC,EAAE,qBAAqB,CAAC,OAAO,CAAC,CAAC;IACvC,UAAU,CAAC,EAAE,qBAAqB,CAAC,YAAY,CAAC,CAAC;IACjD,OAAO,CAAC,EAAE,qBAAqB,CAAC,SAAS,CAAC,CAAC;CAC5C;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,0BAA0B,CAkElE,CAAC;AAIF,UAAU,uBAAwB,SAAQ,kBAAkB;IAC1D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,uBAAuB,CA2E5D,CAAC;AAyBF,UAAU,yBAAyB;IACjC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,aAAa,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,yBAAyB,CAoIjE,CAAC"}

package/lib/social/Email/Email.stories.js

@@ -2,12 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // cSpell:words calibri Trichy Nagercoil
 import { useState, useRef, useCallback, useEffect, createRef } from 'react';
 import { action } from '@storybook/addon-actions';
-import { useMemo } from '@storybook/addons';
-import { Card, CardContent, createUID, MenuButton, Icon, registerIcon, Flex, Button, menuHelpers, CardHeader, Text, SummaryList, Grid, FieldValueList, StyledLabel, EmptyState, Modal, useModalManager, useModalContext, useToaster } from '@pega/cosmos-react-core';
+import { Card, CardContent, createUID, MenuButton, Icon, registerIcon, Flex, Button, menuHelpers, CardHeader, Text, SummaryList, Grid, FieldValueList, StyledLabel, Modal, useModalManager, useModalContext, useToaster, Banner } from '@pega/cosmos-react-core';
 import * as filterIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/filter.icon';
-import { Email as EmailComponent, EmailConversation, EmailComposer, EmailShell, EmailSummaryItem, EmailSummaryList, EntityList, EmailManager } from '@pega/cosmos-react-social';
+import { Email as EmailComponent, EmailConversation, EmailComposer, EmailShell, EmailSummaryItem, EmailSummaryList, EntityList, EmailManager, EmailCaseView } from '@pega/cosmos-react-social';
 import { AppShellDemo } from '../../core/AppShell/AppShell.stories';
-import { bccParticipants, ccParticipants, emailBodyContent, participants, toParticipants, emailAttachments, EntityListMockData, viewAnalysisEmailHeaderMock, topicListMock, emailActions, generateEmailConversationParticipants, templates, handleExternalEntry, emailDemoActions, LaunchAction, baseComposerProps, sentiment, emailSummaryItems, mockEmails, mockSuggestedReplies, mockEmailBodyTemplates, forwardedContent, getCompositeId, emptyFieldErrorMessage, fieldValidation, emailWorklistItemsMock, contextMenuItemsMock, highlightedEntitiesMock, mockUploadImage, mailDeliverySystemEmail, supportTeamEmail } from './Email.mocks';
+import { bccParticipants, ccParticipants, emailBodyContent, participants, toParticipants, emailAttachments, EntityListMockData, viewAnalysisEmailHeaderMock, topicListMock, generateEmailConversationParticipants, templates, handleExternalEntry, emailDemoActions, LaunchAction, baseComposerProps, sentiment, emailSummaryItems, mockEmails, mockSuggestedReplies, mockEmailBodyTemplates, forwardedContent, getCompositeId, emptyFieldErrorMessage, fieldValidation, emailWorklistItemsMock, contextMenuItemsMock, highlightedEntitiesMock, mockUploadImage, mailDeliverySystemEmail, supportTeamEmail } from './Email.mocks';
 import { StyledEmailCardContent } from './Email.styles';
 registerIcon(filterIcon);
 export default {
@@ -53,9 +52,9 @@ export const Email = (args) => {
                             '550 5.1.1 The email account that you tried to reach does not exist. Please try double-checking the recipients email address for typos or unnecessary spaces. Learn more at https://support.google.com/mail/?p=NoSuchUser k24-20020aa790d8000000b0050dd7e3b84csor451330pfk.28'
                         ]
                     }
-                    : undefined, onReply: action('On reply'), onReplyAll: action('On reply all'), onForward: action('On forward'), onSuggestionClick: action('On Suggested reply clicked'), sentiment: {
+                    : undefined, onReply: args.showDraft ? undefined : action('On reply'), onReplyAll: args.showDraft ? undefined : action('On reply all'), onForward: args.showDraft ? undefined : action('On forward'), onEditDraft: args.showDraft ? action('On forward') : undefined, onDeleteDraft: args.showDraft ? action('On forward') : undefined, onSuggestionClick: action('On Suggested reply clicked'), sentiment: {
                     variant: 'neutral'
-                }, actions: emailActions, suggestions: mockSuggestedReplies, contextMenu: {
+                }, status: args.showDraft ? 'draft' : undefined, suggestions: mockSuggestedReplies, contextMenu: {
                     onItemClick: (selectedValue) => {
                         action('onItemClick')(selectedValue);
                         contextMenuHandle.current?.setOpen(false);
@@ -86,21 +85,18 @@ Email.args = {
     enableContextMenu: false,
     // eslint-disable-next-line demo-patterns/literal-args
     forwardedContent,
-    showEmailBanner: false
+    showEmailBanner: false,
+    showDraft: false
 };
 Email.argTypes = {
     enableEntityHighlighting: { control: { type: 'boolean' } },
     enableContextMenu: { control: { type: 'boolean' } },
     forwardedContent: { control: { type: 'text' } },
-    showEmailBanner: { control: { type: 'boolean' } }
+    showEmailBanner: { control: { type: 'boolean' } },
+    showDraft: { control: { type: 'boolean' } }
 };
-//   ______   ______   .___  ___. .______     ______        _______. _______ .______
-//  /      | /  __  \  |   \/   | |   _  \   /  __  \      /       ||   ____||   _  \
-// |  ,----'|  |  |  | |  \  /  | |  |_)  | |  |  |  |    |   (----`|  |__   |  |_)  |
-// |  |     |  |  |  | |  |\/|  | |   ___/  |  |  |  |     \   \    |   __|  |      /
-// |  `----.|  `--'  | |  |  |  | |  |      |  `--'  | .----)   |   |  |____ |  |\  \----.
-//  \______| \______/  |__|  |__| | _|       \______/  |_______/    |_______|| _| `._____|
-export const Composer = () => {
+export const Composer = (args) => {
+    const { enableResponseTypeToggle = true, enableSaveAsDraft = true } = args;
     const [composerProgress, setComposerProgress] = useState(false);
     const composerHandle = useRef(null);
     const [data, setData] = useState({
@@ -252,7 +248,22 @@ export const Composer = () => {
             setComposerProgress(false);
         });
     };
-    return (_jsx(EmailComposer, { handle: composerHandle, progress: composerProgress, onSave: action('On save'), onSend: handleOnSend, onCancel: action('On cancel'), externalValidator: handleExternalEntry, participants: participants, onChange: handleOnChange, data: data, templates: templates, onImageAdded: onImageAdded }));
+    return (_jsx(EmailComposer, { handle: composerHandle, progress: composerProgress, onSave: enableSaveAsDraft ? action('On save') : undefined, onSend: handleOnSend, onCancel: action('On cancel'), externalValidator: handleExternalEntry, participants: participants, onChange: handleOnChange, data: {
+            ...data,
+            responseType: enableResponseTypeToggle ? data.responseType : undefined
+        }, templates: templates, onImageAdded: onImageAdded }));
+};
+Composer.args = {
+    enableResponseTypeToggle: true,
+    enableSaveAsDraft: true
+};
+Composer.argTypes = {
+    enableResponseTypeToggle: {
+        control: 'boolean'
+    },
+    enableSaveAsDraft: {
+        control: { type: 'boolean' }
+    }
 };
 //   ______   ______   .__   __. ____    ____  _______ .______          _______.     ___   .___________. __    ______   .__   __.
 //  /      | /  __  \  |  \ |  | \   \  /   / |   ____||   _  \        /       |    /   \  |           ||  |  /  __  \  |  \ |  |
@@ -274,7 +285,6 @@ export const Conversation = () => {
             onReply: action('On reply'),
             onForward: action('On forward'),
             onSuggestionClick: action('On Suggested reply clicked'),
-            actions: emailActions,
             suggestions: mockSuggestedReplies
         },
         {
@@ -287,8 +297,7 @@ export const Conversation = () => {
             body: '<div> Hi, <br /> <br /> <div>I’m still at the airport, I need help now!! </div> <br /><br /> Regards, <br /> Sara Davis </div>',
             onReply: action('On reply'),
             onForward: action('On forward'),
-            onSuggestionClick: action('On Suggested reply clicked'),
-            actions: emailActions
+            onSuggestionClick: action('On Suggested reply clicked')
         }
     ];
     return (_jsx(EmailConversation, { participants: generateEmailConversationParticipants(emailArr), from: generateEmailConversationParticipants(emailArr, ['from'])[0], to: generateEmailConversationParticipants(emailArr, ['to']), id: createUID(), timeStamp: emailArr[0].timeStamp, unReadEmailCount: emailArr.filter(item => item.unRead).length, emails: emailArr }));
@@ -631,6 +640,7 @@ export const EmailShellDemo = (args) => {
             [
                 {
                     ...emailsData[1],
+                    id: 'item0',
                     from: mailDeliverySystemEmail,
                     to: [supportTeamEmail],
                     body: '<div>Hi, <br /> <br /><div>Your address change request is approved.</div> <br /> <br />Regards, <br />Support team </div>',
@@ -642,8 +652,7 @@ export const EmailShellDemo = (args) => {
                         ]
                     },
                     onReply: undefined,
-                    onForward: undefined,
-                    actions: undefined
+                    onForward: undefined
                 },
                 { ...emailsData[1], unRead: false }
             ],
@@ -652,11 +661,20 @@ export const EmailShellDemo = (args) => {
                     ...emailsData[0],
                     id: 'item2',
                     status: 'draft',
+                    onEditDraft: (id) => createOrActivateComposer(id, LaunchAction.REPLY, {
+                        ...baseComposerProps,
+                        data: {
+                            ...baseComposerProps.data,
+                            responseType: 'reply',
+                            subject: { value: `Re-${emailsData[0].subject}` || '' },
+                            bodyContent: { defaultValue: emailsData[0].body || '' }
+                        }
+                    }),
+                    onDeleteDraft: (id) => deleteEmail(id),
                     onReply: undefined,
                     onForward: undefined,
                     suggestions: undefined,
                     unRead: false,
-                    actions: emailDemoActions('item2', emailsData[0].subject, createOrActivateComposer, true, '<div>Hi, <br /> <br /><div>Sure, Our executive will come and check your connection in 24hrs. </div>  <br />Regards, <br />Hugh Phillips </div>', deleteEmail),
                     timeStamp: '2021-01-03T17:15',
                     from: mockEmails['Hugh Phillips'],
                     to: [mockEmails['Mystery Rey'], ...emailsData[0].to],
@@ -668,10 +686,19 @@ export const EmailShellDemo = (args) => {
                     ...emailsData[1],
                     id: 'item3',
                     status: 'draft',
+                    onEditDraft: (id) => createOrActivateComposer(id, LaunchAction.REPLY, {
+                        ...baseComposerProps,
+                        data: {
+                            ...baseComposerProps.data,
+                            responseType: 'reply',
+                            subject: { value: `Re-${emailsData[0].subject}` || '' },
+                            bodyContent: { defaultValue: emailsData[0].body || '' }
+                        }
+                    }),
+                    onDeleteDraft: (id) => deleteEmail(id),
                     onReply: undefined,
                     onForward: undefined,
                     suggestions: undefined,
-                    actions: emailDemoActions('item3', emailsData[0].subject, createOrActivateComposer, true, '<div>Hi, <br /> <br /><div>Can you fix my internet connection. </div> <br /> <br />Regards, <br />Rey Mystery </div>', deleteEmail),
                     unRead: false,
                     timeStamp: '2021-01-02T14:16',
                     from: mockEmails['Mystery Rey'],
@@ -729,6 +756,7 @@ export const EmailShellDemo = (args) => {
             emails: [
                 {
                     ...emailsData[1],
+                    id: 'item0',
                     from: mailDeliverySystemEmail,
                     to: [supportTeamEmail],
                     body: '<div>Hi, <br /> <br /><div>Your address change request is approved.</div> <br /> <br />Regards, <br />Support team </div>',
@@ -740,32 +768,35 @@ export const EmailShellDemo = (args) => {
                         ]
                     },
                     onReply: undefined,
-                    onForward: undefined,
-                    actions: undefined
+                    onForward: undefined
                 },
                 { ...emailsData[1], unRead: false }
             ]
         }
     ];
-    return (_jsxs(_Fragment, { children: [_jsx(EmailShell, { headerProps: {
-                    actions: (_jsxs(Flex, { container: {
-                            alignItems: 'center',
-                            gap: 0
-                        }, children: [_jsx(Button, { variant: 'simple', icon: true, children: _jsx(Icon, { name: 'filter' }) }), _jsx(MenuButton, { variant: 'simple', text: 'More actions', icon: 'more', iconOnly: true, portal: true, menu: { items: actions } })] })),
-                    subject: 'Pause service'
-                }, autoCollapse: args.autoCollapse, conversations: args.singleConversation ? singleEmailConversation : emailConversations }), _jsx(_Fragment, { children: Object.keys(composersData).map(guid => {
+    return (_jsxs(_Fragment, { children: [_jsx(EmailShell, { headerProps: args.showHeader
+                    ? {
+                        actions: (_jsxs(Flex, { container: {
+                                alignItems: 'center',
+                                gap: 0
+                            }, children: [_jsx(Button, { variant: 'simple', icon: true, children: _jsx(Icon, { name: 'filter' }) }), _jsx(MenuButton, { variant: 'simple', text: 'More actions', icon: 'more', iconOnly: true, portal: true, menu: { items: actions } })] })),
+                        subject: 'Pause service'
+                    }
+                    : undefined, autoCollapse: args.autoCollapse, conversations: args.singleConversation ? singleEmailConversation : emailConversations }), _jsx(_Fragment, { children: Object.keys(composersData).map(guid => {
                     return _jsx(EmailComposer, { ...composersData[guid] }, guid);
                 }) })] }));
 };
 EmailShellDemo.args = {
     autoCollapse: true,
     hideSuggestions: false,
-    singleConversation: true
+    singleConversation: false,
+    showHeader: true
 };
 EmailShellDemo.argTypes = {
     autoCollapse: { control: { type: 'boolean' } },
     hideSuggestions: { control: { type: 'boolean' } },
-    singleConversation: { control: { type: 'boolean' } }
+    singleConversation: { control: { type: 'boolean' } },
+    showHeader: { control: { type: 'boolean' } }
 };
 export const EntityListDemo = (args) => {
     const itemCounter = useRef(3);
@@ -877,15 +908,48 @@ export const EmailSummaryListDemo = (args) => {
     }, [loading]);
     return (_jsx(EmailSummaryList, { ref: emailSummaryListRef, unreadEmailCount: 99, categories: categories, items: args.items || allEmailItems, onItemClick: args.onItemClick || handleItemClick, onCategoryClick: onCategoryClick, onLoadMore: args.onLoadMore || (hasMore ? loadMore : undefined), loading: args.loading || loading, emptyMessage: 'No emails.' }));
 };
+export const EmailCaseViewDemo = (args) => {
+    const content = _jsx(EmailShellDemo, {});
+    const utilities = (
+    // View analysis utility
+    _jsxs(Grid, { container: { rowGap: 2 }, children: [_jsx(EntityListDemo, {}), _jsxs(Card, { children: [_jsxs(CardHeader, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(Icon, { name: 'document-doc' }), _jsx(Text, { variant: 'h3', children: "Email header" })] }), _jsx(CardContent, { children: _jsx(FieldValueList, { fields: viewAnalysisEmailHeaderMock, variant: 'stacked' }) })] }), _jsx(SummaryList, { name: 'Topics', icon: 'headline', items: topicListMock.map(items => ({
+                    ...items,
+                    primary: _jsx(StyledLabel, { children: items.primary }),
+                    secondary: (_jsxs(Flex, { container: { direction: 'row', justify: 'between' }, children: [_jsx(Text, { variant: 'primary', children: items.secondary.indicator }), _jsx(StyledLabel, { children: items.secondary.value })] }))
+                })), noItemsText: 'No items' })] }));
+    return (_jsx(AppShellDemo, { appHeader: true, main: _jsx(EmailCaseView, { header: args.showHeader
+                ? {
+                    icon: 'mail',
+                    title: 'ET-5432'
+                }
+                : undefined, banners: args.showBanners && (_jsx(Banner, { id: 'error', variant: 'urgent', heading: 'Error', messages: ['Your email could not be delivered due to poor network connection.'] })), content: content, utilities: !args.noUtilityView && utilities, utilitiesSummaryItems: !args.noUtilityView
+                ? [
+                    { iconName: 'list-number', count: 7 },
+                    { iconName: 'document-doc', count: 1 },
+                    { iconName: 'headline', count: 4 }
+                ]
+                : undefined, defaultUtilitiesExpanded: true }) }));
+};
+EmailCaseViewDemo.args = {
+    showBanners: false,
+    noUtilityView: false,
+    showHeader: true
+};
+EmailCaseViewDemo.argTypes = {
+    showBanners: { control: { type: 'boolean' } },
+    noUtilityView: { control: { type: 'boolean' } },
+    showHeader: { control: { type: 'boolean' } }
+};
+EmailCaseViewDemo.parameters = {
+    layout: 'fullscreen'
+};
 export const EmailManagerAppShell = (args) => {
     const INITIAL_CHUNK_SIZE = 9;
     const APPEND_CHUNK_SIZE = 1;
-    const [activeItemId, setActiveItemId] = useState();
     const [emailList, setEmailList] = useState(emailSummaryItems.slice(0, INITIAL_CHUNK_SIZE));
     const [loading, setLoading] = useState(false);
     const [hasMore, setHasMore] = useState(true);
     const handleEmailItemClick = (id) => {
-        setActiveItemId(id);
         const index = emailList.findIndex(emailItem => {
             return emailItem.id === id;
         });
@@ -909,31 +973,42 @@ export const EmailManagerAppShell = (args) => {
             }, 1500);
         }
     }, [loading]);
-    const activeItemIndex = useMemo(() => emailList.findIndex(emailItem => emailItem.id === activeItemId), [activeItemId, emailList]);
-    const content = activeItemId === undefined ? (_jsx(EmptyState, { message: 'No item selected!' })) : (_jsx(EmailShellDemo, { singleConversation: activeItemIndex % 2 !== 0 }));
-    const utilities = activeItemId === undefined ? null : (
+    const utilities = (
     // View analysis utility
-    _jsxs(Grid, { container: { rowGap: 2 }, children: [_jsx(EntityListDemo, { onContextMenu: args.onContextMenu, enableContextMenu: args.enableContextMenu }), _jsxs(Card, { children: [_jsxs(CardHeader, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(Icon, { name: 'document-doc' }), _jsx(Text, { variant: 'h3', children: "Email header" })] }), _jsx(CardContent, { children: _jsx(FieldValueList, { fields: viewAnalysisEmailHeaderMock, variant: 'stacked' }) })] }), _jsx(SummaryList, { name: 'Topics', icon: 'headline', items: topicListMock.map(items => ({
+    _jsxs(Grid, { container: { rowGap: 2 }, children: [_jsx(EntityListDemo, {}), _jsxs(Card, { children: [_jsxs(CardHeader, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(Icon, { name: 'document-doc' }), _jsx(Text, { variant: 'h3', children: "Email header" })] }), _jsx(CardContent, { children: _jsx(FieldValueList, { fields: viewAnalysisEmailHeaderMock, variant: 'stacked' }) })] }), _jsx(SummaryList, { name: 'Topics', icon: 'headline', items: topicListMock.map(items => ({
                     ...items,
                     primary: _jsx(StyledLabel, { children: items.primary }),
                     secondary: (_jsxs(Flex, { container: { direction: 'row', justify: 'between' }, children: [_jsx(Text, { variant: 'primary', children: items.secondary.indicator }), _jsx(StyledLabel, { children: items.secondary.value })] }))
                 })), noItemsText: 'No items' })] }));
-    return (_jsx(AppShellDemo, { appHeader: true, main: _jsx(EmailManager, { header: {
-                icon: 'mail',
-                title: 'Inbox'
-            }, list: _jsx(EmailSummaryListDemo, { onItemClick: handleEmailItemClick, items: emailList, onLoadMore: hasMore ? onLoadMore : undefined, loading: loading }), content: content, utilities: utilities, utilitiesSummaryItems: utilities
-                ? [
-                    { iconName: 'list-number', count: 7 },
-                    { iconName: 'document-doc', count: 1 },
-                    { iconName: 'headline', count: 4 }
-                ]
-                : undefined, defaultCollapsedUtilities: !!utilities }) }));
+    const content = _jsx(EmailShellDemo, { showHeader: false });
+    return (_jsx(AppShellDemo, { appHeader: true, main: _jsx(EmailManager, { header: args.showHeader
+                ? {
+                    icon: 'mail',
+                    title: 'Inbox'
+                }
+                : undefined, list: _jsx(EmailSummaryListDemo, { onItemClick: handleEmailItemClick, items: emailList, onLoadMore: hasMore ? onLoadMore : undefined, loading: loading }), emailCaseDetails: !args.showEmptyView && (_jsx(EmailCaseView, { banners: args.showCaseViewBanners && (_jsx(Banner, { id: 'error', variant: 'urgent', heading: 'Error', messages: [
+                        'Your email could not be delivered due to poor network connection.'
+                    ] })), content: content, utilities: args.showUtilities && utilities, utilitiesSummaryItems: args.showUtilities
+                    ? [
+                        { iconName: 'list-number', count: 7 },
+                        { iconName: 'document-doc', count: 1 },
+                        { iconName: 'headline', count: 4 }
+                    ]
+                    : undefined, defaultUtilitiesExpanded: false })) }) }));
 };
 EmailManagerAppShell.args = {
-    enableContextMenu: true
+    enableContextMenu: true,
+    showEmptyView: false,
+    showHeader: true,
+    showCaseViewBanners: false,
+    showUtilities: true
 };
 EmailManagerAppShell.argTypes = {
-    enableContextMenu: { control: { type: 'boolean' } }
+    enableContextMenu: { control: { type: 'boolean' } },
+    showEmptyView: { control: { type: 'boolean' } },
+    showHeader: { control: { type: 'boolean' } },
+    showCaseViewBanners: { control: { type: 'boolean' } },
+    showUtilities: { control: { type: 'boolean' } }
 };
 EmailManagerAppShell.parameters = {
     layout: 'fullscreen'