@kiwicom/smart-faq/src/SmartFAQ/common/layout/Header.js

// @flow

import { withRouter } from 'react-router-dom';
import * as React from 'react';
import css from 'styled-jsx/css';
import { TextLink } from '@kiwicom/orbit-components';
import Translate from '@kiwicom/nitro/lib/components/Translate';
import type { Location, Match } from 'react-router-dom';

import { Desktop, Mobile } from '../Responsive';
import CloseButton from '../buttons/CloseButton';
import BackButton from '../buttons/BackButton';
import SignOutButton from './SignOutButton';
import { UserContext, withLogin } from '../../context/User';
import { SelectedBooking } from '../../context/SelectedBooking';
import responsiveStyleHelperClasses from '../responsiveStyleHelperClasses';
import MobileBookingHeader from '../../MobileBookingHeader/MobileBookingHeader';
import type { UserContextType } from '../../context/User';
import SearchBar from '../../../shared/StaticFAQ/SearchBar';
import UserStatus from '../../helpers/UserStatus';
import type { onLogin } from '../../../types';
import { isWebView } from '../../helpers/UrlHelpers';

const style = css`
  .loggedOut {
    display: flex;
    justify-content: space-between;
    padding: 15px 122px 15px 40px;
  }
  .header {
    display: flex;
    align-items: center;
  }
  .HeaderFAQ {
    width: 100%;
    border-bottom: 1px solid #e8edf1;
    background-color: #ffffff;
  }
`;

const loggedInStyle = css`
  .helpHeader {
    font-size: 28px;
    font-weight: bold;
    color: #171b1e;
    pointer-events: none;
  }
  .loggedIn {
    display: flex;
    justify-content: space-between;
    flex: 1;
    padding: 15px 122px 15px 40px;
  }
  .links {
    display: flex;
    align-items: center;
  }
  a.open-icon {
    margin-left: 12px;
  }
  .staticFaqSearch {
    width: 350px;
    position: absolute;
    right: 260px;
    top: 10px;
  }
  @media only screen and (max-width: 900px) and (max-height: 480px) {
    .loggedIn {
      display: none;
    }
  }
  @media only screen and (max-width: 900px) {
    .loggedIn {
      padding: 15px;
    }
    .helpHeader {
      width: 100%;
      text-align: center;
      font-size: 1.2em;
    }
  }
`;

const loggedOutStyle = css`
  .helpHeader {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    color: #171b1e;
    pointer-events: none;
    margin: 0;
  }
  .loggedOut {
    display: flex;
    align-items: center;
    padding: 16px;
    height: 66px;
  }
  .signInOrBack {
    height: 20px;
  }
  :global([dir='rtl']) .signInOrBack {
    padding-right: 32px;
  }
  .backButton {
    line-height: 2;
  }
  @media only screen and (max-width: 901px) {
    .helpHeader {
      position: absolute;
      left: 0;
      right: 0;
      text-align: center;
    }
  }
`;

type Props = {
  renderOnlyLoggedOut: boolean,
  onLogin: onLogin,
  match: Match,
  location: Location,
};

const LoggedIn = () => {
  return (
    <div>
      <div className="loggedIn">
        <SelectedBooking.Consumer>
          {({ bookingPage }) => (
            <div className="helpHeader">
              {bookingPage === 'ALL_BOOKINGS' ? (
                <React.Fragment>
                  <Mobile>
                    <Translate t={__('smartfaq.mobile_header.title')} />
                  </Mobile>
                  <Desktop>
                    <Translate t="smartfaq.header.title" />
                  </Desktop>
                </React.Fragment>
              ) : (
                <Translate t="smartfaq.header.title" />
              )}
            </div>
          )}
        </SelectedBooking.Consumer>
        <Desktop>
          <div className="staticFaqSearch">
            <SearchBar />
          </div>
          <div className="links">
            <SignOutButton />
          </div>
        </Desktop>
      </div>
      <Mobile>
        <MobileBookingHeader />
      </Mobile>
      <style jsx>{loggedInStyle}</style>
      <style jsx>{responsiveStyleHelperClasses}</style>
    </div>
  );
};

type LoggedOutProps = {|
  hasCategory: string | null,
  isArticle: boolean,
  comesFromSearch: boolean,
  renderSignIn: boolean,
  onLogin: onLogin,
|};

class LoggedOut extends React.Component<LoggedOutProps> {
  onClickLogin = e => {
    e.preventDefault();
    this.props.onLogin();
  };

  render() {
    const {
      hasCategory,
      isArticle,
      comesFromSearch,
      renderSignIn,
    } = this.props;
    const signIn = renderSignIn ? (
      <TextLink
        href=""
        onClick={this.onClickLogin}
        type="secondary"
        dataTest="sign-in-link"
      >
        <Translate html t="smartfaq.header.sign_in" />
      </TextLink>
    ) : null;

    return (
      <div className="loggedOut">
        <div className="signInOrBack">
          {hasCategory || isArticle ? (
            <div className="backButton">
              <BackButton type={comesFromSearch ? 'search' : 'back'} />
            </div>
          ) : (
            signIn
          )}
        </div>
        <p className="helpHeader">
          <Translate t="smartfaq.header.title" />
        </p>
        <style jsx>{responsiveStyleHelperClasses}</style>
        <style jsx>{loggedOutStyle}</style>
      </div>
    );
  }
}

const Header = (props: Props) => {
  const hasCategory = props.match.params.categoryId ?? null;
  const currentpath = props.location && props.location.pathname;
  const isArticle = currentpath.includes('article/');
  const comesFromSearch = currentpath.includes('faq/search/');

  return (
    <div id="SmartFAQ_header" className="header">
      <div className="HeaderFAQ">
        {!props.renderOnlyLoggedOut && (
          <UserStatus.LoggedIn>
            <Desktop>
              <CloseButton />
            </Desktop>
          </UserStatus.LoggedIn>
        )}
        <UserContext.Consumer>
          {({ simpleToken, loginToken, kwAuthToken }: UserContextType) => {
            const isLoggedIn = simpleToken || loginToken || kwAuthToken;
            const renderCloseButton =
              (!isLoggedIn || props.renderOnlyLoggedOut) && !isWebView;

            return (
              <React.Fragment>
                {renderCloseButton && <CloseButton />}
                {isLoggedIn && !props.renderOnlyLoggedOut ? (
                  <LoggedIn />
                ) : (
                  <LoggedOut
                    hasCategory={hasCategory}
                    isArticle={isArticle}
                    comesFromSearch={comesFromSearch}
                    renderSignIn={!props.renderOnlyLoggedOut && !isWebView}
                    onLogin={props.onLogin}
                  />
                )}
              </React.Fragment>
            );
          }}
        </UserContext.Consumer>
      </div>
      <style jsx>{style}</style>
    </div>
  );
};

export const RawContentHeader = Header;

export default withRouter(withLogin(Header));