accounts-frontend/packages/app/components/ui/bsod/BSoD.tsx

54 lines
1.6 KiB
TypeScript
Raw Normal View History

import React, { ComponentType } from 'react';
import { FormattedMessage as Message } from 'react-intl';
import appInfo from 'app/components/auth/appInfo/AppInfo.intl.json';
import BoxesField from './BoxesField';
import styles from './styles.scss';
import messages from './BSoD.intl.json';
2019-12-07 16:58:52 +05:30
interface State {
2020-05-24 04:38:24 +05:30
lastEventId?: string | void;
2019-12-07 16:58:52 +05:30
}
interface Props {
2020-05-24 04:38:24 +05:30
lastEventId?: string;
}
2018-05-02 23:52:13 +05:30
// TODO: probably it's better to render this view from the App view
// to remove dependencies from the store and IntlProvider
const BSoD: ComponentType<Props> = ({ lastEventId }) => {
2020-05-24 04:38:24 +05:30
let emailUrl = 'mailto:support@ely.by';
if (lastEventId) {
emailUrl += `?subject=Bug report for #${lastEventId}`;
}
return (
<div className={styles.body}>
<canvas className={styles.canvas} ref={(el: HTMLCanvasElement | null) => el && new BoxesField(el)} />
<div className={styles.wrapper}>
<div className={styles.title}>
<Message {...appInfo.appName} />
</div>
<div className={styles.lineWithMargin}>
<Message {...messages.criticalErrorHappened} />
</div>
<div className={styles.line}>
<Message {...messages.reloadPageOrContactUs} />
</div>
<a href={emailUrl} className={styles.support}>
support@ely.by
</a>
<div className={styles.easterEgg}>
<Message {...messages.alsoYouCanInteractWithBackground} />
</div>
</div>
</div>
2020-05-24 04:38:24 +05:30
);
};
2019-12-07 16:58:52 +05:30
export default BSoD;