@kiwicom/smart-faq/src/shared/relay/GuaranteeNeededResolver.js

Smart FAQ

// @flow

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

import { simpleTracker } from '../helpers/analytics/trackers';
import { GuaranteeChatContext } from '../context/GuaranteeChatInfo';
import type { GuaranteeChatBookingInfo } from '../context/GuaranteeChatInfo';
import type { GuaranteeNeededResolver_booking } from './__generated__/GuaranteeNeededResolver_booking.graphql';
import { track } from '../cuckoo/tracker';

type ComponentProps = {|
  booking: ?GuaranteeNeededResolver_booking,
  eventSource: 'smartFAQ' | 'contactForm',
|};

type Props = {|
  ...ComponentProps,
  showGuaranteeChat: boolean,
  guaranteeChatBookingInfo: ?GuaranteeChatBookingInfo,
  toggleGuaranteeChat: boolean => void,
  onSetBookingInfo: GuaranteeChatBookingInfo => void,
|};

class GuaranteeNeededResolver extends React.Component<Props> {
  componentDidMount() {
    this.shouldShowGuaranteeChat();
    this.updateBookingInfo();
  }

  componentDidUpdate() {
    this.shouldShowGuaranteeChat();
    this.updateBookingInfo();
  }

  componentWillUnmount() {
    const { showGuaranteeChat, toggleGuaranteeChat } = this.props;

    showGuaranteeChat && toggleGuaranteeChat(false);
  }

  updateBookingInfo = () => {
    const { booking, guaranteeChatBookingInfo, onSetBookingInfo } = this.props;
    const bid = booking && parseInt(booking.databaseId, 10);

    if (bid === idx(guaranteeChatBookingInfo, _ => _.bid)) {
      return;
    }

    const status = booking && booking.status;
    const departureCity = idx(
      booking,
      _ => _.upcomingLeg.departure.airport.city.name,
    );
    const arrivalCity = idx(
      booking,
      _ => _.upcomingLeg.arrival.airport.city.name,
    );
    const departureAirport = idx(
      booking,
      _ => _.upcomingLeg.departure.airport.code,
    );
    const arrivalAirport = idx(
      booking,
      _ => _.upcomingLeg.arrival.airport.code,
    );
    const phone = idx(booking, _ => _.contactDetails.phone);
    const email = idx(booking, _ => _.contactDetails.email);
    const firstName = idx(booking, _ => _.contactDetails.passenger.firstname);
    const lastName = idx(booking, _ => _.contactDetails.passenger.lastname);

    onSetBookingInfo({
      bid,
      status,
      departureCity,
      departureAirport,
      arrivalCity,
      arrivalAirport,
      phone,
      email,
      firstName,
      lastName,
    });
  };

  shouldShowGuaranteeChat = () => {
    const { booking, eventSource } = this.props;
    const forceGuaranteeChat =
      typeof window !== 'undefined' && window.GuaranteeChatForce;
    const showGuaranteeChat =
      idx(booking, _ => _.customerSupport.hasGuaranteeChat) ||
      forceGuaranteeChat ||
      false;

    if (showGuaranteeChat !== this.props.showGuaranteeChat) {
      if (showGuaranteeChat) {
        simpleTracker('smartFAQBookingOverview', {
          action: 'chatEnabled',
          where: eventSource,
        });
        track('GuaranteeChat', 'chatEnabled', { where: eventSource });
      }

      this.props.toggleGuaranteeChat(Boolean(showGuaranteeChat));
    }
  };

  render() {
    return null;
  }
}

const WrappedGuaranteeNeededResolver = ({
  booking,
  eventSource,
}: ComponentProps) => (
  <GuaranteeChatContext.Consumer>
    {({
      showGuaranteeChat,
      enableChat,
      toggleGuaranteeChat,
      onSetBookingInfo,
      guaranteeChatBookingInfo,
    }) => {
      if (!enableChat) {
        // do not process upcomingLeg info at all if chat is disabled
        return null;
      }

      return (
        <GuaranteeNeededResolver
          booking={booking}
          eventSource={eventSource}
          showGuaranteeChat={showGuaranteeChat}
          toggleGuaranteeChat={toggleGuaranteeChat}
          onSetBookingInfo={onSetBookingInfo}
          guaranteeChatBookingInfo={guaranteeChatBookingInfo}
        />
      );
    }}
  </GuaranteeChatContext.Consumer>
);

export const UnwrappedGuaranteeNeededResolver = GuaranteeNeededResolver;

export default createFragmentContainer(
  WrappedGuaranteeNeededResolver,
  graphql`
    fragment GuaranteeNeededResolver_booking on BookingInterface {
      databaseId: id(opaque: false)
      status
      contactDetails {
        phone
        email
        passenger {
          firstname
          lastname
        }
      }
      customerSupport {
        hasGuaranteeChat
      }
      upcomingLeg(guarantee: KIWICOM) {
        arrival {
          airport {
            city {
              name
            }
            code
          }
        }
        departure {
          airport {
            city {
              name
            }
            code
          }
        }
      }
    }
  `,
);