@kiwicom/smart-faq/src/shared/StaticFAQ/ArticleDetail/FAQArticleNotFound.js

// @flow

import * as React from 'react';
import { Heading, Button } from '@kiwicom/orbit-components';
import Text from '@kiwicom/nitro/lib/components/Text';
import { withRouter } from 'react-router-dom';
import css from 'styled-jsx/css';
import Translate from '@kiwicom/nitro/lib/components/Translate';
import type { ContextRouter } from 'react-router-dom';

const style = css`
  .notFoundContainer {
    display: flex;
    flex: 1;
    height: 100%;
    align-items: center;
    justify-content: center;
    padding: 0 40px;
  }
  .textMargin {
    margin-top: 10px;
    margin-bottom: 40px;
  }
`;

type Props = {|
  ...ContextRouter,
|};

class ArticleNotFound extends React.Component<Props> {
  goToFAQ = () => {
    this.props.history.push('/faq');
  };

  render() {
    return (
      <div className="notFoundContainer">
        <div>
          <Heading>
            <Translate t="smartfaq.faq.article.not_found.title" />
          </Heading>
          <div className="textMargin">
            <Text t="smartfaq.faq.article.not_found.description" />
          </div>
          <Button onClick={this.goToFAQ}>
            <Translate t="smartfaq.faq.article.not_found.link_to_help_center" />
          </Button>
        </div>
        <style jsx>{style}</style>
      </div>
    );
  }
}

export default withRouter(ArticleNotFound);