perf(inbox): email send popup improvement (#4433)

packages/plugin-engages-api/src/graphql/resolvers/Mutation.ts

@@ -356,10 +356,14 @@ const engageMutations = {
   ) {
     const { body, customerId, ...doc } = args;
 
+    const customerQuery = customerId
+      ? { _id: customerId }
+      : { primaryEmail: doc.to };
+
     const customer = await sendContactsMessage({
       subdomain,
       action: 'customers.findOne',
-      data: { _id: customerId },
+      data: customerQuery,
       isRPC: true
     });
 

packages/plugin-inbox-ui/src/configs.js

@@ -8,6 +8,7 @@ module.exports = {
     './automation': './src/automations/automation.tsx',
     './unreadCount': './src/inbox/containers/UnreadCount.tsx',
     './actionForms': './src/settings/integrations/containers/ActionForms',
+    './emailWidget': './src/inbox/containers/EmailWidget.tsx',
   },
   routes: {
     url: 'http://localhost:3009/remoteEntry.js',
@@ -109,6 +110,14 @@ module.exports = {
       scope: 'inbox',
       action: 'scriptsAll',
       permissions: ['manageScripts', 'showScripts']
+    },
+    {
+      text: "Send an Email",
+      url: "/emailWidget",
+      icon: "icon-envelope",
+      location: "topNavigation",
+      scope: "inbox",
+      component: "./emailWidget",
     }
   ],
   customNavigationLabel: [

packages/plugin-inbox-ui/src/inbox/containers/EmailWidget.tsx

@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import MailForm from '@erxes/ui-inbox/src/settings/integrations/containers/mail/MailForm';
+import { NotifButton } from '@erxes/ui-notifications/src/components/styles';
+import Icon from '@erxes/ui/src/components/Icon';
+import { WidgetWrapper } from '@erxes/ui-inbox/src/settings/integrations/components/mail/styles';
+import Tip from '@erxes/ui/src/components/Tip';
+import { __ } from '@erxes/ui/src/utils';
+import { NewEmailHeader } from '@erxes/ui-inbox/src/settings/integrations/components/mail/styles';
+
+const WidgetContainer = () => {
+  const [shrink, setShrink] = useState(false);
+  const [show, setShow] = useState(true);
+  const [clear, setClear] = useState(false);
+
+  const changeShrink = () => {
+    setShrink(!shrink);
+  };
+
+  const hideWidget = () => {
+    setTimeout(() => {
+      setShow(true);
+      setShrink(false);
+    }, 10);
+
+    localStorage.setItem('emailWidgetShow', 'false');
+  };
+
+  const onClose = () => {
+    hideWidget();
+    setClear(true);
+  };
+
+  const showWidget = () => {
+    setShrink(false);
+    setShow(!show);
+    setClear(false);
+
+    localStorage.setItem('emailWidgetShow', show ? 'true' : 'false');
+  };
+
+  const isWidgetShow = localStorage.getItem('emailWidgetShow');
+
+  return (
+    <>
+      <NotifButton>
+        <Tip text={__('New Email')} placement="bottom">
+          <Icon icon="send" size={15} onClick={() => showWidget()} />
+        </Tip>
+      </NotifButton>
+      <WidgetWrapper show={isWidgetShow === 'true' ? true : false}>
+        <NewEmailHeader shrink={shrink} onClick={changeShrink}>
+          {__('New Email')}
+          <div>
+            <Icon size={10} icon={shrink ? 'plus' : 'minus'} />
+            <Icon size={10} icon="cancel" onClick={() => onClose()} />
+          </div>
+        </NewEmailHeader>
+        <MailForm
+          shrink={shrink}
+          changeShrink={changeShrink}
+          clear={clear}
+          clearOnSubmit={true}
+        />
+      </WidgetWrapper>
+    </>
+  );
+};
+
+export default WidgetContainer;

packages/ui-inbox/src/settings/integrations/components/mail/MailChooser.tsx

@@ -22,25 +22,42 @@ type Props = {
   onChange: (value: string) => void;
   selectedItem?: string;
   integrations: IIntegration[];
-  verifiedEmails: string[];
+  verifiedImapEmails: string[];
+  verifiedEngageEmails: string[];
 };
 
 class MailChooser extends React.Component<Props> {
   render() {
-    const { verifiedEmails = [], selectedItem = '', onChange } = this.props;
+    const {
+      verifiedImapEmails = [],
+      verifiedEngageEmails = [],
+      selectedItem = '',
+      onChange
+    } = this.props;
 
     const onSelectChange = val => {
       onChange(val && val.value);
     };
 
+    const options = [
+      {
+        label: 'Shared Emails (IMAP)',
+        options: verifiedImapEmails.map(e => ({ value: e, label: e }))
+      },
+      {
+        label: 'Broadcast (Campaign)',
+        options: verifiedEngageEmails.map(e => ({ value: e, label: e }))
+      }
+    ];
+
     return (
       <Wrapper>
         <FormGroup>
           <Select
             placeholder={__('Choose email to send from')}
             value={selectedItem}
             onChange={onSelectChange}
-            options={verifiedEmails.map(e => ({ value: e, label: e }))}
+            options={options}
           />
         </FormGroup>
       </Wrapper>