IO-1589

client/src/pages/dms/dms.container.jsx

@@ -29,6 +29,7 @@ import {
   setSelectedHeader,
 } from "../../redux/application/application.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import { OwnerNameDisplayFunction } from "../../components/owner-name-display/owner-name-display.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -143,9 +144,7 @@ export function DmsContainer({ bodyshop, setBreadcrumbs, setSelectedHeader }) {
                 <Link to={`/manage/jobs/${data && data.jobs_by_pk.id}`}>{`${
                   data && data.jobs_by_pk && data.jobs_by_pk.ro_number
                 }`}</Link>
-                {` | ${data.jobs_by_pk.ownr_fn || ""} ${
-                  data.jobs_by_pk.ownr_ln || ""
-                } ${data.jobs_by_pk.ownr_co_nm || ""} | ${
+                {` | ${OwnerNameDisplayFunction(data.jobs_by_pk)} | ${
                   data.jobs_by_pk.v_model_yr || ""
                 } ${data.jobs_by_pk.v_make_desc || ""} ${
                   data.jobs_by_pk.v_model_desc || ""

client/src/pages/jobs-detail/jobs-detail.page.container.jsx

@@ -6,6 +6,7 @@ import { createStructuredSelector } from "reselect";
 import AlertComponent from "../../components/alert/alert.component";
 import SpinComponent from "../../components/loading-spinner/loading-spinner.component";
 import NotFound from "../../components/not-found/not-found.component";
+import { OwnerNameDisplayFunction } from "../../components/owner-name-display/owner-name-display.component";
 import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
 import { GET_JOB_BY_PK, UPDATE_JOB } from "../../graphql/jobs.queries";
 import {
@@ -78,11 +79,10 @@ function JobsDetailPageContainer({
         CreateRecentItem(
           jobId,
           "job",
-          `${data.jobs_by_pk.ro_number || t("general.labels.na")} | ${
-            data.jobs_by_pk.ownr_fn || ""
-          } ${data.jobs_by_pk.ownr_ln || ""} ${
-            data.jobs_by_pk.ownr_co_nm || ""
-          }`,
+
+          `${
+            data.jobs_by_pk.ro_number || t("general.labels.na")
+          } | ${OwnerNameDisplayFunction(data.jobs_by_pk)}`,
           `/manage/jobs/${jobId}`
         )
       );

client/src/pages/owners-detail/owners-detail.page.container.jsx

@@ -14,6 +14,7 @@ import {
 import { CreateRecentItem } from "../../utils/create-recent-item";
 import OwnersDetailComponent from "./owners-detail.page.component";
 import NotFound from "../../components/not-found/not-found.component";
+import { OwnerNameDisplayFunction } from "../../components/owner-name-display/owner-name-display.component";
 
 const mapDispatchToProps = (dispatch) => ({
   setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
@@ -38,11 +39,7 @@ export function OwnersDetailContainer({
 
   useEffect(() => {
     document.title = t("titles.owners-detail", {
-      name: data
-        ? `${(data.owners_by_pk && data.owners_by_pk.ownr_fn) || ""} ${
-            (data.owners_by_pk && data.owners_by_pk.ownr_ln) || ""
-          } ${(data.owners_by_pk && data.owners_by_pk.ownr_co_nm) || ""}`
-        : "",
+      name: data ? OwnerNameDisplayFunction(data.owners_by_pk) : "",
     });
     setSelectedHeader("owners");
     setBreadcrumbs([
@@ -50,11 +47,7 @@ export function OwnersDetailContainer({
       {
         link: `/manage/owners/${ownerId}`,
         label: t("titles.bc.owner-detail", {
-          name: data
-            ? `${(data.owners_by_pk && data.owners_by_pk.ownr_fn) || ""} ${
-                (data.owners_by_pk && data.owners_by_pk.ownr_ln) || ""
-              } ${(data.owners_by_pk && data.owners_by_pk.ownr_co_nm) || ""}`
-            : "",
+          name: data ? OwnerNameDisplayFunction(data.owners_by_pk) : "",
         }),
       },
     ]);
@@ -64,9 +57,7 @@ export function OwnersDetailContainer({
         CreateRecentItem(
           ownerId,
           "owner",
-          `${data.owners_by_pk.ownr_fn || ""} ${
-            data.owners_by_pk.ownr_ln || ""
-          } ${data.owners_by_pk.ownr_co_nm || ""}`,
+          OwnerNameDisplayFunction(data.owners_by_pk),
           `/manage/owners/${ownerId}`
         )
       );

client/src/pages/parts-queue/parts-queue.page.component.jsx

@@ -17,6 +17,7 @@ import { alphaSort } from "../../utils/sorters";
 import { useLocation } from "react-router-dom";
 import queryString from "query-string";
 import _ from "lodash";
+import OwnerNameDisplay from "../../components/owner-name-display/owner-name-display.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -120,14 +121,12 @@ export function PartsQueuePageComponent({ bodyshop }) {
       render: (text, record) => {
         return record.ownerid ? (
           <Link to={"/manage/owners/" + record.ownerid}>
-            {`${record.ownr_fn || ""} ${record.ownr_ln || ""} ${
-              record.ownr_co_nm || ""
-            }`}
+            <OwnerNameDisplay ownerObject={record} />
           </Link>
         ) : (
-          <span>{`${record.ownr_fn || ""} ${record.ownr_ln || ""} ${
-            record.ownr_co_nm || ""
-          }`}</span>
+          <span>
+            <OwnerNameDisplay ownerObject={record} />
+          </span>
         );
       },
     },