File

src/app/checkout/payment/payment-modes-list/payment-modes-list.component.ts

Implements

OnInit

Metadata

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

Inputs

orderNumber

Type: number

paymentAmount

Type: number

Constructor

constructor(checkoutService: CheckoutService, paymentService: PaymentService, router: Router, store: Store, checkoutActions: CheckoutActions)

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

Properties

isAuthenticated
isAuthenticated: boolean
paymentModes
paymentModes: PaymentMode[]
selectedMode
selectedMode: PaymentMode
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
Component
Html element with directive

results matching ""

    No results matching ""