initial docker setup

frontend/src/containers/dashboard/Dashboards.scss

@@ -0,0 +1,19 @@
+@import '../../styleConstants.scss';
+
+.order-placed-message {
+    padding: 0.5rem 1rem;
+}
+
+#dashboard-container {
+    .dashborad-message {
+        padding: 2rem;
+        background: $whiteColor;
+        color: $darkGreyColor;
+        font-weight: $font-weight;
+    }
+
+    .dashborad-message a {
+        color: $darkGreyColor;
+        font-weight: $font-weight;
+    }
+}

frontend/src/containers/dashboard/DashboardsContainer.jsx

@@ -0,0 +1,83 @@
+import React, {Component} from 'react';
+import {connect} from 'react-redux';
+import {Container, Row, Alert, Col} from 'reactstrap';
+import OrderCentralContainer from './OrderCentralContainer.jsx';
+import NextActionsContainer from './NextActionsContainer.jsx';
+import {fetchGadgets} from '../../actions/dashboard/dashboardActions';
+import {setOrderPlacedFlag, setOrderPlacedRedirectFlag} from '../../actions/cart/cartActions';
+import {dashboardTexts} from '../../constants/dashboardConstants';
+import './Dashboards.css';
+
+const gadgetContainers = {
+    CustomerOrderCentral : OrderCentralContainer,
+    CustomerNextActions: NextActionsContainer
+}
+
+class DashboardsContainer extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            orderPlaced: this.props.orderPlaced || false,
+            redirect: this.props.orderPlacedRedirect || true
+        };
+    }
+
+    componentDidMount() {
+        this.props.dispatch(fetchGadgets());
+        if(this.state.orderPlaced && this.state.redirect) {
+            this.setState({redirect: false});
+            this.props.dispatch(setOrderPlacedRedirectFlag(false));
+        }
+    }
+
+    render() {
+        const {gadgets} = this.props;
+
+        if(this.state.orderPlaced) {
+            setTimeout(() => {
+                this.setState({orderPlaced: false});
+                this.props.dispatch(setOrderPlacedFlag(false));
+            }, 15000);
+        }
+
+        return (
+            <div id="dashboard-container">
+                <Container fluid={true} id="dashborad-gadgets">
+                    <Row>
+                    {
+                        this.state.orderPlaced &&
+                            <Col>
+                                <Alert color="success" className="order-placed-message">
+                                    {dashboardTexts.messages.ORDER_PLACED}
+                                </Alert>
+                            </Col>
+                    }
+                    </Row>
+                    <Row>
+                        {
+                            gadgets &&
+                            gadgets.map((gadget, Key) => {
+                                const containerKey = gadget.name.replace(/\s/g, '');
+                                if(gadgetContainers[containerKey]){
+                                    const TagName = gadgetContainers[containerKey];
+                                    return <TagName key={gadget.idGadget} gadget={gadget}/>;
+                                }
+
+                                return '';
+                            })
+                        }
+                    </Row>
+                </Container>
+            </div>
+        );
+    }
+}
+
+const mapStateToProps = (state) => ({
+    gadgets: state.dashboardReducer.gadgets,
+    orderPlaced: state.cartReducer.orderPlaced,
+    orderPlacedRedirect: state.cartReducer.orderPlacedRedirect
+});
+
+export default connect(mapStateToProps)(DashboardsContainer);

frontend/src/containers/dashboard/NextActions.scss

@@ -0,0 +1,46 @@
+@import '../../styleConstants.scss';
+
+#next-actions-gadget{
+    .next-actions-row {
+        font-size: $font-size-small;
+        font-weight: $font-weight;
+        text-align: left;
+        color: $darkGreyColor;
+        padding: 1rem 0;
+    }
+
+    .next-actions-status {
+        display: inline-block;
+        border-radius: $box-radius;
+        margin-left: 0.5rem;
+        font-size: $font-size-xsmal;
+        padding: 0.1rem 0.3rem;
+        color: $whiteColor;
+        cursor: pointer;
+        border: 1px solid $whiteColor;
+    }
+
+    .next-actions-status:hover{
+        border: 1px solid $darkGreyColor;
+    }
+
+    .invalid {
+        background: $invalid-status-color;
+    }
+
+    .pending {
+        background: $pending-status-color;
+    }
+
+    .not-accepted {
+        background: $not-accepted-status-color;
+    }
+
+    .in-progress {
+        background: $in-progress-status-color;
+    }
+
+    .next-action-details{
+        float: right;
+    }
+}

frontend/src/containers/dashboard/NextActionsContainer.jsx

@@ -0,0 +1,41 @@
+import React, {Component} from 'react';
+import {connect} from 'react-redux';
+import {Col} from 'reactstrap';
+import {fetchNextActions} from '../../actions/dashboard/nextActionsActions';
+import WiaasBox from '../../mainComponents/box/WiaasBox.jsx';
+import NextActionsList from './components/NextActionsList.jsx';
+import {dashboardTexts} from '../../constants/dashboardConstants';
+import './NextActions.css';
+
+class NextActionsContainer extends Component {
+    componentDidMount() {
+        this.props.dispatch(fetchNextActions());
+    }
+
+    render() {
+        const {nextActions, isLoading} = this.props;
+
+        return (<Col xl="4" lg="4" md="12" sm="12" xs="12">
+                <WiaasBox id="next-actions-gadget" mainTitle={dashboardTexts.labels.NEXT_ACTIONS}>
+                    {
+                        isLoading &&
+                        <div className="loader">
+                            <i className="fa fa-spinner fa-spin fa-3x" aria-hidden="true"></i>
+                        </div>
+                    }
+                    {
+                        (nextActions && nextActions.length > 0 && !isLoading) ?
+                        <NextActionsList nextActions={nextActions}/> :
+                        <div className="dashborad-message">{dashboardTexts.labels.NO_ACTIONS}</div>
+                    }
+                </WiaasBox>
+        </Col>);
+    }
+}
+
+const mapStateToProps = (state) => ({
+    nextActions: state.nextActionsReducer.nextActions,
+    isLoading: state.nextActionsReducer.isLoading
+});
+
+export default connect(mapStateToProps)(NextActionsContainer);

frontend/src/containers/dashboard/OrderCentral.scss

@@ -0,0 +1,45 @@
+@import '../../styleConstants.scss';
+
+#order-central-gadget {
+    .order-central-row {
+        border-radius: 1.5px;
+    }
+
+    .package-photo{
+        margin-right: 0.5rem;
+    }
+
+    .orderNumber{
+        display: inline-block;
+        bottom: 0;
+        font-size: $font-size-msmall;
+
+        a {
+            color: $darkGreyColor;
+        }
+    }
+
+    .status-icon {
+        width: $font-size-xsmal;
+        height: $font-size-xsmal;
+        display: inline-block;
+        border-radius: 50%;
+        margin-right: 0.5rem;
+    }
+
+    .open {
+        background: $open-status-color;
+    }
+
+    .in-progress {
+        background: $in-progress-status-color;
+    }
+
+    .line-open {
+        border-left: 3px $open-status-color solid;
+    }
+
+    .line-in-progress {
+        border-left: 3px $in-progress-status-color solid;
+    }
+}

frontend/src/containers/dashboard/OrderCentralContainer.jsx

@@ -0,0 +1,69 @@
+import React, {Component} from 'react';
+import {connect} from 'react-redux';
+import {Col} from 'reactstrap';
+import {Link} from 'react-router-dom';
+import {fetchOrders} from '../../actions/dashboard/ordersActions';
+import WiaasBox from '../../mainComponents/box/WiaasBox.jsx';
+import OrdersList from './components/OrdersList.jsx';
+import OrderListHeader from '../orders/components/OrderListHeader.jsx';
+import {dashboardTexts} from '../../constants/dashboardConstants';
+import './OrderCentral.css';
+
+const type = 'overview';
+
+class OrderCentralContainer extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            orders: [],
+            isViewAllOrdersChecked: false
+        };
+    }
+
+    componentDidMount() {
+        this.props.dispatch(fetchOrders());
+    }
+
+    componentWillReceiveProps(nextProps) {
+        if(nextProps.isViewAllOrdersChecked[type] !== this.state.isViewAllOrdersChecked) {
+            this.setState({
+                isViewAllOrdersChecked: nextProps.isViewAllOrdersChecked[type] || false
+            });
+            this.props.dispatch(fetchOrders(nextProps.isViewAllOrdersChecked[type]));
+        }
+        this.setState({
+            orders: nextProps.orders
+        });
+    }
+
+    render() {
+        const {isLoading} = this.props;
+
+        return (<Col xl="8" lg="8" md="12" sm="12" xs="12">
+                <WiaasBox id="order-central-gadget" mainTitle={dashboardTexts.labels.ORDER_CENTRAL}  customHeader={OrderListHeader} customHeaderParams={type}>
+                {
+                    isLoading &&
+                    <div className="loader">
+                        <i className="fa fa-spinner fa-spin fa-3x" aria-hidden="true"></i>
+                    </div>
+                }
+                {
+                    (this.state.orders && this.state.orders.length > 0 && !isLoading) ?
+                    <OrdersList orders={this.state.orders} isViewAllOrdersChecked={this.props.isViewAllOrdersChecked[type]}/> :
+                    <div className="dashborad-message">
+                        <Link to='/co-market'>{dashboardTexts.labels.NO_ORDERS}</Link>
+                    </div>
+                }
+                </WiaasBox>
+        </Col>);
+    }
+}
+
+const mapStateToProps = (state) => ({
+    orders: state.ordersCentralReducer.orders,
+    isLoading: state.ordersCentralReducer.isLoading,
+    isViewAllOrdersChecked: state.ordersReducer.isViewAllOrdersChecked
+});
+
+export default connect(mapStateToProps)(OrderCentralContainer);

frontend/src/containers/dashboard/components/NextActionItem.jsx

@@ -0,0 +1,25 @@
+import React, {Component} from 'react';
+import {Link} from 'react-router-dom';
+import {Col, Row} from 'reactstrap';
+import {dashboardTexts} from '../../../constants/dashboardConstants';
+
+class NextActionItem extends Component {
+    render() {
+        const {nextAction} = this.props;
+
+        return (
+            <Row className="next-actions-row">
+               <Col xl="8">
+                  {nextAction.stepAction}
+               </Col>
+               <Col xl="4">
+                   <Link to={'orders/'+ nextAction.idOrder}>
+                       <div className={'next-actions-status ' + nextAction.status}>{dashboardTexts.statuses[nextAction.status]}</div>
+                   </Link>
+               </Col>
+           </Row>
+        );
+    }
+}
+
+export default NextActionItem;

frontend/src/containers/dashboard/components/NextActionsList.jsx

@@ -0,0 +1,27 @@
+import React, {Component} from 'react';
+import NextActionItem from './NextActionItem';
+import {WiaasTable, WiaasTableBody} from '../../../mainComponents/table/WiaasTable.jsx';
+
+class NextActionsList extends Component {
+
+    render() {
+        const {nextActions} = this.props;
+
+        return (
+            <div>
+                <WiaasTable>
+                    <WiaasTableBody>
+                        {
+                            nextActions &&
+                            nextActions.map((nextAction, index) =>
+                                <NextActionItem key={'action-' + nextAction.orderNumber + index} nextAction={nextAction}/>
+                             )
+                        }
+                    </WiaasTableBody>
+                </WiaasTable>
+            </div>
+        );
+    }
+}
+
+export default NextActionsList;

frontend/src/containers/dashboard/components/OrderItem.jsx

@@ -0,0 +1,34 @@
+import React, {Component} from 'react';
+import {Link} from 'react-router-dom';
+import {Button} from 'reactstrap';
+import { WiaasTableRow, WiaasTableCol} from '../../../mainComponents/table/WiaasTable.jsx';
+import {dashboardTexts} from '../../../constants/dashboardConstants';
+
+class OrderItem extends Component {
+    render() {
+        const {order, isViewAllOrdersChecked} = this.props;
+
+        return (
+            <WiaasTableRow className={'order-central-row line-' + order.status}>
+               <WiaasTableCol header="#">
+                   <i className="fa fa-list-alt package-photo" aria-hidden="true" />
+                   <div className="orderNumber">{order.orderNumber}</div>
+               </WiaasTableCol>
+               <WiaasTableCol header={dashboardTexts.tableHeaders.ORDER_DATE}>{order.orderDate}</WiaasTableCol>
+               {
+                   isViewAllOrdersChecked &&
+                   <WiaasTableCol header={dashboardTexts.tableHeaders.PLACED_BY}>{order.placedBy}</WiaasTableCol>
+               }
+               <WiaasTableCol header={dashboardTexts.tableHeaders.REFERENCE}>{order.reference}</WiaasTableCol>
+               <WiaasTableCol header={dashboardTexts.tableHeaders.ON_DELIVERY}>{order.fixedPrice.toLocaleString()} {order.currency}</WiaasTableCol>
+               <WiaasTableCol header={dashboardTexts.tableHeaders.MONTHLY}>{order.recurringPrice.toLocaleString()} {order.currency}</WiaasTableCol>
+               <WiaasTableCol header={dashboardTexts.tableHeaders.STATUS}>
+                   <div className={'status-icon ' + order.status}></div>{dashboardTexts.statuses[order.status]}
+               </WiaasTableCol>
+               <WiaasTableCol><Link to={'orders/'+ order.idOrder}><Button className="wiaas-button">{dashboardTexts.buttons.DETAILS}</Button></Link></WiaasTableCol>
+           </WiaasTableRow>
+        );
+    }
+}
+
+export default OrderItem;

frontend/src/containers/dashboard/components/OrdersList.jsx

@@ -0,0 +1,59 @@
+import React, {Component} from 'react';
+import OrderItem from './OrderItem';
+import {WiaasTable, WiaasTableHeader, WiaasTableBody} from '../../../mainComponents/table/WiaasTable.jsx';
+import {dashboardTexts} from '../../../constants/dashboardConstants';
+
+class OrdersList extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            isViewAllOrdersChecked: this.props.isViewAllOrdersChecked || false
+        };
+        this.getHeaderForOrders = this.getHeaderForOrders.bind(this);
+    }
+
+    componentWillReceiveProps(nextProps) {
+        this.setState({isViewAllOrdersChecked: nextProps.isViewAllOrdersChecked});
+    }
+
+    getHeaderForOrders() {
+        const headers = [
+            dashboardTexts.tableHeaders.ORDER,
+            dashboardTexts.tableHeaders.ORDER_DATE,
+            dashboardTexts.tableHeaders.REFERENCE,
+            dashboardTexts.tableHeaders.ON_DELIVERY,
+            dashboardTexts.tableHeaders.MONTHLY,
+            dashboardTexts.tableHeaders.STATUS,
+            ''
+        ];
+        if(this.state.isViewAllOrdersChecked) {
+            headers.splice(2, 0, dashboardTexts.tableHeaders.PLACED_BY);
+            headers.join();
+        }
+
+        return headers;
+    }
+
+    render() {
+        const {orders, isViewAllOrdersChecked} = this.props;
+
+        return (
+            <div>
+                <WiaasTable>
+                    <WiaasTableHeader headers={this.getHeaderForOrders()}/>
+                    <WiaasTableBody>
+                        {
+                            orders &&
+                            orders.map((order, index) =>
+                                <OrderItem key={'order-' + order.orderNumber} order={order} isViewAllOrdersChecked={isViewAllOrdersChecked}/>
+                             )
+                        }
+                    </WiaasTableBody>
+                </WiaasTable>
+            </div>
+        );
+    }
+}
+
+export default OrdersList;