Added job card functionality + new fields.

client/src/components/job-detail-cards/job-detail-cards.customer.component.jsx

@@ -13,16 +13,23 @@ export default function JobDetailCardsCustomerComponent({ loading, data }) {
       extraLink={data?.owner ? `/manage/owners/${data?.owner?.id}` : null}>
       {data ? (
         <span>
-          <div>{`${data?.ownr_fn ??
-            ""} ${data.ownr_ln ?? ""}`}</div>
+          <div>{`${data?.ownr_fn ?? ""} ${data.ownr_ln ?? ""}`}</div>
           <div>
-            <PhoneFormatter>{`${data?.ownr_ph1 ?? ""}`}</PhoneFormatter>
+            {t("jobs.fields.phoneshort")}:
+            <PhoneFormatter>{`${data?.ownr_ph1 ??
+              t("general.labels.na")}`}</PhoneFormatter>
+          </div>
+
+          <div>
+            {t("jobs.fields.ownr_ea")}:
+            {data?.ownr_ea ? (
+              <a href={`mailto:${data.ownr_ea}`}>
+                <span>{`${data?.ownr_ea ?? ""}`}</span>
+              </a>
+            ) : (
+              t("general.labels.na")
+            )}
           </div>
-          {data?.ownr_ea ? (
-            <a href={`mailto:${data.ownr_ea}`}>
-              <div>{`${data?.ownr_ea ?? ""}`}</div>
-            </a>
-          ) : null}
 
           <div>{`${data?.owner?.preferred_contact ?? ""}`}</div>
         </span>

client/src/components/job-detail-cards/job-detail-cards.documents.component.jsx

@@ -1,16 +1,32 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import CardTemplate from "./job-detail-cards.template.component";
+import { Carousel } from "antd";
+import "./job-detail-cards.styles.scss";
 
 export default function JobDetailCardsDocumentsComponent({ loading, data }) {
   const { t } = useTranslation();
 
+  if (!data)
+    return (
+      <CardTemplate loading={loading} title={t("jobs.labels.cards.documents")}>
+        null
+      </CardTemplate>
+    );
+
   return (
-    <CardTemplate loading={loading} title={t("jobs.labels.cards.documents")}>
-      {data ? (
-        <span>
-            Documents stuff here.
-        </span>
+    <CardTemplate
+      loading={loading}
+      title={t("jobs.labels.cards.documents")}
+      extraLink={`/manage/jobs/${data.id}#documents`}>
+      {data.documents ? (
+        <Carousel autoplay>
+          {data.documents.map(item => (
+            <div key={item.id}>
+              <img src={item.thumb_url} />
+            </div>
+          ))}
+        </Carousel>
       ) : null}
     </CardTemplate>
   );

client/src/components/job-detail-cards/job-detail-cards.documents.styles.scss

@@ -0,0 +1,11 @@
+.ant-carousel .slick-slide {
+    text-align: center;
+    height: 160px;
+    line-height: 160px;
+    background: #364d79;
+    overflow: hidden;
+  }
+  
+  .ant-carousel .slick-slide h3 {
+    color: #fff;
+  }

client/src/components/job-tombstone/job-tombstone.component.jsx

@@ -124,7 +124,7 @@ function JobTombstone({ job, ...otherProps }) {
                   });
                 });
               }}>
-              {t("jobs.labels.convert")}
+              {t("jobs.actions.convert")}
             </Button>,
             <Button type='primary' key='submit' htmlType='submit'>
               {t("general.labels.save")}

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

@@ -168,14 +168,6 @@ function JobsDocumentsComponent({ shopId, jobId, loading, data }) {
 
   return (
     <div className='clearfix'>
-      <Button
-        onClick={() => {
-          console.log("btn click");
-          console.log("data", data);
-        }}>
-        Test Request
-      </Button>
-      <img src={url} alt='test' />
       <Upload.Dragger
         customRequest={handleUpload}
         accept='.pdf,.jpg,.jpeg'

client/src/components/jobs-documents/jobs-documents.container.jsx

@@ -4,7 +4,7 @@ import { QUERY_SHOP_ID } from "../../graphql/bodyshop.queries";
 import { GET_DOCUMENTS_BY_JOB } from "../../graphql/documents.queries";
 import AlertComponent from "../alert/alert.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
-import JobDocuments from "./jobs-documents.page";
+import JobDocuments from "./jobs-documents.component";
 
 export default function JobsDocumentsContainer({ jobId }) {
   const { loading, error, data } = useQuery(GET_DOCUMENTS_BY_JOB, {