@pega/cosmos-react-demos 3.0.0-dev.20.0 → 3.0.0-dev.21.2

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

@@ -1,11 +1,11 @@
-import { useState, useRef, useCallback, useEffect, createRef } from 'react';
+import { useState, useRef, useCallback, useEffect, createRef, useContext } from 'react';
 import { action } from '@storybook/addon-actions';
 import { useMemo } from '@storybook/addons';
-import { Card, CardContent, createUID, MenuButton, Icon, registerIcon, Flex, Button, menuHelpers, CardHeader, Text, SummaryList, Grid, FieldValueList, StyledLabel, EmptyState } from '@pega/cosmos-react-core';
+import { Card, CardContent, createUID, MenuButton, Icon, registerIcon, Flex, Button, menuHelpers, CardHeader, Text, SummaryList, Grid, FieldValueList, StyledLabel, EmptyState, Modal, ModalManagerContext, ToasterContext } from '@pega/cosmos-react-core';
 import * as filterIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/filter.icon';
 import { Email as EmailComponent, EmailConversation, EmailComposer, EmailShell, EmailSummaryItem, EmailSummaryList, EntityList, EmailManager } from '@pega/cosmos-react-social';
 import { AppShellDemo } from '../../core/AppShell/AppShell.stories';
-import { bccParticipants, ccParticipants, emailBodyContent, participants, toParticipants, emailAttachments, EntityListMockData, viewAnalysisEmailHeaderMock, topicListMock, emailActions, generateEmailConversationParticipants, templates, handleExternalEntry, emailDemoActions, LaunchAction, baseComposerProps, sentiment, emailSummaryItems, mockEmails, mockSuggestedReplies, mockEmailBodyTemplates, forwardedContent, getCompositeId, emptyFieldErrorMessage, fieldValidation, emailWorklistItemsMock, contextMenuItemsMock, highlightedEntitiesMock } from './Email.mocks';
+import { bccParticipants, ccParticipants, emailBodyContent, participants, toParticipants, emailAttachments, EntityListMockData, viewAnalysisEmailHeaderMock, topicListMock, emailActions, generateEmailConversationParticipants, templates, handleExternalEntry, emailDemoActions, LaunchAction, baseComposerProps, sentiment, emailSummaryItems, mockEmails, mockSuggestedReplies, mockEmailBodyTemplates, forwardedContent, getCompositeId, emptyFieldErrorMessage, fieldValidation, emailWorklistItemsMock, contextMenuItemsMock, highlightedEntitiesMock, mockUploadImage } from './Email.mocks';
 import { StyledEmailCardContent } from './Email.styles';
 registerIcon(filterIcon);
 export default {
@@ -182,7 +182,19 @@ export const Composer = () => {
             };
         });
     };
-    return (<EmailComposer handle={composerHandle} progress={composerProgress} onSend={handleOnSend} onCancel={action('On cancel')} externalValidator={handleExternalEntry} participants={participants} onChange={handleOnChange} data={data} templates={templates} onImageAdded={action('On Image added')}/>);
+    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);
+        });
+    };
+    return (<EmailComposer handle={composerHandle} progress={composerProgress} onSave={action('On save')} onSend={handleOnSend} onCancel={action('On cancel')} externalValidator={handleExternalEntry} participants={participants} onChange={handleOnChange} data={data} templates={templates} onImageAdded={onImageAdded}/>);
 };
 export const Conversation = () => {
     const emailArr = [
@@ -218,12 +230,15 @@ export const Conversation = () => {
     return (<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 EmailShellDemo = (args) => {
+    const { create } = useContext(ModalManagerContext);
+    const { push } = useContext(ToasterContext);
     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 => {
@@ -341,12 +356,58 @@ export const EmailShellDemo = (args) => {
             handleTemplateIdChange(uid, value);
         }
     };
+    const MyModal = ({ currentID }) => {
+        const { ModalContext } = useContext(ModalManagerContext);
+        const { dismiss } = useContext(ModalContext);
+        return (<Modal heading='Discard unsaved changes?' actions={<>
+            <Flex>
+              <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);
+                }}>
+                Save as draft
+              </Button>
+
+              <Button onClick={() => {
+                    dismiss();
+                    setComposersData(prev => {
+                        const newComposersData = { ...prev };
+                        delete newComposersData[currentID];
+                        return newComposersData;
+                    });
+                }}>
+                Discard
+              </Button>
+            </Flex>
+            <Button variant='primary' onClick={() => {
+                    dismiss();
+                }}>
+              Cancel
+            </Button>
+          </>} center>
+        <Text variant='primary'>
+          You have unsaved changes. You can discard them or go back to keep working.
+        </Text>
+      </Modal>);
+    };
     const handleCancel = (uid) => {
-        setComposersData(prev => {
-            const newComposersData = { ...prev };
-            delete newComposersData[uid];
-            return newComposersData;
-        });
+        create(MyModal, { currentID: uid }, { alert: true });
     };
     const handleSend = (uid) => {
         action('Send')();
@@ -355,38 +416,38 @@ export const EmailShellDemo = (args) => {
                 ...prev,
                 [uid]: {
                     ...prev[uid],
-                    data: {
-                        ...prev[uid].data,
-                        to: {
-                            value: prev[uid].data.to?.value || [],
-                            error: !prev[uid].data.to?.value.length
-                                ? emptyFieldErrorMessage
-                                : fieldValidation(prev[uid].data.to?.value)
-                        },
-                        cc: {
-                            value: prev[uid].data.cc?.value || [],
-                            error: !prev[uid].data.cc?.value.length
-                                ? undefined
-                                : fieldValidation(prev[uid].data.cc?.value)
-                        },
-                        bcc: {
-                            value: prev[uid].data.bcc?.value || [],
-                            error: !prev[uid].data.bcc?.value.length
-                                ? undefined
-                                : fieldValidation(prev[uid].data.bcc?.value)
-                        },
-                        subject: {
-                            value: prev[uid].data.subject.value || '',
-                            error: prev[uid].data.subject.value === '' ? emptyFieldErrorMessage : undefined
-                        },
-                        bodyContent: {
-                            defaultValue: prev[uid].data.bodyContent.defaultValue || '',
-                            error: prev[uid].bodyContentCurrentValue === '' ? emptyFieldErrorMessage : undefined
-                        }
-                    }
+                    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);
@@ -404,7 +465,8 @@ export const EmailShellDemo = (args) => {
                         handle: composerHandle,
                         onChange: (field, value) => handleChange(uid, field, value),
                         onCancel: () => handleCancel(uid),
-                        onSend: () => handleSend(uid)
+                        onSend: () => handleSend(uid),
+                        onSave: () => handleSave(uid)
                     }
                 };
             });
@@ -412,7 +474,7 @@ export const EmailShellDemo = (args) => {
     };
     const emailsData = [
         {
-            id: 'item_0',
+            id: 'item0',
             timeStamp: '2021-01-05T09:12',
             from: participants[0],
             to: participants.slice(0, 2),
@@ -440,7 +502,7 @@ export const EmailShellDemo = (args) => {
             })
         },
         {
-            id: 'item_1',
+            id: 'item1',
             timeStamp: '2021-01-02T03:12',
             from: participants[3],
             to: participants.slice(2, 4),
@@ -449,7 +511,7 @@ export const EmailShellDemo = (args) => {
             subject: 'Pause service'
         }
     ].map(emailData => {
-        const emailActionItems = emailDemoActions(emailData.id, emailData.subject, createOrActivateComposer);
+        const emailActionItems = emailDemoActions(emailData.id, emailData.subject, createOrActivateComposer, false, emailData.body);
         return {
             ...emailData,
             onReply: (id) => {
@@ -499,49 +561,72 @@ export const EmailShellDemo = (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 deleteEmail = (id) => {
+        setConversationEmails(prev => {
+            const newEmailConversation = [];
+            prev.forEach(arr => {
+                const newArr = arr.filter(index => index.id !== id);
+                if (newArr.length !== 0)
+                    newEmailConversation.push(newArr);
+            });
+            return newEmailConversation;
+        });
+    };
+    useEffect(() => {
+        setConversationEmails([
+            [{ ...emailsData[0] }, { ...emailsData[1], status: 'undelivered' }],
+            [
+                {
+                    ...emailsData[0],
+                    id: 'item2',
+                    status: 'draft',
+                    unRead: false,
+                    actions: emailDemoActions('item2', emailsData[0].subject, createOrActivateComposer, true, '<div>Hi, <br /> <br /><div>Sure, Our executive will come and check your connection in 24hrs. </div>  <br />Regards, <br />Hugh Phillips </div>', deleteEmail),
+                    timeStamp: '2021-01-03T17:15',
+                    from: mockEmails['Hugh Phillips'],
+                    to: [mockEmails['Mystery Rey'], ...emailsData[0].to],
+                    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',
+                    actions: emailDemoActions('item3', emailsData[0].subject, createOrActivateComposer, true, '<div>Hi, <br /> <br /><div>Can you fix my internet connection. </div> <br /> <br />Regards, <br />Rey Mystery </div>', deleteEmail),
+                    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,
@@ -551,7 +636,9 @@ export const EmailShellDemo = (args) => {
             emails,
             sentiment: emails[0].sentiment,
             isForwarded: i !== 2,
-            isCollapsed: i !== 0
+            isCollapsed: i !== 0,
+            drafts: i === 1,
+            undelivered: i === 0
         };
     });
     const singleEmailConversation = [
@@ -561,7 +648,7 @@ export const EmailShellDemo = (args) => {
             id: 'item_0',
             timeStamp: new Date(emailsData[0].timeStamp),
             unReadEmailCount: emailsData.filter(item => item.unRead).length,
-            emails: emailsData
+            emails: [{ ...emailsData[0], status: 'undelivered' }, { ...emailsData[1] }]
         }
     ];
     return (<>
@@ -719,7 +806,7 @@ export const EmailManagerAppShell = (args) => {
         }
     }, [loading]);
     const activeItemIndex = useMemo(() => emailList.findIndex(emailItem => emailItem.id === activeItemId), [activeItemId, emailList]);
-    const content = activeItemId === undefined ? (<EmptyState message='No item selected!'/>) : (<EmailShellDemo singleConversation={activeItemIndex % 2 === 0}/>);
+    const content = activeItemId === undefined ? (<EmptyState message='No item selected!'/>) : (<EmailShellDemo singleConversation={activeItemIndex % 2 !== 0}/>);
     const utilities = activeItemId === undefined ? null : (<Grid container={{ rowGap: 2 }}>
         <EntityListDemo onContextMenu={args.onContextMenu} enableContextMenu={args.enableContextMenu}/>
         <Card>