import * as i0 from '@angular/core';
import { EventEmitter, Component, Input, Output, ViewChild, NgModule } from '@angular/core';
import { UntypedFormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
import * as i4 from '@angular/material/stepper';
import { MatStepperModule } from '@angular/material/stepper';
import * as i2 from '@aztrix/helpers';
import { parseStripeCustomerInfoFromBillingForm, parsePropertiesFromStripeCustomerInfo, updateBillingForm, UpgradeTierActionType, HelperPipesModule } from '@aztrix/helpers';
import { PropertyType } from '@aztrix/models';
import * as i1 from '@aztrix/sdk';
import { BehaviorSubject, catchError, switchMap } from 'rxjs';
import * as i3 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i5 from '@aztrix/components/edit-billing-information';
import { EditBillingInformationModule } from '@aztrix/components/edit-billing-information';
import * as i6 from '@aztrix/components/view-billing-information';
import { ViewBillingInformationModule } from '@aztrix/components/view-billing-information';
import * as i7 from '@aztrix/components/button';
import { ButtonModule } from '@aztrix/components/button';
import * as i8 from '@aztrix/icons';
import { IconsModule } from '@aztrix/icons';
import * as i9 from '@aztrix/components/snackbar';
import { SnackbarModule } from '@aztrix/components/snackbar';
import { PropertyViewModule } from '@aztrix/components/property-view';

class EditBillingInformationStepperComponent {
    constructor(_paymentsService, _translateService, _matomo) {
        this._paymentsService = _paymentsService;
        this._translateService = _translateService;
        this._matomo = _matomo;
        this.form = new UntypedFormGroup({});
        // @Output() updateBillingInfo = new EventEmitter<MatStepper>();
        this.confirm = new EventEmitter();
        this.loading$ = new BehaviorSubject(false);
        // cardValidationBusy$ = new BehaviorSubject<boolean>(false);
        // paymentBusy$ = new BehaviorSubject<boolean>(false);
        // stripePaymentMethod: StripePaymentMethodRepresentation;
        this.errorSnackbar$ = new BehaviorSubject(null);
        // paymentMethodControl = new FormControl<StripePaymentMethodRepresentation>({
        //   id: null,
        //   card: null,
        //   created: null,
        //   type: null,
        // });
        this.propertyType = PropertyType;
        this.stripeCustomerInfoProperties$ = new BehaviorSubject(null);
    }
    next() {
        this.form.markAllAsTouched();
        this.form.updateValueAndValidity();
        if (this.form.valid) {
            this.loading$.next(true);
            this._paymentsService
                .setStripeCustomerInfo(parseStripeCustomerInfoFromBillingForm(this.form))
                .pipe(catchError((err) => {
                this.loading$.next(false);
                if (err.error === 'INVALID_TAX_ID') {
                    this.errorSnackbar$.next({
                        message: 'property.validation.invalid',
                        options: {
                            propertyType: this._translateService.instant(`property.${PropertyType.LEGAL_ID}.label`),
                        },
                    });
                }
                else {
                    this.errorSnackbar$.next({
                        message: 'error.default.title',
                    });
                }
                throw err;
            }), switchMap(() => this._paymentsService.getStripeCustomerInfo()))
                .subscribe((stripeCustomerInfo) => {
                const properties = parsePropertiesFromStripeCustomerInfo(stripeCustomerInfo);
                updateBillingForm(properties, this.form);
                this.loading$.next(false);
                this.stripeCustomerInfoProperties$.next(properties);
                if (this.form.valid) {
                    this._stepper.next();
                }
                this._matomo.trackEvent('upgrade_tier', UpgradeTierActionType.TIER_UPGRADE_CHECKOUT_BILLING_INFO +
                    '_' +
                    stripeCustomerInfo.customerType);
            });
        }
    }
    // async validateCardInfo() {
    //   this.cardValidationBusy$.next(true);
    //   this._changeDetector.detectChanges();
    //   const paymentMethod: StripePaymentMethodRepresentation =
    //     await this._stripeCard.createPaymentMethod();
    //   if (paymentMethod) {
    //     this.stripePaymentMethod = paymentMethod;
    //   }
    //   this.cardValidationBusy$.next(false);
    //   this._changeDetector.detectChanges();
    //   if (this._stripeCard.cardErrors === undefined) {
    //     this.goForward();
    //   }
    // }
    // setExistingPaymentMethod(method: StripePaymentMethodRepresentation) {
    //   this.stripePaymentMethod = method;
    //   this.cardValidationBusy$.next(false);
    //   this._changeDetector.detectChanges();
    //   this.goForward();
    // }
    // changeMethod(event) {
    //   this.paymentMethodControl.setValue(event.value);
    // }
    _confirm() {
        this.loading$.next(true);
        this.errorSnackbar$.next(null);
        if (this.form.valid) {
            this._paymentsService
                .setStripeCustomerInfo(parseStripeCustomerInfoFromBillingForm(this.form))
                .pipe(catchError((err) => {
                this.loading$.next(false);
                this.errorSnackbar$.next({ message: 'payment.failed.snackbar.message' });
                throw err;
            }))
                .subscribe(() => {
                this.confirm.emit();
                this.loading$.next(false);
            });
        }
    }
}
EditBillingInformationStepperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: EditBillingInformationStepperComponent, deps: [{ token: i1.PaymentsService }, { token: i2.TranslateService }, { token: i2.MatomoService }], target: i0.ɵɵFactoryTarget.Component });
EditBillingInformationStepperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: EditBillingInformationStepperComponent, selector: "ax-edit-billing-information-stepper", inputs: { form: "form" }, outputs: { confirm: "confirm" }, viewQueries: [{ propertyName: "_stepper", first: true, predicate: ["stepper"], descendants: true }], ngImport: i0, template: "<mat-vertical-stepper #stepper class=\"stepper\" [linear]=\"true\">\n  <ng-template matStepperIcon=\"done\">\n    <ax-icon class=\"icon\" name=\"check\"></ax-icon>\n  </ng-template>\n\n  <ng-template matStepperIcon=\"edit\">\n    <ax-icon class=\"icon\" name=\"check\"></ax-icon>\n  </ng-template>\n\n  <ng-template matStepperIcon=\"number\" let-index=\"index\">\n    <ax-icon class=\"icon\" name=\"card-account-details\" *ngIf=\"index === 0\"></ax-icon>\n    <ax-icon class=\"icon\" name=\"credit-card-outline\" *ngIf=\"index === 1\"></ax-icon>\n    <ax-icon class=\"icon\" name=\"file-check\" *ngIf=\"index === 2\"></ax-icon>\n  </ng-template>\n  <mat-step>\n    <ng-template matStepLabel>\n      <div>\n        {{ 'agreement.add.requested' | translate }}\n        <div class=\"mat-step-optional\">\n          {{ 'agreement.add.requested.description' | translate }}\n        </div>\n      </div>\n    </ng-template>\n\n    <ax-snackbar\n      *ngIf=\"(errorSnackbar$ | async) !== null\"\n      [dismissible]=\"false\"\n      color=\"red\"\n      [timeout]=\"10000\"\n    >\n      {{ (errorSnackbar$ | async).message | translate: (errorSnackbar$ | async)?.options }}\n    </ax-snackbar>\n\n    <ax-edit-billing-information [form]=\"form\"></ax-edit-billing-information>\n\n    <div class=\"h-button-wrapper\">\n      <ax-button type=\"button\" [loading]=\"loading$ | async\" color=\"primary\" filled (click)=\"next()\">\n        {{ 'label.next' | translate }}\n      </ax-button>\n    </div>\n  </mat-step>\n\n  <mat-step>\n    <ng-template matStepLabel>\n      <div>\n        {{ 'agreement.add.confirm' | translate }}\n        <div class=\"mat-step-optional\">\n          {{ 'agreement.add.confirm.description' | translate }}\n        </div>\n      </div>\n    </ng-template>\n\n    <ax-snackbar\n      *ngIf=\"(errorSnackbar$ | async) !== null\"\n      [dismissible]=\"false\"\n      color=\"red\"\n      [timeout]=\"10000\"\n    >\n      {{ (errorSnackbar$ | async).message | translate: (errorSnackbar$ | async)?.options }}\n    </ax-snackbar>\n\n    <ax-view-billing-information\n      *ngIf=\"stripeCustomerInfoProperties$ | async\"\n      [properties]=\"stripeCustomerInfoProperties$ | async\"\n    ></ax-view-billing-information>\n\n    <div class=\"h-button-wrapper\">\n      <button axButton color=\"primary\" type=\"button\" matStepperPrevious>\n        {{ 'label.back' | translate }}\n      </button>\n      <ax-button\n        type=\"button\"\n        color=\"primary\"\n        (click)=\"_confirm()\"\n        filled\n        [loading]=\"loading$ | async\"\n      >\n        {{ 'label.confirm' | translate }}\n      </ax-button>\n    </div>\n  </mat-step>\n</mat-vertical-stepper>\n", styles: [":host{background-color:#fff;display:block}:host ::ng-deep .mat-step-icon.mat-step-icon-state-number:not(.mat-step-icon-selected){color:#fff}:host ::ng-deep .mat-vertical-stepper-header{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i4.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i4.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["selectedIndex", "disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "directive", type: i4.MatStepperPrevious, selector: "button[matStepperPrevious]", inputs: ["type"] }, { kind: "directive", type: i4.MatStepperIcon, selector: "ng-template[matStepperIcon]", inputs: ["matStepperIcon"] }, { kind: "component", type: i5.EditBillingInformationComponent, selector: "ax-edit-billing-information", inputs: ["form"] }, { kind: "component", type: i6.ViewBillingInformationComponent, selector: "ax-view-billing-information", inputs: ["properties"] }, { kind: "directive", type: i7.ButtonDirective, selector: "[axButton]", inputs: ["color", "labelHideMobile", "smallButton", "bigButton", "fullWidth", "filled", "outline", "icon-button", "hoverLabel", "hover", "lowercase", "disabled"] }, { kind: "component", type: i7.ButtonComponent, selector: "ax-button", inputs: ["routerUrl", "ariaLabel"] }, { kind: "component", type: i8.IconComponent, selector: "ax-icon", inputs: ["name", "inline"] }, { kind: "component", type: i9.SnackbarComponent, selector: "ax-snackbar", inputs: ["type", "timeout", "dismissible", "open", "icon", "color"], outputs: ["didClose"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: EditBillingInformationStepperComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-edit-billing-information-stepper', template: "<mat-vertical-stepper #stepper class=\"stepper\" [linear]=\"true\">\n  <ng-template matStepperIcon=\"done\">\n    <ax-icon class=\"icon\" name=\"check\"></ax-icon>\n  </ng-template>\n\n  <ng-template matStepperIcon=\"edit\">\n    <ax-icon class=\"icon\" name=\"check\"></ax-icon>\n  </ng-template>\n\n  <ng-template matStepperIcon=\"number\" let-index=\"index\">\n    <ax-icon class=\"icon\" name=\"card-account-details\" *ngIf=\"index === 0\"></ax-icon>\n    <ax-icon class=\"icon\" name=\"credit-card-outline\" *ngIf=\"index === 1\"></ax-icon>\n    <ax-icon class=\"icon\" name=\"file-check\" *ngIf=\"index === 2\"></ax-icon>\n  </ng-template>\n  <mat-step>\n    <ng-template matStepLabel>\n      <div>\n        {{ 'agreement.add.requested' | translate }}\n        <div class=\"mat-step-optional\">\n          {{ 'agreement.add.requested.description' | translate }}\n        </div>\n      </div>\n    </ng-template>\n\n    <ax-snackbar\n      *ngIf=\"(errorSnackbar$ | async) !== null\"\n      [dismissible]=\"false\"\n      color=\"red\"\n      [timeout]=\"10000\"\n    >\n      {{ (errorSnackbar$ | async).message | translate: (errorSnackbar$ | async)?.options }}\n    </ax-snackbar>\n\n    <ax-edit-billing-information [form]=\"form\"></ax-edit-billing-information>\n\n    <div class=\"h-button-wrapper\">\n      <ax-button type=\"button\" [loading]=\"loading$ | async\" color=\"primary\" filled (click)=\"next()\">\n        {{ 'label.next' | translate }}\n      </ax-button>\n    </div>\n  </mat-step>\n\n  <mat-step>\n    <ng-template matStepLabel>\n      <div>\n        {{ 'agreement.add.confirm' | translate }}\n        <div class=\"mat-step-optional\">\n          {{ 'agreement.add.confirm.description' | translate }}\n        </div>\n      </div>\n    </ng-template>\n\n    <ax-snackbar\n      *ngIf=\"(errorSnackbar$ | async) !== null\"\n      [dismissible]=\"false\"\n      color=\"red\"\n      [timeout]=\"10000\"\n    >\n      {{ (errorSnackbar$ | async).message | translate: (errorSnackbar$ | async)?.options }}\n    </ax-snackbar>\n\n    <ax-view-billing-information\n      *ngIf=\"stripeCustomerInfoProperties$ | async\"\n      [properties]=\"stripeCustomerInfoProperties$ | async\"\n    ></ax-view-billing-information>\n\n    <div class=\"h-button-wrapper\">\n      <button axButton color=\"primary\" type=\"button\" matStepperPrevious>\n        {{ 'label.back' | translate }}\n      </button>\n      <ax-button\n        type=\"button\"\n        color=\"primary\"\n        (click)=\"_confirm()\"\n        filled\n        [loading]=\"loading$ | async\"\n      >\n        {{ 'label.confirm' | translate }}\n      </ax-button>\n    </div>\n  </mat-step>\n</mat-vertical-stepper>\n", styles: [":host{background-color:#fff;display:block}:host ::ng-deep .mat-step-icon.mat-step-icon-state-number:not(.mat-step-icon-selected){color:#fff}:host ::ng-deep .mat-vertical-stepper-header{pointer-events:none}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.PaymentsService }, { type: i2.TranslateService }, { type: i2.MatomoService }]; }, propDecorators: { form: [{
                type: Input
            }], confirm: [{
                type: Output
            }], _stepper: [{
                type: ViewChild,
                args: ['stepper']
            }] } });

class EditBillingInformationStepperModule {
}
EditBillingInformationStepperModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: EditBillingInformationStepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
EditBillingInformationStepperModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.5", ngImport: i0, type: EditBillingInformationStepperModule, declarations: [EditBillingInformationStepperComponent], imports: [CommonModule,
        MatStepperModule,
        PropertyViewModule,
        EditBillingInformationModule,
        ViewBillingInformationModule,
        HelperPipesModule,
        FormsModule,
        ReactiveFormsModule,
        ButtonModule,
        IconsModule,
        SnackbarModule], exports: [EditBillingInformationStepperComponent] });
EditBillingInformationStepperModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: EditBillingInformationStepperModule, imports: [CommonModule,
        MatStepperModule,
        PropertyViewModule,
        EditBillingInformationModule,
        ViewBillingInformationModule,
        HelperPipesModule,
        FormsModule,
        ReactiveFormsModule,
        ButtonModule,
        IconsModule,
        SnackbarModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: EditBillingInformationStepperModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [EditBillingInformationStepperComponent],
                    imports: [
                        CommonModule,
                        MatStepperModule,
                        PropertyViewModule,
                        EditBillingInformationModule,
                        ViewBillingInformationModule,
                        HelperPipesModule,
                        FormsModule,
                        ReactiveFormsModule,
                        ButtonModule,
                        IconsModule,
                        SnackbarModule,
                    ],
                    exports: [EditBillingInformationStepperComponent],
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { EditBillingInformationStepperComponent, EditBillingInformationStepperModule };
//# sourceMappingURL=aztrix-components-edit-billing-information-stepper.mjs.map
//# sourceMappingURL=aztrix-components-edit-billing-information-stepper.mjs.map
