@pega/cosmos-react-demos 5.0.0-dev.4.7 → 5.0.0-dev.4.8

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

@@ -1,1167 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-// cspell:words calibri Trichy Nagercoil
-import { useState, useRef, useCallback, useEffect, createRef } from 'react';
-import { action } from '@storybook/addon-actions';
-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, 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, forwardedContent, getCompositeId, emptyFieldErrorMessage, fieldValidation, emailWorklistItemsMock, contextMenuItemsMock, highlightedEntitiesMock, mockUploadImage, mailDeliverySystemEmail, supportTeamEmail, bodyData, emailAccounts, getTemplate } from './Email.mocks';
-import { StyledEmailCardContent } from './Email.styles';
-registerIcon(filterIcon);
-export default {
-    title: 'Social/Email',
-    component: EmailComponent
-};
-export const Email = (args) => {
-    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: args.body ||
-                    '<div style="font-size: 0.95em;">Hi,<p>I am one of the customer of Indian Overseas Bank, <b><i>Nagercoil</i></b> branch, with code <b><a href="https://www.pega.com" target="_blank"><i>3967</i></a></b>. I have a saving bank account here. My account number is <i>6785420965476</i> with an account balance of ₹97,398.57.</p><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><p>I hereby request you to block my debit card immediately to prevent misuse of the same by some others. Also I request you to send me an new debit card to my address, 22-6-14/A(99M5+RR), Gandhi Road, Hyderabad,  as early as possible.<p><br/><p style="font-weight: bold; color: #0fa4ad">Regards,<br/>Laura Stevens</p><img style="width: 100px; margin-left: -8px;" loading="lazy" alt="Pega logo" src="https://www.pega.com/sites/default/files/media/images/2021-10/pega-logo-vertical-positive-rgb-01.png" /></div>', forwardedContent: args.forwardedContent, entityHighlightMapping: args.enableEntityHighlighting
-                    ? args.entityHighlightMapping || highlightedEntitiesMock
-                    : undefined, subject: args.subject || 'I lost my debit card', banner: args.showEmailBanner
-                    ? {
-                        messages: [
-                            {
-                                label: 'Address not found.',
-                                description: '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.onReply || (args.showDraft ? undefined : action('On reply')), onReplyAll: args.onReplyAll || (args.showDraft ? undefined : action('On reply all')), onForward: args.onForward || (args.showDraft ? undefined : action('On forward')), onEditDraft: args.onEditDraft || (args.showDraft ? action('On forward') : undefined), onDeleteDraft: args.onDeleteDraft || (args.showDraft ? action('On forward') : undefined), onSuggestionClick: args.onSuggestionClick || action('On Suggested reply clicked'), sentiment: {
-                    variant: 'neutral'
-                }, status: args.showDraft ? 'draft' : undefined, suggestions: mockSuggestedReplies, contextMenu: args.contextMenu ||
-                    (args.enableContextMenu
-                        ? {
-                            onItemClick: (selectedValue) => {
-                                action('onItemClick')(selectedValue);
-                                contextMenuHandle.current?.setOpen(false);
-                            },
-                            onContextMenu: handleRightClick,
-                            handle: contextMenuHandle
-                        }
-                        : undefined), attachments: [
-                    {
-                        id: 'attachment_0',
-                        value: 'https://pega.com/media/document.doc',
-                        displayText: 'Policy document'
-                    },
-                    {
-                        id: 'attachment_1',
-                        value: 'https://pbs.twimg.com/media/ENNN5PAXkAE-hag.jpg',
-                        displayText: 'E-Ticket'
-                    }
-                ].map(attachment => {
-                    return {
-                        ...attachment,
-                        onDownload: action('On attachment download'),
-                        onPreview: action('On attachment preview')
-                    };
-                }) }) }) }));
-};
-Email.args = {
-    enableEntityHighlighting: false,
-    enableContextMenu: false,
-    // eslint-disable-next-line demo-patterns/literal-args
-    forwardedContent,
-    showEmailBanner: false,
-    showDraft: false
-};
-Email.argTypes = {
-    enableEntityHighlighting: { control: { type: 'boolean' } },
-    enableContextMenu: { control: { type: 'boolean' } },
-    forwardedContent: { control: { type: 'text' } },
-    showEmailBanner: { control: { type: 'boolean' } },
-    showDraft: { control: { type: 'boolean' } }
-};
-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: ''
-    });
-    const handleOnChange = (field, value) => {
-        if (field === 'bodyContent') {
-            setData(prev => ({
-                ...prev,
-                bodyContentCurrentValue: value
-            }));
-        }
-        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: []
-                    }
-                };
-            });
-        }
-        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 = (templateId) => {
-        const selectedTemplate = getTemplate(templateId);
-        // 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);
-        });
-    };
-    const onEditorInit = () => {
-        composerHandle.current?.replaceBodyContent(bodyData);
-        // Brings the cursor to the beginning of the body.
-        composerHandle.current?.setCursorLocationToStart?.();
-    };
-    return (_jsx(EmailComposer, { handle: composerHandle, progress: composerProgress, onSave: args.onSave || (enableSaveAsDraft ? action('On save') : undefined), onSend: args.onSend || handleOnSend, onCancel: args.onCancel || action('On cancel'), externalValidator: handleExternalEntry, participants: participants, onChange: args.onChange || handleOnChange, data: args.data || {
-            ...data,
-            responseType: enableResponseTypeToggle ? data.responseType : undefined
-        }, templates: templates, onImageAdded: onImageAdded, onEditorInit: onEditorInit }));
-};
-Composer.args = {
-    enableResponseTypeToggle: true,
-    enableSaveAsDraft: true
-};
-Composer.argTypes = {
-    enableResponseTypeToggle: {
-        control: 'boolean'
-    },
-    enableSaveAsDraft: {
-        control: { type: 'boolean' }
-    }
-};
-export const OutboundEmail = (args) => {
-    const { enableResponseTypeToggle = true, enableSaveAsDraft = true } = args;
-    const [composerProgress, setComposerProgress] = useState(false);
-    const composerHandle = useRef(null);
-    const [data, setData] = useState({
-        to: { value: [] },
-        cc: { value: [] },
-        bcc: { value: [] },
-        subject: { value: '' },
-        selectedTemplateId: '',
-        bodyContent: {
-            defaultValue: ''
-        },
-        bodyContentCurrentValue: ''
-    });
-    const handleOnChange = (field, value) => {
-        if (field === 'bodyContent') {
-            setData(prev => ({
-                ...prev,
-                bodyContentCurrentValue: value
-            }));
-        }
-        else if (['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);
-    };
-    const onTemplateChange = (templateId) => {
-        const selectedTemplate = getTemplate(templateId);
-        // 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,
-                emailAccount: {
-                    value: prev.emailAccount?.value || '',
-                    error: data.emailAccount?.value ? undefined : emptyFieldErrorMessage
-                },
-                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);
-        });
-    };
-    const onEditorInit = () => {
-        composerHandle.current?.replaceBodyContent(bodyData);
-        // Brings the cursor to the beginning of the body.
-        composerHandle.current?.setCursorLocationToStart?.();
-    };
-    return (_jsx(EmailComposer, { handle: composerHandle, progress: composerProgress, onSave: args.onSave || (enableSaveAsDraft ? action('On save') : undefined), onSend: args.onSend || handleOnSend, onCancel: args.onCancel || action('On cancel'), externalValidator: handleExternalEntry, participants: participants, senderAccounts: emailAccounts, onChange: args.onChange || handleOnChange, data: args.data || {
-            ...data,
-            responseType: enableResponseTypeToggle ? data.responseType : undefined
-        }, templates: templates, onImageAdded: onImageAdded, onEditorInit: onEditorInit }));
-};
-OutboundEmail.args = {
-    enableResponseTypeToggle: false,
-    enableSaveAsDraft: false
-};
-OutboundEmail.argTypes = {
-    enableResponseTypeToggle: {
-        control: 'boolean'
-    },
-    enableSaveAsDraft: {
-        control: { type: 'boolean' }
-    }
-};
-//   ______   ______   .__   __. ____    ____  _______ .______          _______.     ___   .___________. __    ______   .__   __.
-//  /      | /  __  \  |  \ |  | \   \  /   / |   ____||   _  \        /       |    /   \  |           ||  |  /  __  \  |  \ |  |
-// |  ,----'|  |  |  | |   \|  |  \   \/   /  |  |__   |  |_)  |      |   (----`   /  ^  \ `---|  |----`|  | |  |  |  | |   \|  |
-// |  |     |  |  |  | |  . `  |   \      /   |   __|  |      /        \   \      /  /_\  \    |  |     |  | |  |  |  | |  . `  |
-// |  `----.|  `--'  | |  |\   |    \    /    |  |____ |  |\  \----.----)   |    /  _____  \   |  |     |  | |  `--'  | |  |\   |
-//  \______| \______/  |__| \__|     \__/     |_______|| _| `._____|_______/    /__/     \__\  |__|     |__|  \______/  |__| \__|
-export const Conversation = (args) => {
-    const emailArr = [
-        {
-            id: 'item_0',
-            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 /> <br /> <div>Sure.. Here is your E-Ticket !! </div> <br /><br /> Regards, <br /> Laura Stevens </div>',
-            unRead: true,
-            onReply: action('On reply'),
-            onForward: action('On forward'),
-            onSuggestionClick: action('On Suggested reply clicked'),
-            suggestions: mockSuggestedReplies
-        },
-        {
-            id: 'item_1',
-            timeStamp: '2021-01-02T03:12',
-            from: mockEmails['Sara Davis'],
-            cc: [mockEmails['Adam Gillchrist'], mockEmails['John Paul']],
-            bcc: [mockEmails['Anton, Randy'], mockEmails['Hugh Phillips']],
-            to: [mockEmails['Laura Stevens'], mockEmails['John Brown'], mockEmails['Joe Stevens']],
-            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')
-        }
-    ];
-    return (_jsx(EmailConversation, { participants: generateEmailConversationParticipants(emailArr), from: generateEmailConversationParticipants(emailArr, ['from'])[0], to: generateEmailConversationParticipants(emailArr, ['to']), id: createUID(), timeStamp: emailArr[0].timeStamp, unReadEmailCount: args.unReadEmailCount !== undefined
-            ? args.unReadEmailCount
-            : emailArr.filter(item => item.unRead).length, emails: args.emails || emailArr, isForwarded: args.isForwarded || false, isCollapsed: args.isCollapsed || false, undelivered: args.undelivered || false, drafts: args.drafts || false }));
-};
-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 [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 handleTemplateChange = (uid, templateId) => {
-        const selectedTemplate = getTemplate(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' && typeof value === 'string') {
-                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' && typeof value === 'string') {
-            handleResponseTypeChange(uid, value);
-        }
-        else if (field === 'selectedTemplateId' && typeof value === 'string') {
-            handleTemplateChange(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: 'item0',
-            timeStamp: '2021-01-05T09:12',
-            from: participants[0],
-            to: participants.slice(0, 2),
-            body: '<div>Hi, <br /> <br /><div>Your address change request is approved.</div> <br /> <br />Regards, <br />Laura Stevens </div>',
-            unRead: true,
-            subject: 'Pause service',
-            suggestions: args.hideSuggestions ? undefined : mockSuggestedReplies,
-            attachments: [
-                {
-                    id: 'item_1_0',
-                    value: 'https://pega.com/media/document.doc',
-                    displayText: 'Policy document'
-                },
-                {
-                    id: 'item_1_1',
-                    value: 'https://pbs.twimg.com/media/ENNN5PAXkAE-hag.jpg',
-                    displayText: 'E-Ticket'
-                }
-            ].map(attachment => {
-                return {
-                    ...attachment,
-                    onDownload: action('On attachment download'),
-                    onPreview: action('On attachment preview')
-                };
-            })
-        },
-        {
-            id: 'item1',
-            timeStamp: '2021-01-02T03:12',
-            from: participants[3],
-            to: participants.slice(2, 4),
-            body: emailBodyContent,
-            unRead: true,
-            subject: 'Pause service'
-        }
-    ].map(emailData => {
-        const emailActionItems = emailDemoActions(emailData.id, emailData.subject, createOrActivateComposer, false, emailData.body);
-        return {
-            ...emailData,
-            onReply: (id) => {
-                createOrActivateComposer(id, LaunchAction.REPLY, {
-                    ...baseComposerProps,
-                    data: {
-                        ...baseComposerProps.data,
-                        responseType: 'reply',
-                        subject: { value: `Re-${emailData.subject}` || '' }
-                    },
-                    externalValidator: handleExternalEntry
-                });
-            },
-            onForward: id => {
-                createOrActivateComposer(id, LaunchAction.FORWARD, {
-                    ...baseComposerProps,
-                    data: {
-                        ...baseComposerProps.data,
-                        responseType: 'forward',
-                        subject: { value: `Fw-${emailData.subject}` || '' }
-                    },
-                    externalValidator: handleExternalEntry
-                });
-            },
-            onSuggestionClick: (id, suggestionId) => {
-                const suggestion = emailData.suggestions?.find(item => item.id === suggestionId);
-                createOrActivateComposer(id, LaunchAction.SUGGESTION, {
-                    ...baseComposerProps,
-                    data: {
-                        ...baseComposerProps.data,
-                        responseType: 'reply',
-                        subject: { value: suggestion?.title || '' },
-                        bodyContent: { defaultValue: suggestion ? suggestion.content : '' },
-                        selectedTemplateId: suggestionId
-                    },
-                    externalValidator: handleExternalEntry
-                });
-            },
-            actions: emailActionItems,
-            tags: args.hideSuggestions
-                ? undefined
-                : {
-                    items: ['Pause service', 'Lost or stolen'],
-                    label: 'Associated service cases',
-                    onRemove: action('On Associated service case remove'),
-                    dismissable: true
-                }
-        };
-    });
-    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: {
-                        messages: [
-                            {
-                                label: 'Address not found.',
-                                description: '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[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: 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,
-            drafts: i === 1,
-            undelivered: i === 0
-        };
-    });
-    const singleEmailConversation = [
-        {
-            from: generateEmailConversationParticipants(emailsData, ['from'])[0],
-            to: generateEmailConversationParticipants(emailsData, ['to']),
-            id: 'item_0',
-            timeStamp: new Date(emailsData[0].timeStamp),
-            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: {
-                        messages: [
-                            {
-                                label: 'Address not found.',
-                                description: '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: args.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.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: false,
-    showHeader: true
-};
-EmailShellDemo.argTypes = {
-    autoCollapse: { control: { type: 'boolean' } },
-    hideSuggestions: { control: { type: 'boolean' } },
-    singleConversation: { control: { type: 'boolean' } },
-    showHeader: { control: { type: 'boolean' } }
-};
-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: args.content || EntityListMockData, contextMenu: {
-            onItemClick: action('onItemClick'),
-            onContextMenu: args.onContextMenu || handleRightClick,
-            handle: contextMenuHandle
-        } }));
-};
-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',
-                emailAddress: 'robert.downey@example.com'
-            },
-            {
-                shortName: 'Nathan',
-                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: args.unreadEmailCount, active: args.isActive, onSelect: (id) => {
-            action('onSelect')(id);
-        } }));
-};
-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 [allEmailItems, setAllEmailItems] = useState(emailSummaryItems.slice(0, INITIAL_CHUNK_SIZE));
-    const [categories, setCategories] = useState(emailWorklistItemsMock);
-    const [currentItemId, setCurrentItemId] = useState(emailSummaryItems[0].id);
-    const handleItemClick = (id) => {
-        const index = allEmailItems.findIndex(emailItem => {
-            return emailItem.id === id;
-        });
-        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'));
-    };
-    const [loading, setLoading] = useState(false);
-    const [hasMore, setHasMore] = useState(true);
-    const loadMore = useCallback(() => {
-        if (!loading) {
-            setLoading(true);
-            setTimeout(() => {
-                setLoading(false);
-                setAllEmailItems(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]);
-    return (_jsx(EmailSummaryList, { unreadEmailCount: 99, categories: categories, searchQuery: args.searchQuery, 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 }));
-};
-EmailSummaryListDemo.args = {
-    searchQuery: ''
-};
-EmailSummaryListDemo.argTypes = {
-    searchQuery: { control: { type: 'text' } }
-};
-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, { variant: 'urgent', 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, name: 'Entities' },
-                    { iconName: 'document-doc', count: 1, name: 'Email header' },
-                    { iconName: 'headline', count: 4, name: 'Topics' }
-                ]
-                : 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 [currentItemId, setCurrentItemId] = useState(emailSummaryItems[0].id);
-    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);
-        setCurrentItemId(id);
-    };
-    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, currentItemId: currentItemId, searchQuery: args.searchQuery }), emailCaseDetails: !args.showEmptyView && (_jsx(EmailCaseView, { banners: args.showCaseViewBanners && (_jsx(Banner, { variant: 'urgent', 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, name: 'Entities' },
-                        { iconName: 'document-doc', count: 1, name: 'Email header' },
-                        { iconName: 'headline', count: 4, name: 'Topics' }
-                    ]
-                    : undefined, defaultUtilitiesExpanded: false })) }) }));
-};
-EmailManagerAppShell.args = {
-    enableContextMenu: true,
-    showEmptyView: false,
-    showHeader: true,
-    showCaseViewBanners: false,
-    showUtilities: true,
-    searchQuery: ''
-};
-EmailManagerAppShell.argTypes = {
-    enableContextMenu: { control: { type: 'boolean' } },
-    showEmptyView: { control: { type: 'boolean' } },
-    showHeader: { control: { type: 'boolean' } },
-    showCaseViewBanners: { control: { type: 'boolean' } },
-    showUtilities: { control: { type: 'boolean' } },
-    searchQuery: { control: { type: 'text' } }
-};
-EmailManagerAppShell.parameters = {
-    layout: 'fullscreen'
-};
-//# sourceMappingURL=Email.stories.js.map