feat(conversation): added resolve all button

erxes · Sep 28, 2020 · 2e289bd · 2e289bd
1 parent a6a30c5
commit 2e289bd
Show file tree

Hide file tree

Showing 6 changed files with 115 additions and 31 deletions.
diff --git a/ui/src/modules/inbox/components/Resolver.tsx b/ui/src/modules/inbox/components/Resolver.tsx
@@ -44,9 +44,9 @@ class Resolver extends React.Component<Props> {
     };
 
     return (
-      <Button {...btnAttrs}>
-        {buttonText}
-      </Button>
+      <>
+        <Button {...btnAttrs}>{buttonText}</Button>
+      </>
     );
   }
 }

diff --git a/ui/src/modules/inbox/components/leftSidebar/Sidebar.tsx b/ui/src/modules/inbox/components/leftSidebar/Sidebar.tsx
@@ -1,8 +1,10 @@
 import { IUser } from 'modules/auth/types';
 import asyncComponent from 'modules/common/components/AsyncComponent';
+import Button from 'modules/common/components/Button';
 import Icon from 'modules/common/components/Icon';
 import { __ } from 'modules/common/utils';
 import { ScrollContent } from 'modules/growthHacks/styles';
+import { CONVERSATION_STATUSES } from 'modules/inbox/constants';
 import FilterToggler from 'modules/inbox/containers/leftSidebar/FilterToggler';
 import Resolver from 'modules/inbox/containers/Resolver';
 import Tagger from 'modules/inbox/containers/Tagger';
@@ -54,6 +56,7 @@ type Props = {
   emptyBulk: () => void;
   config: { [key: string]: boolean };
   toggleSidebar: (params: { isOpen: boolean }) => void;
+  resolveAll: () => void;
 };
 
 type State = {
@@ -112,6 +115,17 @@ class LeftSidebar extends React.Component<Props, State> {
         >
           <Icon icon="subject" />
         </ToggleButton>
+        {queryParams.status !== CONVERSATION_STATUSES.CLOSED && (
+          <Button
+            size="small"
+            uppercase={false}
+            btnStyle="success"
+            icon="check-circle"
+            onClick={this.props.resolveAll}
+          >
+            Resolve all
+          </Button>
+        )}
         <DropdownWrapper>
           <DateFilter
             queryParams={queryParams}

diff --git a/ui/src/modules/inbox/containers/leftSidebar/Sidebar.tsx b/ui/src/modules/inbox/containers/leftSidebar/Sidebar.tsx
@@ -1,20 +1,33 @@
 import { AppConsumer } from 'appContext';
+import gql from 'graphql-tag';
+import * as compose from 'lodash.flowright';
 import Bulk from 'modules/common/components/Bulk';
 import { IBulkContentProps } from 'modules/common/components/Bulk';
+import { Alert, withProps } from 'modules/common/utils';
 import DumbSidebar from 'modules/inbox/components/leftSidebar/Sidebar';
 import React from 'react';
+import { graphql } from 'react-apollo';
 import { withRouter } from 'react-router-dom';
 import { IRouterProps } from '../../../common/types';
+import { mutations } from '../../graphql';
+import {
+  ResolveAllMutationResponse,
+  ResolveAllMutationVariables
+} from '../../types';
 import { getConfig, setConfig } from '../../utils';
+import { refetchSidebarConversationsOptions } from '../../utils';
+import { InboxManagementActionConsumer } from '../Inbox';
 
 type Props = {
   queryParams: any;
   currentConversationId?: string;
 } & IRouterProps;
 
+type FinalProps = Props & ResolveAllMutationResponse;
+
 const STORAGE_KEY = 'erxes_additional_sidebar_config';
 
-class Sidebar extends React.Component<Props> {
+class Sidebar extends React.Component<FinalProps> {
   toggle = ({ isOpen }: { isOpen: boolean }) => {
     const config = getConfig(STORAGE_KEY);
 
@@ -23,6 +36,22 @@ class Sidebar extends React.Component<Props> {
     setConfig(STORAGE_KEY, config);
   };
 
+  // resolve all conversation
+  resolveAll = notifyHandler => () => {
+    this.props
+      .resolveAllMutation({ variables: this.props.queryParams })
+      .then(() => {
+        if (notifyHandler) {
+          notifyHandler();
+        }
+
+        Alert.success('The conversation has been resolved!');
+      })
+      .catch(e => {
+        Alert.error(e.message);
+      });
+  };
+
   render() {
     if (!localStorage.getItem(STORAGE_KEY)) {
       setConfig(STORAGE_KEY, {
@@ -35,22 +64,28 @@ class Sidebar extends React.Component<Props> {
     }
 
     const { currentConversationId, queryParams, history } = this.props;
-
     const content = ({ bulk, toggleBulk, emptyBulk }: IBulkContentProps) => {
       return (
         <AppConsumer>
           {({ currentUser }) => (
-            <DumbSidebar
-              currentUser={currentUser}
-              currentConversationId={currentConversationId}
-              queryParams={queryParams}
-              history={history}
-              bulk={bulk}
-              emptyBulk={emptyBulk}
-              toggleBulk={toggleBulk}
-              config={getConfig(STORAGE_KEY)}
-              toggleSidebar={this.toggle}
-            />
+            <InboxManagementActionConsumer>
+              {({ notifyConsumersOfManagementAction }) => (
+                <DumbSidebar
+                  currentUser={currentUser}
+                  currentConversationId={currentConversationId}
+                  queryParams={queryParams}
+                  history={history}
+                  bulk={bulk}
+                  emptyBulk={emptyBulk}
+                  toggleBulk={toggleBulk}
+                  config={getConfig(STORAGE_KEY)}
+                  toggleSidebar={this.toggle}
+                  resolveAll={this.resolveAll(
+                    notifyConsumersOfManagementAction
+                  )}
+                />
+              )}
+            </InboxManagementActionConsumer>
           )}
         </AppConsumer>
       );
@@ -60,4 +95,16 @@ class Sidebar extends React.Component<Props> {
   }
 }
 
-export default withRouter<Props>(Sidebar);
+export default withRouter<Props>(
+  withProps<Props>(
+    compose(
+      graphql<Props, ResolveAllMutationResponse, ResolveAllMutationVariables>(
+        gql(mutations.resolveAll),
+        {
+          name: 'resolveAllMutation',
+          options: () => refetchSidebarConversationsOptions()
+        }
+      )
+    )(Sidebar)
+  )
+);
diff --git a/ui/src/modules/inbox/graphql/mutations.ts b/ui/src/modules/inbox/graphql/mutations.ts
@@ -1,4 +1,5 @@
 import messageFields from './messageFields';
+import { paramsDef, paramsValue } from './queries';
 
 const conversationMessageAdd = `
   mutation conversationMessageAdd(
@@ -111,6 +112,12 @@ const createProductBoardNote = `
   }
 `;
 
+const resolveAll = `
+  mutation conversationResolveAll(${paramsDef}) {
+    conversationResolveAll(${paramsValue})
+  }
+`;
+
 export default {
   conversationsReplyFacebookComment,
   conversationMessageAdd,
@@ -120,5 +127,6 @@ export default {
   saveResponseTemplate,
   markAsRead,
   createProductBoardNote,
-  conversationsChangeStatusFacebookComment
+  conversationsChangeStatusFacebookComment,
+  resolveAll
 };
diff --git a/ui/src/modules/inbox/graphql/queries.ts b/ui/src/modules/inbox/graphql/queries.ts
@@ -2,8 +2,7 @@ import { queries as customerQueries } from 'modules/customers/graphql';
 import conversationFields from './conversationFields';
 import messageFields from './messageFields';
 
-const listParamsDef = `
-  $limit: Int
+export const paramsDef = `
   $channelId: String
   $status: String
   $unassigned: String
@@ -12,13 +11,16 @@ const listParamsDef = `
   $integrationType: String
   $participating: String
   $starred: String
-  $ids: [String]
   $startDate: String
   $endDate: String
 `;
+const listParamsDef = `
+  $limit: Int
+  $ids: [String]
+  ${paramsDef}
+`;
 
-const listParamsValue = `
-  limit: $limit
+export const paramsValue = `
   channelId: $channelId
   status: $status
   unassigned: $unassigned
@@ -27,11 +29,16 @@ const listParamsValue = `
   integrationType: $integrationType
   participating: $participating
   starred: $starred
-  ids: $ids
   startDate: $startDate
   endDate: $endDate
 `;
 
+const listParamsValue = `
+  limit: $limit
+  ids: $ids
+  ${paramsValue}
+`;
+
 const conversationList = `
   query objects(${listParamsDef}) {
     conversations(${listParamsValue}) {
@@ -253,13 +260,13 @@ const convertToInfo = `
   }
 `;
 
-const generateCustomerDetailQuery = (params) => {
+const generateCustomerDetailQuery = params => {
   const {
     showDeviceProperties = false,
     showTrackedData = false,
     showCustomFields = false,
     showCompanies = false,
-    showTags = false,
+    showTags = false
   } = params || {};
 
   let fields = `
@@ -351,5 +358,5 @@ export default {
   unreadConversationsCount,
   lastConversation,
   generateCustomerDetailQuery,
-  convertToInfo,
+  convertToInfo
 };
diff --git a/ui/src/modules/inbox/types.ts b/ui/src/modules/inbox/types.ts
@@ -218,10 +218,7 @@ export type CreateProductBoardMutationResponse = {
   ) => Promise<any>;
 };
 
-// query types
-
-export type ConvesationsQueryVariables = {
-  limit: number;
+export type ResolveAllMutationVariables = {
   channelId: string;
   status: string;
   unassigned: string;
@@ -234,6 +231,17 @@ export type ConvesationsQueryVariables = {
   endDate: string;
 };
 
+export type ResolveAllMutationResponse = {
+  resolveAllMutation: (
+    doc: { variables: ResolveAllMutationVariables }
+  ) => Promise<any>;
+};
+
+// query types
+export type ConvesationsQueryVariables = {
+  limit: number;
+} & ResolveAllMutationVariables;
+
 export type LastConversationQueryResponse = {
   conversationsGetLast: IConversation;
 } & QueryResponse;