@kiwicom/smart-faq/src/shared/StaticFAQ/index.js

// @flow

import * as React from 'react';
import css from 'styled-jsx/css';
import { withRouter } from 'react-router-dom';
import type { ContextRouter } from 'react-router-dom';

import FAQCategoryList from './FAQCategoryList';
import SearchAllFAQs from './SearchAllFAQs';
import { SearchState } from '../../SmartFAQ/context/SearchState';
import type { SearchStateType } from '../../SmartFAQ/context/SearchState';
import SearchBar from './SearchBar';
import { withToken } from '../../SmartFAQ/context/User';
import { BookingState } from '../../SmartFAQ/context/BookingState';
import ScrollableContent from '../../SmartFAQ/common/ScrollableContent';
import { Mobile, Desktop } from '../../SmartFAQ/common/Responsive';

const style = css`
  .static-faq {
    width: 100%;
    height: 100%;
    background-color: #f5f7f9;
  }
  .static-faq-body {
    height: 100%;
    padding: 24px 40px;
  }

  @media only screen and (max-width: 900px) {
    .static-faq-body {
      padding: 0;
    }
    .static-faq-search {
      padding: 16px;
      background-color: #f5f7f9;
    }
  }

  @media only screen and (min-width: 901px) {
    .static-faq-search {
      margin-bottom: 24px;
    }
  }
`;

type Props = {|
  ...ContextRouter,
  loginToken: ?string,
  simpleToken: ?string,
  kwAuthToken: ?string,
|};

const StaticFAQ = (props: Props) => {
  const categoryId = props.match.params.categoryId || null;
  const isLoggedIn = props.loginToken || props.simpleToken || props.kwAuthToken;

  return (
    <div style={{ height: '100%' }} className="static-faq">
      <SearchState.Consumer>
        {({ searchText, isVisible }: SearchStateType) => (
          <BookingState.Consumer>
            {({ showBooking }) => {
              const isSearching = searchText.length > 0;
              const showSearchForLoggedOutUser = !isLoggedIn || !showBooking;

              return (
                <ScrollableContent styles="background-color: #f5f7f9">
                  <div className="static-faq-body">
                    {!categoryId && isVisible && showSearchForLoggedOutUser && (
                      <div className="static-faq-search">
                        <Desktop>
                          <SearchBar autofocus />
                        </Desktop>
                        <Mobile>
                          <SearchBar />
                        </Mobile>
                      </div>
                    )}
                    {isSearching ? (
                      <SearchAllFAQs search={searchText} isSidebarVersion />
                    ) : (
                      <FAQCategoryList categoryId={categoryId} />
                    )}
                  </div>
                </ScrollableContent>
              );
            }}
          </BookingState.Consumer>
        )}
      </SearchState.Consumer>
      <style jsx>{style}</style>
    </div>
  );
};

export default withToken(withRouter(StaticFAQ));