59 lines
1.8 KiB
JavaScript
59 lines
1.8 KiB
JavaScript
import React from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
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();
|
|
|
|
return (
|
|
<CardTemplate
|
|
loading={loading}
|
|
title={t("jobs.labels.cards.customer")}
|
|
extraLink={data && data.owner ? `/manage/owners/${data.owner.id}` : null}
|
|
>
|
|
{data ? (
|
|
<span>
|
|
<div>
|
|
<Link to={`/manage/owners/${data.owner.id}`}>{`${data.ownr_fn ||
|
|
""} ${data.ownr_ln || ""}`}</Link>
|
|
</div>
|
|
<div>
|
|
{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>
|
|
<div>{`${(data.owner && data.owner.preferred_contact) || ""}`}</div>
|
|
<div>
|
|
{data.vehicle ? (
|
|
<Link to={`/manage/vehicles/${data.vehicleid}`}>
|
|
{`${data.v_model_yr || ""} ${data.v_make_desc ||
|
|
""} ${data.v_model_desc || ""}`}
|
|
a
|
|
</Link>
|
|
) : (
|
|
<span>
|
|
{`${data.v_model_yr || ""} ${data.v_make_desc ||
|
|
""} ${data.v_model_desc || ""}`}
|
|
b
|
|
</span>
|
|
)}
|
|
e
|
|
</div>
|
|
</span>
|
|
) : null}
|
|
</CardTemplate>
|
|
);
|
|
}
|