fix(cards): comment

client-portal/modules/card/components/Detail.tsx

@@ -75,15 +75,21 @@ export default class CardDetail extends React.Component<
               <CreatedUser>
                 <img
                   src={readFile(
-                    createdUser && createdUser.avatar
+                    createdUser &&
+                      createdUser.avatar &&
+                      createdUser?.avatar !== "/images/avatar-colored.svg"
                       ? createdUser?.avatar
                       : "/static/avatar-colored.svg"
                   )}
                   alt="profile"
                 />
                 <div>
                   <CommentContent>
-                    <h5>{`${createdUser?.firstName} ${createdUser?.lastName}`}</h5>
+                    <h5>
+                      {createdUser
+                        ? createdUser.fullName || createdUser.username
+                        : createdUser.email || "Undefined"}
+                    </h5>
                     <div
                       className="comment"
                       dangerouslySetInnerHTML={{ __html: comment.content }}

client-portal/modules/card/graphql/queries.ts

@@ -122,7 +122,15 @@ const clientPortalComments = `
     clientPortalComments(typeId: $typeId, type: $type) {
       _id
       content
-      createdUser 
+      createdUser {
+        _id
+        avatar
+        firstName
+        fullName
+        lastName
+        email
+        username
+      }
       createdAt
       userType
       type

client-portal/modules/main/containers/notifications/List.tsx

@@ -1,6 +1,5 @@
-import { IUser, NotificationsQueryResponse } from "../../../types";
-import { gql, useMutation, useQuery } from "@apollo/client";
-
+import { IUser, NotificationsQueryResponse } from '../../../types';
+import { gql, useMutation, useQuery } from '@apollo/client';
 import Alert from "../../../utils/Alert";
 import NotificationList from "../../components/notifications/List";
 import React from "react";
@@ -84,8 +83,8 @@ function NotificationsContainer(props: Props) {
   const markAsRead = (ids: string[]) => {
     markAsReadMutaion({
       variables: {
-        ids,
-      },
+        ids
+      }
     });
   };
 
@@ -109,9 +108,9 @@ function NotificationsContainer(props: Props) {
       skip: !props.currentUser,
       variables: {
         page: 1,
-        perPage: 10,
+        perPage: 10
       },
-      fetchPolicy: "network-only",
+      fetchPolicy: 'network-only'
     }
   );
 
@@ -135,7 +134,7 @@ function NotificationsContainer(props: Props) {
     markAsRead,
     showNotifications,
     markAllAsRead,
-    refetch,
+    refetch
   };
 
   return <NotificationList {...updatedProps} />;

packages/plugin-clientportal-api/src/graphql/resolvers/comment.ts

@@ -32,7 +32,9 @@ export default {
         _id: user._id,
         avatar: details.avatar,
         firstName: details.firstName,
-        lastName: details.lastName
+        lastName: details.lastName,
+        fullName: details.fullName,
+        email: user.email
       };
     }
 
@@ -43,8 +45,10 @@ export default {
     return {
       _id: cpUser._id,
       avatar: cpUser.avatar,
+      fullName: `${cpUser.firstName} ${cpUser.lastName}`,
       firstName: cpUser.firstName,
-      lastName: cpUser.lastName
+      lastName: cpUser.lastName,
+      email: cpUser.email
     };
   }
 };

packages/plugin-clientportal-api/src/graphql/schema/clientPortalUser.ts

@@ -49,6 +49,7 @@ type VerificationRequest {
     _id: String!
     createdAt: Date
     modifiedAt: Date
+    fullName: String
     firstName: String
     lastName: String
     phone: String

packages/plugin-clientportal-api/src/graphql/schema/comment.ts

@@ -8,7 +8,7 @@ export const types = `
     userType: String,
     content: String
 
-    createdUser: User
+    createdUser: ClientPortalUser
     createdAt: Date
   }
 `;

packages/ui-cards/src/comment/components/Comment.tsx

@@ -11,25 +11,19 @@ import {
   CommentContent
 } from '@erxes/ui-settings/src/styles';
 import { ColorButton } from '../../boards/styles/common';
-import { gql, useQuery, useMutation } from '@apollo/client';
+import { gql, useQuery } from '@apollo/client';
 import dayjs from 'dayjs';
-import { queries, mutations } from '../graphql/';
+import { queries } from '../graphql/';
 
 function Comment(item) {
   const typeId = item.item._id;
   const type = item.item.stage.type;
 
-  const { loading, data = {} as any } = useQuery(
-    gql(queries.clientPortalComments),
-    {
-      variables: { typeId: typeId, type: type },
-      fetchPolicy: 'network-only',
-      notifyOnNetworkStatusChange: true
-    }
-  );
-  const [clientPortalCommentsRemove] = useMutation(
-    gql(mutations.clientPortalCommentsRemove)
-  );
+  const { data = {} as any } = useQuery(gql(queries.clientPortalComments), {
+    variables: { typeId, type },
+    fetchPolicy: 'network-only',
+    notifyOnNetworkStatusChange: true
+  });
 
   const clientPortalComments = data ? data.clientPortalComments || [] : [];
   const [show, setShow] = useState(false);
@@ -44,13 +38,13 @@ function Comment(item) {
       </ColorButton>
 
       <Modal
-        centered
+        centered={true}
         show={show}
         onHide={handleClose}
         backdrop="static"
         keyboard={false}
       >
-        <Modal.Header closeButton>
+        <Modal.Header closeButton={true}>
           <Modal.Title>{__('Comments')}</Modal.Title>
         </Modal.Header>
         <Modal.Body>
@@ -65,14 +59,20 @@ function Comment(item) {
                       <img
                         src={readFile(
                           createdUser && createdUser.avatar
-                            ? createdUser?.avatar
-                            : '/static/avatar-colored.svg'
+                            ? createdUser.avatar
+                            : '/images/avatar-colored.svg'
                         )}
                         alt="profile"
                       />
                       <div>
                         <CommentContent>
-                          <h5>{`${createdUser?.firstName} ${createdUser?.lastName}`}</h5>
+                          <h5>
+                            {createdUser
+                              ? createdUser.fullName ||
+                                createdUser.username ||
+                                createdUser.email
+                              : 'Undefined'}
+                          </h5>
                           <div
                             className="comment"
                             dangerouslySetInnerHTML={{
@@ -85,7 +85,6 @@ function Comment(item) {
                           {dayjs(comment.createdAt).format('YYYY-MM-DD HH:mm')}
                         </span>
                       </div>
-                      <div className="actions"></div>
                     </CreatedUser>
                   </TicketComment>
                 );

packages/ui-cards/src/comment/graphql/mutations.ts

@@ -1,13 +1,21 @@
-const clientPortalCommentsRemove = `
-  mutation clientPortalCommentsRemove(
-    $_id: String!
+const clientPortalCommentsAdd = `
+  mutation clientPortalCommentsAdd(
+    $typeId: String!
+    $type: String!
+    $content: String!
+    $userType: String!
   ) {
-    clientPortalCommentsRemove(
-      _id: $_id
-    ) 
+    clientPortalCommentsAdd(
+      typeId: $typeId
+      type: $type
+      content: $content
+      userType: $userType
+    ) {
+      _id
+    }
   }
 `;
 
 export default {
-  clientPortalCommentsRemove
+  clientPortalCommentsAdd
 };

packages/ui-cards/src/comment/graphql/queries.ts

@@ -3,7 +3,15 @@ const clientPortalComments = `
     clientPortalComments(typeId: $typeId, type: $type) {
       _id
       content
-      createdUser 
+      createdUser {
+        _id
+        avatar
+        firstName
+        fullName
+        lastName
+        email
+        username
+      }
       createdAt
       userType
       type

packages/ui-internalnotes/src/containers/Form.tsx

@@ -4,17 +4,29 @@ import React from 'react';
 import { graphql } from '@apollo/client/react/hoc';
 import Form from '../components/Form';
 import { mutations } from '../graphql';
+import {
+  mutations as commentMutations,
+  queries as commentQueries
+} from '@erxes/ui-cards/src/comment/graphql';
 import {
   InternalNotesAddMutationResponse,
-  InternalNotesAddMutationVariables
+  InternalNotesAddMutationVariables,
+  CommentAddMutationResponse,
+  CommentAddMutationVariables,
+  ClientPortalCommentQueryResponse
 } from '../types';
 
 type Props = {
   contentType: string;
   contentTypeId: string;
+  inputType?: string;
 };
 
-type FinalProps = Props & InternalNotesAddMutationResponse;
+type FinalProps = {
+  clientPortalCommentsQueries: ClientPortalCommentQueryResponse;
+} & Props &
+  InternalNotesAddMutationResponse &
+  CommentAddMutationResponse;
 
 class FormContainer extends React.Component<
   FinalProps,
@@ -28,21 +40,44 @@ class FormContainer extends React.Component<
 
   // create internalNote
   create = (variables, callback: () => void) => {
-    const { contentType, contentTypeId, internalNotesAdd } = this.props;
+    const {
+      contentType,
+      contentTypeId,
+      internalNotesAdd,
+      commentAdd,
+      inputType,
+      clientPortalCommentsQueries
+    } = this.props;
 
     this.setState({ isLoading: true });
 
-    internalNotesAdd({
-      variables: {
-        contentType,
-        contentTypeId,
-        ...variables
-      }
-    }).then(() => {
-      callback();
+    if (inputType === 'comment') {
+      commentAdd({
+        variables: {
+          type: contentType.slice(6),
+          typeId: contentTypeId,
+          userType: 'team',
+          ...variables
+        }
+      }).then(() => {
+        clientPortalCommentsQueries.refetch();
+        callback();
+
+        this.setState({ isLoading: false });
+      });
+    } else {
+      internalNotesAdd({
+        variables: {
+          contentType,
+          contentTypeId,
+          ...variables
+        }
+      }).then(() => {
+        callback();
 
-      this.setState({ isLoading: false });
-    });
+        this.setState({ isLoading: false });
+      });
+    }
   };
 
   render() {
@@ -71,5 +106,22 @@ export default compose(
         refetchQueries: ['activityLogs']
       };
     }
-  })
+  }),
+  graphql<Props>(gql(commentQueries.clientPortalComments), {
+    name: 'clientPortalCommentsQueries',
+    options: ({ contentType, contentTypeId }) => ({
+      variables: { type: contentType.slice(6), typeId: contentTypeId }
+    })
+  }),
+  graphql<Props, CommentAddMutationResponse, CommentAddMutationVariables>(
+    gql(commentMutations.clientPortalCommentsAdd),
+    {
+      name: 'commentAdd',
+      options: () => {
+        return {
+          refetchQueries: ['activityLogs']
+        };
+      }
+    }
+  )
 )(FormContainer);