File

src/app/checkout/cart/components/order-total-summary/order-total-summary.component.ts

Implements

OnInit OnDestroy

Metadata

selector app-order-total-summary
styleUrls order-total-summary.component.scss
templateUrl ./order-total-summary.component.html

Inputs

totalCartValue

Type: number

Constructor

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

Methods

ngOnInit
ngOnInit()
Returns: void
placeOrder
placeOrder()
Returns: void
ngOnDestroy
ngOnDestroy()
Returns: void

Properties

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

results matching ""

    No results matching ""