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

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

@@ -0,0 +1,179 @@
+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 = {
+      isLoading: PropTypes.object,
+      multipleSelect: PropTypes.bool,
+      orders: PropTypes.array,
+      renderFlowList: PropTypes.bool,
+      selectAllOrders: PropTypes.func,
+      selectedItems: PropTypes.array,
+      setShippingStatus: PropTypes.func,
+      shipping: PropTypes.object
+    };
+
+    constructor(props) {
+      super(props);
+      this.state = {
+        renderFlowList: props.renderFlowList,
+        shipping: props.shipping,
+        isLoading: props.isLoading
+      };
+    }
+
+    componentWillReceiveProps = (nextProps) => {
+      this.setState({
+        shipping: nextProps.shipping,
+        isLoading: nextProps.isLoading,
+        renderFlowList: nextProps.renderFlowList
+      });
+    }
+
+    toggleShippingFlowList = () => {
+      this.setState({
+        renderFlowList: !this.state.renderFlowList
+      });
+      this.setListItemsToDefault();
+    }
+
+    renderLoadingSpinner(status) {
+      return this.state.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"/>;
+    }
+
+    renderShippingFLowList() {
+      if (this.state.renderFlowList) {
+        return (
+          <List className="shipping-flow-list">
+            <ListItem
+              label={this.state.shipping.picked ? "Generate Picking Report" : "Picked"}
+              i18nKeyLabel={this.state.shipping.picked ? "order.generatePickingReport" : "order.picked"}
+              value="picked"
+              onClick={this.handleListItemClick}
+              listItemClassName={this.state.shipping.picked ? "selected" : ""}
+            >
+              {this.state.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.state.shipping.packed ? "selected" : ""}
+            >
+              {this.state.shipping.packed ?
+                <Icon className="bulk-actions-icons-select" icon="fa fa-check"/>
+                :
+                this.renderLoadingSpinner("packed")
+              }
+            </ListItem>
+            <ListItem
+              label={this.state.shipping.labeled ? "Generate Label" : "Labeled"}
+              i18nKeyLabel={this.state.shipping.labeled ? "order.generateLabel" : "order.labeled"}
+              value="labeled"
+              onClick={this.handleListItemClick}
+              listItemClassName={this.state.shipping.labeled ? "selected" : ""}
+            >
+              {this.state.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.state.shipping.shipped ? "selected" : ""}
+            >
+              {this.state.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);
+      }
+    }
+
+    setListItemsToDefault() {
+      if (this.state.renderFlowList === false) {
+        this.setState({
+          shipping: {
+            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,15 @@ class OrdersList extends Component {
     displayMedia: 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
+
   }
 
   state = {
@@ -66,6 +71,10 @@ 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}
             />
           </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 = {
@@ -39,11 +38,15 @@ class OrderTable extends Component {
     displayMedia: 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
   }
 
   /**
@@ -67,15 +70,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 +150,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 +183,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 +264,6 @@ class OrderTable extends Component {
               handleSelect={this.props.handleSelect}
               selectedItems={this.props.selectedItems}
               fulfillmentBadgeStatus={this.fulfillmentBadgeStatus}
-              shippingBadgeStatus={this.shippingBadgeStatus}
             />
           )
         };
@@ -350,7 +305,18 @@ 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}
+          />
+        }
         <SortableTable
           tableClassName={`rui order table -highlight ${this.props.selectedItems.length > 0 ?
             "table-header-hidden" :
@@ -368,13 +334,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>
     );

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"
         />
       );
     }