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

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>
}