File
Implements
Metadata
selector |
app-payment-modes-list |
styleUrls |
payment-modes-list.component.scss |
templateUrl |
./payment-modes-list.component.html |
paymentAmount
|
Type: number
|
|
Methods
ngOnInit
|
ngOnInit()
|
|
Returns: void
|
selectedPaymentMode
|
selectedPaymentMode(mode: any)
|
|
Returns: void
|
Private fetchAllPayments
|
fetchAllPayments()
|
|
Returns: void
|
makePayment
|
makePayment()
|
|
Returns: void
|
Private redirectToNewPage
|
redirectToNewPage()
|
|
Returns: void
|
isAuthenticated
|
isAuthenticated: boolean
|
|
import { getAuthStatus } from './../../../auth/reducers/selectors';
import { CheckoutActions } from './../../actions/checkout.actions';
import { AppState } from './../../../interfaces';
import { Store } from '@ngrx/store';
import { Router } from '@angular/router';
import { PaymentMode } from './../../../core/models/payment_mode';
import { PaymentService } from './../services/payment.service';
import { CheckoutService } from './../../../core/services/checkout.service';
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-payment-modes-list',
templateUrl: './payment-modes-list.component.html',
styleUrls: ['./payment-modes-list.component.scss']
})
export class PaymentModesListComponent implements OnInit {
@Input() paymentAmount: number;
@Input() orderNumber: number;
paymentModes: PaymentMode[];
selectedMode: PaymentMode = new PaymentMode;
isAuthenticated: boolean;
constructor(private checkoutService: CheckoutService,
private paymentService: PaymentService,
private router: Router,
private store: Store<AppState>,
private checkoutActions: CheckoutActions) {
this.store.select(getAuthStatus).subscribe((auth) => {
this.isAuthenticated = auth;
});
}
ngOnInit() {
this.fetchAllPayments();
}
selectedPaymentMode(mode) {
this.selectedMode = mode;
}
private fetchAllPayments() {
this.checkoutService.availablePaymentMethods()
.subscribe((payment) => {
this.paymentModes = payment.payment_methods;
this.selectedMode = this.paymentService.setCODAsSelectedMode(this.paymentModes);
});
}
makePayment() {
const paymentModeId = this.selectedMode.id;
this.checkoutService.createNewPayment(paymentModeId, this.paymentAmount)
.do(() => {
this.store.dispatch(this.checkoutActions.orderCompleteSuccess());
this.redirectToNewPage();
this.checkoutService.createEmptyOrder()
.subscribe();
})
.subscribe();
}
private redirectToNewPage() {
if (this.isAuthenticated) {
this.router.navigate(['/user', 'orders', 'detail', this.orderNumber]);
} else {
this.router.navigate(['/']);
}
}
}
<div class="pay-modes">
<div class="mode" [ngClass]="{'selected': mode.id == selectedMode.id, 'coming-soon': mode.id != selectedMode.id}" *ngFor="let mode of paymentModes">
{{mode.name}}
</div>
</div>
<div class="selected-mode" [ngSwitch]="selectedMode.name">
<ng-template [ngSwitchCase]="'Credit Card'">
<app-credit-card></app-credit-card>
</ng-template>
<ng-template [ngSwitchCase]="'Check'" ngSwitchDefault>
<app-cash-on-delivery (payOnDelivery)="makePayment()"></app-cash-on-delivery>
</ng-template>
</div>
Legend
Html element with directive