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 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 | 7x 7x 7x 7x 7x 2x 7x 7x 7x 7x 5x 2x | import GiveText from "@shared/Text/GiveText";
import { BusinessProfileContentProps, FieldConfig } from "../types";
import { Stack } from "@mui/material";
import { businessTypes } from "@common/BusinessProfileInputs/GiveBusinessTypeSelect";
import { capitalizeFirstLetter } from "@utils/index";
import {
getServicePhoneNumber,
omitLeadingZeros,
} from "@utils/helpers";
import { normalizeAddress, formatAddressDisplay } from "@utils/address";
import { CountryFlag } from "@common/CountryFlag";
import { CustomGrid } from "./Sections";
import { HideOrShow } from "./Accordion.atom";
import { ApprovalBanner, TaskEmptyState, TaskLoading } from "./Sections.atoms";
import {
computeAgeOfBusiness,
useMerchantDateFormatter,
} from "@components/Merchants/MerchantPreview/helpers/parsers";
import { useIsFetching } from "react-query";
import { MERCHANT_SIDE_PANEL_PREVIEW_API_KEYS } from "@features/Merchants/MerchantSidePanel/constants";
export function BusinessProfileContent({
merchantData,
businessProfile,
taxID,
}: BusinessProfileContentProps) {
const fetchNumber = useIsFetching({
queryKey: [
MERCHANT_SIDE_PANEL_PREVIEW_API_KEYS.GET_LEGAL_ENTITY,
merchantData?.merchantID,
],
});
const isFetching = fetchNumber > 0;
const { age } = computeAgeOfBusiness(businessProfile?.businessOpenedAt);
const { merchantDateFormatter } = useMerchantDateFormatter();
const businessProfileConfig: FieldConfig[] = [
{
label: "Legal Name",
value: businessProfile?.legalName || "-",
span: 6,
},
{
label: "Business Type",
value:
businessTypes[
businessProfile?.businessType as keyof typeof businessTypes
],
span: 6,
},
{
label: "Federal Tax ID",
value: taxID || "-",
span: 6,
},
{
label: "Business Ownership Type",
value: capitalizeFirstLetter(businessProfile?.ownershipType) || "-",
span: 6,
},
{
label: "Doing Business As (Optional)",
value: businessProfile?.dba || "-",
span: 6,
},
{
label: "Business Creation Date",
value: businessProfile?.businessOpenedAt || "-",
span: 6,
},
{
label: "Business Phone Number",
component: () => (
<Stack direction="row" gap="8px" alignItems="center">
<CountryFlag
phoneNumber={omitLeadingZeros(businessProfile?.contactPhone)}
/>
<GiveText variant="bodyS">
{" "}
{getServicePhoneNumber(businessProfile?.contactPhone, {
format: true,
})}
</GiveText>
</Stack>
),
span: 6,
},
{
label: "Age of Business",
value: age,
span: 6,
},
{
label: "Address",
value: formatAddressDisplay(normalizeAddress(merchantData?.address)),
span: 6,
},
];
const approvedAt = businessProfile?.approvedAt;
const approvedBy =
businessProfile?.controllerName || businessProfile?.approvedByName;
Iif (isFetching) return <TaskLoading />;
if (!businessProfile?.legalName) {
return <TaskEmptyState section="business-profile" />;
}
return (
<>
<HideOrShow
component={
<ApprovalBanner
text={`<span> This business profile was </span> <span> approved on</span> ${
approvedAt
? merchantDateFormatter("MM/dd/yyyy", approvedAt) || ""
: ""
} by ${approvedBy}.`}
/>
}
hidden={!approvedAt || !approvedBy}
/>
<CustomGrid itemsList={businessProfileConfig} />
</>
);
}
|