@pega/cosmos-react-demos 3.0.0-dev.26.0 → 3.0.0-dev.27.2

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

@@ -1,11 +1,10 @@
 import { useState, useRef, useCallback, useEffect, createRef } 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, Modal, useModalManager, useModalContext, useToaster } from '@pega/cosmos-react-core';
+import { Card, CardContent, createUID, MenuButton, Icon, registerIcon, Flex, Button, menuHelpers, CardHeader, Text, SummaryList, Grid, FieldValueList, StyledLabel, Modal, useModalManager, useModalContext, useToaster, Banner } from '@pega/cosmos-react-core';
 import * as filterIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/filter.icon';
-import { Email as EmailComponent, EmailConversation, EmailComposer, EmailShell, EmailSummaryItem, EmailSummaryList, EntityList, EmailManager } from '@pega/cosmos-react-social';
+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, emailActions, generateEmailConversationParticipants, templates, handleExternalEntry, emailDemoActions, LaunchAction, baseComposerProps, sentiment, emailSummaryItems, mockEmails, mockSuggestedReplies, mockEmailBodyTemplates, forwardedContent, getCompositeId, emptyFieldErrorMessage, fieldValidation, emailWorklistItemsMock, contextMenuItemsMock, highlightedEntitiesMock, mockUploadImage, mailDeliverySystemEmail, supportTeamEmail } from './Email.mocks';
+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 } from './Email.mocks';
 import { StyledEmailCardContent } from './Email.styles';
 registerIcon(filterIcon);
 export default {
@@ -49,9 +48,9 @@ export const Email = (args) => {
                     '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={action('On reply')} onReplyAll={action('On reply all')} onForward={action('On forward')} onSuggestionClick={action('On Suggested reply clicked')} sentiment={{
+            : undefined} onReply={args.showDraft ? undefined : action('On reply')} onReplyAll={args.showDraft ? undefined : action('On reply all')} onForward={args.showDraft ? undefined : action('On forward')} onEditDraft={args.showDraft ? action('On forward') : undefined} onDeleteDraft={args.showDraft ? action('On forward') : undefined} onSuggestionClick={action('On Suggested reply clicked')} sentiment={{
             variant: 'neutral'
-        }} actions={emailActions} suggestions={mockSuggestedReplies} contextMenu={{
+        }} status={args.showDraft ? 'draft' : undefined} suggestions={mockSuggestedReplies} contextMenu={{
             onItemClick: (selectedValue) => {
                 action('onItemClick')(selectedValue);
                 contextMenuHandle.current?.setOpen(false);
@@ -83,15 +82,18 @@ Email.args = {
     enableEntityHighlighting: false,
     enableContextMenu: false,
     forwardedContent,
-    showEmailBanner: false
+    showEmailBanner: false,
+    showDraft: false
 };
 Email.argTypes = {
     enableEntityHighlighting: { control: { type: 'boolean' } },
     enableContextMenu: { control: { type: 'boolean' } },
     forwardedContent: { control: { type: 'text' } },
-    showEmailBanner: { control: { type: 'boolean' } }
+    showEmailBanner: { control: { type: 'boolean' } },
+    showDraft: { control: { type: 'boolean' } }
 };
-export const Composer = () => {
+export const Composer = (args) => {
+    const { enableResponseTypeToggle = true, enableSaveAsDraft = true } = args;
     const [composerProgress, setComposerProgress] = useState(false);
     const composerHandle = useRef(null);
     const [data, setData] = useState({
@@ -240,7 +242,22 @@ export const Composer = () => {
             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}/>);
+    return (<EmailComposer handle={composerHandle} progress={composerProgress} onSave={enableSaveAsDraft ? action('On save') : undefined} onSend={handleOnSend} onCancel={action('On cancel')} externalValidator={handleExternalEntry} participants={participants} onChange={handleOnChange} data={{
+            ...data,
+            responseType: enableResponseTypeToggle ? data.responseType : undefined
+        }} templates={templates} onImageAdded={onImageAdded}/>);
+};
+Composer.args = {
+    enableResponseTypeToggle: true,
+    enableSaveAsDraft: true
+};
+Composer.argTypes = {
+    enableResponseTypeToggle: {
+        control: 'boolean'
+    },
+    enableSaveAsDraft: {
+        control: { type: 'boolean' }
+    }
 };
 export const Conversation = () => {
     const emailArr = [
@@ -256,7 +273,6 @@ export const Conversation = () => {
             onReply: action('On reply'),
             onForward: action('On forward'),
             onSuggestionClick: action('On Suggested reply clicked'),
-            actions: emailActions,
             suggestions: mockSuggestedReplies
         },
         {
@@ -269,8 +285,7 @@ export const Conversation = () => {
             body: '<div> Hi, <br /> <br /> <div>I’m still at the airport, I need help now!! </div> <br /><br /> Regards, <br /> Sara Davis </div>',
             onReply: action('On reply'),
             onForward: action('On forward'),
-            onSuggestionClick: action('On Suggested reply clicked'),
-            actions: emailActions
+            onSuggestionClick: action('On Suggested reply clicked')
         }
     ];
     return (<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}/>);
@@ -632,6 +647,7 @@ export const EmailShellDemo = (args) => {
             [
                 {
                     ...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>',
@@ -643,8 +659,7 @@ export const EmailShellDemo = (args) => {
                         ]
                     },
                     onReply: undefined,
-                    onForward: undefined,
-                    actions: undefined
+                    onForward: undefined
                 },
                 { ...emailsData[1], unRead: false }
             ],
@@ -653,11 +668,20 @@ export const EmailShellDemo = (args) => {
                     ...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,
-                    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],
@@ -669,10 +693,19 @@ export const EmailShellDemo = (args) => {
                     ...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,
-                    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'],
@@ -730,6 +763,7 @@ export const EmailShellDemo = (args) => {
             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>',
@@ -741,26 +775,27 @@ export const EmailShellDemo = (args) => {
                         ]
                     },
                     onReply: undefined,
-                    onForward: undefined,
-                    actions: undefined
+                    onForward: undefined
                 },
                 { ...emailsData[1], unRead: false }
             ]
         }
     ];
     return (<>
-      <EmailShell headerProps={{
-            actions: (<Flex container={{
-                    alignItems: 'center',
-                    gap: 0
-                }}>
-              <Button variant='simple' icon>
-                <Icon name='filter'/>
-              </Button>
-              <MenuButton variant='simple' text='More actions' icon='more' iconOnly portal menu={{ items: actions }}/>
-            </Flex>),
-            subject: 'Pause service'
-        }} autoCollapse={args.autoCollapse} conversations={args.singleConversation ? singleEmailConversation : emailConversations}/>
+      <EmailShell headerProps={args.showHeader
+            ? {
+                actions: (<Flex container={{
+                        alignItems: 'center',
+                        gap: 0
+                    }}>
+                    <Button variant='simple' icon>
+                      <Icon name='filter'/>
+                    </Button>
+                    <MenuButton variant='simple' text='More actions' icon='more' iconOnly portal menu={{ items: actions }}/>
+                  </Flex>),
+                subject: 'Pause service'
+            }
+            : undefined} autoCollapse={args.autoCollapse} conversations={args.singleConversation ? singleEmailConversation : emailConversations}/>
       <>
         {Object.keys(composersData).map(guid => {
             return <EmailComposer key={guid} {...composersData[guid]}/>;
@@ -771,12 +806,14 @@ export const EmailShellDemo = (args) => {
 EmailShellDemo.args = {
     autoCollapse: true,
     hideSuggestions: false,
-    singleConversation: true
+    singleConversation: false,
+    showHeader: true
 };
 EmailShellDemo.argTypes = {
     autoCollapse: { control: { type: 'boolean' } },
     hideSuggestions: { control: { type: 'boolean' } },
-    singleConversation: { control: { type: 'boolean' } }
+    singleConversation: { control: { type: 'boolean' } },
+    showHeader: { control: { type: 'boolean' } }
 };
 export const EntityListDemo = (args) => {
     const itemCounter = useRef(3);
@@ -884,15 +921,61 @@ export const EmailSummaryListDemo = (args) => {
     }, [loading]);
     return (<EmailSummaryList ref={emailSummaryListRef} unreadEmailCount={99} categories={categories} items={args.items || allEmailItems} onItemClick={args.onItemClick || handleItemClick} onCategoryClick={onCategoryClick} onLoadMore={args.onLoadMore || (hasMore ? loadMore : undefined)} loading={args.loading || loading} emptyMessage='No emails.'/>);
 };
+export const EmailCaseViewDemo = (args) => {
+    const content = <EmailShellDemo />;
+    const utilities = (<Grid container={{ rowGap: 2 }}>
+      <EntityListDemo />
+      <Card>
+        <CardHeader container={{ alignItems: 'center', gap: 1 }}>
+          <Icon name='document-doc'/>
+          <Text variant='h3'>Email header</Text>
+        </CardHeader>
+        <CardContent>
+          <FieldValueList fields={viewAnalysisEmailHeaderMock} variant='stacked'/>
+        </CardContent>
+      </Card>
+      <SummaryList name='Topics' icon='headline' items={topicListMock.map(items => ({
+            ...items,
+            primary: <StyledLabel>{items.primary}</StyledLabel>,
+            secondary: (<Flex container={{ direction: 'row', justify: 'between' }}>
+              <Text variant='primary'>{items.secondary.indicator}</Text>
+              <StyledLabel>{items.secondary.value}</StyledLabel>
+            </Flex>)
+        }))} noItemsText='No items'/>
+    </Grid>);
+    return (<AppShellDemo appHeader main={<EmailCaseView header={args.showHeader
+                ? {
+                    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
+                ? [
+                    { iconName: 'list-number', count: 7 },
+                    { iconName: 'document-doc', count: 1 },
+                    { iconName: 'headline', count: 4 }
+                ]
+                : undefined} defaultUtilitiesExpanded/>}/>);
+};
+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 [activeItemId, setActiveItemId] = useState();
     const [emailList, setEmailList] = useState(emailSummaryItems.slice(0, INITIAL_CHUNK_SIZE));
     const [loading, setLoading] = useState(false);
     const [hasMore, setHasMore] = useState(true);
     const handleEmailItemClick = (id) => {
-        setActiveItemId(id);
         const index = emailList.findIndex(emailItem => {
             return emailItem.id === id;
         });
@@ -916,44 +999,55 @@ export const EmailManagerAppShell = (args) => {
             }, 1500);
         }
     }, [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 utilities = activeItemId === undefined ? null : (<Grid container={{ rowGap: 2 }}>
-        <EntityListDemo onContextMenu={args.onContextMenu} enableContextMenu={args.enableContextMenu}/>
-        <Card>
-          <CardHeader container={{ alignItems: 'center', gap: 1 }}>
-            <Icon name='document-doc'/>
-            <Text variant='h3'>Email header</Text>
-          </CardHeader>
-          <CardContent>
-            <FieldValueList fields={viewAnalysisEmailHeaderMock} variant='stacked'/>
-          </CardContent>
-        </Card>
-        <SummaryList name='Topics' icon='headline' items={topicListMock.map(items => ({
+    const utilities = (<Grid container={{ rowGap: 2 }}>
+      <EntityListDemo />
+      <Card>
+        <CardHeader container={{ alignItems: 'center', gap: 1 }}>
+          <Icon name='document-doc'/>
+          <Text variant='h3'>Email header</Text>
+        </CardHeader>
+        <CardContent>
+          <FieldValueList fields={viewAnalysisEmailHeaderMock} variant='stacked'/>
+        </CardContent>
+      </Card>
+      <SummaryList name='Topics' icon='headline' items={topicListMock.map(items => ({
             ...items,
             primary: <StyledLabel>{items.primary}</StyledLabel>,
             secondary: (<Flex container={{ direction: 'row', justify: 'between' }}>
-                <Text variant='primary'>{items.secondary.indicator}</Text>
-                <StyledLabel>{items.secondary.value}</StyledLabel>
-              </Flex>)
+              <Text variant='primary'>{items.secondary.indicator}</Text>
+              <StyledLabel>{items.secondary.value}</StyledLabel>
+            </Flex>)
         }))} noItemsText='No items'/>
-      </Grid>);
-    return (<AppShellDemo appHeader main={<EmailManager header={{
-                icon: 'mail',
-                title: 'Inbox'
-            }} list={<EmailSummaryListDemo onItemClick={handleEmailItemClick} items={emailList} onLoadMore={hasMore ? onLoadMore : undefined} loading={loading}/>} content={content} utilities={utilities} utilitiesSummaryItems={utilities
-                ? [
-                    { iconName: 'list-number', count: 7 },
-                    { iconName: 'document-doc', count: 1 },
-                    { iconName: 'headline', count: 4 }
-                ]
-                : undefined} defaultCollapsedUtilities={!!utilities}/>}/>);
+    </Grid>);
+    const content = <EmailShellDemo showHeader={false}/>;
+    return (<AppShellDemo appHeader main={<EmailManager header={args.showHeader
+                ? {
+                    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={[
+                        'Your email could not be delivered due to poor network connection.'
+                    ]}/>)} content={content} utilities={args.showUtilities && utilities} utilitiesSummaryItems={args.showUtilities
+                    ? [
+                        { iconName: 'list-number', count: 7 },
+                        { iconName: 'document-doc', count: 1 },
+                        { iconName: 'headline', count: 4 }
+                    ]
+                    : undefined} defaultUtilitiesExpanded={false}/>)}/>}/>);
 };
 EmailManagerAppShell.args = {
-    enableContextMenu: true
+    enableContextMenu: true,
+    showEmptyView: false,
+    showHeader: true,
+    showCaseViewBanners: false,
+    showUtilities: true
 };
 EmailManagerAppShell.argTypes = {
-    enableContextMenu: { control: { type: 'boolean' } }
+    enableContextMenu: { control: { type: 'boolean' } },
+    showEmptyView: { control: { type: 'boolean' } },
+    showHeader: { control: { type: 'boolean' } },
+    showCaseViewBanners: { control: { type: 'boolean' } },
+    showUtilities: { control: { type: 'boolean' } }
 };
 EmailManagerAppShell.parameters = {
     layout: 'fullscreen'