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, {

client/src/graphql/apollo-error-handling.js

@@ -5,10 +5,10 @@ import { auth } from "../firebase/firebase.utils";
 const errorLink = onError(
   ({ graphQLErrors, networkError, operation, forward }) => {
     let access_token = window.localStorage.getItem("token");
-    console.log("graphQLErrors", graphQLErrors);
-    console.log("networkError", networkError);
-    console.log("operation", operation);
-    console.log("forward", forward);
+    // console.log("graphQLErrors", graphQLErrors);
+    // console.log("networkError", networkError);
+    // console.log("operation", operation);
+    // console.log("forward", forward);
 
     let expired = false;
 
@@ -29,40 +29,45 @@ const errorLink = onError(
       if (access_token && access_token !== "undefined") {
         // Let's refresh token through async request
         return new Observable(observer => {
-          auth.currentUser
-            .getIdToken(true)
-            .then(function(idToken) {
-              if (!idToken) {
-                window.localStorage.removeItem("token");
-                return console.log("Refresh token has expired");
-              }
-              console.log("Got a new token", idToken);
-              window.localStorage.setItem("token", idToken);
+          const unsubscribeFromAuth = auth.onAuthStateChanged(async user => {
+            console.log("Auth change in error handling.");
+            if (user) {
+              user
+                .getIdToken(true)
+                .then(function(idToken) {
+                  if (!idToken) {
+                    window.localStorage.removeItem("token");
+                    return console.log("Refresh token has expired");
+                  }
+                  console.log("Got a new token", idToken);
+                  window.localStorage.setItem("token", idToken);
 
-              // reset the headers
-              operation.setContext(({ headers = {} }) => ({
-                headers: {
-                  // Re-add old headers
-                  ...headers,
-                  // Switch out old access token for new one
-                  authorization: idToken ? `Bearer ${idToken}` : ""
-                }
-              }));
+                  // reset the headers
+                  operation.setContext(({ headers = {} }) => ({
+                    headers: {
+                      // Re-add old headers
+                      ...headers,
+                      // Switch out old access token for new one
+                      authorization: idToken ? `Bearer ${idToken}` : ""
+                    }
+                  }));
 
-              const subscriber = {
-                next: observer.next.bind(observer),
-                error: observer.error.bind(observer),
-                complete: observer.complete.bind(observer)
-              };
-              console.log("About to resend the request.");
-              // Retry last failed request
-              forward(operation).subscribe(subscriber);
-            })
-            .catch(error => {
-              // No refresh or client token available, we force user to login
-              console.log("Hit an error.");
-              observer.error(error);
-            });
+                  const subscriber = {
+                    next: observer.next.bind(observer),
+                    error: observer.error.bind(observer),
+                    complete: observer.complete.bind(observer)
+                  };
+                  console.log("About to resend the request.");
+                  // Retry last failed request
+                  forward(operation).subscribe(subscriber);
+                })
+                .catch(error => {
+                  // No refresh or client token available, we force user to login
+                  console.log("Hit an error.");
+                  observer.error(error);
+                });
+            }
+          });
         });
       }
     }

client/src/graphql/jobs.queries.js

@@ -246,6 +246,10 @@ export const QUERY_JOB_CARD_DETAILS = gql`
       updated_at
       claim_total
       ded_amt
+      documents(limit: 3, order_by: { created_at: desc }) {
+        id
+        thumb_url
+      }
       vehicle {
         id
         plate_no

client/src/translations/en_us/common.json

@@ -31,6 +31,7 @@
 			"actions": {
 				"addDocuments": "Add Job Documents",
 				"addNote": "Add Note",
+				"convert": "Convert",
 				"postInvoices": "Post Invoices",
 				"printCenter": "Print Center"
 			},
@@ -51,7 +52,9 @@
 				"est_number": "Estimate Number",
 				"owner": "Owner",
 				"owner_owing": "Cust. Owes",
+				"ownr_ea": "Email",
 				"phone1": "Phone 1",
+				"phoneshort": "PH",
 				"ro_number": "RO #",
 				"status": "Job Status",
 				"vehicle": "Vehicle"
@@ -62,7 +65,7 @@
 					"customer": "Customer Information",
 					"damage": "Area of Damage",
 					"dates": "Dates",
-					"documents": "Documents",
+					"documents": "Recent Documents",
 					"estimator": "Estimator",
 					"filehandler": "File Handler",
 					"insurance": "Insurance Details",
@@ -71,7 +74,6 @@
 					"totals": "Totals",
 					"vehicle": "Vehicle"
 				},
-				"convert": "Convert",
 				"documents": "Documents",
 				"lines": "Estimate Lines",
 				"notes": "Notes",

client/src/translations/es/common.json

@@ -31,6 +31,7 @@
 			"actions": {
 				"addDocuments": "Agregar documentos de trabajo",
 				"addNote": "Añadir la nota",
+				"convert": "Convertir",
 				"postInvoices": "Contabilizar facturas",
 				"printCenter": "Centro de impresión"
 			},
@@ -51,7 +52,9 @@
 				"est_number": "Numero Estimado",
 				"owner": "Propietario",
 				"owner_owing": "Cust. Debe",
+				"ownr_ea": "Email",
 				"phone1": "Teléfono 1",
+				"phoneshort": "PH",
 				"ro_number": "RO #",
 				"status": "Estado del trabajo",
 				"vehicle": "Vehículo"
@@ -62,7 +65,7 @@
 					"customer": "Información al cliente",
 					"damage": "Área de Daño",
 					"dates": "fechas",
-					"documents": "documentos",
+					"documents": "Documentos recientes",
 					"estimator": "Estimador",
 					"filehandler": "File Handler",
 					"insurance": "detalles del seguro",
@@ -71,7 +74,6 @@
 					"totals": "Totales",
 					"vehicle": "Vehículo"
 				},
-				"convert": "Convertir",
 				"documents": "documentos",
 				"lines": "Líneas estimadas",
 				"notes": "Notas",

client/src/translations/fr/common.json

@@ -31,6 +31,7 @@
 			"actions": {
 				"addDocuments": "Ajouter des documents de travail",
 				"addNote": "Ajouter une note",
+				"convert": "Convertir",
 				"postInvoices": "Poster des factures",
 				"printCenter": "Centre d'impression"
 			},
@@ -51,7 +52,9 @@
 				"est_number": "Numéro d'estimation",
 				"owner": "Propriétaire",
 				"owner_owing": "Cust. Owes",
+				"ownr_ea": "Email",
 				"phone1": "Téléphone 1",
+				"phoneshort": "PH",
 				"ro_number": "RO #",
 				"status": "Statut de l'emploi",
 				"vehicle": "Véhicule"
@@ -62,7 +65,7 @@
 					"customer": "Informations client",
 					"damage": "Zone de dommages",
 					"dates": "Rendez-vous",
-					"documents": "Les documents",
+					"documents": "Documents récents",
 					"estimator": "Estimateur",
 					"filehandler": "Gestionnaire de fichiers",
 					"insurance": "Détails de l'assurance",
@@ -71,7 +74,6 @@
 					"totals": "Totaux",
 					"vehicle": "Véhicule"
 				},
-				"convert": "Convertir",
 				"documents": "Les documents",
 				"lines": "Estimer les lignes",
 				"notes": "Remarques",