Merge pull request #20 from vtex-apps/feature/remove

Add "Remove" text to option 0 in quantity selector dropdown

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added
+
+- "Remove" label to option zero in the quantity selector dropdown.
+
 ## [0.11.2] - 2019-10-18
 
 ### Added

messages/en.json

@@ -5,5 +5,6 @@
   "store/product-list.unavailableItems": "{quantity, plural, one {# unavailable item} other {# unavailable items}}",
   "store/product-list.message.cantBeDelivered": "This item cannot be delivered to this address.",
   "store/product-list.message.noLongerAvailable": "This item is no longer available.",
-  "store/product-list.message.remove": "remove"
+  "store/product-list.message.remove": "remove",
+  "store/product-list.quantity-selector.remove": "Remove"
 }

messages/es.json

@@ -5,5 +5,6 @@
   "store/product-list.unavailableItems": "{quantity, plural, one {# ítem no disponible} other {# ítems no disponibles}}",
   "store/product-list.message.cantBeDelivered": "Este item no se puede entregar a esta dirección.",
   "store/product-list.message.noLongerAvailable": "Este item no está disponible actualmente.",
-  "store/product-list.message.remove": "retirar"
+  "store/product-list.message.remove": "retirar",
+  "store/product-list.quantity-selector.remove": "Retirar"
 }

messages/pt.json

@@ -5,5 +5,6 @@
   "store/product-list.unavailableItems": "{quantity, plural, one {# item indisponível} other {# itens indisponíveis}}",
   "store/product-list.message.cantBeDelivered": "Este item não pode ser entregue neste endereço.",
   "store/product-list.message.noLongerAvailable": "Este item não está mais disponível.",
-  "store/product-list.message.remove": "remover"
+  "store/product-list.message.remove": "remover",
+  "store/product-list.quantity-selector.remove": "Remover"
 }

react/components/QuantitySelector.tsx

@@ -1,7 +1,20 @@
 import { range } from 'ramda'
 import React, { FunctionComponent, useState } from 'react'
+import {
+  defineMessages,
+  InjectedIntl,
+  InjectedIntlProps,
+  injectIntl,
+} from 'react-intl'
 import { Dropdown, Input } from 'vtex.styleguide'
 
+const messages = defineMessages({
+  remove: {
+    defaultMessage: '',
+    id: 'store/product-list.quantity-selector.remove',
+  },
+})
+
 const MAX_INPUT_LENGTH = 5
 
 enum SelectorType {
@@ -39,10 +52,10 @@ const validateDisplayValue = (value: string, maxValue: number) => {
   return `${normalizeValue(parsedValue, maxValue)}`
 }
 
-const getDropdownOptions = (maxValue: number) => {
+const getDropdownOptions = (maxValue: number, intl: InjectedIntl) => {
   const limit = Math.min(9, maxValue)
   const options = [
-    { value: 0, label: '0' },
+    { value: 0, label: `0 - ${intl.formatMessage(messages.remove)}` },
     ...range(1, limit + 1).map(idx => ({ value: idx, label: `${idx}` })),
   ]
 
@@ -53,11 +66,12 @@ const getDropdownOptions = (maxValue: number) => {
   return options
 }
 
-const QuantitySelector: FunctionComponent<Props> = ({
+const QuantitySelector: FunctionComponent<Props & InjectedIntlProps> = ({
   value,
   maxValue,
   onChange,
   disabled,
+  intl,
 }) => {
   const [curSelector, setSelector] = useState(
     value < 10 ? SelectorType.Dropdown : SelectorType.Input
@@ -109,7 +123,7 @@ const QuantitySelector: FunctionComponent<Props> = ({
   }
 
   if (curSelector === SelectorType.Dropdown) {
-    const dropdownOptions = getDropdownOptions(maxValue)
+    const dropdownOptions = getDropdownOptions(maxValue, intl)
 
     return (
       <div>
@@ -165,4 +179,4 @@ const QuantitySelector: FunctionComponent<Props> = ({
   }
 }
 
-export default QuantitySelector
+export default injectIntl(QuantitySelector)