Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | 16x 16x 16x 16x 16x 16x | import { CountryFlag } from "@common/CountryFlag";
import { Customer } from "types/customer.types";
import { omitLeadingZeros } from "@utils/helpers";
import { formatCustomerPhoneNumber } from "../utils";
import { CustomerSection, CustomerSectionItem } from "./CustomerSection";
import { formatInUTCMoment, useFormatDateInTimezone } from "@utils/date.helpers";
import { formatPhone } from "@utils/helpers";
interface Props {
data?: Customer;
}
export default function CustomerDetails({ data }: Props) {
const { formatInTimezone } = useFormatDateInTimezone();
const {
email,
phoneNumber,
dateOfBirth,
occupation,
employer,
address,
createdAt,
notes,
} = data || {};
const noZeroesPhone =
phoneNumber && phoneNumber.length > 4 ? omitLeadingZeros(phoneNumber) : "1";
const formattedPhone = phoneNumber
? formatCustomerPhoneNumber(formatPhone(noZeroesPhone))
: "";
const details: CustomerSectionItem[] = [
{ label: "Email", value: email },
{
label: "Customer Phone Number",
value: formattedPhone,
icon: formattedPhone ? (
<CountryFlag
phoneNumber={noZeroesPhone}
{...(noZeroesPhone === "1" && { isoCode: "us" })}
/>
) : undefined,
},
{
label: "Date of Birth",
value: dateOfBirth ? formatInUTCMoment(dateOfBirth) : "-",
},
{ label: "Occupation", value: occupation },
{ label: "Employer", value: employer },
{ label: "Street Address", value: address?.line1 },
{ label: "City", value: address?.city },
{ label: "State", value: address?.state },
{ label: "ZIP", value: address?.zip },
{
label: "Joined",
value: createdAt
? formatInTimezone(createdAt, "MMM dd, yyyy hh:mmaa")
: "-",
},
{ label: "Custom Note", value: notes },
];
return <CustomerSection title="Details" items={details} />;
}
|