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 | import { Stack } from "@mui/material";
import { CaretRightIcon, WarningCircleIcon } from "@phosphor-icons/react";
import SectionCardBase from "@shared/SidePanel/components/SectionCard/SectionCardBase";
import GiveText from "@shared/Text/GiveText";
import { useAppTheme } from "@theme/v2/Provider";
import { AgreementState, StatusInfo } from "../../agreements.types";
import GiveTooltip from "@shared/Tooltip/GiveTooltip";
import GiveIconButton from "@shared/IconButton/GiveIconButton";
interface Props {
onClick: () => void;
statusInfo?: AgreementState;
}
function SnapshotCard({ onClick, statusInfo }: Props) {
const { palette } = useAppTheme();
const status = statusInfo || "";
if (!["signed", "newVersion"]?.includes(status)) return <></>;
const secondary = palette.text.secondary;
return (
<SectionCardBase>
<Stack
justifyContent="space-between"
alignItems="center"
onClick={onClick}
flexDirection="row"
sx={{
cursor: "pointer",
}}
>
<Stack gap="8px" alignItems="center" flexDirection="row">
<GiveText fontSize="14px" color="secondary">
Snapshot
</GiveText>
<GiveTooltip
color="default"
title="When transitioning to the sponsor stage, a snapshot is captured as a permanent record of the Merchant’s original information from the approval process."
>
<WarningCircleIcon fill={secondary} size="16px" />
</GiveTooltip>
</Stack>
<GiveIconButton
onClick={onClick}
Icon={CaretRightIcon}
color={secondary}
size="medium"
sx={{
backgroundColor: "transparent",
}}
/>
</Stack>
</SectionCardBase>
);
}
export default SnapshotCard;
|