use new object property names

This commit is contained in:
GotPPay
2018-08-15 22:21:29 +02:00
parent 5399e3901b
commit 74a6905a23
8 changed files with 49 additions and 52 deletions

View File

@@ -52,7 +52,7 @@ class ProcessContainer extends Component {
if(this.props.orderInfo) { if(this.props.orderInfo) {
this.props.orderInfo.packages.forEach(orderPackage => { this.props.orderInfo.packages.forEach(orderPackage => {
orderPackagePairs.push(orderPackage.idOrder + '-' + orderPackage.idPackage); orderPackagePairs.push(this.props.orderInfo.id + '-' + orderPackage.id);
}); });
} }
this.setState({ this.setState({
@@ -71,11 +71,11 @@ class ProcessContainer extends Component {
if(installCompanies && isComponentDisabled && earliestInstallDate) { if(installCompanies && isComponentDisabled && earliestInstallDate) {
if(nextProps.orderInfo) { if(nextProps.orderInfo) {
const idOrder = nextProps.orderInfo.id;
nextProps.orderInfo.packages.forEach(orderPackage => { nextProps.orderInfo.packages.forEach(orderPackage => {
const idOrder = orderPackage && orderPackage.idOrder; const idOrderPackagePair = orderPackage ? idOrder + '-' + orderPackage.id : '';
const idOrderPackagePair = orderPackage ? idOrder + '-' + orderPackage.idPackage : '';
orderPackage.idOrderPackagePair = idOrderPackagePair; orderPackage.idOrderPackagePair = idOrderPackagePair;
areComponentsDisabled[idOrder] = this.checkIfComponentIsDisabled(orderPackage.idOrder, isComponentDisabled, earliestInstallDate); areComponentsDisabled[idOrder] = this.checkIfComponentIsDisabled(idOrder, isComponentDisabled, earliestInstallDate);
const availableCompanies = {}; const availableCompanies = {};
const selectedCompanies = {}; const selectedCompanies = {};
@@ -101,7 +101,7 @@ class ProcessContainer extends Component {
}); });
const isSchedulingDisabled = Object.assign({}, this.state.isSchedulingDisabled); const isSchedulingDisabled = Object.assign({}, this.state.isSchedulingDisabled);
isSchedulingDisabled[nextProps.orderInfo.info.id] = allPackagesScheduleInstallDisabled.every(isDisabled => {return isDisabled === true;}); isSchedulingDisabled[nextProps.orderInfo.id] = allPackagesScheduleInstallDisabled.every(isDisabled => {return isDisabled === true;});
this.setState({ this.setState({
isSchedulingDisabled, isSchedulingDisabled,
areComponentsDisabled, areComponentsDisabled,
@@ -126,16 +126,16 @@ class ProcessContainer extends Component {
return true; return true;
} }
calculatetTotalPrice(packages) { calculatetTotalPrice(packages, currency) {
let fixedPrice = priceHelper.sumPrices(packages.map(pkg => { return pkg.units * pkg.packageFixedPrice})); let fixedPrice = priceHelper.sumPrices(packages.map(pkg => { return pkg.quantity * pkg.price}));
let recurrentPrice = priceHelper.sumPrices(packages.map(pkg => { return pkg.units * pkg.packageRecuringPrice})); let recurrentPrice = priceHelper.sumPrices(packages.map(pkg => { return pkg.quantity * pkg.recurringPrice}));
let servicesPrice = priceHelper.sumPrices(packages.map(pkg => { return pkg.units * pkg.packageServicePrice})); let servicesPrice = priceHelper.sumPrices(packages.map(pkg => { return pkg.quantity * pkg.servicePrice}));
return { return {
fixedPrice, fixedPrice,
recurrentPrice: priceHelper.sumPrices([recurrentPrice, servicesPrice]), recurrentPrice: priceHelper.sumPrices([recurrentPrice, servicesPrice]),
periodUnit: packages[0].periodUnit, periodUnit: packages[0].periodUnit,
currency: packages[0].packageCurrency.currency currency: currency
} }
} }
@@ -158,15 +158,10 @@ class ProcessContainer extends Component {
if(this.state.packageNameFilter === 'all') { if(this.state.packageNameFilter === 'all') {
return true; return true;
}else{ }else{
return orderPackage.packageName === this.state.packageNameFilter; return orderPackage.name === this.state.packageNameFilter;
} }
} }
getProcess(process){
const processKeys = Object.keys(process) || [];
return processKeys.length > 0 ? process[processKeys[0]] : {};
}
getButtonClass() { getButtonClass() {
if(this.props.orderInfo) { if(this.props.orderInfo) {
return this.state.isSchedulingDisabled[this.props.orderInfo.id] ? 'schedule-inactive' : 'schedule-active'; return this.state.isSchedulingDisabled[this.props.orderInfo.id] ? 'schedule-inactive' : 'schedule-active';
@@ -198,7 +193,7 @@ class ProcessContainer extends Component {
getActiveView: this.getActiveView, getActiveView: this.getActiveView,
installationData: this.state installationData: this.state
}}> }}>
<OrderInfo totalPrice={this.calculatetTotalPrice(orderInfo.packages)} orderDetails={orderInfo} installationData={this.state}/> <OrderInfo totalPrice={this.calculatetTotalPrice(orderInfo.packages, orderInfo.currency)} orderDetails={orderInfo} installationData={this.state}/>
</WiaasBox> </WiaasBox>
{ {
this.state.activeView !== 'info' && this.state.activeView !== 'info' &&
@@ -221,9 +216,10 @@ class ProcessContainer extends Component {
> >
{ {
orderInfo.packages.filter(this.filterPackages).map(orderPackage => orderInfo.packages.filter(this.filterPackages).map(orderPackage =>
<ProcessPackage key={orderPackage.idPackage} <ProcessPackage key={orderPackage.id}
onViewChange={this.onViewChange} onViewChange={this.onViewChange}
idCommercialLead={orderInfo.info.idCommercialLead} idCommercialLead={orderInfo.commercialLead.id}
currency={orderInfo.currency}
orderPackage={orderPackage}/> orderPackage={orderPackage}/>
) )
} }
@@ -231,18 +227,18 @@ class ProcessContainer extends Component {
} }
{ {
this.state.activeView === 'comments' && this.state.activeView === 'comments' &&
<OrderComments orderInfo={orderInfo.info} orderComments={orderInfo.orderComments} orderPackages={orderInfo.packages}/> <OrderComments orderInfo={orderInfo} orderComments={orderInfo.comments} orderPackages={orderInfo.packages}/>
} }
{ {
this.state.activeView === 'documents' && this.state.activeView === 'documents' &&
<OrderDocuments idOrder={orderInfo.info.id} /> <OrderDocuments idOrder={orderInfo.id} />
} }
</div> </div>
} }
{ {
(orderInfo && !orderInfo.info && !isLoading) && (!orderInfo && !isLoading) &&
<div className="no-rigths"> <div className="no-rigths">
{orderTexts.labels.NOT_AVAILABLE}! {orderTexts.labels.NOT_AVAILABLE}!
</div> </div>

View File

@@ -10,10 +10,10 @@ class OrderDocuments extends Component {
return ( return (
<div id="order-documents" className="order-documents"> <div id="order-documents" className="order-documents">
{ {
orderInfo.packages.map(orderPackage => <OrderDocumentsGroup key={'order-package-' + orderPackage.idPackage} documentsGroup={orderPackage} />) orderInfo.packages.map(orderPackage => <OrderDocumentsGroup key={'order-package-' + orderPackage.id} documentsGroup={orderPackage} />)
} }
{ {
orderInfo.orderDocuments && <OrderDocumentsGroup key={'order-package-0'} documentsGroup={{documents: orderInfo.orderDocuments, packageName: orderTexts.labels.OTHER_DOCS}} /> orderInfo.orderDocuments && <OrderDocumentsGroup key={'order-package-0'} documentsGroup={{documents: orderInfo.documents, packageName: orderTexts.labels.OTHER_DOCS}} />
} }
</div> </div>
); );

View File

@@ -57,6 +57,7 @@ class OrderDocumentsGroup extends Component {
return ( return (
<div> <div>
{ {
documentsGroup.documents &&
documentsGroup.documents.length > 0 && documentsGroup.documents.length > 0 &&
<WiaasBox mainTitle={documentsGroup.packageName}> <WiaasBox mainTitle={documentsGroup.packageName}>
{ {

View File

@@ -27,7 +27,7 @@ class OrderInfo extends Component {
setInstallationData(props) { setInstallationData(props) {
const acceptedDate = {}; const acceptedDate = {};
const proposedDate = {}; const proposedDate = {};
const idOrder = props.orderDetails.info.id; const idOrder = props.orderDetails.id;
const {isInstallationInPackage} = props.installationData; const {isInstallationInPackage} = props.installationData;
const {confirmationDates, areAllShippingDatesConfirmed} = props; const {confirmationDates, areAllShippingDatesConfirmed} = props;
const isPreliminaryInstallationDate = areAllShippingDatesConfirmed && idOrder in areAllShippingDatesConfirmed ? !areAllShippingDatesConfirmed[idOrder] : true; const isPreliminaryInstallationDate = areAllShippingDatesConfirmed && idOrder in areAllShippingDatesConfirmed ? !areAllShippingDatesConfirmed[idOrder] : true;
@@ -53,27 +53,27 @@ class OrderInfo extends Component {
const {acceptedDate, proposedDate, isPreliminaryInstallationDate, isInstallationInOrder} = this.state; const {acceptedDate, proposedDate, isPreliminaryInstallationDate, isInstallationInOrder} = this.state;
const orderPackages = installationData.packages; const orderPackages = installationData.packages;
const isInstallationInPackage = installationData.isInstallationInPackage; const isInstallationInPackage = installationData.isInstallationInPackage;
const orderInfo = this.props.orderInfo.info; const orderInfo = this.props.orderInfo;
return ( return (
<Container fluid={true} id="order-info-description"> <Container fluid={true} id="order-info-description">
<Row> <Row>
<Col xl="2"> <Col xl="2">
<div className="subtitle"><h6>{orderTexts.labels.ORDER_DATE}:</h6></div> <div className="subtitle"><h6>{orderTexts.labels.ORDER_DATE}:</h6></div>
<span>{orderInfo.orderDate}</span> <span>{orderInfo.dateCreated}</span>
<div className="subtitle"><h6>{orderTexts.labels.SOLD_BY}:</h6></div> <div className="subtitle"><h6>{orderTexts.labels.SOLD_BY}:</h6></div>
<span>{orderInfo.commercialLead}</span> <span>{orderInfo.commercialLead.name}</span>
</Col> </Col>
<Col xl="2"> <Col xl="2">
<div className="subtitle"><h6>{orderTexts.labels.BILLING_FIRST_NAME}:</h6></div> <div className="subtitle"><h6>{orderTexts.labels.BILLING_FIRST_NAME}:</h6></div>
<span>{orderInfo.billingFirstName || '-'}</span> <span>{orderInfo.billing.firstName || '-'}</span>
<div className="subtitle"><h6>{orderTexts.labels.BILLING_LAST_NAME}:</h6></div> <div className="subtitle"><h6>{orderTexts.labels.BILLING_LAST_NAME}:</h6></div>
<span>{orderInfo.billingLastName || '-'}</span> <span>{orderInfo.billing.lastName || '-'}</span>
<div className="subtitle"><h6>{orderTexts.labels.BILLING_MAIL}:</h6></div> <div className="subtitle"><h6>{orderTexts.labels.BILLING_MAIL}:</h6></div>
<span>{orderInfo.billingMail || '-'}</span> <span>{orderInfo.billing.email || '-'}</span>
<div className="subtitle"><h6>{orderTexts.labels.BILLING_ADDRESS}:</h6></div> <div className="subtitle"><h6>{orderTexts.labels.BILLING_ADDRESS}:</h6></div>
<span>{orderInfo.billingAddress || '-'}</span> <span>{orderInfo.billing.address || '-'}</span>
</Col> </Col>
<Col xl="2"> <Col xl="2">
<div> <div>

View File

@@ -21,9 +21,9 @@ class PackageNav extends Component {
<div className={this.getClass('all')} onClick={()=>{onPackageFilter('all')}}>{orderTexts.buttons.ALL}</div> <div className={this.getClass('all')} onClick={()=>{onPackageFilter('all')}}>{orderTexts.buttons.ALL}</div>
{ {
packages.length > 0 && packages.length > 0 &&
packages.map((orderPackage) => <div key={'menu-package-' + orderPackage.idPackage} packages.map((orderPackage) => <div key={'menu-package-' + orderPackage.id}
onClick={()=>{onPackageFilter(orderPackage.packageName)}} onClick={()=>{onPackageFilter(orderPackage.name)}}
className={this.getClass(orderPackage.packageName)}>{orderPackage.packageName}</div>) className={this.getClass(orderPackage.name)}>{orderPackage.name}</div>)
} }
</Col> </Col>

View File

@@ -29,8 +29,8 @@ class PackageInfo extends Component {
} }
render() { render() {
const {orderPackage, onViewChange} = this.props; const {orderPackage, currency, onViewChange} = this.props;
const shouldShowPriceInfo = orderPackage.packageRecuringPrice > 0 || orderPackage.packageServicePrice > 0; const shouldShowPriceInfo = orderPackage.recurringPrice > 0 || orderPackage.servicePrice > 0;
return ( return (
<Container fluid={true} id="package-info" className="order-package-info"> <Container fluid={true} id="package-info" className="order-package-info">
@@ -41,7 +41,7 @@ class PackageInfo extends Component {
{orderTexts.labels.PACKAGE_PRICE}: {' '} {orderTexts.labels.PACKAGE_PRICE}: {' '}
{ shouldShowPriceInfo && { shouldShowPriceInfo &&
<i className="price-info-btn fa fa-info-circle" <i className="price-info-btn fa fa-info-circle"
id={'price-info-' + orderPackage.idPackage} id={'price-info-' + orderPackage.id}
onClick={this.toggle}></i> onClick={this.toggle}></i>
} }
</h6> </h6>
@@ -49,43 +49,43 @@ class PackageInfo extends Component {
</div> </div>
<div> <div>
{orderTexts.labels.TOTAL_DELVIERY_PRICE}: {' '} {orderTexts.labels.TOTAL_DELVIERY_PRICE}: {' '}
{(orderPackage.units * orderPackage.packageFixedPrice).toLocaleString() + ' ' + orderPackage.packageCurrency.currency} {(orderPackage.quantity * orderPackage.price).toLocaleString() + ' ' + currency}
</div> </div>
{ {
shouldShowPriceInfo && shouldShowPriceInfo &&
<div> <div>
{orderTexts.labels.TOTAL_RECURRENT_PRICE}:{' '} {orderTexts.labels.TOTAL_RECURRENT_PRICE}:{' '}
{(orderPackage.units * (orderPackage.packageRecuringPrice + orderPackage.packageServicePrice)).toLocaleString()} {orderPackage.packageCurrency.currency} {(orderPackage.quantity * (orderPackage.recurringPrice + orderPackage.servicePrice)).toLocaleString()} {currency}
</div> </div>
} }
{ shouldShowPriceInfo && { shouldShowPriceInfo &&
<Popover placement="bottom" <Popover placement="bottom"
isOpen={this.state.popoverOpen} isOpen={this.state.popoverOpen}
target={'price-info-' + orderPackage.idPackage} target={'price-info-' + orderPackage.id}
container={'price-info-' + orderPackage.idPackage} container={'price-info-' + orderPackage.id}
className="price-info-popover" className="price-info-popover"
toggle={this.toggle}> toggle={this.toggle}>
<PopoverHeader>{orderPackage.paymentType}</PopoverHeader> <PopoverHeader>{orderPackage.paymentType}</PopoverHeader>
<PopoverBody> <PopoverBody>
<div> <div>
{ orderPackage.packageRecuringPrice > 0 && { orderPackage.recurringPrice > 0 &&
<div className="package-price-recurrent"> <div className="package-price-recurrent">
<span className="price-info-title">{orderTexts.labels.RECURRENT_PRICE}: </span> <span className="price-info-title">{orderTexts.labels.RECURRENT_PRICE}: </span>
{(orderPackage.units * orderPackage.packageRecuringPrice).toLocaleString()} {orderPackage.packageCurrency.currency} / {orderPackage.periodUnit} {(orderPackage.quantity * orderPackage.recurringPrice).toLocaleString()} {currency} / {orderPackage.periodUnit}
{ {
orderPackage.packagePayPeriod > 0 && orderPackage.packagePayPeriod > 0 &&
<span> <span>
for {orderPackage.packagePayPeriod} {orderPackage.periodUnit} for {orderPackage.payPeriod} {orderPackage.periodUnit}
</span> </span>
} }
</div> </div>
} }
{ orderPackage.packageServicePrice > 0 && { orderPackage.servicePrice > 0 &&
<div className="services-price-recurrent"> <div className="services-price-recurrent">
<span className="price-info-title">{orderTexts.labels.SERVICES_PRICE}: </span> <span className="price-info-title">{orderTexts.labels.SERVICES_PRICE}: </span>
{(orderPackage.units * orderPackage.packageServicePrice).toLocaleString()} {orderPackage.packageCurrency.currency} / {orderPackage.periodUnit} {(orderPackage.quantity * orderPackage.servicePrice).toLocaleString()} {currency} / {orderPackage.periodUnit}
{ {
orderPackage.servicesContractPeriod > 0 && orderPackage.servicesContractPeriod > 0 &&
<span> <span>
@@ -101,7 +101,7 @@ class PackageInfo extends Component {
} }
</Col> </Col>
{ {
orderPackage.options.length > 0 && orderPackage.options && orderPackage.options.length > 0 &&
<Col xl="3"> <Col xl="3">
<div className="subtitle"><h6>{orderTexts.labels.OPTIONS}:</h6></div> <div className="subtitle"><h6>{orderTexts.labels.OPTIONS}:</h6></div>
{ {
@@ -112,7 +112,7 @@ class PackageInfo extends Component {
</Col> </Col>
} }
{ {
orderPackage.additionalPackages.length > 0 && orderPackage.additionalPackages && orderPackage.additionalPackages.length > 0 &&
<Col xl="3"> <Col xl="3">
<div className="subtitle"><h6>{orderTexts.labels.ADDITIONAL_PACKAGES}:</h6></div> <div className="subtitle"><h6>{orderTexts.labels.ADDITIONAL_PACKAGES}:</h6></div>
{ {

View File

@@ -7,7 +7,7 @@ class PackageName extends Component {
return ( return (
<div> <div>
<Link to={'/co-market/' + idCommercialLead + '/' + orderPackage.idPackage } className="package-name-link">{orderPackage.units + ' x ' + orderPackage.packageName}</Link> <Link to={'/co-market/' + idCommercialLead + '/' + orderPackage.id } className="package-name-link">{orderPackage.quantity + ' x ' + orderPackage.name}</Link>
</div> </div>
); );
} }

View File

@@ -6,13 +6,13 @@ import PackageName from './PackageName.jsx';
class ProcessPackage extends Component { class ProcessPackage extends Component {
render() { render() {
const {orderPackage, idCommercialLead} = this.props; const {orderPackage, currency, idCommercialLead} = this.props;
return ( return (
<WiaasBox customHeader={PackageName} customHeaderParams={{orderPackage, idCommercialLead}} className="order-package"> <WiaasBox customHeader={PackageName} customHeaderParams={{orderPackage, idCommercialLead}} className="order-package">
<Row> <Row>
<Col xl="12" lg="12" md="12" xs="12"> <Col xl="12" lg="12" md="12" xs="12">
<PackageInfo onViewChange={this.props.onViewChange} orderPackage={orderPackage}/> <PackageInfo onViewChange={this.props.onViewChange} orderPackage={orderPackage} currency={currency}/>
</Col> </Col>
</Row> </Row>
</WiaasBox> </WiaasBox>