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 | 10x 4x 4x 4x 32x 4x | import { Grid, Chip, Button, Paper } from "@mui/material";
import GiveText from "@shared/Text/GiveText";
import { useAppTheme } from "@theme/v2/Provider";
import { alpha } from "@mui/material/styles";
import { LinkBreakIcon } from "@phosphor-icons/react";
import { IBusinessData } from "@features/GiveOnboarding/types/form";
export const LinkedBusinessProfile = ({
data,
onChangeTaxId,
}: {
data: IBusinessData;
onChangeTaxId: () => void;
}) => {
const { palette } = useAppTheme();
const { business_profile, business_address } = data;
const detailItem = (label: string, value?: string) => (
<Grid item xs={12} sm={6} key={label}>
<GiveText variant="bodyS" color="secondary" sx={{ display: "block" }}>
{label}
</GiveText>
<GiveText variant="bodyS" color="primary">
{value || "-"}
</GiveText>
</Grid>
);
return (
<Paper
elevation={0}
sx={{
p: { xs: 2, md: 3 },
borderRadius: "12px",
border: { xs: "none", md: `1px solid ${palette.divider}` },
}}
>
<Grid container spacing={2}>
<Grid
item
xs={12}
container
justifyContent="space-between"
alignItems="center"
>
<GiveText variant="h6" color="primary">
{business_profile.name}
</GiveText>
<Chip
label="Linked"
size="small"
sx={{
bgcolor: palette.primitive?.success?.[25] || "#E6F4EA",
color: palette.primitive?.success?.[100] || "#00692B",
padding: "6px 16px",
}}
/>
</Grid>
<Grid item xs={12} container spacing={2} sx={{ mt: { xs: 0, md: 1 } }}>
{detailItem("Legal Name", business_profile.name)}
{detailItem("Business Type", business_profile.type)}
{detailItem(
"Federal Tax ID",
business_profile.taxIDNumber || business_profile.ssn,
)}
{detailItem(
"Business Ownership Type",
business_profile.ownershipType,
)}
{detailItem("Doing Business As (Optional)", business_profile.DBA)}
{detailItem(
"Business Creation Date",
business_profile.businessOpenedAt?.toString(),
)}
{detailItem("Business Phone Number", business_profile.phoneNumber)}
{detailItem(
"Age of Business",
business_profile.businessOpenedAt?.toString(),
)}
</Grid>
<Grid item xs={12} sx={{ mt: 1 }}>
<GiveText variant="bodyS" color="secondary" sx={{ display: "block" }}>
Address
</GiveText>
<GiveText variant="bodyS" color="primary">
{/* no ideea when and hwo this happens */}
{business_address?.address ?? ""}, {business_address?.city ?? ""},{" "}
{business_address?.state ?? ""},{business_address?.zip ?? ""},{" "}
{business_address?.country ?? ""}
</GiveText>
</Grid>
<Grid item xs={12} sx={{ mt: 3 }}>
<Button
onClick={onChangeTaxId}
variant="outline"
sx={{
borderRadius: "8px",
textTransform: "none",
borderColor:
palette.primitive?.error?.[50] || palette.error?.main || "red",
color:
palette.primitive?.error?.[50] || palette.error?.main || "red",
"&:hover": {
borderColor:
palette.primitive?.error?.[75] ||
palette.error?.dark ||
"darkred",
backgroundColor: alpha(
palette.primitive?.error?.[50] ||
palette.error?.main ||
"#D32F2F",
0.04,
),
},
}}
>
<LinkBreakIcon size={16} />
Remove Business Profile
</Button>
</Grid>
</Grid>
</Paper>
);
};
|