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

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

@@ -0,0 +1,173 @@
+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 = {
+      labeled: PropTypes.bool,
+      multipleSelect: PropTypes.bool,
+      orders: PropTypes.array,
+      packed: PropTypes.bool,
+      picked: PropTypes.bool,
+      selectAllOrders: PropTypes.func,
+      selectedItems: PropTypes.array,
+      setShippingStatus: PropTypes.func,
+      shipped: PropTypes.bool
+    };
+
+    constructor(props) {
+      super(props);
+      this.state = {
+        renderFlowList: false,
+        picked: props.picked,
+        packed: props.packed,
+        labeled: props.labeled,
+        shipped: props.shipped
+      };
+    }
+
+    componentWillReceiveProps = (nextProps) => {
+      this.setState({
+        picked: nextProps.picked,
+        packed: nextProps.packed,
+        labeled: nextProps.labeled,
+        shipped: nextProps.shipped
+      });
+    }
+
+    toggleShippingFlowList = () => {
+      this.setState({
+        renderFlowList: !this.state.renderFlowList
+      });
+      this.setListItemsToDefault();
+    }
+
+    renderShippingFLowList() {
+      if (this.state.renderFlowList) {
+        return (
+          <List className="shipping-flow-list">
+            <ListItem
+              label={this.state.picked ? "Generate Picking Report" : "Picked"}
+              i18nKeyLabel={this.state.picked ? "order.generatePickingReport" : "order.picked"}
+              value="picked"
+              onClick={this.handleListItemClick}
+              listItemClassName={this.state.picked ? "selected" : ""}
+            >
+              {this.state.picked ?
+                <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-circle-o"/>}
+            </ListItem>
+            <ListItem
+              label="Packed"
+              i18nKeyLabel="order.packed"
+              value="packed"
+              onClick={this.handleListItemClick}
+              listItemClassName={this.state.packed ? "selected" : ""}
+            >
+              {this.state.packed ?
+                <Icon className="bulk-actions-icons-select" icon="fa fa-check"/>
+                :
+                <Icon className="bulk-actions-icons-select" icon="fa fa-circle-o"/>
+              }
+            </ListItem>
+            <ListItem
+              label={this.state.labeled ? "Generate Label" : "Labeled"}
+              i18nKeyLabel={this.state.labeled ? "order.generateLabel" : "order.labeled"}
+              value="labeled"
+              onClick={this.handleListItemClick}
+              listItemClassName={this.state.labeled ? "selected" : ""}
+            >
+              {this.state.labeled ?
+                <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-circle-o"/>
+              }
+            </ListItem>
+            <ListItem
+              label="Shipped"
+              i18nKeyLabel="order.shipped"
+              value="shipped"
+              onClick={this.handleListItemClick}
+              listItemClassName={this.state.shipped ? "selected" : ""}
+            >
+              {this.state.shipped ?
+                <div>
+                  <Icon className="bulk-actions-icons" icon="fa fa-paper-plane-o" />
+                  <Icon className="bulk-actions-icons-select" icon="fa fa-check"/>
+                </div>
+                :
+                <Icon className="bulk-actions-icons-select" icon="fa fa-circle-o"/>
+              }
+            </ListItem>
+          </List>
+        );
+      }
+    }
+
+    handleListItemClick = (event, value) => {
+      if (this.props.setShippingStatus) {
+        this.props.setShippingStatus(value, this.props.selectedItems);
+      }
+    }
+
+    setListItemsToDefault() {
+      if (this.state.renderFlowList === false) {
+        this.setState({
+          picked: false,
+          packed: false,
+          labeled: false,
+          shipped: false
+        });
+      }
+    }
+
+    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="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}
+              onClick={this.toggleShippingFlowList}
+            />
+            {this.renderShippingFLowList()}
+          </div>
+        );
+      }
+      return null;
+    }
+}
+
+export default OrderBulkActionsBar;

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

@@ -8,10 +8,16 @@ class OrdersList extends Component {
     displayMedia: PropTypes.func,
     handleClick: PropTypes.func,
     handleSelect: PropTypes.func,
+    labeled: PropTypes.bool,
     multipleSelect: PropTypes.bool,
     orders: PropTypes.array,
+    packed: PropTypes.bool,
+    picked: PropTypes.bool,
     selectAllOrders: PropTypes.func,
-    selectedItems: PropTypes.array
+    selectedItems: PropTypes.array,
+    setShippingStatus: PropTypes.func,
+    shipped: PropTypes.bool
+
   }
 
   state = {
@@ -66,6 +72,11 @@ class OrdersList extends Component {
               selectAllOrders={this.props.selectAllOrders}
               displayMedia={this.props.displayMedia}
               isOpen={this.state.openList}
+              picked={this.props.picked}
+              packed={this.props.packed}
+              labeled={this.props.labeled}
+              shipped={this.props.shipped}
+              setShippingStatus={this.props.setShippingStatus}
             />
           </div>
         </div>

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 = {
@@ -40,10 +39,15 @@ class OrderTable extends Component {
     handleClick: PropTypes.func,
     handleSelect: PropTypes.func,
     isOpen: PropTypes.bool,
+    labeled: PropTypes.bool,
     multipleSelect: PropTypes.bool,
     orders: PropTypes.array,
+    packed: PropTypes.bool,
+    picked: PropTypes.bool,
     selectAllOrders: PropTypes.func,
-    selectedItems: PropTypes.array
+    selectedItems: PropTypes.array,
+    setShippingStatus: PropTypes.func,
+    shipped: PropTypes.bool
   }
 
   /**
@@ -67,15 +71,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 +151,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 +184,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 +265,6 @@ class OrderTable extends Component {
               handleSelect={this.props.handleSelect}
               selectedItems={this.props.selectedItems}
               fulfillmentBadgeStatus={this.fulfillmentBadgeStatus}
-              shippingBadgeStatus={this.shippingBadgeStatus}
             />
           )
         };
@@ -350,7 +306,19 @@ class OrderTable extends Component {
 
     return (
       <div>
-        {this.props.isOpen && this.renderBulkOrderActionsBar()}
+        {this.props.isOpen &&
+          <OrderBulkActionsBar
+            picked={this.props.picked}
+            packed={this.props.packed}
+            labeled={this.props.labeled}
+            shipped={this.props.shipped}
+            multipleSelect={this.props.multipleSelect}
+            orders={this.props.orders}
+            selectAllOrders={this.props.selectAllOrders}
+            selectedItems={this.props.selectedItems}
+            setShippingStatus={this.props.setShippingStatus}
+          />
+        }
         <SortableTable
           tableClassName={`rui order table -highlight ${this.props.selectedItems.length > 0 ?
             "table-header-hidden" :

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

@@ -12,12 +12,11 @@ class OrderTableColumn extends Component {
     handleClick: PropTypes.func,
     handleSelect: PropTypes.func,
     row: PropTypes.object,
-    selectedItems: PropTypes.array,
-    shippingBadgeStatus: PropTypes.func
+    selectedItems: PropTypes.array
   }
 
   render() {
-    const { row, selectedItems, handleClick, handleSelect, fulfillmentBadgeStatus, shippingBadgeStatus } = this.props;
+    const { row, selectedItems, handleClick, handleSelect, fulfillmentBadgeStatus } = this.props;
     const columnAccessor = row.column.id;
 
     if (columnAccessor === "shipping[0].address.fullName") {
@@ -80,7 +79,7 @@ class OrderTableColumn extends Component {
           badgeSize="large"
           i18nKeyLabel={`cartDrawer.${row.value}`}
           label={row.value}
-          status={shippingBadgeStatus()}
+          status="basic"
         />
       );
     }