react-opentable/dist/index.js

React wrapper for Opentable Reservation Widget

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = _interopDefault(require('react'));
var PropTypes = _interopDefault(require('prop-types'));

function _objectWithoutPropertiesLoose(source, excluded) {
  if (source == null) return {};
  var target = {};
  var sourceKeys = Object.keys(source);
  var key, i;

  for (i = 0; i < sourceKeys.length; i++) {
    key = sourceKeys[i];
    if (excluded.indexOf(key) >= 0) continue;
    target[key] = source[key];
  }

  return target;
}

var EMBED_TYPE_BUTTON = 'button';
var EMBED_TYPE_STANDARD = 'standard';
var THEME_TYPE_STANDARD = 'standard';
var THEME_TYPE_TALL = 'tall';
var THEME_TYPE_WIDE = 'wide';
var LANG_EN_US = 'en-US';
var LANG_FR_CA = 'fr-CA';
var LANG_DE_DE = 'de-DE';
var LANG_ES_MX = 'es-MX';
var LANG_JA_JP = 'ja-JP';
var LANG_NL_NL = 'nl-NL';
var LANG_IT_IT = 'it-IT';
var OT_SOURCE_RESTAURANT = 'Restaurant website';
var OT_SOURCE_EMAIL = 'Email';
var OT_SOURCE_FACEBOOK = 'Facebook';
var OT_SOURCE_GOOGLE = 'Google';
var OT_SOURCE_INSTAGRAM = 'Instagram';
var OT_SOURCE_OTHER = 'Other';
var POSITION_TOP_LEFT = 'top-left';
var POSITION_TOP_RIGHT = 'top-right';
var POSITION_BOTTOM_LEFT = 'bottom-left';
var POSITION_BOTTOM_RIGHT = 'bottom-right';
var POSITION_UNSET = 'unset';
var embedTypes = [EMBED_TYPE_BUTTON, EMBED_TYPE_STANDARD];
var themeTypes = [THEME_TYPE_STANDARD, THEME_TYPE_TALL, THEME_TYPE_WIDE];
var languageTypes = [LANG_EN_US, LANG_FR_CA, LANG_DE_DE, LANG_ES_MX, LANG_JA_JP, LANG_NL_NL, LANG_IT_IT];
var marketingTrackingTypes = [OT_SOURCE_RESTAURANT, OT_SOURCE_EMAIL, OT_SOURCE_FACEBOOK, OT_SOURCE_GOOGLE, OT_SOURCE_INSTAGRAM, OT_SOURCE_OTHER, PropTypes.string];
var BASE_URL = 'https://www.opentable.com/widget/reservation/loader';
var positions = {
  POSITION_TOP_LEFT: POSITION_TOP_LEFT,
  POSITION_TOP_RIGHT: POSITION_TOP_RIGHT,
  POSITION_BOTTOM_LEFT: POSITION_BOTTOM_LEFT,
  POSITION_BOTTOM_RIGHT: POSITION_BOTTOM_RIGHT,
  POSITION_UNSET: POSITION_UNSET
};
var defaultWidgetProps = {
  type: EMBED_TYPE_STANDARD,
  theme: THEME_TYPE_STANDARD,
  iframe: true,
  lang: LANG_EN_US,
  newtab: false,
  position: positions.POSITION_BOTTOM_LEFT
};
var widgetPropTypes = {
  rid: PropTypes.string.isRequired,
  type: PropTypes.oneOf(embedTypes),
  theme: PropTypes.oneOf(themeTypes),
  iframe: PropTypes.bool,
  lang: PropTypes.oneOf(languageTypes),
  newtab: PropTypes.bool,
  ot_source: PropTypes.oneOf(marketingTrackingTypes),
  ot_campaign: PropTypes.string,
  customClassName: PropTypes.string,
  position: PropTypes.oneOf(Object.values(positions))
};

var styles = {"openTableContainer":"_3YEhn","top-left":"_39Ufv","top-right":"_KLO9T","bottom-left":"_32VVJ","bottom-right":"_3zHYL","unset":"_3pQ0W"};

function generateScriptTag(widgetProps) {
  var script = document.createElement('script');
  var params = new URLSearchParams(widgetProps);
  script.src = BASE_URL + "?" + params.toString();
  script.async = true;
  return script;
}

var OpenTable = function OpenTable(_ref) {
  var customClassName = _ref.customClassName,
      position = _ref.position,
      widgetProps = _objectWithoutPropertiesLoose(_ref, ["customClassName", "position"]);

  var scriptRef = React.useRef(null);
  React.useEffect(function () {
    scriptRef.current = generateScriptTag(widgetProps);
    document.getElementById('open-table').appendChild(scriptRef.current);
  }, []);
  React.useEffect(function () {
    if (scriptRef && scriptRef.current) {
      var oldParams = new URL(scriptRef.current.src).search;
      var newParams = '?' + new URLSearchParams(widgetProps).toString();

      if (oldParams !== newParams) {
        Array.from(document.getElementById('open-table').children).forEach(function (element) {
          return element.remove();
        });
        scriptRef.current = generateScriptTag(widgetProps);
        document.getElementById('open-table').appendChild(scriptRef.current);
      }
    }
  }, [widgetProps, scriptRef]);
  var combinedClassName = styles.openTableContainer + " " + styles[position] + " " + customClassName;
  return /*#__PURE__*/React.createElement("div", {
    className: combinedClassName,
    id: "open-table"
  });
};
OpenTable.defaultProps = defaultWidgetProps;
OpenTable.propTypes = widgetPropTypes;

exports.default = OpenTable;
exports.positions = positions;
//# sourceMappingURL=index.js.map