File
Implements
Metadata
selector |
app-payment |
styleUrls |
payment.component.scss |
templateUrl |
./payment.component.html |
Constructor
constructor(store: Store)
|
|
Methods
ngOnInit
|
ngOnInit()
|
|
Returns: void
|
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 with directive