File
Implements
Metadata
selector |
app-delivery-options |
styleUrls |
delivery-options.component.scss |
templateUrl |
./delivery-options.component.html |
Methods
ngOnInit
|
ngOnInit()
|
|
Returns: void
|
Private setOrder
|
setOrder()
|
|
Returns: void
|
Private setShippingRates
|
setShippingRates()
|
|
Returns: void
|
selectedShippingRate
|
selectedShippingRate: any
|
|
shippingRates
|
shippingRates: any[]
|
|
totalCartItems$
|
totalCartItems$: Observable<number>
|
|
totalCartValue$
|
totalCartValue$: Observable<number>
|
|
import { AppState } from './../../../interfaces';
import { Store } from '@ngrx/store';
import { getTotalCartValue, getTotalCartItems } from './../../reducers/selectors';
import { Observable } from 'rxjs/Observable';
import { Order } from './../../../core/models/order';
import { CheckoutService } from './../../../core/services/checkout.service';
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-delivery-options',
templateUrl: './delivery-options.component.html',
styleUrls: ['./delivery-options.component.scss']
})
export class DeliveryOptionsComponent implements OnInit {
@Input() orderNumber;
order;
selectedShippingRate;
shippingRates = [];
totalCartValue$: Observable<number>;
totalCartItems$: Observable<number>;
constructor(private checkoutService: CheckoutService, private store: Store<AppState>) {
this.totalCartValue$ = this.store.select(getTotalCartValue);
this.totalCartItems$ = this.store.select(getTotalCartItems);
}
ngOnInit() {
// this.setOrder();
}
private setOrder() {
this.checkoutService.getOrder(this.orderNumber)
.subscribe((order) => {
this.order = order;
this.setShippingRates();
});
}
private setShippingRates() {
this.shippingRates = this.order.shipments[0].shipping_rates;
this.selectedShippingRate = this.order.shipments[0].selected_shipping_rate;
}
}
<div class="del-lbl">
DELIVERY SPEED
</div>
<div class="del-options">
<div class="option">
<div class="option-name">
Standard delivery
</div>
<div class="option-rate">
Free delivery
</div>
</div>
</div>
<div class="mini-bag-summary">
<div class="items">{{totalCartItems$ | async}} ITEMS</div>
<div class="order-total">
<span>Order Total</span>
<span class="value">${{totalCartValue$ | async | number:'1.2-2'}}</span>
</div>
<div class="shipping">
<span>Delivery</span>
<span class="shipping-fee c-green">FREE</span>
</div>
</div>
<div class="pay-lbl-total">
<span class="pay-lbl">Total Payable</span>
<span class="pay-total">${{totalCartValue$ | async | number:'1.2-2'}}</span>
</div>
Legend
Html element with directive