backpack-ui/dist/components/price/index.js

Lonely Planet's Components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _listItem2, _container;

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _radium = require("radium");

var _radium2 = _interopRequireDefault(_radium);

var _settings = require("../../../settings.json");

var _bullet = require("../decoration/bullet");

var _bullet2 = _interopRequireDefault(_bullet);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var styles = {
  container: {
    base: {
      lineHeight: 1,
      fontSize: "18px",
      position: "relative"
    },

    emphasized: {
      base: {
        fontSize: "36px"
      },

      parent: {
        listItem: _defineProperty({}, "@media (max-width: " + _settings.media.max["768"] + ")", {
          fontSize: "22px"
        })
      }
    },

    tag: {
      backgroundColor: _settings.color.red,
      color: _settings.color.white,
      display: "inline-block",
      fontSize: "12px",
      padding: 6 / 12 + "em " + 8 / 12 + "em " + 4 / 12 + "em",
      textAlign: "center",
      verticalAlign: "middle"
    },

    thin: {
      fontSize: "20px"
    }
  },

  amount: {
    base: {
      display: "inline-block",
      fontSize: "1em",
      lineHeight: 1
    },

    emphasized: {
      color: _settings.color.red,
      fontWeight: 300
    },

    tag: {
      fontWeight: 600
    },

    thin: {
      fontWeight: 300
    }
  },

  rate: {
    base: {
      fontSize: 14 / 36 + "em",
      fontWeight: 300,
      lineHeight: 1
    },

    parent: {
      listItem: (_listItem2 = {}, _defineProperty(_listItem2, "@media (max-width: " + _settings.media.max["768"] + ")", {
        display: "inline-block",
        fontSize: "9px",
        fontWeight: 400,
        lineHeight: 16 / 9
      }), _defineProperty(_listItem2, "@media (min-width: " + _settings.media.min["768"] + ")", {
        marginTop: 3 / 14 + "em"
      }), _listItem2),

      booking: {
        bottom: "5px",
        display: "inline-block",
        position: "absolute",
        right: 0
      }
    }
  },

  currencySymbol: {
    base: {},

    emphasized: {
      fontSize: 18 / 36 * 100 + "%",
      position: "relative",
      top: "-.65em"
    }
  },

  bullet: {
    base: _defineProperty({}, "@media (min-width: " + _settings.media.min["768"] + ")", {
      display: "none"
    })
  },

  onSale: {
    container: (_container = {}, _defineProperty(_container, "@media (max-width: " + _settings.media.max["768"] + ")", {
      paddingTop: "14px",
      textAlign: "center"
    }), _defineProperty(_container, "@media (min-width: " + _settings.media.min["768"] + ")", {
      borderLeft: "1px solid " + _settings.color.gray,
      float: "right",
      fontWeight: 400,
      padding: "2px 0 2px 14px",
      textAlign: "right"
    }), _container),

    label: {
      color: _settings.color.footerCopyright,
      fontWeight: 400,
      marginBottom: "7px"
    },

    oldPrice: {
      color: _settings.color.footerCopyright,
      paddingTop: "4px"
    }
  }
};

/**
 * A standalone price for an item
 */
function Price(_ref) {
  var amount = _ref.amount;
  var discountedAmount = _ref.discountedAmount;
  var rate = _ref.rate;
  var currency = _ref.currency;
  var emphasized = _ref.emphasized;
  var thin = _ref.thin;
  var tag = _ref.tag;
  var parent = _ref.parent;
  var poiType = _ref.poiType;

  var currencySymbol = {
    AUD: "$",
    EUR: "€",
    GBP: "£",
    USD: "$"
  };

  return _react2.default.createElement(
    "div",
    {
      className: "Price clearfix",
      style: [styles.container.base, emphasized && styles.container.emphasized.base, tag && styles.container.tag, parent && styles.container.emphasized.parent[parent]]
    },
    parent === "booking" && poiType === "partnerActivity" && (amount > 0 || discountedAmount > 0) && _react2.default.createElement(
      "div",
      {
        style: [styles.rate.base, styles.onSale.label]
      },
      "From"
    ),
    (amount > 0 || discountedAmount > 0) && _react2.default.createElement(
      "div",
      {
        className: "Price-amount",
        style: [styles.amount.base, emphasized && styles.amount.emphasized, thin && styles.amount.thin, tag && styles.amount.tag]
      },
      emphasized && _react2.default.createElement(
        "span",
        {
          className: "Price-symbol",
          style: [styles.currencySymbol.base, emphasized && styles.currencySymbol.emphasized]
        },
        currencySymbol[currency]
      ),
      !emphasized && "" + currencySymbol[currency],
      discountedAmount ? Math.round(discountedAmount) : Math.round(amount)
    ),
    parent === "booking" && discountedAmount > 0 && _react2.default.createElement(
      "div",
      {
        style: [styles.rate.base, styles.onSale.container]
      },
      _react2.default.createElement(
        "div",
        null,
        _react2.default.createElement(
          "strong",
          null,
          "On sale"
        )
      ),
      _react2.default.createElement(
        "div",
        { style: styles.onSale.oldPrice },
        "Was – ",
        currencySymbol[currency],
        discountedAmount ? Math.round(amount) : ""
      )
    ),
    rate && _react2.default.createElement(
      "div",
      {
        className: "Price-rate",
        style: [styles.rate.base, parent && styles.rate.parent[parent]]
      },
      (amount > 0 || discountedAmount > 0) && _react2.default.createElement(
        "span",
        {
          className: "Price-bullet",
          style: styles.bullet.base,
          "aria-hidden": "true"
        },
        _react2.default.createElement(_bullet2.default, { space: "both", color: _settings.color.gray })
      ),
      rate
    )
  );
}

Price.propTypes = {
  /**
   * The price amount
   */
  amount: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.number, _react2.default.PropTypes.string]).isRequired,

  /**
   * Discounted price amount
   */
  discountedAmount: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.number, _react2.default.PropTypes.string]),

  /**
   * The rate for the price, i.e., "per night"
   */
  rate: _react2.default.PropTypes.string,

  /**
   * The currency in which the price is displayed in
   */
  currency: _react2.default.PropTypes.string,

  /**
   * Change the color to show emphasis
   */
  emphasized: _react2.default.PropTypes.bool,

  /**
   * Render the price with a thinner font weight and slightly larger size
   */
  thin: _react2.default.PropTypes.bool,

  /**
   * Render the price with a tag-like style
   */
  tag: _react2.default.PropTypes.bool,

  /**
   * Name of parent component in which Price renders in
   */
  parent: _react2.default.PropTypes.oneOf(["", "booking", "listItem"]),

  /**
   * Type of POI
   */
  poiType: _react2.default.PropTypes.oneOf(["", "poi", "hotel", "partnerActivity"])
};

Price.defaultProps = {
  amount: 0,

  discountedAmount: 0,

  rate: "",

  currency: "USD",

  emphasized: false,

  thin: false,

  tag: false,

  parent: "",

  poiType: ""
};

Price.styles = styles;

exports.default = (0, _radium2.default)(Price);