Merge pull request #44 from vtex-apps/feat/product-quantity

Add product quantity component
vtex-apps · Mar 6, 2020 · e0f20eb · e0f20eb
2 parents f313637 + ffab47f
commit e0f20eb
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 10 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,9 @@ 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`.
+- Prop `showListPrice` to `Price` component.
 
 ## [0.17.0] - 2020-01-29
 ### Added

diff --git a/docs/README.md b/docs/README.md
@@ -223,6 +223,7 @@ In order to apply CSS customizations in this and other blocks, follow the instru
 | `productPriceContainer`              |
 | `productPriceCurrency`               |
 | `productPrice`                       |
+| `productQuantityUnit`                |
 | `productVariationsContainer`         |
 | `productVariationsItem`              |
 | `quantityDropdownContainer`          |

diff --git a/messages/en.json b/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."
 }
diff --git a/messages/es.json b/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."
 }
diff --git a/messages/pt.json b/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."
 }
diff --git a/react/Price.tsx b/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,
     },
   },

diff --git a/react/ProductQuantity.tsx b/react/ProductQuantity.tsx
@@ -0,0 +1,23 @@
+import React from 'react'
+import { FormattedMessage } from 'react-intl'
+import { useCssHandles } from 'vtex.css-handles'
+
+import { useItemContext } from './components/ItemContext'
+
+const CSS_HANDLES = ['productQuantityUnit'] as const
+
+const ProductQuantity: React.FC = () => {
+  const { item } = useItemContext()
+  const cssHandles = useCssHandles(CSS_HANDLES)
+
+  return (
+    <span className={`${cssHandles.productQuantityUnit} c-muted-1 t-body`}>
+      <FormattedMessage
+        id="store/product-list.quantity-units"
+        values={{ quantity: item.quantity }}
+      />
+    </span>
+  )
+}
+
+export default ProductQuantity
diff --git a/store/interfaces.json b/store/interfaces.json
@@ -53,6 +53,9 @@
   "product-variations": {
     "component": "ProductVariations"
   },
+  "product-quantity": {
+    "component": "ProductQuantity"
+  },
   "quantity-selector": {
     "component": "QuantitySelector",
     "preview": {