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

Smart FAQ

// @flow

import * as React from 'react';
import css from 'styled-jsx/css';
import classNames from 'classnames';
import { withRouter } from 'react-router-dom';
import { ButtonLink } from '@kiwicom/orbit-components';

import { simpleTracker } from '../../../shared/helpers/analytics/trackers';
import { SearchState } from '../../../SmartFAQ/context/SearchState';
import type { SearchStateType } from '../../../SmartFAQ/context/SearchState';
import {
  ExtraInfoState,
  categories,
} from '../../../SmartFAQ/context/ExtraInfoState';
import type {
  Context,
  ExtraInfoCategory,
} from '../../../SmartFAQ/context/ExtraInfoState';
import { track } from '../../../shared/cuckoo/tracker';

type Props = {|
  children?: React.Node,
  category: ExtraInfoCategory,
  icon?: React.Node,
  history: {
    push: string => void,
    location: {
      pathname: string,
    },
  },
  dataTest?: string,
|};

const trackBaggage = () => {
  simpleTracker('smartFAQBookingOverview', {
    action: 'clickOnBaggageButton',
  });
  track('Baggage', 'clickOnBaggageButton');
};

const trackBoardingPass = () => {
  simpleTracker('smartFAQBookingOverview', {
    action: 'clickOnBoardingPassButton',
  });
  track('BoardingPasses', 'clickOnBoardingPassButton');
};

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

const FAQExtraInfoButton = ({
  category,
  children,
  history,
  icon,
  dataTest,
}: Props) => {
  return (
    <React.Fragment>
      <SearchState.Consumer>
        {({ changeSearchText }: SearchStateType) => (
          <ExtraInfoState.Consumer>
            {({ activeExtraInfoCategory, setExtraInfoCategory }: Context) => {
              const categoryId =
                category === 'baggage'
                  ? categories.BAGGAGE
                  : categories.BOARDING_PASS;
              const isActive =
                activeExtraInfoCategory === category &&
                history.location.pathname.includes(`/faq/${categoryId}`);
              const activate = () => {
                setExtraInfoCategory(category);
                history.push(`/faq/${categoryId}`);
                changeSearchText('');
              };
              const deactivate = () => {
                setExtraInfoCategory(null);
                history.push('/');
              };

              return (
                <div
                  className={classNames('button', {
                    active: isActive,
                  })}
                  data-test={dataTest}
                >
                  <ButtonLink
                    iconLeft={icon}
                    onClick={() => {
                      category === 'baggage'
                        ? trackBaggage()
                        : trackBoardingPass();
                      if (isActive) {
                        deactivate();
                      } else {
                        activate();
                      }
                    }}
                  >
                    {children}
                  </ButtonLink>
                </div>
              );
            }}
          </ExtraInfoState.Consumer>
        )}
      </SearchState.Consumer>
      <style jsx>{styles}</style>
    </React.Fragment>
  );
};

export default withRouter(FAQExtraInfoButton);