react-price-component/src/Price.js

A component for displaying different price typologies

import "intl";
import ReactIntl from "react-intl";
import "./Price.scss";
import Translate from "react-translate-component";

let IntlMixin = ReactIntl.IntlMixin;
let FormattedNumber = ReactIntl.FormattedNumber;
let language = (navigator.language || navigator.browserLanguage);

const Price = React.createClass({

  mixins: [IntlMixin],

  renderFrom: function(){
    if(this.props.priceData.isMinimum && this.props.priceData.price > 0){
      return(
        <span className="price-from">
          <Translate name="from" component="span" content="price.from" />
        </span>
      );
    }
  },

  renderPrice: function(){
    if(this.props.priceData.price > 0){
      return(
        <FormattedNumber
          value={this.props.priceData.price}
          style="currency" 
          currency="EUR" 
          locales={[language]}
          minimumFractionDigits={0} />
      );
    }else{
      return(<Translate name="ask_price" content="price.ask_price" />);
    }
  },

  renderPeriodicity: function(){
    if(this.props.priceData.periodicity){
      return "/" + this.props.priceData.periodicity;
    }
  },

  renderPriceDown: function(){
    if(this.props.priceData.priceDownAmount){
      return(
        <span className="price-down">
          <Translate name="is_lowered" content="price.is_lowered" /> <FormattedNumber
            value={this.props.priceData.priceDownAmount} 
            style="currency" 
            currency="EUR"
            locales={[language]}
            minimumFractionDigits={0} />
        </span>
      );
    }
  },

  render: function(){
    if(this.props.priceData)
    {
      return(
        <div className="price-container">
          <span className="price">
            {this.renderFrom()} 
            {this.renderPrice()}
            {this.renderPeriodicity()}
          </span>
          {this.renderPriceDown()}
        </div>
      );
    }else{
      return false;
    }
  }
});

export default Price;