File

src/app/checkout/address/delivery-options/delivery-options.component.ts

Implements

OnInit

Metadata

selector app-delivery-options
styleUrls delivery-options.component.scss
templateUrl ./delivery-options.component.html

Inputs

orderNumber

Constructor

constructor(checkoutService: CheckoutService, store: Store)

Methods

ngOnInit
ngOnInit()
Returns: void
Private setOrder
setOrder()
Returns: void
Private setShippingRates
setShippingRates()
Returns: void

Properties

order
order: any
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
Component
Html element with directive

results matching ""

    No results matching ""