Merge 4039cd2 into a615252

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
 
@@ -52,6 +57,7 @@ Now, you can change the behavior of the `product-summary` block that is in the m
     "displayBuyButton": "displayButtonHover",
     "showCollections": false,
     "showListPrice": true,
+    "showRangePrice": true,
     "showLabels": false,
     "showInstallments": true,
     "showSavings": true
@@ -84,6 +90,7 @@ Through the Storefront, you can change the product-summary's behavior and interf
 | Prop name           | Type      | Description                                                                                 |
 | ------------------- | --------- | ------------------------------------------------------------------------------------------- |
 | `showListPrice`     | `Boolean` | Shows the product list price                                                                |
+| `showRangePrice`    | `Boolean` | Shows the product price range                                                               |
 | `isOneClickBuy`     | `Boolean` | Should redirect to checkout after clicking on buy                                           |
 | `showLabels`        | `Boolean` | Set pricing labels' visibility                                                              |
 | `showInstallments`  | `Boolean` | Set installments' visibility                                                                |

manifest.json

@@ -20,4 +20,4 @@
     "vtex.product-review-interfaces": "1.x",
     "vtex.styleguide": "9.x"
   }
-}
+}

react/components/ProductSummaryPrice/ProductSummaryPrice.js

@@ -1,6 +1,12 @@
 import React, { 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'
@@ -9,6 +15,8 @@ import ProductSummaryContext from '../ProductSummaryContext'
 import { productShape } from '../../utils/propTypes'
 import productSummary from '../../productSummary.css'
 
+const isAvailableProduct = price => price !== 0
+
 const ProductSummaryPrice = ({
   showListPrice,
   showLabels,
@@ -35,6 +43,20 @@ 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 sellingPrices = useMemo(() => getPrices('Price'), [product])
   const sellingPrice = prop('Price', commertialOffer)
 
   return (
@@ -53,6 +75,8 @@ const ProductSummaryPrice = ({
           interestRateClass="dib pl2"
           installmentContainerClass="t-small-ns c-muted-2"
           listPrice={prop('ListPrice', commertialOffer)}
+          sellingPrices={sellingPrices}
+          priceRangeClass="dib ph2 t-small-ns"
           sellingPrice={prop('Price', commertialOffer)}
           installments={prop('Installments', commertialOffer)}
           showListPrice={showListPrice}

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
 

react/legacy/components/ProductSummaryPrice.js

@@ -1,11 +1,19 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import PropTypes from 'prop-types'
-import { path, prop } from 'ramda'
+import { 
+  path, 
+  prop,
+  flatten,
+  map,
+  filter
+} from 'ramda'
 import { Spinner } from 'vtex.styleguide'
 import { ProductPrice } from 'vtex.store-components'
 
 import { productShape } from '../../utils/propTypes'
 
+const isAvailableProduct = price => price !== 0
+
 const ProductSummaryPrice = ({
   product,
   showListPrice,
@@ -26,6 +34,20 @@ const ProductSummaryPrice = ({
     )
   }
 
+  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 sellingPrices = useMemo(() => getPrices('Price'), [product])
   const sellingPrice = prop('Price', commertialOffer)
 
   return (
@@ -44,6 +66,8 @@ const ProductSummaryPrice = ({
           interestRateClass="dib pl2"
           installmentContainerClass="t-small-ns c-muted-2"
           listPrice={prop('ListPrice', commertialOffer)}
+          sellingPrices={sellingPrices}
+          priceRangeClass="dib ph2 t-small-ns"
           sellingPrice={prop('Price', commertialOffer)}
           installments={prop('Installments', commertialOffer)}
           showListPrice={showListPrice}