@pega/cosmos-react-demos 3.0.0-dev.3.0 → 3.0.0-dev.30.0

package/lib/social/Email/Email.mocks.js

@@ -1,3 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// cSpell:words Nagercoil calibri Trichy
+import { createRef } from 'react';
+import { hasProp, MenuButton, Modal } from '@pega/cosmos-react-core';
+import { EmailComposer } from '@pega/cosmos-react-social';
 export const emailBodyContent = '<div>Hi, <br /> <br /><div>Can you please change my address in the SSN.</div> <br /> <br />Regards, <br />Sara Davis </div>';
 export const emailAttachments = [
     {
@@ -42,6 +47,16 @@ export const participants = [
     { emailAddress: 'Tanya.Robinson@example.com', fullName: 'Tanya Robinson', shortName: 'Tanya' },
     { emailAddress: 'Laura.Horowitz@example.com', fullName: 'Laura Horowitz', shortName: 'Laura' }
 ];
+export const mailDeliverySystemEmail = {
+    emailAddress: 'mail.delivery@example.com',
+    fullName: 'Mail Delivery System',
+    shortName: 'MDS'
+};
+export const supportTeamEmail = {
+    emailAddress: 'support.team@example.com',
+    fullName: 'Suport team',
+    shortName: 'Support'
+};
 export const toParticipants = participants
     .slice(1, 3)
     .map((participant) => participant.emailAddress);
@@ -392,4 +407,540 @@ export const topicListMock = [
         }
     }
 ];
+export const emptyFieldErrorMessage = 'Field cannot be blank';
+export const invalidEmailErrorMessage = 'Invalid Email Address';
+export const emailValidation = (validationData) => {
+    const emailAddress = participants.map(a => a.emailAddress);
+    return validationData.every(val => emailAddress.includes(val));
+};
+export const fieldValidation = (validationData) => {
+    if (!!validationData && emailValidation(validationData))
+        return undefined;
+    return invalidEmailErrorMessage;
+};
+export const handleExternalEntry = (filterValue) => {
+    const pattern = /^[\w.\-_]+@[a-zA-Z]+(\.[a-zA-Z]{2,3}){1,2}$/;
+    const matched = filterValue.match(pattern);
+    return !!matched?.input;
+};
+export const templates = EmailMockData.emailBodyTemplates.map(({ id, title }) => {
+    return {
+        id,
+        title
+    };
+});
+export const baseComposerProps = {
+    progress: false,
+    participants,
+    externalValidator: handleExternalEntry,
+    data: {
+        to: { value: toParticipants, error: '' },
+        cc: { value: ccParticipants, error: '' },
+        subject: { value: '' },
+        bodyContent: { defaultValue: '' }
+    },
+    onSend: () => { },
+    onCancel: () => { },
+    templates,
+    onChange: () => { },
+    onSave: () => { }
+};
+export var LaunchAction;
+(function (LaunchAction) {
+    LaunchAction[LaunchAction["REPLY"] = 0] = "REPLY";
+    LaunchAction[LaunchAction["REPLYALL"] = 1] = "REPLYALL";
+    LaunchAction[LaunchAction["SUGGESTION"] = 2] = "SUGGESTION";
+    LaunchAction[LaunchAction["FORWARD"] = 3] = "FORWARD";
+})(LaunchAction || (LaunchAction = {}));
+export const composerModals = {};
+export const getCompositeId = (id, launchAction) => {
+    return `${id}-${launchAction}`;
+};
+export const handleComposerCancel = (compositeID) => {
+    composerModals[compositeID]?.dismissModal();
+    composerModals[compositeID]?.unMountModal();
+    delete composerModals[compositeID];
+};
+export const ComposerModalComponent = ({ compositeId, composerProps, composerHandle, progress }) => {
+    return (_jsx(Modal, { heading: composerProps.data.subject.value, options: { id: { compositeId } }, children: _jsx(EmailComposer, { ...composerProps, handle: composerHandle, onCancel: () => handleComposerCancel(compositeId), progress: progress }) }));
+};
+export const mockEmails = EmailMockData.emails;
+export const mockSuggestedReplies = EmailMockData.suggestedReplies;
+export const mockEmailBodyTemplates = EmailMockData.emailBodyTemplates;
+const handleTemplateChange = (templateId, compositeId) => {
+    const selectedTemplate = mockEmailBodyTemplates.find(template => template.id === templateId);
+    composerModals[compositeId]?.updateModal({ progress: { message: 'Loading template...' } });
+    return new Promise(resolve => {
+        setTimeout(() => {
+            composerModals[compositeId]?.updateModal({ progress: false });
+            resolve(selectedTemplate?.content);
+        }, 1000);
+    });
+};
+export const launchEmailComposer = (id, launchAction, composerProps, create) => {
+    const compositeId = getCompositeId(id, launchAction);
+    const composerHandle = createRef();
+    const composerPropsWithOnSend = {
+        ...composerProps,
+        onSend: () => {
+            composerModals[compositeId]?.updateModal({
+                progress: {
+                    message: 'Sending..'
+                }
+            });
+            setTimeout(() => {
+                // Mimics an api call
+                composerModals[compositeId]?.dismissModal();
+                composerModals[compositeId]?.unMountModal();
+            }, 3000);
+        },
+        onTemplateChange: (templateId) => {
+            return handleTemplateChange(templateId, compositeId);
+        }
+    };
+    const modalControls = create(ComposerModalComponent, {
+        compositeId,
+        composerProps: composerPropsWithOnSend,
+        composerHandle,
+        progress: composerProps.progress
+    }, { minimizable: true, maximizable: true, dockable: true });
+    composerModals[compositeId] = {
+        dismissModal: modalControls.dismiss,
+        unMountModal: modalControls.unmount,
+        updateModal: modalControls.update,
+        composerHandle
+    };
+};
+export const emailDemoActions = (id, subject, createOrActivateComposer, draft, body, deleteEmail) => {
+    const menuItems = draft
+        ? [
+            {
+                primary: 'Edit draft',
+                onClick: () => createOrActivateComposer(id, LaunchAction.REPLY, {
+                    ...baseComposerProps,
+                    data: {
+                        ...baseComposerProps.data,
+                        responseType: 'reply',
+                        subject: { value: `Re-${subject}` || '' },
+                        bodyContent: { defaultValue: body || '' }
+                    }
+                })
+            },
+            {
+                primary: 'Delete draft',
+                onClick: () => {
+                    deleteEmail(id);
+                }
+            }
+        ].map((item, i) => ({ ...item, id: `item_${i}` }))
+        : [
+            {
+                primary: 'Reply',
+                onClick: () => createOrActivateComposer(id, LaunchAction.REPLY, {
+                    ...baseComposerProps,
+                    data: {
+                        ...baseComposerProps.data,
+                        responseType: 'reply',
+                        subject: { value: `Re-${subject}` || '' },
+                        bodyContent: { defaultValue: body || '' }
+                    }
+                })
+            },
+            {
+                primary: 'Reply all',
+                onClick: () => createOrActivateComposer(id, LaunchAction.REPLYALL, {
+                    ...baseComposerProps,
+                    data: {
+                        ...baseComposerProps.data,
+                        responseType: 'replyAll',
+                        cc: { value: [] },
+                        subject: { value: `Re-${subject}` || '' },
+                        bodyContent: { defaultValue: body || '' }
+                    }
+                })
+            },
+            {
+                primary: 'Forward',
+                onClick: () => createOrActivateComposer(id, LaunchAction.FORWARD, {
+                    ...baseComposerProps,
+                    data: {
+                        ...baseComposerProps.data,
+                        responseType: 'forward',
+                        subject: { value: `Fw-${subject}` || '' },
+                        bodyContent: { defaultValue: body || '' }
+                    }
+                })
+            }
+        ].map((item, i) => ({ ...item, id: `item_${i}` }));
+    return (_jsx(MenuButton, { text: 'Email actions', variant: 'simple', icon: 'more', iconOnly: true, menu: {
+            items: menuItems
+        } }));
+};
+export const generateEmailConversationParticipants = (emails, fields) => {
+    let l;
+    if (fields) {
+        l = [...fields];
+    }
+    else {
+        l = ['from', 'to', 'cc', 'bcc'];
+    }
+    const emailUsers = emails.map(emailItem => {
+        return l.map(n => {
+            if (hasProp(emailItem, n)) {
+                return emailItem[n];
+            }
+            return [];
+        });
+    });
+    return [...new Set(Array.from(emailUsers).flat(2))];
+};
+export const sentiment = {
+    variant: 'negative',
+    labelHidden: true
+};
+export const emailSummaryItems = [
+    {
+        activeParticipants: [
+            { shortName: 'Robert', fullName: 'Robert Downer', emailAddress: 'robert.downey@example.com' },
+            { shortName: 'Support', fullName: 'Support', emailAddress: 'support@example.com' }
+        ],
+        message: 'I have a quick question on travel',
+        timeStamp: new Date(Date.UTC(new Date().getUTCFullYear(), new Date().getUTCMonth(), 24)),
+        topic: 'Travel request',
+        sentiment,
+        urgency: 85,
+        unreadEmailCount: 0,
+        drafts: true,
+        undelivered: true
+    },
+    {
+        activeParticipants: [
+            {
+                shortName: 'Nathan',
+                fullName: 'Nathan Swanson',
+                emailAddress: 'nathan.swanson@example.com'
+            }
+        ],
+        undelivered: true,
+        message: 'My luggage did not drive!',
+        timeStamp: new Date(Date.UTC(new Date().getUTCFullYear(), new Date().getUTCMonth(), 24)),
+        topic: 'Missing Luggage',
+        sentiment: { ...sentiment, variant: 'positive' },
+        urgency: 10,
+        unreadEmailCount: 2
+    },
+    {
+        activeParticipants: [
+            { shortName: 'Simpson', fullName: 'Glenn Simpson', emailAddress: 'glenn.simpson@example.com' }
+        ],
+        message: 'Re: How much is a flight to Florida. Is there a discount going on?',
+        timeStamp: new Date(Date.UTC(new Date().getUTCFullYear(), new Date().getUTCMonth(), 24)),
+        topic: 'Travel request',
+        sentiment,
+        urgency: 65,
+        unreadEmailCount: 1
+    },
+    {
+        activeParticipants: [
+            { shortName: 'Green', fullName: 'Ralph Green', emailAddress: 'ralph.green@example.com' }
+        ],
+        message: 'Re: Should I purchase travel insurance? How often do we need it?',
+        timeStamp: new Date(Date.UTC(new Date().getUTCFullYear(), new Date().getUTCMonth(), 24)),
+        topic: 'Travel request',
+        sentiment: { ...sentiment, variant: 'neutral' },
+        urgency: 85,
+        unreadEmailCount: 6
+    },
+    {
+        activeParticipants: [
+            { shortName: 'Greene', fullName: 'Fred Greene', emailAddress: 'Fred.greene@example.com' }
+        ],
+        message: 'My next vacation',
+        timeStamp: new Date(Date.UTC(new Date().getUTCFullYear(), new Date().getUTCMonth(), 24)),
+        topic: 'Travel request',
+        sentiment,
+        urgency: 45
+    },
+    {
+        activeParticipants: [
+            { shortName: 'Smith', fullName: 'Aya Smith', emailAddress: 'aya.smith@example.com' },
+            { shortName: 'Support', fullName: 'Support', emailAddress: 'support@example.com' },
+            { shortName: 'Downer', fullName: 'Robert Downer', emailAddress: 'robert.downer@example.com' }
+        ],
+        message: 'Airport questions',
+        timeStamp: new Date(Date.UTC(new Date().getUTCFullYear(), new Date().getUTCMonth(), 24)),
+        topic: 'Travel request',
+        sentiment: { ...sentiment, variant: 'positive' },
+        urgency: 35
+    },
+    {
+        activeParticipants: [
+            { shortName: 'Robert', fullName: 'Robert Downer', emailAddress: 'robert.downey@example.com' },
+            { shortName: 'Robert', fullName: 'Robert ', emailAddress: 'robert.downey@example.com' }
+        ],
+        message: 'I have a quick question on travel',
+        timeStamp: new Date(Date.UTC(new Date().getUTCFullYear(), new Date().getUTCMonth(), 24)),
+        topic: 'Travel request',
+        sentiment: { ...sentiment, variant: 'positive' },
+        urgency: 85
+    },
+    {
+        activeParticipants: [
+            {
+                shortName: 'Nathan',
+                fullName: 'Nathan Swanson',
+                emailAddress: 'nathan.swanson@example.com'
+            }
+        ],
+        message: 'My luggage did not drive!',
+        timeStamp: new Date(Date.UTC(new Date().getUTCFullYear(), new Date().getUTCMonth(), 24)),
+        topic: 'Missing Luggage',
+        sentiment,
+        urgency: 10
+    },
+    {
+        activeParticipants: [
+            { shortName: 'Simpson', fullName: 'Glenn Simpson', emailAddress: 'glenn.simpson@example.com' }
+        ],
+        message: 'Re: How much is a flight to Florida',
+        timeStamp: new Date(Date.UTC(new Date().getUTCFullYear(), new Date().getUTCMonth(), 24)),
+        topic: 'Travel request',
+        sentiment,
+        urgency: 65
+    },
+    {
+        activeParticipants: [
+            { shortName: 'Green', fullName: 'Ralph Green', emailAddress: 'ralph.green@example.com' }
+        ],
+        message: 'Re: Should I purchase travel insurance',
+        timeStamp: new Date(Date.UTC(new Date().getUTCFullYear(), new Date().getUTCMonth(), 24)),
+        topic: 'Travel request',
+        sentiment,
+        urgency: 85
+    },
+    {
+        activeParticipants: [
+            { shortName: 'Greene', fullName: 'Fred Greene', emailAddress: 'Fred.greene@example.com' }
+        ],
+        message: 'My next vacation',
+        timeStamp: new Date(Date.UTC(new Date().getUTCFullYear(), new Date().getUTCMonth(), 24)),
+        topic: 'Travel request',
+        sentiment,
+        urgency: 45
+    },
+    {
+        activeParticipants: [
+            { shortName: 'Smith', fullName: 'Aya Smith', emailAddress: 'aya.smith@example.com' },
+            { shortName: 'Support', fullName: 'Support', emailAddress: 'support@example.com' },
+            { shortName: 'Downer', fullName: 'Robert Downer', emailAddress: 'robert.downer@example.com' }
+        ],
+        message: 'Airport questions',
+        timeStamp: new Date(Date.UTC(new Date().getUTCFullYear(), new Date().getUTCMonth(), 24)),
+        topic: 'Travel request',
+        sentiment,
+        urgency: 35
+    },
+    {
+        activeParticipants: [
+            { shortName: 'Robert', fullName: 'Robert Downer', emailAddress: 'robert.downey@example.com' },
+            { shortName: 'Robert', fullName: 'Robert ', emailAddress: 'robert.downey@example.com' }
+        ],
+        message: 'I have a quick question on travel',
+        timeStamp: new Date(Date.UTC(new Date().getUTCFullYear(), new Date().getUTCMonth(), 24)),
+        topic: 'Travel request',
+        sentiment,
+        urgency: 85
+    },
+    {
+        activeParticipants: [
+            {
+                shortName: 'Nathan',
+                fullName: 'Nathan Swanson',
+                emailAddress: 'nathan.swanson@example.com'
+            }
+        ],
+        message: 'My luggage did not drive!',
+        timeStamp: new Date(Date.UTC(new Date().getUTCFullYear(), new Date().getUTCMonth(), 24)),
+        topic: 'Missing Luggage',
+        sentiment,
+        urgency: 10
+    },
+    {
+        activeParticipants: [
+            { shortName: 'Simpson', fullName: 'Glenn Simpson', emailAddress: 'glenn.simpson@example.com' }
+        ],
+        message: 'Re: How much is a flight to Florida',
+        timeStamp: new Date(Date.UTC(new Date().getUTCFullYear(), new Date().getUTCMonth(), 24)),
+        topic: 'Travel request',
+        sentiment,
+        urgency: 65
+    },
+    {
+        activeParticipants: [
+            { shortName: 'Green', fullName: 'Ralph Green', emailAddress: 'ralph.green@example.com' }
+        ],
+        message: 'Re: Should I purchase travel insurance',
+        timeStamp: new Date(Date.UTC(new Date().getUTCFullYear(), new Date().getUTCMonth(), 24)),
+        topic: 'Travel request',
+        sentiment,
+        urgency: 85
+    },
+    {
+        activeParticipants: [
+            { shortName: 'Greene', fullName: 'Fred Greene', emailAddress: 'Fred.greene@example.com' }
+        ],
+        message: 'My next vacation',
+        timeStamp: new Date(Date.UTC(new Date().getUTCFullYear(), new Date().getUTCMonth(), 24)),
+        topic: 'Travel request',
+        sentiment,
+        urgency: 45
+    },
+    {
+        activeParticipants: [
+            { shortName: 'Smith', fullName: 'Aya Smith', emailAddress: 'aya.smith@example.com' },
+            { shortName: 'Support', fullName: 'Support', emailAddress: 'support@example.com' },
+            { shortName: 'Downer', fullName: 'Robert Downer', emailAddress: 'robert.downer@example.com' }
+        ],
+        message: 'Airport questions',
+        timeStamp: new Date(Date.UTC(new Date().getUTCFullYear(), new Date().getUTCMonth(), 24)),
+        topic: 'Travel request',
+        sentiment,
+        urgency: 35
+    }
+].map((item, i) => ({ ...item, id: `item_${i}` }));
+export const forwardedContent = `
+  <div id="pega-email-message-forward" style="font-family:OpenSans,sans-serif; border-left: 1px solid #c4c4c4; padding-left: 8px;">
+     <div>
+        <p class="pega-email-forward-header" style="font-size:smaller;color:#90909D;">--------------------Forwarded message--------------------<br />From: Person, Example &lt;example.person@pega.com&gt; &nbsp;<br />Date: Feb 23, 2022 9:29:59 PM&nbsp;<br />Subject: Regarding flight booking &nbsp;<br />To: Laura, Stevens &lt;laurastevens@example.com&gt;<br />&nbsp;</p>
+     </div>
+     <div class="pega-email-forward-content">
+        <div class="WordSection1">
+           <p class="MsoNormal" style="margin:0cm;font-size:11pt;font-family:'calibri' , sans-serif"><span style="color:black">Hi,&nbsp; </span></p>
+           <p class="MsoNormal" style="margin:0cm;font-size:11pt;font-family:'calibri' , sans-serif"><span style="color:black">&nbsp;&nbsp; </span></p>
+           <p class="MsoNormal" style="margin:0cm;font-size:11pt;font-family:'calibri' , sans-serif"><span style="color:black">I need to book a flight from Hyderabad to Chennai.&nbsp; </span></p>
+           <p class="MsoNormal" style="margin:0cm;font-size:11pt;font-family:'calibri' , sans-serif"><span style="color:black">Please let me know the fare including taxes per each person. </span></p>
+           <p class="MsoNormal" style="margin:0cm;font-size:11pt;font-family:'calibri' , sans-serif"><span style="color:black">&nbsp;&nbsp; </span></p>
+           <p class="MsoNormal" style="margin:0cm;font-size:11pt;font-family:'calibri' , sans-serif"><span style="color:black">Thanks,&nbsp; </span></p>
+           <p class="MsoNormal" style="margin:0cm;font-size:11pt;font-family:'calibri' , sans-serif"><span style="color:black">Goutham </span></p>
+        </div>
+     </div>
+  </div>
+`;
+export const emailWorklistItemsMock = [
+    {
+        id: 'item_0',
+        primary: 'Default worklist',
+        selected: false
+    },
+    {
+        id: 'item_1',
+        primary: 'Authors',
+        selected: false
+    },
+    {
+        id: 'item_2',
+        primary: 'Administrators',
+        selected: false
+    },
+    {
+        id: 'item_3',
+        primary: 'Managers',
+        selected: false
+    },
+    {
+        id: 'item_4',
+        primary: 'Users',
+        selected: false
+    }
+];
+export const contextMenuItemsMock = [
+    {
+        id: 'item_0',
+        primary: 'Field 1',
+        selected: false
+    },
+    {
+        id: 'item_1',
+        primary: 'Field 2',
+        selected: false
+    },
+    {
+        id: 'item_2',
+        primary: 'Field 3',
+        selected: true
+    },
+    {
+        id: 'item_3',
+        primary: 'Field 4',
+        selected: true
+    }
+];
+export const highlightedEntitiesMock = [
+    {
+        value: '3967',
+        type: 'system',
+        name: 'BranchCode',
+        variant: 0,
+        description: 'Branch Code'
+    },
+    {
+        value: 'Laura Stevens',
+        type: 'system',
+        name: 'Name',
+        variant: 1,
+        description: 'Name'
+    },
+    {
+        value: 'Nagercoil',
+        type: 'system',
+        name: 'Location',
+        variant: 2,
+        description: ['Place: Nagercoil, Hyderabad', 'Location: Nagercoil']
+    },
+    {
+        value: 'Trichy',
+        type: 'system',
+        name: 'Location',
+        variant: 2,
+        description: 'Location'
+    },
+    {
+        value: '6785420965476',
+        type: 'system',
+        name: 'AccountNumber',
+        variant: 3,
+        description: 'Account Number'
+    },
+    {
+        value: '1920 6746 8653 1256',
+        type: 'system',
+        name: 'CardNumber',
+        variant: 4,
+        description: 'Card Number'
+    },
+    {
+        value: 'Debit Card',
+        type: 'system',
+        name: 'CardType',
+        variant: 5,
+        description: 'Card Type'
+    },
+    {
+        value: 'Jan 04, 2021',
+        type: 'system',
+        name: 'Date',
+        variant: 6,
+        description: 'Date'
+    }
+];
+export const mockUploadImage = (image) => {
+    return new Promise(res => {
+        setTimeout(() => {
+            res({
+                src: 'https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg',
+                alt: image.name
+            });
+        }, 3000);
+    });
+};
 //# sourceMappingURL=Email.mocks.js.map