IO-848 Chat Open Button fixes

client/src/components/chat-media-selector/chat-media-selector.component.jsx

@@ -24,6 +24,7 @@ export function ChatMediaSelector({
   conversation,
 }) {
   const { t } = useTranslation();
+  const [visible, setVisible] = useState(false);
 
   const { loading, error, data } = useQuery(GET_DOCUMENTS_BY_JOB, {
     variables: {
@@ -33,12 +34,11 @@ export function ChatMediaSelector({
     },
     fetchPolicy: "network-only",
     skip:
+      !visible ||
       !conversation.job_conversations ||
       conversation.job_conversations.length === 0,
   });
 
-  const [visible, setVisible] = useState(false);
-
   const handleVisibleChange = (visible) => {
     setVisible(visible);
   };

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

@@ -6,13 +6,23 @@ import { connect } from "react-redux";
 import { openChatByPhone } from "../../redux/messaging/messaging.actions";
 import PhoneNumberFormatter from "../../utils/PhoneFormatter";
 
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+
 const mapDispatchToProps = (dispatch) => ({
   openChatByPhone: (phone) => dispatch(openChatByPhone(phone)),
 });
 
-export function ChatOpenButton({ phone, jobid, openChatByPhone }) {
+export function ChatOpenButton({ bodyshop, phone, jobid, openChatByPhone }) {
   const { t } = useTranslation();
   if (!phone) return <></>;
+
+  if (!bodyshop.messagingservicesid)
+    return <PhoneNumberFormatter>{phone}</PhoneNumberFormatter>;
+
   return (
     <a
       href="# "
@@ -31,4 +41,4 @@ export function ChatOpenButton({ phone, jobid, openChatByPhone }) {
     </a>
   );
 }
-export default connect(null, mapDispatchToProps)(ChatOpenButton);
+export default connect(mapStateToProps, mapDispatchToProps)(ChatOpenButton);

client/src/components/jobs-detail-header/jobs-detail-header.component.jsx

@@ -84,55 +84,59 @@ export function JobsDetailHeader({ job, bodyshop, disabled }) {
         </Card>
       </Col>
       <Col {...colSpan}>
-        <Link to={disabled ? "#" : `/manage/owners/${job.owner.id}`}>
+        <Card
-          <Card
+          style={{ height: "100%" }}
-            className="ant-card-grid-hoverable"
+          title={
-            style={{ height: "100%" }}
+            <Link to={disabled ? "#" : `/manage/owners/${job.owner.id}`}>
-            title={`${job.ownr_fn || ""} ${job.ownr_ln || ""} ${
+              {`${job.ownr_fn || ""} ${job.ownr_ln || ""} ${
-              job.ownr_co_nm || ""
+                job.ownr_co_nm || ""
-            }`}
+              }`}
-          >
+            </Link>
-            <div>
-              <DataLabel key="2" label={t("jobs.fields.ownr_ph1")}>
-                <ChatOpenButton>{job.ownr_ph1 || ""}</ChatOpenButton>
-              </DataLabel>
-              <DataLabel key="3" label={t("owners.fields.address")}>
-                {`${job.ownr_addr1 || ""} ${job.ownr_addr2 || ""} ${
-                  job.ownr_city || ""
-                } ${job.ownr_st || ""} ${job.ownr_zip || ""}`}
-              </DataLabel>
-              <DataLabel key="4" label={t("owners.fields.ownr_ea")}>
-                {job.ownr_ea || ""}
-              </DataLabel>
-            </div>
-          </Card>
-        </Link>
-      </Col>
-      <Col {...colSpan}>
-        <Link
-          to={
-            disabled ? "#" : job.vehicle && `/manage/vehicles/${job.vehicle.id}`
           }
         >
-          <Card
+          <div>
-            className="ant-card-grid-hoverable"
+            <DataLabel key="2" label={t("jobs.fields.ownr_ph1")}>
-            style={{ height: "100%" }}
+              <ChatOpenButton phone={job.ownr_ph1} jobid={job.id} />
-            title={`${job.v_model_yr || ""} ${job.v_color || ""} 
+            </DataLabel>
+            <DataLabel key="3" label={t("owners.fields.address")}>
+              {`${job.ownr_addr1 || ""} ${job.ownr_addr2 || ""} ${
+                job.ownr_city || ""
+              } ${job.ownr_st || ""} ${job.ownr_zip || ""}`}
+            </DataLabel>
+            <DataLabel key="4" label={t("owners.fields.ownr_ea")}>
+              {job.ownr_ea || ""}
+            </DataLabel>
+          </div>
+        </Card>
+      </Col>
+      <Col {...colSpan}>
+        <Card
+          style={{ height: "100%" }}
+          title={
+            <Link
+              to={
+                disabled
+                  ? "#"
+                  : job.vehicle && `/manage/vehicles/${job.vehicle.id}`
+              }
+            >
+              {`${job.v_model_yr || ""} ${job.v_color || ""}
         ${job.v_make_desc || ""} 
         ${job.v_model_desc || ""}`}
-          >
+            </Link>
-            <div>
+          }
-              <DataLabel key="2" label={t("vehicles.fields.plate_no")}>
+        >
-                {`${job.plate_no || t("general.labels.na")} (${`${
+          <div>
-                  job.plate_st || t("general.labels.na")
+            <DataLabel key="2" label={t("vehicles.fields.plate_no")}>
-                }`})`}
+              {`${job.plate_no || t("general.labels.na")} (${`${
-              </DataLabel>
+                job.plate_st || t("general.labels.na")
-              <DataLabel key="4" label={t("vehicles.fields.v_vin")}>
+              }`})`}
-                {`${job.v_vin || t("general.labels.na")}`}
+            </DataLabel>
-              </DataLabel>
+            <DataLabel key="4" label={t("vehicles.fields.v_vin")}>
-            </div>
+              {`${job.v_vin || t("general.labels.na")}`}
-          </Card>
+            </DataLabel>
-        </Link>
+          </div>
+        </Card>
       </Col>
       <Col {...colSpan}>
         <Card

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

@@ -13,7 +13,7 @@ import { onlyUnique } from "../../utils/arrayHelper";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { alphaSort } from "../../utils/sorters";
 import AlertComponent from "../alert/alert.component";
-import StartChatButton from "../chat-open-button/chat-open-button.component";
+import ChatOpenButton from "../chat-open-button/chat-open-button.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -131,7 +131,7 @@ export function JobsList({ bodyshop }) {
       ellipsis: true,
       responsive: ["md"],
       render: (text, record) => (
-        <StartChatButton phone={record.ownr_ph1} jobid={record.id} />
+        <ChatOpenButton phone={record.ownr_ph1} jobid={record.id} />
       ),
     },
 

client/src/graphql/conversations.queries.js

@@ -70,6 +70,10 @@ export const CONVERSATION_ID_BY_PHONE = gql`
   query CONVERSATION_ID_BY_PHONE($phone: String!) {
     conversations(where: { phone_num: { _eq: $phone } }) {
       id
+      job_conversations {
+        jobid
+        id
+      }
     }
   }
 `;

client/src/redux/messaging/messaging.sagas.js

@@ -4,7 +4,7 @@ import { all, call, put, select, takeLatest } from "redux-saga/effects";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import {
   CONVERSATION_ID_BY_PHONE,
-  CREATE_CONVERSATION
+  CREATE_CONVERSATION,
 } from "../../graphql/conversations.queries";
 import { INSERT_CONVERSATION_TAG } from "../../graphql/job-conversations.queries";
 import client from "../../utils/GraphQLClient";
@@ -12,7 +12,7 @@ import { selectBodyshop } from "../user/user.selectors";
 import {
   sendMessageFailure,
   sendMessageSuccess,
-  setSelectedConversation
+  setSelectedConversation,
 } from "./messaging.actions";
 import MessagingActionTypes from "./messaging.types";
 
@@ -64,7 +64,9 @@ export function* openChatByPhone({ payload }) {
     } else if (conversations.length === 1) {
       //got the ID. Open it.
       yield put(setSelectedConversation(conversations[0].id));
-      if (jobid)
+
+      //Check to see if this job ID is already a child of it. If not add the tag.
+      if (!conversations[0].job_conversations.find((jc) => jc.jobid === jobid))
         yield client.mutate({
           mutation: INSERT_CONVERSATION_TAG,
           variables: {