@kiwicom/smart-faq/src/SmartFAQ/StaticFAQ/FAQExtraInfo/BaggageInfo/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 BaggageChecked from '@kiwicom/orbit-components/lib/icons/BaggageChecked';
import Translate from '@kiwicom/nitro/lib/components/Translate';

import { SelectedBooking } from '../../../context/SelectedBooking';
import type { State } from '../../../context/SelectedBooking';
import BaggageSummary from './BaggageSummary';
import QueryRenderer from '../../../relay/QueryRenderer';
import type { BaggageInfoQuery } from './__generated__/BaggageInfoSelectedQuery.graphql';
import type { BaggageInfoNearestQuery } from './__generated__/BaggageInfoNearestQuery.graphql';
import { UserContext } from '../../../context/User';
import type { UserContextType } from '../../../context/User';
import { maybeGetAuthToken } from '../../../../shared/relay/utils';

type Props = {||};

type QueryProps = {|
  props: BaggageInfoQuery | BaggageInfoNearestQuery,
|};

const styles = css`
  div.baggageCard {
    margin-top: 22px;
    width: 100%;
    border-radius: 3px;
    background-color: #ffffff;
    border: solid 1px #e8edf1;
    margin-bottom: 24px;
  }
  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;
  }
  div.subtitle {
    margin-left: 24px;
    margin-bottom: 24px;
  }

  :global([dir='rtl']) div.subtitle {
    margin-right: 15px;
  }
`;

const selectedInfoBaggage = graphql`
  query BaggageInfoSelectedQuery(
    $id: Int!
    $brand: String!
    $authToken: String
  ) {
    singleBooking(id: $id, brand: $brand, authToken: $authToken) {
      directAccessURL
      type: __typename
      baggage {
        ...BaggageSummary
      }

      ... on BookingOneWay {
        trip {
          departure {
            time
          }
        }
      }

      ... on BookingReturn {
        outbound {
          departure {
            time
          }
        }
      }

      ... on BookingMulticity {
        trips @relay(plural: true) {
          departure {
            time
          }
        }
      }
    }
  }
`;

const nearestInfoBaggage = graphql`
  query BaggageInfoNearestQuery($brand: String!) {
    nearestBooking(brand: $brand) {
      directAccessURL
      type: __typename
      baggage {
        ...BaggageSummary
      }

      ... on BookingOneWay {
        trip {
          departure {
            time
          }
        }
      }

      ... on BookingReturn {
        outbound {
          departure {
            time
          }
        }
      }

      ... on BookingMulticity {
        trips @relay(plural: true) {
          departure {
            time
          }
        }
      }
    }
  }
`;

class BaggageInfo extends React.Component<Props> {
  renderBaggageCard = (queryProps: QueryProps) => {
    const baggage =
      idx(queryProps.props, _ => _.singleBooking.baggage) ||
      idx(queryProps.props, _ => _.nearestBooking.baggage);

    const directAccessURL =
      idx(queryProps.props, _ => _.singleBooking.directAccessURL) ||
      idx(queryProps.props, _ => _.nearestBooking.directAccessURL);

    return (
      <div className="baggageCard">
        <div className="iconTitle">
          <BaggageChecked customColor="black" />
        </div>
        <h1 className="title">
          <Translate t={__('smartfaq.baggage_info.title')} />
        </h1>
        <div className="subtitle">
          <Text type="attention">
            <Translate t={__('smartfaq.baggage_info.subtitle')} />
          </Text>
        </div>
        <BaggageSummary data={baggage || null} mmbUrl={directAccessURL} />
        <style jsx>{styles}</style>
      </div>
    );
  };

  render() {
    return (
      <UserContext.Consumer>
        {(userContext: UserContextType) => {
          return (
            <SelectedBooking.Consumer>
              {({ selectedBooking }: State) => {
                return !selectedBooking ? (
                  <QueryRenderer
                    query={nearestInfoBaggage}
                    render={this.renderBaggageCard}
                    cacheConfig={{ force: true }}
                    variables={{ brand: userContext.brand }}
                  />
                ) : (
                  <QueryRenderer
                    query={selectedInfoBaggage}
                    render={this.renderBaggageCard}
                    cacheConfig={{ force: true }}
                    variables={{
                      id: selectedBooking,
                      brand: userContext.brand,
                      authToken: maybeGetAuthToken(userContext),
                    }}
                  />
                );
              }}
            </SelectedBooking.Consumer>
          );
        }}
      </UserContext.Consumer>
    );
  }
}

export default BaggageInfo;