Add price component

react/Price.js

@@ -0,0 +1,87 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { FormattedMessage, injectIntl, intlShape } from 'react-intl'
+
+/**
+ * The Price component. Shows the prices information of the Product Summary.
+ */
+class Price extends Component {
+  static contextTypes = {
+    culture: PropTypes.object,
+  }
+
+  render() {
+    const {
+      sellingPrice,
+      listPrice,
+      installments,
+      installmentPrice,
+      showListPrice,
+      intl: { formatNumber },
+    } = this.props
+
+    const currencyOptions = {
+      style: 'currency',
+      currency: this.context.culture.currency,
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+    }
+
+    return (
+      <div className="tc b fabriga">
+        {showListPrice && (
+          <div className="pv1">
+            <div className="dib">
+              <FormattedMessage id="pricing.from" />
+            </div>
+            <div className="dib strike ph2">
+              {formatNumber(listPrice, currencyOptions)}
+            </div>
+          </div>
+        )}
+        <div className="pv1">
+          <div className="dib">
+            <FormattedMessage id="pricing.to" />
+          </div>
+          <div className="dib ph2">
+            {formatNumber(sellingPrice, currencyOptions)}
+          </div>
+        </div>
+        {installments &&
+          installmentPrice && (
+            <div>
+              <div className="dib">
+                <FormattedMessage
+                  id="pricing.installment-display"
+                  values={{
+                    installments,
+                    installmentPrice: formatNumber(
+                      installmentPrice,
+                      currencyOptions
+                    ),
+                  }}
+                />
+              </div>
+            </div>
+          )}
+      </div>
+    )
+  }
+}
+
+Price.propTypes = {
+  /** Product selling price */
+  sellingPrice: PropTypes.number.isRequired,
+  /** Product list price */
+  listPrice: PropTypes.number.isRequired,
+  /** Determines if the list price is shown or not */
+  showListPrice: PropTypes.bool,
+  /** Available number of installments */
+  installments: PropTypes.number,
+  /** Single installment price */
+  installmentPrice: PropTypes.number,
+  /** intl property to format data */
+  intl: intlShape.isRequired,
+}
+
+export default injectIntl(Price)

react/index.js

@@ -1,7 +1,7 @@
 import React, {Component} from 'react'
 import PropTypes from 'prop-types'
 import {ExtensionPoint, Link, Helmet} from 'render'
-import {FormattedMessage, FormattedHTMLMessage, injectIntl, intlShape} from 'react-intl'
+import {FormattedMessage, injectIntl, intlShape} from 'react-intl'
 
 class GettingStartedIndex extends Component {
   static propTypes = {

react/locales/en-US.json

@@ -1,4 +1,7 @@
 {
+  "pricing.installment-display": "or up to {installments}X of {installmentPrice}",
+  "pricing.from": "from:",
+  "pricing.to": "to:",
   "getting-started.title": "VTEX Render - Getting started",
   "getting-started.greeting": "Welcome to the first VTEX Render tutorial!",
   "getting-started.description": "This is an interactive tutorial.The idea is for you to discover the Render features by editing an app.",

react/locales/es-AR.json

@@ -1,4 +1,7 @@
 {
+  "pricing.installment-display": "o hasta {installments}X de {installmentPrice}",
+  "pricing.from": "de:",
+  "pricing.to": "por:",
   "getting-started.title": "VTEX Render - Primeros pasos",
   "getting-started.greeting": "Bienvenido al Primero Tutorial del VTEX Render!",
   "getting-started.description": "Ese es un tutorial interactivo. La idea es descubrir las features del Render editando una app.",

react/locales/pt-BR.json

@@ -1,4 +1,7 @@
 {
+  "pricing.installment-display": "ou até {installments}X de {installmentPrice}",
+  "pricing.from": "de:",
+  "pricing.to": "por:",
   "getting-started.title": "VTEX Render - Primeiros passos",
   "getting-started.greeting": "Bem-vindo ao Primeiro Tutorial do VTEX Render!",
   "getting-started.description": "Esse é um tutorial interativo. A idéia é você descobrir as funcionalidades do Render editando uma app.",