Replaced null coalescence. Updated dates components.

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

@@ -1,7 +1,8 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import CardTemplate from "./job-detail-cards.template.component";
+import { Link } from "react-router-dom";
 import PhoneFormatter from "../../utils/PhoneFormatter";
+import CardTemplate from "./job-detail-cards.template.component";
 
 export default function JobDetailCardsCustomerComponent({ loading, data }) {
   const { t } = useTranslation();
@@ -10,28 +11,34 @@ export default function JobDetailCardsCustomerComponent({ loading, data }) {
     <CardTemplate
       loading={loading}
       title={t("jobs.labels.cards.customer")}
-      extraLink={data?.owner ? `/manage/owners/${data?.owner?.id}` : null}>
+      extraLink={data && 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>
             {t("jobs.fields.phoneshort")}:
-            <PhoneFormatter>{`${data?.ownr_ph1 ??
+            <PhoneFormatter>{`${data.ownr_ph1 ||
               t("general.labels.na")}`}</PhoneFormatter>
           </div>
-
           <div>
             {t("jobs.fields.ownr_ea")}:
-            {data?.ownr_ea ? (
+            {data.ownr_ea ? (
               <a href={`mailto:${data.ownr_ea}`}>
-                <span>{`${data?.ownr_ea ?? ""}`}</span>
+                <span>{`${data.ownr_ea || ""}`}</span>
               </a>
             ) : (
               t("general.labels.na")
             )}
           </div>
-
-          <div>{`${data?.owner?.preferred_contact ?? ""}`}</div>
+          <div>{`${(data.owner && data.owner.preferred_contact) || ""}`}</div>
+          {data.vehicle ? (
+            <Link to={`/manage/vehicles/${data.vehicle.id}`}>
+              {`${data.vehicle.v_model_yr || ""} ${data.vehicle.v_make_desc ||
+                ""} ${data.vehicle.v_model_desc || ""}`}
+            </Link>
+          ) : (
+            <span>{t("jobs.errors.novehicle")}</span>
+          )}
         </span>
       ) : null}
     </CardTemplate>