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

// @flow

import * as React from 'react';
import { graphql } from 'react-relay';

import { SelectedBooking } from '../../../../SmartFAQ/context/SelectedBooking';
import type { State } from '../../../../SmartFAQ/context/SelectedBooking';
import QueryRenderer from '../../../../SmartFAQ/relay/QueryRenderer';
import { UserContext } from '../../../../SmartFAQ/context/User';
import type { UserContextType } from '../../../../SmartFAQ/context/User';
import type { BoardingPassesInfoNearestQueryResponse } from './__generated__/BoardingPassesInfoNearestQuery.graphql';
import type { BoardingPassesInfoSingleQueryResponse } from './__generated__/BoardingPassesInfoSingleQuery.graphql';
import { maybeGetAuthToken } from '../../../relay/utils';
import BoardingPassesBoxWrapper from './BoardingPassesBoxWrapper';
import BoardingPassesBoxContent from './BoardingPassesBoxContent';

type Props = {||};

type SingleBookingProps = {
  error: ?Error,
  props: ?BoardingPassesInfoSingleQueryResponse,
};

type NearestBookingProps = {
  error: ?Error,
  props: ?BoardingPassesInfoNearestQueryResponse,
};

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

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

class BoardingPassesInfo extends React.Component<Props> {
  // TODO - Log errors!!!
  renderBPForNearestBooking = (queryProps: NearestBookingProps) => {
    const { props, error } = queryProps;
    const boardingPassesInfo = props?.nearestBooking;
    return (
      <BoardingPassesBoxWrapper showSubtitle={!error}>
        <BoardingPassesBoxContent
          boardingPassesInfo={boardingPassesInfo}
          error={error}
        />
      </BoardingPassesBoxWrapper>
    );
  };

  renderBPForSingleBooking = (queryProps: SingleBookingProps) => {
    const { props, error } = queryProps;
    const boardingPassesInfo = props?.singleBooking;
    return (
      <BoardingPassesBoxWrapper showSubtitle={!error}>
        <BoardingPassesBoxContent
          boardingPassesInfo={boardingPassesInfo}
          error={error}
        />
      </BoardingPassesBoxWrapper>
    );
  };

  render() {
    return (
      <UserContext.Consumer>
        {(userContext: UserContextType) => (
          <SelectedBooking.Consumer>
            {({ selectedBooking }: State) => {
              // If we have a booking fetch the boarding passes for the given booking
              // or grab the nearest (temporal) booking if no booking is selected
              return selectedBooking ? (
                <QueryRenderer
                  query={singleBookingBoardingPasses}
                  variables={{
                    id: selectedBooking,
                    authToken: maybeGetAuthToken(userContext),
                    brand: userContext.brand,
                  }}
                  render={this.renderBPForSingleBooking}
                />
              ) : (
                <QueryRenderer
                  query={nearestInfoBoardingPasses}
                  render={this.renderBPForNearestBooking}
                  variables={{ brand: userContext.brand }}
                />
              );
            }}
          </SelectedBooking.Consumer>
        )}
      </UserContext.Consumer>
    );
  }
}

export default BoardingPassesInfo;