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

class CancelTierSubscriptionComponent {
    constructor() {
        this.confirmClicked = new EventEmitter();
    }
    confirm() {
        this.confirmClicked.emit();
    }
}
CancelTierSubscriptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: CancelTierSubscriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
CancelTierSubscriptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: CancelTierSubscriptionComponent, 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: "directive", type: i1.ButtonDirective, selector: "[axButton]", inputs: ["color", "labelHideMobile", "smallButton", "bigButton", "fullWidth", "filled", "outline", "icon-button", "hoverLabel", "hover", "lowercase", "disabled"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: CancelTierSubscriptionComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-cancel-tier-subscription', 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 TierInfoService {
    constructor() {
        this.tierInfo$ = new BehaviorSubject(null);
        this.currentTier$ = new BehaviorSubject(null);
        this.pendingTier$ = new BehaviorSubject(null);
        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);
        }
        else {
            this.currentTier$.next(tierInfo.currentTier);
        }
        this.pendingTier$.next(tierInfo.pendingDowngradeTier);
    }
    _pending(tierInfo) {
        var _a, _b;
        if ((_b = (_a = tierInfo === null || tierInfo === void 0 ? void 0 : tierInfo.currentSubscriptionInfo) === null || _a === void 0 ? void 0 : _a.latestInvoice) === null || _b === void 0 ? void 0 : _b.paymentIntent) {
            return tierInfo.currentSubscriptionInfo.latestInvoice.paymentIntent.status !== 'succeeded';
        }
        else {
            return false;
        }
    }
}
TierInfoService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: TierInfoService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
TierInfoService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: TierInfoService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: TierInfoService, decorators: [{
            type: Injectable,
            args: [{ providedIn: 'root' }]
        }] });

class ConfirmTierSubscriptionComponent {
    constructor() {
        this.confirm = new EventEmitter();
        this.cancel = new EventEmitter();
    }
}
ConfirmTierSubscriptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: ConfirmTierSubscriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
ConfirmTierSubscriptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: ConfirmTierSubscriptionComponent, 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: "directive", type: i1.ButtonDirective, selector: "[axButton]", inputs: ["color", "labelHideMobile", "smallButton", "bigButton", "fullWidth", "filled", "outline", "icon-button", "hoverLabel", "hover", "lowercase", "disabled"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: ConfirmTierSubscriptionComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-confirm-tier-subscription', 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 ConfirmTierPaymentComponent {
    constructor(_paymentsService, _tierSubscriptions) {
        this._paymentsService = _paymentsService;
        this._tierSubscriptions = _tierSubscriptions;
        this.confirm = new EventEmitter();
        this.cancel = new EventEmitter();
        this._paymentMethods$ = this._paymentsService
            .getPaymentMethods()
            .pipe(distinctUntilChanged(), shareReplay(1));
        this._emptyPaymentMethod = {
            id: null,
            card: null,
            created: null,
            type: null,
        };
        this._paymentMethodControl = new FormControl(this._emptyPaymentMethod);
        this._loading$ = new BehaviorSubject(false);
        this.promoCodeControl = new FormControl('');
        this.showPromoCode = false;
    }
    ngOnInit() {
        this._paymentMethods$.pipe(first()).subscribe((paymentMethods) => {
            if (paymentMethods === null || paymentMethods === void 0 ? void 0 : paymentMethods.length) {
                this._paymentMethodControl.setValue(paymentMethods[0]);
            }
        });
        this.promoCodeControl.valueChanges.pipe(distinctUntilChanged()).subscribe(() => {
            this.promoCodeControl.setValue(this.promoCodeControl.value.toUpperCase());
        });
    }
    changeMethod(event) {
        this._paymentMethodControl.setValue(event.value);
    }
    errorChanges(error) {
        if (!error) {
            this._stripeCard.cardErrors = undefined;
        }
    }
    pay() {
        var _a, _b, _c, _d;
        if (((_b = (_a = this._paymentMethodControl) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.id) || ((_c = this.discount) === null || _c === void 0 ? void 0 : _c.percentOff) === 100) {
            this.confirm.next({
                paymentMethod: (_d = this._paymentMethodControl) === null || _d === void 0 ? void 0 : _d.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) => {
                var _a, _b;
                if (valid && ((_a = this._paymentMethodControl) === null || _a === void 0 ? void 0 : _a.value)) {
                    this.confirm.next({
                        paymentMethod: (_b = this._paymentMethodControl) === null || _b === void 0 ? void 0 : _b.value,
                        promoCode: this.promoCodeControl.value,
                    });
                }
            });
        }
    }
    applyPromotionCode() {
        if (this._loading$.value === true) {
            return;
        }
        this.promoCodeControl.setErrors(undefined);
        this._loading$.next(true);
        this._tierSubscriptions.getDiscountInfo(this.promoCodeControl.value).subscribe({
            next: (discount) => {
                this.discount = discount;
                if (!(discount === null || discount === void 0 ? void 0 : 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;
        }
    }
}
ConfirmTierPaymentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: ConfirmTierPaymentComponent, deps: [{ token: i1$1.PaymentsService }, { token: i1$1.TierSubscriptionsService }], target: i0.ɵɵFactoryTarget.Component });
ConfirmTierPaymentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: ConfirmTierPaymentComponent, 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 / 100 | currency: tierSubscription.currency?.toUpperCase() }}\n    <span>/ {{ 'label.month' | translate }}</span>\n  </h2>\n  <h2 class=\"price\" *ngIf=\"discount?.active\">\n    {{\n      tierSubscription.price / 100 - (tierSubscription.price / 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 / 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\"\n  >\n    <mat-label>{{ 'payment.tab.billing.payment-methods' | translate }}</mat-label>\n    <mat-select\n      class=\"select\"\n      [(value)]=\"stripePaymentMethod\"\n      (selectionChange)=\"changeMethod($event)\"\n    >\n      <mat-select-trigger *ngIf=\"_paymentMethodControl?.value\">\n        <ax-payment-method\n          [method]=\"_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 [method]=\"paymentMethod\" [selectMode]=\"true\"></ax-payment-method>\n      </mat-option>\n      <mat-option [value]=\"_emptyPaymentMethod\">\n        <ax-payment-method [method]=\"emptyPaymentMethod\" [selectMode]=\"true\"></ax-payment-method>\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n\n  <div *ngIf=\"!_paymentMethodControl?.value.id\">\n    <ax-stripe-card\n      #cardDetails\n      [showErrors]=\"false\"\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: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4$1.IconComponent, selector: "ax-icon", inputs: ["name", "inline"] }, { kind: "component", type: i1.ButtonComponent, selector: "ax-button" }, { kind: "component", type: i6$1.StripeCardComponent, selector: "ax-stripe-card", inputs: ["amount", "showErrors"], outputs: ["payedClicked", "errorChanges"] }, { kind: "component", type: i7.PaymentMethodComponent, selector: "ax-payment-method", inputs: ["method", "selectMode"] }, { kind: "directive", type: i8.MatLegacyError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i8.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLegacyLabel, selector: "mat-label" }, { kind: "component", type: i9.MatLegacySelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "directive", type: i9.MatLegacySelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i10.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i11.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { kind: "component", type: i12.ChipComponent, selector: "ax-chip", inputs: ["icon", "removable"], outputs: ["removed"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: ConfirmTierPaymentComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-confirm-tier-payment', template: "<div class=\"product-info\" *ngIf=\"tierSubscription\">\n  <h4>{{ tierSubscription.tier }}</h4>\n  <h2 class=\"price\" [ngClass]=\"{off: discount?.active}\">\n    {{ tierSubscription.price / 100 | currency: tierSubscription.currency?.toUpperCase() }}\n    <span>/ {{ 'label.month' | translate }}</span>\n  </h2>\n  <h2 class=\"price\" *ngIf=\"discount?.active\">\n    {{\n      tierSubscription.price / 100 - (tierSubscription.price / 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 / 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\"\n  >\n    <mat-label>{{ 'payment.tab.billing.payment-methods' | translate }}</mat-label>\n    <mat-select\n      class=\"select\"\n      [(value)]=\"stripePaymentMethod\"\n      (selectionChange)=\"changeMethod($event)\"\n    >\n      <mat-select-trigger *ngIf=\"_paymentMethodControl?.value\">\n        <ax-payment-method\n          [method]=\"_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 [method]=\"paymentMethod\" [selectMode]=\"true\"></ax-payment-method>\n      </mat-option>\n      <mat-option [value]=\"_emptyPaymentMethod\">\n        <ax-payment-method [method]=\"emptyPaymentMethod\" [selectMode]=\"true\"></ax-payment-method>\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n\n  <div *ngIf=\"!_paymentMethodControl?.value.id\">\n    <ax-stripe-card\n      #cardDetails\n      [showErrors]=\"false\"\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: function () { return [{ type: i1$1.PaymentsService }, { type: i1$1.TierSubscriptionsService }]; }, propDecorators: { tierSubscription: [{
                type: Input
            }], confirm: [{
                type: Output
            }], cancel: [{
                type: Output
            }], _stripeCard: [{
                type: ViewChild,
                args: ['cardDetails']
            }] } });

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
            : 'no payment method' + ' ' + promoCode);
        this._tiersSubscriptionService
            .createTierSubscription(this.newTierSubscription.tier, paymentMethod.id, promoCode ? promoCode : null)
            .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) => {
            var _a, _b;
            if (((_b = (_a = currentSubscriptionInfo === null || currentSubscriptionInfo === void 0 ? void 0 : currentSubscriptionInfo.latestInvoice) === null || _a === void 0 ? void 0 : _a.paymentIntent) === null || _b === void 0 ? void 0 : _b.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 / 100, '', this.newTierSubscription.price / 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 === null || tierInfo === void 0 ? void 0 : 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,
                }), undefined, { duration: 10000 });
            }
        }));
    }
}
TierPaymentStepperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: TierPaymentStepperComponent, deps: [{ token: i1$1.TierSubscriptionsService }, { token: TierInfoService }, { token: i1$1.SettingsService }, { token: i3$1.MatLegacySnackBar }, { token: i4.TranslateService }, { token: i4.EnvironmentService }, { token: i4.MatomoService }], target: i0.ɵɵFactoryTarget.Component });
TierPaymentStepperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: TierPaymentStepperComponent, 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: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$2.EditBillingInformationStepperComponent, selector: "ax-edit-billing-information-stepper", inputs: ["form"], outputs: ["confirm"] }, { kind: "component", type: i7$1.SpinnerComponent, selector: "ax-spinner" }, { kind: "component", type: ConfirmTierSubscriptionComponent, selector: "ax-confirm-tier-subscription", inputs: ["newTierSubscription"], outputs: ["confirm", "cancel"] }, { kind: "component", type: ConfirmTierPaymentComponent, selector: "ax-confirm-tier-payment", inputs: ["tierSubscription"], outputs: ["confirm", "cancel"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: TierPaymentStepperComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-tier-payment-stepper', 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: function () { return [{ type: i1$1.TierSubscriptionsService }, { type: TierInfoService }, { type: i1$1.SettingsService }, { type: i3$1.MatLegacySnackBar }, { type: i4.TranslateService }, { type: i4.EnvironmentService }, { type: i4.MatomoService }]; }, propDecorators: { newTierSubscription: [{
                type: Input
            }], mode: [{
                type: Input
            }], returnUrl: [{
                type: Input
            }], done: [{
                type: Output
            }] } });

class TiersComponent {
    constructor(_tierSubscriptionService, _settingsService, _tierInfoService, _overlayService, _environment, _snackbar, _translate, _matomo) {
        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);
        });
    }
    ngOnDestroy() {
        this._subscription.unsubscribe();
    }
    changeTierSubscription(newTierSubscription) {
        this._matomo.trackEvent('upgrade_tier', UpgradeTierActionType.TIER_UPGRADE + '_' + newTierSubscription.tier);
        const overlay = this._overlayService.createModal(TierPaymentStepperComponent, {
            title: isTierUpgrade(this.currentTier$.value, newTierSubscription.tier)
                ? 'tiers.upgrade-downgrade.modal.upgrade.title'
                : 'tiers.upgrade-downgrade.modal.downgrade.title',
            titleOpts: {
                currentTier: this.currentTier$.value,
                nextTier: newTierSubscription.tier,
            },
            shadowDOM: false,
            init: (modal) => {
                modal.newTierSubscription = newTierSubscription;
                modal.done.subscribe(() => {
                    this._overlayService.closeModal(overlay);
                });
            },
        });
    }
    cancelDowngradeTier() {
        this._overlayService.createModal(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)), 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) => {
            var _a;
            const currentInvoice = (_a = this.tierInfo$.value.currentSubscriptionInfo) === null || _a === void 0 ? void 0 : _a.latestInvoice;
            if (currentInvoice === null || currentInvoice === void 0 ? void 0 : 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 === null || paymentIntent === void 0 ? void 0 : paymentIntent.status) === 'requires_action') {
                stripe.handleNextAction({ clientSecret: paymentIntent.client_secret });
            }
            else if (paymentIntent.status === 'requires_payment_method') {
                const overlay = this._overlayService.createModal(TierPaymentStepperComponent, {
                    modalSize: ModalSize.EXTRA_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' });
    }
}
TiersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: TiersComponent, deps: [{ token: i1$1.TierSubscriptionsService }, { token: i1$1.SettingsService }, { token: TierInfoService }, { token: i3$2.OverlayService }, { token: i4.EnvironmentService }, { token: i3$1.MatLegacySnackBar }, { token: i4.TranslateService }, { token: i4.MatomoService }], target: i0.ɵɵFactoryTarget.Component });
TiersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: TiersComponent, selector: "ax-tiers", outputs: { tierChange: "tierChange" }, viewQueries: [{ propertyName: "scrollable", first: true, predicate: CdkScrollable, descendants: true }], ngImport: i0, template: "<ax-snackbar color=\"warning\" [open]=\"verificationPending$ | async\">\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\">\n          <b> - {{ tier.price / 100 | currency: (tier.currency | uppercase):'symbol':'1.0-2' }}</b>\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]=\"(currentTier$ | async) === tier.tier || verificationPending\"\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: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.IconComponent, selector: "ax-icon", inputs: ["name", "inline"] }, { kind: "component", type: i8$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" }, { kind: "directive", type: i10$1.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i6.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i4.FormatDatePipe, name: "formatDate" }, { kind: "pipe", type: i4.IsFeatureAllowedPipe, name: "isFeatureAllowed" }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: TiersComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-tiers', template: "<ax-snackbar color=\"warning\" [open]=\"verificationPending$ | async\">\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\">\n          <b> - {{ tier.price / 100 | currency: (tier.currency | uppercase):'symbol':'1.0-2' }}</b>\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]=\"(currentTier$ | async) === tier.tier || verificationPending\"\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: function () { return [{ type: i1$1.TierSubscriptionsService }, { type: i1$1.SettingsService }, { type: TierInfoService }, { type: i3$2.OverlayService }, { type: i4.EnvironmentService }, { type: i3$1.MatLegacySnackBar }, { type: i4.TranslateService }, { type: i4.MatomoService }]; }, propDecorators: { tierChange: [{
                type: Output
            }], scrollable: [{
                type: ViewChild,
                args: [CdkScrollable]
            }] } });

class TiersModule {
}
TiersModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: TiersModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
TiersModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.5", ngImport: i0, type: TiersModule, declarations: [TiersComponent,
        ConfirmTierSubscriptionComponent,
        CancelTierSubscriptionComponent,
        TierPaymentStepperComponent,
        ConfirmTierPaymentComponent], imports: [CommonModule,
        FormsModule,
        ReactiveFormsModule,
        HelperPipesModule,
        IconsModule,
        SnackbarModule,
        MatLegacySnackBarModule,
        ButtonModule,
        EditBillingInformationStepperModule,
        SpinnerModule,
        StripeCardModule,
        PaymentMethodModule,
        MatLegacyFormFieldModule,
        MatLegacySelectModule,
        MatLegacyInputModule,
        ChipModule], exports: [TiersComponent] });
TiersModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: TiersModule, providers: [MatLegacySnackBar], imports: [CommonModule,
        FormsModule,
        ReactiveFormsModule,
        HelperPipesModule,
        IconsModule,
        SnackbarModule,
        MatLegacySnackBarModule,
        ButtonModule,
        EditBillingInformationStepperModule,
        SpinnerModule,
        StripeCardModule,
        PaymentMethodModule,
        MatLegacyFormFieldModule,
        MatLegacySelectModule,
        MatLegacyInputModule,
        ChipModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: TiersModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [
                        TiersComponent,
                        ConfirmTierSubscriptionComponent,
                        CancelTierSubscriptionComponent,
                        TierPaymentStepperComponent,
                        ConfirmTierPaymentComponent,
                    ],
                    imports: [
                        CommonModule,
                        FormsModule,
                        ReactiveFormsModule,
                        HelperPipesModule,
                        IconsModule,
                        SnackbarModule,
                        MatLegacySnackBarModule,
                        ButtonModule,
                        EditBillingInformationStepperModule,
                        SpinnerModule,
                        StripeCardModule,
                        PaymentMethodModule,
                        MatLegacyFormFieldModule,
                        MatLegacySelectModule,
                        MatLegacyInputModule,
                        ChipModule,
                    ],
                    exports: [TiersComponent],
                    providers: [MatLegacySnackBar],
                }]
        }] });

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

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