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
vtex-apps · Jul 10, 2018 · 03c800e · 03c800e
1 parent 118e4c4
commit 03c800e
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 19 deletions.
diff --git 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
@@ -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
@@ -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 */