Add support for package payment methods and basic checkout proccess
This commit is contained in:
Almira Krdzic
@@ -45,7 +45,8 @@ class CartCustomerDetailsContainer extends Component {
|
||||
this.props.dispatch(fetchCartItems());
|
||||
this.props.dispatch(setNextActionFct(this.handleNextAction));
|
||||
this.props.dispatch(setPrevActionFct(this.handlePrevAction));
|
||||
this.props.dispatch(fetchProfileInfo(this.props.userInfo.wiaas_id_user));
|
||||
//this.props.dispatch(fetchProfileInfo(this.props.userInfo.wiaas_id_user));
|
||||
this.props.dispatch(fetchProfileInfo());
|
||||
this.props.dispatch(fetchCountries());
|
||||
}
|
||||
|
||||
@@ -191,7 +192,7 @@ class CartCustomerDetailsContainer extends Component {
|
||||
(profileInfo && !isProfileLoading) &&
|
||||
<ProfileAddressesContainer
|
||||
params={{location: 'cart', handleDeliveryChange: this.handleDeliveryChange, idSelectedDeliveryAddress: this.state.delivery.id}}
|
||||
idUser={this.props.userInfo.wiaas_id_user}/>
|
||||
idUser={0}/>
|
||||
}
|
||||
</Form>
|
||||
</div>
|
||||
@@ -205,7 +206,7 @@ class CartCustomerDetailsContainer extends Component {
|
||||
<BillingAddressesContainer
|
||||
idCompany={profileInfo.idCompany}
|
||||
params={{location: 'cart', handleBillingChange: this.handleBillingChange, idSelectedBillingAddress: this.state.billing.id}}
|
||||
idUser={this.props.userInfo.wiaas_id_user}/>
|
||||
idUser={0}/>
|
||||
}
|
||||
</Form>
|
||||
</div>
|
||||
|
||||
@@ -4,17 +4,11 @@ import {cartTexts} from '../../../constants/cartConstants';
|
||||
class CartIcon extends Component {
|
||||
render() {
|
||||
let {cartCount} = this.props;
|
||||
cartCount = parseInt(cartCount, 10);
|
||||
cartCount = parseInt(cartCount, 10) || 0;
|
||||
|
||||
return (
|
||||
<span id="cart-count" className="items-cart-count">
|
||||
{ cartCount === 0
|
||||
? <span>{cartTexts.labels.EMPTY_CART_ICON}</span>
|
||||
: cartCount === 1
|
||||
? <span>1 item in cart</span>
|
||||
: <span>{cartCount} {cartTexts.labels.ITEMS_IN_CART_ICON}</span>
|
||||
}
|
||||
|
||||
{cartCount}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -14,7 +14,7 @@ class CartItem extends Component {
|
||||
this.state = {
|
||||
tooltipOpen: false,
|
||||
itemQuantity: 1,
|
||||
idCart: 0
|
||||
key: 0
|
||||
};
|
||||
|
||||
this.toggleTooltip = this.toggleTooltip.bind(this);
|
||||
@@ -58,11 +58,11 @@ class CartItem extends Component {
|
||||
}
|
||||
|
||||
removeItemFromCart() {
|
||||
this.props.dispatch(removeCartItem(this.state.idCart));
|
||||
this.props.dispatch(removeCartItem(this.state.key));
|
||||
}
|
||||
|
||||
setDialogParams(cartItem, dialogContent) {
|
||||
this.setState({idCart: cartItem.idCart});
|
||||
this.setState({key: cartItem.key});
|
||||
this.props.dispatch(setDialogOpenFlag(true));
|
||||
dialogContent.bodyVariable = cartItem.packageName;
|
||||
this.props.dispatch(setDialogContent(dialogContent));
|
||||
@@ -144,91 +144,98 @@ class CartItem extends Component {
|
||||
const cartItemNo = this.props.cartItemNo ? this.props.cartItemNo + 1 : 1;
|
||||
|
||||
return (
|
||||
<div id={"item-row-in-cart-" + cartItem.idCart} className="cart-show-items">
|
||||
<Row className="cart-item-details">
|
||||
<Col id={"item-package-name-" + cartItem.idCart}
|
||||
xl="8" lg="8" md="7" sm="12" xs="12"
|
||||
className="item-name">
|
||||
{cartItemNo}. {cartItem.packageName}
|
||||
<PackageBids idSelectedBid={cartItem.idSelectedBid} idCart={cartItem.idCart} bids={cartItem.bids}/>
|
||||
</Col>
|
||||
<Col xl="3" lg="3" md="3" sm="9" xs="9" id={"item-quantity-" + cartItem.idCart}>
|
||||
{ isFormDisabled
|
||||
? cartItem.quantity === 1
|
||||
? cartItem.quantity + ' pc'
|
||||
: cartItem.quantity + ' pcs'
|
||||
: <Input className="quantity-field"
|
||||
value={this.state.itemQuantity}
|
||||
type="number"
|
||||
step="1"
|
||||
onChange={e => this.updateQuantity(cartItem, e.target.value)}
|
||||
onBlur={e => this.resetQuantity(cartItem, e.target.value)}
|
||||
/>
|
||||
}
|
||||
</Col>
|
||||
<Col id={"item-remove-btn-" + cartItem.idCart} xl="1" lg="1" md="1" sm="1" xs="1">
|
||||
<i id={'remove-item-' + cartItem.idCart + '-' + cartItem.idPackage}
|
||||
className="fa fa-times remove-item"
|
||||
aria-hidden="true"
|
||||
onClick={() => this.setDialogParams(cartItem, dialogContent) }></i>
|
||||
<Tooltip target={'remove-item-' + cartItem.idCart + '-' + cartItem.idPackage}
|
||||
placement="bottom"
|
||||
isOpen={this.state.tooltipOpen}
|
||||
toggle={this.toggleTooltip}>
|
||||
{cartTexts.labels.REMOVE_FROM_CART}
|
||||
</Tooltip>
|
||||
</Col>
|
||||
</Row>
|
||||
{ (!cartItem.areAdditionalAvailable || !cartItem.areOptionsAvailable || cartItem.status === 'not-available') &&
|
||||
<Row id={"item-row-in-cart-" + cartItem.key} className="cart-show-items">
|
||||
<Col className="">
|
||||
<Row className="cart-item-details justify-content-between">
|
||||
<Col id={"item-package-name-" + cartItem.key}
|
||||
xl="8" lg="8" md="7" sm="12"
|
||||
className="item-name">
|
||||
{cartItem.packageName}
|
||||
<PackageBids idSelectedBid={cartItem.idSelectedBid} key={cartItem.key} bids={cartItem.bids}/>
|
||||
</Col>
|
||||
<Col xl="4" lg="4" md="5" sm="12">
|
||||
<Row className="flex-nowrap justify-content-end">
|
||||
<Col
|
||||
id={"item-quantity-" + cartItem.key}
|
||||
className="item-quantity col-auto"
|
||||
>
|
||||
{ isFormDisabled
|
||||
? cartItem.quantity === 1
|
||||
? cartItem.quantity + ' pc'
|
||||
: cartItem.quantity + ' pcs'
|
||||
: <Input className="quantity-field"
|
||||
value={this.state.itemQuantity}
|
||||
type="number"
|
||||
step="1"
|
||||
onChange={e => this.updateQuantity(cartItem, e.target.value)}
|
||||
onBlur={e => this.resetQuantity(cartItem, e.target.value)}
|
||||
/>
|
||||
}
|
||||
</Col>
|
||||
{ !isFormDisabled && <div className="wiaas-divider"></div> }
|
||||
{
|
||||
!isFormDisabled && (<Col className="d-flex align-items-center col-auto">
|
||||
<i id={'remove-item-' + cartItem.key + '-' + cartItem.idPackage}
|
||||
className="fa fa-trash-o remove-item"
|
||||
aria-hidden="true"
|
||||
onClick={() => this.setDialogParams(cartItem, dialogContent) }></i>
|
||||
<Tooltip target={'remove-item-' + cartItem.key + '-' + cartItem.idPackage}
|
||||
placement="bottom"
|
||||
isOpen={this.state.tooltipOpen}
|
||||
toggle={this.toggleTooltip}>
|
||||
{cartTexts.labels.REMOVE_FROM_CART}
|
||||
</Tooltip>
|
||||
</Col>)
|
||||
}
|
||||
</Row>
|
||||
</Col>
|
||||
</Row>
|
||||
{ (!cartItem.areAdditionalAvailable || !cartItem.areOptionsAvailable || cartItem.status === 'not-available') &&
|
||||
<Row className="cart-item-small-details">
|
||||
<Col id={"item-warning-sign-remove-package-name-" + cartItem.idPackage}
|
||||
xl="12" lg="12" md="12" sm="12" xs="12"
|
||||
className="not-available">
|
||||
xl="12" lg="12" md="12" sm="12" xs="12"
|
||||
className="not-available">
|
||||
{cartTexts.labels.PACKAGE_UNAVAILABLE}
|
||||
</Col>
|
||||
</Row>
|
||||
}
|
||||
{cartItem.options.length > 0 &&
|
||||
}
|
||||
{cartItem.options.length > 0 &&
|
||||
cartItem.options.map((packageOption) =>
|
||||
<Row className="cart-item-small-details" key={"package-option-" + cartItem.idCart + "-" + packageOption.idOptionPackage}>
|
||||
<Row className="cart-item-small-details" key={"package-option-" + cartItem.key + "-" + packageOption.idOptionPackage}>
|
||||
<Col lg={{offset: 1, size: 4}} xs={{offset: 1, size: 4}}>
|
||||
{packageOption.groupName}:
|
||||
</Col>
|
||||
<Col lg="7" xs="7" id={"item-option-" + cartItem.idCart + "-" + packageOption.idOptionPackage}>
|
||||
<Col lg="7" xs="7" id={"item-option-" + cartItem.key + "-" + packageOption.idOptionPackage}>
|
||||
{packageOption.packageName}
|
||||
</Col>
|
||||
</Row>
|
||||
)
|
||||
}
|
||||
{cartItem.additionalPackages.length > 0 &&
|
||||
}
|
||||
{cartItem.additionalPackages.length > 0 &&
|
||||
cartItem.additionalPackages.map((additionalPackage) =>
|
||||
<Row className="cart-item-small-details" key={"additional-package-" + cartItem.idCart + "-" + additionalPackage.idAdditionalPackage}>
|
||||
<Row className="cart-item-small-details" key={"additional-package-" + cartItem.key + "-" + additionalPackage.idAdditionalPackage}>
|
||||
<Col lg={{offset: 1, size: 4}} xs={{offset:1, size: 4}}>
|
||||
{cartTexts.labels.ADDITIOONAL_PACKAGE}:
|
||||
</Col>
|
||||
<Col lg="7" xs="7" id={"item-additional-" + cartItem.idCart + "-" + additionalPackage.idAdditionalPackage}>
|
||||
<Col lg="7" xs="7" id={"item-additional-" + cartItem.key + "-" + additionalPackage.idAdditionalPackage}>
|
||||
{additionalPackage.packageName}
|
||||
</Col>
|
||||
</Row>
|
||||
)
|
||||
}
|
||||
<Row className="cart-item-small-details">
|
||||
<Col lg={{offset: 1, size: 4}} xs={{offset:1, size: 4}}>Payment type:</Col>
|
||||
<Col lg="7" xs="7" id={"item-payment-type-" + cartItem.idCart}>
|
||||
{cartItem.payType}
|
||||
</Col>
|
||||
</Row>
|
||||
<Row className="cart-item-small-details">
|
||||
<Col lg={{offset: 1, size: 4}} xs={{offset:1, size: 4}}>Price:</Col>
|
||||
<Col lg="7" xs="7" id={"item-price-" + cartItem.idCart}>
|
||||
<table className="price-table">
|
||||
<thead>
|
||||
}
|
||||
<Row className="cart-item-small-details justify-content-between item-price">
|
||||
<Col className="d-flex align-items-center">
|
||||
<span className="item-payment-type">{cartItem.payType}:</span>
|
||||
</Col>
|
||||
<Col className="d-flex col-auto">
|
||||
<table className="price-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{cartTexts.labels.ON_DELIVERY}</th>
|
||||
<th>{cartTexts.labels.MONTHLY}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
{
|
||||
@@ -260,11 +267,12 @@ class CartItem extends Component {
|
||||
}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</tbody>
|
||||
</table>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,6 +2,10 @@
|
||||
|
||||
#cart-count {
|
||||
vertical-align: middle;
|
||||
color: $cart-count-color;
|
||||
font-size: 1.5rem;
|
||||
border-radius: 1rem;
|
||||
font-family: arial,sans-serif;
|
||||
}
|
||||
|
||||
#cart-container {
|
||||
@@ -12,7 +16,7 @@
|
||||
border-radius: $box-radius;
|
||||
|
||||
.cart-show-items {
|
||||
padding-top: 1rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.quantity-field {
|
||||
@@ -22,7 +26,7 @@
|
||||
}
|
||||
|
||||
.remove-item {
|
||||
color: $redColor;
|
||||
color: #111;
|
||||
cursor: pointer;
|
||||
font-size: 1.3rem;
|
||||
padding-top: 0.375rem;
|
||||
@@ -42,6 +46,30 @@
|
||||
font-weight: $font-weight;
|
||||
}
|
||||
|
||||
.cart-item-details {
|
||||
.item-name {
|
||||
}
|
||||
.item-quantity {
|
||||
|
||||
}
|
||||
|
||||
.wiaas-divider {
|
||||
height: 40px;
|
||||
margin: 0 20px;
|
||||
min-width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.item-payment-type {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.item-price {
|
||||
background-color: $hoverColor;
|
||||
margin-top: 1rem;
|
||||
border-radius: $box-radius;
|
||||
}
|
||||
|
||||
.cart-total-price {
|
||||
padding: 1rem 0;
|
||||
font-size: $font-size-big;
|
||||
@@ -163,6 +191,11 @@
|
||||
.cart-address-box {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
#order-projects .actions-button, .add-address-btn, .address-icons {
|
||||
opacity: 0.3;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
#cart-customer-main-information-container {
|
||||
|
||||
Reference in New Issue
Block a user