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 | import { useEffect } from "react";
import { useParams } from "react-router-dom";
import PageContainer from "./components/pageContainer";
import { HandShakeIcon, NewSigninIcon } from "@assets/icons";
import EmailConfirmedBackground from "@assets/images/confirmed-email-page.png";
import EmailExpiredBackground from "@assets/images/expired-email-page.png";
import EmailConfirmedIcon from "@assets/images/confirmed-image-icon.png";
import EmailExpiredIcon from "@assets/images/email-expired-icon.png";
import ActionButton from "./components/ActionButton";
import { useValidateAccount } from "@services/api/onboarding/user";
import { Box, CircularProgress } from "@mui/material";
import { useCustomTheme } from "@theme/hooks/useCustomTheme";
function EmailConfirmation() {
const { isMediumSmallView } = useCustomTheme();
const { token } = useParams();
const {
mutateAsync: validateAccount,
isLoading,
isSuccess,
} = useValidateAccount();
useEffect(() => {
const handleValidation = async () => {
try {
await validateAccount({ token: token as string });
} catch (error) {
return;
}
};
handleValidation();
}, []);
if (isLoading)
return (
<Box
sx={{
height: "100vh",
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<CircularProgress />
</Box>
);
if (isSuccess)
return (
<PageContainer
title={"Your account has been successfully validated!"}
imgSrc={EmailConfirmedIcon}
imageUri={EmailConfirmedBackground}
actions={
<ActionButton
link="/login"
icon={<NewSigninIcon height={20} width={20} />}
label="Log in"
/>
}
></PageContainer>
);
else
return (
<PageContainer
imgSrc={EmailExpiredIcon}
title="Confirmation link has expired"
description={
<>
It looks like you are too late to activate your account or it has
been activated before. {!isMediumSmallView && <br />} Do not worry,
you can generate a new link or contact support if the issue
persists.
</>
}
imageUri={EmailExpiredBackground}
hideSupport
actions={
<ActionButton
link="mailto:support@givepayments.com"
icon={<HandShakeIcon height={20} width={20} />}
label="Support"
/>
}
></PageContainer>
);
}
export default EmailConfirmation;
|