@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 type { CustomerSupportPhonesQuery } from './__generated__/CustomerSupportPhonesQuery.graphql';

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

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

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

class CustomerSupportPhones extends React.Component<Props> {
  renderPhonesList = (renderProps: RenderProps) => {
    const { error, props } = renderProps;
    if (error) return null;
    const priorityPhoneNumbersList =
      idx(
        props,
        _ => _.allCustomerSupportNumbers.premiumCustomerSupportNumbers,
      ) || [];
    const standardPhoneNumbersList =
      idx(
        props,
        _ => _.allCustomerSupportNumbers.standardCustomerSupportNumbers,
      ) || [];
    const { linkToLearnMoreArticle, showPriorityLine } = this.props;
    return (
      <React.Fragment>
        {showPriorityLine && (
          <Stack inline spaceAfter="normal">
            <Heading element="h2" type="title3">
              <Translate
                t={__('content.pages.feedback.priority_number_title')}
              />
              <span style={{ marginLeft: '8px', fontSize: '12px' }}>
                <TextLink
                  external={false}
                  onClick={() => linkToLearnMoreArticle()}
                  type="primary"
                >
                  <Translate t={__('common.learn_more')} />
                </TextLink>
              </span>
            </Heading>
          </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;