@kiwicom/smart-faq/src/SmartFAQ/SingleBookingPage/bookingItem/Contact.js

Smart FAQ

// @flow

import idx from 'idx';
import * as React from 'react';
import { graphql, createFragmentContainer } from 'react-relay';
import css from 'styled-jsx/css';
import { Separator, ButtonLink, Text } from '@kiwicom/orbit-components';
import Phone from '@kiwicom/orbit-components/lib/icons/Phone';
import ChevronDown from '@kiwicom/orbit-components/lib/icons/ChevronDown';
import Translate from '@kiwicom/nitro/lib/components/Translate';
import { parsePhoneNumber } from 'libphonenumber-js';
import { withTheme } from 'styled-components';

import ContactPageLink from '../../common/ContactPageLink';
import { withLanguage } from '../../context/Language';
import { langInfos } from '../../../translations/langInfos';
import type { Contact_booking } from './__generated__/Contact_booking.graphql';

const styles = css`
  .contact {
    display: inline-block;
    margin: 18px 0 32px;
  }
  .contact-page-link {
    display: inline-block;
    margin-bottom: 32px;
  }
  ol {
    padding-left: 20px;
    list-style-type: decimal;
    font-size: 14px;
    margin-top: 0;
  }
  li {
    margin-bottom: 7px;
    padding-left: 10px;
  }
`;

type Props = {|
  language: string,
  booking: Contact_booking,
  theme: {
    orbit: {
      paletteProductNormal: string,
    },
  },
|};

const Contact = ({ theme, booking, language }: Props) => {
  const formatPhoneNumber = phoneNumber => {
    try {
      return parsePhoneNumber(phoneNumber).formatInternational();
    } catch (err) {
      return phoneNumber;
    }
  };

  const renderContactPageLink = () => (
    <span className="contact-page-link">
      <ContactPageLink
        translationKey={__('smartfaq.single_booking_page.call_us')}
        textColor={theme.orbit.paletteProductNormal}
      />
    </span>
  );

  const renderPhoneNumber = (phoneNumber, language) => {
    const formattedPhoneNumber = formatPhoneNumber(phoneNumber);
    const languageCode = langInfos[language].countriesTranslations;

    return (
      <div className="contact">
        <ButtonLink
          iconRight={<ChevronDown />}
          iconLeft={<Phone />}
          external
          transparent
          href={`/${language}/content/feedback`}
        >
          {`${formattedPhoneNumber} ${languageCode}`}
        </ButtonLink>
      </div>
    );
  };

  const phoneNumber = idx(booking, _ => _.customerSupport.phoneNumber) || '';
  const formattedPhoneNumber = formatPhoneNumber(phoneNumber);

  return (
    <div style={{ marginTop: '20px' }}>
      <Separator />
      <Text size="large" type="attention">
        <Translate t={__('smartfaq.singe_booking_page.contact.title')} />
      </Text>
      {formattedPhoneNumber
        ? renderPhoneNumber(phoneNumber, language)
        : renderContactPageLink()}
      <ol>
        <li>
          <Text element="span">
            <Translate
              html
              t={__('smartfaq.single_booking_page.instructions.name')}
            />
          </Text>
        </li>
        <li>
          <Text element="span">
            <Translate
              html
              t={__('smartfaq.single_booking_page.instructions.email')}
            />
          </Text>
        </li>
      </ol>
      <style>{styles}</style>
    </div>
  );
};

export const RawContact = Contact;

export default createFragmentContainer(
  withLanguage(withTheme(Contact)),
  graphql`
    fragment Contact_booking on BookingInterface {
      databaseId: id(opaque: false)
      customerSupport {
        phoneNumber
      }
    }
  `,
);