elasticpath · long-wan-ep · Sep 25, 2019
diff --git a/app/src/localization/en-CA.json b/app/src/localization/en-CA.json
@@ -352,5 +352,9 @@
   "backend-message-account.not.found": "No account with the given account name was found.",
   "cart-clear-msg": "You are about to remove all items from",
   "cart-clear-confirmation": "These items will be permanently removed. Continue?",
-  "remove-all-cart-items": "Remove all cart items"
+  "remove-all-cart-items": "Remove all cart items",
+  "upload-csv": "Upload CSV",
+  "upload-csv-desc": "Upload a CSV for configurable items in the following format (including header row):",
+  "upload-csv-header": "code,quantity,configKey1,configKey2 ...",
+  "upload-csv-row": "Item #1,Qty,configValue1,configValue2 ..."
 }
diff --git a/app/src/localization/fr-FR.json b/app/src/localization/fr-FR.json
@@ -352,5 +352,9 @@
   "backend-message-account.not.found": "N-o- -a-c-c-o-u-n-t- -w-i-t-h- -t-h-e- -g-i-v-e-n- -a-c-c-o-u-n-t- -n-a-m-e- -w-a-s- -f-o-u-n-d-.",
   "cart-clear-msg": "Y-o-u- -a-r-e- -a-b-o-u-t- -t-o- -r-e-m-o-v-e- -a-l-l- -i-t-e-m-s- -f-r-o-m",
   "cart-clear-confirmation": "T-h-e-s-e- -i-t-e-m-s- -w-i-l-l- -b-e- -p-e-r-m-a-n-e-n-t-l-y- -r-e-m-o-v-e-d-.- -C-o-n-t-i-n-u-e-?",
-  "remove-all-cart-items": "R-e-m-o-v-e- -a-l-l- -c-a-r-t- -i-t-e-m-s"
+  "remove-all-cart-items": "R-e-m-o-v-e- -a-l-l- -c-a-r-t- -i-t-e-m-s",
+  "upload-csv": "U-p-l-o-a-d- -C-S-V",
+  "upload-csv-desc": "U-p-l-o-a-d- -a- -C-S-V- -f-o-r- -c-o-n-f-i-g-u-r-a-b-l-e- -i-t-e-m-s- -i-n- -t-h-e- -f-o-l-l-o-w-i-n-g- -f-o-r-m-a-t- -(-i-n-c-l-u-d-i-n-g- -h-e-a-d-e-r- -r-o-w):",
+  "upload-csv-header": "c-o-d-e-,-q-u-a-n-t-i-t-y-,-c-o-n-f-i-g-K-e-y-1-,-c-o-n-f-i-g-K-e-y-2- ...",
+  "upload-csv-row": "I-t-e-m- -#-1-,-Q-t-y-,-c-o-n-f-i-g-V-a-l-u-e-1-,-c-o-n-f-i-g-V-a-l-u-e-2- ..."
 }
diff --git a/components/package.json b/components/package.json
@@ -15,6 +15,7 @@
   "dependencies": {
     "fetch-mock": "^7.3.3",
     "less-vars-to-js": "^1.3.0",
+    "papaparse": "^4.6.3",
     "react-router-dom": "^5.0.1",
     "webpack-merge": "^4.2.2"
   },

diff --git a/components/src/AppHeader/appheader.main.tsx b/components/src/AppHeader/appheader.main.tsx
@@ -401,7 +401,7 @@ class AppHeaderMain extends React.Component<AppHeaderMainProps, AppHeaderMainSta
               <span className="icon glyphicon glyphicon-align-justify" />
             </button>
           </div>
-          <BulkOrderMain isBulkModalOpened={isBulkModalOpened} handleClose={this.handleBulkModalClose} cartData={cartData} />
+          <BulkOrderMain isBulkModalOpened={isBulkModalOpened} handleClose={this.handleBulkModalClose} cartData={cartData} onUpdate={() => { this.fetchCartData(); }} />
         </div>
 
         <div className="collapsable-container collapse collapsed">

diff --git a/components/src/BulkOrder/bulkorder.main.less b/components/src/BulkOrder/bulkorder.main.less
@@ -102,7 +102,7 @@
           color: gray;
         }
 
-        .tab-bulk-order{
+        .tab-bulk-order, .tab-batch-add-to-cart{
           margin-top: 5px;
         }
 
@@ -171,6 +171,27 @@
     font-size: 14px;
     font-weight: 500;
   }
+
+  .batch-add-to-cart-btn {
+    display: inline-block;
+    .btn-batch-csv {
+      padding: 1px 25px;
+      line-height: 2;
+      text-align: center;
+      font-size: 14px;
+      font-weight: 500;
+      text-transform: none;
+    }
+
+    .btn-batch-csv-hidden {
+      width: 0.1px;
+      height: 0.1px;
+      opacity: 0;
+      overflow: hidden;
+      position: absolute;
+      z-index: -1;
+    }
+  }
 }
 
 @media (max-width: @tabletWidth - 1px) {
@@ -198,7 +219,8 @@
       padding-right: 20px;
 
       .bulk-csv {
-        margin-bottom: 105px;
+        min-height: 250px;
+        margin-bottom: 0px;
       }
     }
   }

diff --git a/components/src/BulkOrder/bulkorder.main.stories.tsx b/components/src/BulkOrder/bulkorder.main.stories.tsx
@@ -27,12 +27,15 @@ import BulkOrder from './bulkorder.main';
 function handleBulkModalClose() {
 }
 
+function onUpdate() {
+}
+
 storiesOf('BulkOrder', module)
   .addDecorator(story => (
     <MemoryRouter initialEntries={['/']}>{story()}</MemoryRouter>
   ))
   .add('BulkOrder', () => (
     <div style={{ position: 'relative' }}>
-      <BulkOrder handleClose={handleBulkModalClose} isBulkModalOpened />
+      <BulkOrder handleClose={handleBulkModalClose} isBulkModalOpened onUpdate={onUpdate} />
     </div>
   ));
diff --git a/components/src/BulkOrder/bulkorder.main.tsx b/components/src/BulkOrder/bulkorder.main.tsx
@@ -20,6 +20,7 @@
  */
 
 import React from 'react';
+import Papa from 'papaparse';
 import BarcodeScanner from '../BarcodeScanner/barcodescanner';
 import { login } from '../utils/AuthService';
 import { cortexFetchItemLookupForm, itemLookup, searchLookup } from '../utils/CortexLookup';
@@ -37,7 +38,8 @@ interface BulkOrderProps {
     [key: string]: any
   },
   isBulkModalOpened: boolean,
-  handleClose: (...args: any[]) => any
+  handleClose: (...args: any[]) => any,
+  onUpdate: (...args: any[]) => any
 }
 
 interface BulkOrderState {
@@ -97,19 +99,23 @@ export class BulkOrder extends React.Component<BulkOrderProps, BulkOrderState> {
     this.handleBarcodeScanned = this.handleBarcodeScanned.bind(this);
   }
 
-  addAllToCart(orderItems, isQuickOrder) {
+  addAllToCart(orderItems, isQuickOrder, isBatchAddToCart) {
     if (!orderItems) return; // "\f02a"
-    const { cartData } = this.props;
+    const { cartData, onUpdate } = this.props;
     const { defaultItemsCount, defaultItem } = this.state;
     this.setState({ isLoading: true });
     const arrayItems = orderItems
       .filter(item => item.code !== '')
-      .map(item => ({ code: item.code, quantity: item.quantity }));
+      .map(item => ({ code: item.code, quantity: item.quantity, configuration: item.configuration }));
     login().then(() => {
       const addToCartLink = cartData._additemstocartform[0].links.find(link => link.rel === 'additemstocartaction');
       const body: { [key: string]: any } = {};
       if (arrayItems) {
-        body.items = arrayItems;
+        if (isBatchAddToCart) {
+          body['configurable-items'] = arrayItems;
+        } else {
+          body.items = arrayItems;
+        }
       }
       cortexFetch(addToCartLink.uri,
         {
@@ -130,6 +136,7 @@ export class BulkOrder extends React.Component<BulkOrderProps, BulkOrderState> {
               quickOrderErrorMessage: '',
               bulkOrderDuplicatedErrorMessage: '',
             });
+            onUpdate();
           }
           if (res.status >= 400) {
             let debugMessages = '';
@@ -259,8 +266,44 @@ export class BulkOrder extends React.Component<BulkOrderProps, BulkOrderState> {
     });
   }
 
+  // eslint-disable-next-line class-methods-use-this
+  processCSV(file) {
+    if (file) {
+      Papa.parse(file, {
+        header: true,
+        dynamicTyping: true,
+        encoding: 'utf-8',
+        skipEmptyLines: true,
+        // eslint-disable-next-line func-names
+        complete: ((results) => {
+          // eslint-disable-next-line no-console
+          console.log(results.data);
+          this.createItems(results.data);
+        }),
+      });
+    }
+  }
+
+  createItems(data) {
+    const items = data.map((item) => {
+      const configuration = {};
+      Object.keys(item).filter(key => key !== 'code' && key !== 'quantity').forEach((key) => {
+        configuration[key] = item[key];
+      });
+      return (
+        {
+          code: item.code,
+          quantity: item.quantity,
+          configuration,
+        }
+      );
+    });
+
+    this.addAllToCart(items, false, true);
+  }
+
   render() {
-    const { isBulkModalOpened, handleClose } = this.props;
+    const { isBulkModalOpened, handleClose, cartData } = this.props;
     const {
       items,
       bulkOrderItems,
@@ -277,6 +320,7 @@ export class BulkOrder extends React.Component<BulkOrderProps, BulkOrderState> {
     const isEmpty = Boolean(items.find(item => (item.code !== '' && item.isValidField === true)));
     const duplicatedFields = Boolean(items.find(item => (item.code !== '' && item.isDuplicated === true)));
     const isDisabledButton = (!Config.b2b.enable || (isValid || !isEmpty || duplicatedFields));
+    const batchAddToCartAccelerator = cartData && cartData._additemstocartform && cartData._additemstocartform[0]['configurable-items'];
     return (
       <div className={`bulk-order-component ${(isBulkModalOpened === false) ? 'hideModal' : ''}`}>
         <div role="presentation" className="bulk-order-close-button" onClick={() => { handleClose(); }}>
@@ -295,6 +339,11 @@ export class BulkOrder extends React.Component<BulkOrderProps, BulkOrderState> {
                 {intl.get('bulk-order-title')}
               </a>
             </li>
+            <li className="nav-item">
+              <a className="nav-link" id="batch-add-to-cart-tab" data-toggle="tab" href="#batch-add-to-cart" role="tab" aria-selected="false">
+                {intl.get('batch-add-to-cart-title')}
+              </a>
+            </li>
           </ul>
           <div className="tab-content">
             <div className="tab-pane fade show active" id="quick-order" role="tabpanel" aria-labelledby="quick-order-tab">
@@ -304,7 +353,7 @@ export class BulkOrder extends React.Component<BulkOrderProps, BulkOrderState> {
                   id="add_to_cart_quick_order_button"
                   disabled={isDisabledButton}
                   type="submit"
-                  onClick={() => { this.addAllToCart(items, true); }}
+                  onClick={() => { this.addAllToCart(items, true, batchAddToCartAccelerator); }}
                 >
                   {intl.get('add-all-to-cart')}
                 </button>
@@ -351,7 +400,7 @@ export class BulkOrder extends React.Component<BulkOrderProps, BulkOrderState> {
                   id="add_to_cart_bulk_order_button"
                   type="submit"
                   disabled={!Config.b2b.enable || (!csvText || bulkOrderDuplicatedErrorMessage !== '' || bulkOrderErrorMessage !== '')}
-                  onClick={() => { this.addAllToCart(bulkOrderItems, false); }}
+                  onClick={() => { this.addAllToCart(bulkOrderItems, false, batchAddToCartAccelerator); }}
                 >
                   {intl.get('add-all-to-cart')}
                 </button>
@@ -372,6 +421,22 @@ export class BulkOrder extends React.Component<BulkOrderProps, BulkOrderState> {
                 <p className="bulk-text-area-title"><b>{intl.get('enter-product-sku-and-quantity-in-input')}</b></p>
                 <textarea className="bulk-csv" rows={5} value={csvText} onChange={e => this.handleCsvChange(e.target.value)} />
               </div>
+              {
+                (batchAddToCartAccelerator) ? (
+                  <div>
+                    <hr />
+                    <div className="batch-add-to-cart-btn">
+                      <input type="file" className="btn-batch-csv-hidden" onChange={(e) => { this.processCSV(e.target.files[0]); e.target.value = null; }} name="file" id="batch-csv" accept=".csv" />
+                      <label className="ep-btn primary small btn-batch-csv" htmlFor="batch-csv">{intl.get('upload-csv')}</label>
+                    </div>
+                    <div className="tab-batch-add-to-cart">
+                      <p>{intl.get('upload-csv-desc')}</p>
+                      <p>{intl.get('upload-csv-header')}</p>
+                      <p>{intl.get('upload-csv-row')}</p>
+                    </div>
+                  </div>
+                ) : ''
+              }
             </div>
           </div>
         </div>

diff --git a/yarn.lock b/yarn.lock
@@ -15094,6 +15094,11 @@ pako@~1.0.5:
   resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.10.tgz#4328badb5086a426aa90f541977d4955da5c9732"
   integrity sha512-0DTvPVU3ed8+HNXOu5Bs+o//Mbdj9VNQMUOe9oKCwh8l0GNwpTDMKCWbRjgtD291AWnkAgkqA/LOnQS8AmS1tw==
 
+papaparse@^4.6.3:
+  version "4.6.3"
+  resolved "https://registry.yarnpkg.com/papaparse/-/papaparse-4.6.3.tgz#742e5eaaa97fa6c7e1358d2934d8f18f44aee781"
+  integrity sha512-LRq7BrHC2kHPBYSD50aKuw/B/dGcg29omyJbKWY3KsYUZU69RKwaBHu13jGmCYBtOc4odsLCrFyk6imfyNubJQ==
+
 parallel-transform@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/parallel-transform/-/parallel-transform-1.1.0.tgz#d410f065b05da23081fcd10f28854c29bda33b06"