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 | 1x 1x 1x 1x 1x 1x 1x 1x | import React from 'react';
import { defaultProps } from './props/defaultProps';
import { propTypes } from './props/propTypes';
import { Container, Box } from '@zohodesk/components/lib/Layout';
import WillBeRightBack from '@zohodesk/svg/lib/errorstate/version1/WillBeRightBack';
import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
import commonStyle from '../EmptyStates.module.css';
import style from './WillBack.module.css';
export default class WillBack extends React.Component {
constructor(props) {
super(props);
this.responsiveFunc = this.responsiveFunc.bind(this);
}
responsiveFunc({ mediaQueryOR }) {
return {
tablet: mediaQueryOR([{ minWidth: 481, maxWidth: 768 }]),
uptoMobile: mediaQueryOR([{ maxWidth: 480 }])
};
}
render() {
let { dataId, customClass } = this.props;
return (
<ResponsiveReceiver query={this.responsiveFunc}>
{({ tablet, uptoMobile }) => (
<Container
className={`${uptoMobile || tablet ? commonStyle.tabletContainer : commonStyle.container} ${customClass}`}
dataId={dataId}
scroll='vertical'
>
<Box className={commonStyle.top}>
<div className={uptoMobile || tablet ? '' : `${commonStyle.header} ${style.header} `}>
<div className={uptoMobile ? style.mobileTitle : tablet ? style.tabletTitle : style.title}>
We'll be right back !
</div>
</div>
</Box>
<Box
className={
uptoMobile ? style.mobileImageContainer : tablet ? style.tabletImageContainer : style.imageContainer
}
>
<WillBeRightBack isFluid dataId={`${dataId}_svg`} />
</Box>
<Box className={`${uptoMobile || tablet ? '' : commonStyle.footerWidth} ${commonStyle.footer}`}>
<div className={uptoMobile || tablet ? commonStyle.tabletBtmText : commonStyle.btmText}>
Our Service is temporarity unavailable. We are currently working to restore it.
</div>
<div
className={`${uptoMobile || tablet ? commonStyle.tabletBtmText : commonStyle.btmText} ${
style.bottomSpace
} `}
>
Please try again later or report this issue
</div>
<div className={uptoMobile || tablet ? commonStyle.tabletBtmText : commonStyle.btmText}>
2013, Zoho Corp, All rights reserved.
</div>
</Box>
</Container>
)}
</ResponsiveReceiver>
);
}
}
WillBack.propTypes = propTypes;
WillBack.defaultProps = defaultProps;
// if (__DOCS__) {
// WillBack.docs = {
// componentGroup: 'errorStates'
// };
// }
|