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 | 1x 12x 12x 1x 12x 12x 12x 12x | import { Stack, StackProps } from "@mui/material";
import GiveButton from "@shared/Button/GiveButton";
import GiveText from "@shared/Text/GiveText";
import { useCustomTheme } from "@theme/hooks/useCustomTheme";
import { styled } from "@theme/v2/Provider";
type Props = {
receiverName: string;
senderName: string;
// Kept for backwards compatibility with the callers, but intentionally not
// rendered: the delivered PAH invitation email greets with a plain "Hi,"
// (no recipient name/email), so the preview must do the same to stay accurate.
receiverPAHName?: string;
isSendingToProvider?: boolean;
isPAHFromMerchantCreation?: boolean;
};
const PreviewInvitationModalCard = (props: Props) => {
const { isMobileView } = useCustomTheme();
return <Body {...props} isMobileView={isMobileView} />;
};
const Body = (props: Props & { isMobileView: boolean }) => {
const {
receiverName,
senderName,
isPAHFromMerchantCreation,
isSendingToProvider,
} = props;
Eif (!isPAHFromMerchantCreation) {
return (
<Container>
<GiveText variant="h2" color="dark" sx={{ fontWeight: "400" }}>
Hi,
</GiveText>
<GiveText variant="bodyS" color="dark" sx={{ fontWeight: "350" }}>
You have been invited as a primary account holder of the{" "}
{isSendingToProvider ? "provider" : "merchant"} account for{" "}
<span style={{ fontWeight: "700" }}>{receiverName}</span>.
</GiveText>
<GiveText variant="bodyS" color="dark" sx={{ fontWeight: "350" }}>
{" "}
{`Click the confirmation link below to accept the invitation and gain
access to the `}
<span style={{ fontWeight: "700" }}>{receiverName}</span>
{` ${isSendingToProvider ? "provider" : "merchant"} website.`}
</GiveText>
<GiveButton
label="Accept Invite"
size="large"
sx={{
width: "156px",
fontWeight: "400",
fontSize: "18px",
pointerEvents: "none",
alignSelf: "center",
}}
/>
<GiveText variant="bodyS" color="dark" sx={{ fontWeight: "350" }}>
{" "}
Thank you, <br /> {senderName || "GivePayments Team"}
</GiveText>
</Container>
);
}
return (
<Container>
<GiveText variant="h2" color="dark" sx={{ fontWeight: "400" }}>
Hi,
</GiveText>
<GiveText variant="bodyS" color="dark" sx={{ fontWeight: "350" }}>
{receiverName} has invited you as a Primary Account Holder.
</GiveText>
<GiveText
variant="bodyS"
color="dark"
sx={{ fontWeight: "350" }}
>{`Please click the button below to accept the invitation and access the ${
isSendingToProvider ? "provider" : "merchant"
} account. `}</GiveText>
<GiveButton
label="Accept Invite"
size="large"
sx={{
width: "156px",
fontWeight: "400",
fontSize: "18px",
pointerEvents: "none",
alignSelf: "center",
}}
/>
<GiveText variant="bodyS" color="dark" sx={{ fontWeight: "350" }}>
{" "}
Thank you, <br /> {senderName || "GivePayments Team"}
</GiveText>
</Container>
);
};
export default PreviewInvitationModalCard;
const Container = styled(Stack)<StackProps>(({ theme }) => ({
gap: "40px",
backgroundColor: theme.palette.neutral.white,
borderRadius: "50px",
padding: "56px",
}));
|