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

// @flow

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

const Wrapper = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 0 40px;
`;

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

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

  render() {
    return (
      <Wrapper>
        <div>
          <Stack spaceAfter="normal">
            <Heading>
              <Translate t="smartfaq.faq.article.not_found.title" />
            </Heading>
          </Stack>
          <Stack spaceAfter="largest">
            <Text t="smartfaq.faq.article.not_found.description" />
          </Stack>
          <Button onClick={this.goToFAQ}>
            <Translate t="smartfaq.faq.article.not_found.link_to_help_center" />
          </Button>
        </div>
      </Wrapper>
    );
  }
}

export default withRouter(ArticleNotFound);