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

Smart FAQ

// @flow

import * as React from 'react';
import idx from 'idx';
import css from 'styled-jsx/css';
import { withRouter } 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) {
    .search-input {
      margin-bottom: 24px;
    }
  }
`;

type Props = {|
  loginToken: ?string,
  simpleToken: ?string,
  kwAuthToken: ?string,
  match: {
    params: {
      categoryId: ?string,
    },
  },
  searchText: string,
  isVisible: boolean,
  onSearchChange: (e: SyntheticInputEvent<HTMLInputElement>) => void,
  onSearchCancel: () => void,
|};

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

  return (
    <SearchState.Consumer>
      {({ searchText, isVisible }: SearchStateType) => (
        <BookingState.Consumer>
          {({ showBooking }) => {
            const isSearching = searchText.length > 0;
            const showSearchForLoggedInUser = isLoggedIn && showBooking;
            const showSearchForLoggedOutUser = !isLoggedIn || !showBooking;

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

export default withToken(withRouter(StaticFAQ));