@kiwicom/smart-faq/src/shared/StaticFAQ/FAQExtraInfo/BaggageInfo/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 BaggageSummary from './BaggageSummary';
import QueryRenderer from '../../../../SmartFAQ/relay/QueryRenderer';
import type { BaggageInfoSelectedQueryResponse } from './__generated__/BaggageInfoSelectedQuery.graphql';
import type { BaggageInfoNearestQueryResponse } from './__generated__/BaggageInfoNearestQuery.graphql';
import { UserContext } from '../../../../SmartFAQ/context/User';
import type { UserContextType } from '../../../../SmartFAQ/context/User';
import { maybeGetAuthToken } from '../../../relay/utils';
import InfoBox from './InfoBox';

type Props = {||};

type SingleBookingQueryProps = {
  props: ?BaggageInfoSelectedQueryResponse,
  error: ?Error,
};

type NearestBookingQueryProps = {
  props: ?BaggageInfoNearestQueryResponse,
  error: ?Error,
};

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> {
  // FIXME - handle error state!!!
  // TODO
  // - log errors
  // - do not use "data" prop
  // - directAccessURL defined in fragment
  renderBaggageForSingleBooking = (queryProps: SingleBookingQueryProps) => {
    const baggage = queryProps.props?.singleBooking?.baggage;
    const directAccessURL = queryProps.props?.singleBooking?.directAccessURL;

    return (
      <InfoBox>
        <BaggageSummary data={baggage ?? null} mmbUrl={directAccessURL} />
      </InfoBox>
    );
  };

  renderBaggageForNearestBooking = (queryProps: NearestBookingQueryProps) => {
    const baggage = queryProps.props?.nearestBooking?.baggage;
    const directAccessURL = queryProps.props?.nearestBooking?.directAccessURL;

    return (
      <InfoBox>
        <BaggageSummary data={baggage ?? null} mmbUrl={directAccessURL} />
      </InfoBox>
    );
  };

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

export default BaggageInfo;