featI(integration): integrate callpro erxes/erxes-integrations#8

erxes · Aug 22, 2019 · 5cb1719 · 5cb1719
1 parent 54fb470
commit 5cb1719
Show file tree

Hide file tree

Showing 15 changed files with 184 additions and 3 deletions.
diff --git a/public/images/callpro.png b/public/images/callpro.png
diff --git a/public/images/integrations/callpro.png b/public/images/integrations/callpro.png
diff --git a/src/modules/common/components/IntegrationIcon.tsx b/src/modules/common/components/IntegrationIcon.tsx
@@ -58,6 +58,9 @@ class IntegrationIcon extends React.PureComponent<Props> {
       case 'gmail':
         icon = 'mail-alt';
         break;
+      case 'callpro':
+        icon = 'phone-call';
+        break;
       default:
         icon = 'doc-text-inv-1';
     }

diff --git a/src/modules/inbox/components/leftSidebar/ConversationItem.tsx b/src/modules/inbox/components/leftSidebar/ConversationItem.tsx
@@ -86,6 +86,18 @@ class ConversationItem extends React.Component<Props> {
     return null;
   }
 
+  showMessageContent(kind: string, content: string) {
+    if (kind === 'callpro') {
+      return (
+        <span style={{ color: content === 'answered' ? 'green' : 'red' }}>
+          {content}
+        </span>
+      );
+    }
+
+    return strip(content);
+  }
+
   render() {
     const { currentUser } = this.props;
     const { conversation, isActive, selectedIds = [] } = this.props;
@@ -142,7 +154,9 @@ class ConversationItem extends React.Component<Props> {
               </FlexContent>
             </MainInfo>
 
-            <MessageContent>{strip(content)}</MessageContent>
+            <MessageContent>
+              {this.showMessageContent(integration.kind, content || '')}
+            </MessageContent>
             <Tags tags={tags} limit={3} />
           </FlexContent>
         </RowContent>

diff --git a/src/modules/settings/integrations/components/callpro/Form.tsx b/src/modules/settings/integrations/components/callpro/Form.tsx
@@ -0,0 +1,81 @@
+import FormControl from 'modules/common/components/form/Control';
+import Form from 'modules/common/components/form/Form';
+import FormGroup from 'modules/common/components/form/Group';
+import ControlLabel from 'modules/common/components/form/Label';
+import Spinner from 'modules/common/components/Spinner';
+import { ModalFooter } from 'modules/common/styles/main';
+import { IButtonMutateProps, IFormProps } from 'modules/common/types';
+import React from 'react';
+import SelectBrand from '../../containers/SelectBrand';
+
+type Props = {
+  renderButton: (props: IButtonMutateProps) => JSX.Element;
+  closeModal: () => void;
+};
+
+class CallPro extends React.Component<Props, { loading: boolean }> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      loading: false
+    };
+  }
+
+  generateDoc = (values: {
+    name: string;
+    phoneNumber: string;
+    brandId: string;
+  }) => {
+    return {
+      name: `${values.name} - ${values.phoneNumber}`,
+      brandId: values.brandId,
+      kind: 'callpro',
+      data: {
+        phoneNumber: values.phoneNumber
+      }
+    };
+  };
+
+  renderContent = (formProps: IFormProps) => {
+    const { renderButton } = this.props;
+    const { values, isSubmitted } = formProps;
+
+    return (
+      <>
+        {this.state.loading && <Spinner />}
+        <FormGroup>
+          <ControlLabel required={true}>Name</ControlLabel>
+          <FormControl {...formProps} name="name" required={true} />
+        </FormGroup>
+
+        <FormGroup>
+          <ControlLabel required={true}>Phone number</ControlLabel>
+          <FormControl
+            {...formProps}
+            type="number"
+            name="phoneNumber"
+            required={true}
+          />
+        </FormGroup>
+
+        <SelectBrand isRequired={true} formProps={formProps} />
+
+        <ModalFooter>
+          {renderButton({
+            name: 'integration',
+            values: this.generateDoc(values),
+            isSubmitted,
+            callback: this.props.closeModal
+          })}
+        </ModalFooter>
+      </>
+    );
+  };
+
+  render() {
+    return <Form renderContent={this.renderContent} />;
+  }
+}
+
+export default CallPro;
diff --git a/src/modules/settings/integrations/components/common/IntegrationList.tsx b/src/modules/settings/integrations/components/common/IntegrationList.tsx
@@ -34,6 +34,10 @@ class IntegrationList extends React.Component<Props> {
       return 'form';
     }
 
+    if (kind === KIND_CHOICES.CALLPRO) {
+      return 'callpro';
+    }
+
     return 'default';
   }
 

diff --git a/src/modules/settings/integrations/components/common/ManageIntegrations.tsx b/src/modules/settings/integrations/components/common/ManageIntegrations.tsx
@@ -102,6 +102,8 @@ class ManageIntegrations extends React.Component<Props, State> {
       type = 'form';
     } else if (kind === KIND_CHOICES.FACEBOOK) {
       type = 'facebook';
+    } else if (kind === KIND_CHOICES.CALLPRO) {
+      type = 'callpro';
     }
 
     return type;
@@ -117,6 +119,8 @@ class ManageIntegrations extends React.Component<Props, State> {
       icon = 'facebook-official';
     } else if (kind === KIND_CHOICES.GMAIL) {
       icon = 'mail-alt';
+    } else if (kind === KIND_CHOICES.CALLPRO) {
+      icon = 'phone-call';
     }
 
     return icon;

diff --git a/src/modules/settings/integrations/components/store/Entry.tsx b/src/modules/settings/integrations/components/store/Entry.tsx
@@ -1,6 +1,7 @@
 import Icon from 'modules/common/components/Icon';
 import ModalTrigger from 'modules/common/components/ModalTrigger';
 import { __ } from 'modules/common/utils';
+import CallPro from 'modules/settings/integrations/containers/callpro/Form';
 import Facebook from 'modules/settings/integrations/containers/facebook/Form';
 import Gmail from 'modules/settings/integrations/containers/google/Gmail';
 import React from 'react';
@@ -20,6 +21,7 @@ type Props = {
     messenger: number;
     form: number;
     facebook: number;
+    callpro: number;
   };
 };
 
@@ -100,6 +102,20 @@ class Entry extends React.Component<Props> {
       );
     }
 
+    if (createModal === 'callpro') {
+      const trigger = <a href="#add">+ {'Add'}</a>;
+
+      const content = props => <CallPro {...props} />;
+
+      return (
+        <ModalTrigger
+          title="Add call pro"
+          trigger={trigger}
+          content={content}
+        />
+      );
+    }
+
     if (createModal === 'gmail') {
       const trigger = <a href="#add">+ {__('Add')}</a>;
 

diff --git a/src/modules/settings/integrations/components/store/Home.tsx b/src/modules/settings/integrations/components/store/Home.tsx
@@ -12,6 +12,7 @@ type Props = {
     form: number;
     facebook: number;
     gmail: number;
+    callpro: number;
   };
   queryParams: any;
 };

diff --git a/src/modules/settings/integrations/components/store/Row.tsx b/src/modules/settings/integrations/components/store/Row.tsx
@@ -16,6 +16,7 @@ type Props = {
     form: number;
     facebook: number;
     gmail: number;
+    callpro: number;
   };
   queryParams: any;
 };

diff --git a/src/modules/settings/integrations/constants.ts b/src/modules/settings/integrations/constants.ts
@@ -68,7 +68,8 @@ export const KIND_CHOICES = {
   FACEBOOK: 'facebook',
   GMAIL: 'gmail',
   FORM: 'form',
-  ALL_LIST: ['messenger', 'facebook', 'form']
+  CALLPRO: 'callpro',
+  ALL_LIST: ['messenger', 'facebook', 'form', 'callpro']
 };
 
 export const FORM_LOAD_TYPES = {
@@ -145,6 +146,14 @@ export const INTEGRATIONS = [
         kind: 'amazon-ses',
         logo: '/images/integrations/aws-ses.svg',
         createModal: 'sesconfig'
+      },
+      {
+        name: 'Call Pro',
+        description: 'Connect your call pro phone number',
+        inMessenger: false,
+        kind: 'callpro',
+        logo: '/images/integrations/callpro.png',
+        createModal: 'callpro'
       }
     ]
   },

diff --git a/src/modules/settings/integrations/containers/StoreEntry.tsx b/src/modules/settings/integrations/containers/StoreEntry.tsx
@@ -18,6 +18,7 @@ type Props = {
     form: number;
     facebook: number;
     gmail: number;
+    callpro: number;
   };
 };
 

diff --git a/src/modules/settings/integrations/containers/callpro/Form.tsx b/src/modules/settings/integrations/containers/callpro/Form.tsx
@@ -0,0 +1,46 @@
+import ButtonMutate from 'modules/common/components/ButtonMutate';
+import { IButtonMutateProps, IRouterProps } from 'modules/common/types';
+import CallPro from 'modules/settings/integrations/components/callpro/Form';
+import { mutations } from 'modules/settings/integrations/graphql';
+import React from 'react';
+import { withRouter } from 'react-router';
+
+type Props = {
+  type?: string;
+  closeModal: () => void;
+};
+
+type FinalProps = {} & IRouterProps & Props;
+
+class CallProContainer extends React.Component<FinalProps> {
+  renderButton = ({
+    name,
+    values,
+    isSubmitted,
+    callback
+  }: IButtonMutateProps) => {
+    return (
+      <ButtonMutate
+        mutation={mutations.integrationsCreateExternalIntegration}
+        variables={values}
+        callback={callback}
+        isSubmitted={isSubmitted}
+        type="submit"
+        successMessage={`You successfully added a ${name}`}
+      />
+    );
+  };
+
+  render() {
+    const { closeModal } = this.props;
+
+    const updatedProps = {
+      closeModal,
+      renderButton: this.renderButton
+    };
+
+    return <CallPro {...updatedProps} />;
+  }
+}
+
+export default withRouter<FinalProps>(CallProContainer);
diff --git a/src/modules/settings/integrations/graphql/mutations.ts b/src/modules/settings/integrations/graphql/mutations.ts
@@ -60,7 +60,7 @@ const integrationsCreateMessenger = `
 `;
 
 const integrationsCreateExternalIntegration = `
-  mutation integrationsCreateExternalIntegration($name: String!, $brandId: String!, $accountId: String!, $kind: String!, $data: JSON) {
+  mutation integrationsCreateExternalIntegration($name: String!, $brandId: String!, $accountId: String, $kind: String!, $data: JSON) {
     integrationsCreateExternalIntegration(name: $name, brandId: $brandId, accountId: $accountId, kind: $kind, data: $data) {
       _id
       brand {

diff --git a/src/modules/settings/integrations/types.ts b/src/modules/settings/integrations/types.ts
@@ -138,6 +138,7 @@ export type ByKind = {
   form: number;
   facebook: number;
   gmail: number;
+  callpro: number;
 };
 
 type IntegrationsCount = {