126 lines
4.4 KiB
JavaScript
126 lines
4.4 KiB
JavaScript
import React, { useEffect, useState } from "react";
|
|
import { useContactProfile } from "../../hooks/useDirectory";
|
|
import Avatar from "../common/Avatar";
|
|
import moment from "moment";
|
|
import NotesDirectory from "./NotesDirectory";
|
|
|
|
const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
|
|
const { conatProfile, loading } = useContactProfile(contact?.id);
|
|
const [profileContact, setProfileContact] = useState();
|
|
|
|
useEffect(() => {
|
|
setProfileContact(conatProfile);
|
|
}, [conatProfile]);
|
|
return (
|
|
<div className="p-1">
|
|
<div className="text-center m-0 p-0">
|
|
<p className="fw-semibold fs-6 m-0">Contact Profile</p>
|
|
</div>
|
|
<div>
|
|
<div className="d-flex align-items-center mb-2">
|
|
<Avatar
|
|
size="sm"
|
|
firstName={
|
|
(contact?.name || "").trim().split(" ")[0]?.charAt(0) || ""
|
|
}
|
|
lastName={
|
|
(contact?.name || "").trim().split(" ")[1]?.charAt(0) || ""
|
|
}
|
|
/>
|
|
<div className="d-flex flex-column text-start ms-2">
|
|
<span className="m-0 fw-semibold">{contact?.name}</span>
|
|
<span className="small">
|
|
<i className="bx bx-building bx-xs"></i>{" "}
|
|
{conatProfile?.organization}
|
|
</span>
|
|
<span className="small-text">Manager</span>
|
|
</div>
|
|
</div>
|
|
<div className="row">
|
|
<div className="col-12 col-md-6 d-flex flex-column text-start">
|
|
{conatProfile?.contactEmails?.length > 0 && (
|
|
<div className="d-flex mb-2">
|
|
<div style={{ width: "100px", minWidth: "100px" }}>
|
|
<p className="m-0">Email</p>
|
|
</div>
|
|
<div>
|
|
<ul className="list-inline mb-0">
|
|
{conatProfile.contactEmails.map((email, idx) => (
|
|
<li className="list-inline-item me-3" key={idx}>
|
|
<i className="bx bx-envelope bx-xs me-1"></i>
|
|
{email.emailAddress}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
)}
|
|
{conatProfile?.contactPhones?.length > 0 && (
|
|
<div className="d-flex mb-2">
|
|
<div style={{ width: "100px", minWidth: "100px" }}>
|
|
<p className="m-0">Phone</p>
|
|
</div>
|
|
<div>
|
|
<ul className="list-inline mb-0">
|
|
{conatProfile?.contactPhones.map((phone, idx) => (
|
|
<li className="list-inline-item me-3" key={idx}>
|
|
<i className="bx bx-phone bx-xs me-1"></i>
|
|
{phone.phoneNumber}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{conatProfile?.createdAt && (
|
|
<div className="d-flex mb-2">
|
|
<div style={{ width: "100px", minWidth: "100px" }}>
|
|
<p className="m-0">Created</p>
|
|
</div>
|
|
<div>
|
|
<ul className="list-inline mb-0">
|
|
<li className="list-inline-item">
|
|
<i className="bx bx-calendar-week bx-xs me-1"></i>
|
|
{moment(conatProfile.createdAt).format("MMMM, DD YYYY")}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
{ conatProfile?.buckets?.length > 0 &&
|
|
<div className="col-12 col-md-6 d-flex flex-column text-start">
|
|
{conatProfile?.contactEmails?.length > 0 && (
|
|
<div className="d-flex mb-2 align-items-center">
|
|
<div style={{ width: "100px", minWidth: "100px" }}>
|
|
<p className="m-0">Buckets</p>
|
|
</div>
|
|
<div>
|
|
<ul className="list-inline mb-0">
|
|
{conatProfile.buckets.map((bucket) => (
|
|
<li className="list-inline-item me-2" key={bucket.id}>
|
|
<span class="badge bg-label-primary my-1">{ bucket.name}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
<hr className="my-1" />
|
|
<NotesDirectory
|
|
isLoading={loading}
|
|
contactProfile={profileContact}
|
|
setProfileContact={setProfileContact}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ProfileContactDirectory;
|