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 | 1x 4x 3x 3x 3x 3x 3x 3x 3x 3x | import { useEffect } from "react";
import Cookies from "js-cookie";
import { useNavigate } from "react-router-dom";
import NiceModal from "@ebay/nice-modal-react";
import { useDrawerAccountWithUI } from "@features/GiveOnboarding/container/DrawerAccount";
import { Stack } from "@mui/material";
import { CaretDownIcon, StorefrontIcon } from "@phosphor-icons/react";
import GiveButton from "@shared/Button/GiveButton";
import GiveEmptyState from "@shared/EmptyState/GiveEmptyState";
import GiveLink from "@shared/Link/GiveLink";
import GiveText from "@shared/Text/GiveText";
import { LOGOUT_MODAL } from "modals/modal_names";
import { useAppSelector } from "@redux/hooks";
import { selectUser } from "@redux/slices/auth/auth";
const ClosedAccountPage = () => {
const navigate = useNavigate();
const user = useAppSelector(selectUser);
useEffect(() => {
const user = Cookies.get("user");
Iif (!user) {
navigate("/login", { replace: true });
}
}, [navigate]);
const minHeight =
typeof window !== "undefined" && window.innerHeight
? window.innerHeight
: 600;
return <ClosedAccountView minHeight={minHeight} merchantName={user.name} />;
};
export default ClosedAccountPage;
function ClosedAccountView({
minHeight,
merchantName = "",
}: {
minHeight: number;
merchantName?: string;
}) {
const { DrawerAccountComponent } = useDrawerAccountWithUI({
baseRender: () => <></>,
CustomButton: ({ onClick }) => (
<GiveButton
label="Switch Account"
size="large"
variant="outline"
endIcon={<CaretDownIcon size={18} />}
onClick={onClick}
/>
),
});
return (
<Stack
width="100%"
minHeight={minHeight}
flex={1}
alignItems="center"
justifyContent="center"
gap="24px"
>
<GiveEmptyState
Icon={<StorefrontIcon size={28} />}
title={{
main: "Account Closed",
secondary: (
<GiveText variant="body" fontSize="14px" color="secondary">
We regret to inform you that the {merchantName} account is
currently closed. If you think this is an error, please reach out
to our customer support team{" "}
<span style={{ whiteSpace: "nowrap", display: "inline" }}>
at{" "}
<GiveLink
link="mailto:support@givecorporation.com"
fontSize="14px"
sx={{ display: "inline" }}
>
support@givecorporation.com
</GiveLink>{" "}
for
</span>{" "}
assistance.
</GiveText>
),
}}
sx={{ maxWidth: "446px" }}
/>
<Stack direction="row" gap="16px">
<DrawerAccountComponent />
<GiveButton
label="Log Out"
size="large"
onClick={() => NiceModal.show(LOGOUT_MODAL)}
/>
</Stack>
</Stack>
);
}
|