w-aura/src/components/PaymentPage/ErrorModal.tsx
Daniil Chemerkin 21c8ff7e9b Develop
2024-08-17 00:33:17 +00:00

64 lines
2.4 KiB
TypeScript

import { useTranslations } from "@/hooks/translations";
import MainButton from "../MainButton";
import Modal from "../Modal";
import Title from "../Title";
import Policy from "../Policy";
interface ModalProps {
open: boolean;
onClose: () => void;
}
function ErrorModal({ open, onClose }: ModalProps): JSX.Element {
const { translate } = useTranslations();
const supportLink = (
<a href="https://aura.wit.life/" target="_blank" rel="noopener noreferrer">
{translate("our_support")}
</a>
);
return (
<Modal open={open} onClose={onClose}>
<div className="modal-body error-modal">
<div className="ta-c mb-24">
<svg
fill="#000000"
height="60px"
width="60px"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 27.963 27.963"
xmlSpace="preserve"
>
<g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
<g
id="SVGRepo_tracerCarrier"
strokeLinecap="round"
strokeLinejoin="round"
></g>
<g id="SVGRepo_iconCarrier">
<g>
<g id="c129_exclamation">
<path d="M13.983,0C6.261,0,0.001,6.259,0.001,13.979c0,7.724,6.26,13.984,13.982,13.984s13.98-6.261,13.98-13.984 C27.963,6.259,21.705,0,13.983,0z M13.983,26.531c-6.933,0-12.55-5.62-12.55-12.553c0-6.93,5.617-12.548,12.55-12.548 c6.931,0,12.549,5.618,12.549,12.548C26.531,20.911,20.913,26.531,13.983,26.531z"></path>
<polygon points="15.579,17.158 16.191,4.579 11.804,4.579 12.414,17.158 "></polygon>
<path d="M13.998,18.546c-1.471,0-2.5,1.029-2.5,2.526c0,1.443,0.999,2.528,2.444,2.528h0.056c1.499,0,2.469-1.085,2.469-2.528 C16.441,19.575,15.468,18.546,13.998,18.546z"></path>
</g>
</g>
</g>
</svg>
</div>
<Title variant="h3">{translate("error_processing")}</Title>
<blockquote className="blockquote">{translate("please_try_again")}</blockquote>
<Policy className="mb-24 ta-l" sizing="medium">
{translate("any_dificulties", { supportLink })}
</Policy>
<MainButton color="blue" onClick={onClose}>
{translate("try_again")}
</MainButton>
</div>
</Modal>
);
}
export default ErrorModal;