@kiwicom/smart-faq/src/SmartFAQ/IntroPage/index.js

Smart FAQ

// @flow

import idx from 'idx';
import * as React from 'react';
import css from 'styled-jsx/css';
import { Redirect, withRouter } from 'react-router-dom';
import type { Location } from 'react-router-dom';
import {
  Text,
  Illustration,
  Alert,
  Button,
  Stack,
} from '@kiwicom/orbit-components';
import AlertCircle from '@kiwicom/orbit-components/lib/icons/AlertCircle';
import Translate from '@kiwicom/nitro/lib/components/Translate';
import MediaQuery from 'react-responsive';

import UserStatus from '../helpers/UserStatus';
import CloseButton from '../common/buttons/CloseButton';
import { withLogin } from '../context/User';
import type { onLogin } from '../../types';
import FullFAQLink from '../common/FullFAQLink';
import { simpleTracker } from '../../shared/helpers/analytics/trackers';
import { track } from '../../shared/cuckoo/tracker';

const style = css`
  .Intro {
    width: 480px;
    padding-top: 128px;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
  }
  div.picture {
    text-align: center;
  }
  div.text {
    margin-left: 40px;
  }
  :global([dir='rtl']) div.text {
    margin-right: 40px;
    text-align: right;
  }
  p.title {
    color: #171b1e;
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 6px;
  }
  div.buttons {
    margin-left: 40px;
    margin-top: 52.4px;
  }

  :global([dir='rtl']) div.buttons {
    margin-right: 40px;
  }
  hr.hr-line {
    margin: 36px 64px 22px 64px;
    height: 0;
    border: 0;
    border-top: 1px solid #e8edf1;
  }
  .faqLink {
    margin-bottom: 20px;
    line-height: 1.4;
    display: flex;
    justify-content: center;
  }
  @media only screen and (max-width: 480px) {
    .Intro {
      width: 100%;
      padding-top: 75px;
    }
    div.picture {
      text-align: center;
      margin: 0px 0px 40px 0px;
    }
    hr.hr-line {
      margin: 28px 16px 22px 16px;
    }
    div.text {
      margin-left: 16px;
      margin-right: 16px;
    }
    p.title {
      font-size: 22px;
    }
    div.buttons {
      margin: 28px 16px 24px 16px;
    }
    button {
      width: 100%;
    }
  }
  @media only screen and (max-height: 480px) {
    .Intro {
      width: 100%;
      padding-top: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    div.picture {
      display: none;
    }
    hr.hr-line {
      width: 288px;
      margin: 19px 0 22px;
    }
    div.text {
      width: 288px;
      margin: 0;
    }
    p.title {
      font-size: 22px;
      text-align: center;
      margin-bottom: 20px;
    }
    div.buttons {
      width: 288px;
      margin: 12px 0 0;
    }
    :global([dir='rtl']) div.buttons {
      margin: 0 12px 0 0;
    }
    div.buttons button {
      width: 100%;
    }
    .faqLink {
      margin: 0;
    }
  }
`;

type Props = {
  history: {
    push: string => void,
  },
  location: ?Location,
  onLogin: onLogin,
};

export class PureIntro extends React.Component<Props> {
  goToExistingBooking = () => {
    simpleTracker('smartFAQ', {
      action: 'clickOnIntroButton',
      haveBooking: true,
    });
    track('Login', 'clickOnIntroButton', { haveBooking: true });
    this.props.onLogin();
  };

  goToNoBooking = () => {
    simpleTracker('smartFAQ', {
      action: 'clickOnIntroButton',
      haveBooking: false,
    });
    track('Login', 'clickOnIntroButton', { haveBooking: false });
    this.props.history.push('/faq');
  };

  renderExpiredSession() {
    return (
      <div className="infoMessage" data-cy="message-expired-session">
        <Alert type="info" icon={<AlertCircle />}>
          <Translate t={__('smartfaq.intro_page.alert')} />
        </Alert>
        <style jsx>
          {`
            div.infoMessage {
              margin: 20px 40px 0;
            }
          `}
        </style>
      </div>
    );
  }

  render() {
    const sessionExpired = idx(
      this.props.location,
      _ => _.state.sessionExpired,
    );

    return (
      <div className="Intro">
        <CloseButton />
        <MediaQuery minWidth="339px">
          <div className="picture">
            <Illustration size="medium" name="Help" />
          </div>
        </MediaQuery>
        <div className="text">
          <p className="title">
            <Translate t={__('smartfaq.intro_page.title')} />
          </p>
          <Text type="secondary">
            <Translate t={__('smartfaq.intro_page.subtitle')} />
          </Text>
        </div>
        {sessionExpired && this.renderExpiredSession()}
        <div className="buttons">
          <Stack spacing="natural">
            <Button
              type="primary"
              onClick={this.goToExistingBooking}
              dataTest="btn-existent-booking"
            >
              <Translate t={__('smartfaq.intro_page.existing_booking')} />
            </Button>
            <Button
              type="secondary"
              onClick={this.goToNoBooking}
              dataTest="btn-nonexistent-booking"
            >
              <Translate t={__('smartfaq.intro_page.no_booking')} />
            </Button>
          </Stack>
        </div>
        <hr className="hr-line" />
        <div className="faqLink">
          <FullFAQLink />
        </div>
        <style jsx>{style}</style>
      </div>
    );
  }
}

const IntroPage = (props: Props) => (
  <>
    <UserStatus.LoggedIn>
      <Redirect to="/faq" />
    </UserStatus.LoggedIn>
    <PureIntro {...props} />
  </>
);

export default withLogin(withRouter(IntroPage));