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

// @flow

import * as React from 'react';
import { graphql, createFragmentContainer } from 'react-relay';
import LogContext from '@kiwicom/nitro/lib/services/log/context';
import css from 'styled-jsx/css';
import Separator from '@kiwicom/orbit-components/lib/Separator';
import ButtonLink from '@kiwicom/orbit-components/lib/ButtonLink';
import Text from '@kiwicom/nitro/lib/components/Text';
import Phone from '@kiwicom/orbit-components/lib/icons/Phone';
import ChevronDown from '@kiwicom/orbit-components/lib/icons/ChevronDown';
import type { ThemeProps } from '@kiwicom/nitro/lib/records/Theme';
import { parsePhoneNumber } from 'libphonenumber-js';

import ContactUsLink from '../../common/ContactUsLink/ContactUsLink';
import { withLanguage } from '../../context/Language';
import { langInfos } from '../../../translations/langInfos';
import type { Contact_booking as ContactBookingType } from './__generated__/Contact_booking.graphql';
import { events } from '../../../const/events';

const styles = css`
  .contact {
    margin-top: 20px;
  }
  .contactPhone {
    margin-bottom: 32px;
  }
  .contactPageLink {
    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: ContactBookingType,
  ...ThemeProps,
|};

const Contact = ({ booking, language }: Props) => {
  const { log } = React.useContext(LogContext);
  const formatPhoneNumber = phoneNumber => {
    try {
      return parsePhoneNumber(phoneNumber).formatInternational();
    } catch (err) {
      if (language === 'en') {
        log(events.CS_PHONES_NOT_RETRIEVED, { language });
      }
      return phoneNumber;
    }
  };

  const renderContactPageLink = () => (
    <span className="contactPageLink">
      <ContactUsLink
        translationKey={__('smartfaq.single_booking_page.call_us')}
      />
    </span>
  );

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

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

  const phoneNumber = booking.customerSupport?.phoneNumber || '';
  const formattedPhoneNumber = formatPhoneNumber(phoneNumber);

  return (
    <div data-cy="contact" className="contact">
      <Separator />
      <Text
        size="large"
        type="attention"
        spaceAfter="medium"
        t="smartfaq.singe_booking_page.contact.title"
      />
      {formattedPhoneNumber
        ? renderPhoneNumber(phoneNumber, language)
        : renderContactPageLink()}
      <ol>
        <li>
          <Text
            element="span"
            html
            t="smartfaq.single_booking_page.instructions.name"
          />
        </li>
        <li>
          <Text
            element="span"
            html
            t="smartfaq.single_booking_page.instructions.email"
          />
        </li>
      </ol>
      <style jsx>{styles}</style>
    </div>
  );
};

export const RawContact = Contact;

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