@kiwicom/smart-faq/src/ContactFormChat/ContactFormChat.js

// @flow

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

import QueryRenderer from '../shared/relay/QueryRenderer';
import Banner from './Banner';
import BookingInfo from './BookingInfo';
import { GuaranteeChatContext } from '../shared/context/GuaranteeChatInfo';
import GuaranteeNeededResolver from '../shared/relay/GuaranteeNeededResolver';
import { maybeGetAuthToken } from '../shared/relay/utils';
import type { ContactFormChatNearestBookingQueryResponse } from './__generated__/ContactFormChatNearestBookingQuery.graphql';

type Props = {|
  bid: ?number,
  loginToken: ?string,
  simpleToken: ?string,
  kwAuthToken: ?string,
  language: string,
  brand: string,
|};

type RenderState = {
  props: ?ContactFormChatNearestBookingQueryResponse,
  error: ?Error,
};

const queryNearestBooking = graphql`
  query ContactFormChatNearestBookingQuery($brand: String!) {
    nearestBooking(brand: $brand) {
      ...GuaranteeNeededResolver_booking
      ...BookingInfo_booking
    }
  }
`;

const querySelectedBooking = graphql`
  query ContactFormChatSelectedBookingQuery(
    $brand: String!
    $bid: Int!
    $authToken: String
  ) {
    singleBooking(brand: $brand, id: $bid, authToken: $authToken) {
      ...GuaranteeNeededResolver_booking
      ...BookingInfo_booking
    }
  }
`;

class ContactFormChat extends React.Component<Props> {
  renderGuaranteeResolver = (renderState: RenderState) => {
    const booking =
      // $FlowExpectedError: Expected
      renderState.props?.singleBooking ?? renderState.props?.nearestBooking;

    if (renderState.props && booking) {
      return (
        <React.Fragment>
          <GuaranteeNeededResolver
            booking={booking}
            eventSource="contactForm"
          />
          <BookingInfo booking={booking} />
        </React.Fragment>
      );
    }

    return null;
  };

  render() {
    const {
      loginToken,
      kwAuthToken,
      language,
      bid,
      simpleToken,
      brand,
    } = this.props;
    let query = null;

    if (bid) {
      const authToken = maybeGetAuthToken({
        kwAuthToken,
        loginToken,
        simpleToken,
      });
      query = (
        <QueryRenderer
          query={querySelectedBooking}
          render={this.renderGuaranteeResolver}
          variables={{ brand, bid, authToken }}
          loginToken={loginToken}
          kwAuthToken={kwAuthToken}
          language={language}
        />
      );
    } else if (loginToken || kwAuthToken) {
      query = (
        <QueryRenderer
          query={queryNearestBooking}
          render={this.renderGuaranteeResolver}
          variables={{ brand }}
          loginToken={loginToken}
          kwAuthToken={kwAuthToken}
          language={language}
        />
      );
    }

    return (
      <>
        <GuaranteeChatContext.Consumer>
          {({ showGuaranteeChat }) => {
            if (!showGuaranteeChat) {
              return null;
            }

            return <Banner />;
          }}
        </GuaranteeChatContext.Consumer>
        {query}
      </>
    );
  }
}

export default ContactFormChat;