Skip to content

Commit

Permalink
Merge e7a044e into c57dbdc
Browse files Browse the repository at this point in the history
  • Loading branch information
fanny committed May 27, 2019
2 parents c57dbdc + e7a044e commit 2299462
Show file tree
Hide file tree
Showing 8 changed files with 160 additions and 61 deletions.
2 changes: 2 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
21 changes: 13 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
14 changes: 12 additions & 2 deletions messages/context.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
12 changes: 11 additions & 1 deletion messages/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
12 changes: 11 additions & 1 deletion messages/es.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
12 changes: 11 additions & 1 deletion messages/pt.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
134 changes: 90 additions & 44 deletions react/components/ProductSummaryPrice/ProductSummaryPrice.js
Original file line number Diff line number Diff line change
@@ -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)
Expand All @@ -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 (
Expand All @@ -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 */
Expand All @@ -82,6 +116,8 @@ ProductSummaryPrice.propTypes = {
}

ProductSummaryPrice.defaultProps = {
showSellingPriceRange: false,
showListPriceRange: false,
showListPrice: true,
showInstallments: true,
showLabels: true,
Expand All @@ -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
14 changes: 10 additions & 4 deletions react/components/ProductSummaryPrice/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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

Expand Down

0 comments on commit 2299462

Please sign in to comment.