@kiwicom/smart-faq/lib/CustomerSupportPhones/Phone.js

Smart FAQ

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _idx = _interopRequireDefault(require("idx"));

var React = _interopRequireWildcard(require("react"));

var _libphonenumberJs = require("libphonenumber-js");

var _CountryFlag = _interopRequireDefault(require("@kiwicom/orbit-components/lib/CountryFlag"));

var _InformationCircle = _interopRequireDefault(require("@kiwicom/orbit-components/lib/icons/InformationCircle"));

var _reactRelay = require("react-relay");

var _consts = require("@kiwicom/orbit-components/lib/CountryFlag/consts");

var _add_minutes = _interopRequireDefault(require("date-fns/add_minutes"));

var _tracker = require("../shared/cuckoo/tracker");

var _HoverHelpTooltip = _interopRequireDefault(require("../SmartFAQ/common/Tooltip/HoverHelpTooltip"));

// @flow
var styles = new String("div.containerPhoneNumber{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:10px;}div.containerPhoneNumber .Tooltip{bottom:110%;right:-100px;}div.containerPhoneNumber .Tooltip-inner.Tooltip-inner{max-width:275px;width:200px;}div.containerPhoneNumber .HelpTooltip{vertical-align:top;}div.phoneNumber{margin-left:4px;margin-right:4px;}a{color:#00ad98;-webkit-text-decoration:none;text-decoration:none;font-family:'Roboto',-apple-system,'.SFNSText-Regular','San Francisco', 'Segoe UI','Helvetica Neue','Lucida Grande',sans-serif;}");
styles.__hash = "3374585326";
styles.__scoped = "div.containerPhoneNumber.jsx-45192783{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:10px;}div.containerPhoneNumber.jsx-45192783 .Tooltip{bottom:110%;right:-100px;}div.containerPhoneNumber.jsx-45192783 .Tooltip-inner.Tooltip-inner{max-width:275px;width:200px;}div.containerPhoneNumber.jsx-45192783 .HelpTooltip{vertical-align:top;}div.phoneNumber.jsx-45192783{margin-left:4px;margin-right:4px;}a.jsx-45192783{color:#00ad98;-webkit-text-decoration:none;text-decoration:none;font-family:'Roboto',-apple-system,'.SFNSText-Regular','San Francisco', 'Segoe UI','Helvetica Neue','Lucida Grande',sans-serif;}";
styles.__scopedHash = "45192783";
/*:: type Props = {|
  data: PhoneType,
|};*/

var formatTime = function formatTime(datetime
/*: Date*/
) {
  return "".concat(datetime.getUTCHours() % 12).concat(datetime.getUTCMinutes() > 0 ? ":".concat(datetime.getUTCMinutes()) : '', " ").concat(datetime.getUTCHours() >= 12 ? 'pm' : 'am');
};

var parseUTCTimeToDate = function parseUTCTimeToDate(utcString
/*: string*/
) {
  var hour = parseInt(utcString.split(':')[0], 10);
  var minute = parseInt(utcString.split(':')[1], 10);
  var now = new Date();
  return new Date(Date.UTC(now.getFullYear(), now.getMonth(), now.getDay(), hour, minute));
};

var convertToTimezone = _add_minutes.default;

var convertToLocalTimezone = function convertToLocalTimezone(datetime
/*: Date*/
) {
  // it's negative because the offset has to be subtracted
  return convertToTimezone(datetime, -new Date().getTimezoneOffset());
};

var getTimezone = function getTimezone() {
  var offset = new Date().getTimezoneOffset();
  var offsetHours = Math.floor(Math.abs(offset / 60));
  var offsetMinutes = Math.abs(offset % 60);
  var formattedOffset = "".concat('00'.concat(offsetHours.toString()).slice(-2), ":").concat('00'.concat(offsetMinutes.toString()).slice(-2));

  if (offset > 0) {
    return "GMT-".concat(formattedOffset);
  } else if (offset === 0) {
    return 'GMT';
  } else {
    return "GMT+".concat(formattedOffset);
  }
};

var formatOpenHours = function formatOpenHours(from
/*: string*/
, to
/*: string*/
)
/*: string*/
{
  var fromDate = convertToLocalTimezone(parseUTCTimeToDate(from));
  var toDate = convertToLocalTimezone(parseUTCTimeToDate(to));
  return "".concat(formatTime(fromDate), "-").concat(formatTime(toDate), " ").concat(getTimezone());
};

var parseAvailabilityTimes = function parseAvailabilityTimes(phoneLanguageAvailability, hasMultipleLanguages, language) {
  var type = phoneLanguageAvailability.type;

  if (type === 'NONSTOP') {
    return 'Support Available in ';
  } else if (type === 'WORKING_DAYS') {
    var to = phoneLanguageAvailability.to,
        from = phoneLanguageAvailability.from;

    if (to && from && language) {
      return "".concat(hasMultipleLanguages ? language : '', " Mon - Fri ").concat(formatOpenHours(from, to), "; ");
    }
  }

  return '';
};

var Phone = function Phone(_ref) {
  var data = _ref.data;
  var phoneNumber = data.number,
      localeTerritory = data.localeTerritory,
      countryName = data.countryName,
      supportedLanguages = data.supportedLanguages;
  var parsedPhoneNumber;

  try {
    parsedPhoneNumber = (0, _libphonenumberJs.parsePhoneNumber)(phoneNumber).formatInternational();
  } catch (e) {
    parsedPhoneNumber = phoneNumber;
  }

  var flagCode = localeTerritory && _consts.CODES[localeTerritory.toUpperCase()];

  var hasMultipleLanguages = supportedLanguages && supportedLanguages.length > 1;
  var availabilityInfo = supportedLanguages ? supportedLanguages.reduce(function (acc, supportedLanguage) {
    var language = (0, _idx.default)(supportedLanguage, function (_) {
      return _.language;
    });
    var languageAvailability = (0, _idx.default)(supportedLanguage, function (_) {
      return _.phoneLanguageAvailability;
    }) || {};
    return "".concat(parseAvailabilityTimes(languageAvailability, hasMultipleLanguages, language)) + acc;
  }, 'English 24/7;') : null;
  return React.createElement("div", {
    "data-code": localeTerritory,
    className: "containerPhoneNumber"
  }, flagCode && countryName && React.createElement(_CountryFlag.default, {
    code: flagCode,
    name: countryName
  }), React.createElement("div", {
    dir: "ltr",
    className: "phoneNumber"
  }, phoneNumber && React.createElement("a", {
    href: "tel:".concat(phoneNumber.replace(/\s/g, '')),
    onClick: function onClick() {
      return (0, _tracker.track)('ContactForm', 'phoneClicked', {
        localeTerritory: localeTerritory
      });
    }
  }, parsedPhoneNumber)), React.createElement("div", {
    dir: "ltr",
    style: {
      cursor: 'pointer'
    }
  }, React.createElement(_HoverHelpTooltip.default, {
    content: availabilityInfo,
    placement: "top"
  }, React.createElement(_InformationCircle.default, {
    size: "small",
    color: "tertiary"
  }))), React.createElement("style", null, styles));
};

var _default = (0, _reactRelay.createFragmentContainer)(Phone, {
  data: function data() {
    var node = require("./__generated__/Phone.graphql");

    if (node.hash && node.hash !== "774ae172355222f20c2a7915c7128578") {
      console.error("The definition of 'Phone' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data.");
    }

    return require("./__generated__/Phone.graphql");
  }
});

exports.default = _default;