From 182937233a92045483371abcc9529fd5ef831df6 Mon Sep 17 00:00:00 2001
From: Marcos Kawakami <marcos.kawakami@vtex.com.br>
Date: Tue, 22 Oct 2019 19:26:02 -0300
Subject: [PATCH] Add "Remove" text to option 0 in quantity selector dropdown

---
 CHANGELOG.md                          |  4 ++++
 messages/en.json                      |  3 ++-
 messages/es.json                      |  3 ++-
 messages/pt.json                      |  3 ++-
 react/components/QuantitySelector.tsx | 24 +++++++++++++++++++-----
 5 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b280f47f..9ea6b000 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/messages/en.json b/messages/en.json
index 6d3fafbf..cbdc9680 100644
--- a/messages/en.json
+++ b/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"
 }
diff --git a/messages/es.json b/messages/es.json
index a1da5c46..f49dc5a5 100644
--- a/messages/es.json
+++ b/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"
 }
diff --git a/messages/pt.json b/messages/pt.json
index 29f9e4cb..b68a2f8d 100644
--- a/messages/pt.json
+++ b/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"
 }
diff --git a/react/components/QuantitySelector.tsx b/react/components/QuantitySelector.tsx
index 803bd424..47cf4f79 100644
--- a/react/components/QuantitySelector.tsx
+++ b/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)