Add product quantity component

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
+- New component `ProductQuantity`.
 
 ## [0.17.0] - 2020-01-29
 ### Added

messages/en.json

@@ -6,5 +6,6 @@
   "store/product-list.message.cantBeDelivered": "This product cannot be delivered to the address provided.",
   "store/product-list.message.noLongerAvailable": "This product is no longer available.",
   "store/product-list.message.remove": "remove",
-  "store/product-list.quantity-selector.remove": "Remove"
+  "store/product-list.quantity-selector.remove": "Remove",
+  "store/product-list.quantity-units": "{quantity} un."
 }

messages/es.json

@@ -6,5 +6,6 @@
   "store/product-list.message.cantBeDelivered": "Este producto no se puede entregar en la dirección proporcionada.",
   "store/product-list.message.noLongerAvailable": "Este producto no está disponible actualmente.",
   "store/product-list.message.remove": "retirar",
-  "store/product-list.quantity-selector.remove": "Retirar"
+  "store/product-list.quantity-selector.remove": "Retirar",
+  "store/product-list.quantity-units": "{quantity} un."
 }

messages/pt.json

@@ -6,5 +6,6 @@
   "store/product-list.message.cantBeDelivered": "Este produto não pode ser entregue no endereço fornecido.",
   "store/product-list.message.noLongerAvailable": "Este produto não está mais disponível.",
   "store/product-list.message.remove": "remover",
-  "store/product-list.quantity-selector.remove": "Remover"
+  "store/product-list.quantity-selector.remove": "Remover",
+  "store/product-list.quantity-units": "{quantity} un."
 }

react/Price.tsx

@@ -15,7 +15,14 @@ const CSS_HANDLES = [
   'productPrice',
 ] as const
 
-const Price: StorefrontFunctionComponent<TextAlignProp> = ({ textAlign }) => {
+type PriceProps = TextAlignProp & {
+  showListPrice: boolean
+}
+
+const Price: StorefrontFunctionComponent<PriceProps> = ({
+  textAlign = 'left',
+  showListPrice = true,
+}) => {
   const { item, loading } = useItemContext()
   const handles = useCssHandles(CSS_HANDLES)
 
@@ -29,7 +36,7 @@ const Price: StorefrontFunctionComponent<TextAlignProp> = ({ textAlign }) => {
         handles.productPriceContainer
       } ${parseTextAlign(textAlign)}`}
     >
-      {item.listPrice !== item.price && (
+      {item.listPrice !== item.price && showListPrice && (
         <div
           id={`list-price-${item.id}`}
           className={`${handles.productPriceCurrency} c-muted-1 strike t-mini mb2`}
@@ -47,15 +54,11 @@ const Price: StorefrontFunctionComponent<TextAlignProp> = ({ textAlign }) => {
   )
 }
 
-Price.defaultProps = {
-  textAlign: 'left',
-}
-
 Price.schema = {
   properties: {
     textAlign: {
       type: 'string',
-      default: Price.defaultProps.textAlign,
+      default: 'left',
       isLayout: true,
     },
   },

react/ProductQuantity.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { FormattedMessage } from 'react-intl'
+
+import { useItemContext } from './components/ItemContext'
+
+const ProductQuantity: React.FC = () => {
+  const { item } = useItemContext()
+
+  return (
+    <span className="c-muted-1 t-body">
+      <FormattedMessage
+        id="store/product-list.quantity-units"
+        values={{ quantity: item.quantity }}
+      />
+    </span>
+  )
+}
+
+export default ProductQuantity

store/interfaces.json

@@ -53,6 +53,9 @@
   "product-variations": {
     "component": "ProductVariations"
   },
+  "product-quantity": {
+    "component": "ProductQuantity"
+  },
   "quantity-selector": {
     "component": "QuantitySelector",
     "preview": {