@pega/cosmos-react-demos 4.0.0-dev.2.0 → 4.0.0-dev.21.0

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

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-// cSpell:words calibri Trichy Nagercoil
+// 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, mockEmailBodyTemplates, forwardedContent, getCompositeId, emptyFieldErrorMessage, fieldValidation, emailWorklistItemsMock, contextMenuItemsMock, highlightedEntitiesMock, mockUploadImage, mailDeliverySystemEmail, supportTeamEmail, bodyData } from './Email.mocks';
+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 {
@@ -49,10 +49,11 @@ export const Email = (args) => {
                     ? args.entityHighlightMapping || highlightedEntitiesMock
                     : undefined, subject: args.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'
+                            {
+                                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: {
@@ -89,7 +90,6 @@ export const Email = (args) => {
 Email.args = {
     enableEntityHighlighting: false,
     enableContextMenu: false,
-    // eslint-disable-next-line demo-patterns/literal-args
     forwardedContent,
     showEmailBanner: false,
     showDraft: false
@@ -125,7 +125,7 @@ export const Composer = (args) => {
                 bodyContentCurrentValue: value
             }));
         }
-        else if (['responseType', 'attachments', 'selectedTemplateId'].includes(field)) {
+        if (['responseType', 'attachments', 'selectedTemplateId'].includes(field)) {
             setData(prev => ({
                 ...prev,
                 [field]: value
@@ -201,8 +201,8 @@ export const Composer = (args) => {
             });
         }
     }, [data.responseType]);
-    const onTemplateChange = (id) => {
-        const selectedTemplate = mockEmailBodyTemplates.find(template => template.id === id);
+    const onTemplateChange = (templateId) => {
+        const selectedTemplate = getTemplate(templateId);
         // Simulating api call
         setComposerProgress({ message: 'Loading template...' });
         setTimeout(() => {
@@ -256,17 +256,15 @@ export const Composer = (args) => {
             setComposerProgress(false);
         });
     };
-    useEffect(() => {
-        setTimeout(() => {
-            composerHandle.current?.replaceBodyContent(bodyData);
-            // Brings the cursor to the beginning of the body.
-            composerHandle.current?.setCursorLocationToStart?.();
-        }, 100);
-    }, []);
+    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 }));
+        }, templates: templates, onImageAdded: onImageAdded, onEditorInit: onEditorInit }));
 };
 Composer.args = {
     enableResponseTypeToggle: true,
@@ -280,6 +278,126 @@ Composer.argTypes = {
         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' }
+    }
+};
 //   ______   ______   .__   __. ____    ____  _______ .______          _______.     ___   .___________. __    ______   .__   __.
 //  /      | /  __  \  |  \ |  | \   \  /   / |   ____||   _  \        /       |    /   \  |           ||  |  /  __  \  |  \ |  |
 // |  ,----'|  |  |  | |   \|  |  \   \/   /  |  |__   |  |_)  |      |   (----`   /  ^  \ `---|  |----`|  | |  |  |  | |   \|  |
@@ -381,8 +499,8 @@ export const EmailShellDemo = (args) => {
             });
         }
     };
-    const handleTemplateIdChange = (uid, templateId) => {
-        const selectedTemplate = mockEmailBodyTemplates.find(template => template.id === templateId);
+    const handleTemplateChange = (uid, templateId) => {
+        const selectedTemplate = getTemplate(templateId);
         setComposersData(prev => {
             return {
                 ...prev,
@@ -415,7 +533,7 @@ export const EmailShellDemo = (args) => {
     };
     const handleChange = (uid, field, value) => {
         setComposersData(prevData => {
-            if (field === 'bodyContent') {
+            if (field === 'bodyContent' && typeof value === 'string') {
                 return {
                     ...prevData,
                     [uid]: {
@@ -440,11 +558,11 @@ export const EmailShellDemo = (args) => {
                 }
             };
         });
-        if (field === 'responseType') {
+        if (field === 'responseType' && typeof value === 'string') {
             handleResponseTypeChange(uid, value);
         }
-        else if (field === 'selectedTemplateId') {
-            handleTemplateIdChange(uid, value);
+        else if (field === 'selectedTemplateId' && typeof value === 'string') {
+            handleTemplateChange(uid, value);
         }
     };
     const MyModal = ({ currentID }) => {
@@ -618,7 +736,7 @@ export const EmailShellDemo = (args) => {
                         responseType: 'reply',
                         subject: { value: suggestion?.title || '' },
                         bodyContent: { defaultValue: suggestion ? suggestion.content : '' },
-                        selectedTemplateId: suggestion?.id
+                        selectedTemplateId: suggestionId
                     },
                     externalValidator: handleExternalEntry
                 });
@@ -662,10 +780,11 @@ export const EmailShellDemo = (args) => {
                     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'
+                            {
+                                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,
@@ -778,10 +897,11 @@ export const EmailShellDemo = (args) => {
                     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'
+                            {
+                                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,
@@ -942,11 +1062,11 @@ export const EmailCaseViewDemo = (args) => {
                     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
+                : 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 },
-                    { iconName: 'document-doc', count: 1 },
-                    { iconName: 'headline', count: 4 }
+                    { iconName: 'list-number', count: 7, name: 'Entities' },
+                    { iconName: 'document-doc', count: 1, name: 'Email header' },
+                    { iconName: 'headline', count: 4, name: 'Topics' }
                 ]
                 : undefined, defaultUtilitiesExpanded: true }) }));
 };
@@ -969,6 +1089,7 @@ export const EmailManagerAppShell = (args) => {
     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;
@@ -976,6 +1097,7 @@ export const EmailManagerAppShell = (args) => {
         const newEmailList = [...emailList];
         newEmailList.splice(index, 1, { ...emailList[index], unreadEmailCount: 0 });
         setEmailList(newEmailList);
+        setCurrentItemId(id);
     };
     const onLoadMore = useCallback(() => {
         if (!loading) {
@@ -1006,13 +1128,13 @@ export const EmailManagerAppShell = (args) => {
                     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: [
+                : undefined, list: _jsx(EmailSummaryListDemo, { onItemClick: handleEmailItemClick, items: emailList, onLoadMore: hasMore ? onLoadMore : undefined, loading: loading, currentItemId: currentItemId }), 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 },
-                        { iconName: 'document-doc', count: 1 },
-                        { iconName: 'headline', count: 4 }
+                        { iconName: 'list-number', count: 7, name: 'Entities' },
+                        { iconName: 'document-doc', count: 1, name: 'Email header' },
+                        { iconName: 'headline', count: 4, name: 'Topics' }
                     ]
                     : undefined, defaultUtilitiesExpanded: false })) }) }));
 };