@pega/cosmos-react-demos 3.0.0-dev.9.0 → 3.0.0-rc.2

package/jsx/social/Email/Email.mocks.jsx

@@ -1,5 +1,5 @@
 import { createRef } from 'react';
-import { createUID, hasProp, MenuButton, Modal } from '@pega/cosmos-react-core';
+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 = [
@@ -45,6 +45,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);
@@ -395,6 +405,17 @@ 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);
@@ -410,16 +431,17 @@ export const baseComposerProps = {
     progress: false,
     participants,
     externalValidator: handleExternalEntry,
-    to: {
-        reply: toParticipants.slice(0, 1),
-        replyAll: toParticipants
+    data: {
+        to: { value: toParticipants, error: '' },
+        cc: { value: ccParticipants, error: '' },
+        subject: { value: '' },
+        bodyContent: { defaultValue: '' }
     },
-    cc: ccParticipants,
-    subject: '',
-    bodyContent: '',
     onSend: () => { },
     onCancel: () => { },
-    templates
+    templates,
+    onChange: () => { },
+    onSave: () => { }
 };
 export var LaunchAction;
 (function (LaunchAction) {
@@ -437,9 +459,9 @@ export const handleComposerCancel = (compositeID) => {
     composerModals[compositeID]?.unMountModal();
     delete composerModals[compositeID];
 };
-export const ComposerModalComponent = ({ compositeId, composerProps, composerRef, progress }) => {
-    return (<Modal heading={composerProps.subject} options={{ id: { compositeId } }}>
-      <EmailComposer {...composerProps} ref={composerRef} onCancel={() => handleComposerCancel(compositeId)} progress={progress}/>
+export const ComposerModalComponent = ({ compositeId, composerProps, composerHandle, progress }) => {
+    return (<Modal heading={composerProps.data.subject.value} options={{ id: { compositeId } }}>
+      <EmailComposer {...composerProps} handle={composerHandle} onCancel={() => handleComposerCancel(compositeId)} progress={progress}/>
     </Modal>);
 };
 export const mockEmails = EmailMockData.emails;
@@ -457,7 +479,7 @@ const handleTemplateChange = (templateId, compositeId) => {
 };
 export const launchEmailComposer = (id, launchAction, composerProps, create) => {
     const compositeId = getCompositeId(id, launchAction);
-    const composerRef = createRef();
+    const composerHandle = createRef();
     const composerPropsWithOnSend = {
         ...composerProps,
         onSend: () => {
@@ -478,59 +500,79 @@ export const launchEmailComposer = (id, launchAction, composerProps, create) =>
     const modalControls = create(ComposerModalComponent, {
         compositeId,
         composerProps: composerPropsWithOnSend,
-        composerRef,
+        composerHandle,
         progress: composerProps.progress
     }, { minimizable: true, maximizable: true, dockable: true });
     composerModals[compositeId] = {
         dismissModal: modalControls.dismiss,
         unMountModal: modalControls.unmount,
         updateModal: modalControls.update,
-        composerRef
+        composerHandle
     };
 };
-export const emailActions = (<MenuButton text='Email actions' variant='simple' icon='more' iconOnly menu={{
-        items: [
+export const emailDemoActions = (id, subject, createOrActivateComposer, draft, body, deleteEmail) => {
+    const menuItems = draft
+        ? [
             {
-                primary: 'Reply'
-            },
-            {
-                primary: 'Reply all'
+                primary: 'Edit draft',
+                onClick: () => createOrActivateComposer(id, LaunchAction.REPLY, {
+                    ...baseComposerProps,
+                    data: {
+                        ...baseComposerProps.data,
+                        responseType: 'reply',
+                        subject: { value: `Re-${subject}` || '' },
+                        bodyContent: { defaultValue: body || '' }
+                    }
+                })
             },
             {
-                primary: 'Forward'
+                primary: 'Delete draft',
+                onClick: () => {
+                    deleteEmail(id);
+                }
             }
         ].map((item, i) => ({ ...item, id: `item_${i}` }))
-    }}/>);
-export const emailDemoActions = (create, subject) => {
-    const id = createUID();
-    return (<MenuButton text='Email actions' variant='simple' icon='more' iconOnly menu={{
-            items: [
-                {
-                    primary: 'Reply',
-                    onClick: () => launchEmailComposer(id, LaunchAction.REPLY, {
-                        ...baseComposerProps,
+        : [
+            {
+                primary: 'Reply',
+                onClick: () => createOrActivateComposer(id, LaunchAction.REPLY, {
+                    ...baseComposerProps,
+                    data: {
+                        ...baseComposerProps.data,
                         responseType: 'reply',
-                        subject: `Re-${subject}` || ''
-                    }, create)
-                },
-                {
-                    primary: 'Reply all',
-                    onClick: () => launchEmailComposer(id, LaunchAction.REPLYALL, {
-                        ...baseComposerProps,
+                        subject: { value: `Re-${subject}` || '' },
+                        bodyContent: { defaultValue: body || '' }
+                    }
+                })
+            },
+            {
+                primary: 'Reply all',
+                onClick: () => createOrActivateComposer(id, LaunchAction.REPLYALL, {
+                    ...baseComposerProps,
+                    data: {
+                        ...baseComposerProps.data,
                         responseType: 'replyAll',
-                        cc: [],
-                        subject: `Re-${subject}` || ''
-                    }, create)
-                },
-                {
-                    primary: 'Forward',
-                    onClick: () => launchEmailComposer(id, LaunchAction.FORWARD, {
-                        ...baseComposerProps,
+                        cc: { value: [] },
+                        subject: { value: `Re-${subject}` || '' },
+                        bodyContent: { defaultValue: body || '' }
+                    }
+                })
+            },
+            {
+                primary: 'Forward',
+                onClick: () => createOrActivateComposer(id, LaunchAction.FORWARD, {
+                    ...baseComposerProps,
+                    data: {
+                        ...baseComposerProps.data,
                         responseType: 'forward',
-                        subject: `Fw-${subject}` || ''
-                    }, create)
-                }
-            ].map((item, i) => ({ ...item, id: `item_${i}` }))
+                        subject: { value: `Fw-${subject}` || '' },
+                        bodyContent: { defaultValue: body || '' }
+                    }
+                })
+            }
+        ].map((item, i) => ({ ...item, id: `item_${i}` }));
+    return (<MenuButton text='Email actions' variant='simple' icon='more' iconOnly menu={{
+            items: menuItems
         }}/>);
 };
 export const generateEmailConversationParticipants = (emails, fields) => {
@@ -565,9 +607,10 @@ export const emailSummaryItems = [
         timeStamp: new Date(Date.UTC(new Date().getUTCFullYear(), new Date().getUTCMonth(), 24)),
         topic: 'Travel request',
         sentiment,
-        active: true,
         urgency: 85,
-        unreadEmailCount: 4
+        unreadEmailCount: 0,
+        drafts: true,
+        undelivered: true
     },
     {
         activeParticipants: [
@@ -577,10 +620,11 @@ export const emailSummaryItems = [
                 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: { ...sentiment, variant: 'positive' },
         urgency: 10,
         unreadEmailCount: 2
     },
@@ -602,7 +646,7 @@ export const emailSummaryItems = [
         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: { ...sentiment, variant: 'neutral' },
         urgency: 85,
         unreadEmailCount: 6
     },
@@ -625,7 +669,7 @@ export const emailSummaryItems = [
         message: 'Airport questions',
         timeStamp: new Date(Date.UTC(new Date().getUTCFullYear(), new Date().getUTCMonth(), 24)),
         topic: 'Travel request',
-        sentiment,
+        sentiment: { ...sentiment, variant: 'positive' },
         urgency: 35
     },
     {
@@ -636,7 +680,7 @@ export const emailSummaryItems = [
         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: { ...sentiment, variant: 'positive' },
         urgency: 85
     },
     {
@@ -763,4 +807,291 @@ export const emailSummaryItems = [
         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);
+    });
+};
+export const bodyData = `<div id="pega-email-message-forward" style="font-family: OpenSans, sans-serif">
+      <div>
+        <p
+          class="pega-email-forward-header"
+          style="font-size: smaller; color: #90909d"
+        >
+          --------------------Forwarded message--------------------<br />
+          From: Support2 &lt;testinpega2022@gmail.com&gt; &nbsp;<br />
+          Date: May 30, 2022 11:40:51 AM&nbsp;<br />
+          Subject: Re:Address Change &nbsp;<br />
+          To: Bandi, Likitha &lt;Likitha.Bandi@in.pega.com&gt; <br />
+          &nbsp;
+        </p>
+      </div>
+      <div class="pega-email-forward-content"><p>hi</p></div>
+      <p
+        class="pega-email-forward-separator"
+        style="margin-left: 7px; font-size: smaller; color: #90909d"
+      >
+        On May 26, 2022 1:11:55 PM Support2 &lt;testinpega2022@gmail.com&gt; wrote :
+      </p>
+      <blockquote
+        style="
+          border-left: 1px solid #d7d7d7;
+          margin-left: 10px;
+          padding-left: 5px;
+          font-style: normal;
+          font-family: inherit;
+          padding-bottom: 0px;
+        "
+      >
+        <div class="pega-email-forward-content">
+          Dear&nbsp;Bandi, Likitha &nbsp; <br />&nbsp; <br />Thank you for reaching
+          out! <br />Could you tell me a little more about the issue? Where exactly
+          you are facing the issue? <br />Having a little more information about the
+          situation will help me to evaluate and get the issue sorted faster.
+          <br />&nbsp; <br />Thank you <br />Goutham &nbsp;
+        </div>
+        <p
+          class="pega-email-forward-separator"
+          style="margin-left: 7px; font-size: smaller; color: #90909d"
+        >
+          On May 12, 2022 6:14:52 PM Bandi, Likitha
+          &lt;Likitha.Bandi@in.pega.com&gt; wrote :
+        </p>
+        <blockquote
+          style="
+            border-left: 1px solid #d7d7d7;
+            margin-left: 10px;
+            padding-left: 5px;
+            font-style: normal;
+            font-family: inherit;
+            padding-bottom: 0px;
+          "
+        >
+          <div class="pega-email-forward-content">
+            <div class="WordSection1">
+              <p
+                class="MsoNormal"
+                style="
+                  margin: 0in;
+                  font-size: 11pt;
+                  font-family: 'calibri', sans-serif;
+                "
+              >
+                <span
+                  style="
+                    font-size: 10.5pt;
+                    font-family: 'segoe ui', sans-serif;
+                    color: black;
+                    background: white;
+                  "
+                  >Hello,</span
+                ><span
+                  style="
+                    font-size: 10.5pt;
+                    font-family: 'segoe ui', sans-serif;
+                    color: black;
+                  "
+                  ><br />
+                  <br />
+                  <span style="background: white"
+                    >I want to update my address details into my profile. Here is my
+                    latest email as follows:</span
+                  ><br />
+                  <br />
+                  <span style="background: white">102, 2nd Floor,</span><br />
+                  <span style="background: white">Mumbai</span><br />
+                  <span style="background: white">500011</span><br />
+                  <span style="background: white">Mobile: 9012390123 </span></span
+                >
+              </p>
+              <p
+                class="MsoNormal"
+                style="
+                  margin: 0in;
+                  font-size: 11pt;
+                  font-family: 'calibri', sans-serif;
+                "
+              >
+                <span
+                  style="
+                    font-size: 10.5pt;
+                    font-family: 'segoe ui', sans-serif;
+                    color: black;
+                    background: white;
+                  "
+                >
+                  &nbsp;
+                </span>
+              </p>
+              <p
+                class="MsoNormal"
+                style="
+                  margin: 0in;
+                  font-size: 11pt;
+                  font-family: 'calibri', sans-serif;
+                "
+              >
+                <span
+                  style="
+                    font-size: 10.5pt;
+                    font-family: 'segoe ui', sans-serif;
+                    color: black;
+                    background: white;
+                  "
+                  >Thanks
+                </span>
+              </p>
+              <p
+                class="MsoNormal"
+                style="
+                  margin: 0in;
+                  font-size: 11pt;
+                  font-family: 'calibri', sans-serif;
+                "
+              >
+                <span
+                  style="
+                    font-size: 10.5pt;
+                    font-family: 'segoe ui', sans-serif;
+                    color: black;
+                    background: white;
+                  "
+                  >Likitha</span
+                >
+              </p>
+            </div>
+          </div>
+        </blockquote>
+      </blockquote>
+    </div>`;
 //# sourceMappingURL=Email.mocks.jsx.map