Fixed up some messaging layout issues. BOD-78

2020-07-14 17:26:22 -07:00
parent 2eb8360f5d
commit 5d1876e277
18 changed files with 222 additions and 178 deletions
--- a/bodyshop_translations.babel
+++ b/bodyshop_translations.babel
@@ -14308,6 +14308,27 @@
                                            </translation>
                                        </translations>
                                    </concept_node>
+                                    <concept_node>
+                                        <name>nojobs</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>
                                    <concept_node>
                                        <name>typeamessage</name>
                                        <definition_loaded>false</definition_loaded>
--- a/client/src/components/chat-conversation-list/chat-conversation-list.component.jsx
+++ b/client/src/components/chat-conversation-list/chat-conversation-list.component.jsx
@@ -1,10 +1,12 @@
-import { Badge, List } from "antd";
+import { Badge, List, Avatar } from "antd";
 import React from "react";
 import { connect } from "react-redux";
 import { setSelectedConversation } from "../../redux/messaging/messaging.actions";
 import { selectSelectedConversation } from "../../redux/messaging/messaging.selectors";
 import { createStructuredSelector } from "reselect";
 import "./chat-conversation-list.styles.scss";
+import { useTranslation } from "react-i18next";
+import PhoneFormatter from "../../utils/PhoneFormatter";

 const mapStateToProps = createStructuredSelector({
  selectedConversation: selectSelectedConversation,
@@ -20,9 +22,12 @@ export function ChatConversationListComponent({
  selectedConversation,
  setSelectedConversation,
 }) {
+  const { t } = useTranslation();
+
  return (
    <List
      bordered
+      size="small"
      dataSource={conversationList}
      renderItem={(item) => (
        <List.Item
@@ -31,8 +36,25 @@ export function ChatConversationListComponent({
            item.id === selectedConversation
              ? "chat-list-selected-conversation"
              : null
-          }`}>
-          {item.phone_num}
+          }`}
+        >
+          <List.Item.Meta
+            title={<PhoneFormatter>{item.phone_num}</PhoneFormatter>}
+            description={
+              item.job_conversations.length > 0 ? (
+                <div>
+                  {item.job_conversations.map(
+                    (j) =>
+                      `${j.job.ownr_fn || ""} ${j.job.ownr_ln || ""} ${
+                        j.job.ownr_co_nm || ""
+                      }`
+                  )}
+                </div>
+              ) : (
+                t("messaging.labels.nojobs")
+              )
+            }
+          />
          <Badge count={item.messages_aggregate.aggregate.count || 0} />
        </List.Item>
      )}
--- a/client/src/components/chat-conversation-title/chat-conversation-title.component.jsx
+++ b/client/src/components/chat-conversation-title/chat-conversation-title.component.jsx
@@ -1,17 +1,31 @@
 import React from "react";
 import ChatTagRoContainer from "../chat-tag-ro/chat-tag-ro.container";
 import ChatConversationTitleTags from "../chat-conversation-title-tags/chat-conversation-title-tags.component";
+import { Typography, Space } from "antd";

 export default function ChatConversationTitle({ conversation }) {
+  console.log("ChatConversationTitle -> conversation", conversation);
  return (
-    <div style={{ display: "flex" }}>
-      {conversation && conversation.phone_num}
-      <ChatConversationTitleTags
-        jobConversations={
-          (conversation && conversation.job_conversations) || []
-        }
-      />
-      <ChatTagRoContainer conversation={conversation || []} />
+    <div>
+      <Space>
+        <strong>{conversation && conversation.phone_num}</strong>
+        <span>
+          {conversation.job_conversations.map(
+            (j) =>
+              `${j.job.ownr_fn || ""} ${j.job.ownr_ln || ""} ${
+                j.job.ownr_co_nm || ""
+              } | `
+          )}
+        </span>
+      </Space>
+      <div className="imex-flex-row imex-flex-row__margin">
+        <ChatConversationTitleTags
+          jobConversations={
+            (conversation && conversation.job_conversations) || []
+          }
+        />
+        <ChatTagRoContainer conversation={conversation || []} />
+      </div>
    </div>
  );
 }
--- a/client/src/components/chat-conversation/chat-conversation.component.jsx
+++ b/client/src/components/chat-conversation/chat-conversation.component.jsx
@@ -16,14 +16,6 @@ export default function ChatConversationComponent({
  if (loading) return <LoadingSkeleton />;
  if (error) return <AlertComponent message={error.message} type="error" />;

-  // const unreadCount =
-  //   (conversation &&
-  //     conversation &&
-  //     conversation.messages_aggregate &&
-  //     conversation.messages_aggregate.aggregate &&
-  //     conversation.messages_aggregate.aggregate.count) ||
-  //   0;
-
  const messages = (conversation && conversation.messages) || [];

  return (
--- a/client/src/components/chat-conversation/chat-conversation.styles.scss
+++ b/client/src/components/chat-conversation/chat-conversation.styles.scss
@@ -1,5 +1,6 @@
 .chat-conversation {
  display: flex;
  height: 100%;
+  margin: 0rem 0.5rem;
  flex-direction: column;
 }
--- a/client/src/components/chat-messages-list/chat-message-list.component.jsx
+++ b/client/src/components/chat-messages-list/chat-message-list.component.jsx
@@ -1,6 +1,12 @@
-import { CheckCircleOutlined, CheckOutlined } from "@ant-design/icons";
+import Icon from "@ant-design/icons";
+import { FaCheck, FaCheckDouble } from "react-icons/fa";
 import React, { useEffect, useRef } from "react";
-import { AutoSizer, CellMeasurer, CellMeasurerCache, List } from "react-virtualized";
+import {
+  AutoSizer,
+  CellMeasurer,
+  CellMeasurerCache,
+  List,
+} from "react-virtualized";
 import "./chat-message-list.styles.scss";

 export default function ChatMessageListComponent({ messages }) {
@@ -8,11 +14,12 @@ export default function ChatMessageListComponent({ messages }) {

  const _cache = new CellMeasurerCache({
    fixedWidth: true,
-    minHeight: 20,
+    minHeight: 25,
+    defaultHeight: 50,
  });

  const scrollToBottom = () => {
-    console.log("SCrolling to", messages.length);
+    console.log("Scrolling to", messages.length);
    !!virtualizedListRef.current &&
      virtualizedListRef.current.scrollToRow(messages.length - 1);

@@ -26,37 +33,38 @@ export default function ChatMessageListComponent({ messages }) {
    return (
      <CellMeasurer cache={_cache} key={key} rowIndex={index} parent={parent}>
        {({ measure, registerChild }) => (
-          <li
+          <div
            ref={registerChild}
+            onLoad={measure}
            style={style}
-            className={`${messages[index].isoutbound ? "replies" : "sent"}`}
+            className={`${
+              messages[index].isoutbound ? "mine messages" : "yours messages"
+            }`}
          >
-            <p onLoad={measure}>
-              {messages[index].text}
-              {StatusRender(messages[index].status)}
-            </p>
-          </li>
+            <div className="message msgmargin">
+              <span>{messages[index].text}</span>
+            </div>
+            {StatusRender(messages[index].status)}
+          </div>
        )}
      </CellMeasurer>
    );
  };

  return (
-    <div className="messages">
-      <ul>
-        <AutoSizer>
-          {({ height, width }) => (
-            <List
-              ref={virtualizedListRef}
-              width={width}
-              height={height}
-              rowHeight={_cache.rowHeight}
-              rowRenderer={_rowRenderer}
-              rowCount={messages.length}
-            />
-          )}
-        </AutoSizer>
-      </ul>
+    <div className="chat">
+      <AutoSizer>
+        {({ height, width }) => (
+          <List
+            ref={virtualizedListRef}
+            width={width}
+            height={height}
+            rowHeight={_cache.rowHeight}
+            rowRenderer={_rowRenderer}
+            rowCount={messages.length}
+          />
+        )}
+      </AutoSizer>
    </div>
  );
 }
@@ -64,9 +72,9 @@ export default function ChatMessageListComponent({ messages }) {
 const StatusRender = (status) => {
  switch (status) {
    case "sent":
-      return <CheckOutlined style={{ margin: "2px", float: "right" }} />;
+      return <Icon component={FaCheck} className="message-icon" />;
    case "delivered":
-      return <CheckCircleOutlined style={{ margin: "2px", float: "right" }} />;
+      return <Icon component={FaCheckDouble} className="message-icon" />;
    default:
      return null;
  }
--- a/client/src/components/chat-messages-list/chat-message-list.styles.scss
+++ b/client/src/components/chat-messages-list/chat-message-list.styles.scss
@@ -1,134 +1,103 @@
-.messages {
-  //flex-grow: 1;
-  flex: 1;
-  //   height: 100%;
-  //   min-height: calc(100% - 10px);
-  //   max-height: calc(100% - 93px);
-  //   // overflow-y: scroll;
-  //   // overflow-x: hidden;
+.message-icon {
+  position: absolute;
+  bottom: 0rem;
+  color: seagreen;
+  border: black;
+  // z-index: 5;
 }

-// @media screen and (max-width: 735px) {
-//   .messages {
-//     max-height: calc(100% - 105px);
-//   }
-// }
-// .messages::-webkit-scrollbar {
-//   width: 8px;
-//   background: transparent;
-// }
-// .messages::-webkit-scrollbar-thumb {
-//   background-color: rgba(0, 0, 0, 0.3);
-// }
-.messages ul {
-  height: 100%;
+.chat {
+  flex: 1;
+  //width: 300px;
+  //border: solid 1px #eee;
+  display: flex;
+  flex-direction: column;
+  //padding: 10px;
 }
-.messages ul li {
-  display: inline-block;
-  // clear: both;
-  //float: left;
-  // margin: 5px;
-  //width: calc(100% - 25px);
-  // font-size: 0.9em;
+
+.messages {
+  //margin-top: 30px;
+  display: flex;
+  flex-direction: column;
 }
-.messages ul li:nth-last-child(1) {
-  margin-bottom: 20px;
-}
-.messages ul li.sent img {
-  margin: 6px 8px 0 0;
-}
-.messages ul li.sent p {
-  background: #435f7a;
-  color: #f5f5f5;
-}
-.messages ul li.replies img {
-  float: right;
-  margin: 6px 0 0 8px;
-}
-.messages ul li.replies p {
-  background: #f5f5f5;
-  float: right;
-}
-.messages ul li img {
-  width: 22px;
-  border-radius: 50%;
-  float: left;
-}
-.messages ul li p {
-  display: inline-block;
-  margin: 0px;
-  padding: 0px 10px;
+
+.message {
  border-radius: 20px;
-  max-width: 205px;
-  //line-height: 130%;
+  padding: 0.25rem 0.8rem;
+  //margin-top: 5px;
+  // margin-bottom: 5px;
+  display: inline-block;
 }
-@media screen and (min-width: 735px) {
-  .messages ul li p {
-    max-width: 300px;
-  }
+
+.yours {
+  align-items: flex-start;
 }
-.message-input {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  z-index: 99;
+.msgmargin {
+  margin-top: 0.1rem;
 }
-.message-input .wrap {
+
+.yours .message {
+  margin-right: 25%;
+  background-color: #eee;
  position: relative;
 }
-.message-input .wrap input {
-  font-family: "proxima-nova", "Source Sans Pro", sans-serif;
-  float: left;
-  border: none;
-  width: calc(100% - 90px);
-  padding: 11px 32px 10px 8px;
-  font-size: 0.8em;
-  color: #32465a;
-}
-@media screen and (max-width: 735px) {
-  .message-input .wrap input {
-    padding: 15px 32px 16px 8px;
-  }
-}
-.message-input .wrap input:focus {
-  outline: none;
-}
-.message-input .wrap .attachment {
+
+.yours .message.last:before {
+  content: "";
  position: absolute;
-  right: 60px;
-  z-index: 4;
-  margin-top: 10px;
-  font-size: 1.1em;
-  color: #435f7a;
-  opacity: 0.5;
-  cursor: pointer;
+  z-index: 0;
+  bottom: 0;
+  left: -7px;
+  height: 20px;
+  width: 20px;
+  background: #eee;
+  border-bottom-right-radius: 15px;
 }
-@media screen and (max-width: 735px) {
-  .message-input .wrap .attachment {
-    margin-top: 17px;
-    right: 65px;
-  }
+.yours .message.last:after {
+  content: "";
+  position: absolute;
+  z-index: 1;
+  bottom: 0;
+  left: -10px;
+  width: 10px;
+  height: 20px;
+  background: white;
+  border-bottom-right-radius: 10px;
 }
-.message-input .wrap .attachment:hover {
-  opacity: 1;
+
+.mine {
+  align-items: flex-end;
 }
-.message-input .wrap button {
-  float: right;
-  border: none;
-  width: 50px;
-  padding: 12px 0;
-  cursor: pointer;
-  background: #32465a;
-  color: #f5f5f5;
+
+.mine .message {
+  color: white;
+  margin-left: 25%;
+  background: linear-gradient(to bottom, #00d0ea 0%, #0085d1 100%);
+  background-attachment: fixed;
+  position: relative;
 }
-@media screen and (max-width: 735px) {
-  .message-input .wrap button {
-    padding: 16px 0;
-  }
+
+.mine .message.last:before {
+  content: "";
+  position: absolute;
+  z-index: 0;
+  bottom: 0;
+  right: -8px;
+  height: 20px;
+  width: 20px;
+  background: linear-gradient(to bottom, #00d0ea 0%, #0085d1 100%);
+  background-attachment: fixed;
+  border-bottom-left-radius: 15px;
 }
-.message-input .wrap button:hover {
-  background: #435f7a;
-}
-.message-input .wrap button:focus {
-  outline: none;
+
+.mine .message.last:after {
+  content: "";
+  position: absolute;
+  z-index: 1;
+  bottom: 0;
+  right: -10px;
+  width: 10px;
+  height: 20px;
+  background: white;
+  border-bottom-left-radius: 10px;
 }
--- a/client/src/components/chat-popup/chat-popup.component.jsx
+++ b/client/src/components/chat-popup/chat-popup.component.jsx
@@ -1,5 +1,5 @@
 import { ShrinkOutlined } from "@ant-design/icons";
-import { Col, Row } from "antd";
+import { Col, Row, Typography } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -25,15 +25,13 @@ export function ChatPopupComponent({
  const { t } = useTranslation();
  return (
    <div className="chat-popup">
-      <div style={{ overflow: "auto" }}>
-        <strong style={{ float: "left" }}>
-          {t("messaging.labels.messaging")}
-        </strong>
-        <ShrinkOutlined
-          onClick={() => toggleChatVisible()}
-          style={{ float: "right" }}
-        />
-      </div>
+      <Typography.Title level={4}>
+        {t("messaging.labels.messaging")}
+      </Typography.Title>
+      <ShrinkOutlined
+        onClick={() => toggleChatVisible()}
+        style={{ position: "absolute", right: ".5rem", top: ".5rem" }}
+      />

      <Row className="chat-popup-content">
        <Col span={8}>
--- a/client/src/components/chat-popup/chat-popup.styles.scss
+++ b/client/src/components/chat-popup/chat-popup.styles.scss
@@ -1,8 +1,11 @@
 .chat-popup {
  width: 40vw;
  height: 50vh;
+  display: flex;
+  flex-direction: column;
 }

 .chat-popup-content {
-  height: 100%;
+  //height: 50vh;
+  flex: 1;
 }
--- a/client/src/components/chat-send-message/chat-send-message.component.jsx
+++ b/client/src/components/chat-send-message/chat-send-message.component.jsx
@@ -42,7 +42,7 @@ function ChatSendMessageComponent({
  };

  return (
-    <div style={{ display: "flex ", padding: "1em" }}>
+    <div style={{ display: "flex " }}>
      <Input.TextArea
        allowClear
        autoFocus
--- a/client/src/components/error-boundary/error-boundary.component.jsx
+++ b/client/src/components/error-boundary/error-boundary.component.jsx
@@ -23,7 +23,6 @@ class ErrorBoundary extends React.Component {
  }

  render() {
-    console.log("this.state", this.state);
    const { t } = this.props;
    if (this.state.hasErrored === true) {
      return (
--- a/client/src/graphql/conversations.queries.js
+++ b/client/src/graphql/conversations.queries.js
@@ -5,6 +5,15 @@ export const CONVERSATION_LIST_SUBSCRIPTION = gql`
    conversations {
      phone_num
      id
+      job_conversations {
+        job {
+          id
+          ro_number
+          ownr_fn
+          ownr_ln
+          ownr_co_nm
+        }
+      }
      messages_aggregate(
        where: { read: { _eq: false }, isoutbound: { _eq: false } }
      ) {
@@ -39,6 +48,9 @@ export const CONVERSATION_SUBSCRIPTION_BY_PK = gql`
        conversationid
        job {
          id
+          ownr_fn
+          ownr_ln
+          ownr_co_nm
          ro_number
        }
      }
--- a/client/src/translations/en_us/common.json
+++ b/client/src/translations/en_us/common.json
@@ -876,6 +876,7 @@
 			},
 			"labels": {
 				"messaging": "Messaging",
+				"nojobs": "Not associated to any job.",
 				"typeamessage": "Send a message..."
 			}
 		},
--- a/client/src/translations/es/common.json
+++ b/client/src/translations/es/common.json
@@ -876,6 +876,7 @@
 			},
 			"labels": {
 				"messaging": "Mensajería",
+				"nojobs": "",
 				"typeamessage": "Enviar un mensaje..."
 			}
 		},
--- a/client/src/translations/fr/common.json
+++ b/client/src/translations/fr/common.json
@@ -876,6 +876,7 @@
 			},
 			"labels": {
 				"messaging": "Messagerie",
+				"nojobs": "",
 				"typeamessage": "Envoyer un message..."
 			}
 		},
--- a/client/src/utils/PhoneFormatter.jsx
+++ b/client/src/utils/PhoneFormatter.jsx
@@ -6,7 +6,7 @@ export default function PhoneNumberFormatter(props) {
    <NumberFormat
      value={props.children}
      type="tel"
-      format="###-###-####"
+      format="+# (###)-###-####"
      displayType={"text"}
    />
  );
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
    "handlebars": "^4.7.6",
    "lodash": "^4.17.19",
    "moment": "^2.27.0",
+    "node-fetch": "^2.6.0",
    "nodemailer": "^6.4.10",
    "phone": "^2.4.13",
    "stripe": "^8.70.0",
--- a/server.js
+++ b/server.js
@@ -4,6 +4,7 @@ const bodyParser = require("body-parser");
 const path = require("path");
 const compression = require("compression");
 const twilio = require("twilio");
+global.fetch = require("node-fetch");
 //var enforce = require("express-sslify");

 require("dotenv").config({