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

// @flow

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

import UserStatus from '../helpers/UserStatus';
import CloseButton from '../common/buttons/CloseButton';
import { UserContext } from '../context/User';
import type { onLogin } from '../../types';
import FullFAQLink from '../common/FullFAQLink';
import { events } from '../../const/events';
import type { log } from '../../const/events';

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 OwnProps = {|
  ...ContextRouter,
|};

type Props = {|
  ...OwnProps,
  log: log,
  onLogin: onLogin,
|};

export class PureIntro extends React.Component<Props> {
  goToExistingBooking = () => {
    const { log } = this.props;

    log(events.INTRO_BUTTON_CLICKED, { haveBooking: true });
    this.props.onLogin();
  };

  goToNoBooking = () => {
    const { log } = this.props;

    log(events.INTRO_BUTTON_CLICKED, { 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 = 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" t="smartfaq.intro_page.subtitle" />
        </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: OwnProps) => {
  const { log } = React.useContext(LogContext);
  const { onLogin } = React.useContext(UserContext);

  return (
    <>
      <UserStatus.LoggedIn>
        <Redirect to="/faq" />
      </UserStatus.LoggedIn>
      <PureIntro {...props} log={log} onLogin={onLogin} />
    </>
  );
};

export default withRouter(IntroPage);