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

// @flow

import * as React from 'react';
import { graphql } from 'react-relay';
import LogContext from '@kiwicom/nitro/lib/services/log/context';
import type { Context as LogContextType } from '@kiwicom/nitro/lib/services/log/context';
import Translate from '@kiwicom/nitro/lib/components/Translate';
import { Heading, TextLink, Stack } from '@kiwicom/orbit-components';
import Text from '@kiwicom/nitro/lib/components/Text';
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 type { CustomerSupportPhonesQueryResponse } from './__generated__/CustomerSupportPhonesQuery.graphql';
import { events } from '../const/events';

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

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

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

class CustomerSupportPhones extends React.Component<Props> {
  context: LogContextType;

  static contextType = LogContext;

  componentDidMount() {
    this.context.log(events.CS_PHONES_DISPLAYED, {});

    if (this.props.showPriorityLine) {
      this.context.log(events.CS_PHONES_PRIORITY_DISPLAYED, {});
    }
  }

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

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

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

    return (
      <Stack direction="column">
        {showPriorityLine && priorityPhoneNumbersList && (
          <>
            <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>
            <Text
              spaceAfter="normal"
              t="content.pages.feedback.priority_number_subtitle"
            />
            {priorityPhoneNumbersList.map((phoneData, i) => (
              <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"
            t="content.pages.feedback.standard_number_subtitle"
          />
        )}
        <Stack direction="column" spacing="condensed">
          {standardPhoneNumbersList &&
            standardPhoneNumbersList.map((phoneData, i) => (
              <Phone data={phoneData} key={i} />
            ))}
        </Stack>
      </Stack>
    );
  };

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

export default CustomerSupportPhones;