var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { Component } from '@angular/core';
import Stepper from 'bs-stepper';
import { Router } from '@angular/router';
import { BehaviorSubject } from 'rxjs';
import { filter, take } from 'rxjs/operators';
import { CheckoutService } from '../../services/checkout/checkout.service';
import { ToastService } from '../../utils/toast.service';
import { CartService } from '../../services/cart.service';
import { ProductsService } from '../../services/products/products.service';
import { ComponentHelper } from '../../classes/component-helper';
var CheckoutEcComponent = /** @class */ (function (_super) {
    __extends(CheckoutEcComponent, _super);
    function CheckoutEcComponent(checkoutService, toastrService, router, cartService, productsService) {
        var _this = _super.call(this) || this;
        _this.checkoutService = checkoutService;
        _this.toastrService = toastrService;
        _this.router = router;
        _this.cartService = cartService;
        _this.productsService = productsService;
        _this.loadingSubject = new BehaviorSubject(true);
        _this.canCheckout = false;
        _this.require_login = false;
        _this.loading$ = _this.loadingSubject.asObservable();
        _this.initializeCheckout = function () {
            _this.canCheckout = true;
            var steps = [];
            steps.push({ name: 'address' });
            steps.push({ name: 'shipment' });
            steps.push({ name: 'payment' });
            _this.checkoutService.setSteps(steps);
            _this.setStepper();
            _this.loadingSubject.next(false);
            _this.subReady = _this.checkoutService.onReady$.pipe(filter(function (ready) { return ready; })).subscribe(function (res) { res && _this.endCheckout(); });
        };
        _this.goBack = function () { return _this.stepper.previous(); };
        _this.isStepReady = function (step_name) { return _this.checkoutService.isStepReady(step_name); };
        _this.endCheckout = function () {
            _this.checkoutService.complete().then(function (res) { return res.ok && _this.router.navigate(['checkout/order_success']); }, function (err) { return _this.toastrService.show('operation-error'); });
        };
        _this.setStepper = function () {
            setTimeout(function () {
                if (document.querySelector('#stepper') != null) {
                    _this.stepper = new Stepper(document.querySelector('#stepper'), {
                        linear: true,
                        animation: true
                    });
                }
                else {
                    _this.setStepper();
                }
            }, 1000);
        };
        _this.next = function () {
            _this.stepper.next();
            window.scrollTo({
                top: 0,
                behavior: 'smooth',
            });
        };
        _this.error = function (error_value) { return _this.toastrService.show(error_value); };
        _this.getIcon = function (data_item) {
            switch (data_item.type) {
                case 'coupon': return 'assets/images/coupon.png';
                case 'discount': return 'assets/images/discount.png';
                case 'shipment': return 'assets/images/ico-envio.png';
                case 'subtotal': return 'assets/images/products.png';
                case 'total': return 'assets/images/ico-carrito.png';
                default: return 'assets/images/ico-carrito.png';
            }
        };
        _this.ecOnConstruct();
        return _this;
    }
    CheckoutEcComponent.prototype.ngOnInit = function () {
        var _this = this;
        this.subCan = this.checkoutService.canCheckout$.pipe(take(1)).subscribe(function (contain_items) {
            if (contain_items)
                _this.initializeCheckout();
            else
                _this.canCheckout = false;
        });
        this.ecOnInit();
    };
    CheckoutEcComponent.prototype.ngOnDestroy = function () {
        var _a, _b;
        (_a = this.subCan) === null || _a === void 0 ? void 0 : _a.unsubscribe();
        (_b = this.subReady) === null || _b === void 0 ? void 0 : _b.unsubscribe();
    };
    CheckoutEcComponent.ctorParameters = function () { return [
        { type: CheckoutService },
        { type: ToastService },
        { type: Router },
        { type: CartService },
        { type: ProductsService }
    ]; };
    CheckoutEcComponent = __decorate([
        Component({
            selector: 'app-checkout-ec',
            template: "<main class=\"py-4\" id=\"appCheckoutEc\">\n    <div *ngIf=\"canCheckout; else cartEmpty\">\n        <app-detail-checkout-block-ec></app-detail-checkout-block-ec>\n        <div class=\"container\">\n            <div class=\"row\">\n                <div class=\"col-md-12 col-12\">\n                    <div id=\"stepper\" class=\"bs-stepper\" *ngIf=\"(checkoutService.state$ | async) as state\">\n\n                        <div class=\"row mb-3\">\n                            <div class=\"col-md-4 col-12\">\n                                <div class=\"step linea\" data-target=\"#test-l-1\">\n                                    <button class=\"step-trigger\">\n                                        <span class=\"bs-stepper-circle\">1</span>\n                                        <span class=\"bs-stepper-label\">{{'billing-details'|translate}}</span>\n                                    </button>\n                                </div>\n                            </div>\n                            <div class=\"col-md-4 col-12\">\n                                <div class=\"step linea text-center\" data-target=\"#test-l-2\">\n                                    <button class=\"step-trigger\">\n                                        <span class=\"bs-stepper-circle\">2</span>\n                                        <span class=\"bs-stepper-label\">{{'shipment-method' | translate}}</span>\n                                    </button>\n                                </div>\n                            </div>\n                            <ng-container *ngIf=\"state[0].state == 'pending'; else validatePayment\">\n                                <div class=\"col-md-4 col-12\">\n                                    <div class=\"step text-right\" data-target=\"#test-l-3\">\n                                        <button class=\"step-trigger\">\n                                            <span class=\"bs-stepper-circle\">3</span>\n                                            <span class=\"bs-stepper-label\">{{'payment' | translate}}</span>\n                                        </button>\n                                    </div>\n                                </div>\n                            </ng-container>\n\n                            <ng-template #validatePayment>\n\n                                <ng-container *ngIf=\"(checkoutService.order$ | async) as order\">\n\n                                    <ng-container *ngIf=\"order.checkoutState != 'payment_skipped'\">\n\n                                        <div class=\"col-md-4 col-12\">\n                                            <div class=\"step text-right\" data-target=\"#test-l-3\">\n                                                <button class=\"step-trigger\">\n                                                    <span class=\"bs-stepper-circle\">3</span>\n                                                    <span class=\"bs-stepper-label\">{{'payment' | translate}}</span>\n                                                </button>\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                </ng-container>\n                            </ng-template>\n                        </div>\n\n                        <!-- CONTENT -->\n                        <div class=\"bs-stepper-content margin-bottom-i\">\n                            <div *ngIf=\"(checkoutService.state$ | async) as checkoutState\">\n                                <div id=\"test-l-1\" class=\"content\">\n                                    <app-dataform-ec [step_id]=\"1\">\n                                    </app-dataform-ec>\n                                    <div class=\"checkout-btn-unique text-right\">\n                                        <button *ngIf=\"isStepReady('address')\" class=\"btn valid-btn\"\n                                            (click)=\"next()\">{{'ready-form'|translate}}</button>\n                                    </div>\n                                </div>\n                                <div id=\"test-l-2\" class=\"content\">\n                                    <ng-container *ngIf=\"isStepReady('address')\">\n\n                                        <app-shipment-ec [step_id]=\"2\">\n                                        </app-shipment-ec>\n\n                                        <div class=\"checkout-btn-container mt-2\">\n                                            <button class=\"btn valid-btn\"\n                                                (click)=\"goBack()\">{{'back'|translate}}</button>\n                                            <ng-container *ngIf=\"(checkoutService.order$ | async) as order\">\n                                                <ng-container\n                                                    *ngIf=\"order.checkoutState == 'payment_skipped';else buttonnext\">\n                                                    <button *ngIf=\"isStepReady('shipment')\" (click)=\"endCheckout()\"\n                                                        class=\"btn valid-btn pull-right\">{{'finish-checkout'|translate}}\n                                                    </button>\n                                                </ng-container>\n\n                                                <ng-template #buttonnext>\n                                                    <button *ngIf=\"isStepReady('shipment')\" (click)=\"next()\"\n                                                        class=\"btn valid-btn pull-right\">{{'ready-form'|translate}}\n                                                    </button>\n\n                                                </ng-template>\n\n                                            </ng-container>\n                                        </div>\n                                    </ng-container>\n                                </div>\n\n                                <div id=\"test-l-3\" class=\"content\">\n                                    <ng-container *ngIf=\"isStepReady('shipment')\">\n                                        <ng-container *ngIf=\"(checkoutService.order$ | async) as order\">\n\n\n                                            <app-payment-ec [step_id]=\"3\">\n                                            </app-payment-ec>\n\n\n                                        </ng-container>\n                                        <div class=\"checkout-btn-container mt-2\">\n                                            <button class=\"btn valid-btn\"\n                                                (click)=\"goBack()\">{{'back'|translate}}</button>\n                                        </div>\n                                    </ng-container>\n                                </div>\n\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <ng-container *ngIf=\"(checkoutService.loading$ | async) as load\">\n                    <div class=\"col-md-12 col-12\">\n                        <div *ngIf=\"load\" class=\"d-flex flex-column jusitfy-content-center align-items-center mt-2\">\n                            <app-loading-full-ec></app-loading-full-ec>\n                            <h5>{{ 'processing-payment' | translate }}</h5>\n                        </div>\n                    </div>\n                </ng-container>\n            </div>\n        </div>\n    </div>\n</main>\n\n<ng-template #cartEmpty>\n    <div class=\"wrap\">\n        <div *ngIf=\"(loading$ | async) as load\">\n            <app-loading-full-ec *ngIf=\"canCheckout\"></app-loading-full-ec>\n        </div>\n        <section id=\"cart\" *ngIf=\"!canCheckout\">\n            <section id=\"cart bg-white h-50\">\n                <div class=\"d-flex flex-column justify-content-center align-items-center text-center\">\n                    <h4>{{ 'empty-cart' | translate }}</h4>\n                    <h5>{{ 'empty-cart-detail' | translate }}</h5>\n                </div>\n            </section>\n        </section>\n    </div>\n</ng-template>\n\n<ng-template #loading>\n    <app-loading-full-ec></app-loading-full-ec>\n</ng-template>\n\n<ng-template #requireLoginView>\n</ng-template>\n\n\n<!-- <ec-checkout-error></ec-checkout-error> -->",
            styles: [".switch{position:relative;display:inline-block;width:16%!important;height:34px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.4s}.slider:before{position:absolute;content:\"\";height:26px;width:26px;left:4px;bottom:4px;background-color:#fff;transition:.4s}input:checked+.slider{background-color:#000}input:focus+.slider{box-shadow:0 0 1px #000}input:checked+.slider:before{transform:translateX(26px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.bg-white{background-color:#fff}.active .bs-stepper-circle{background-color:#000}.Main{margin-top:140px;min-height:60vh}.btn:disabled{opacity:.65}.btn.valid-btn{background-color:#000;color:#fff;margin-right:12px}.co-data-icon{height:50px;-o-object-fit:contain;object-fit:contain}.checkout-btn-container{display:flex;justify-content:space-between}.margin-bottom-i{margin-bottom:3%}.loading-container-line{display:flex;flex-direction:row;justify-content:center}.bs-stepper .step-trigger{background-color:#fff}.bs-stepper .step-trigger.disabled,.bs-stepper .step-trigger:disabled{opacity:1}.bs-stepper .step.linea:after{position:absolute;top:40%;flex:1;height:1px;width:100%;margin:.5rem 0 0;content:\"\";background-color:rgba(0,0,0,.1)}@media screen and (max-width:992px){.bs-stepper .step.linea:after{display:none}.step{text-align:left!important}}@media screen and (max-width:576px){.step{text-align:center!important}.resumen i{font-size:2em}.resumen strong{font-size:.8em}.resumen span{font-size:1em}}"]
        })
    ], CheckoutEcComponent);
    return CheckoutEcComponent;
}(ComponentHelper));
export { CheckoutEcComponent };
//# sourceMappingURL=data:application/json;base64, 