@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 Separator from '@kiwicom/orbit-components/lib/Separator';
import ButtonLink from '@kiwicom/orbit-components/lib/ButtonLink';
import Stack from '@kiwicom/orbit-components/lib/Stack';
import List, { ListItem } from '@kiwicom/orbit-components/lib/List';
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 { defaultTokens } from '@kiwicom/orbit-design-tokens';
import { parsePhoneNumber } from 'libphonenumber-js';
import styled from 'styled-components';

import ContactUsLink from '../../common/ContactUsLink/ContactUsLink';
import { withLanguage } from '../../context/Language';
// FIXME: NEVER EVER import such file directly!!!
import { langInfos } from '../../../translations/langInfos';
import type { Contact_booking as ContactBookingType } from './__generated__/Contact_booking.graphql';
import { events } from '../../../const/events';

const Wrapper = styled.div`
  margin-top: ${defaultTokens.spaceXLarge};
`;

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 = () => (
    <Stack spaceAfter="largest">
      <ContactUsLink
        translationKey={__('smartfaq.single_booking_page.call_us')}
      />
    </Stack>
  );

  const renderPhoneNumber = (phoneNumber, language) => {
    const formattedPhoneNumber = formatPhoneNumber(phoneNumber);
    // FIXME this is soo lame!
    // use Intl context for any lang info or even better -> update GraphQL so it returns "CustomerSupportNumber" type
    const languageCode = langInfos[language]?.countriesTranslations ?? '';

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

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

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

export const RawContact = Contact;

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