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

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

@@ -1,31 +1,67 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // cSpell:words calibri Trichy Nagercoil
-import { useState, useRef, useContext, useCallback } from 'react';
+import { useState, useRef, useCallback, useEffect, createRef } from 'react';
 import { action } from '@storybook/addon-actions';
-import { Card, CardContent, createUID, MenuButton, Icon, registerIcon, Flex, Button, ModalManagerContext, menuHelpers, CardHeader, Text, SummaryList, Grid, FieldValueList, StyledLabel } 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 } from '@pega/cosmos-react-social';
-import { bccParticipants, ccParticipants, emailBodyContent, participants, toParticipants, emailAttachments, EntityListMockData, viewAnalysisEmailHeaderMock, topicListMock, emailActions, generateEmailConversationParticipants, templates, handleExternalEntry, emailDemoActions, launchEmailComposer, LaunchAction, baseComposerProps, sentiment, emailSummaryItems, mockEmails, mockSuggestedReplies, mockEmailBodyTemplates } from './Email.mocks';
-import { StyledEmailCardContent, StyledViewAnalysis } from './Email.styles';
+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, generateEmailConversationParticipants, templates, handleExternalEntry, emailDemoActions, LaunchAction, baseComposerProps, sentiment, emailSummaryItems, mockEmails, mockSuggestedReplies, mockEmailBodyTemplates, forwardedContent, getCompositeId, emptyFieldErrorMessage, fieldValidation, emailWorklistItemsMock, contextMenuItemsMock, highlightedEntitiesMock, mockUploadImage, mailDeliverySystemEmail, supportTeamEmail, bodyData } from './Email.mocks';
+import { StyledEmailCardContent } from './Email.styles';
 registerIcon(filterIcon);
 export default {
     title: 'Social/Email',
     component: EmailComponent
 };
-/*
-
-   _____                 _ _
-  | ____|_ __ ___   __ _(_) |
-  |  _| | '_ ` _ \ / _` | | |
-  | |___| | | | | | (_| | | |
-  |_____|_| |_| |_|\__,_|_|_|
-
-
-*/
 export const Email = (args) => {
-    return (_jsx(Card, { children: _jsx(StyledEmailCardContent, { children: _jsx(EmailComponent, { id: createUID(), timeStamp: '2022-02-24T09: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 Team, <br /> <br /> <div>Please find the below conversation & let us know the best fare (including taxes) per person.</div><br />Regards, <br /> Laura Stevens </div>', forwardedContent: args.forwardedContent, subject: 'Regarding flight booking', onReply: action('On reply'), onReplyAll: action('On reply all'), onForward: action('On forward'), onSuggestionClick: action('On Suggested reply clicked'), sentiment: {
-                    variant: 'positive'
-                }, actions: emailActions, suggestions: mockSuggestedReplies, attachments: [
+    const contextMenuHandle = useRef(null);
+    const timeout = useRef(null);
+    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);
+        }
+    };
+    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
+                    ? {
+                        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, 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',
@@ -45,149 +81,206 @@ export const Email = (args) => {
                 }) }) }) }));
 };
 Email.args = {
+    enableEntityHighlighting: false,
+    enableContextMenu: false,
     // eslint-disable-next-line demo-patterns/literal-args
-    forwardedContent: `
-  <div id="pega-email-message-forward" style="font-family:OpenSans,sans-serif; border-left: 1px solid #c4c4c4; padding-left: 8px;">
-     <div>
-        <p class="pega-email-forward-header" style="font-size:smaller;color:#90909D;">--------------------Forwarded message--------------------<br />From: Person, Example &lt;example.person@pega.com&gt; &nbsp;<br />Date: Feb 23, 2022 9:29:59 PM&nbsp;<br />Subject: Regarding flight booking &nbsp;<br />To: Laura, Stevens &lt;laurastevens@example.com&gt;<br />&nbsp;</p>
-     </div>
-     <div class="pega-email-forward-content">
-        <div class="WordSection1">
-           <p class="MsoNormal" style="margin:0cm;font-size:11pt;font-family:'calibri' , sans-serif"><span style="color:black">Hi,&nbsp; </span></p>
-           <p class="MsoNormal" style="margin:0cm;font-size:11pt;font-family:'calibri' , sans-serif"><span style="color:black">&nbsp;&nbsp; </span></p>
-           <p class="MsoNormal" style="margin:0cm;font-size:11pt;font-family:'calibri' , sans-serif"><span style="color:black">I need to book a flight from Hyderabad to Chennai.&nbsp; </span></p>
-           <p class="MsoNormal" style="margin:0cm;font-size:11pt;font-family:'calibri' , sans-serif"><span style="color:black">Please let me know the fare including taxes per each person. </span></p>
-           <p class="MsoNormal" style="margin:0cm;font-size:11pt;font-family:'calibri' , sans-serif"><span style="color:black">&nbsp;&nbsp; </span></p>
-           <p class="MsoNormal" style="margin:0cm;font-size:11pt;font-family:'calibri' , sans-serif"><span style="color:black">Thanks,&nbsp; </span></p>
-           <p class="MsoNormal" style="margin:0cm;font-size:11pt;font-family:'calibri' , sans-serif"><span style="color:black">Goutham </span></p>
-        </div>
-     </div>
-  </div>
-`
+    forwardedContent,
+    showEmailBanner: false,
+    showDraft: false
 };
 Email.argTypes = {
-    forwardedContent: { control: { type: 'text' } }
+    enableEntityHighlighting: { control: { type: 'boolean' } },
+    enableContextMenu: { control: { type: 'boolean' } },
+    forwardedContent: { control: { type: 'text' } },
+    showEmailBanner: { control: { type: 'boolean' } },
+    showDraft: { control: { type: 'boolean' } }
 };
-export const ViewAnalysis = () => {
-    const headerProps = {
-        icon: 'list-number',
-        text: 'Entities'
-    };
-    const itemsToRender = topicListMock.map(items => {
-        return {
-            ...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 })] }))
-        };
+export const Composer = (args) => {
+    const { enableResponseTypeToggle = true, enableSaveAsDraft = true } = args;
+    const [composerProgress, setComposerProgress] = useState(false);
+    const composerHandle = useRef(null);
+    const [data, setData] = useState({
+        to: { value: toParticipants },
+        cc: { value: [] },
+        bcc: { value: [] },
+        subject: { value: 'Request: Pause service' },
+        bodyContent: {
+            defaultValue: ''
+        },
+        responseType: 'reply',
+        selectedTemplateId: '',
+        attachments: emailAttachments,
+        bodyContentCurrentValue: ''
     });
-    return (_jsx(StyledViewAnalysis, { children: _jsxs(Grid, { container: { rowGap: 2 }, children: [_jsx(EntityList, { header: headerProps, content: EntityListMockData }), _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: itemsToRender, noItemsText: 'No items' })] }) }));
-};
-export const EmailEntities = (args) => {
-    const nestedEntities = ['Place: Nagercoil, Hyderabad', 'Location: Nagercoil'];
-    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>', entityHighlightMapping: args.enableEntityHighlighting
-                    ? [
-                        {
-                            value: '3967',
-                            type: 'system',
-                            name: 'BranchCode',
-                            variant: 0,
-                            description: 'Branch Code'
-                        },
-                        {
-                            value: 'Laura Stevens',
-                            type: 'system',
-                            name: 'Name',
-                            variant: 1,
-                            description: 'Name'
-                        },
-                        {
-                            value: 'Nagercoil',
-                            type: 'system',
-                            name: 'Location',
-                            variant: 2,
-                            description: nestedEntities
-                        },
-                        {
-                            value: 'Trichy',
-                            type: 'system',
-                            name: 'Location',
-                            variant: 2,
-                            description: 'Location'
-                        },
-                        {
-                            value: '6785420965476',
-                            type: 'system',
-                            name: 'AccountNumber',
-                            variant: 3,
-                            description: 'Account Number'
-                        },
-                        {
-                            value: '1920 6746 8653 1256',
-                            type: 'system',
-                            name: 'CardNumber',
-                            variant: 4,
-                            description: 'Card Number'
-                        },
-                        {
-                            value: 'Debit Card',
-                            type: 'system',
-                            name: 'CardType',
-                            variant: 5,
-                            description: 'Card Type'
-                        },
-                        {
-                            value: 'Jan 04, 2021',
-                            type: 'system',
-                            name: 'Date',
-                            variant: 6,
-                            description: 'Date'
-                        }
-                    ]
-                    : undefined, contextMenu: args.enableContextMenu
-                    ? {
-                        heading: 'Copy to',
-                        items: [
-                            {
-                                id: 'item_0',
-                                primary: 'Field 1',
-                                selected: false
-                            },
-                            {
-                                id: 'item_1',
-                                primary: 'Field 2',
-                                selected: true
-                            },
-                            {
-                                id: 'item_2',
-                                primary: 'Field 3',
-                                selected: true
-                            }
-                        ],
-                        onItemClick: action('On Copy')
+    const handleOnChange = (field, value) => {
+        if (field === 'bodyContent') {
+            setData(prev => ({
+                ...prev,
+                bodyContentCurrentValue: value
+            }));
+        }
+        else if (['responseType', 'attachments', 'selectedTemplateId'].includes(field)) {
+            setData(prev => ({
+                ...prev,
+                [field]: value
+            }));
+        }
+        else {
+            // Clearing error message as soon as value changes
+            setData(prev => {
+                return {
+                    ...prev,
+                    [field]: { error: undefined, value }
+                };
+            });
+        }
+        action('onChange')(field, value);
+    };
+    useEffect(() => {
+        if (data.responseType === 'reply') {
+            setData(prev => {
+                return {
+                    ...prev,
+                    to: {
+                        ...prev.to,
+                        value: [toParticipants[0]]
+                    },
+                    cc: {
+                        ...prev.cc,
+                        value: []
+                    },
+                    bcc: {
+                        ...prev.bcc,
+                        value: []
                     }
-                    : 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 }) }) }));
+                };
+            });
+        }
+        else if (data.responseType === 'replyAll') {
+            setData(prev => {
+                return {
+                    ...prev,
+                    to: {
+                        ...prev.to,
+                        value: toParticipants
+                    },
+                    cc: {
+                        ...prev.cc,
+                        value: ccParticipants
+                    },
+                    bcc: {
+                        ...prev.bcc,
+                        value: bccParticipants
+                    }
+                };
+            });
+        }
+        else if (data.responseType === 'forward') {
+            setData(prev => {
+                return {
+                    ...prev,
+                    to: {
+                        ...prev.to,
+                        value: []
+                    },
+                    cc: {
+                        ...prev.cc,
+                        value: []
+                    },
+                    bcc: {
+                        ...prev.bcc,
+                        value: []
+                    }
+                };
+            });
+        }
+    }, [data.responseType]);
+    const onTemplateChange = (id) => {
+        const selectedTemplate = mockEmailBodyTemplates.find(template => template.id === id);
+        // Simulating api call
+        setComposerProgress({ message: 'Loading template...' });
+        setTimeout(() => {
+            setComposerProgress(false);
+            composerHandle.current?.replaceBodyContent(selectedTemplate?.content || '');
+            // Brings the cursor to the beginning of the body.
+            composerHandle.current?.setCursorLocationToStart?.();
+        }, 1000);
+    };
+    useEffect(() => {
+        if (data.selectedTemplateId)
+            onTemplateChange(data.selectedTemplateId);
+    }, [data.selectedTemplateId]);
+    const handleOnSend = () => {
+        setData(prev => {
+            return {
+                ...prev,
+                to: {
+                    value: prev.to?.value || [],
+                    error: data?.to?.value.length === 0 ? emptyFieldErrorMessage : fieldValidation(data?.to?.value)
+                },
+                cc: {
+                    value: prev.cc?.value || [],
+                    error: data.cc === undefined ? undefined : fieldValidation(data.cc.value)
+                },
+                bcc: {
+                    value: prev.bcc?.value || [],
+                    error: data.bcc === undefined ? undefined : fieldValidation(data.bcc.value)
+                },
+                subject: {
+                    ...prev.subject,
+                    error: data.subject?.value === '' ? emptyFieldErrorMessage : undefined
+                },
+                bodyContent: {
+                    ...prev.bodyContent,
+                    error: data.bodyContentCurrentValue === '' ? emptyFieldErrorMessage : undefined
+                }
+            };
+        });
+    };
+    const onImageAdded = (image, id) => {
+        action('On Image added');
+        setComposerProgress({ message: 'Uploading image' });
+        // Simulate image upload
+        mockUploadImage(image)
+            .then(({ src, alt }) => {
+            composerHandle.current?.updateImage({ src, alt }, id);
+            setComposerProgress(false);
+        })
+            .catch(() => {
+            setComposerProgress(false);
+        });
+    };
+    useEffect(() => {
+        setTimeout(() => {
+            composerHandle.current?.replaceBodyContent(bodyData);
+            // Brings the cursor to the beginning of the body.
+            composerHandle.current?.setCursorLocationToStart?.();
+        }, 100);
+    }, []);
+    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 }));
 };
-EmailEntities.args = {
-    enableEntityHighlighting: true,
-    enableContextMenu: true
+Composer.args = {
+    enableResponseTypeToggle: true,
+    enableSaveAsDraft: true
 };
-EmailEntities.argTypes = {
-    enableEntityHighlighting: { control: { type: 'boolean' } },
-    enableContextMenu: { control: { type: 'boolean' } }
+Composer.argTypes = {
+    enableResponseTypeToggle: {
+        control: 'boolean'
+    },
+    enableSaveAsDraft: {
+        control: { type: 'boolean' }
+    }
 };
-/*
-
-   _____                 _ _    ____                                    _   _
-  | ____|_ __ ___   __ _(_) |  / ___|___  _ ____   _____ _ __ ___  __ _| |_(_) ___  _ __
-  |  _| | '_ ` _ \ / _` | | | | |   / _ \| '_ \ \ / / _ \ '__/ __|/ _` | __| |/ _ \| '_ \
-  | |___| | | | | | (_| | | | | |__| (_) | | | \ V /  __/ |  \__ \ (_| | |_| | (_) | | | |
-  |_____|_| |_| |_|\__,_|_|_|  \____\___/|_| |_|\_/ \___|_|  |___/\__,_|\__|_|\___/|_| |_|
-
-
-*/
-export const emailConversation = () => {
+//   ______   ______   .__   __. ____    ____  _______ .______          _______.     ___   .___________. __    ______   .__   __.
+//  /      | /  __  \  |  \ |  | \   \  /   / |   ____||   _  \        /       |    /   \  |           ||  |  /  __  \  |  \ |  |
+// |  ,----'|  |  |  | |   \|  |  \   \/   /  |  |__   |  |_)  |      |   (----`   /  ^  \ `---|  |----`|  | |  |  |  | |   \|  |
+// |  |     |  |  |  | |  . `  |   \      /   |   __|  |      /        \   \      /  /_\  \    |  |     |  | |  |  |  | |  . `  |
+// |  `----.|  `--'  | |  |\   |    \    /    |  |____ |  |\  \----.----)   |    /  _____  \   |  |     |  | |  `--'  | |  |\   |
+//  \______| \______/  |__| \__|     \__/     |_______|| _| `._____|_______/    /__/     \__\  |__|     |__|  \______/  |__| \__|
+export const Conversation = () => {
     const emailArr = [
         {
             id: 'item_0',
@@ -201,7 +294,6 @@ export const emailConversation = () => {
             onReply: action('On reply'),
             onForward: action('On forward'),
             onSuggestionClick: action('On Suggested reply clicked'),
-            actions: emailActions,
             suggestions: mockSuggestedReplies
         },
         {
@@ -214,71 +306,240 @@ export const emailConversation = () => {
             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 }));
 };
-/*
-
-   _____                 _ _    ____
-  | ____|_ __ ___   __ _(_) |  / ___|___  _ __ ___  _ __   ___  ___  ___ _ __
-  |  _| | '_ ` _ \ / _` | | | | |   / _ \| '_ ` _ \| '_ \ / _ \/ __|/ _ \ '__|
-  | |___| | | | | | (_| | | | | |__| (_) | | | | | | |_) | (_) \__ \  __/ |
-  |_____|_| |_| |_|\__,_|_|_|  \____\___/|_| |_| |_| .__/ \___/|___/\___|_|
-                                                   |_|
-
-*/
-export const EmailComposerDemo = () => {
-    const fileUploadInputRef = useRef(null);
-    const [composerProgress, setComposerProgress] = useState(false);
-    const [attachments, setAttachments] = useState(emailAttachments);
-    const onTemplateChange = id => {
-        const selectedTemplate = mockEmailBodyTemplates.find(template => template.id === id);
-        // Simulating api call
-        setComposerProgress({ message: 'Loading template...' });
-        return new Promise(resolve => {
-            setTimeout(() => {
-                setComposerProgress(false);
-                resolve(selectedTemplate?.content);
-            }, 1000);
-        });
-    };
-    return (_jsx(Card, { style: { width: '30rem' }, children: _jsxs(CardContent, { children: [_jsx(EmailComposer, { progress: composerProgress, onSend: action('On Send'), onCancel: action('On cancel'), externalValidator: handleExternalEntry, participants: participants, to: {
-                        reply: [participants[7].emailAddress],
-                        replyAll: toParticipants,
-                        forward: []
-                    }, cc: ccParticipants, bcc: bccParticipants, responseType: 'reply', subject: 'Request: Pause service', templates: templates, onTemplateChange: onTemplateChange, bodyContent: 'Hi, Hope you are doing well', onImageAdded: action('On Image added'), attachments: attachments.map(attachment => {
-                        return {
-                            ...attachment,
-                            onDelete: name => {
-                                setAttachments(prevAttachments => prevAttachments.filter(item => item.name !== name));
-                            }
-                        };
-                    }) }), _jsx("input", { ref: fileUploadInputRef, type: 'file', style: { display: 'none' }, onChange: (e) => {
-                        if (e.target.files) {
-                            setAttachments(prevAttachments => [
-                                ...prevAttachments,
-                                ...Array.from(e.target.files).map(file => {
-                                    return {
-                                        name: file.name
-                                    };
-                                })
-                            ]);
-                        }
-                    } })] }) }));
-};
-export const EmailDemo = (args) => {
+export const EmailShellDemo = (args) => {
+    const { create } = useModalManager();
+    const { push } = useToaster();
     const actions = ['Transfer', 'End conversation'].map(name => ({
         primary: name,
         id: name,
         onClick: action(`Clicked ${name}`)
     }));
-    const { create } = useContext(ModalManagerContext);
+    const [composersData, setComposersData] = useState({});
+    const [conversationEmails, setConversationEmails] = useState([]);
+    const handleResponseTypeChange = (uid, responseType) => {
+        if (responseType === 'reply') {
+            setComposersData(prev => {
+                return {
+                    ...prev,
+                    [uid]: {
+                        ...prev[uid],
+                        data: {
+                            ...prev[uid].data,
+                            to: {
+                                ...prev[uid].data.to,
+                                value: [toParticipants[0]]
+                            },
+                            cc: {
+                                ...prev[uid].data.cc,
+                                value: []
+                            },
+                            bcc: {
+                                ...prev[uid].data.bcc,
+                                value: []
+                            }
+                        }
+                    }
+                };
+            });
+        }
+        else if (responseType === 'replyAll') {
+            setComposersData(prev => {
+                return {
+                    ...prev,
+                    [uid]: {
+                        ...prev[uid],
+                        data: {
+                            ...prev[uid].data,
+                            to: {
+                                ...prev[uid].data.to,
+                                value: toParticipants
+                            },
+                            cc: {
+                                ...prev[uid].data.cc,
+                                value: ccParticipants
+                            },
+                            bcc: {
+                                ...prev[uid].data.bcc,
+                                value: bccParticipants
+                            }
+                        }
+                    }
+                };
+            });
+        }
+    };
+    const handleTemplateIdChange = (uid, templateId) => {
+        const selectedTemplate = mockEmailBodyTemplates.find(template => template.id === templateId);
+        setComposersData(prev => {
+            return {
+                ...prev,
+                [uid]: {
+                    ...prev[uid],
+                    progress: { message: 'Loading template...' }
+                }
+            };
+        });
+        // Simulating api call
+        setTimeout(() => {
+            setComposersData(prev => {
+                return {
+                    ...prev,
+                    [uid]: {
+                        ...prev[uid],
+                        progress: false
+                    }
+                };
+            });
+            let currentData = {};
+            setComposersData(prev => {
+                currentData = prev;
+                return prev;
+            });
+            if (currentData) {
+                currentData[uid]?.handle?.current?.replaceBodyContent(selectedTemplate?.content || '');
+            }
+        }, 1000);
+    };
+    const handleChange = (uid, field, value) => {
+        setComposersData(prevData => {
+            if (field === 'bodyContent') {
+                return {
+                    ...prevData,
+                    [uid]: {
+                        ...prevData[uid],
+                        bodyContentCurrentValue: value
+                    }
+                };
+            }
+            return {
+                ...prevData,
+                [uid]: {
+                    ...prevData[uid],
+                    data: {
+                        ...prevData[uid].data,
+                        [field]: ['responseType', 'attachments', 'selectedTemplateId'].includes(field)
+                            ? value
+                            : {
+                                error: undefined,
+                                value
+                            }
+                    }
+                }
+            };
+        });
+        if (field === 'responseType') {
+            handleResponseTypeChange(uid, value);
+        }
+        else if (field === 'selectedTemplateId') {
+            handleTemplateIdChange(uid, value);
+        }
+    };
+    const MyModal = ({ currentID }) => {
+        const { dismiss } = useModalContext();
+        return (_jsx(Modal, { heading: 'Discard unsaved changes?', actions: _jsxs(_Fragment, { children: [_jsx(Button, { onClick: dismiss, children: "Go back" }), _jsxs("div", { children: [_jsx(Button, { onClick: () => {
+                                    dismiss();
+                                    setComposersData(prev => {
+                                        return {
+                                            ...prev,
+                                            [currentID]: {
+                                                ...prev[currentID],
+                                                progress: true
+                                            }
+                                        };
+                                    });
+                                    setTimeout(() => {
+                                        setComposersData(prev => {
+                                            const newComposersData = { ...prev };
+                                            delete newComposersData[currentID];
+                                            return newComposersData;
+                                        });
+                                        push({ content: 'Draft Saved' });
+                                    }, 1000);
+                                }, children: "Save & close" }), _jsx(Button, { variant: 'primary', onClick: () => {
+                                    dismiss();
+                                    setComposersData(prev => {
+                                        const newComposersData = { ...prev };
+                                        delete newComposersData[currentID];
+                                        return newComposersData;
+                                    });
+                                }, 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 });
+    };
+    const handleSend = (uid) => {
+        action('Send')();
+        setComposersData(prev => {
+            return {
+                ...prev,
+                [uid]: {
+                    ...prev[uid],
+                    progress: true
+                }
+            };
+        });
+        setTimeout(() => {
+            setComposersData(prev => {
+                const newComposersData = { ...prev };
+                delete newComposersData[uid];
+                return newComposersData;
+            });
+            push({ content: 'Email Send' });
+        }, 1000);
+    };
+    const handleSave = (uid) => {
+        action('Save')();
+        setComposersData(prev => {
+            return {
+                ...prev,
+                [uid]: {
+                    ...prev[uid],
+                    progress: true
+                }
+            };
+        });
+        setTimeout(() => {
+            setComposersData(prev => {
+                const newComposersData = { ...prev };
+                delete newComposersData[uid];
+                return newComposersData;
+            });
+            push({ content: 'Draft Saved' });
+        }, 1000);
+    };
+    const createOrActivateComposer = (id, launchAction, composerProps) => {
+        const uid = getCompositeId(id, launchAction);
+        if (composersData[uid]) {
+            // Activate the existing composer
+            composersData[uid].handle?.current?.activate();
+        }
+        else {
+            // Create new composer
+            setComposersData(prev => {
+                const composerHandle = createRef();
+                return {
+                    ...prev,
+                    [uid]: {
+                        ...composerProps,
+                        bodyContentCurrentValue: composerProps.data.bodyContent.defaultValue,
+                        handle: composerHandle,
+                        onChange: (field, value) => handleChange(uid, field, value),
+                        onCancel: () => handleCancel(uid),
+                        onSend: () => handleSend(uid),
+                        onSave: () => handleSave(uid)
+                    }
+                };
+            });
+        }
+    };
     const emailsData = [
         {
-            id: 'item_0',
+            id: 'item0',
             timeStamp: '2021-01-05T09:12',
             from: participants[0],
             to: participants.slice(0, 2),
@@ -306,7 +567,7 @@ export const EmailDemo = (args) => {
             })
         },
         {
-            id: 'item_1',
+            id: 'item1',
             timeStamp: '2021-01-02T03:12',
             from: participants[3],
             to: participants.slice(2, 4),
@@ -315,35 +576,44 @@ export const EmailDemo = (args) => {
             subject: 'Pause service'
         }
     ].map(emailData => {
-        const emailActionItems = emailDemoActions(create, emailData.subject);
+        const emailActionItems = emailDemoActions(emailData.id, emailData.subject, createOrActivateComposer, false, emailData.body);
         return {
             ...emailData,
-            onReply: id => {
-                launchEmailComposer(id, LaunchAction.REPLY, {
+            onReply: (id) => {
+                createOrActivateComposer(id, LaunchAction.REPLY, {
                     ...baseComposerProps,
-                    externalValidator: handleExternalEntry,
-                    responseType: 'reply',
-                    subject: `Re-${emailData.subject}` || ''
-                }, create);
+                    data: {
+                        ...baseComposerProps.data,
+                        responseType: 'reply',
+                        subject: { value: `Re-${emailData.subject}` || '' }
+                    },
+                    externalValidator: handleExternalEntry
+                });
             },
             onForward: id => {
-                launchEmailComposer(id, LaunchAction.FORWARD, {
+                createOrActivateComposer(id, LaunchAction.FORWARD, {
                     ...baseComposerProps,
-                    externalValidator: handleExternalEntry,
-                    responseType: 'forward',
-                    subject: `Fw-${emailData.subject}` || ''
-                }, create);
+                    data: {
+                        ...baseComposerProps.data,
+                        responseType: 'forward',
+                        subject: { value: `Fw-${emailData.subject}` || '' }
+                    },
+                    externalValidator: handleExternalEntry
+                });
             },
             onSuggestionClick: (id, suggestionId) => {
                 const suggestion = emailData.suggestions?.find(item => item.id === suggestionId);
-                launchEmailComposer(id, LaunchAction.SUGGESTION, {
+                createOrActivateComposer(id, LaunchAction.SUGGESTION, {
                     ...baseComposerProps,
-                    externalValidator: handleExternalEntry,
-                    responseType: 'reply',
-                    subject: suggestion?.title || '',
-                    bodyContent: suggestion ? suggestion.content : '',
-                    defaultTemplateId: suggestion?.id
-                }, create);
+                    data: {
+                        ...baseComposerProps.data,
+                        responseType: 'reply',
+                        subject: { value: suggestion?.title || '' },
+                        bodyContent: { defaultValue: suggestion ? suggestion.content : '' },
+                        selectedTemplateId: suggestion?.id
+                    },
+                    externalValidator: handleExternalEntry
+                });
             },
             actions: emailActionItems,
             tags: args.hideSuggestions
@@ -356,59 +626,133 @@ export const EmailDemo = (args) => {
                 }
         };
     });
-    const emailConversations = [
-        [...emailsData],
-        [
-            {
-                ...emailsData[0],
-                timeStamp: '2021-01-03T17:15',
-                from: mockEmails['Hugh Phillips'],
-                to: [mockEmails['Mystery Rey'], ...emailsData[0].to],
-                cc: [mockEmails['Adam Gillchrist']],
-                bcc: [mockEmails['Anton, Randy'], mockEmails['Hugh Phillips']],
-                body: '<div>Hi, <br /> <br /><div>Sure, Our executive will come and check your connection in 24hrs. </div>  <br />Regards, <br />Hugh Phillips </div>'
-            },
-            {
-                ...emailsData[1],
-                unRead: false,
-                timeStamp: '2021-01-02T14:16',
-                from: mockEmails['Mystery Rey'],
-                to: [mockEmails['Hugh Phillips']],
-                body: '<div>Hi, <br /> <br /><div>Can you fix my internet connection. </div> <br /> <br />Regards, <br />Rey Mystery </div>'
-            }
-        ],
-        [
-            {
-                ...emailsData[0],
-                unRead: false,
-                timeStamp: '2020-12-05T18:18',
-                from: mockEmails['Laura Stevens'],
-                to: [mockEmails['Sara Davis']],
-                body: '<div>Hi, <br /> <br /><div>Sure, Our executive will call you shortly. </div> <br /> <br />Regards, <br />Laura Stevens </div>',
-                sentiment: {
-                    variant: 'positive'
+    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) => {
+        create(DeleteDraft, { currentID: id }, { alert: true });
+    };
+    useEffect(() => {
+        setConversationEmails([
+            [
+                {
+                    ...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,
+                    timeStamp: '2021-01-03T17:15',
+                    from: mockEmails['Hugh Phillips'],
+                    to: [mockEmails['Mystery Rey'], ...emailsData[0].to],
+                    cc: [mockEmails['Adam Gillchrist']],
+                    bcc: [mockEmails['Anton, Randy'], mockEmails['Hugh Phillips']],
+                    body: '<div>Hi, <br /> <br /><div>Sure, Our executive will come and check your connection in 24hrs. </div>  <br />Regards, <br />Hugh Phillips </div>'
+                },
+                {
+                    ...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,
+                    unRead: false,
+                    timeStamp: '2021-01-02T14:16',
+                    from: mockEmails['Mystery Rey'],
+                    to: [mockEmails['Hugh Phillips']],
+                    body: '<div>Hi, <br /> <br /><div>Can you fix my internet connection. </div> <br /> <br />Regards, <br />Rey Mystery </div>'
                 }
-            },
-            {
-                ...emailsData[1],
-                unRead: false,
-                timeStamp: '2021-01-04T08:30',
-                from: mockEmails['Sara Davis'],
-                to: [mockEmails['Laura Stevens']],
-                body: '<div>Hi, <br /> <br /><div>Can you show please explain your new mobile plans. </div> <br /> <br />Regards, <br />Sara Davis </div>'
-            }
-        ]
-    ].map((emails, i) => {
+            ],
+            [
+                {
+                    ...emailsData[0],
+                    id: 'item4',
+                    unRead: true,
+                    timeStamp: '2020-12-05T18:18',
+                    from: mockEmails['Laura Stevens'],
+                    to: [mockEmails['Sara Davis']],
+                    body: '<div>Hi, <br /> <br /><div>Sure, Our executive will call you shortly. </div> <br /> <br />Regards, <br />Laura Stevens </div>',
+                    sentiment: {
+                        variant: 'positive'
+                    }
+                },
+                {
+                    ...emailsData[1],
+                    id: 'item5',
+                    unRead: true,
+                    timeStamp: '2021-01-04T08:30',
+                    from: mockEmails['Sara Davis'],
+                    to: [mockEmails['Laura Stevens']],
+                    body: '<div>Hi, <br /> <br /><div>Can you show please explain your new mobile plans. </div> <br /> <br />Regards, <br />Sara Davis </div>'
+                }
+            ]
+        ]);
+    }, []);
+    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,
             emails,
             sentiment: emails[0].sentiment,
             isForwarded: i !== 2,
-            isCollapsed: i !== 0
+            isCollapsed: i !== 0,
+            drafts: i === 1,
+            undelivered: i === 0
         };
     });
     const singleEmailConversation = [
@@ -417,48 +761,103 @@ export const EmailDemo = (args) => {
             to: generateEmailConversationParticipants(emailsData, ['to']),
             id: 'item_0',
             timeStamp: new Date(emailsData[0].timeStamp),
-            unReadEmailCount: emailsData.filter(item => item.unRead).length,
-            emails: emailsData
+            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 (_jsx(EmailShell, { style: {
-            height: 'calc(100vh)',
-            width: '30rem',
-            margin: 'auto'
-        }, 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 }));
+    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);
+                }) })] }));
 };
-EmailDemo.args = {
+EmailShellDemo.args = {
     autoCollapse: true,
     hideSuggestions: false,
-    singleConversation: true
+    singleConversation: false,
+    showHeader: true
 };
-EmailDemo.argTypes = {
+EmailShellDemo.argTypes = {
     autoCollapse: { control: { type: 'boolean' } },
     hideSuggestions: { control: { type: 'boolean' } },
-    singleConversation: { control: { type: 'boolean' } }
+    singleConversation: { control: { type: 'boolean' } },
+    showHeader: { control: { type: 'boolean' } }
 };
-EmailDemo.parameters = {
-    layout: 'fullscreen'
+export const EntityListDemo = (args) => {
+    const itemCounter = useRef(3);
+    const timeout = useRef(null);
+    const contextMenuHandle = useRef(null);
+    const headerProps = {
+        icon: 'list-number',
+        text: 'Entities'
+    };
+    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);
+        }
+    };
+    useEffect(() => {
+        return () => {
+            if (timeout.current) {
+                window.clearTimeout(timeout.current);
+            }
+        };
+    }, []);
+    return (_jsx(EntityList, { header: headerProps, content: EntityListMockData, contextMenu: {
+            onItemClick: action('onItemClick'),
+            onContextMenu: args.onContextMenu || handleRightClick,
+            handle: contextMenuHandle
+        } }));
 };
-/*
-  ______                 _ _    _____                                              _____ _
- |  ____|               (_) |  / ____|                                            |_   _| |
- | |__   _ __ ___   __ _ _| | | (___  _   _ _ __ ___  _ __ ___   __ _ _ __ _   _    | | | |_ ___ _ __ ___
- |  __| | '_ ` _ \ / _` | | |  \___ \| | | | '_ ` _ \| '_ ` _ \ / _` | '__| | | |   | | | __/ _ \ '_ ` _ \
- | |____| | | | | | (_| | | |  ____) | |_| | | | | | | | | | | | (_| | |  | |_| |  _| |_| ||  __/ | | | | |
- |______|_| |_| |_|\__,_|_|_| |_____/ \__,_|_| |_| |_|_| |_| |_|\__,_|_|   \__, | |_____|\__\___|_| |_| |_|
-                                                                            __/ |
-                                                                           |___/
-*/
-export const EmailSummaryItemDemo = () => {
-    const [active, setActive] = useState(false);
-    return (_jsx(EmailSummaryItem, { style: { width: '25rem' }, id: createUID(), activeParticipants: [
+EntityListDemo.args = {
+    enableContextMenu: true
+};
+EntityListDemo.argTypes = {
+    enableContextMenu: { control: { type: 'boolean' } }
+};
+export const EmailSummaryItemDemo = (args) => {
+    return (_jsx(EmailSummaryItem, { id: createUID(), activeParticipants: [
             {
                 shortName: 'Robert',
                 fullName: 'Robert Downer',
@@ -469,52 +868,24 @@ export const EmailSummaryItemDemo = () => {
                 fullName: 'Nathan Swanson',
                 emailAddress: 'nathan.swanson@example.com'
             }
-        ], message: 'I have a quick question on traveling to India. How do I reach Hyderabad?', timeStamp: new Date(Date.UTC(new Date().getUTCFullYear(), new Date().getUTCMonth(), 24)), topic: 'Missing Luggage', sentiment: sentiment, urgency: 10, unreadEmailCount: active ? 0 : 8, active: active, onClick: () => {
-            setActive(true);
+        ], message: 'I have a quick question on traveling to India. How do I reach Hyderabad?', timeStamp: new Date(Date.UTC(new Date().getUTCFullYear(), new Date().getUTCMonth(), 24)), topic: 'Missing Luggage', sentiment: sentiment, urgency: 10, unreadEmailCount: args.unreadEmailCount, active: args.isActive, onSelect: (id) => {
+            action('onSelect')(id);
         } }));
 };
-/*
-  ______                 _ _    _____                                              _      _     _
- |  ____|               (_) |  / ____|                                            | |    (_)   | |
- | |__   _ __ ___   __ _ _| | | (___  _   _ _ __ ___  _ __ ___   __ _ _ __ _   _  | |     _ ___| |_
- |  __| | '_ ` _ \ / _` | | |  \___ \| | | | '_ ` _ \| '_ ` _ \ / _` | '__| | | | | |    | / __| __|
- | |____| | | | | | (_| | | |  ____) | |_| | | | | | | | | | | | (_| | |  | |_| | | |____| \__ \ |_
- |______|_| |_| |_|\__,_|_|_| |_____/ \__,_|_| |_| |_|_| |_| |_|\__,_|_|   \__, | |______|_|___/\__|
-                                                                            __/ |
-                                                                           |___/
-*/
-export const EmailSummaryListDemo = () => {
+EmailSummaryItemDemo.args = {
+    unreadEmailCount: 0,
+    isActive: false
+};
+EmailSummaryItemDemo.argTypes = {
+    unreadEmailCount: { control: { type: 'number' } },
+    isActive: { control: { type: 'boolean' } }
+};
+export const EmailSummaryListDemo = (args) => {
     const INITIAL_CHUNK_SIZE = 9;
     const APPEND_CHUNK_SIZE = 1;
-    const emailSummaryListRef = useRef(null);
     const [allEmailItems, setAllEmailItems] = useState(emailSummaryItems.slice(0, INITIAL_CHUNK_SIZE));
-    const [categories, setCategories] = useState([
-        {
-            id: 'item_0',
-            primary: 'Default worklist',
-            selected: false
-        },
-        {
-            id: 'item_1',
-            primary: 'Authors',
-            selected: false
-        },
-        {
-            id: 'item_2',
-            primary: 'Administrators',
-            selected: false
-        },
-        {
-            id: 'item_3',
-            primary: 'Managers',
-            selected: false
-        },
-        {
-            id: 'item_4',
-            primary: 'Users',
-            selected: false
-        }
-    ]);
+    const [categories, setCategories] = useState(emailWorklistItemsMock);
+    const [currentItemId, setCurrentItemId] = useState(emailSummaryItems[0].id);
     const handleItemClick = (id) => {
         const index = allEmailItems.findIndex(emailItem => {
             return emailItem.id === id;
@@ -522,6 +893,7 @@ export const EmailSummaryListDemo = () => {
         const newEmailItems = [...allEmailItems];
         newEmailItems.splice(index, 1, { ...allEmailItems[index], unreadEmailCount: 0 });
         setAllEmailItems(newEmailItems);
+        setCurrentItemId(id);
     };
     const onCategoryClick = (id) => {
         setCategories(cur => menuHelpers.toggleSelected(cur, id, 'single-select'));
@@ -544,9 +916,111 @@ export const EmailSummaryListDemo = () => {
             }, 1500);
         }
     }, [loading]);
-    return (_jsx(EmailSummaryList, { style: { height: '100vh', width: '25rem', margin: 'auto' }, ref: emailSummaryListRef, unreadEmailCount: 99, categories: categories, items: allEmailItems, onItemClick: handleItemClick, onCategoryClick: onCategoryClick, onLoadMore: hasMore ? loadMore : undefined, loading: loading, emptyMessage: 'No emails.' }));
+    return (_jsx(EmailSummaryList, { 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.', currentItemId: args.currentItemId || currentItemId }));
+};
+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 [emailList, setEmailList] = useState(emailSummaryItems.slice(0, INITIAL_CHUNK_SIZE));
+    const [loading, setLoading] = useState(false);
+    const [hasMore, setHasMore] = useState(true);
+    const handleEmailItemClick = (id) => {
+        const index = emailList.findIndex(emailItem => {
+            return emailItem.id === id;
+        });
+        const newEmailList = [...emailList];
+        newEmailList.splice(index, 1, { ...emailList[index], unreadEmailCount: 0 });
+        setEmailList(newEmailList);
+    };
+    const onLoadMore = useCallback(() => {
+        if (!loading) {
+            setLoading(true);
+            setTimeout(() => {
+                setLoading(false);
+                setEmailList(prevItems => {
+                    const previousItemsLength = prevItems.length;
+                    const newItems = emailSummaryItems.slice(previousItemsLength, previousItemsLength + APPEND_CHUNK_SIZE);
+                    if (newItems.length === 0) {
+                        setHasMore(false);
+                    }
+                    return [...prevItems, ...newItems];
+                });
+            }, 1500);
+        }
+    }, [loading]);
+    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' })] }));
+    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,
+    showEmptyView: false,
+    showHeader: true,
+    showCaseViewBanners: false,
+    showUtilities: true
+};
+EmailManagerAppShell.argTypes = {
+    enableContextMenu: { control: { type: 'boolean' } },
+    showEmptyView: { control: { type: 'boolean' } },
+    showHeader: { control: { type: 'boolean' } },
+    showCaseViewBanners: { control: { type: 'boolean' } },
+    showUtilities: { control: { type: 'boolean' } }
 };
-EmailSummaryListDemo.parameters = {
+EmailManagerAppShell.parameters = {
     layout: 'fullscreen'
 };
 //# sourceMappingURL=Email.stories.js.map