General formatting for messaging + reshaping of messaging components and their structure.

bodyshop_translations.babel

@@ -1,4 +1,4 @@
-<babeledit_project be_version="2.6.1" version="1.2">
+<babeledit_project version="1.2" be_version="2.6.1">
     <!--
 
     BabelEdit project file
@@ -5319,6 +5319,37 @@
                             </folder_node>
                         </children>
                     </folder_node>
+                    <folder_node>
+                        <name>messaging</name>
+                        <children>
+                            <folder_node>
+                                <name>labels</name>
+                                <children>
+                                    <concept_node>
+                                        <name>messaging</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>
+                    </folder_node>
                     <folder_node>
                         <name>notes</name>
                         <children>

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

@@ -0,0 +1,77 @@
+import { Card } 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 PhoneFormatter from "../../utils/PhoneFormatter";
+import "./chat-conversation.styles.scss"; //https://bootsnipp.com/snippets/exR5v
+
+const client = twilio(
+  "ACf1b1aaf0e04740828b49b6e58467d787",
+  "0bea5e29a6d77593183ab1caa01d23de"
+);
+
+const mapStateToProps = createStructuredSelector({
+  //currentUser: selectCurrentUser
+});
+const mapDispatchToProps = dispatch => ({
+  toggleConversationVisible: conversationId =>
+    dispatch(toggleConversationVisible(conversationId))
+});
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(function ChatConversationComponent({
+  conversation,
+  toggleConversationVisible
+}) {
+  const [conversations, setConversations] = useState([]);
+
+  useEffect(() => {
+    client.messages.list({ limit: 20 }, (error, items) => {
+      setConversations(
+        items.reduce((acc, value) => {
+          acc.push({
+            sid: value.sid,
+            direction: value.direction,
+            body: value.body
+          });
+          return acc;
+        }, [])
+      );
+    });
+    return () => {};
+  }, [setConversations]);
+  return (
+    <div>
+      <Card
+        style={{
+          width: conversation.open ? "400px" : "125px",
+          margin: "0px 10px"
+        }}
+        size="small"
+        onClick={() => toggleConversationVisible(conversation.id)}
+      >
+        {conversation.open ? (
+          <div className="messages" style={{ height: "400px" }}>
+            <ul>
+              {conversations.map(item => (
+                <li
+                  key={item.sid}
+                  className={`${
+                    item.direction === "inbound" ? "replies" : "sent"
+                  }`}
+                >
+                  <p> {item.body}</p>
+                </li>
+              ))}
+            </ul>
+          </div>
+        ) : (
+          <PhoneFormatter>{conversation.phone}</PhoneFormatter>
+        )}
+      </Card>
+    </div>
+  );
+});

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

@@ -0,0 +1,17 @@
+import React from "react";
+import ChatConversationComponent from "./chat-conversation.component";
+
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+const mapStateToProps = createStructuredSelector({
+  //currentUser: selectCurrentUser
+});
+const mapDispatchToProps = dispatch => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(function ChatConversationContainer({ conversation }) {
+  return <ChatConversationComponent conversation={conversation} />;
+});

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

@@ -0,0 +1,36 @@
+import { Badge, Card, Icon } from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
+export default function ChatWindowComponent({
+  chatVisible,
+  toggleChatVisible
+}) {
+  const { t } = useTranslation();
+  return (
+    <div>
+      <Badge count={5}>
+        <Card
+          onClick={() => toggleChatVisible()}
+          style={{
+            width: chatVisible ? "300px" : "125px",
+            margin: "0px 10px"
+          }}
+          size="small"
+        >
+          {chatVisible ? (
+            <div className="messages" style={{ height: "400px" }}>
+              List of chats here.
+            </div>
+          ) : (
+            <div>
+              <Icon type="message" />
+              <strong style={{ paddingLeft: "10px" }}>
+                {t("messaging.labels.messaging")}
+              </strong>
+            </div>
+          )}
+        </Card>
+      </Badge>
+    </div>
+  );
+}

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

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

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

@@ -1,53 +0,0 @@
-import { Card } from "antd";
-import React, { useState, useEffect } from "react";
-import "./chat-window.styles.scss"; //https://bootsnipp.com/snippets/exR5v
-import twilio from "twilio";
-// const client = require("twilio")(
-//   "ACf1b1aaf0e04740828b49b6e58467d787",
-//   "0bea5e29a6d77593183ab1caa01d23de"
-// );
-const client = twilio(
-  "ACf1b1aaf0e04740828b49b6e58467d787",
-  "0bea5e29a6d77593183ab1caa01d23de"
-);
-export default function ChatWindowComponent({ toggleChatVisible }) {
-  const [conversations, setConversations] = useState([]);
-
-  useEffect(() => {
-    client.messages.list({ limit: 20 }, (error, items) => {
-      setConversations(
-        items.reduce((acc, value) => {
-          acc.push({
-            sid: value.sid,
-            direction: value.direction,
-            body: value.body
-          });
-          return acc;
-        }, [])
-      );
-    });
-    return () => {};
-  }, [setConversations]);
-
-  console.log(conversations);
-  return (
-    <Card style={{ width: "400px" }}>
-      <div>
-        <button onClick={() => toggleChatVisible()}>X</button>
-        <div className='messages' style={{ height: "400px" }}>
-          <ul>
-            {conversations.map(item => (
-              <li
-                key={item.sid}
-                className={`${
-                  item.direction === "inbound" ? "replies" : "sent"
-                }`}>
-                <p> {item.body}</p>
-              </li>
-            ))}
-          </ul>
-        </div>
-      </div>
-    </Card>
-  );
-}

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

@@ -1,37 +0,0 @@
-import { Affix, Button, Badge } from "antd";
-import React from "react";
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
-import { toggleChatVisible } from "../../redux/messaging/messaging.actions";
-import { selectChatVisible } from "../../redux/messaging/messaging.selectors";
-import ChatWindowComponent from "./chat-window.component";
-
-const mapStateToProps = createStructuredSelector({
-  chatVisible: selectChatVisible
-});
-
-const mapDispatchToProps = dispatch => ({
-  toggleChatVisible: () => dispatch(toggleChatVisible())
-});
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(function ChatWindowContainer({ chatVisible, toggleChatVisible }) {
-  return (
-    <Affix offsetBottom={25}>
-      {chatVisible ? (
-        <ChatWindowComponent toggleChatVisible={toggleChatVisible} />
-      ) : (
-        <Badge count={5}>
-          <Button
-            type='primary'
-            shape='circle'
-            icon='message'
-            onClick={() => toggleChatVisible()}
-          />
-        </Badge>
-      )}
-    </Affix>
-  );
-});

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

@@ -25,7 +25,7 @@ const JobsAvailablePage = lazy(() =>
   import("../jobs-available/jobs-available.page.container")
 );
 const ChatWindowContainer = lazy(() =>
-  import("../../components/chat-window/chat-window.container")
+  import("../../components/chat-overlay/chat-overlay.container")
 );
 const ScheduleContainer = lazy(() =>
   import("../schedule/schedule.page.container")
@@ -65,13 +65,15 @@ export default function Manage({ match }) {
       </Header>
       <Layout>
         <Content
-          className='content-container'
+          className="content-container"
-          style={{ padding: "0em 4em 4em" }}>
+          style={{ padding: "0em 4em 4em" }}
+        >
           <ErrorBoundary>
             <Suspense
               fallback={
                 <LoadingSpinner message={t("general.labels.loadingapp")} />
-              }>
+              }
+            >
               DELETE THIS
               <Test />
               <EmailOverlayContainer />
@@ -133,14 +135,9 @@ export default function Manage({ match }) {
         </Content>
       </Layout>
       <Footer>
-        <FooterComponent />
+        <FooterComponent /> <ChatWindowContainer />
-        {
-          //  <Affix offsetBottom={20}>
-          //   <ChatWindowContainer />
-          // </Affix>
-        }
-        <ChatWindowContainer />
       </Footer>
+
       <BackTop />
     </Layout>
   );

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

@@ -1,7 +1,11 @@
-import MessagingActionTypes from './messaging.types' 
+import MessagingActionTypes from "./messaging.types";
 
 export const toggleChatVisible = () => ({
-  type: MessagingActionTypes.TOGGLE_CHAT_VISIBLE,
+  type: MessagingActionTypes.TOGGLE_CHAT_VISIBLE
   //payload: user
 });
 
+export const toggleConversationVisible = conversationId => ({
+  type: MessagingActionTypes.TOGGLE_CONVERSATION_VISIBLE,
+  payload: conversationId
+});

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

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

client/src/redux/messaging/messaging.selectors.js

@@ -6,3 +6,8 @@ export const selectChatVisible = createSelector(
   [selectMessaging],
   messaging => messaging.visible
 );
+
+export const selectConversations = createSelector(
+  [selectMessaging],
+  messaging => messaging.conversations
+);

client/src/redux/messaging/messaging.types.js

@@ -1,5 +1,9 @@
 const MessagingActionTypes = {
   TOGGLE_CHAT_VISIBLE: "TOGGLE_CHAT_VISIBLE",
-  SET_CHAT_VISIBLE: "SET_CHAT_VISIBLE"
+  SET_CHAT_VISIBLE: "SET_CHAT_VISIBLE",
+  OPEN_CONVERSATION: "OPEN_CONVERSATION",
+  CLOSE_CONVERSATION: "CLOSE_CONVERSATION",
+  TOGGLE_CONVERSATION_VISIBLE: "TOGGLE_CONVERSATION_VISIBLE",
+  SEND_MESSAGE: "SEND_MESSAGE"
 };
 export default MessagingActionTypes;

client/src/redux/root.reducer.js

@@ -10,7 +10,7 @@ const persistConfig = {
   key: "root",
   storage,
   //whitelist: ["user"]
-  blacklist: ["user", "email"]
+  blacklist: ["user", "email", "messaging"]
 };
 
 const rootReducer = combineReducers({

client/src/translations/en_us/common.json

@@ -337,6 +337,11 @@
 				"shops": "My Shops"
 			}
 		},
+		"messaging": {
+			"labels": {
+				"messaging": "Messaging"
+			}
+		},
 		"notes": {
 			"actions": {
 				"actions": "Actions",

client/src/translations/es/common.json

@@ -337,6 +337,11 @@
 				"shops": "Mis tiendas"
 			}
 		},
+		"messaging": {
+			"labels": {
+				"messaging": "Mensajería"
+			}
+		},
 		"notes": {
 			"actions": {
 				"actions": "Comportamiento",

client/src/translations/fr/common.json

@@ -337,6 +337,11 @@
 				"shops": "Mes boutiques"
 			}
 		},
+		"messaging": {
+			"labels": {
+				"messaging": "Messagerie"
+			}
+		},
 		"notes": {
 			"actions": {
 				"actions": "actes",