modules/payments-component/src/payments-container.component.ts
Component that coordinate states of payment expirience (Displays different payment methods,
  shows and hide delivery and payment forms, process payments)
| selector | payments-container | 
            
| styleUrls | payments-container.component.scss | 
            
| templateUrl | payments-container.component.html | 
            
                            constructor(http: any, basketService: any, zone: any, dal: any, authService: any)
                         | 
                    
| paymentsChanged | 
    paymentsChanged(paymentForm: any)
                         | 
                    
| 
                                 Runs when payment form changed 
                                        Parameters :
                                         
                                
 
                                    Returns:      
                                    void
    
                                 | 
                    
| deliveriesChanged | 
    deliveriesChanged(deliveryForm: any)
                         | 
                    
| 
                                 Runs when delivery form changed 
                                        Parameters :
                                         
                                
 
                                    Returns:      
                                    void
    
                                 | 
                    
| setDeliveryCompany | 
    setDeliveryCompany(deliveryCompany: any)
                         | 
                    
| 
                                 Set delivery company name 
                                        Parameters :
                                         
                                
 
                                    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 :
                                         
                                
 
                                    Returns:      
                                    void
    
                                 | 
                    
| backToPayments | 
    backToPayments()
                         | 
                    
| 
                                 Reset payment page 
                                    Returns:      
                        void
    
                                 | 
                    
| Public deliveryCompany | 
                            deliveryCompany:      | 
                    
| 
                             Delivery company name  | 
                    
| Public deliveryForm | 
                            deliveryForm:      | 
                    
| 
                             Delivery form FormGroup  | 
                    
| Public deliverySaved | 
                            deliverySaved:      | 
                    
                                Default value: false
                             | 
                        
| 
                             Is delivery saved  | 
                    
| Public failedPayment | 
                            failedPayment:      | 
                    
                                Default value: false
                             | 
                        
| 
                             Is payment failed  | 
                    
| Public isLoading | 
                            isLoading:      | 
                    
                                Default value: true
                             | 
                        
| 
                             Flag for PaymentsSpinnerComponent  | 
                    
| Public orderForm | 
                            orderForm:      | 
                    
| 
                             Order form with currency, products and price  | 
                    
| Public paymentForm | 
                            paymentForm:      | 
                    
| 
                             Payment form FormGroup`  | 
                    
| Public paymentSaved | 
                            paymentSaved:      | 
                    
                                Default value: false
                             | 
                        
| 
                             Is payment saved  | 
                    
| paymentsComponent | 
                            paymentsComponent:      | 
                    
| Public paymentStatus | 
                            paymentStatus:      | 
                    
| 
                             Payment status after payment  | 
                    
| Public showDeliveryForm | 
                            showDeliveryForm:      | 
                    
                                Default value: false
                             | 
                        
| 
                             Show delivery form  | 
                    
| Public showFinish | 
                            showFinish:      | 
                    
                                Default value: false
                             | 
                        
| 
                             Show finsih pay button  | 
                    
| Public showPayments | 
                            showPayments:      | 
                    
                                Default value: true
                             | 
                        
| 
                             Show payment form  | 
                    
| Public successPayment | 
                            successPayment:      | 
                    
                                Default value: false
                             | 
                        
| 
                             Is payment success  | 
                    
import { PaymentsService } from './payments.service';
import { AuthService } from '@nodeart/auth-service';
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',
        userId: ''
    };
    /**
     * 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;
    /**
     * Delivery company name
     */
    public deliveryCompany: string = '';
    /**
     * {@link PaymentsComponent}
     */
    @ViewChild(PaymentsComponent) paymentsComponent: PaymentsComponent;
    constructor(
        protected http: Http,
        protected basketService: BasketService,
        protected zone: NgZone,
        protected dal: DbAbstractionLayer,
        protected authService: AuthService) {
    }
    ngOnInit() {
        this.zone.run(() => {
            this.orderForm = {
                products: this.basketService.productsSnapshot,
                currency: 'USD',
                totalPrice: '' + this.basketService.totalPrice + '.00',
                userId: this.basketService.userId
            };
        });
        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',
                    userId: this.basketService.userId
                };
            });
        });
     }
     /**
      * 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;
        }
    }
    /**
     * Set delivery company name
     * @param deliveryCompany Delivery company name
     */
    setDeliveryCompany(deliveryCompany) {
        this.deliveryCompany = deliveryCompany;
    }
    /**
     * 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
        };
        if(this.paymentForm.payMethod){
            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).subscribe( 
                    res => {
                        this.dal.getOrderSubject().next(data);
                        this.failedPayment = data.failedPayment;
                        this.successPayment = data.successPayment;
                    },
                    e => {
                        this.successPayment = false;
                        this.failedPayment = true;
                });
            });
        } else {
            this.saveOrder(paymentData).subscribe( 
                res => {
                    console.log(this.dal.getOrderSubject());
                    this.dal.getOrderSubject().next(paymentData);
                    this.failedPayment = false;
                    this.successPayment = true;
                },
                e => {
                    this.successPayment = false;
                    this.failedPayment = true;
            });
        }
    }
    
    /**
     * Save order to database
     * @param paymentData all payment data
     */
    saveOrder(paymentData){
        delete paymentData.paymentForm.payMethod;
        paymentData.date = Date.now();
        return this.dal.saveOrder(paymentData);
    }
    /**
     * Reset payment page
     */
    backToPayments(){
        this.showPayments = true;
        this.showDeliveryForm = false;
        this.showFinish = false;
        this.successPayment = false;
        this.failedPayment = false;
        this.deliveryForm = null;
        this.paymentForm = null;
        if(this.paymentsComponent){
            this.paymentsComponent.selectedMethod = '';
            this.paymentsComponent.showPaymentsList = true;
        }
    }
}