[Marketplace] Set order(s) to a specific status

imports/plugins/core/orders/client/components/orderBulkActionsBar.js

@@ -0,0 +1,182 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { Translation, Checkbox, Button, Icon, List, ListItem } from "@reactioncommerce/reaction-ui";
+
+class OrderBulkActionsBar extends Component {
+  static propTypes = {
+    handleBulkPaymentCapture: PropTypes.func,
+    isLoading: PropTypes.object,
+    multipleSelect: PropTypes.bool,
+    orders: PropTypes.array,
+    renderFlowList: PropTypes.bool,
+    selectAllOrders: PropTypes.func,
+    selectedItems: PropTypes.array,
+    setShippingStatus: PropTypes.func,
+    shipping: PropTypes.object,
+    toggleShippingFlowList: PropTypes.func
+  };
+
+  constructor() {
+    super();
+    this.state = {
+      printed: false
+    };
+  }
+
+  renderLoadingSpinner(status) {
+    return this.props.isLoading[status] ?
+      <Icon className="bulk-actions-icons-select" icon="fa fa-spinner fa-pulse" />
+      :
+      <Icon className="bulk-actions-icons-select" icon="fa fa-circle-o"/>;
+  }
+
+  onClick = (event, value) => {
+    this.setState({
+      [value]: true
+    });
+  }
+
+  renderShippingFLowList() {
+    if (this.props.renderFlowList) {
+      return (
+        <List className="shipping-flow-list">
+          <ListItem
+            label="Print Invoice and Pick Sheet"
+            i18nKeyLabel="order.printInvoiceAndPickSheet"
+            value="printed"
+            onClick={this.onClick}
+            listItemClassName={this.state.printed ? "selected" : ""}
+          >
+            {this.state.printed ?
+              <div>
+                <Icon className="bulk-actions-icons" icon="fa fa-print"/>
+                <Icon className="bulk-actions-icons-select" icon="fa fa-check"/>
+              </div>
+              :
+              <Icon className="bulk-actions-icons-select" icon="fa fa-print"/>
+            }
+          </ListItem>
+          <ListItem
+            label="Picked"
+            i18nKeyLabel="order.picked"
+            value="picked"
+            onClick={this.handleListItemClick}
+            listItemClassName={this.props.shipping.picked ? "selected" : ""}
+          >
+            {this.props.shipping.picked ?
+              <div>
+                <Icon className="bulk-actions-icons" icon="fa fa-print"/>
+                <Icon className="bulk-actions-icons-select" icon="fa fa-check"/>
+              </div>
+              :
+              this.renderLoadingSpinner("picked")
+            }
+          </ListItem>
+          <ListItem
+            label="Packed"
+            i18nKeyLabel="order.packed"
+            value="packed"
+            onClick={this.handleListItemClick}
+            listItemClassName={this.props.shipping.packed ? "selected" : ""}
+          >
+            {this.props.shipping.packed ?
+              <Icon className="bulk-actions-icons-select" icon="fa fa-check"/>
+              :
+              this.renderLoadingSpinner("packed")
+            }
+          </ListItem>
+          <ListItem
+            label={this.props.shipping.labeled ? "Generate Label" : "Labeled"}
+            i18nKeyLabel={this.props.shipping.labeled ? "order.generateLabel" : "order.labeled"}
+            value="labeled"
+            onClick={this.handleListItemClick}
+            listItemClassName={this.props.shipping.labeled ? "selected" : ""}
+          >
+            {this.props.shipping.labeled ?
+              <div>
+                <Icon className="bulk-actions-icons" icon="fa fa-print"/>
+                <Icon className="bulk-actions-icons-select" icon="fa fa-check"/>
+              </div>
+              :
+              this.renderLoadingSpinner("labeled")
+            }
+          </ListItem>
+          <ListItem
+            label="Shipped"
+            i18nKeyLabel="order.shipped"
+            value="shipped"
+            onClick={this.handleListItemClick}
+            listItemClassName={this.props.shipping.shipped ? "selected" : ""}
+          >
+            {this.props.shipping.shipped ?
+              <div>
+                <Icon className="bulk-actions-icons" icon="fa fa-paper-plane-o" />
+                <Icon className="bulk-actions-icons-select" icon="fa fa-check"/>
+              </div>
+              :
+              this.renderLoadingSpinner("shipped")
+            }
+          </ListItem>
+        </List>
+      );
+    }
+  }
+
+    handleListItemClick = (event, value) => {
+      if (this.props.setShippingStatus) {
+        this.props.setShippingStatus(value, this.props.selectedItems);
+      }
+    }
+
+    handlePaymentClick = () => {
+      if (this.props.handleBulkPaymentCapture) {
+        this.props.handleBulkPaymentCapture(this.props.selectedItems);
+      }
+    }
+
+    render() {
+      const { orders, multipleSelect, selectedItems, selectAllOrders } = this.props;
+
+      if (selectedItems.length > 0) {
+        return (
+          <div className="bulk-order-actions-bar">
+            <Checkbox
+              className="checkbox-large orders-checkbox"
+              checked={selectedItems.length === orders.length || multipleSelect}
+              name="orders-checkbox"
+              onChange={() => selectAllOrders(orders, (selectedItems.length === orders.length || multipleSelect))}
+            />
+            <Translation
+              className="selected-orders"
+              defaultValue={`${selectedItems.length} Selected`}
+              i18nKey={`${selectedItems.length} order.selected`}
+            />
+            <Button
+              status="success"
+              bezelStyle="solid"
+              className="capture-orders-button"
+              label={this.props.isLoading.capturePayment ? "Capturing" : "Capture"}
+              i18nKeyLabel={this.props.isLoading.capturePayment ? "order.capturing" : "order.capture"}
+              icon={this.props.isLoading.capturePayment ? "fa fa-spinner fa-pulse" : ""}
+              iconAfter={true}
+              onClick={this.handlePaymentClick}
+            />
+            <Button
+              status="default"
+              bezelStyle="solid"
+              className="bulk-actions-button"
+              label="Bulk Actions"
+              i18nKeyLabel="order.bulkActions"
+              icon="fa fa-chevron-down"
+              iconAfter={true}
+              onClick={this.props.toggleShippingFlowList}
+            />
+            {this.renderShippingFLowList()}
+          </div>
+        );
+      }
+      return null;
+    }
+}
+
+export default OrderBulkActionsBar;

imports/plugins/core/orders/client/components/orderList.js → imports/plugins/core/orders/client/components/orderDashboard.js

@@ -3,15 +3,22 @@ import PropTypes from "prop-types";
 import { Icon, Translation } from "@reactioncommerce/reaction-ui";
 import OrderTable from "./orderTable";
 
-class OrdersList extends Component {
+class OrderDashboard extends Component {
   static propTypes = {
     displayMedia: PropTypes.func,
+    handleBulkPaymentCapture: PropTypes.func,
     handleClick: PropTypes.func,
     handleSelect: PropTypes.func,
+    isLoading: PropTypes.object,
     multipleSelect: PropTypes.bool,
     orders: PropTypes.array,
+    renderFlowList: PropTypes.bool,
     selectAllOrders: PropTypes.func,
-    selectedItems: PropTypes.array
+    selectedItems: PropTypes.array,
+    setShippingStatus: PropTypes.func,
+    shipping: PropTypes.object,
+    toggleShippingFlowList: PropTypes.func
+
   }
 
   state = {
@@ -66,6 +73,12 @@ class OrdersList extends Component {
               selectAllOrders={this.props.selectAllOrders}
               displayMedia={this.props.displayMedia}
               isOpen={this.state.openList}
+              shipping={this.props.shipping}
+              setShippingStatus={this.props.setShippingStatus}
+              isLoading={this.props.isLoading}
+              renderFlowList={this.props.renderFlowList}
+              toggleShippingFlowList={this.props.toggleShippingFlowList}
+              handleBulkPaymentCapture={this.props.handleBulkPaymentCapture}
             />
           </div>
         </div>
@@ -83,4 +96,4 @@ class OrdersList extends Component {
   }
 }
 
-export default OrdersList;
+export default OrderDashboard;

imports/plugins/core/orders/client/components/orderTable.js

@@ -1,14 +1,13 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
-import { Orders } from "/lib/collections";
-import { SortableTable, Loading, Checkbox } from "@reactioncommerce/reaction-ui";
-import OrderTableColumn from "./orderTableColumn";
-
-import classnames from "classnames/dedupe";
 import Avatar from "react-avatar";
 import moment from "moment";
+import classnames from "classnames/dedupe";
+import { Badge, ClickToCopy, Icon, Translation, Checkbox, Loading, SortableTable } from "@reactioncommerce/reaction-ui";
+import { Orders } from "/lib/collections";
+import OrderTableColumn from "./orderTableColumn";
+import OrderBulkActionsBar from "./orderBulkActionsBar";
 import { formatPriceString } from "/client/api";
-import { Badge, ClickToCopy, Icon, Translation, Button } from "@reactioncommerce/reaction-ui";
 import ProductImage from "./productImage";
 
 const classNames = {
@@ -37,13 +36,19 @@ const classNames = {
 class OrderTable extends Component {
   static propTypes = {
     displayMedia: PropTypes.func,
+    handleBulkPaymentCapture: PropTypes.func,
     handleClick: PropTypes.func,
     handleSelect: PropTypes.func,
+    isLoading: PropTypes.object,
     isOpen: PropTypes.bool,
     multipleSelect: PropTypes.bool,
     orders: PropTypes.array,
+    renderFlowList: PropTypes.bool,
     selectAllOrders: PropTypes.func,
-    selectedItems: PropTypes.array
+    selectedItems: PropTypes.array,
+    setShippingStatus: PropTypes.func,
+    shipping: PropTypes.object,
+    toggleShippingFlowList: PropTypes.func
   }
 
   /**
@@ -67,15 +72,6 @@ class OrderTable extends Component {
     return "default";
   }
 
-  /**
-   * Shipping Badge
-   * TODO: any logic here, we don't have shipping status changes at the moment
-   * @return {string} A string containing the type of Badge
-   */
-  shippingBadgeStatus() {
-    return "basic";
-  }
-
   renderOrderButton(order) {
     const startWorkflow = order.workflow.status === "new";
     const classes = classnames({
@@ -156,7 +152,7 @@ class OrderTable extends Component {
             badgeSize="large"
             i18nKeyLabel={`cartDrawer.${order.shipping[0].workflow.status}`}
             label={order.shipping[0].workflow.status}
-            status={this.shippingBadgeStatus(order)}
+            status="basic"
           />
           <Badge
             badgeSize="large"
@@ -189,44 +185,6 @@ class OrderTable extends Component {
     );
   }
 
-  renderBulkOrderActionsBar = () => {
-    const { orders, multipleSelect, selectedItems, selectAllOrders } = this.props;
-
-    if (selectedItems.length > 0) {
-      return (
-        <div className="bulk-order-actions-bar">
-          <Checkbox
-            className="checkbox-large orders-checkbox"
-            checked={selectedItems.length === orders.length || multipleSelect}
-            name="orders-checkbox"
-            onChange={() => selectAllOrders(orders, (selectedItems.length === orders.length || multipleSelect))}
-          />
-          <Translation
-            className="selected-orders"
-            defaultValue={`${selectedItems.length} Selected`}
-            i18nKey={`${selectedItems.length} order.selected`}
-          />
-          <Button
-            status="success"
-            bezelStyle="solid"
-            className="capture-orders-button"
-            label="Capture"
-            i18nKeyLabel="order.capture"
-          />
-          <Button
-            status="default"
-            bezelStyle="solid"
-            className="bulk-actions-button"
-            label="Bulk Actions"
-            i18nKeyLabel="order.bulkActions"
-            icon="fa fa-chevron-down"
-            iconAfter={true}
-          />
-        </div>
-      );
-    }
-  }
-
   render() {
     let getTrProps = undefined;
     let getTheadProps = undefined;
@@ -308,7 +266,6 @@ class OrderTable extends Component {
               handleSelect={this.props.handleSelect}
               selectedItems={this.props.selectedItems}
               fulfillmentBadgeStatus={this.fulfillmentBadgeStatus}
-              shippingBadgeStatus={this.shippingBadgeStatus}
             />
           )
         };
@@ -350,7 +307,20 @@ class OrderTable extends Component {
 
     return (
       <div>
-        {this.props.isOpen && this.renderBulkOrderActionsBar()}
+        {this.props.isOpen &&
+          <OrderBulkActionsBar
+            shipping={this.props.shipping}
+            multipleSelect={this.props.multipleSelect}
+            orders={this.props.orders}
+            selectAllOrders={this.props.selectAllOrders}
+            selectedItems={this.props.selectedItems}
+            setShippingStatus={this.props.setShippingStatus}
+            isLoading={this.props.isLoading}
+            renderFlowList={this.props.renderFlowList}
+            toggleShippingFlowList={this.props.toggleShippingFlowList}
+            handleBulkPaymentCapture={this.props.handleBulkPaymentCapture}
+          />
+        }
         <SortableTable
           tableClassName={`rui order table -highlight ${this.props.selectedItems.length > 0 ?
             "table-header-hidden" :
@@ -368,13 +338,11 @@ class OrderTable extends Component {
           getTrGroupProps={getTrGroupProps}
           getPaginationProps={() => {
             return {
-              className: this.props.isOpen && this.props.selectedItems.length > 0 ?
-                "order-table-pagination-hidden" :
-                "order-table-pagination-visible"
+              className: "order-table-pagination-visible"
             };
           }}
           getTableProps={getTableProps}
-          showPaginationTop={true}
+          showPaginationTop={this.props.selectedItems.length ? false : true}
         />
       </div>
     );