UI Work on chats

bodyshop_translations.babel

@@ -5346,6 +5346,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>typeamessage</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                 </children>
                             </folder_node>
                         </children>

client/src/components/chat-conversation/chat-conversation.component.jsx

@@ -1,11 +1,16 @@
-import { Card } from "antd";
+import { Button, Card, Input, Icon } from "antd";
 import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import twilio from "twilio";
-import { toggleConversationVisible } from "../../redux/messaging/messaging.actions";
+import {
+  closeConversation,
+  toggleConversationVisible
+} from "../../redux/messaging/messaging.actions";
 import PhoneFormatter from "../../utils/PhoneFormatter";
 import "./chat-conversation.styles.scss"; //https://bootsnipp.com/snippets/exR5v
+import { MdSend } from "react-icons/md";
+import { useTranslation } from "react-i18next";
 
 const client = twilio(
   "ACf1b1aaf0e04740828b49b6e58467d787",
@@ -17,20 +22,24 @@ const mapStateToProps = createStructuredSelector({
 });
 const mapDispatchToProps = dispatch => ({
   toggleConversationVisible: conversationId =>
-    dispatch(toggleConversationVisible(conversationId))
+    dispatch(toggleConversationVisible(conversationId)),
+  closeConversation: phone => dispatch(closeConversation(phone))
 });
 export default connect(
   mapStateToProps,
   mapDispatchToProps
 )(function ChatConversationComponent({
   conversation,
-  toggleConversationVisible
+  toggleConversationVisible,
+  closeConversation
 }) {
-  const [conversations, setConversations] = useState([]);
+  const { t } = useTranslation();
+
+  const [messages, setMessages] = useState([]);
 
   useEffect(() => {
     client.messages.list({ limit: 20 }, (error, items) => {
-      setConversations(
+      setMessages(
         items.reduce((acc, value) => {
           acc.push({
             sid: value.sid,
@@ -42,34 +51,68 @@ export default connect(
       );
     });
     return () => {};
-  }, [setConversations]);
+  }, [setMessages]);
   return (
     <div>
       <Card
+        title={
+          conversation.open ? (
+            <div style={{ display: "flex" }}>
+              <div
+                onClick={() => toggleConversationVisible(conversation.phone)}
+              >
+                <PhoneFormatter>{conversation.phone}</PhoneFormatter>
+              </div>
+              <Button
+                type="danger"
+                shape="circle-outline"
+                onClick={() => closeConversation(conversation.phone)}
+              >
+                X
+              </Button>
+            </div>
+          ) : null
+        }
         style={{
-          width: conversation.open ? "400px" : "125px",
+          width: conversation.open ? "400px" : "175px",
           margin: "0px 10px"
         }}
         size="small"
-        onClick={() => toggleConversationVisible(conversation.id)}
       >
         {conversation.open ? (
-          <div className="messages" style={{ height: "400px" }}>
+          <div>
-            <ul>
+            <div className="messages" style={{ height: "400px" }}>
-              {conversations.map(item => (
+              <ul>
-                <li
+                {messages.map(item => (
-                  key={item.sid}
+                  <li
-                  className={`${
+                    key={item.sid}
-                    item.direction === "inbound" ? "replies" : "sent"
+                    className={`${
-                  }`}
+                      item.direction === "inbound" ? "sent" : "replies"
-                >
+                    }`}
-                  <p> {item.body}</p>
+                  >
-                </li>
+                    <p> {item.body}</p>
-              ))}
+                  </li>
-            </ul>
+                ))}
+              </ul>
+            </div>
+            <Input.Search
+              placeholder={t("messaging.labels.typeamessage")}
+              enterButton={<Icon component={MdSend} />}
+            />
           </div>
         ) : (
-          <PhoneFormatter>{conversation.phone}</PhoneFormatter>
+          <div style={{ display: "flex" }}>
+            <div onClick={() => toggleConversationVisible(conversation.phone)}>
+              <PhoneFormatter>{conversation.phone}</PhoneFormatter>
+            </div>
+            <Button
+              type="dashed"
+              shape="circle-outline"
+              onClick={() => closeConversation(conversation.phone)}
+            >
+              X
+            </Button>
+          </div>
         )}
       </Card>
     </div>

client/src/components/chat-open-button/chat-open-button.component.jsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { openConversation } from "../../redux/messaging/messaging.actions";
+import { Icon } from "antd";
+const mapStateToProps = createStructuredSelector({
+  //currentUser: selectCurrentUser
+});
+const mapDispatchToProps = dispatch => ({
+  openConversation: phone => dispatch(openConversation(phone))
+});
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(function ChatOpenButton({ openConversation, phone }) {
+  return (
+    <Icon
+      style={{ margin: 4 }}
+      type="message"
+      onClick={() => openConversation(phone)}
+    />
+  );
+});

client/src/components/chat-overlay/chat-overlay.container.jsx

@@ -1,4 +1,4 @@
-import { Affix, Button, Badge } from "antd";
+import { Affix, Badge } from "antd";
 import React from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -7,8 +7,8 @@ import {
   selectChatVisible,
   selectConversations
 } from "../../redux/messaging/messaging.selectors";
-import ChatOverlayComponent from "./chat-overlay.component";
 import ChatConversationContainer from "../chat-conversation/chat-conversation.container";
+import ChatOverlayComponent from "./chat-overlay.component";
 
 const mapStateToProps = createStructuredSelector({
   chatVisible: selectChatVisible,
@@ -26,9 +26,8 @@ export default connect(
   toggleChatVisible,
   conversations
 }) {
-  console.log("conversations", conversations);
   return (
-    <Affix offsetBottom={25} style={{ padding: "10px, 10px, 10px, 10px" }}>
+    <Affix offsetBottom={0}>
       <div>
         <Badge count={10}>
           <ChatOverlayComponent
@@ -38,7 +37,7 @@ export default connect(
         </Badge>
         {conversations
           ? conversations.map((conversation, idx) => (
-              <Badge count={5}>
+              <Badge key={idx} count={5}>
                 <ChatConversationContainer conversation={conversation} />
               </Badge>
             ))

client/src/components/jobs-list/jobs-list.component.jsx

@@ -1,11 +1,11 @@
-import { Input, Table, Icon, Button } from "antd";
+import { Button, Icon, Input, Table } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Link } from "react-router-dom";
+import { Link, withRouter } from "react-router-dom";
+import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import PhoneFormatter from "../../utils/PhoneFormatter";
 import { alphaSort } from "../../utils/sorters";
-import { withRouter } from "react-router-dom";
+import StartChatButton from "../chat-open-button/chat-open-button.component";
-import CurrencyFormatter from "../../utils/CurrencyFormatter";
 
 export default withRouter(function JobsList({
   searchTextState,
@@ -78,13 +78,7 @@ export default withRouter(function JobsList({
         return record.ownr_ph1 ? (
           <span>
             <PhoneFormatter>{record.ownr_ph1}</PhoneFormatter>
-            <Icon
+            <StartChatButton phone={record.ownr_ph1} />
-              style={{ margin: 4 }}
-              type='message'
-              onClick={() => {
-                alert("SMSing will happen here.");
-              }}
-            />
           </span>
         ) : (
           t("general.labels.unknown")
@@ -214,10 +208,10 @@ export default withRouter(function JobsList({
           return (
             <div style={{ display: "flex" }}>
               <Button onClick={() => refetch()}>
-                <Icon type='sync' />
+                <Icon type="sync" />
               </Button>
               <Input.Search
-                placeholder='Search...'
+                placeholder="Search..."
                 onChange={e => {
                   setSearchText(e.target.value);
                 }}
@@ -226,10 +220,10 @@ export default withRouter(function JobsList({
             </div>
           );
         }}
-        size='small'
+        size="small"
         pagination={{ position: "top" }}
         columns={columns.map(item => ({ ...item }))}
-        rowKey='id'
+        rowKey="id"
         dataSource={jobs}
         rowSelection={{ selectedRowKeys: [selectedJob] }}
         onChange={handleTableChange}

client/src/pages/jobs/jobs.page.jsx

@@ -34,10 +34,8 @@ export default connect(
   const [selectedJob, setSelectedJob] = useState(hash ? hash.substr(1) : null);
   const searchTextState = useState("");
   const searchText = searchTextState[0];
-  if (error) return <AlertComponent message={error.message} type='error' />;
+  if (error) return <AlertComponent message={error.message} type="error" />;
-  //TODO Implement pagination for this.
 
-  console.log(typeof searchText);
   return (
     <div>
       <JobsList

client/src/pages/manage/manage.page.jsx

@@ -135,9 +135,9 @@ export default function Manage({ match }) {
         </Content>
       </Layout>
       <Footer>
-        <FooterComponent /> <ChatWindowContainer />
+        <FooterComponent />
       </Footer>
-
+      <ChatWindowContainer />
       <BackTop />
     </Layout>
   );

client/src/redux/messaging/messaging.actions.js

@@ -9,3 +9,13 @@ export const toggleConversationVisible = conversationId => ({
   type: MessagingActionTypes.TOGGLE_CONVERSATION_VISIBLE,
   payload: conversationId
 });
+
+export const openConversation = phone => ({
+  type: MessagingActionTypes.OPEN_CONVERSATION,
+  payload: phone
+});
+
+export const closeConversation = phone => ({
+  type: MessagingActionTypes.CLOSE_CONVERSATION,
+  payload: phone
+});

client/src/redux/messaging/messaging.reducer.js

@@ -3,8 +3,8 @@ import MessagingActionTypes from "./messaging.types";
 const INITIAL_STATE = {
   visible: false,
   conversations: [
-    { id: 1, phone: "6049992002", open: false },
+    { phone: "6049992002", open: false },
-    { id: 2, phone: "6049992991", open: false }
+    { phone: "6049992991", open: false }
   ]
 };
 
@@ -21,20 +21,33 @@ const messagingReducer = (state = INITIAL_STATE, action) => {
         visible: true
       };
     case MessagingActionTypes.OPEN_CONVERSATION:
-      return {
+      if (state.conversations.find(c => c.phone === action.payload))
-        ...state,
+        return {
-        conversations: [...state.conversations, action.payload]
+          ...state,
-      };
+          conversations: state.conversations.map(c =>
+            c.phone === action.payload ? { ...c, open: true } : c
+          )
+        };
+      else
+        return {
+          ...state,
+          conversations: [
+            ...state.conversations,
+            { phone: action.payload, open: true }
+          ]
+        };
     case MessagingActionTypes.CLOSE_CONVERSATION:
       return {
         ...state,
-        conversations: state.conversations.filter(c => c !== action.paylod)
+        conversations: state.conversations.filter(
+          c => c.phone !== action.payload
+        )
       };
     case MessagingActionTypes.TOGGLE_CONVERSATION_VISIBLE:
       return {
         ...state,
         conversations: state.conversations.map(c =>
-          c.id === action.payload ? { ...c, open: !c.open } : c
+          c.phone === action.payload ? { ...c, open: !c.open } : c
         )
       };
     default:

client/src/translations/en_us/common.json

@@ -339,7 +339,8 @@
 		},
 		"messaging": {
 			"labels": {
-				"messaging": "Messaging"
+				"messaging": "Messaging",
+				"typeamessage": "Send a message..."
 			}
 		},
 		"notes": {

client/src/translations/es/common.json

@@ -339,7 +339,8 @@
 		},
 		"messaging": {
 			"labels": {
-				"messaging": "Mensajería"
+				"messaging": "Mensajería",
+				"typeamessage": "Enviar un mensaje..."
 			}
 		},
 		"notes": {

client/src/translations/fr/common.json

@@ -339,7 +339,8 @@
 		},
 		"messaging": {
 			"labels": {
-				"messaging": "Messagerie"
+				"messaging": "Messagerie",
+				"typeamessage": "Envoyer un message..."
 			}
 		},
 		"notes": {