@kiwicom/smart-faq/src/SmartFAQ/StaticFAQ/FAQExtraInfo/BoardingPassesInfo/index.js

Smart FAQ

// @flow

import idx from 'idx';
import * as React from 'react';
import css from 'styled-jsx/css';
import { graphql } from 'react-relay';
import { Text } from '@kiwicom/orbit-components';
import { Ticket } from '@kiwicom/orbit-components/lib/icons';
import Translate from '@kiwicom/nitro/lib/components/Translate';

import { SelectedBooking } from '../../../context/SelectedBooking';
import type { State } from '../../../context/SelectedBooking';
import BoardingPassesSummary from './BoardingPassesSummary';
import QueryRenderer from '../../../relay/QueryRenderer';
import { UserContext } from '../../../context/User';
import type { UserContextType } from '../../../context/User';
import type { BoardingPassesInfoNearestQuery } from './__generated__/BoardingPassesInfoNearestQuery.graphql';
import type { BoardingPassesInfoSingleQuery } from './__generated__/BoardingPassesInfoSingleQuery.graphql';
import { maybeGetAuthToken } from '../../../../shared/relay/utils';

type Props = {||};

type QueryProps = {
  error: ?Error,
  props: ?(BoardingPassesInfoNearestQuery | BoardingPassesInfoSingleQuery),
};

const styles = css`
  div.boardingPassesCard {
    margin: 22px 0 24px 0;
    width: 100%;
    border-radius: 3px;
    background-color: #ffffff;
    border: solid 1px #e8edf1;
  }
  div.iconTitle {
    margin: 25px 12px 8.6px 24px;
    display: inline-block;
  }
  h1.title {
    vertical-align: middle;
    display: inline-block;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2;
    color: #171b1e;
    margin: 0;
  }
  div.subtitle {
    margin: 0 24px 24px;
  }
`;

const nearestInfoBoardingPasses = graphql`
  query BoardingPassesInfoNearestQuery($brand: String!) {
    nearestBooking(brand: $brand) {
      assets {
        ...BoardingPassesSummary
      }
      directAccessURL
    }
  }
`;

const singleBookingBoardingPasses = graphql`
  query BoardingPassesInfoSingleQuery(
    $id: Int!
    $authToken: String
    $brand: String!
  ) {
    singleBooking(id: $id, authToken: $authToken, brand: $brand) {
      assets {
        ...BoardingPassesSummary
      }
      directAccessURL
    }
  }
`;

class BoardingPassesInfo extends React.Component<Props> {
  renderBoardingPassesCard = (queryProps: QueryProps) => {
    const boardingPasses =
      idx(queryProps.props, _ => _.booking.assets) ||
      idx(queryProps.props, _ => _.nearestBooking.assets) ||
      idx(queryProps.props, _ => _.singleBooking.assets);
    const directAccessURL =
      idx(queryProps.props, _ => _.booking.directAccessURL) ||
      idx(queryProps.props, _ => _.nearestBooking.directAccessURL) ||
      idx(queryProps.props, _ => _.singleBooking.directAccessURL);

    return (
      <div className="boardingPassesCard">
        <div className="iconTitle">
          <Ticket customColor="black" />
        </div>
        <h1 className="title">
          <Translate t={__('smartfaq.boarding_pass_info.title')} />
        </h1>
        <div className="subtitle">
          <Text type="attention">
            <Translate t={__('smartfaq.boarding_pass_info.subtitle')} />
          </Text>
        </div>
        <BoardingPassesSummary data={boardingPasses} mmbUrl={directAccessURL} />
        <style jsx>{styles}</style>
      </div>
    );
  };

  render() {
    return (
      <UserContext.Consumer>
        {(userContext: UserContextType) => {
          return (
            <SelectedBooking.Consumer>
              {({ selectedBooking }: State) => {
                return selectedBooking ? (
                  <QueryRenderer
                    query={singleBookingBoardingPasses}
                    variables={{
                      id: selectedBooking,
                      authToken: maybeGetAuthToken(userContext),
                      brand: userContext.brand,
                    }}
                    render={this.renderBoardingPassesCard}
                  />
                ) : (
                  <QueryRenderer
                    query={nearestInfoBoardingPasses}
                    render={this.renderBoardingPassesCard}
                    variables={{ brand: userContext.brand }}
                  />
                );
              }}
            </SelectedBooking.Consumer>
          );
        }}
      </UserContext.Consumer>
    );
  }
}

export default BoardingPassesInfo;