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 | 4x 2x 2x 4x 4x 4x | import { memo } from "react";
import { Stack, Box } from "@mui/material";
import { PaperPlaneTiltIcon } from "@phosphor-icons/react";
import GiveText from "@shared/Text/GiveText";
import { styled, useAppTheme } from "@theme/v2/Provider";
import GiveButton from "@shared/Button/GiveButton";
type Props = {
email: string;
isSendDisabled?: boolean;
isSendHidden?: boolean;
isDeleteEnabled?: boolean;
handleResend?: () => void;
handleRevoke?: () => void;
};
const InvitationDisclaimer = ({
email,
isSendDisabled = false,
isSendHidden = false,
isDeleteEnabled = false,
handleResend,
handleRevoke,
}: Props) => {
const theme = useAppTheme();
return (
<>
<MessageContainerStack>
<IconBox>
<PaperPlaneTiltIcon
size={24}
color={theme.palette?.icon?.["icon-primary"]}
/>
</IconBox>
<Stack gap="10px">
<GiveText>Invitation Sent</GiveText>
<InviteMessageText variant="bodyS" color="secondary">
The invitation has been sent to{" "}
<strong style={{ wordBreak: "break-all" }}>{email}</strong>.
We're now waiting for them to accept the invitation.
</InviteMessageText>
<Stack direction="row" pt="10px" gap="8px">
{!isSendHidden && (
<GiveButton
label="Resend Invitation"
size="small"
variant="filled"
onClick={handleResend}
disabled={isSendDisabled}
/>
)}
{isDeleteEnabled && (
<GiveButton
label="Revoke"
size="small"
variant="ghost"
onClick={handleRevoke}
/>
)}
</Stack>
</Stack>
</MessageContainerStack>
</>
);
};
export default memo(InvitationDisclaimer);
const MessageContainerStack = styled(Stack)(({ theme }) => ({
flexDirection: "row",
gap: "12px",
backgroundColor: theme.palette.surface?.tertiary,
padding: "20px",
borderRadius: "20px",
}));
const IconBox = styled(Box)(({ theme }) => ({
width: 40,
height: 40,
borderRadius: "50%",
padding: "8px",
backgroundColor: theme.palette.surface?.secondary,
}));
const InviteMessageText = styled(GiveText)(() => ({
overflowWrap: "break-word",
wordBreak: "break-word",
}));
|