Merge e7a044e into c57dbdc

vtex-apps · May 27, 2019 · 2299462 · 2299462
2 parents c57dbdc + e7a044e
commit 2299462
Show file tree

Hide file tree

Showing 8 changed files with 160 additions and 61 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Added
+- List and Selling price range feature to `ProductSummaryPrice`.
 
 ## [2.23.0] - 2019-05-27
 ### Added

diff --git a/README.md b/README.md
@@ -18,14 +18,19 @@ See our [LTS policy](https://github.com/vtex-apps/awesome-io#lts-policy) for mor
 
 ## Table of Contents
 
-- [Usage](#usage)
-  - [Blocks API](#blocks-api)
-    - [Configuration](#configuration)
-  - [Styles API](#styles-api)
-    - [CSS Namespaces](#css-namespaces)
-- [Troubleshooting](#troubleshooting)
-- [Contributing](#contributing)
-- [Tests](#tests)
+- [VTEX Product Summary](#vtex-product-summary)
+  - [Description](#description)
+  - [Release schedule](#release-schedule)
+  - [Table of Contents](#table-of-contents)
+  - [Usage](#usage)
+    - [Blocks API](#blocks-api)
+      - [Configuration](#configuration)
+    - [Styles API](#styles-api)
+      - [CSS Namespaces](#css-namespaces)
+  - [Troubleshooting](#troubleshooting)
+  - [Contributing](#contributing)
+  - [Tests](#tests)
+    - [Travis CI](#travis-ci)
 
 ## Usage
 

diff --git a/messages/context.json b/messages/context.json
@@ -15,5 +15,15 @@
   "store/productSummary.quantity-error": "store/productSummary.quantity-error",
   "store/productSummary.unit": "store/productSummary.unit",
   "store/productSummary.attachmentName": "store/productSummary.attachmentName",
-  "store/productSummary.missingOptionName": "String displayed when the assembly option was removed by user"
-}
+  "store/productSummary.missingOptionName": "String displayed when the assembly option was removed by user",
+  "admin/editor.productSummaryPrice.title": "Title of ProductSummaryPrice component",
+  "admin/editor.productSummaryPrice.description": "Description of ProductSummaryPrice component",
+  "admin/editor.productSummaryPrice.showListPrice.title": "Title of showListPrice prop",
+  "admin/editor.productSummaryPrice.showSellingPriceRange.title": "Title of showSellingPriceRange prop",
+  "admin/editor.productSummaryPrice.showListPriceRange.title": "Title of showListPriceRange prop",
+  "admin/editor.productSummaryPrice.showInstallments.title": "Title of showInstallments prop",
+  "admin/editor.productSummaryPrice.showLabels.title": "Title of showLabels prop",
+  "admin/editor.productSummaryPrice.labelSellingPrice.title": "Title of labelSellingPrice prop",
+  "admin/editor.productSummaryPrice.labelListPrice.title": "Title of labelListPrice prop",
+  "admin/editor.productSummaryPrice.showBorders.title": "Title of showBorders prop"
+}
diff --git a/messages/en.json b/messages/en.json
@@ -15,5 +15,15 @@
   "store/productSummary.quantity-error": "It wasn't possible to select the specified amount",
   "store/productSummary.unit": "Unit",
   "store/productSummary.attachmentName": "{sign} {quantity}x {name}",
-  "store/productSummary.missingOptionName": "No {name}"
+  "store/productSummary.missingOptionName": "No {name}",
+  "admin/editor.productSummaryPrice.title": "Product Summary Price",
+  "admin/editor.productSummaryPrice.description": "Component that shows product price inside the product summary",
+  "admin/editor.productSummaryPrice.showListPrice.title": "Show list price",
+  "admin/editor.productSummaryPrice.showSellingPriceRange.title": "Show selling price range",
+  "admin/editor.productSummaryPrice.showListPriceRange.title": "Show list price range",
+  "admin/editor.productSummaryPrice.showInstallments.title": "Show installments",
+  "admin/editor.productSummaryPrice.showLabels.title": "Show labels",
+  "admin/editor.productSummaryPrice.labelSellingPrice.title": "Label for selling price",
+  "admin/editor.productSummaryPrice.labelListPrice.title": "Label for list price",
+  "admin/editor.productSummaryPrice.showBorders.title": "Show borders"
 }
diff --git a/messages/es.json b/messages/es.json
@@ -15,5 +15,15 @@
   "store/productSummary.quantity-error": "No se pudo seleccionar la cantidad especificada",
   "store/productSummary.unit": "Unidad",
   "store/productSummary.attachmentName": "{sign} {quantity}x {name}",
-  "store/productSummary.missingOptionName": "Sin {name}"
+  "store/productSummary.missingOptionName": "Sin {name}",
+  "admin/editor.productSummaryPrice.title": "Precio del resumen del producto",
+  "admin/editor.productSummaryPrice.description": "Componente que muestra el precio del producto",
+  "admin/editor.productSummaryPrice.showListPrice.title": "Mostrar el precio mostrado",
+  "admin/editor.productSummaryPrice.showSellingPriceRange.title": "Mostrar rango de precios de venta",
+  "admin/editor.productSummaryPrice.showListPriceRange.title": "Mostrar rango de precios de tabla",
+  "admin/editor.productSummaryPrice.showInstallments.title": "Mostrar parcelas",
+  "admin/editor.productSummaryPrice.showLabels.title": "Mostrar las etiquetas",
+  "admin/editor.productSummaryPrice.labelSellingPrice.title": "Etiqueta para el precio de venta",
+  "admin/editor.productSummaryPrice.labelListPrice.title": "Etiqueta para el precio indicado",
+  "admin/editor.productSummaryPrice.showBorders.title": "Mostrar bordes"
 }
diff --git a/messages/pt.json b/messages/pt.json
@@ -15,5 +15,15 @@
   "store/productSummary.quantity-error": "Não foi possível selecionar a quantidade especificada",
   "store/productSummary.unit": "Unidade",
   "store/productSummary.attachmentName": "{sign} {quantity}x {name}",
-  "store/productSummary.missingOptionName": "Sem {name}"
+  "store/productSummary.missingOptionName": "Sem {name}",
+  "admin/editor.productSummaryPrice.title": "Preço do Resumo do Produto",
+  "admin/editor.productSummaryPrice.description": "Componente que mostra o preço do produto",
+  "admin/editor.productSummaryPrice.showListPrice.title": "Mostrar preço listado",
+  "admin/editor.productSummaryPrice.showSellingPriceRange.title": "Mostrar faixa de preços de venda",
+  "admin/editor.productSummaryPrice.showListPriceRange.title": "Mostrar faixa de preços de tabela",
+  "admin/editor.productSummaryPrice.showInstallments.title": "Mostrar parcelas",
+  "admin/editor.productSummaryPrice.showLabels.title": "Mostrar rótulos",
+  "admin/editor.productSummaryPrice.labelSellingPrice.title": "Rótulo para preço de venda",
+  "admin/editor.productSummaryPrice.labelListPrice.title": "Rótulo para preço listado",
+  "admin/editor.productSummaryPrice.showBorders.title": "Mostrar bordas"
 }
diff --git a/react/components/ProductSummaryPrice/ProductSummaryPrice.js b/react/components/ProductSummaryPrice/ProductSummaryPrice.js
@@ -1,21 +1,30 @@
-import React, { useContext } from 'react'
+import React, { useMemo, useContext } from 'react'
 import PropTypes from 'prop-types'
-import { path, prop } from 'ramda'
+import { 
+  path, 
+  prop,
+  flatten,
+  map,
+  filter
+} from 'ramda'
 import classNames from 'classnames'
 import { Spinner } from 'vtex.styleguide'
 import { ProductPrice } from 'vtex.store-components'
 
 import ProductSummaryContext from '../ProductSummaryContext'
-import { productShape } from '../../utils/propTypes'
 import productSummary from '../../productSummary.css'
 
+const isAvailableProduct = price => price !== 0
+
 const ProductSummaryPrice = ({
   showListPrice,
+  showSellingPriceRange,
   showLabels,
   showInstallments,
   labelSellingPrice,
   labelListPrice,
   showBorders,
+  showListPriceRange,
 }) => {
   const { product, isLoading } = useContext(ProductSummaryContext)
   const commertialOffer = path(['sku', 'seller', 'commertialOffer'], product)
@@ -35,6 +44,21 @@ const ProductSummaryPrice = ({
     sellingPriceClass: 'dib ph2 t-body t-heading-5-ns',
   }
 
+  const getPrices = attribute => {
+    const { items } = product
+    if (!items) {
+      return []
+    }
+
+    const sellers = flatten(map(prop('sellers'), items))
+    const prices = map(path(['commertialOffer', attribute]), sellers)
+    const availableProductsPrices = filter(isAvailableProduct, prices)
+
+    return availableProductsPrices
+  }
+
+  const sellingPriceList = useMemo(() => getPrices('Price'), [product])
+  const listPriceList = useMemo(() => getPrices('ListPrice'), [product])
   const sellingPrice = prop('Price', commertialOffer)
 
   return (
@@ -53,22 +77,32 @@ const ProductSummaryPrice = ({
           interestRateClass="dib pl2"
           installmentContainerClass="t-small-ns c-muted-2"
           listPrice={prop('ListPrice', commertialOffer)}
+          sellingPriceList={sellingPriceList}
+          listPriceRangeClass="dib ph2 t-small-ns strike"
+          sellingPriceRangeClass="dib ph2 t-small-ns"
           sellingPrice={prop('Price', commertialOffer)}
           installments={prop('Installments', commertialOffer)}
           showListPrice={showListPrice}
+          showSellingPriceRange={showSellingPriceRange}
           showLabels={showLabels}
           showInstallments={showInstallments}
           labelSellingPrice={labelSellingPrice}
           labelListPrice={labelListPrice}
+          listPriceList={listPriceList}
+          showListPriceRange={showListPriceRange}
         />
       )}
     </div>
   )
 }
 
 ProductSummaryPrice.propTypes = {
+  /** Set the product selling price range visibility */
+  showSellingPriceRange: PropTypes.bool,
   /** Set the product list price's visibility */
   showListPrice: PropTypes.bool,
+  /** Set the product list price range visibility */
+  showListPriceRange: PropTypes.bool,
   /** Set pricing labels' visibility */
   showLabels: PropTypes.bool,
   /** Set installments' visibility */
@@ -82,6 +116,8 @@ ProductSummaryPrice.propTypes = {
 }
 
 ProductSummaryPrice.defaultProps = {
+  showSellingPriceRange: false,
+  showListPriceRange: false,
   showListPrice: true,
   showInstallments: true,
   showLabels: true,
@@ -90,48 +126,58 @@ ProductSummaryPrice.defaultProps = {
   showBorders: false,
 }
 
-ProductSummaryPrice.getSchema = () => {
-  return {
-    title: 'admin/editor.productSummary.title',
-    description: 'admin/editor.productSummary.description',
-    type: 'object',
-    properties: {
-      showListPrice: {
-        type: 'boolean',
-        title: 'admin/editor.productSummary.showListPrice.title',
-        default: ProductSummaryPrice.defaultProps.showListPrice,
-        isLayout: true,
-      },
-      showInstallments: {
-        type: 'boolean',
-        title: 'admin/editor.productSummary.showInstallments.title',
-        default: ProductSummaryPrice.defaultProps.showInstallments,
-        isLayout: true,
-      },
-      showLabels: {
-        type: 'boolean',
-        title: 'admin/editor.productSummary.showLabels.title',
-        default: ProductSummaryPrice.defaultProps.showLabels,
-        isLayout: true,
-      },
-      labelSellingPrice: {
-        type: 'string',
-        title: 'admin/editor.productSummary.labelSellingPrice.title',
-        isLayout: false,
-      },
-      labelListPrice: {
-        type: 'string',
-        title: 'admin/editor.productSummary.labelListPrice.title',
-        isLayout: false,
-      },
-      showBorders: {
-        type: 'boolean',
-        title: 'admin/editor.productSummary.showBorders.title',
-        default: ProductSummaryPrice.defaultProps.showBorders,
-        isLayout: true,
-      },
+ProductSummaryPrice.schema = {
+  title: 'admin/editor.productSummaryPrice.title',
+  description: 'admin/editor.productSummaryPrice.description',
+  type: 'object',
+  properties: {
+    showListPrice: {
+      type: 'boolean',
+      title: 'admin/editor.productSummaryPrice.showListPrice.title',
+      default: ProductSummaryPrice.defaultProps.showListPrice,
+      isLayout: true,
     },
-  }
+    showSellingPriceRange: {
+      type: 'boolean',
+      title: 'admin/editor.productSummaryPrice.showSellingPriceRange.title',
+      default: ProductSummaryPrice.defaultProps.showSellingPriceRange,
+      isLayout: true,
+    },
+    showListPriceRange: {
+      type: 'boolean',
+      title: 'admin/editor.productSummaryPrice.showListPriceRange.title',
+      default: ProductSummaryPrice.defaultProps.showListPrice,
+      isLayout: true,
+    },
+    showInstallments: {
+      type: 'boolean',
+      title: 'admin/editor.productSummaryPrice.showInstallments.title',
+      default: ProductSummaryPrice.defaultProps.showInstallments,
+      isLayout: true,
+    },
+    showLabels: {
+      type: 'boolean',
+      title: 'admin/editor.productSummaryPrice.showLabels.title',
+      default: ProductSummaryPrice.defaultProps.showLabels,
+      isLayout: true,
+    },
+    labelSellingPrice: {
+      type: 'string',
+      title: 'admin/editor.productSummaryPrice.labelSellingPrice.title',
+      isLayout: false,
+    },
+    labelListPrice: {
+      type: 'string',
+      title: 'admin/editor.productSummaryPrice.labelListPrice.title',
+      isLayout: false,
+    },
+    showBorders: {
+      type: 'boolean',
+      title: 'admin/editor.productSummaryPrice.showBorders.title',
+      default: ProductSummaryPrice.defaultProps.showBorders,
+      isLayout: true,
+    },
+  },
 }
 
 export default ProductSummaryPrice
diff --git a/react/components/ProductSummaryPrice/README.md b/react/components/ProductSummaryPrice/README.md
@@ -8,10 +8,14 @@ This Component can be imported and used by any VTEX App.
 :loudspeaker: **Disclaimer:** Don't fork this project; use, contribute, or open issue with your feature request.
 
 ## Table of Contents
-- [Usage](#usage)
-  - [Blocks API](#blocks-api)
-  - [Configuration](#configuration)
-  - [Styles API](#styles-api)
+- [Product Summary Price](#product-summary-price)
+  - [Description](#description)
+  - [Table of Contents](#table-of-contents)
+  - [Usage](#usage)
+    - [Blocks API](#blocks-api)
+    - [Configuration](#configuration)
+    - [Styles API](#styles-api)
+      - [CSS namespaces](#css-namespaces)
 
 ## Usage
 
@@ -41,6 +45,8 @@ Through the Storefront, you can change the `ProductSummaryPrice`'s behavior and
 | `labelSellingPrice` | `String`  | Text of selling price's label    |               |
 | `labelListPrice`    | `String`  | Text of list price's label       |               |   
 | `showBorders`       | `Boolean` | Set product's borders visibility | `false`       |
+| `showListPriceRange`       | `Boolean` | Set if you want to see list price as range (lowest - highest) when available | `false`       |
+| `showSellingPriceRange`       | `Boolean` | Set if you want to see selling price as range (lowest - highest) when available | `false`       |
 
 ### Styles API