@kiwicom/smart-faq/src/shared/StaticFAQ/FAQExtraInfo/FAQExtraInfoButton.js

// @flow

import * as React from 'react';
import css from 'styled-jsx/css';
import classNames from 'classnames';
import { withRouter } from 'react-router-dom';
import type { ContextRouter } from 'react-router-dom';
import { ButtonLink } from '@kiwicom/orbit-components';
import LogContext from '@kiwicom/nitro/lib/services/log/context';

import { SearchState } from '../../../SmartFAQ/context/SearchState';
import {
  ExtraInfoState,
  categories,
} from '../../../SmartFAQ/context/ExtraInfoState';
import type { ExtraInfoCategory } from '../../../SmartFAQ/context/ExtraInfoState';
import { events } from '../../../const/events';
import type { log } from '../../../const/events';

type ContainerProps = {|
  ...ContextRouter,
  children?: React.Node,
  category: ExtraInfoCategory,
  icon?: React.Node,
  dataTest?: string,
|};

type Props = {|
  ...ContainerProps,
  clearSearch: () => void,
  activeExtraInfoCategory: ?ExtraInfoCategory,
  setExtraInfoCategory: (category: ?ExtraInfoCategory) => void,
  log: log,
|};

// FIXME remove this
const styles = css`
  .button {
    height: 44px;
    border-radius: 3px;
    background-color: #ffffff;
    outline: none;
  }
  .active {
    background-color: #e8edf1;
  }
`;

class FAQExtraInfoButton extends React.Component<Props> {
  getCategoryId = () => {
    const { category } = this.props;

    return category === 'baggage'
      ? categories.BAGGAGE
      : categories.BOARDING_PASS;
  };

  isActive = () => {
    const { category, activeExtraInfoCategory, history } = this.props;
    const categoryId = this.getCategoryId();
    return (
      activeExtraInfoCategory === category &&
      history.location.pathname.includes(`/faq/${categoryId}`)
    );
  };

  activate = () => {
    const { history, category, setExtraInfoCategory, clearSearch } = this.props;

    const categoryId = this.getCategoryId();
    setExtraInfoCategory(category);
    history.push(`/faq/${categoryId}`);
    clearSearch();
  };

  deactivate = () => {
    const { setExtraInfoCategory, history } = this.props;

    setExtraInfoCategory(null);
    history.push('/');
  };

  handleClick = () => {
    const { category, log } = this.props;
    if (category === 'baggage') {
      log(events.BAGGAGE_CLICK, {});
    } else {
      log(events.BP_CLICK, {});
    }

    if (this.isActive()) {
      this.deactivate();
    } else {
      this.activate();
    }
  };

  render() {
    const { children, dataTest, icon } = this.props;

    return (
      <div
        className={classNames('button', {
          active: this.isActive(),
        })}
        data-test={dataTest}
      >
        <ButtonLink iconLeft={icon} onClick={this.handleClick}>
          {children}
        </ButtonLink>
      </div>
    );
  }
}

const WrappedFAQExtraInfoButton = (props: ContainerProps) => {
  const { log } = React.useContext(LogContext);
  const { clearSearch } = React.useContext(SearchState);
  const { activeExtraInfoCategory, setExtraInfoCategory } = React.useContext(
    ExtraInfoState,
  );

  return (
    <span>
      <FAQExtraInfoButton
        {...props}
        log={log}
        clearSearch={clearSearch}
        activeExtraInfoCategory={activeExtraInfoCategory}
        setExtraInfoCategory={setExtraInfoCategory}
      />
      <style jsx>{styles}</style>
    </span>
  );
};

export default withRouter(WrappedFAQExtraInfoButton);