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

Smart FAQ

// @flow
import idx from 'idx';
import { graphql, createFragmentContainer } from 'react-relay';
import * as React from 'react';
import {
  Heading,
  TextLink,
  CountryFlag,
  Stack,
} from '@kiwicom/orbit-components';
import Trans from '@kiwicom/nitro/lib/components/Text';
import { CODES } from '@kiwicom/orbit-components/lib/CountryFlag/consts';

import { withLanguage } from '../context/Language';
import type { CustomerSupportNumberMobile } from './__generated__/CustomerSupportNumberMobile.graphql';

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

const CustomerSupportNumber = ({ data, language }: Props) => {
  const phoneNumber = idx(data, _ => _.customerSupportNumber.number) || '';
  const phoneNumberWithPlus = phoneNumber.includes('+')
    ? phoneNumber
    : `+${phoneNumber}`;
  const localeTerritory = (
    idx(data, _ => _.customerSupportNumber.localeTerritory) || ''
  ).toUpperCase();
  const flagCode = CODES[localeTerritory];
  return (
    <div style={{ margin: '32px 0 42px 0' }}>
      <Stack wrap direction="column" align="center" spacing="compact">
        <Heading type="title3" element="h3">
          <Trans t={__('smartfaq.faq.contact.title')} />
        </Heading>
        <Stack wrap direction="column" align="center" spacing="comfy">
          <TextLink href={`tel:${phoneNumberWithPlus}`} type="primary">
            <CountryFlag code={flagCode} />
            &nbsp;{phoneNumberWithPlus}
          </TextLink>
          <TextLink
            href={`https://kiwi.com/${language}/content/feedback`}
            type="primary"
          >
            <Trans t={__('smartfaq.faq.contact.phone_numbers_and_mail_link')} />
          </TextLink>
        </Stack>
      </Stack>
    </div>
  );
};

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