import * as i8 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { EventEmitter, Output, Component, ViewChild, Input, Injectable, NgModule } from '@angular/core';
import * as i1 from '@aztrix/components/button';
import { ButtonModule } from '@aztrix/components/button';
import * as i6$1 from '@aztrix/translate';
import { TranslatePipe } from '@aztrix/translate';
import * as i3 from '@angular/forms';
import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
import * as i8$1 from '@angular/material/form-field';
import { MatFormFieldModule } from '@angular/material/form-field';
import * as i11 from '@angular/material/input';
import { MatInputModule } from '@angular/material/input';
import * as i12$1 from '@angular/material/progress-bar';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import * as i9 from '@angular/material/select';
import { MatSelectModule } from '@angular/material/select';
import * as i3$1 from '@angular/material/snack-bar';
import { MatSnackBarModule, MatSnackBar } from '@angular/material/snack-bar';
import * as i12 from '@aztrix/components/chip';
import { ChipModule } from '@aztrix/components/chip';
import * as i7 from '@aztrix/components/payment-method';
import { PaymentMethodModule } from '@aztrix/components/payment-method';
import * as i10$1 from '@aztrix/components/snackbar';
import { SnackbarModule } from '@aztrix/components/snackbar';
import * as i6 from '@aztrix/components/stripe-card';
import { StripeCardModule } from '@aztrix/components/stripe-card';
import * as i7$1 from '@aztrix/helpers';
import { cardExpired, UpgradeTierActionType, formatDate, FeatureType, isTierUpgrade, HelperPipesModule } from '@aztrix/helpers';
import * as i4 from '@aztrix/icons';
import { IconsModule } from '@aztrix/icons';
import * as i1$1 from '@aztrix/sdk';
import { AccountSettingsRepresentation, TierSubscriptionRepresentation, TierSubscriptionInfoRepresentation } from '@aztrix/sdk';
import { map, distinctUntilChanged, shareReplay, BehaviorSubject, first, from, catchError, switchMap, of, combineLatest, tap, Subscription, NEVER } from 'rxjs';
import * as i10 from '@angular/material/core';
import { EditBillingInformationStepperComponent } from '@aztrix/components/edit-billing-information-stepper';
import * as i8$2 from '@aztrix/components/spinner';
import { SpinnerModule } from '@aztrix/components/spinner';
import * as i5 from '@aztrix/environment';
import * as i13 from '@angular/cdk/scrolling';
import { CdkScrollable, CdkScrollableModule } from '@angular/cdk/scrolling';
import * as i3$2 from '@aztrix/components/overlay';
import { ModalSize } from '@aztrix/components/overlay';

class CancelTierSubscriptionComponent {
    constructor() {
        this.confirmClicked = new EventEmitter();
    }
    confirm() {
        this.confirmClicked.emit();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CancelTierSubscriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CancelTierSubscriptionComponent, isStandalone: true, selector: "ax-cancel-tier-subscription", outputs: { confirmClicked: "confirmClicked" }, ngImport: i0, template: "{{ 'cancel.subscription.explanation' | translate }}\n\n<button class=\"button\" axButton (click)=\"confirm()\" filled fullWidth color=\"primary\">\n  {{ 'cancel.subscription' | translate }}\n</button>\n", styles: [":host{display:block;padding:1rem}.button{margin-top:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1.ButtonDirective, selector: "[axButton]", inputs: ["color", "labelHideMobile", "smallButton", "bigButton", "fullWidth", "filled", "outline", "icon-button", "hoverLabel", "hover", "lowercase", "disabled"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CancelTierSubscriptionComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-cancel-tier-subscription', standalone: true, imports: [CommonModule, ButtonModule, TranslatePipe], template: "{{ 'cancel.subscription.explanation' | translate }}\n\n<button class=\"button\" axButton (click)=\"confirm()\" filled fullWidth color=\"primary\">\n  {{ 'cancel.subscription' | translate }}\n</button>\n", styles: [":host{display:block;padding:1rem}.button{margin-top:1rem}\n"] }]
        }], propDecorators: { confirmClicked: [{
                type: Output
            }] } });

class ConfirmTierPaymentComponent {
    constructor(_paymentsService, _tierSubscriptions) {
        this._paymentsService = _paymentsService;
        this._tierSubscriptions = _tierSubscriptions;
        this.confirm = new EventEmitter();
        this.cancel = new EventEmitter();
        this._paymentMethods$ = this._paymentsService
            .getPaymentMethods()
            .pipe(map((paymentMethods) => {
            if (paymentMethods.length > 2) {
                const methods = paymentMethods.sort((p1, p2) => (p1.created ?? 0) < (p2.created ?? 0) ? 1 : -1);
                const expiredMethods = methods.filter((method) => cardExpired(method.card));
                const nonExpiredMethods = methods.filter((method) => !cardExpired(method.card));
                return [...nonExpiredMethods, ...expiredMethods];
            }
            return paymentMethods;
        }), distinctUntilChanged(), shareReplay(1));
        this._emptyPaymentMethod = {
            id: undefined,
            card: undefined,
            created: undefined,
            type: undefined,
        };
        this._paymentMethodControl = new FormControl(this._emptyPaymentMethod, { nonNullable: true, validators: [this.validatePaymentMethod()] });
        this._loading$ = new BehaviorSubject(false);
        this.promoCodeControl = new FormControl('');
        this.showPromoCode = false;
    }
    ngOnInit() {
        this._paymentMethods$.pipe(first()).subscribe((paymentMethods) => {
            if (paymentMethods?.length) {
                if (!cardExpired(paymentMethods[0].card)) {
                    this._paymentMethodControl.setValue(paymentMethods[0]);
                }
            }
        });
        this.promoCodeControl.valueChanges.pipe(distinctUntilChanged()).subscribe(() => {
            this.promoCodeControl.setValue(this.promoCodeControl.value?.toUpperCase() || null);
        });
    }
    changeMethod(event) {
        this._paymentMethodControl.setValue(event.value);
    }
    errorChanges(error) {
        if (!error) {
            this._stripeCard.cardErrors = undefined;
        }
    }
    pay() {
        this._paymentMethodControl.markAllAsTouched();
        if (this._paymentMethodControl.invalid) {
            return;
        }
        if (this._paymentMethodControl?.value?.id || this.discount?.percentOff === 100) {
            this.confirm.next({
                paymentMethod: this._paymentMethodControl?.value || {},
                promoCode: this.promoCodeControl.value || '',
            });
        }
        else {
            this._loading$.next(true);
            from(this._stripeCard.createPaymentMethod())
                .pipe(map((paymentMethod) => {
                if (paymentMethod) {
                    this._paymentMethodControl.setValue(paymentMethod);
                }
                this._loading$.next(false);
                return this._stripeCard.cardErrors === undefined;
            }))
                .subscribe((valid) => {
                if (valid && this._paymentMethodControl?.value) {
                    this.confirm.next({
                        paymentMethod: this._paymentMethodControl?.value,
                        promoCode: this.promoCodeControl.value || '',
                    });
                }
            });
        }
    }
    applyPromotionCode() {
        if (this._loading$.value === true) {
            return;
        }
        this.promoCodeControl.setErrors(null);
        this._loading$.next(true);
        this._tierSubscriptions.getDiscountInfo(this.promoCodeControl.value || undefined).subscribe({
            next: (discount) => {
                this.discount = discount;
                if (!discount?.active) {
                    this.promoCodeControl.setErrors({ expired: true });
                }
                this._loading$.next(false);
            },
            error: () => {
                this.promoCodeControl.setErrors({ unknown: true });
                this._loading$.next(false);
            },
        });
    }
    blur() {
        if (!this.promoCodeControl.value) {
            this.showPromoCode = false;
        }
    }
    validatePaymentMethod() {
        return (control) => {
            const value = control?.value;
            if (!value || value.card === null) {
                return null;
            }
            return cardExpired(value.card) ? { cardExpired: true } : null;
        };
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConfirmTierPaymentComponent, deps: [{ token: i1$1.PaymentsService }, { token: i1$1.TierSubscriptionsService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ConfirmTierPaymentComponent, isStandalone: true, selector: "ax-confirm-tier-payment", inputs: { tierSubscription: "tierSubscription" }, outputs: { confirm: "confirm", cancel: "cancel" }, viewQueries: [{ propertyName: "_stripeCard", first: true, predicate: ["cardDetails"], descendants: true }], ngImport: i0, template: "<div class=\"product-info\" *ngIf=\"tierSubscription\">\n  <h4>{{ tierSubscription.tier }}</h4>\n  <h2 class=\"price\" [ngClass]=\"{off: discount?.active}\">\n    {{ (tierSubscription.price || 0) / 100 | currency: tierSubscription.currency?.toUpperCase() }}\n    <span>/ {{ 'label.month' | translate }}</span>\n  </h2>\n  <h2 class=\"price\" *ngIf=\"discount?.active\">\n    {{\n      (tierSubscription.price || 0) / 100 -\n        ((tierSubscription.price || 0) / 10000) * (discount?.percentOff || 0)\n        | currency: tierSubscription.currency?.toUpperCase()\n    }}\n    <span>/ {{ 'label.month' | translate }}</span>\n  </h2>\n</div>\n\n<ax-button *ngIf=\"!showPromoCode\" icon=\"plus\" color=\"primary\" (click)=\"showPromoCode = true\">\n  {{ 'label.add-promocode' | translate }}\n</ax-button>\n\n<div class=\"promocode\" *ngIf=\"showPromoCode && !discount?.active\">\n  <mat-form-field appearance=\"outline\" class=\"c-input\" style=\"width: 100%\">\n    <mat-label>{{ 'label.promocode' | translate }}</mat-label>\n    <input\n      matInput\n      [formControl]=\"promoCodeControl\"\n      autofocus\n      (keydown.enter)=\"applyPromotionCode()\"\n      (blur)=\"blur()\"\n    />\n    <mat-error *ngIf=\"promoCodeControl?.invalid\">{{\n      (promoCodeControl.hasError('expired')\n        ? 'tiers.change.failed.snackbar.message.promoCode.expired'\n        : 'tiers.change.failed.snackbar.message.promoCode'\n      ) | translate\n    }}</mat-error>\n  </mat-form-field>\n  <ax-button\n    class=\"apply\"\n    *ngIf=\"promoCodeControl?.value\"\n    filled\n    [loading]=\"_loading$ | async\"\n    [disabled]=\"promoCodeControl.invalid\"\n    (click)=\"applyPromotionCode()\"\n    >{{ 'label.apply' | translate }}</ax-button\n  >\n</div>\n\n<div class=\"discount\" *ngIf=\"discount?.active\">\n  <ax-chip icon=\"tag\" removable (removed)=\"discount = undefined\">\n    <b>{{ promoCodeControl.value }}</b>\n    <span>&nbsp;-{{ discount.percentOff }}%</span>\n  </ax-chip>\n  <div>\n    -\n    {{\n      ((tierSubscription.price || 0) / 10000) * (discount?.percentOff || 0)\n        | currency: tierSubscription.currency?.toUpperCase()\n    }}\n  </div>\n</div>\n\n<ng-container *ngIf=\"!discount?.active || discount?.percentOff !== 100\">\n  <mat-form-field\n    appearance=\"outline\"\n    class=\"c-input\"\n    style=\"width: 100%\"\n    *ngIf=\"((_paymentMethods$ | async)?.length || 0) > 0\"\n  >\n    <mat-label>{{ 'payment.tab.billing.payment-methods' | translate }}</mat-label>\n    <mat-select\n      class=\"select\"\n      [formControl]=\"_paymentMethodControl\"\n      (selectionChange)=\"changeMethod($event)\"\n    >\n      <mat-select-trigger *ngIf=\"_paymentMethodControl?.value\">\n        <ax-payment-method\n          [paymentMethod]=\"_paymentMethodControl.value\"\n          [selectMode]=\"true\"\n        ></ax-payment-method>\n      </mat-select-trigger>\n\n      <mat-option *ngFor=\"let paymentMethod of _paymentMethods$ | async\" [value]=\"paymentMethod\">\n        <ax-payment-method [paymentMethod]=\"paymentMethod\" [selectMode]=\"true\"></ax-payment-method>\n      </mat-option>\n      <mat-option [value]=\"_emptyPaymentMethod\">\n        <ax-payment-method\n          [paymentMethod]=\"_emptyPaymentMethod\"\n          [selectMode]=\"true\"\n        ></ax-payment-method>\n      </mat-option>\n    </mat-select>\n    <mat-error>{{ 'payment.method.expired.error' | translate }}</mat-error>\n  </mat-form-field>\n\n  <div *ngIf=\"!_paymentMethodControl?.value?.id\">\n    <ax-stripe-card\n      #cardDetails\n      [showErrors]=\"false\"\n      [amount]=\"tierSubscription.price\"\n      (errorChanges)=\"errorChanges($event)\"\n    ></ax-stripe-card>\n    <div class=\"errors\">\n      <div class=\"c-property-edit__error\" *ngIf=\"cardDetails.cardErrors\">\n        <ax-icon class=\"icon\" name=\"alert-circle\"></ax-icon>\n        <span>{{ 'stripe.' + cardDetails.cardErrors.code + '.error' | translate }}</span>\n      </div>\n    </div>\n  </div>\n</ng-container>\n\n<div class=\"h-button-wrapper\">\n  <ax-button color=\"danger\" (click)=\"cancel.next()\">{{ 'label.cancel' | translate }}</ax-button>\n  <ax-button filled color=\"primary\" (click)=\"pay()\" [loading]=\"_loading$ | async\">{{\n    (discount?.percentOff === 100 ? 'label.confirm' : 'label.pay') | translate\n  }}</ax-button>\n</div>\n", styles: [":host{display:block;padding:1rem 1rem .5rem}.price.off{text-decoration:line-through}.product-info{text-align:center;margin-bottom:2rem}.errors{margin-top:.25rem}.discount{display:flex;align-items:center;justify-content:space-between}.promocode{display:flex;gap:1rem}.promocode .apply{padding-top:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i8.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.CurrencyPipe, name: "currency" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "ngmodule", type: IconsModule }, { kind: "component", type: i4.IconComponent, selector: "ax-icon", inputs: ["name", "inline"] }, { kind: "ngmodule", type: SnackbarModule }, { kind: "ngmodule", type: MatSnackBarModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1.ButtonComponent, selector: "ax-button", inputs: ["url", "ariaLabel", "target"] }, { kind: "ngmodule", type: StripeCardModule }, { kind: "component", type: i6.StripeCardComponent, selector: "ax-stripe-card", inputs: ["amount", "showErrors"], outputs: ["payedClicked", "errorChanges"] }, { kind: "ngmodule", type: PaymentMethodModule }, { kind: "component", type: i7.PaymentMethodComponent, selector: "ax-payment-method", inputs: ["paymentMethod", "selectMode"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i8$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i9.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i9.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i10.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i11.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ChipModule }, { kind: "component", type: i12.ChipComponent, selector: "ax-chip", inputs: ["icon", "removable"], outputs: ["removed"] }, { kind: "ngmodule", type: MatProgressBarModule }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConfirmTierPaymentComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-confirm-tier-payment', standalone: true, imports: [
                        CommonModule,
                        FormsModule,
                        ReactiveFormsModule,
                        TranslatePipe,
                        IconsModule,
                        SnackbarModule,
                        MatSnackBarModule,
                        ButtonModule,
                        StripeCardModule,
                        PaymentMethodModule,
                        MatFormFieldModule,
                        MatSelectModule,
                        MatInputModule,
                        ChipModule,
                        MatProgressBarModule,
                    ], template: "<div class=\"product-info\" *ngIf=\"tierSubscription\">\n  <h4>{{ tierSubscription.tier }}</h4>\n  <h2 class=\"price\" [ngClass]=\"{off: discount?.active}\">\n    {{ (tierSubscription.price || 0) / 100 | currency: tierSubscription.currency?.toUpperCase() }}\n    <span>/ {{ 'label.month' | translate }}</span>\n  </h2>\n  <h2 class=\"price\" *ngIf=\"discount?.active\">\n    {{\n      (tierSubscription.price || 0) / 100 -\n        ((tierSubscription.price || 0) / 10000) * (discount?.percentOff || 0)\n        | currency: tierSubscription.currency?.toUpperCase()\n    }}\n    <span>/ {{ 'label.month' | translate }}</span>\n  </h2>\n</div>\n\n<ax-button *ngIf=\"!showPromoCode\" icon=\"plus\" color=\"primary\" (click)=\"showPromoCode = true\">\n  {{ 'label.add-promocode' | translate }}\n</ax-button>\n\n<div class=\"promocode\" *ngIf=\"showPromoCode && !discount?.active\">\n  <mat-form-field appearance=\"outline\" class=\"c-input\" style=\"width: 100%\">\n    <mat-label>{{ 'label.promocode' | translate }}</mat-label>\n    <input\n      matInput\n      [formControl]=\"promoCodeControl\"\n      autofocus\n      (keydown.enter)=\"applyPromotionCode()\"\n      (blur)=\"blur()\"\n    />\n    <mat-error *ngIf=\"promoCodeControl?.invalid\">{{\n      (promoCodeControl.hasError('expired')\n        ? 'tiers.change.failed.snackbar.message.promoCode.expired'\n        : 'tiers.change.failed.snackbar.message.promoCode'\n      ) | translate\n    }}</mat-error>\n  </mat-form-field>\n  <ax-button\n    class=\"apply\"\n    *ngIf=\"promoCodeControl?.value\"\n    filled\n    [loading]=\"_loading$ | async\"\n    [disabled]=\"promoCodeControl.invalid\"\n    (click)=\"applyPromotionCode()\"\n    >{{ 'label.apply' | translate }}</ax-button\n  >\n</div>\n\n<div class=\"discount\" *ngIf=\"discount?.active\">\n  <ax-chip icon=\"tag\" removable (removed)=\"discount = undefined\">\n    <b>{{ promoCodeControl.value }}</b>\n    <span>&nbsp;-{{ discount.percentOff }}%</span>\n  </ax-chip>\n  <div>\n    -\n    {{\n      ((tierSubscription.price || 0) / 10000) * (discount?.percentOff || 0)\n        | currency: tierSubscription.currency?.toUpperCase()\n    }}\n  </div>\n</div>\n\n<ng-container *ngIf=\"!discount?.active || discount?.percentOff !== 100\">\n  <mat-form-field\n    appearance=\"outline\"\n    class=\"c-input\"\n    style=\"width: 100%\"\n    *ngIf=\"((_paymentMethods$ | async)?.length || 0) > 0\"\n  >\n    <mat-label>{{ 'payment.tab.billing.payment-methods' | translate }}</mat-label>\n    <mat-select\n      class=\"select\"\n      [formControl]=\"_paymentMethodControl\"\n      (selectionChange)=\"changeMethod($event)\"\n    >\n      <mat-select-trigger *ngIf=\"_paymentMethodControl?.value\">\n        <ax-payment-method\n          [paymentMethod]=\"_paymentMethodControl.value\"\n          [selectMode]=\"true\"\n        ></ax-payment-method>\n      </mat-select-trigger>\n\n      <mat-option *ngFor=\"let paymentMethod of _paymentMethods$ | async\" [value]=\"paymentMethod\">\n        <ax-payment-method [paymentMethod]=\"paymentMethod\" [selectMode]=\"true\"></ax-payment-method>\n      </mat-option>\n      <mat-option [value]=\"_emptyPaymentMethod\">\n        <ax-payment-method\n          [paymentMethod]=\"_emptyPaymentMethod\"\n          [selectMode]=\"true\"\n        ></ax-payment-method>\n      </mat-option>\n    </mat-select>\n    <mat-error>{{ 'payment.method.expired.error' | translate }}</mat-error>\n  </mat-form-field>\n\n  <div *ngIf=\"!_paymentMethodControl?.value?.id\">\n    <ax-stripe-card\n      #cardDetails\n      [showErrors]=\"false\"\n      [amount]=\"tierSubscription.price\"\n      (errorChanges)=\"errorChanges($event)\"\n    ></ax-stripe-card>\n    <div class=\"errors\">\n      <div class=\"c-property-edit__error\" *ngIf=\"cardDetails.cardErrors\">\n        <ax-icon class=\"icon\" name=\"alert-circle\"></ax-icon>\n        <span>{{ 'stripe.' + cardDetails.cardErrors.code + '.error' | translate }}</span>\n      </div>\n    </div>\n  </div>\n</ng-container>\n\n<div class=\"h-button-wrapper\">\n  <ax-button color=\"danger\" (click)=\"cancel.next()\">{{ 'label.cancel' | translate }}</ax-button>\n  <ax-button filled color=\"primary\" (click)=\"pay()\" [loading]=\"_loading$ | async\">{{\n    (discount?.percentOff === 100 ? 'label.confirm' : 'label.pay') | translate\n  }}</ax-button>\n</div>\n", styles: [":host{display:block;padding:1rem 1rem .5rem}.price.off{text-decoration:line-through}.product-info{text-align:center;margin-bottom:2rem}.errors{margin-top:.25rem}.discount{display:flex;align-items:center;justify-content:space-between}.promocode{display:flex;gap:1rem}.promocode .apply{padding-top:1rem}\n"] }]
        }], ctorParameters: () => [{ type: i1$1.PaymentsService }, { type: i1$1.TierSubscriptionsService }], propDecorators: { tierSubscription: [{
                type: Input
            }], confirm: [{
                type: Output
            }], cancel: [{
                type: Output
            }], _stripeCard: [{
                type: ViewChild,
                args: ['cardDetails']
            }] } });

class ConfirmTierSubscriptionComponent {
    constructor() {
        this.confirm = new EventEmitter();
        this.cancel = new EventEmitter();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConfirmTierSubscriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ConfirmTierSubscriptionComponent, isStandalone: true, selector: "ax-confirm-tier-subscription", inputs: { newTierSubscription: "newTierSubscription" }, outputs: { confirm: "confirm", cancel: "cancel" }, ngImport: i0, template: "{{\n  'tiers.upgrade-downgrade.modal.downgrade.message.1'\n    | translate: {nextTier: newTierSubscription.tier}\n}}\n\n<div class=\"btn-wrapper\">\n  <button class=\"button\" axButton (click)=\"confirm.next()\" filled fullWidth color=\"primary\">\n    {{ 'tiers.upgrade-downgrade.modal.downgrade.confirm.free' | translate }}\n  </button>\n  <button axButton (click)=\"cancel.next()\" color=\"danger\">\n    {{ 'label.cancel' | translate }}\n  </button>\n</div>\n", styles: [":host{display:block;padding:1rem}.btn-wrapper{margin-top:1rem;display:flex;flex-direction:column;gap:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1.ButtonDirective, selector: "[axButton]", inputs: ["color", "labelHideMobile", "smallButton", "bigButton", "fullWidth", "filled", "outline", "icon-button", "hoverLabel", "hover", "lowercase", "disabled"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConfirmTierSubscriptionComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-confirm-tier-subscription', standalone: true, imports: [CommonModule, ButtonModule, TranslatePipe], template: "{{\n  'tiers.upgrade-downgrade.modal.downgrade.message.1'\n    | translate: {nextTier: newTierSubscription.tier}\n}}\n\n<div class=\"btn-wrapper\">\n  <button class=\"button\" axButton (click)=\"confirm.next()\" filled fullWidth color=\"primary\">\n    {{ 'tiers.upgrade-downgrade.modal.downgrade.confirm.free' | translate }}\n  </button>\n  <button axButton (click)=\"cancel.next()\" color=\"danger\">\n    {{ 'label.cancel' | translate }}\n  </button>\n</div>\n", styles: [":host{display:block;padding:1rem}.btn-wrapper{margin-top:1rem;display:flex;flex-direction:column;gap:1rem}\n"] }]
        }], propDecorators: { newTierSubscription: [{
                type: Input
            }], confirm: [{
                type: Output
            }], cancel: [{
                type: Output
            }] } });

class TierInfoService {
    constructor() {
        this.tierInfo$ = new BehaviorSubject(undefined);
        this.currentTier$ = new BehaviorSubject(undefined);
        this.pendingTier$ = new BehaviorSubject(undefined);
        this.verificationPending$ = this.tierInfo$.pipe(map((tierInfo) => this._pending(tierInfo)), shareReplay(1));
    }
    setTierInfo(tierInfo, settings) {
        this.tierInfo$.next(tierInfo);
        if (this._pending(tierInfo)) {
            this.currentTier$.next(settings.tier || AccountSettingsRepresentation.TierEnum.FREE);
        }
        else {
            this.currentTier$.next(tierInfo.currentTier || AccountSettingsRepresentation.TierEnum.FREE);
        }
        this.pendingTier$.next(tierInfo.pendingDowngradeTier || AccountSettingsRepresentation.TierEnum.FREE);
    }
    _pending(tierInfo) {
        if (tierInfo?.currentSubscriptionInfo?.latestInvoice?.paymentIntent) {
            return tierInfo.currentSubscriptionInfo.latestInvoice.paymentIntent.status !== 'succeeded';
        }
        else {
            return false;
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TierInfoService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TierInfoService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TierInfoService, decorators: [{
            type: Injectable,
            args: [{ providedIn: 'root' }]
        }] });

class TierPaymentStepperComponent {
    constructor(_tiersSubscriptionService, _tierInfoService, _settingsService, _snackbar, _translate, _environment, _matomo) {
        this._tiersSubscriptionService = _tiersSubscriptionService;
        this._tierInfoService = _tierInfoService;
        this._settingsService = _settingsService;
        this._snackbar = _snackbar;
        this._translate = _translate;
        this._environment = _environment;
        this._matomo = _matomo;
        this.mode = 'billing';
        this.done = new EventEmitter();
        this.TierEnum = TierSubscriptionRepresentation.TierEnum;
        this.loading$ = new BehaviorSubject(false);
    }
    createTierSubscription({ paymentMethod, promoCode, }) {
        this.loading$.next(true);
        this._matomo.trackEvent('upgrade_tier', UpgradeTierActionType.TIER_UPGRADE_CHECKOUT_PAYMENT +
            '_' +
            (paymentMethod ? paymentMethod.card?.brand || '' : 'no payment method') +
            ' ' +
            promoCode);
        this._tiersSubscriptionService
            .createTierSubscription(this.newTierSubscription.tier || 'FREE', paymentMethod.id, promoCode ? promoCode : undefined)
            .pipe(catchError((err) => {
            this.loading$.next(false);
            if (err.error === 'TIER_SUBSCRIPTION_PROMOTION_CODE_NOT_FOUND') {
                this._snackbar.open(this._translate.instant('tiers.change.failed.snackbar.message.promoCode'), undefined, { duration: 10000 });
            }
            else {
                this._snackbar.open(this._translate.instant('tiers.change.failed.snackbar.message'), undefined, { duration: 10000 });
            }
            throw err;
        }), switchMap((currentSubscriptionInfo) => {
            if (currentSubscriptionInfo?.latestInvoice?.paymentIntent?.status === 'requires_action') {
                return this._environment.string$('STRIPE_API_KEY').pipe(first(), switchMap((stripeApiKey) => {
                    const stripe = Stripe(stripeApiKey);
                    return from(stripe.handleNextAction({
                        clientSecret: currentSubscriptionInfo.latestInvoice?.paymentIntent?.clientSecret,
                    }));
                }));
            }
            else {
                return of({});
            }
        }), switchMap(({ error }) => {
            if (error) {
                this._snackbar.open(error.message, undefined, { duration: 10000 });
                return this._updateTiers$();
            }
            else {
                return this._updateTiersAfterPayment$();
            }
        }))
            .subscribe(() => {
            this._matomo.trackEvent('upgrade_tier', UpgradeTierActionType.TIER_UPGRADE_CHECKOUT_COMPLETE +
                '_' +
                this.newTierSubscription.tier +
                '_' +
                (this.newTierSubscription.price || 0) / 100, '', (this.newTierSubscription.price || 0) / 100);
            this.loading$.next(false);
            this.done.next();
        });
    }
    cancelTierSubscription() {
        this.loading$.next(true);
        this._tiersSubscriptionService
            .cancelTierSubscription()
            .pipe(switchMap(() => this._updateTiers$()))
            .subscribe(() => {
            this.loading$.next(false);
            this.done.next();
        });
    }
    _updateTiers$() {
        return combineLatest([
            this._tiersSubscriptionService.getTierSubscriptionInfo(),
            this._settingsService.getAccountSettings(),
        ]).pipe(map(([tierInfo, settings]) => {
            this._tierInfoService.setTierInfo(tierInfo, settings);
            return tierInfo;
        }));
    }
    _updateTiersAfterPayment$() {
        return this._updateTiers$().pipe(tap((tierInfo) => {
            this.loading$.next(false);
            if (tierInfo?.pendingDowngradeTier) {
                this._snackbar.open(this._translate.instant('tiers.downgrade.success.snackbar.message', {
                    tierType: tierInfo.pendingDowngradeTier,
                    renewalDate: formatDate(tierInfo.renewalDate, {
                        languageCode: 'en',
                        countryCode: 'be',
                    }),
                }), undefined, { duration: 10000 });
            }
            else {
                this._snackbar.open(this._translate.instant('tiers.upgrade.success.snackbar.message', {
                    tierType: tierInfo.currentTier || TierSubscriptionInfoRepresentation.CurrentTierEnum.FREE,
                }), undefined, { duration: 10000 });
            }
        }));
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TierPaymentStepperComponent, deps: [{ token: i1$1.TierSubscriptionsService }, { token: TierInfoService }, { token: i1$1.SettingsService }, { token: i3$1.MatSnackBar }, { token: i6$1.TranslateService }, { token: i5.EnvironmentService }, { token: i7$1.MatomoService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TierPaymentStepperComponent, isStandalone: true, selector: "ax-tier-payment-stepper", inputs: { newTierSubscription: "newTierSubscription", mode: "mode", returnUrl: "returnUrl" }, outputs: { done: "done" }, ngImport: i0, template: "<ax-spinner *ngIf=\"loading$ | async; else content\"></ax-spinner>\n\n<ng-template #content>\n  <ng-template #stepper>\n    <ax-edit-billing-information-stepper\n      *ngIf=\"mode === 'billing'\"\n      (confirm)=\"mode = 'pay'\"\n    ></ax-edit-billing-information-stepper>\n    <ax-confirm-tier-payment\n      *ngIf=\"mode === 'pay'\"\n      [tierSubscription]=\"newTierSubscription\"\n      (confirm)=\"createTierSubscription($event)\"\n      (cancel)=\"done.next()\"\n    ></ax-confirm-tier-payment>\n  </ng-template>\n\n  <ax-confirm-tier-subscription\n    *ngIf=\"newTierSubscription.tier === TierEnum.FREE; else stepper\"\n    [newTierSubscription]=\"newTierSubscription\"\n    (confirm)=\"cancelTierSubscription()\"\n    (cancel)=\"done.next()\"\n  ></ax-confirm-tier-subscription>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i8.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: SnackbarModule }, { kind: "ngmodule", type: MatSnackBarModule }, { kind: "component", type: EditBillingInformationStepperComponent, selector: "ax-edit-billing-information-stepper", inputs: ["form"], outputs: ["confirm"] }, { kind: "component", type: ConfirmTierPaymentComponent, selector: "ax-confirm-tier-payment", inputs: ["tierSubscription"], outputs: ["confirm", "cancel"] }, { kind: "component", type: ConfirmTierSubscriptionComponent, selector: "ax-confirm-tier-subscription", inputs: ["newTierSubscription"], outputs: ["confirm", "cancel"] }, { kind: "ngmodule", type: SpinnerModule }, { kind: "component", type: i8$2.SpinnerComponent, selector: "ax-spinner" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TierPaymentStepperComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-tier-payment-stepper', standalone: true, imports: [
                        CommonModule,
                        FormsModule,
                        ReactiveFormsModule,
                        SnackbarModule,
                        MatSnackBarModule,
                        EditBillingInformationStepperComponent,
                        ConfirmTierPaymentComponent,
                        ConfirmTierSubscriptionComponent,
                        SpinnerModule,
                    ], template: "<ax-spinner *ngIf=\"loading$ | async; else content\"></ax-spinner>\n\n<ng-template #content>\n  <ng-template #stepper>\n    <ax-edit-billing-information-stepper\n      *ngIf=\"mode === 'billing'\"\n      (confirm)=\"mode = 'pay'\"\n    ></ax-edit-billing-information-stepper>\n    <ax-confirm-tier-payment\n      *ngIf=\"mode === 'pay'\"\n      [tierSubscription]=\"newTierSubscription\"\n      (confirm)=\"createTierSubscription($event)\"\n      (cancel)=\"done.next()\"\n    ></ax-confirm-tier-payment>\n  </ng-template>\n\n  <ax-confirm-tier-subscription\n    *ngIf=\"newTierSubscription.tier === TierEnum.FREE; else stepper\"\n    [newTierSubscription]=\"newTierSubscription\"\n    (confirm)=\"cancelTierSubscription()\"\n    (cancel)=\"done.next()\"\n  ></ax-confirm-tier-subscription>\n</ng-template>\n" }]
        }], ctorParameters: () => [{ type: i1$1.TierSubscriptionsService }, { type: TierInfoService }, { type: i1$1.SettingsService }, { type: i3$1.MatSnackBar }, { type: i6$1.TranslateService }, { type: i5.EnvironmentService }, { type: i7$1.MatomoService }], propDecorators: { newTierSubscription: [{
                type: Input
            }], mode: [{
                type: Input
            }], returnUrl: [{
                type: Input
            }], done: [{
                type: Output
            }] } });

class TiersComponent {
    constructor(_elementRef, _tierSubscriptionService, _settingsService, _tierInfoService, _overlayService, _environment, _snackbar, _translate, _matomo) {
        this._elementRef = _elementRef;
        this._tierSubscriptionService = _tierSubscriptionService;
        this._settingsService = _settingsService;
        this._tierInfoService = _tierInfoService;
        this._overlayService = _overlayService;
        this._environment = _environment;
        this._snackbar = _snackbar;
        this._translate = _translate;
        this._matomo = _matomo;
        this.tierChange = new EventEmitter();
        this.tierInfo$ = this._tierInfoService.tierInfo$;
        this.currentTier$ = this._tierInfoService.currentTier$;
        this.pendingTier$ = this._tierInfoService.pendingTier$;
        this.verificationPending$ = this._tierInfoService.verificationPending$;
        this.loading$ = new BehaviorSubject(false);
        this.features = Object.values(FeatureType);
        this.collapsedFree = false;
        this.collapsedBasic = false;
        this.collapsedPro = false;
        this.collapsedEnterprise = false;
        this.showLeftButton = false;
        this.showRightButton = true;
        this._subscription = new Subscription();
    }
    ngOnInit() {
        this._updateTiers$().subscribe();
        this._subscription = this.currentTier$.subscribe((currentTier) => {
            this.tierChange.next(currentTier || TierSubscriptionInfoRepresentation.CurrentTierEnum.FREE);
        });
    }
    ngOnDestroy() {
        this._subscription.unsubscribe();
    }
    changeTierSubscription(newTierSubscription) {
        this._matomo.trackEvent('upgrade_tier', UpgradeTierActionType.TIER_UPGRADE + '_' + newTierSubscription.tier);
        const overlay = this._overlayService.createModal(this._elementRef, TierPaymentStepperComponent, {
            title: isTierUpgrade(this.currentTier$.value || TierSubscriptionInfoRepresentation.CurrentTierEnum.FREE, newTierSubscription.tier || TierSubscriptionInfoRepresentation.CurrentTierEnum.FREE)
                ? 'tiers.upgrade-downgrade.modal.upgrade.title'
                : 'tiers.upgrade-downgrade.modal.downgrade.title',
            titleOpts: {
                currentTier: this.currentTier$.value || TierSubscriptionInfoRepresentation.CurrentTierEnum.FREE,
                nextTier: newTierSubscription.tier || '',
            },
            shadowDOM: false,
            init: (modal) => {
                modal.newTierSubscription = newTierSubscription;
                modal.done.subscribe(() => {
                    this._overlayService.closeModal(overlay);
                });
            },
        });
    }
    cancelDowngradeTier() {
        this._overlayService.createModal(this._elementRef, CancelTierSubscriptionComponent, {
            title: 'delete.confirmation',
            modalSize: ModalSize.EXTRA_SMALL,
            init: (component) => component.confirmClicked
                .pipe(first(), tap(() => this.loading$.next(true)), switchMap(() => this._tierSubscriptionService.createTierSubscription(this.currentTier$.value || TierSubscriptionInfoRepresentation.CurrentTierEnum.FREE)), switchMap(() => this._updateTiers$()), catchError((err) => {
                this.loading$.next(false);
                this._snackbar.open(this._translate.instant('tiers.cancel.failed.snackbar.message'), undefined, { duration: 10000 });
                this._overlayService.closeModal();
                throw err;
            }))
                .subscribe((payment) => {
                if (payment) {
                    this.loading$.next(false);
                    // this.pendingTier$.next(payment.pendingDowngradeTier);
                    this._snackbar.open(this._translate.instant('tiers.cancel.success.snackbar.message'), undefined, { duration: 10000 });
                }
                this._overlayService.closeModal();
            }),
        });
    }
    retry() {
        let stripe;
        this._environment
            .string$('STRIPE_API_KEY')
            .pipe(first(), switchMap((stripeApiKey) => {
            const currentInvoice = this.tierInfo$.value?.currentSubscriptionInfo?.latestInvoice;
            if (currentInvoice?.paymentIntent) {
                stripe = Stripe(stripeApiKey);
                return from(stripe.retrievePaymentIntent(currentInvoice.paymentIntent.clientSecret));
            }
            else {
                this._snackbar.open(this._translate.instant('error.unknown'), undefined, {
                    duration: 10000,
                });
                this.cancel();
                return NEVER;
            }
        }))
            .subscribe(({ paymentIntent }) => {
            if (paymentIntent?.status === 'requires_action') {
                stripe.handleNextAction({ clientSecret: paymentIntent.client_secret });
            }
            else if (paymentIntent.status === 'requires_payment_method') {
                const overlay = this._overlayService.createModal(this._elementRef, TierPaymentStepperComponent, {
                    modalSize: ModalSize.SMALL,
                    closeOnBackdropClick: false,
                    shadowDOM: false,
                    init: (modal) => {
                        modal.mode = 'pay';
                        modal.newTierSubscription =
                            this.tierInfo$.value?.availableTiers?.find((tier) => tier.price === paymentIntent.amount) || {};
                        modal.done.subscribe(() => {
                            this._overlayService.closeModal(overlay);
                        });
                    },
                });
            }
            else {
                this._snackbar.open(this._translate.instant('error.unknown'), undefined, {
                    duration: 10000,
                });
                this.cancel();
            }
        });
    }
    cancel() {
        // TODO: ask the backend to cancel tier change
    }
    _updateTiers$() {
        return combineLatest([
            this._tierSubscriptionService.getTierSubscriptionInfo(),
            this._settingsService.getAccountSettings(),
        ]).pipe(map(([tierInfo, settings]) => {
            this._tierInfoService.setTierInfo(tierInfo, settings);
            return tierInfo;
        }));
    }
    toggleFeatures(event, tierType) {
        event.preventDefault();
        switch (tierType) {
            case 'FREE':
                this.collapsedFree = !this.collapsedFree;
                break;
            case 'BASIC':
                this.collapsedBasic = !this.collapsedBasic;
                break;
            case 'PRO':
                this.collapsedPro = !this.collapsedPro;
                break;
            case 'ENTERPRISE':
                this.collapsedEnterprise = !this.collapsedEnterprise;
                break;
            default:
        }
    }
    isCollapsed(tierType) {
        if (this.collapsedFree && tierType === TierSubscriptionRepresentation.TierEnum.FREE) {
            return true;
        }
        if (this.collapsedBasic && tierType === TierSubscriptionRepresentation.TierEnum.BASIC) {
            return true;
        }
        if (this.collapsedPro && tierType === TierSubscriptionRepresentation.TierEnum.PRO) {
            return true;
        }
        if (this.collapsedEnterprise &&
            tierType === TierSubscriptionRepresentation.TierEnum.ENTERPRISE) {
            return true;
        }
        return false;
    }
    onScroll() {
        const scrollPositionLeft = this.scrollable.measureScrollOffset('left');
        const scrollPositionRight = this.scrollable.measureScrollOffset('right');
        if (scrollPositionLeft > 0) {
            this.showLeftButton = true;
        }
        else {
            this.showLeftButton = false;
        }
        if (scrollPositionRight > 0) {
            this.showRightButton = true;
        }
        else {
            this.showRightButton = false;
        }
    }
    scrollLeft() {
        const leftPosition = this.scrollable.measureScrollOffset('left');
        this.scrollable.scrollTo({ left: leftPosition - 300, behavior: 'smooth' });
    }
    scrollRight() {
        const leftPosition = this.scrollable.measureScrollOffset('left');
        this.scrollable.scrollTo({ left: leftPosition + 300, behavior: 'smooth' });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TiersComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.TierSubscriptionsService }, { token: i1$1.SettingsService }, { token: TierInfoService }, { token: i3$2.OverlayService }, { token: i5.EnvironmentService }, { token: i3$1.MatSnackBar }, { token: i6$1.TranslateService }, { token: i7$1.MatomoService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TiersComponent, selector: "ax-tiers", outputs: { tierChange: "tierChange" }, viewQueries: [{ propertyName: "scrollable", first: true, predicate: CdkScrollable, descendants: true }], ngImport: i0, template: "<ax-snackbar color=\"orange\" [open]=\"(verificationPending$ | async) ?? false\">\n  <span>{{ 'tiers.upgrade.verification-failed' | translate }}</span>\n  <ax-button color=\"primary\" filled (click)=\"retry()\">{{ 'action.retry' | translate }}</ax-button>\n  <!-- <ax-button color=\"primary\" filled (click)=\"cancel()\">{{ 'label.cancel' | translate }}</ax-button> -->\n</ax-snackbar>\n\n<mat-progress-bar\n  class=\"progress-bar\"\n  *ngIf=\"(loading$ | async) || (tierInfo$ | async) === null\"\n  mode=\"indeterminate\"\n></mat-progress-bar>\n\n<div class=\"tiers-wrapper\" *ngIf=\"tierInfo$ | async as tierInfo\">\n  <div class=\"start-gradient\" *ngIf=\"showLeftButton\" (click)=\"scrollLeft()\">\n    <button class=\"arrow-button\" axButton icon-button>\n      <ax-icon class=\"icon\" name=\"arrow-left\"></ax-icon>\n    </button>\n  </div>\n  <div class=\"tiers\" cdkScrollable (scroll)=\"onScroll()\">\n    <div class=\"tier\" *ngFor=\"let tier of tierInfo.availableTiers\">\n      <h3 class=\"title\">\n        <b>{{ 'tier.type.' + tier.tier | translate }}</b>\n        <ng-container *ngIf=\"(tier.price || 0) > 0\">\n          <b>\n            -\n            {{\n              (tier.price || 0) / 100\n                | currency: (tier.currency | uppercase) || 'eur' : 'symbol' : '1.0-2'\n            }}</b\n          >\n          <span class=\"month\"> / {{ 'label.month' | translate }}</span>\n        </ng-container>\n        <div\n          class=\"downgrade\"\n          *ngIf=\"(currentTier$ | async) === tier.tier && tierInfo.pendingDowngradeTier\"\n        >\n          {{\n            'tiers.pending.downgrade'\n              | translate: {renewalDate: (tierInfo$ | async)?.renewalDate | formatDate}\n          }}\n        </div>\n      </h3>\n\n      <p>{{ 'tier.type.' + tier.tier + '.description' | translate }}</p>\n\n      <div class=\"action-wrapper\">\n        <button class=\"feature-action\" (click)=\"toggleFeatures($event, tier.tier)\">\n          {{ 'label.see.features' | translate }}\n          <ax-icon\n            class=\"icon feature-icon\"\n            [ngClass]=\"{collapsed: isCollapsed(tier.tier)}\"\n            name=\"arrow-down\"\n          ></ax-icon>\n        </button>\n        <ax-button\n          *ngIf=\"tierInfo.pendingDowngradeTier !== tier.tier\"\n          class=\"button\"\n          [disabled]=\"\n            (currentTier$ | async) === tier.tier || ((verificationPending$ | async) ?? true)\n          \"\n          [loading]=\"(currentTier$ | async) === null || (loading$ | async)\"\n          filled\n          color=\"primary\"\n          fullWidth\n          (click)=\"changeTierSubscription(tier)\"\n        >\n          {{\n            (currentTier$ | async) === tier.tier\n              ? ('label.tier.active' | translate)\n              : ('label.select' | translate)\n          }}\n        </ax-button>\n        <ax-button\n          *ngIf=\"tierInfo.pendingDowngradeTier === tier.tier\"\n          class=\"button\"\n          [loading]=\"loading$ | async\"\n          outline\n          color=\"primary\"\n          fullWidth\n          (click)=\"cancelDowngradeTier()\"\n        >\n          {{ 'label.cancel' | translate }}\n        </ax-button>\n      </div>\n\n      <ul class=\"summary\" [ngClass]=\"{collapsed: isCollapsed(tier.tier)}\">\n        <li *ngFor=\"let feature of features\">\n          <ax-icon\n            class=\"icon\"\n            [ngClass]=\"{allowed: tier.tier | isFeatureAllowed: feature}\"\n            [name]=\"(tier.tier | isFeatureAllowed: feature) ? 'check' : 'close'\"\n          ></ax-icon>\n          <span>{{ 'tier.description.' + feature | translate }}</span>\n        </li>\n      </ul>\n    </div>\n  </div>\n  <div class=\"end-gradient\" *ngIf=\"showRightButton\" (click)=\"scrollRight()\">\n    <button class=\"arrow-button\" axButton icon-button>\n      <ax-icon class=\"icon\" name=\"arrow-right\"></ax-icon>\n    </button>\n  </div>\n</div>\n", styles: [".progress-bar{position:absolute}.tiers-wrapper{max-width:1200px;margin:0 auto;position:relative;width:100%}.tiers{display:grid;gap:1rem;padding:1rem}@media only screen and (min-width: 600px){.tiers{overflow:auto;grid-template-columns:repeat(4,minmax(300px,1fr));align-items:flex-start}}@media only screen and (min-width: 1200px){.tiers{overflow:auto;grid-template-columns:repeat(4,minmax(280px,1fr));align-items:flex-start}}.tier{background-color:#fff;border-radius:var(--border-radius-button);padding:1.5rem;display:flex;flex-direction:column}@media only screen and (min-width: 600px){.tier{display:grid;grid-template-rows:min-content 6rem max-content max-content;align-items:flex-start;width:100%}}@media only screen and (min-width: 600px){.button{width:100%}}.title,p{margin:0}.title{margin-bottom:1rem}.month{font-size:.75rem}.downgrade{font-size:.875rem;font-weight:400;margin-top:.25rem}.summary{list-style-type:none;padding:0;margin:0;text-align:left}.summary li{display:flex;align-items:flex-start;gap:1rem;padding:.1rem 0}.summary li:first-child{margin-top:1rem}.summary li .icon{min-width:24px}.summary li .icon.allowed{color:var(--primary-color-500)}@media only screen and (max-width: 599px){.summary{max-height:0;overflow:hidden;opacity:.2;transition:max-height 1s cubic-bezier(0,1,0,1),opacity .4s ease;will-change:max-height,opacity}.summary.collapsed{max-height:2000px;opacity:1;transition:max-height 1s ease-in-out,opacity .4s ease-out}}.action-wrapper{display:flex;justify-content:space-between;align-items:center;margin-top:1rem}.feature-action{display:inline-flex;align-items:center;gap:.5rem;font-size:.75rem;border:none;background:none}.feature-action,.feature-action:visited,.feature-action:hover{color:var(--accent-color-500)}.feature-action:active,.feature-action:focus{color:var(--accent-color-500)}.feature-action .icon{display:inline;width:.75rem;height:.75rem}@media only screen and (min-width: 600px){.feature-action{display:none}}.feature-icon{transform:rotate(0);transition:transform .4s cubic-bezier(.25,.8,.25,1)}.feature-icon.collapsed{transform:rotate(-180deg)}.end-gradient,.start-gradient{display:none}@media only screen and (min-width: 600px){.end-gradient,.start-gradient{display:block;position:absolute;top:0;right:0;bottom:0;width:50px;height:100%;cursor:pointer}}@media only screen and (min-width: 1200px){.end-gradient,.start-gradient{display:none}}@media only screen and (min-width: 600px){.end-gradient{background:linear-gradient(90deg,transparent,50%,#ebebeb)}.end-gradient:hover{background:linear-gradient(90deg,transparent,50%,#d2d2d2)}}@media only screen and (min-width: 600px){.start-gradient{left:0;right:auto;background:linear-gradient(-90deg,transparent,50%,#ebebeb)}.start-gradient:hover{background:linear-gradient(-90deg,transparent,50%,#d2d2d2)}}.arrow-button{position:sticky;z-index:1;top:50vh;transform:translateY(-50%)}\n"], dependencies: [{ kind: "directive", type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.IconComponent, selector: "ax-icon", inputs: ["name", "inline"] }, { kind: "component", type: i10$1.SnackbarComponent, selector: "ax-snackbar", inputs: ["type", "timeout", "dismissible", "open", "icon", "color"], outputs: ["didClose"] }, { kind: "directive", type: i1.ButtonDirective, selector: "[axButton]", inputs: ["color", "labelHideMobile", "smallButton", "bigButton", "fullWidth", "filled", "outline", "icon-button", "hoverLabel", "hover", "lowercase", "disabled"] }, { kind: "component", type: i1.ButtonComponent, selector: "ax-button", inputs: ["url", "ariaLabel", "target"] }, { kind: "component", type: i12$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i13.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "pipe", type: i8.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i8.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i6$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i7$1.FormatDatePipe, name: "formatDate" }, { kind: "pipe", type: i7$1.IsFeatureAllowedPipe, name: "isFeatureAllowed" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TiersComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-tiers', template: "<ax-snackbar color=\"orange\" [open]=\"(verificationPending$ | async) ?? false\">\n  <span>{{ 'tiers.upgrade.verification-failed' | translate }}</span>\n  <ax-button color=\"primary\" filled (click)=\"retry()\">{{ 'action.retry' | translate }}</ax-button>\n  <!-- <ax-button color=\"primary\" filled (click)=\"cancel()\">{{ 'label.cancel' | translate }}</ax-button> -->\n</ax-snackbar>\n\n<mat-progress-bar\n  class=\"progress-bar\"\n  *ngIf=\"(loading$ | async) || (tierInfo$ | async) === null\"\n  mode=\"indeterminate\"\n></mat-progress-bar>\n\n<div class=\"tiers-wrapper\" *ngIf=\"tierInfo$ | async as tierInfo\">\n  <div class=\"start-gradient\" *ngIf=\"showLeftButton\" (click)=\"scrollLeft()\">\n    <button class=\"arrow-button\" axButton icon-button>\n      <ax-icon class=\"icon\" name=\"arrow-left\"></ax-icon>\n    </button>\n  </div>\n  <div class=\"tiers\" cdkScrollable (scroll)=\"onScroll()\">\n    <div class=\"tier\" *ngFor=\"let tier of tierInfo.availableTiers\">\n      <h3 class=\"title\">\n        <b>{{ 'tier.type.' + tier.tier | translate }}</b>\n        <ng-container *ngIf=\"(tier.price || 0) > 0\">\n          <b>\n            -\n            {{\n              (tier.price || 0) / 100\n                | currency: (tier.currency | uppercase) || 'eur' : 'symbol' : '1.0-2'\n            }}</b\n          >\n          <span class=\"month\"> / {{ 'label.month' | translate }}</span>\n        </ng-container>\n        <div\n          class=\"downgrade\"\n          *ngIf=\"(currentTier$ | async) === tier.tier && tierInfo.pendingDowngradeTier\"\n        >\n          {{\n            'tiers.pending.downgrade'\n              | translate: {renewalDate: (tierInfo$ | async)?.renewalDate | formatDate}\n          }}\n        </div>\n      </h3>\n\n      <p>{{ 'tier.type.' + tier.tier + '.description' | translate }}</p>\n\n      <div class=\"action-wrapper\">\n        <button class=\"feature-action\" (click)=\"toggleFeatures($event, tier.tier)\">\n          {{ 'label.see.features' | translate }}\n          <ax-icon\n            class=\"icon feature-icon\"\n            [ngClass]=\"{collapsed: isCollapsed(tier.tier)}\"\n            name=\"arrow-down\"\n          ></ax-icon>\n        </button>\n        <ax-button\n          *ngIf=\"tierInfo.pendingDowngradeTier !== tier.tier\"\n          class=\"button\"\n          [disabled]=\"\n            (currentTier$ | async) === tier.tier || ((verificationPending$ | async) ?? true)\n          \"\n          [loading]=\"(currentTier$ | async) === null || (loading$ | async)\"\n          filled\n          color=\"primary\"\n          fullWidth\n          (click)=\"changeTierSubscription(tier)\"\n        >\n          {{\n            (currentTier$ | async) === tier.tier\n              ? ('label.tier.active' | translate)\n              : ('label.select' | translate)\n          }}\n        </ax-button>\n        <ax-button\n          *ngIf=\"tierInfo.pendingDowngradeTier === tier.tier\"\n          class=\"button\"\n          [loading]=\"loading$ | async\"\n          outline\n          color=\"primary\"\n          fullWidth\n          (click)=\"cancelDowngradeTier()\"\n        >\n          {{ 'label.cancel' | translate }}\n        </ax-button>\n      </div>\n\n      <ul class=\"summary\" [ngClass]=\"{collapsed: isCollapsed(tier.tier)}\">\n        <li *ngFor=\"let feature of features\">\n          <ax-icon\n            class=\"icon\"\n            [ngClass]=\"{allowed: tier.tier | isFeatureAllowed: feature}\"\n            [name]=\"(tier.tier | isFeatureAllowed: feature) ? 'check' : 'close'\"\n          ></ax-icon>\n          <span>{{ 'tier.description.' + feature | translate }}</span>\n        </li>\n      </ul>\n    </div>\n  </div>\n  <div class=\"end-gradient\" *ngIf=\"showRightButton\" (click)=\"scrollRight()\">\n    <button class=\"arrow-button\" axButton icon-button>\n      <ax-icon class=\"icon\" name=\"arrow-right\"></ax-icon>\n    </button>\n  </div>\n</div>\n", styles: [".progress-bar{position:absolute}.tiers-wrapper{max-width:1200px;margin:0 auto;position:relative;width:100%}.tiers{display:grid;gap:1rem;padding:1rem}@media only screen and (min-width: 600px){.tiers{overflow:auto;grid-template-columns:repeat(4,minmax(300px,1fr));align-items:flex-start}}@media only screen and (min-width: 1200px){.tiers{overflow:auto;grid-template-columns:repeat(4,minmax(280px,1fr));align-items:flex-start}}.tier{background-color:#fff;border-radius:var(--border-radius-button);padding:1.5rem;display:flex;flex-direction:column}@media only screen and (min-width: 600px){.tier{display:grid;grid-template-rows:min-content 6rem max-content max-content;align-items:flex-start;width:100%}}@media only screen and (min-width: 600px){.button{width:100%}}.title,p{margin:0}.title{margin-bottom:1rem}.month{font-size:.75rem}.downgrade{font-size:.875rem;font-weight:400;margin-top:.25rem}.summary{list-style-type:none;padding:0;margin:0;text-align:left}.summary li{display:flex;align-items:flex-start;gap:1rem;padding:.1rem 0}.summary li:first-child{margin-top:1rem}.summary li .icon{min-width:24px}.summary li .icon.allowed{color:var(--primary-color-500)}@media only screen and (max-width: 599px){.summary{max-height:0;overflow:hidden;opacity:.2;transition:max-height 1s cubic-bezier(0,1,0,1),opacity .4s ease;will-change:max-height,opacity}.summary.collapsed{max-height:2000px;opacity:1;transition:max-height 1s ease-in-out,opacity .4s ease-out}}.action-wrapper{display:flex;justify-content:space-between;align-items:center;margin-top:1rem}.feature-action{display:inline-flex;align-items:center;gap:.5rem;font-size:.75rem;border:none;background:none}.feature-action,.feature-action:visited,.feature-action:hover{color:var(--accent-color-500)}.feature-action:active,.feature-action:focus{color:var(--accent-color-500)}.feature-action .icon{display:inline;width:.75rem;height:.75rem}@media only screen and (min-width: 600px){.feature-action{display:none}}.feature-icon{transform:rotate(0);transition:transform .4s cubic-bezier(.25,.8,.25,1)}.feature-icon.collapsed{transform:rotate(-180deg)}.end-gradient,.start-gradient{display:none}@media only screen and (min-width: 600px){.end-gradient,.start-gradient{display:block;position:absolute;top:0;right:0;bottom:0;width:50px;height:100%;cursor:pointer}}@media only screen and (min-width: 1200px){.end-gradient,.start-gradient{display:none}}@media only screen and (min-width: 600px){.end-gradient{background:linear-gradient(90deg,transparent,50%,#ebebeb)}.end-gradient:hover{background:linear-gradient(90deg,transparent,50%,#d2d2d2)}}@media only screen and (min-width: 600px){.start-gradient{left:0;right:auto;background:linear-gradient(-90deg,transparent,50%,#ebebeb)}.start-gradient:hover{background:linear-gradient(-90deg,transparent,50%,#d2d2d2)}}.arrow-button{position:sticky;z-index:1;top:50vh;transform:translateY(-50%)}\n"] }]
        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.TierSubscriptionsService }, { type: i1$1.SettingsService }, { type: TierInfoService }, { type: i3$2.OverlayService }, { type: i5.EnvironmentService }, { type: i3$1.MatSnackBar }, { type: i6$1.TranslateService }, { type: i7$1.MatomoService }], propDecorators: { tierChange: [{
                type: Output
            }], scrollable: [{
                type: ViewChild,
                args: [CdkScrollable]
            }] } });

class TiersModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TiersModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: TiersModule, declarations: [TiersComponent], imports: [ConfirmTierPaymentComponent,
            ConfirmTierSubscriptionComponent,
            CancelTierSubscriptionComponent,
            CommonModule,
            FormsModule,
            ReactiveFormsModule,
            TranslatePipe,
            HelperPipesModule,
            IconsModule,
            SnackbarModule,
            MatSnackBarModule,
            ButtonModule,
            EditBillingInformationStepperComponent,
            TierPaymentStepperComponent,
            MatProgressBarModule,
            CdkScrollableModule], exports: [TiersComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TiersModule, providers: [MatSnackBar], imports: [ConfirmTierPaymentComponent,
            ConfirmTierSubscriptionComponent,
            CancelTierSubscriptionComponent,
            CommonModule,
            FormsModule,
            ReactiveFormsModule,
            HelperPipesModule,
            IconsModule,
            SnackbarModule,
            MatSnackBarModule,
            ButtonModule,
            EditBillingInformationStepperComponent,
            TierPaymentStepperComponent,
            MatProgressBarModule,
            CdkScrollableModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TiersModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [TiersComponent],
                    imports: [
                        ConfirmTierPaymentComponent,
                        ConfirmTierSubscriptionComponent,
                        CancelTierSubscriptionComponent,
                        CommonModule,
                        FormsModule,
                        ReactiveFormsModule,
                        TranslatePipe,
                        HelperPipesModule,
                        IconsModule,
                        SnackbarModule,
                        MatSnackBarModule,
                        ButtonModule,
                        EditBillingInformationStepperComponent,
                        TierPaymentStepperComponent,
                        MatProgressBarModule,
                        CdkScrollableModule,
                    ],
                    exports: [TiersComponent],
                    providers: [MatSnackBar],
                }]
        }] });

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

export { CancelTierSubscriptionComponent, ConfirmTierPaymentComponent, ConfirmTierSubscriptionComponent, TierPaymentStepperComponent, TiersComponent, TiersModule };
//# sourceMappingURL=aztrix-components-tiers.mjs.map
