@kiwicom/smart-faq/src/shared/StaticFAQ/CustomerSupportNumber.js

// @flow

import * as React from 'react';
import { graphql, createFragmentContainer } from 'react-relay';
import Heading from '@kiwicom/orbit-components/lib/Heading';
import TextLink from '@kiwicom/orbit-components/lib/TextLink';
import CountryFlag from '@kiwicom/orbit-components/lib/CountryFlag';
import Stack from '@kiwicom/orbit-components/lib/Stack';
import Translate from '@kiwicom/nitro/lib/components/Translate';
import { CODES } from '@kiwicom/orbit-components/lib/CountryFlag/consts';
import type { ThemeProps } from '@kiwicom/nitro/lib/records/Theme';
import LogContext from '@kiwicom/nitro/lib/services/log/context';
import type { Context as LogContextType } from '@kiwicom/nitro/lib/services/log/context';

import { events } from '../../const/events';
import ContactUsLink from '../../SmartFAQ/common/ContactUsLink/ContactUsLink';
import { withLanguage } from '../../SmartFAQ/context/Language';
import type { CustomerSupportNumberMobile } from './__generated__/CustomerSupportNumberMobile.graphql';

type Props = {|
  language: string,
  data: CustomerSupportNumberMobile,
  ...ThemeProps,
|};

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

  static contextType = LogContext;

  componentDidMount() {
    const phoneNumber = this.props.data.customerSupportNumber?.number;
    const language = this.props.language;

    if (!phoneNumber && language === 'en') {
      this.context.log(events.CS_PHONES_NOT_RETRIEVED, { language });
    }
  }

  render() {
    const { data, language } = this.props;
    const phoneNumber = data.customerSupportNumber?.number ?? '';
    const phoneNumberWithPlus = phoneNumber.includes('+')
      ? phoneNumber
      : `+${phoneNumber}`;
    const localeTerritory = (
      data.customerSupportNumber?.localeTerritory ?? ''
    ).toUpperCase();
    const flagCode = CODES[localeTerritory];

    const contactInfo = phoneNumber ? (
      <>
        <TextLink
          href={`tel:${phoneNumberWithPlus}`}
          type="primary"
          dataTest="phone-number-mobile"
        >
          <CountryFlag code={flagCode} />
          &nbsp;{phoneNumberWithPlus}
        </TextLink>
        <TextLink
          href={`https://kiwi.com/${language}/content/feedback`}
          type="primary"
        >
          <Translate t="smartfaq.faq.contact.phone_numbers_and_mail_link" />
        </TextLink>
      </>
    ) : (
      <ContactUsLink
        translationKey={__('smartfaq.single_booking_page.call_us')}
        justify="center"
      />
    );

    return (
      <div style={{ margin: '32px 0 42px 0' }}>
        <Stack wrap direction="column" align="center" spacing="compact">
          <Heading type="title3" element="h3">
            <Translate t="smartfaq.faq.contact.title" />
          </Heading>
          <Stack wrap direction="column" align="center" spacing="comfy">
            {contactInfo}
          </Stack>
        </Stack>
      </div>
    );
  }
}

export default createFragmentContainer(
  withLanguage(CustomerSupportNumber),
  graphql`
    fragment CustomerSupportNumberMobile on RootQuery {
      customerSupportNumber {
        localeTerritory
        number
      }
    }
  `,
);