@pega/cosmos-react-demos 4.0.0-dev.1.1 → 4.0.0-dev.10.0

package/jsx/social/Email/Email.stories.jsx

@@ -4,7 +4,7 @@ import { Card, CardContent, createUID, MenuButton, Icon, registerIcon, Flex, But
 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 {
@@ -45,10 +45,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={{
@@ -122,7 +123,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
@@ -197,8 +198,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);
         setComposerProgress({ message: 'Loading template...' });
         setTimeout(() => {
             setComposerProgress(false);
@@ -272,6 +273,123 @@ 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 {
+            setData(prev => {
+                return {
+                    ...prev,
+                    [field]: { error: undefined, value }
+                };
+            });
+        }
+        action('onChange')(field, value);
+    };
+    const onTemplateChange = (templateId) => {
+        const selectedTemplate = getTemplate(templateId);
+        setComposerProgress({ message: 'Loading template...' });
+        setTimeout(() => {
+            setComposerProgress(false);
+            composerHandle.current?.replaceBodyContent(selectedTemplate?.content || '');
+            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' });
+        mockUploadImage(image)
+            .then(({ src, alt }) => {
+            composerHandle.current?.updateImage({ src, alt }, id);
+            setComposerProgress(false);
+        })
+            .catch(() => {
+            setComposerProgress(false);
+        });
+    };
+    useEffect(() => {
+        setTimeout(() => {
+            composerHandle.current?.replaceBodyContent(bodyData);
+            composerHandle.current?.setCursorLocationToStart?.();
+        }, 100);
+    }, []);
+    return (<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}/>);
+};
+OutboundEmail.args = {
+    enableResponseTypeToggle: false,
+    enableSaveAsDraft: false
+};
+OutboundEmail.argTypes = {
+    enableResponseTypeToggle: {
+        control: 'boolean'
+    },
+    enableSaveAsDraft: {
+        control: { type: 'boolean' }
+    }
+};
 export const Conversation = (args) => {
     const emailArr = [
         {
@@ -367,8 +485,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,
@@ -400,7 +518,7 @@ export const EmailShellDemo = (args) => {
     };
     const handleChange = (uid, field, value) => {
         setComposersData(prevData => {
-            if (field === 'bodyContent') {
+            if (field === 'bodyContent' && typeof value === 'string') {
                 return {
                     ...prevData,
                     [uid]: {
@@ -415,7 +533,7 @@ export const EmailShellDemo = (args) => {
                     ...prevData[uid],
                     data: {
                         ...prevData[uid].data,
-                        [field]: ['responseType', 'attachments', 'selectedTemplateId'].includes(field)
+                        [field]: ['responseType', 'attachments', 'selectedTemplate'].includes(field)
                             ? value
                             : {
                                 error: undefined,
@@ -425,11 +543,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 }) => {
@@ -615,7 +733,7 @@ export const EmailShellDemo = (args) => {
                         responseType: 'reply',
                         subject: { value: suggestion?.title || '' },
                         bodyContent: { defaultValue: suggestion ? suggestion.content : '' },
-                        selectedTemplateId: suggestion?.id
+                        selectedTemplateId: suggestionId
                     },
                     externalValidator: handleExternalEntry
                 });
@@ -667,10 +785,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,
@@ -783,10 +902,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,
@@ -966,7 +1086,7 @@ export const EmailCaseViewDemo = (args) => {
                     icon: 'mail',
                     title: 'ET-5432'
                 }
-                : undefined} banners={args.showBanners && (<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 && (<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 },
@@ -1043,7 +1163,7 @@ export const EmailManagerAppShell = (args) => {
                     icon: 'mail',
                     title: 'Inbox'
                 }
-                : undefined} list={<EmailSummaryListDemo onItemClick={handleEmailItemClick} items={emailList} onLoadMore={hasMore ? onLoadMore : undefined} loading={loading}/>} emailCaseDetails={!args.showEmptyView && (<EmailCaseView banners={args.showCaseViewBanners && (<Banner id='error' variant='urgent' heading='Error' messages={[
+                : undefined} list={<EmailSummaryListDemo onItemClick={handleEmailItemClick} items={emailList} onLoadMore={hasMore ? onLoadMore : undefined} loading={loading}/>} emailCaseDetails={!args.showEmptyView && (<EmailCaseView banners={args.showCaseViewBanners && (<Banner variant='urgent' messages={[
                         'Your email could not be delivered due to poor network connection.'
                     ]}/>)} content={content} utilities={args.showUtilities && utilities} utilitiesSummaryItems={args.showUtilities
                     ? [