### 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`
Defined in src/app/checkout/payment/payment-modes-list/payment-modes-list.component.ts:19

`paymentAmount` | Type: `number`
Defined in src/app/checkout/payment/payment-modes-list/payment-modes-list.component.ts:18

### Constructor

`constructor(checkoutService: CheckoutService, paymentService: PaymentService, router: Router, store: Store, checkoutActions: CheckoutActions)`
Defined in src/app/checkout/payment/payment-modes-list/payment-modes-list.component.ts:22

### Methods

ngOnInit
`ngOnInit()`
Defined in src/app/checkout/payment/payment-modes-list/payment-modes-list.component.ts:34
Returns: `void`

selectedPaymentMode
`selectedPaymentMode(mode: any)`
Defined in src/app/checkout/payment/payment-modes-list/payment-modes-list.component.ts:38
Returns: `void`

Private fetchAllPayments
`fetchAllPayments()`
Defined in src/app/checkout/payment/payment-modes-list/payment-modes-list.component.ts:42
Returns: `void`

makePayment
`makePayment()`
Defined in src/app/checkout/payment/payment-modes-list/payment-modes-list.component.ts:50
Returns: `void`

Private redirectToNewPage
`redirectToNewPage()`
Defined in src/app/checkout/payment/payment-modes-list/payment-modes-list.component.ts:62
Returns: `void`

### Properties

isAuthenticated
`isAuthenticated: `boolean``
Defined in src/app/checkout/payment/payment-modes-list/payment-modes-list.component.ts:22

paymentModes
`paymentModes: `PaymentMode[]``
Defined in src/app/checkout/payment/payment-modes-list/payment-modes-list.component.ts:20

selectedMode
`selectedMode: `PaymentMode``
Defined in src/app/checkout/payment/payment-modes-list/payment-modes-list.component.ts:21

    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 ""