admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed up some messaging layout issues. BOD-78

Browse Source
This commit is contained in:
Patrick Fic
2020-07-14 17:26:22 -07:00
parent 2eb8360f5d
commit 5d1876e277
18 changed files with 222 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
bodyshop_translations.babel
View File

@@ -14308,6 +14308,27 @@
</translation> </translation>
</translations> </translations>
</concept_node> </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> <concept_node>
<name>typeamessage</name> <name>typeamessage</name>
<definition_loaded>false</definition_loaded> <definition_loaded>false</definition_loaded>

28
client/src/components/chat-conversation-list/chat-conversation-list.component.jsx
View File

@@ -1,10 +1,12 @@
import { Badge, List } from "antd"; import { Badge, List, Avatar } from "antd";
import React from "react"; import React from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { setSelectedConversation } from "../../redux/messaging/messaging.actions"; import { setSelectedConversation } from "../../redux/messaging/messaging.actions";
import { selectSelectedConversation } from "../../redux/messaging/messaging.selectors"; import { selectSelectedConversation } from "../../redux/messaging/messaging.selectors";
import { createStructuredSelector } from "reselect"; import { createStructuredSelector } from "reselect";
import "./chat-conversation-list.styles.scss"; import "./chat-conversation-list.styles.scss";
import { useTranslation } from "react-i18next";
import PhoneFormatter from "../../utils/PhoneFormatter";
const mapStateToProps = createStructuredSelector({ const mapStateToProps = createStructuredSelector({
selectedConversation: selectSelectedConversation, selectedConversation: selectSelectedConversation,
@@ -20,9 +22,12 @@ export function ChatConversationListComponent({
selectedConversation, selectedConversation,
setSelectedConversation, setSelectedConversation,
}) { }) {
const { t } = useTranslation();
return ( return (
<List <List
bordered bordered
size="small"
dataSource={conversationList} dataSource={conversationList}
renderItem={(item) => ( renderItem={(item) => (
<List.Item <List.Item
@@ -31,8 +36,25 @@ export function ChatConversationListComponent({
item.id === selectedConversation item.id === selectedConversation
? "chat-list-selected-conversation" ? "chat-list-selected-conversation"
: null : 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} /> <Badge count={item.messages_aggregate.aggregate.count || 0} />
</List.Item> </List.Item>
)} )}

30
client/src/components/chat-conversation-title/chat-conversation-title.component.jsx
View File

@@ -1,17 +1,31 @@
import React from "react"; import React from "react";
import ChatTagRoContainer from "../chat-tag-ro/chat-tag-ro.container"; import ChatTagRoContainer from "../chat-tag-ro/chat-tag-ro.container";
import ChatConversationTitleTags from "../chat-conversation-title-tags/chat-conversation-title-tags.component"; import ChatConversationTitleTags from "../chat-conversation-title-tags/chat-conversation-title-tags.component";
import { Typography, Space } from "antd";
export default function ChatConversationTitle({ conversation }) { export default function ChatConversationTitle({ conversation }) {
console.log("ChatConversationTitle -> conversation", conversation);
return ( return (
<div style={{ display: "flex" }}> <div>
{conversation && conversation.phone_num} <Space>
<ChatConversationTitleTags <strong>{conversation && conversation.phone_num}</strong>
jobConversations={ <span>
(conversation && conversation.job_conversations) || [] {conversation.job_conversations.map(
} (j) =>
/> `${j.job.ownr_fn || ""} ${j.job.ownr_ln || ""} ${
<ChatTagRoContainer conversation={conversation || []} /> 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> </div>
); );
} }

8
client/src/components/chat-conversation/chat-conversation.component.jsx
View File

@@ -16,14 +16,6 @@ export default function ChatConversationComponent({
if (loading) return <LoadingSkeleton />; if (loading) return <LoadingSkeleton />;
if (error) return <AlertComponent message={error.message} type="error" />; 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) || []; const messages = (conversation && conversation.messages) || [];
return ( return (

1
client/src/components/chat-conversation/chat-conversation.styles.scss
View File

@@ -1,5 +1,6 @@
.chat-conversation { .chat-conversation {
display: flex; display: flex;
height: 100%; height: 100%;
margin: 0rem 0.5rem;
flex-direction: column; flex-direction: column;
} }

64
client/src/components/chat-messages-list/chat-message-list.component.jsx
View File

@@ -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 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"; import "./chat-message-list.styles.scss";
export default function ChatMessageListComponent({ messages }) { export default function ChatMessageListComponent({ messages }) {
@@ -8,11 +14,12 @@ export default function ChatMessageListComponent({ messages }) {
const _cache = new CellMeasurerCache({ const _cache = new CellMeasurerCache({
fixedWidth: true, fixedWidth: true,
minHeight: 20, minHeight: 25,
defaultHeight: 50,
}); });
const scrollToBottom = () => { const scrollToBottom = () => {
console.log("SCrolling to", messages.length); console.log("Scrolling to", messages.length);
!!virtualizedListRef.current && !!virtualizedListRef.current &&
virtualizedListRef.current.scrollToRow(messages.length - 1); virtualizedListRef.current.scrollToRow(messages.length - 1);
@@ -26,37 +33,38 @@ export default function ChatMessageListComponent({ messages }) {
return ( return (
<CellMeasurer cache={_cache} key={key} rowIndex={index} parent={parent}> <CellMeasurer cache={_cache} key={key} rowIndex={index} parent={parent}>
{({ measure, registerChild }) => ( {({ measure, registerChild }) => (
<li <div
ref={registerChild} ref={registerChild}
onLoad={measure}
style={style} style={style}
className={`${messages[index].isoutbound ? "replies" : "sent"}`} className={`${
messages[index].isoutbound ? "mine messages" : "yours messages"
}`}
> >
<p onLoad={measure}> <div className="message msgmargin">
{messages[index].text} <span>{messages[index].text}</span>
{StatusRender(messages[index].status)} </div>
</p> {StatusRender(messages[index].status)}
</li> </div>
)} )}
</CellMeasurer> </CellMeasurer>
); );
}; };
return ( return (
<div className="messages"> <div className="chat">
<ul> <AutoSizer>
<AutoSizer> {({ height, width }) => (
{({ height, width }) => ( <List
<List ref={virtualizedListRef}
ref={virtualizedListRef} width={width}
width={width} height={height}
height={height} rowHeight={_cache.rowHeight}
rowHeight={_cache.rowHeight} rowRenderer={_rowRenderer}
rowRenderer={_rowRenderer} rowCount={messages.length}
rowCount={messages.length} />
/> )}
)} </AutoSizer>
</AutoSizer>
</ul>
</div> </div>
); );
} }
@@ -64,9 +72,9 @@ export default function ChatMessageListComponent({ messages }) {
const StatusRender = (status) => { const StatusRender = (status) => {
switch (status) { switch (status) {
case "sent": case "sent":
return <CheckOutlined style={{ margin: "2px", float: "right" }} />; return <Icon component={FaCheck} className="message-icon" />;
case "delivered": case "delivered":
return <CheckCircleOutlined style={{ margin: "2px", float: "right" }} />; return <Icon component={FaCheckDouble} className="message-icon" />;
default: default:
return null; return null;
} }

203
client/src/components/chat-messages-list/chat-message-list.styles.scss
View File

@@ -1,134 +1,103 @@
.messages { .message-icon {
//flex-grow: 1; position: absolute;
flex: 1; bottom: 0rem;
// height: 100%; color: seagreen;
// min-height: calc(100% - 10px); border: black;
// max-height: calc(100% - 93px); // z-index: 5;
// // overflow-y: scroll;
// // overflow-x: hidden;
} }
// @media screen and (max-width: 735px) { .chat {
// .messages { flex: 1;
// max-height: calc(100% - 105px); //width: 300px;
// } //border: solid 1px #eee;
// } display: flex;
// .messages::-webkit-scrollbar { flex-direction: column;
// width: 8px; //padding: 10px;
// background: transparent;
// }
// .messages::-webkit-scrollbar-thumb {
// background-color: rgba(0, 0, 0, 0.3);
// }
.messages ul {
height: 100%;
} }
.messages ul li {
display: inline-block; .messages {
// clear: both; //margin-top: 30px;
//float: left; display: flex;
// margin: 5px; flex-direction: column;
//width: calc(100% - 25px);
// font-size: 0.9em;
} }
.messages ul li:nth-last-child(1) {
margin-bottom: 20px; .message {
}
.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;
border-radius: 20px; border-radius: 20px;
max-width: 205px; padding: 0.25rem 0.8rem;
//line-height: 130%; //margin-top: 5px;
// margin-bottom: 5px;
display: inline-block;
} }
@media screen and (min-width: 735px) {
.messages ul li p { .yours {
max-width: 300px; align-items: flex-start;
}
} }
.message-input { .msgmargin {
position: absolute; margin-top: 0.1rem;
bottom: 0;
width: 100%;
z-index: 99;
} }
.message-input .wrap {
.yours .message {
margin-right: 25%;
background-color: #eee;
position: relative; position: relative;
} }
.message-input .wrap input {
font-family: "proxima-nova", "Source Sans Pro", sans-serif; .yours .message.last:before {
float: left; content: "";
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 {
position: absolute; position: absolute;
right: 60px; z-index: 0;
z-index: 4; bottom: 0;
margin-top: 10px; left: -7px;
font-size: 1.1em; height: 20px;
color: #435f7a; width: 20px;
opacity: 0.5; background: #eee;
cursor: pointer; border-bottom-right-radius: 15px;
} }
@media screen and (max-width: 735px) { .yours .message.last:after {
.message-input .wrap .attachment { content: "";
margin-top: 17px; position: absolute;
right: 65px; 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; .mine .message {
border: none; color: white;
width: 50px; margin-left: 25%;
padding: 12px 0; background: linear-gradient(to bottom, #00d0ea 0%, #0085d1 100%);
cursor: pointer; background-attachment: fixed;
background: #32465a; position: relative;
color: #f5f5f5;
} }
@media screen and (max-width: 735px) {
.message-input .wrap button { .mine .message.last:before {
padding: 16px 0; 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; .mine .message.last:after {
} content: "";
.message-input .wrap button:focus { position: absolute;
outline: none; z-index: 1;
bottom: 0;
right: -10px;
width: 10px;
height: 20px;
background: white;
border-bottom-left-radius: 10px;
} }

18
client/src/components/chat-popup/chat-popup.component.jsx
View File

@@ -1,5 +1,5 @@
import { ShrinkOutlined } from "@ant-design/icons"; import { ShrinkOutlined } from "@ant-design/icons";
import { Col, Row } from "antd"; import { Col, Row, Typography } from "antd";
import React from "react"; import React from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { connect } from "react-redux"; import { connect } from "react-redux";
@@ -25,15 +25,13 @@ export function ChatPopupComponent({
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<div className="chat-popup"> <div className="chat-popup">
<div style={{ overflow: "auto" }}> <Typography.Title level={4}>
<strong style={{ float: "left" }}> {t("messaging.labels.messaging")}
{t("messaging.labels.messaging")} </Typography.Title>
</strong> <ShrinkOutlined
<ShrinkOutlined onClick={() => toggleChatVisible()}
onClick={() => toggleChatVisible()} style={{ position: "absolute", right: ".5rem", top: ".5rem" }}
style={{ float: "right" }} />
/>
</div>
<Row className="chat-popup-content"> <Row className="chat-popup-content">
<Col span={8}> <Col span={8}>

5
client/src/components/chat-popup/chat-popup.styles.scss
View File

@@ -1,8 +1,11 @@
.chat-popup { .chat-popup {
width: 40vw; width: 40vw;
height: 50vh; height: 50vh;
display: flex;
flex-direction: column;
} }
.chat-popup-content { .chat-popup-content {
height: 100%; //height: 50vh;
flex: 1;
} }

2
client/src/components/chat-send-message/chat-send-message.component.jsx
View File

@@ -42,7 +42,7 @@ function ChatSendMessageComponent({
}; };
return ( return (
<div style={{ display: "flex ", padding: "1em" }}> <div style={{ display: "flex " }}>
<Input.TextArea <Input.TextArea
allowClear allowClear
autoFocus autoFocus

1
client/src/components/error-boundary/error-boundary.component.jsx
View File

@@ -23,7 +23,6 @@ class ErrorBoundary extends React.Component {
} }
render() { render() {
console.log("this.state", this.state);
const { t } = this.props; const { t } = this.props;
if (this.state.hasErrored === true) { if (this.state.hasErrored === true) {
return ( return (

12
client/src/graphql/conversations.queries.js
View File

@@ -5,6 +5,15 @@ export const CONVERSATION_LIST_SUBSCRIPTION = gql`
conversations { conversations {
phone_num phone_num
id id
job_conversations {
job {
id
ro_number
ownr_fn
ownr_ln
ownr_co_nm
}
}
messages_aggregate( messages_aggregate(
where: { read: { _eq: false }, isoutbound: { _eq: false } } where: { read: { _eq: false }, isoutbound: { _eq: false } }
) { ) {
@@ -39,6 +48,9 @@ export const CONVERSATION_SUBSCRIPTION_BY_PK = gql`
conversationid conversationid
job { job {
id id
ownr_fn
ownr_ln
ownr_co_nm
ro_number ro_number
} }
} }

1
client/src/translations/en_us/common.json
View File

@@ -876,6 +876,7 @@
}, },
"labels": { "labels": {
"messaging": "Messaging", "messaging": "Messaging",
"nojobs": "Not associated to any job.",
"typeamessage": "Send a message..." "typeamessage": "Send a message..."
} }
}, },

1
client/src/translations/es/common.json
View File

@@ -876,6 +876,7 @@
}, },
"labels": { "labels": {
"messaging": "Mensajería", "messaging": "Mensajería",
"nojobs": "",
"typeamessage": "Enviar un mensaje..." "typeamessage": "Enviar un mensaje..."
} }
}, },

1
client/src/translations/fr/common.json
View File

@@ -876,6 +876,7 @@
}, },
"labels": { "labels": {
"messaging": "Messagerie", "messaging": "Messagerie",
"nojobs": "",
"typeamessage": "Envoyer un message..." "typeamessage": "Envoyer un message..."
} }
}, },

2
client/src/utils/PhoneFormatter.jsx
View File

@@ -6,7 +6,7 @@ export default function PhoneNumberFormatter(props) {
<NumberFormat <NumberFormat
value={props.children} value={props.children}
type="tel" type="tel"
format="###-###-####" format="+# (###)-###-####"
displayType={"text"} displayType={"text"}
/> />
); );

1
package.json
View File

@@ -29,6 +29,7 @@
"handlebars": "^4.7.6", "handlebars": "^4.7.6",
"lodash": "^4.17.19", "lodash": "^4.17.19",
"moment": "^2.27.0", "moment": "^2.27.0",
"node-fetch": "^2.6.0",
"nodemailer": "^6.4.10", "nodemailer": "^6.4.10",
"phone": "^2.4.13", "phone": "^2.4.13",
"stripe": "^8.70.0", "stripe": "^8.70.0",

1
server.js
View File

@@ -4,6 +4,7 @@ const bodyParser = require("body-parser");
const path = require("path"); const path = require("path");
const compression = require("compression"); const compression = require("compression");
const twilio = require("twilio"); const twilio = require("twilio");
global.fetch = require("node-fetch");
//var enforce = require("express-sslify"); //var enforce = require("express-sslify");
require("dotenv").config({ require("dotenv").config({