@pega/cosmos-react-demos 3.0.0-dev.24.0 → 3.0.0-dev.27.0

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 } 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 {
@@ -15,25 +14,54 @@ export default {
     component: EmailComponent
 };
 export const Email = (args) => {
-    const emailImperativeHandle = useRef(null);
+    const contextMenuHandle = useRef(null);
     const timeout = useRef(null);
-    const handleRightClick = () => {
-        if (timeout.current) {
-            clearTimeout(timeout.current);
+    const handleRightClick = (id, e) => {
+        action('onContextMenu')(id, e);
+        if (contextMenuHandle.current && args.enableContextMenu) {
+            const { setItems, setOpen, setLoading } = contextMenuHandle.current;
+            // Deciding not to show browser context menu
+            // This should be synchronus
+            e.preventDefault();
+            // Now open the custom context menu using the handle and show loader
+            setLoading(true);
+            setItems([]);
+            setOpen(true);
+            if (timeout.current) {
+                clearTimeout(timeout.current);
+            }
+            timeout.current = window.setTimeout(() => {
+                setItems(contextMenuItemsMock);
+                // Hide the loader
+                setLoading(false);
+            }, 1000);
         }
-        timeout.current = window.setTimeout(() => {
-            emailImperativeHandle.current?.setContextMenuItems(contextMenuItemsMock);
-        }, 1000);
     };
-    return (_jsx(Card, { children: _jsx(StyledEmailCardContent, { children: _jsx(EmailComponent, { id: createUID(), timeStamp: '2021-01-05T09:12', from: mockEmails['Laura Stevens'], cc: [mockEmails['Adam Gillchrist'], mockEmails['John Paul']], bcc: [mockEmails['Anton, Randy'], mockEmails['Hugh Phillips']], to: [mockEmails['Sara Davis'], mockEmails['John Brown'], mockEmails['Joe Stevens']], body: '<div>Hi,<br/><p>I am one of the customer of Indian Overseas Bank, <b><i>Nagercoil</i></b> branch, with code <b><a href="www.google.com"><i>3967</i></a></b>. I have a saving bank account here. My account number is <i>6785420965476</i>.</p><br/><p>I have been given a debit cum ATM card from this bank and the same has been lost when I was traveling from Nagercoil to Trichy by Bus on Jan 04, 2021. I remember that my ATM card number was 1920 6746 8653 1256.</p><br/>I hereby request you to block my debit card immediately to prevent misuse of the same by some others. Also I request you to give me an new debit card as early as possible.<br/><br/>Regards,<br/>Laura Stevens</div>', forwardedContent: args.forwardedContent, entityHighlightMapping: args.enableEntityHighlighting ? highlightedEntitiesMock : undefined, subject: 'I lost my debit card', onReply: action('On reply'), onReplyAll: action('On reply all'), onForward: action('On forward'), onSuggestionClick: action('On Suggested reply clicked'), sentiment: {
-                    variant: 'neutral'
-                }, actions: emailActions, suggestions: mockSuggestedReplies, contextMenu: args.enableContextMenu
+    useEffect(() => {
+        return () => {
+            if (timeout.current) {
+                window.clearTimeout(timeout.current);
+            }
+        };
+    }, []);
+    return (_jsx(Card, { children: _jsx(StyledEmailCardContent, { children: _jsx(EmailComponent, { id: createUID(), timeStamp: '2021-01-05T09:12', from: mockEmails['Laura Stevens'], cc: [mockEmails['Adam Gillchrist'], mockEmails['John Paul']], bcc: [mockEmails['Anton, Randy'], mockEmails['Hugh Phillips']], to: [mockEmails['Sara Davis'], mockEmails['John Brown'], mockEmails['Joe Stevens']], body: '<div>Hi,<br/><p>I am one of the customer of Indian Overseas Bank, <b><i>Nagercoil</i></b> branch, with code <b><a href="www.google.com"><i>3967</i></a></b>. I have a saving bank account here. My account number is <i>6785420965476</i>.</p><br/><p>I have been given a debit cum ATM card from this bank and the same has been lost when I was traveling from Nagercoil to Trichy by Bus on Jan 04, 2021. I remember that my ATM card number was 1920 6746 8653 1256.</p><br/>I hereby request you to block my debit card immediately to prevent misuse of the same by some others. Also I request you to give me an new debit card as early as possible.<br/><br/>Regards,<br/>Laura Stevens</div>', forwardedContent: args.forwardedContent, entityHighlightMapping: args.enableEntityHighlighting ? highlightedEntitiesMock : undefined, subject: 'I lost my debit card', banner: args.showEmailBanner
                     ? {
-                        onItemClick: action('onItemClick'),
-                        onContextMenu: handleRightClick,
-                        handle: emailImperativeHandle
+                        id: 'banner_1',
+                        heading: 'Address not found ',
+                        messages: [
+                            '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, attachments: [
+                    : 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'
+                }, status: args.showDraft ? 'draft' : undefined, suggestions: mockSuggestedReplies, contextMenu: {
+                    onItemClick: (selectedValue) => {
+                        action('onItemClick')(selectedValue);
+                        contextMenuHandle.current?.setOpen(false);
+                    },
+                    onContextMenu: handleRightClick,
+                    handle: contextMenuHandle
+                }, attachments: [
                     {
                         id: 'attachment_0',
                         value: 'https://pega.com/media/document.doc',
@@ -56,12 +84,16 @@ Email.args = {
     enableEntityHighlighting: false,
     enableContextMenu: false,
     // eslint-disable-next-line demo-patterns/literal-args
-    forwardedContent
+    forwardedContent,
+    showEmailBanner: false,
+    showDraft: false
 };
 Email.argTypes = {
     enableEntityHighlighting: { control: { type: 'boolean' } },
     enableContextMenu: { control: { type: 'boolean' } },
-    forwardedContent: { control: { type: 'text' } }
+    forwardedContent: { control: { type: 'text' } },
+    showEmailBanner: { control: { type: 'boolean' } },
+    showDraft: { control: { type: 'boolean' } }
 };
 //   ______   ______   .___  ___. .______     ______        _______. _______ .______
 //  /      | /  __  \  |   \/   | |   _  \   /  __  \      /       ||   ____||   _  \
@@ -243,7 +275,6 @@ export const Conversation = () => {
             onReply: action('On reply'),
             onForward: action('On forward'),
             onSuggestionClick: action('On Suggested reply clicked'),
-            actions: emailActions,
             suggestions: mockSuggestedReplies
         },
         {
@@ -256,8 +287,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 }));
@@ -392,7 +422,7 @@ export const EmailShellDemo = (args) => {
     };
     const MyModal = ({ currentID }) => {
         const { dismiss } = useModalContext();
-        return (_jsx(Modal, { heading: 'Discard unsaved changes?', actions: _jsxs(_Fragment, { children: [_jsxs(Flex, { children: [_jsx(Button, { onClick: () => {
+        return (_jsx(Modal, { heading: 'Discard unsaved changes?', actions: _jsxs(_Fragment, { children: [_jsx(Button, { onClick: dismiss, children: "Go back" }), _jsxs(Flex, { children: [_jsx(Button, { onClick: () => {
                                     dismiss();
                                     setComposersData(prev => {
                                         return {
@@ -411,16 +441,14 @@ export const EmailShellDemo = (args) => {
                                         });
                                         push({ content: 'Draft Saved' });
                                     }, 1000);
-                                }, children: "Save as draft" }), _jsx(Button, { onClick: () => {
+                                }, children: "Save & close" }), _jsx(Button, { variant: 'primary', onClick: () => {
                                     dismiss();
                                     setComposersData(prev => {
                                         const newComposersData = { ...prev };
                                         delete newComposersData[currentID];
                                         return newComposersData;
                                     });
-                                }, children: "Discard" })] }), _jsx(Button, { variant: 'primary', onClick: () => {
-                            dismiss();
-                        }, children: "Cancel" })] }), center: true, children: _jsx(Text, { variant: 'primary', children: "You have unsaved changes. You can discard them or go back to keep working." }) }));
+                                }, children: "Discard" })] })] }), children: _jsx(Text, { variant: 'primary', children: "You have unsaved changes. You can discard them or go back to keep working." }) }));
     };
     const handleCancel = (uid) => {
         create(MyModal, { currentID: uid }, { alert: true });
@@ -579,27 +607,64 @@ export const EmailShellDemo = (args) => {
                 }
         };
     });
+    const DeleteDraft = ({ currentID }) => {
+        const { dismiss } = useModalContext();
+        return (_jsx(Modal, { heading: 'Delete draft?', actions: _jsxs(_Fragment, { children: [_jsx(Button, { onClick: dismiss, children: "Go back" }), _jsx(Button, { variant: 'primary', onClick: () => {
+                            dismiss();
+                            setConversationEmails(prev => {
+                                const newEmailConversation = [];
+                                prev.forEach(arr => {
+                                    const newArr = arr.filter(index => index.id !== currentID);
+                                    if (newArr.length !== 0)
+                                        newEmailConversation.push(newArr);
+                                });
+                                return newEmailConversation;
+                            });
+                        }, children: "Delete" })] }), children: _jsx(Text, { children: "Are you sure that you want to permanently delete the selected message?" }) }));
+    };
     const deleteEmail = (id) => {
-        setConversationEmails(prev => {
-            const newEmailConversation = [];
-            prev.forEach(arr => {
-                const newArr = arr.filter(index => index.id !== id);
-                if (newArr.length !== 0)
-                    newEmailConversation.push(newArr);
-            });
-            return newEmailConversation;
-        });
+        create(DeleteDraft, { currentID: id }, { alert: true });
     };
     useEffect(() => {
         setConversationEmails([
-            [{ ...emailsData[0] }, { ...emailsData[1], status: 'undelivered' }],
+            [
+                {
+                    ...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>',
+                    banner: {
+                        id: 'banner_1',
+                        heading: 'Address not found ',
+                        messages: [
+                            '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'
+                        ]
+                    },
+                    onReply: undefined,
+                    onForward: undefined
+                },
+                { ...emailsData[1], unRead: false }
+            ],
             [
                 {
                     ...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],
@@ -611,7 +676,19 @@ export const EmailShellDemo = (args) => {
                     ...emailsData[1],
                     id: 'item3',
                     status: 'draft',
-                    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),
+                    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,
                     timeStamp: '2021-01-02T14:16',
                     from: mockEmails['Mystery Rey'],
@@ -646,8 +723,8 @@ export const EmailShellDemo = (args) => {
     }, []);
     const emailConversations = conversationEmails.map((emails, i) => {
         return {
-            from: generateEmailConversationParticipants(emails, ['from'])[0],
-            to: emails[0].to,
+            from: i === 0 ? emails[1].from : generateEmailConversationParticipants(emails, ['from'])[0],
+            to: i === 0 ? emails[1].to : emails[0].to,
             id: `item_${i}`,
             timeStamp: emails[0].timeStamp,
             unReadEmailCount: emails.filter(item => item.unRead).length,
@@ -665,54 +742,94 @@ export const EmailShellDemo = (args) => {
             to: generateEmailConversationParticipants(emailsData, ['to']),
             id: 'item_0',
             timeStamp: new Date(emailsData[0].timeStamp),
-            unReadEmailCount: emailsData.filter(item => item.unRead).length,
-            emails: [{ ...emailsData[0], status: 'undelivered' }, { ...emailsData[1] }]
+            unReadEmailCount: 1,
+            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>',
+                    banner: {
+                        id: 'banner_1',
+                        heading: 'Address not found ',
+                        messages: [
+                            '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'
+                        ]
+                    },
+                    onReply: 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);
     const timeout = useRef(null);
-    const imperativeHandle = useRef(null);
+    const contextMenuHandle = useRef(null);
     const headerProps = {
         icon: 'list-number',
         text: 'Entities'
     };
-    const handleRightClick = () => {
-        itemCounter.current += 1;
-        if (timeout.current) {
-            clearTimeout(timeout.current);
+    const handleRightClick = (e) => {
+        action('onContextMenu')(e);
+        if (contextMenuHandle.current && args.enableContextMenu) {
+            itemCounter.current += 1;
+            const { setItems, setOpen, setLoading } = contextMenuHandle.current;
+            // Deciding not to show browser context menu
+            // This should be synchronus
+            e.preventDefault();
+            // Now open the custom context menu using the handle and show loader
+            setLoading(true);
+            setItems([]);
+            setOpen(true);
+            if (timeout.current) {
+                window.clearTimeout(timeout.current);
+            }
+            timeout.current = window.setTimeout(() => {
+                setItems(contextMenuItemsMock);
+                // Hide the loader
+                setLoading(false);
+            }, 1000);
         }
-        timeout.current = window.setTimeout(() => {
-            imperativeHandle.current?.setContextMenuItems(contextMenuItemsMock);
-        }, 1000);
     };
-    return (_jsx(EntityList, { header: headerProps, content: EntityListMockData, contextMenu: args.enableContextMenu
-            ? {
-                onItemClick: action('onItemClick'),
-                onContextMenu: args.onContextMenu || handleRightClick,
-                handle: imperativeHandle
+    useEffect(() => {
+        return () => {
+            if (timeout.current) {
+                window.clearTimeout(timeout.current);
             }
-            : undefined }));
+        };
+    }, []);
+    return (_jsx(EntityList, { header: headerProps, content: EntityListMockData, contextMenu: {
+            onItemClick: action('onItemClick'),
+            onContextMenu: args.onContextMenu || handleRightClick,
+            handle: contextMenuHandle
+        } }));
 };
 EntityListDemo.args = {
     enableContextMenu: true
@@ -781,15 +898,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;
         });
@@ -813,31 +963,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'