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 | 3x | import { Stack } from "@mui/material";
import React from "react";
import BusinessProfileStatus from "./BusinessProfileStatusV2";
import { BusinessProfileStatusType } from "@common/Tag/BusinessProfileTag";
import GiveText from "@shared/Text/GiveText";
import { Box } from "@mui/material";
import {
RenderTextsComponent,
RenderTextComponentTypes,
} from "features/Merchants/MerchantSidePanel/AgreementAndSnapshot/Snapshot/components/BaseCardComponent";
import { styled, useAppTheme } from "@theme/v2/Provider";
import GiveMotionWrapper from "@shared/Motion/GiveMotionWrapper";
function LinkedComponent({
isConfirmedMatch,
status,
BusinessOwners,
list,
}: {
isConfirmedMatch: boolean;
status: {
updatedAt: number | null;
updatedByName: string | null;
updatedByEmail: string | null;
status: BusinessProfileStatusType;
statusDisplayMessage: string;
};
BusinessOwners: JSX.Element;
list: RenderTextComponentTypes[];
}) {
const theme = useAppTheme();
return (
<Stack>
<BusinessProfileStatus
isConfirmedMatch={isConfirmedMatch}
{...status}
data-testid="business-profile-status"
/>
<Stack
mb="14px"
mt="46px"
gap="12px"
alignItems="baseline"
flexDirection="row"
>
<GiveText mb={1} variant="h6" fontWeight="regular" color="primary">
Business Details{" "}
</GiveText>
<Wrapper>
<GiveText variant="bodyXS">Linked</GiveText>
</Wrapper>
</Stack>
<Box
p="20px"
border={`1px solid ${theme.palette.border?.primary}`}
borderRadius="20px"
mb="46px"
>
{list?.map((item, index) => (
<GiveMotionWrapper
key={item.label + item.value}
delay={50 + 50 * (index + 1)}
>
<RenderTextsComponent {...item} />
</GiveMotionWrapper>
))}
</Box>
{BusinessOwners}
</Stack>
);
}
export default LinkedComponent;
const Wrapper = styled(Stack)(({ theme }) => ({
backgroundColor: theme?.palette?.surface?.tertiary,
border: `1px solid ${theme?.palette?.border?.tertiary}`,
borderRadius: "8px",
padding: "5px 8px",
alignItems: "center",
justifyContent: "center",
}));
|