From 03c800ea3af5055822702284ab1d40e9eb40e277 Mon Sep 17 00:00:00 2001
From: Gustavo Ribeiro <gustavo.ribeiro@ccc.ufcg.edu.br>
Date: Tue, 10 Jul 2018 12:01:25 -0300
Subject: [PATCH] Buy Button Improvement (#111)

* Add buy button support to add multiple sku items to the cart at the same time

* Update CHANGELOG

* Update README

* Fix skuId attribute name

* Update CHANGELOG
---
 CHANGELOG.md                         |  2 ++
 react/components/BuyButton/README.md | 13 +++++++---
 react/components/BuyButton/index.js  | 39 ++++++++++++++++------------
 3 files changed, 35 insertions(+), 19 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 72dd73d10..dab54e55f 100644
--- a/CHANGELOG.md
+++ b/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
+- Buy button support to add multiple sku items to the cart at the same time of `BuyButton`.
 
 ## [1.7.3] - 2018-07-10
 ### Changed
diff --git a/react/components/BuyButton/README.md b/react/components/BuyButton/README.md
index 7db9a7522..e1402a196 100644
--- a/react/components/BuyButton/README.md
+++ b/react/components/BuyButton/README.md
@@ -9,19 +9,26 @@ import BuyButton from 'vtex.store-components/BuyButton'
 ## Usage
 You can use it in your code like a React component with the jsx tag: `<BuyButton />`. 
 ```html
-<BuyButton skuId={product.sku.id}> 
+<BuyButton skuItems={[{ id: '1', quantity: 1, seller: 1 }]}> 
   Buy!
 </BuyButton>
 ```
 
 | Prop name          | Type       | Description                                                                 |
 | ------------------ | ---------- | --------------------------------------------------------------------------- |
-| `skuId`            | `String!`  | Specification of which product will be added to the cart                    |
+| `skuItems`         | `Array!`   | SKU Items to be added to the cart                                           |
 | `message`          | `Node!`    | Component children that will be displayed inside of the button              |
 | `quantity`         | `Number`   | Quantity of the product sku to be added to the cart                         |
 | `seller`           | `Number`   | Which seller is being referenced by the button                              |
 | `isOneClickBuy`    | `Boolean`  | Should redirect to the checkout page or not                                 |
 | `intl`             | `Object`   | Internationalization property to format text                                |
 
-See an example at [Product Summary](https://github.com/vtex-apps/product-summary/blob/master/react/ProductSummary.js#L104) app
+#### SKU Items Props
+
+| Prop name          | Type       | Description                                                                 |
+| ------------------ | ---------- | --------------------------------------------------------------------------- |
+| `skuId`            | `String!`  | Specification of which product will be added to the cart                    |
+| `quantity`         | `Number!`  | Quantity of the product sku to be added to the cart                         |
+| `seller`           | `Number!`  | Which seller is being referenced by the button                              |
+
 
diff --git a/react/components/BuyButton/index.js b/react/components/BuyButton/index.js
index d9530e589..e6548b70f 100644
--- a/react/components/BuyButton/index.js
+++ b/react/components/BuyButton/index.js
@@ -16,13 +16,12 @@ const CONSTANTS = {
 }
 
 /**
- * BuyButton Component. Adds a list of items to the cart.
+ * BuyButton Component. 
+ * Adds a list of sku items to the cart.
  */
 export class BuyButton extends Component {
   static defaultProps = {
     isOneClickBuy: false,
-    quantity: 1,
-    seller: 1,
   }
 
   state = {
@@ -44,17 +43,18 @@ export class BuyButton extends Component {
   }
 
   handleAddToCart = client => {
-    const { quantity, seller, skuId, isOneClickBuy } = this.props
+    const { skuItems, isOneClickBuy } = this.props
 
-    const variables = {
-      items: [
-        {
+    const variables = { 
+      items: skuItems.map(skuItem => {
+        const { skuId, quantity, seller } = skuItem;
+        return {
           id: parseInt(skuId),
           index: 1,
           quantity,
           seller,
-        },
-      ],
+        }
+      })  
     }
 
     this.setState({ isLoading: true })
@@ -85,7 +85,9 @@ export class BuyButton extends Component {
             .then(
               mutationRes => {
                 const { items } = mutationRes.data.addItem
-                const success = find(items, { id: skuId })
+                const success = skuItems.map(skuItem => (
+                  find(items, { id: skuItem.skuId })
+                ))
                 this.toastMessage(success)
               },
               mutationErr => {
@@ -123,14 +125,19 @@ export class BuyButton extends Component {
 }
 
 BuyButton.propTypes = {
-  /** Specification of which product will be added to the cart */
-  skuId: PropTypes.string.isRequired,
+  /** SKU Items to be added to the cart */
+  skuItems: PropTypes.arrayOf(
+    PropTypes.shape({
+      /** Specification of which product will be added to the cart */
+      skuId: PropTypes.string.isRequired,
+      /** Quantity of the product sku to be added to the cart */
+      quantity: PropTypes.number.isRequired,
+      /** Which seller is being referenced by the button */
+      seller: PropTypes.number.isRequired,
+    }),
+  ).isRequired,
   /** Component children that will be displayed inside of the button **/
   children: PropTypes.PropTypes.node.isRequired,
-  /** Quantity of the product sku to be added to the cart */
-  quantity: PropTypes.number,
-  /** Which seller is being referenced by the button */
-  seller: PropTypes.number,
   /** Should redirect to checkout after adding to cart */
   isOneClickBuy: PropTypes.bool,
   /* Internationalization */