File
Implements
Metadata
selector |
app-order-total-summary |
styleUrls |
order-total-summary.component.scss |
templateUrl |
./order-total-summary.component.html |
totalCartValue
|
Type: number
|
|
Methods
ngOnInit
|
ngOnInit()
|
|
Returns: void
|
placeOrder
|
placeOrder()
|
|
Returns: void
|
ngOnDestroy
|
ngOnDestroy()
|
|
Returns: void
|
orderState
|
orderState: string
|
|
stateSub$
|
stateSub$: Subscription
|
|
import { getOrderState } from './../../../reducers/selectors';
import { Router } from '@angular/router';
import { CheckoutService } from './../../../../core/services/checkout.service';
import { CheckoutActions } from './../../../actions/checkout.actions';
import { AppState } from './../../../../interfaces';
import { Store } from '@ngrx/store';
import { Subscription } from 'rxjs/Subscription';
import { Component, OnInit, Input, OnDestroy } from '@angular/core';
@Component({
selector: 'app-order-total-summary',
templateUrl: './order-total-summary.component.html',
styleUrls: ['./order-total-summary.component.scss']
})
export class OrderTotalSummaryComponent implements OnInit, OnDestroy {
stateSub$: Subscription;
orderState: string;
@Input() totalCartValue: number;
constructor(private store: Store<AppState>,
private actions: CheckoutActions,
private checkoutService: CheckoutService,
private router: Router) {
this.stateSub$ = this.store.select(getOrderState)
.subscribe(state => this.orderState = state);
}
ngOnInit() {
}
placeOrder() {
if (this.orderState === 'cart') {
this.checkoutService.changeOrderState()
.do(() => {
this.router.navigate(['/checkout', 'address']);
})
.subscribe();
} else {
this.router.navigate(['/checkout', 'address']);
}
}
ngOnDestroy() {
this.stateSub$.unsubscribe();
}
}
<div class="order-total-summary">
<div class="coupon-section">
<span class="text-label">Coupons</span>
<a class="apply-coupon coming-soon"></a>
</div>
<div class="gift-wrap-order">
<span class="gift-wrap-checkbox coming-soon"></span>
<a href="" class="gift-card-lbl">Gift wrap for</a>
<span class="gift-card-price">$1</span>
<span class="not-cod">Cash/Card On Delivery not available</span>
</div>
<div class="order-summary-span">
<div class="bag-total">
<span>Bag Total</span>
<span class="value">${{totalCartValue | number:'1.2-2'}}</span>
</div>
<div class="coupon">
<span>Coupon Discount</span>
<span class="apply-coupon c-blue coming-soon">Apply Coupon</span>
</div>
<div class="shipping">
<span>Delivery</span>
<span class="shipping-fee c-green">FREE</span>
</div>
</div>
<div class="order-total footer">
<div class="place-order">
<button (click)="placeOrder()" class="order-btn">PLACE ORDER</button>
</div>
<div class="total-amount">
<span class="total-rupees">${{totalCartValue | number:'1.2-2'}}</span>
</div>
</div>
</div>
Legend
Html element with directive