@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';

import PageVariantContext from '../../../SmartFAQ/context/PageVariant';

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 = urlPrefix => {
    this.props.history.push(urlPrefix);
  };

  render() {
    return (
      <PageVariantContext.Consumer>
        {({ urlPrefix }) => (
          <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(urlPrefix)}>
                <Translate t="smartfaq.faq.article.not_found.link_to_help_center" />
              </Button>
            </div>
          </Wrapper>
        )}
      </PageVariantContext.Consumer>
    );
  }
}

export default withRouter(ArticleNotFound);