senaduka/old-new-wiaas
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Handle additional orders info for wiaas

Browse Source
This commit is contained in:
Almira Krdzic
2018-08-09 12:20:20 +02:00
parent b8653ad18b 5d84f53ea7
commit b9b1181bf4
46 changed files with 381 additions and 364 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/containers/dashboard/NextActions.scss
View File

@@ -36,8 +36,8 @@
background: $not-accepted-status-color;
}
.in-progress {
background: $in-progress-status-color;
.processing {
background: $processing-status-color;
}
.next-action-details{

8
frontend/src/containers/dashboard/OrderCentral.scss
View File

@@ -31,15 +31,15 @@
background: $open-status-color;
}
.in-progress {
background: $in-progress-status-color;
.processing {
background: $processing-status-color;
}
.line-open {
border-left: 3px $open-status-color solid;
}
.line-in-progress {
border-left: 3px $in-progress-status-color solid;
.line-processing {
border-left: 3px $processing-status-color solid;
}
}

4
frontend/src/containers/dashboard/components/NextActionItem.jsx
View File

@@ -10,10 +10,10 @@ class NextActionItem extends Component {
return (
<Row className="next-actions-row">
<Col xl="8">
{nextAction.stepAction}
{nextAction.step_action}
</Col>
<Col xl="4">
<Link to={'orders/'+ nextAction.idOrder}>
<Link to={'orders/'+ nextAction.order_id}>
<div className={'next-actions-status ' + nextAction.status}>{dashboardTexts.statuses[nextAction.status]}</div>
</Link>
</Col>

2
frontend/src/containers/dashboard/components/NextActionsList.jsx
View File

@@ -14,7 +14,7 @@ class NextActionsList extends Component {
{
nextActions &&
nextActions.map((nextAction, index) =>
<NextActionItem key={'action-' + nextAction.orderNumber + index} nextAction={nextAction}/>
<NextActionItem key={'action-' + nextAction.order_number + index} nextAction={nextAction}/>
)
}
</WiaasTableBody>

8
frontend/src/containers/dashboard/components/OrderItem.jsx
View File

@@ -12,12 +12,12 @@ class OrderItem extends Component {
<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>
<div className="orderNumber">{order.number}</div>
</WiaasTableCol>
<WiaasTableCol header={dashboardTexts.tableHeaders.ORDER_DATE}>{order.orderDate}</WiaasTableCol>
<WiaasTableCol header={dashboardTexts.tableHeaders.ORDER_DATE}>{order.dateCreated}</WiaasTableCol>
{
isViewAllOrdersChecked &&
<WiaasTableCol header={dashboardTexts.tableHeaders.PLACED_BY}>{order.placedBy}</WiaasTableCol>
<WiaasTableCol header={dashboardTexts.tableHeaders.PLACED_BY}>{order.customer ? order.customer.name : ''}</WiaasTableCol>
}
<WiaasTableCol header={dashboardTexts.tableHeaders.REFERENCE}>{order.reference}</WiaasTableCol>
<WiaasTableCol header={dashboardTexts.tableHeaders.ON_DELIVERY}>{order.fixedPrice.toLocaleString()} {order.currency}</WiaasTableCol>
@@ -25,7 +25,7 @@ class OrderItem extends Component {
<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>
<WiaasTableCol><Link to={'orders/'+ order.id}><Button className="wiaas-button">{dashboardTexts.buttons.DETAILS}</Button></Link></WiaasTableCol>
</WiaasTableRow>
);
}

2
frontend/src/containers/dashboard/components/OrdersList.jsx
View File

@@ -46,7 +46,7 @@ class OrdersList extends Component {
{
orders &&
orders.map((order, index) =>
<OrderItem key={'order-' + order.orderNumber} order={order} isViewAllOrdersChecked={isViewAllOrdersChecked}/>
<OrderItem key={'order-' + order.number} order={order} isViewAllOrdersChecked={isViewAllOrdersChecked}/>
)
}
</WiaasTableBody>

8
frontend/src/containers/orders/OrdersDataContainer.jsx
View File

@@ -13,10 +13,8 @@ class OrdersDataContainer extends Component {
this.props.dispatch(getHistoryOrders());
}
checkIfOrdersExistForUser(orders) {
return orders.every((order) => {
return true;//'isMyOrder' in order && !order.isMyOrder;
})
hasCurrentCustomerOrders(orders) {
return orders.some((order) => order.isMyOrder);
}
render() {
@@ -38,7 +36,7 @@ class OrdersDataContainer extends Component {
<OrderList orders={orders} type={type}/>
}
{
((orders && orders.length === 0 && !isLoading) || (orders && !this.checkIfOrdersExistForUser(orders))) &&
((orders && orders.length === 0 && !isLoading) || (orders && !this.hasCurrentCustomerOrders(orders))) &&
<Alert color="info">{orderTexts.labels.NO_RECORDS}</Alert>
}
</WiaasBox>

2
frontend/src/containers/orders/components/HistoryOrderButtons.jsx
View File

@@ -42,7 +42,7 @@ class HistoryOrdersButtons extends Component {
],
header: orderTexts.labels.SUPPORT_MESSAGE_HEADER,
TagName: SupportMail,
params: {orderInfo: this.props.order, orderPackages: this.props.order.line_items}
params: {orderInfo: this.props.order, orderPackages: this.props.order.packages}
};
this.props.dispatch(setDialogOpenFlag(true));

77
frontend/src/containers/orders/components/HistoryOrderItem.jsx
View File

@@ -1,77 +0,0 @@
import React, {Component} from 'react';
import {connect} from 'react-redux';
import {WiaasTableRow, WiaasTableCol} from '../../../mainComponents/table/WiaasTable.jsx';
import {orderTexts} from '../../../constants/ordersConstants';
import '../style/Orders.css';
import OrderPackage from './OrderPackage.jsx';
import HistoryOrderButtons from './HistoryOrderButtons.jsx';
class HistoryOrdersItem extends Component {
constructor(props) {
super(props);
this.state = {
showPackages: false
};
this.toggle = this.toggle.bind(this);
}
toggle() {
this.setState({
showPackages: !this.state.showPackages
});
}
getIconClass(type) {
return 'fa fa-angle-' + type + ' toggle-view-packages';
}
render() {
const {order, isViewAllOrdersChecked} = this.props;
return (
<div>
<WiaasTableRow className={"order-central-row order-border-" + order.status}>
<WiaasTableCol header="#">
{!this.state.showPackages && <i className={this.getIconClass('down')} aria-hidden="true" onClick={this.toggle}></i>}
{this.state.showPackages && <i className={this.getIconClass('up')} aria-hidden="true" onClick={this.toggle}></i>}
<i className="fa fa-list-alt package-photo" aria-hidden="true" />
<div className="order-number">{order.number}</div>
</WiaasTableCol>
<WiaasTableCol header={orderTexts.labels.REFERENCE}>{order.reference ? order.reference : '-'}</WiaasTableCol>
{isViewAllOrdersChecked['history'] && <WiaasTableCol header={orderTexts.labels.PLACED_BY}>{order.customer ? order.customer.name : ''}</WiaasTableCol>}
<WiaasTableCol header={orderTexts.labels.ORDER_DATE}>{order.date_created ? order.date_created : '-'}</WiaasTableCol>
<WiaasTableCol header={orderTexts.labels.DELIVERY_DATE}>{order.deliveryDate}</WiaasTableCol>
<WiaasTableCol header="Catalogue">
<div className="order-item-cl">
<img className="cl-photo" src="static/img/man-icon.png" alt="Catalogue" />
<div className="cl-details">
<div className="cl-contact-name">{order.commercial_lead ? order.commercial_lead.contact_name : ''}</div>
<div className="cl-name">{order.commercial_lead ? order.commercial_lead.name : ''}</div>
</div>
</div>
</WiaasTableCol>
<WiaasTableCol header={orderTexts.labels.AMOUNT}>
{order.currency
? order.total.toLocaleString() + ' ' + order.currency
: parseFloat(order.total).toLocaleString()}
</WiaasTableCol>
<WiaasTableCol header={orderTexts.labels.STATUS}>
<div className={'status-icon ' + order.status}></div>{orderTexts.statuses[order.status]}
</WiaasTableCol>
<WiaasTableCol header="End of life">{order.date_completed}</WiaasTableCol>
<WiaasTableCol header="Buttons details">
<HistoryOrderButtons order={order}/>
</WiaasTableCol>
</WiaasTableRow>
{ this.state.showPackages && <OrderPackage order={order} type="history"/> }
</div>
);
}
}
const mapStateToProps = (state) => ({
isViewAllOrdersChecked: state.ordersReducer.isViewAllOrdersChecked
});
export default connect(mapStateToProps)(HistoryOrdersItem);

8
frontend/src/containers/orders/components/OrderList.jsx
View File

@@ -1,7 +1,6 @@
import React, {Component} from 'react';
import {connect} from 'react-redux';
import ActiveOrderItem from './ActiveOrderItem.jsx';
import HistoryOrderItem from './HistoryOrderItem.jsx';
import OrderListItem from './OrderListItem.jsx';
import {WiaasTable, WiaasTableHeader, WiaasTableBody} from '../../../mainComponents/table/WiaasTable.jsx';
import {orderTexts} from '../../../constants/ordersConstants';
@@ -47,7 +46,6 @@ class OrderList extends Component {
render() {
const {orders, type, isCompanyAdmin, isViewAllOrdersChecked} = this.props;
const TagName = type && type === 'active' ? ActiveOrderItem : HistoryOrderItem;
return (
<div>
@@ -57,8 +55,8 @@ class OrderList extends Component {
{
orders &&
orders.map((order, index) =>
((true) || (isCompanyAdmin && isViewAllOrdersChecked[type])) &&
<TagName key={order.id} order={order} />
(order.isMyOrder || (isCompanyAdmin && isViewAllOrdersChecked[type])) &&
<OrderListItem key={order.id} order={order} type={type} />
)
}
</WiaasTableBody>

40
frontend/src/containers/orders/components/ActiveOrderItem.jsx → frontend/src/containers/orders/components/OrderListItem.jsx
View File

@@ -6,8 +6,9 @@ import {WiaasTableRow, WiaasTableCol} from '../../../mainComponents/table/WiaasT
import {orderTexts} from '../../../constants/ordersConstants';
import '../style/Orders.css';
import OrderPackage from './OrderPackage.jsx';
import HistoryOrderButtons from './HistoryOrderButtons.jsx';
class ActiveOrderItem extends Component {
class OrderListItem extends Component {
constructor(props) {
super(props);
this.state = {
@@ -29,6 +30,16 @@ class ActiveOrderItem extends Component {
render() {
const {order, isViewAllOrdersChecked} = this.props;
const isActive = this.props.type === 'active';
let orderButtons;
if (isActive) {
orderButtons = ( <Link to={'/orders/' + order.id} className="actions-link">
<Button color="secondary" className="actions-button">{orderTexts.buttons.DELIVERY_DETAILS}</Button>
</Link>);
} else {
orderButtons = <HistoryOrderButtons order={order}/>;
}
return (
<div>
@@ -40,34 +51,37 @@ class ActiveOrderItem extends Component {
<div className="order-number">{order.number}</div>
</WiaasTableCol>
<WiaasTableCol header={orderTexts.labels.REFERENCE}>{order.reference ? order.reference : '-'}</WiaasTableCol>
{isViewAllOrdersChecked['active'] && <WiaasTableCol header={orderTexts.labels.PLACED_BY}>{order.customer ? order.customer.name : ''}</WiaasTableCol>}
<WiaasTableCol header={orderTexts.labels.ORDER_DATE}>{order.date_created ? order.date_created : '-'}</WiaasTableCol>
{
isViewAllOrdersChecked[this.props.type] &&
<WiaasTableCol header={orderTexts.labels.PLACED_BY}>{order.customer ? order.customer.name : ''}</WiaasTableCol>
}
<WiaasTableCol header={orderTexts.labels.ORDER_DATE}>{order.dateCreated ? order.dateCreated : '-'}</WiaasTableCol>
<WiaasTableCol header={orderTexts.labels.EST_DELIVERY}>{order.estimatedDeliveryDate ? order.estimatedDeliveryDate : '-'}</WiaasTableCol>
<WiaasTableCol header="Catalogue">
<div className="order-item-cl">
<img className="cl-photo" src="static/img/man-icon.png" alt="Catalogue" />
<div className="cl-details">
<div className="cl-contact-name">{order.commercial_lead ? order.commercial_lead.contact_name : ''}</div>
<div className="cl-name">{order.commercial_lead ? order.commercial_lead.name : ''}</div>
<div className="cl-contact-name">{order.commercialLead ? order.commercialLead.contact : ''}</div>
<div className="cl-name">{order.commercialLead ? order.commercialLead.name : ''}</div>
</div>
</div>
</WiaasTableCol>
<WiaasTableCol header={orderTexts.labels.AMOUNT}>
{order.currency
? order.total.toLocaleString() + ' ' + order.currency
: parseFloat(order.total).toLocaleString()}
? order.fixedPrice.toLocaleString() + ' ' + order.currency
: parseFloat(order.fixedPrice).toLocaleString()}
</WiaasTableCol>
<WiaasTableCol header={orderTexts.labels.STATUS}>
<div className={'status-icon ' + order.status}></div>{orderTexts.statuses[order.status]}
</WiaasTableCol>
{
!isActive && <WiaasTableCol header="End of life">{order.dateCompleted}</WiaasTableCol>
}
<WiaasTableCol header="Buttons details">
<Link to={'/orders/' + order.id} className="actions-link">
<Button color="secondary" className="actions-button">{orderTexts.buttons.DELIVERY_DETAILS}</Button>
</Link>
{orderButtons}
</WiaasTableCol>
</WiaasTableRow>
{ this.state.showPackages && <OrderPackage order={order} type="active"/> }
{ this.state.showPackages && <OrderPackage order={order} type={this.props.type}/> }
</div>
);
}
@@ -76,4 +90,4 @@ class ActiveOrderItem extends Component {
const mapStateToProps = (state) => ({
isViewAllOrdersChecked: state.ordersReducer.isViewAllOrdersChecked
});
export default connect(mapStateToProps)(ActiveOrderItem);
export default connect(mapStateToProps)(OrderListItem);

24
frontend/src/containers/orders/components/OrderPackage.jsx
View File

@@ -32,7 +32,7 @@ class OrderPackage extends Component {
<div className="order-details-container">
<WiaasTableRow id={'delivery-address-' + order.id}>
<Col lg="4" sm="4" xs="4">{orderTexts.labels.DELIVERY_ADDRESS}:</Col>
<Col lg="8" sm="8" xs="8">{order.shipping.address_1}, {order.shipping.city}, {order.shipping.country}, {order.shipping.postcode}</Col>
<Col lg="8" sm="8" xs="8">{order.deliveryAddress}</Col>
</WiaasTableRow>
<WiaasTableRow id={'phone-' + order.id}>
<Col lg="4" sm="4" xs="4">{orderTexts.labels.PHONE_NUMBER}:</Col>
@@ -43,12 +43,12 @@ class OrderPackage extends Component {
<Col lg="8" sm="8" xs="8">{order.customer.email}</Col>
</WiaasTableRow>
<WiaasTableRow id={'commercial-lead-phone-' + order.id}>
<Col lg="4" sm="4" xs="4">{order.commercial_lead ? order.commercial_lead.name : ''} {orderTexts.labels.PHONE_NUMBER}:</Col>
<Col lg="8" sm="8" xs="8">{order.commercial_lead ? order.commercial_lead.phone : ''}</Col>
<Col lg="4" sm="4" xs="4">{order.commercialLead ? order.commercialLead.name : ''} {orderTexts.labels.PHONE_NUMBER}:</Col>
<Col lg="8" sm="8" xs="8">{order.commercialLead ? order.commercialLead.phone : ''}</Col>
</WiaasTableRow>
<WiaasTableRow id={'mail-' + order.id}>
<Col lg="4" sm="4" xs="4">{order.commercial_lead ? order.commercial_lead.name : ''} {orderTexts.labels.MAIL}:</Col>
<Col lg="8" sm="8" xs="8">{order.commercial_lead ? order.commercial_lead.email : ''}</Col>
<Col lg="4" sm="4" xs="4">{order.commercialLead ? order.commercialLead.name : ''} {orderTexts.labels.MAIL}:</Col>
<Col lg="8" sm="8" xs="8">{order.commercialLead ? order.commercialLead.email : ''}</Col>
</WiaasTableRow>
</div>
</WiaasBox>
@@ -58,24 +58,24 @@ class OrderPackage extends Component {
<WiaasTable>
<WiaasTableHeader headers={this.getHeadersByType(type)}/>
<WiaasTableBody>
{order.line_items.map((orderPackage, index) =>
<WiaasTableRow className="order-central-row" key={orderPackage.id + '-' + orderPackage.product_id}>
{order.packages.map((orderPackage, index) =>
<WiaasTableRow className="order-central-row" key={orderPackage.id}>
<WiaasTableCol header="Package" className="package-info-col">
<div className="package-name">{orderPackage.quantity} x {orderPackage.name}</div>
</WiaasTableCol>
<WiaasTableCol header="Price">
{this.calculateQuantityPrice(orderPackage.quantity, orderPackage.price).toLocaleString()} {orderPackage.packageCurrency && orderPackage.packageCurrency.currency} {' '}
({orderPackage.payment_type})
({orderPackage.paymentType})
</WiaasTableCol>
<WiaasTableCol header="Services and support">
{this.calculateQuantityPrice(orderPackage.quantity, orderPackage.service_price, orderPackage.recurring_price).toLocaleString() + ' / ' + orderPackage.period_unit + ' '}
{orderTexts.labels.EXTEND} {orderPackage.period_unit} (Max {orderPackage.max_contract_period})
{this.calculateQuantityPrice(orderPackage.quantity, orderPackage.servicePrice, orderPackage.recurringPrice).toLocaleString() + ' / ' + orderPackage.periodUnit + ' '}
{orderTexts.labels.EXTEND} {orderPackage.periodUnit} (Max {orderPackage.maxContractPeriod})
</WiaasTableCol>
<WiaasTableCol>
{
type === 'active'
? orderPackage.short_desc || '-'
: orderPackage.date_completed || '-'
? orderPackage.shortDesc || '-'
: orderPackage.dateCompleted || '-'
}
</WiaasTableCol>
</WiaasTableRow>

4
frontend/src/containers/orders/components/SupportMail.jsx
View File

@@ -75,13 +75,13 @@ class SupportMail extends Component {
</Col>
</Row>
{orderInfo.date_modified &&
{orderPackage.dateCompleted &&
<Row>
<Col>
<span className="subtitle">{orderTexts.labels.END_OF_LIFE}:</span>
</Col>
<Col xl="8">
<span>{orderPackage.date_completed}</span>
<span>{orderPackage.dateCompleted}</span>
</Col>
</Row>
}

4
frontend/src/containers/orders/style/Orders.scss
View File

@@ -18,7 +18,7 @@ $borderWidth: 3px;
border-left: $borderWidth $in-progress-status-color solid;
}
.order-border-production {
.order-border-completed {
border-left: $borderWidth $production-status-color solid;
}
@@ -26,7 +26,7 @@ $borderWidth: 3px;
border-left: $borderWidth $end-of-life-status-color solid;
}
.order-border-canceled {
.order-border-cancelled {
border-left: $borderWidth $canceled-status-color solid;
}

6
frontend/src/containers/orders/style/ProcessContainer.scss
View File

@@ -20,11 +20,11 @@ $link-line-height: 1.5rem;
border-left: $border-width $processing-status-color solid;
}
.canceled {
.cancelled {
border-left: $border-width $canceled-status-color solid;
}
.production {
.completed {
border-left: $border-width $production-status-color solid;
}
@@ -127,7 +127,7 @@ $link-line-height: 1.5rem;
background: $end-of-life-status-color;
}
.canceled {
.cancelled {
background: $canceled-status-color;
}