### 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` |
Defined in src/app/checkout/address/delivery-options/delivery-options.component.ts:16

### Constructor

`constructor(checkoutService: CheckoutService, store: Store)`
Defined in src/app/checkout/address/delivery-options/delivery-options.component.ts:21

### Methods

ngOnInit
`ngOnInit()`
Defined in src/app/checkout/address/delivery-options/delivery-options.component.ts:28
Returns: `void`

Private setOrder
`setOrder()`
Defined in src/app/checkout/address/delivery-options/delivery-options.component.ts:32
Returns: `void`

Private setShippingRates
`setShippingRates()`
Defined in src/app/checkout/address/delivery-options/delivery-options.component.ts:40
Returns: `void`

### Properties

order
`order: `any``
Defined in src/app/checkout/address/delivery-options/delivery-options.component.ts:17

selectedShippingRate
`selectedShippingRate: `any``
Defined in src/app/checkout/address/delivery-options/delivery-options.component.ts:18

shippingRates
`shippingRates: `any[]``
Defined in src/app/checkout/address/delivery-options/delivery-options.component.ts:19

totalCartItems$
`totalCartItems$: `Observable<number>``
Defined in src/app/checkout/address/delivery-options/delivery-options.component.ts:21

totalCartValue$
`totalCartValue$: `Observable<number>``
Defined in src/app/checkout/address/delivery-options/delivery-options.component.ts:20

    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 ""