@kiwicom/smart-faq
Version:
161 lines (140 loc) • 4.39 kB
JavaScript
// @flow
import * as React from 'react';
import { graphql, createFragmentContainer } from 'react-relay';
import LogContext from '@kiwicom/nitro/lib/services/log/context';
import { GuaranteeChatContext } from '../context/GuaranteeChatInfo';
import type { GuaranteeChatBookingInfo } from '../context/GuaranteeChatInfo';
import type { GuaranteeNeededResolver_booking as GuaranteeNeededResolverType } from './__generated__/GuaranteeNeededResolver_booking.graphql';
import { events } from '../../const/events';
import type { log } from '../../const/events';
type Props = {|
booking: ?GuaranteeNeededResolverType,
eventSource: 'smartFAQ' | 'contactForm',
showGuaranteeChat: boolean,
guaranteeChatBookingInfo: ?GuaranteeChatBookingInfo,
toggleGuaranteeChat: boolean => void,
onSetBookingInfo: GuaranteeChatBookingInfo => void,
log: log,
|};
class GuaranteeNeededResolver extends React.Component<Props> {
componentDidMount() {
this.shouldShowGuaranteeChat();
this.updateBookingInfo();
}
componentDidUpdate() {
this.shouldShowGuaranteeChat();
this.updateBookingInfo();
}
componentWillUnmount() {
const { showGuaranteeChat, toggleGuaranteeChat } = this.props;
if (showGuaranteeChat) {
toggleGuaranteeChat(false);
}
}
updateBookingInfo = () => {
const { booking, guaranteeChatBookingInfo, onSetBookingInfo } = this.props;
const bid = booking && parseInt(booking.databaseId, 10);
if (bid === guaranteeChatBookingInfo?.bid) return;
const status = booking && booking.status;
const departureCity = booking?.upcomingLeg?.departure?.airport?.city?.name;
const arrivalCity = booking?.upcomingLeg?.arrival?.airport?.city?.name;
const departureAirport = booking?.upcomingLeg?.departure?.airport?.code;
const arrivalAirport = booking?.upcomingLeg?.arrival?.airport?.code;
const phone = booking?.contactDetails?.phone;
const email = booking?.contactDetails?.email;
const firstName = booking?.contactDetails?.passenger?.firstname;
const lastName = booking?.contactDetails?.passenger?.lastname;
onSetBookingInfo({
bid,
status,
departureCity,
departureAirport,
arrivalCity,
arrivalAirport,
phone,
email,
firstName,
lastName,
});
};
shouldShowGuaranteeChat = () => {
const { booking, eventSource, log } = this.props;
const forceGuaranteeChat =
typeof window !== 'undefined' && window.GuaranteeChatForce;
const showGuaranteeChat =
booking?.customerSupport?.hasGuaranteeChat ?? forceGuaranteeChat ?? false;
if (showGuaranteeChat !== this.props.showGuaranteeChat) {
if (showGuaranteeChat) {
log(events.GUARANTEE_CHAT_ENABLED, { where: eventSource });
}
this.props.toggleGuaranteeChat(Boolean(showGuaranteeChat));
}
};
render() {
return null;
}
}
const WrappedGuaranteeNeededResolver = ({ booking, eventSource }: Props) => {
const {
showGuaranteeChat,
enableChat,
toggleGuaranteeChat,
onSetBookingInfo,
guaranteeChatBookingInfo,
} = React.useContext(GuaranteeChatContext);
const { log } = React.useContext(LogContext);
if (!enableChat) {
// do not process upcomingLeg info at all if chat is disabled
return null;
}
return (
<GuaranteeNeededResolver
log={log}
booking={booking}
eventSource={eventSource}
showGuaranteeChat={showGuaranteeChat}
toggleGuaranteeChat={toggleGuaranteeChat}
onSetBookingInfo={onSetBookingInfo}
guaranteeChatBookingInfo={guaranteeChatBookingInfo}
/>
);
};
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
}
}
}
}
`,
);