### File

`modules/payments-component/src/payments-container.component.ts`

### Description

Component that coordinate states of payment expirience (Displays different payment methods,
shows and hide delivery and payment forms, process payments)

### Metadata

selector | `payments-container`
styleUrls | `payments-container.component.scss`
templateUrl | `payments-container.component.html`

### Constructor

`constructor(http: any, basketService: any, zone: any, dal: any)`

### Methods

paymentsChanged
`paymentsChanged(paymentForm: any)`

Runs when payment form changed

Parameters :

- paymentForm

Returns: `void`

deliveriesChanged
`deliveriesChanged(deliveryForm: any)`

Runs when delivery form changed

Parameters :

- paymentForm

Returns: `void`

finish
`finish()`
Process payment after saving payment information and (optional) delivery form. Returns: `void`

saveOrder
`saveOrder(paymentData: any)`

Save order to database

Parameters :

- paymentData

  all payment data

Returns: `void`

backToPayments
`backToPayments()`
Reset payment page Returns: `void`

### Properties

Public deliveryForm
`deliveryForm: `any` </bcode>`
Delivery form FormGroup

Public deliverySaved
`deliverySaved: `boolean` </bcode>`
Default value: `false`
Is delivery saved

Public failedPayment
`failedPayment: `boolean` </bcode>`
Default value: `false`
Is payment failed

Public isLoading
`isLoading: `boolean` </bcode>`
Default value: `true`
Flag for PaymentsSpinnerComponent

Public orderForm
`orderForm: `{ products: any[]; currency: string; totalPrice: string; }` </bcode>`
Order form with currency, products and price

Public paymentForm
`paymentForm: `any` </bcode>`
Payment form FormGroup`

Public paymentSaved
`paymentSaved: `boolean` </bcode>`
Default value: `false`
Is payment saved

paymentsComponent
`paymentsComponent: `PaymentsComponent` </bcode>`
PaymentsComponent

Public paymentStatus
`paymentStatus: `string` </bcode>`
Payment status after payment

Public showDeliveryForm
`showDeliveryForm: `boolean` </bcode>`
Default value: `false`
Show delivery form

Public showFinish
`showFinish: `boolean` </bcode>`
Default value: `false`
Show finsih pay button

Public showPayments
`showPayments: `boolean` </bcode>`
Default value: `true`
Show payment form

Public successPayment
`successPayment: `boolean` </bcode>`
Default value: `false`
Is payment success

    import { BasketService } from '@nodeart/basketservice';
    import { Http, Headers, RequestOptions } from '@angular/http';
    import { PaymentsComponent } from './paymets/payments.component';
    import { Component, OnInit, ViewChild, NgZone} from '@angular/core';
    import {DbAbstractionLayer} from "@nodeart/dal";

    /**
     * Component that coordinate states of payment expirience (Displays different payment methods,
     *  shows and hide delivery and payment forms, process payments)
     */
    @Component({
        selector: 'payments-container',
        templateUrl: './payments-container.component.html',
        styleUrls: ['payments-container.component.scss']
    })
    export class PaymentsContainerComponent implements OnInit {
        /**
         * Is payment saved
         */
        public paymentSaved = false;

        /**
         * Is delivery saved
         */
        public deliverySaved = false;

        /**
         * Show delivery form
         */
        public showDeliveryForm = false;

        /**
         * Show payment form
         */
        public showPayments = true;

        /**
         * Payment form FormGroup`
         */
        public paymentForm;

        /**
         * Delivery form FormGroup
         */
        public deliveryForm;

        /**
         * Order form with currency, products and price
         */
        public orderForm = {
            products: [],
            currency: 'USD',
            totalPrice: '0.00'
        };

        /**
         * Payment status after payment
         */
        public paymentStatus = '';

        /**
         * Show finsih pay button
         */
        public showFinish = false;

        /**
         * Is payment success
         */
        public successPayment = false;

        /**
         * Is payment failed
         */
        public failedPayment = false;

        /**
         * Flag for {@link PaymentsSpinnerComponent}
         */
        public isLoading = true;

        /**
         * {@link PaymentsComponent}
         */
        @ViewChild(PaymentsComponent) paymentsComponent: PaymentsComponent;
        constructor(
            private http: Http,
            private basketService: BasketService,
            private zone: NgZone,
            private dal: DbAbstractionLayer) {
        }
        ngOnInit() {
            this.zone.run(() => {
                this.orderForm = {
                    products: this.basketService.productsSnapshot,
                    currency: 'USD',
                    totalPrice: '' + this.basketService.totalPrice + '.00'
                };
            });
            this.basketService.products.subscribe(products => {
                let totalPrice;
                console.log(this.basketService.totalPrice);
                if(this.basketService.totalPrice > 0) {
                    totalPrice = this.basketService.totalPrice;
                } else {
                    for(let i = 0; i < products.length; i++){
                        totalPrice += +products[i].product.price;
                    }
                }
                this.zone.run(() => {
                    this.orderForm = {
                        products: products,
                        currency: 'USD',
                        totalPrice: '' + totalPrice + '.00'
                    };
                });
            });
         }

         /**
          * Runs when payment form changed
          * @param paymentForm
          */
        paymentsChanged(paymentForm) {
            // this.showPayments = false;
            this.paymentSaved = true;
            this.paymentForm = paymentForm;
            if(!!paymentForm.deliveryRequired && paymentForm.deliveryRequired === true){
                this.showDeliveryForm = true;
            } else {
                this.showFinish = true;
            }
            if(!!this.paymentForm && !!this.deliveryForm){
                this.showFinish = true;
            }
        }

        /**
          * Runs when delivery form changed
          * @param paymentForm
          */
        deliveriesChanged(deliveryForm) {
            this.deliverySaved = true;
            this.deliveryForm = deliveryForm;
            if(!!this.paymentForm && !!this.deliveryForm){
                this.showFinish = true;
            }
        }

        /**
         * Process payment after saving payment information and (optional) delivery form.
         */
        finish() {
            this.isLoading = true;
            let paymentData = {
                orderForm: this.orderForm,
                paymentForm: this.paymentForm,
                deliveryForm: this.deliveryForm
            }
            this.paymentForm.payMethod(this.dal, paymentData).subscribe(data => {
                console.log(data);
                if(data.status) {
                  this.zone.run(() => {
                    this.paymentStatus = data.status;
                  });
                  this.isLoading = false;
                }
                this.saveOrder(data).then( res => {
                    this.failedPayment = data.failedPayment;
                    this.successPayment = data.successPayment;
                } ).catch(e => {
                    this.successPayment = false;
                    this.failedPayment = true;
                });
            });
        }

        /**
         * Save order to database
         * @param paymentData all payment data
         */
        saveOrder(paymentData){
            delete paymentData.paymentForm.payMethod;
            return this.dal.saveOrder(paymentData);
        }

        /**
         * Reset payment page
         */
        backToPayments(){
            this.showPayments = true;
            this.showDeliveryForm = false;
            this.showFinish = false;
            this.deliveryForm = null;
            this.paymentForm = null;
            if(this.paymentsComponent){
                this.paymentsComponent.selectedMethod = '';
                this.paymentsComponent.showPaymentsList = true;
            }
        }
    }

# results matching ""

# No results matching ""