/
ProductPrice.js
40 lines (36 loc) · 1.24 KB
/
ProductPrice.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
import React, { PropTypes } from 'react';
import Relay from 'react-relay/classic';
import InlineSVG from 'react-inlinesvg';
import SaleImg from '../../../images/sale_bg.svg';
const ProductPrice = ({ availability, price }) => {
const { discount, priceRange } = availability;
const isPriceRange = priceRange && priceRange.minPrice.gross !== priceRange.maxPrice.gross;
return (
<div>
<span itemProp="price">
{isPriceRange && <span>{pgettext('product price range', 'from')} </span>} {priceRange.minPrice.grossLocalized}
</span>
{discount && (
<div className="product-list__sale"><InlineSVG src={SaleImg} /><span className="product-list__sale__text">{pgettext('Sale (discount) label for item in product list', 'Sale')}</span></div>
)}
</div>
);
};
ProductPrice.propTypes = {
availability: PropTypes.object.isRequired,
price: PropTypes.object.isRequired
};
export default Relay.createContainer(ProductPrice, {
fragments: {
availability: () => Relay.QL`
fragment on ProductAvailabilityType {
available,
discount { gross },
priceRange {
maxPrice { gross, grossLocalized, currency },
minPrice { gross, grossLocalized, currency }
}
}
`
}
});