File

src/app/checkout/address/address.component.ts

Implements

OnInit OnDestroy

Metadata

selector app-address
styleUrls address.component.scss
templateUrl ./address.component.html

Constructor

constructor(store: Store, checkoutService: CheckoutService, router: Router)

Methods

ngOnInit
ngOnInit()
Returns: void
checkoutToPayment
checkoutToPayment()
Returns: void
ngOnDestroy
ngOnDestroy()
Returns: void

Properties

orderNumber$
orderNumber$: Observable<number>
orderState
orderState: string
shipAddress$
shipAddress$: Observable<Address>
stateSub$
stateSub$: Subscription
import { Router } from '@angular/router';
import { CheckoutService } from './../../core/services/checkout.service';
import { getShipAddress, getOrderState, getOrderNumber } from './../reducers/selectors';
import { AppState } from './../../interfaces';
import { Store } from '@ngrx/store';
import { Address } from './../../core/models/address';
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'app-address',
  templateUrl: './address.component.html',
  styleUrls: ['./address.component.scss']
})
export class AddressComponent implements OnInit, OnDestroy {

  stateSub$: Subscription;
  orderState: string;
  orderNumber$: Observable<number>;
  shipAddress$: Observable<Address>;

  constructor(private store: Store<AppState>,
    private checkoutService: CheckoutService,
    private router: Router) {
      this.orderNumber$ = this.store.select(getOrderNumber);
      this.shipAddress$ = this.store.select(getShipAddress);
      this.stateSub$ = this.store.select(getOrderState)
        .subscribe(state => this.orderState = state);
  }

  ngOnInit() {
  }

  checkoutToPayment() {
    if (this.orderState === 'delivery' || this.orderState === 'address') {
      this.checkoutService.changeOrderState()
        .do(() => {
          this.router.navigate(['/checkout', 'payment']);
        })
        .subscribe();
    } else {
      this.router.navigate(['/checkout', 'payment']);
    }
  }

  ngOnDestroy() {
    if (this.orderState === 'delivery') {
      this.checkoutService.changeOrderState()
        .subscribe();
    }
    this.stateSub$.unsubscribe();
  }

}
<div class="address-section">
	<div *ngIf="(shipAddress$ | async)">
		<div class="left">
			<div class="edit-address">
				<span class="edit-label">
					Select Delivery Address
				</span>
			</div>
			<app-delivery-address [address]="(shipAddress$ | async)"></app-delivery-address>
		</div>
		<div class="right">
			<app-delivery-options [orderNumber]="orderNumber$ | async"></app-delivery-options>
			<button (click)="checkoutToPayment()" class="pay-btn">CONTINUE TO PAYMENT</button>
		</div>
	</div>
	<div *ngIf="!(shipAddress$ | async)">
		<div class="left">
			<div class="add-address">
				<span class="add-label">
					ADD NEW ADDRESS
				</span>
			</div>
			<app-add-address></app-add-address>
		</div>
	</div>
</div>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""