From 5d1876e277733e4e8b94e05bd98082c4977bce19 Mon Sep 17 00:00:00 2001 From: Patrick Fic Date: Tue, 14 Jul 2020 17:26:22 -0700 Subject: [PATCH] Fixed up some messaging layout issues. BOD-78 --- bodyshop_translations.babel | 21 ++ .../chat-conversation-list.component.jsx | 28 ++- .../chat-conversation-title.component.jsx | 30 ++- .../chat-conversation.component.jsx | 8 - .../chat-conversation.styles.scss | 1 + .../chat-message-list.component.jsx | 64 +++--- .../chat-message-list.styles.scss | 203 ++++++++---------- .../chat-popup/chat-popup.component.jsx | 18 +- .../chat-popup/chat-popup.styles.scss | 5 +- .../chat-send-message.component.jsx | 2 +- .../error-boundary.component.jsx | 1 - client/src/graphql/conversations.queries.js | 12 ++ client/src/translations/en_us/common.json | 1 + client/src/translations/es/common.json | 1 + client/src/translations/fr/common.json | 1 + client/src/utils/PhoneFormatter.jsx | 2 +- package.json | 1 + server.js | 1 + 18 files changed, 222 insertions(+), 178 deletions(-) diff --git a/bodyshop_translations.babel b/bodyshop_translations.babel index e724e1926..62caf001f 100644 --- a/bodyshop_translations.babel +++ b/bodyshop_translations.babel @@ -14308,6 +14308,27 @@ + + nojobs + false + + + + + + en-US + false + + + es-MX + false + + + fr-CA + false + + + typeamessage false diff --git a/client/src/components/chat-conversation-list/chat-conversation-list.component.jsx b/client/src/components/chat-conversation-list/chat-conversation-list.component.jsx index e115116a9..e7eb370c5 100644 --- 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 ( ( - {item.phone_num} + }`} + > + {item.phone_num}} + description={ + item.job_conversations.length > 0 ? ( +
+ {item.job_conversations.map( + (j) => + `${j.job.ownr_fn || ""} ${j.job.ownr_ln || ""} ${ + j.job.ownr_co_nm || "" + }` + )} +
+ ) : ( + t("messaging.labels.nojobs") + ) + } + /> )} diff --git a/client/src/components/chat-conversation-title/chat-conversation-title.component.jsx b/client/src/components/chat-conversation-title/chat-conversation-title.component.jsx index 9486cbcc4..00c05f76a 100644 --- 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 ( -
- {conversation && conversation.phone_num} - - +
+ + {conversation && conversation.phone_num} + + {conversation.job_conversations.map( + (j) => + `${j.job.ownr_fn || ""} ${j.job.ownr_ln || ""} ${ + j.job.ownr_co_nm || "" + } | ` + )} + + +
+ + +
); } diff --git a/client/src/components/chat-conversation/chat-conversation.component.jsx b/client/src/components/chat-conversation/chat-conversation.component.jsx index 82e6de756..6f4237d5a 100644 --- 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 ; if (error) return ; - // const unreadCount = - // (conversation && - // conversation && - // conversation.messages_aggregate && - // conversation.messages_aggregate.aggregate && - // conversation.messages_aggregate.aggregate.count) || - // 0; - const messages = (conversation && conversation.messages) || []; return ( diff --git a/client/src/components/chat-conversation/chat-conversation.styles.scss b/client/src/components/chat-conversation/chat-conversation.styles.scss index 80d015f1e..59d37e06a 100644 --- 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; } diff --git a/client/src/components/chat-messages-list/chat-message-list.component.jsx b/client/src/components/chat-messages-list/chat-message-list.component.jsx index 8f89188ec..282c83940 100644 --- 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 ( {({ measure, registerChild }) => ( -
  • -

    - {messages[index].text} - {StatusRender(messages[index].status)} -

    -
    • +
    + {messages[index].text} +
    + {StatusRender(messages[index].status)} +
    )} ); }; return ( -
    -
      - - {({ height, width }) => ( - - )} - -
    +
    + + {({ height, width }) => ( + + )} +
    ); } @@ -64,9 +72,9 @@ export default function ChatMessageListComponent({ messages }) { const StatusRender = (status) => { switch (status) { case "sent": - return ; + return ; case "delivered": - return ; + return ; default: return null; } diff --git a/client/src/components/chat-messages-list/chat-message-list.styles.scss b/client/src/components/chat-messages-list/chat-message-list.styles.scss index e6e1bd8ce..93ac677f2 100644 --- 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; } diff --git a/client/src/components/chat-popup/chat-popup.component.jsx b/client/src/components/chat-popup/chat-popup.component.jsx index 4aafa9a3d..c631936fe 100644 --- 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 (
    -
    - - {t("messaging.labels.messaging")} - - toggleChatVisible()} - style={{ float: "right" }} - /> -
    + + {t("messaging.labels.messaging")} + + toggleChatVisible()} + style={{ position: "absolute", right: ".5rem", top: ".5rem" }} + /> diff --git a/client/src/components/chat-popup/chat-popup.styles.scss b/client/src/components/chat-popup/chat-popup.styles.scss index 11c0423cd..4b4f36d61 100644 --- 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; } diff --git a/client/src/components/chat-send-message/chat-send-message.component.jsx b/client/src/components/chat-send-message/chat-send-message.component.jsx index 2a284d781..ca43dbf73 100644 --- 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 ( -
    +
    ); diff --git a/package.json b/package.json index a2f557544..425a2cdab 100644 --- 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", diff --git a/server.js b/server.js index 7123bf153..eaf4a23f0 100644 --- 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({