fix(engae): fix not showing all email templates, improve select ui (c…

…lose #1962)
erxes · Apr 28, 2020 · 7aced58 · 7aced58
1 parent 6b61bf9
commit 7aced58
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 49 deletions.
diff --git a/ui/src/modules/engage/components/EmailForm.tsx b/ui/src/modules/engage/components/EmailForm.tsx
@@ -20,6 +20,7 @@ import {
 import React from 'react';
 import Select from 'react-select-plus';
 import { IEmailFormProps, IEngageEmail, IEngageScheduleDate } from '../types';
+import { generateEmailTemplateParams } from '../utils';
 import Scheduler from './Scheduler';
 
 type Props = IEmailFormProps & { verifiedEmails: string[]; error?: string };
@@ -158,11 +159,14 @@ class EmailForm extends React.Component<Props, State> {
 
     const onChangeContent = e =>
       this.changeContent('subject', (e.target as HTMLInputElement).value);
-    const onChangeTemplate = e =>
-      this.templateChange((e.target as HTMLInputElement).value);
+
     const onChangeAttachment = attachmentsArr =>
       this.changeContent('attachments', attachmentsArr);
 
+    const onChangeTemplate = e => {
+      this.templateChange(e.value);
+    };
+
     return (
       <FlexItem>
         <FlexPad direction="column" overflow="auto">
@@ -204,18 +208,13 @@ class EmailForm extends React.Component<Props, State> {
           <FormGroup>
             <ControlLabel>Email template:</ControlLabel>
             <p>{__('Insert email template to content')}</p>
-            <FormControl
-              componentClass="select"
+
+            <Select
               onChange={onChangeTemplate}
               value={this.state.email.templateId}
-            >
-              <option />{' '}
-              {this.props.templates.map(t => (
-                <option key={t._id} value={t._id}>
-                  {t.name}
-                </option>
-              ))}
-            </FormControl>
+              options={generateEmailTemplateParams(this.props.templates)}
+              clearable={false}
+            />
           </FormGroup>
           <FormGroup>
             <ControlLabel>Attachments: </ControlLabel>

diff --git a/ui/src/modules/engage/components/WidgetForm.tsx b/ui/src/modules/engage/components/WidgetForm.tsx
@@ -14,11 +14,13 @@ import { FlexContent, FlexItem } from 'modules/layout/styles';
 import { IEmailTemplate } from 'modules/settings/emailTemplates/types';
 import { MAIL_TOOLBARS_CONFIG } from 'modules/settings/integrations/constants';
 import React from 'react';
+import Select from 'react-select-plus';
 import { IAttachment } from '../../common/types';
 import { IBrand } from '../../settings/brands/types';
 import MessengerPreview from '../containers/MessengerPreview';
 import { Half, Recipient, Recipients } from '../styles';
 import { IEngageEmail, IEngageMessageDoc, IEngageMessenger } from '../types';
+import { generateEmailTemplateParams } from '../utils';
 
 type Props = {
   customers: ICustomer[];
@@ -37,6 +39,7 @@ type State = {
   channel: string;
   attachments: IAttachment[];
   sentAs: string;
+  templateId: string;
 };
 
 class WidgetForm extends React.Component<Props, State> {
@@ -47,7 +50,8 @@ class WidgetForm extends React.Component<Props, State> {
       content: '',
       channel: props.channelType || 'email',
       attachments: [],
-      sentAs: 'snippet'
+      sentAs: 'snippet',
+      templateId: ''
     };
   }
 
@@ -95,7 +99,7 @@ class WidgetForm extends React.Component<Props, State> {
   };
 
   templateChange = e => {
-    this.setState({ content: this.findTemplate(e.target.value) });
+    this.setState({ content: this.findTemplate(e.value), templateId: e.value });
   };
 
   onEditorChange = e => {
@@ -254,18 +258,13 @@ class WidgetForm extends React.Component<Props, State> {
           <FormGroup>
             <ControlLabel>Email templates:</ControlLabel>
             <p>{__('Insert email template to content')}</p>
-            <FormControl
-              id="emailTemplateId"
-              componentClass="select"
+
+            <Select
+              value={this.state.templateId}
               onChange={this.templateChange}
-            >
-              <option />
-              {this.props.emailTemplates.map(t => (
-                <option key={t._id} value={t._id}>
-                  {t.name}
-                </option>
-              ))}
-            </FormControl>
+              options={generateEmailTemplateParams(this.props.emailTemplates)}
+              clearable={false}
+            />
           </FormGroup>
         </Half>
 

diff --git a/ui/src/modules/engage/containers/AutoAndManualForm.tsx b/ui/src/modules/engage/containers/AutoAndManualForm.tsx
@@ -4,19 +4,20 @@ import { IUser } from 'modules/auth/types';
 import { withProps } from 'modules/common/utils';
 import { AddMutationResponse } from 'modules/segments/types';
 import { IBrand } from 'modules/settings/brands/types';
+import { queries } from 'modules/settings/emailTemplates/graphql';
 import React from 'react';
 import { graphql } from 'react-apollo';
 import { EmailTemplatesQueryResponse } from '../../settings/emailTemplates/containers/List';
 import AutoAndManualForm from '../components/AutoAndManualForm';
 import FormBase from '../components/FormBase';
-import { queries } from '../graphql';
 import { IEngageMessageDoc, IEngageScheduleDate } from '../types';
 import withFormMutations from './withFormMutations';
 
 type Props = {
   kind?: string;
   brands: IBrand[];
   scheduleDate?: IEngageScheduleDate;
+  totalCountQuery?: any;
 };
 
 type FinalProps = {
@@ -46,12 +47,25 @@ const AutoAndManualFormContainer = (props: FinalProps) => {
   return <FormBase kind={props.kind || ''} content={content} />;
 };
 
-export default withFormMutations<Props>(
+const withTemplatesQuery = withFormMutations<Props>(
   withProps<Props>(
     compose(
       graphql<Props, EmailTemplatesQueryResponse>(gql(queries.emailTemplates), {
-        name: 'emailTemplatesQuery'
+        name: 'emailTemplatesQuery',
+        options: ({ totalCountQuery }) => ({
+          variables: {
+            perPage: totalCountQuery.emailTemplatesTotalCount
+          }
+        })
       })
     )(AutoAndManualFormContainer)
   )
 );
+
+export default withProps<Props>(
+  compose(
+    graphql(gql(queries.totalCount), {
+      name: 'totalCountQuery'
+    })
+  )(withTemplatesQuery)
+);
diff --git a/ui/src/modules/engage/containers/Widget.tsx b/ui/src/modules/engage/containers/Widget.tsx
@@ -5,6 +5,7 @@ import { IUser } from 'modules/auth/types';
 import { Alert, withProps } from 'modules/common/utils';
 import { ICustomer } from 'modules/customers/types';
 import { AddMutationResponse, IEngageMessageDoc } from 'modules/engage/types';
+import { queries as templatesQuery } from 'modules/settings/emailTemplates/graphql';
 import React from 'react';
 import { graphql } from 'react-apollo';
 import { BrandsQueryResponse } from '../../settings/brands/types';
@@ -24,6 +25,7 @@ type Props = {
   emptyBulk?: () => void;
   modalTrigger?: React.ReactNode;
   channelType?: string;
+  totalCountQuery?: any;
 };
 
 type FinalProps = {
@@ -92,11 +94,19 @@ const WidgetContainer = (props: FinalProps) => {
   return <Widget {...updatedProps} />;
 };
 
-export default withProps<Props>(
+const withQueries = withProps<Props>(
   compose(
-    graphql<Props, EmailTemplatesQueryResponse>(gql(queries.emailTemplates), {
-      name: 'emailTemplatesQuery'
-    }),
+    graphql<Props, EmailTemplatesQueryResponse>(
+      gql(templatesQuery.emailTemplates),
+      {
+        name: 'emailTemplatesQuery',
+        options: ({ totalCountQuery }) => ({
+          variables: {
+            perPage: totalCountQuery.emailTemplatesTotalCount
+          }
+        })
+      }
+    ),
     graphql<Props, BrandsQueryResponse>(gql(queries.brands), {
       name: 'brandsQuery'
     }),
@@ -109,3 +119,11 @@ export default withProps<Props>(
     )
   )(withCurrentUser(WidgetContainer))
 );
+
+export default withProps<Props>(
+  compose(
+    graphql(gql(templatesQuery.totalCount), {
+      name: 'totalCountQuery'
+    })
+  )(withQueries)
+);
diff --git a/ui/src/modules/engage/graphql/queries.ts b/ui/src/modules/engage/graphql/queries.ts
@@ -149,16 +149,6 @@ const userDetail = `
   }
 `;
 
-const emailTemplates = `
-  query emailTemplates {
-    emailTemplates {
-      _id
-      name
-      content
-    }
-  }
-`;
-
 const engageMessagesTotalCount = `
   query engageMessagesTotalCount(${listParamsDef}) {
     engageMessagesTotalCount(${listParamsValue})
@@ -291,7 +281,6 @@ export default {
   userDetail,
   segments,
   brands,
-  emailTemplates,
   customerCounts,
   segmentDetail,
   headSegments,

diff --git a/ui/src/modules/engage/utils.ts b/ui/src/modules/engage/utils.ts
@@ -20,6 +20,13 @@ export const crudMutationsOptions = () => {
   };
 };
 
+export const generateEmailTemplateParams = emailTemplates => {
+  return emailTemplates.map(template => ({
+    value: template._id,
+    label: template.name
+  }));
+};
+
 /**
  * Sum selected item's customers count
  * @param ids - customer ids

diff --git a/ui/src/modules/settings/emailTemplates/graphql/queries.ts b/ui/src/modules/settings/emailTemplates/graphql/queries.ts
@@ -1,16 +1,16 @@
 const emailTemplates = `
   query emailTemplates($page: Int, $perPage: Int) {
-	emailTemplates(page: $page, perPage: $perPage) {
-	  _id
-	  name
-	  content
-	}
+    emailTemplates(page: $page, perPage: $perPage) {
+      _id
+      name
+      content
+    }
   }
 `;
 
 const totalCount = `
   query totalEmailTemplatesCount {
-	emailTemplatesTotalCount
+	  emailTemplatesTotalCount
   }
 `;