@kiwicom/smart-faq/src/CustomerSupportPhones/index.js

Smart FAQ

// @flow

import idx from 'idx';
import * as React from 'react';
import { graphql } from 'react-relay';
import Translate from '@kiwicom/nitro/lib/components/Translate';
import { Heading, Text, TextLink, Stack } from '@kiwicom/orbit-components';
import InitIntl from '@kiwicom/nitro/lib/components/InitIntl';
import * as intlContext from '@kiwicom/nitro/lib/services/intl/context';

import Phone from './Phone';
import { langInfos } from '../translations/langInfos';
import QueryRenderer from '../shared/relay/QueryRenderer';
import { track, setTracker } from '../shared/cuckoo/tracker';
import type { CuckooLogger } from '../shared/cuckoo/cuckooTypes';
import type { CustomerSupportPhonesQueryResponse } from './__generated__/CustomerSupportPhonesQuery.graphql';

type Props = {|
  +language: string,
  +translations: { [key: string]: string },
  +linkToLearnMoreArticle: () => void,
  +showPriorityLine: boolean,
  +cuckoo?: CuckooLogger,
|};

type RenderProps = {
  props: ?CustomerSupportPhonesQueryResponse,
  error: ?Error,
};

const queryAllCustomerSupportNumbers = graphql`
  # @ensure-fallback
  query CustomerSupportPhonesQuery {
    allCustomerSupportNumbers {
      premiumCustomerSupportNumbers {
        ...Phone
      }
      standardCustomerSupportNumbers {
        ...Phone
      }
    }
  }
`;

class CustomerSupportPhones extends React.Component<Props> {
  constructor(props: Props) {
    super(props);
    if (props.cuckoo) {
      setTracker(props.cuckoo);
    }
  }

  componentDidMount() {
    track('ContactForm', 'phonesDisplayed');
    this.props.showPriorityLine &&
      track('ContactForm', 'phonesPriorityDisplayed');
  }

  handleClickLearnMore = (e: SyntheticEvent<HTMLElement>) => {
    const { linkToLearnMoreArticle } = this.props;

    e.preventDefault();
    linkToLearnMoreArticle();
  };

  renderPhonesList = (renderProps: RenderProps) => {
    const { error, props } = renderProps;
    if (error) return null;
    const priorityPhoneNumbersList =
      idx(
        props,
        _ => _.allCustomerSupportNumbers.premiumCustomerSupportNumbers,
      ) || [];
    const standardPhoneNumbersList =
      idx(
        props,
        _ => _.allCustomerSupportNumbers.standardCustomerSupportNumbers,
      ) || [];
    const { showPriorityLine } = this.props;

    return (
      <React.Fragment>
        {showPriorityLine && (
          <Stack spaceAfter="normal" align="center" wrap>
            <Heading element="h2" type="title3">
              <Translate
                t={__('content.pages.feedback.priority_number_title')}
              />
            </Heading>
            <TextLink
              href=""
              external={false}
              onClick={this.handleClickLearnMore}
              type="primary"
              size="small"
            >
              <Translate t={__('common.learn_more')} />
            </TextLink>
          </Stack>
        )}
        {showPriorityLine && (
          <Text spaceAfter="normal">
            <Translate
              t={__('content.pages.feedback.priority_number_subtitle')}
            />
          </Text>
        )}
        {showPriorityLine &&
          priorityPhoneNumbersList &&
          priorityPhoneNumbersList.map((phoneData, i) => (
            /* eslint-disable react/no-array-index-key */
            <Phone data={phoneData} key={i} />
          ))}
        <Heading element="h2" type="title3" spaceAfter="normal">
          <Translate t={__('content.pages.feedback.standard_number_title')} />
        </Heading>
        {showPriorityLine && (
          <Text spaceAfter="normal">
            <Translate
              t={__('content.pages.feedback.standard_number_subtitle')}
            />
          </Text>
        )}
        {standardPhoneNumbersList &&
          standardPhoneNumbersList.map((phoneData, i) => (
            /* eslint-disable react/no-array-index-key */
            <Phone data={phoneData} key={i} />
          ))}
      </React.Fragment>
    );
  };

  render() {
    const { language, translations } = this.props;
    const langInfo = langInfos[language];
    const intl = { language: langInfo, translations };
    return (
      <InitIntl raw={intl}>
        {intl => (
          <intlContext.Provider value={intl}>
            <QueryRenderer
              query={queryAllCustomerSupportNumbers}
              render={this.renderPhonesList}
              language={language}
            />
          </intlContext.Provider>
        )}
      </InitIntl>
    );
  }
}

export default CustomerSupportPhones;