File

src/app/checkout/payment/payment.component.ts

Implements

OnInit

Metadata

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

Constructor

constructor(store: Store)

Methods

ngOnInit
ngOnInit()
Returns: void

Properties

address$
address$: Observable<Address>
orderNumber$
orderNumber$: Observable<number>
totalCartItems$
totalCartItems$: Observable<number>
totalCartValue$
totalCartValue$: Observable<number>
import { Address } from './../../core/models/address';
import { CheckoutService } from './../../core/services/checkout.service';
import { CheckoutActions } from './../actions/checkout.actions';
import { getTotalCartValue, getOrderNumber, getTotalCartItems, getShipAddress } from './../reducers/selectors';
import { AppState } from './../../interfaces';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs/Observable';
import { Component, OnInit, OnDestroy } from '@angular/core';

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

  totalCartValue$: Observable<number>;
  totalCartItems$: Observable<number>;
  address$: Observable<Address>;
  orderNumber$: Observable<number>;

  constructor(private store: Store<AppState>) {
      this.totalCartValue$ = this.store.select(getTotalCartValue);
      this.totalCartItems$ = this.store.select(getTotalCartItems);
      this.address$ = this.store.select(getShipAddress);
      this.orderNumber$ = this.store.select(getOrderNumber);
  }

  ngOnInit() {
  }

}
<div class="payment-section">
	<div class="left">
		<div class="payment-header">
			<span class="lbl">Choose Payment Mode</span>
			<span class="amt you-pay">
				<span class="amt">You Pay</span>
				<span class="you-pay">${{totalCartValue$ | async | number:'1.2-2'}}</span>
			</span>
		</div>
		<div class="pay-body">
			<app-payment-modes-list [orderNumber]="orderNumber$ | async" [paymentAmount]="totalCartValue$ | async"></app-payment-modes-list>
		</div>
	</div>
	<div class="right">
		<div class="mini-bag-summary">
			<div class="lbl">ORDER SUMMARY</div>
			<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>
		<div class="address-summary">
			<div class="address-lbl">DELIVER TO</div>
			<div class="name">{{(address$ | async).full_name}}</div>
			<div class="add-info">{{(address$ | async).address1}}</div>
			<div class="add-info">{{(address$ | async).address2}}</div>
			<div class="add-info">{{(address$ | async).city}} - {{(address$ | async).zipcode}}</div>
			<!--<div class="add-info">Maharashtra</div>-->
			<div class="add-info">Mobile: {{(address$ | async).phone}}</div>
		</div>
	</div>
</div>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""