IO-2317 Messaging screen on mobile

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

@@ -1,14 +1,31 @@
-import { Space } from "antd";
+import { Space, Button, Col } from "antd";
 import React from "react";
 import PhoneNumberFormatter from "../../utils/PhoneFormatter";
 import ChatArchiveButton from "../chat-archive-button/chat-archive-button.component";
 import ChatConversationTitleTags from "../chat-conversation-title-tags/chat-conversation-title-tags.component";
 import ChatLabelComponent from "../chat-label/chat-label.component";
 import ChatTagRoContainer from "../chat-tag-ro/chat-tag-ro.container";
+import { connect } from "react-redux";
+import { setSelectedConversation } from "../../redux/messaging/messaging.actions";
+import { LeftOutlined } from "@ant-design/icons";
 
-export default function ChatConversationTitle({ conversation }) {
+const mapDispatchToProps = (dispatch) => ({
+  setSelectedConversation: (conversationId) =>
+    dispatch(setSelectedConversation(conversationId)),
+});
+
+function ChatConversationTitle({ conversation, setSelectedConversation }) {
   return (
     <Space wrap>
+      <Col sm={0}>
+        <Button
+          onClick={() => setSelectedConversation()}
+          size="small"
+          type="text"
+        >
+          <LeftOutlined />
+        </Button>
+      </Col>
       <PhoneNumberFormatter>
         {conversation && conversation.phone_num}
       </PhoneNumberFormatter>
@@ -23,3 +40,5 @@ export default function ChatConversationTitle({ conversation }) {
     </Space>
   );
 }
+
+export default connect(null, mapDispatchToProps)(ChatConversationTitle);

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

@@ -112,7 +112,7 @@ export function ChatPopupComponent({
             />
 
             <Row gutter={[8, 8]} className="chat-popup-content">
-              <Col span={8}>
+              <Col span={8} sm={8} xs={selectedConversation && 0}>
                 {loading ? (
                   <LoadingSpinner />
                 ) : (

client/src/components/schedule-calendar-wrapper/scheduler-calendar-wrapper.component.jsx

@@ -12,7 +12,8 @@ import "./schedule-calendar.styles.scss";
 import JobDetailCards from "../job-detail-cards/job-detail-cards.component";
 import { selectProblemJobs } from "../../redux/application/application.selectors";
 import { Alert, Collapse } from "antd";
-import { useTranslation } from "react-i18next";
+import { useTranslation, Trans } from "react-i18next";
+import { Link } from "react-router-dom";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -66,10 +67,21 @@ export function ScheduleCalendarWrapperComponent({
               <Alert
                 key={problem.id}
                 type="error"
-                message={t("appointments.labels.dataconsistency", {
-                  ro_number: problem.ro_number,
-                  code: problem.code,
-                })}
+                message={
+                  <Trans
+                    i18nKey="appointments.labels.dataconsistency"
+                    components={[
+                      <Link
+                        to={`/manage/jobs/${problem.id}`}
+                        target="_blank"
+                      />,
+                    ]}
+                    values={{
+                      ro_number: problem.ro_number,
+                      code: problem.code,
+                    }}
+                  />
+                }
               />
             ))}
           </Collapse.Panel>
@@ -79,10 +91,18 @@ export function ScheduleCalendarWrapperComponent({
           <Alert
             key={problem.id}
             type="error"
-            message={t("appointments.labels.dataconsistency", {
-              ro_number: problem.ro_number,
-              code: problem.code,
-            })}
+            message={
+              <Trans
+                i18nKey="appointments.labels.dataconsistency"
+                components={[
+                  <Link to={`/manage/jobs/${problem.id}`} target="_blank" />,
+                ]}
+                values={{
+                  ro_number: problem.ro_number,
+                  code: problem.code,
+                }}
+              />
+            }
           />
         ))
       )}

client/src/translations/en_us/common.json

@@ -49,7 +49,7 @@
 				"blocked": "Blocked",
 				"cancelledappointment": "Canceled appointment for: ",
 				"completingjobs": "Completing Jobs",
-				"dataconsistency": "{{ro_number}} has a data consistency issue. It may have been excluded for scheduling purposes. CODE: {{code}}.",
+				"dataconsistency": "<0>{{ro_number}}</0> has a data consistency issue. It may have been excluded for scheduling purposes. CODE: {{code}}.",
 				"expectedjobs": "Expected Jobs in Production: ",
 				"expectedprodhrs": "Expected Production Hours:",
 				"history": "History",