@vendasta/store/addon-list/addon-list.component.js

import { Component, EventEmitter, Input, Output } from '@angular/core';
import { Product } from '../shared';
import { ContractPricingService } from '@vendasta/core/billing/contract/contract-pricing/contract-pricing.service';
import 'rxjs/operators/switchMap';
import { isNullOrUndefined } from 'util';
var VaAddonListComponent = /** @class */ (function () {
    function VaAddonListComponent(contractPricingService) {
        this.contractPricingService = contractPricingService;
        this.showPricing = true;
        this._hasVerifiedContract = null;
        this._canAccessContractPricing = null;
        this.addonSelected = new EventEmitter();
        this.addonBilledProductMap = new Map();
        this.subscriptions = [];
    }
    Object.defineProperty(VaAddonListComponent.prototype, "hasVerifiedContract", {
        set: function (value) {
            this._hasVerifiedContract = value;
            this.populateBilledProduct();
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(VaAddonListComponent.prototype, "canAccessContractPricing", {
        set: function (value) {
            this._canAccessContractPricing = value;
            this.populateBilledProduct();
        },
        enumerable: true,
        configurable: true
    });
    VaAddonListComponent.prototype.ngOnInit = function () {
        this.populateBilledProduct();
    };
    VaAddonListComponent.prototype.populateBilledProduct = function () {
        var _this = this;
        if (this.displayContractPricing()) {
            this.addons.forEach(function (addon) {
                if (!_this.addonBilledProductMap.has(addon.addonId)) {
                    _this.addonBilledProductMap.set(addon.addonId, { isLoaded: false, billedProduct: null });
                    _this.subscriptions.push(_this.contractPricingService.getContractPricingForProduct(addon.appId, addon.addonId, false)
                        .subscribe(function (bp) {
                        _this.addonBilledProductMap.set(addon.addonId, { isLoaded: true, billedProduct: bp });
                    }));
                }
            });
        }
    };
    VaAddonListComponent.prototype.onClick = function (addonId) {
        this.addonSelected.emit(addonId);
    };
    VaAddonListComponent.prototype.instanceOfPricing = function (object) {
        if (typeof object === 'number') {
            return false;
        }
        return object.currency !== undefined && object.prices !== undefined;
    };
    VaAddonListComponent.prototype.getDisplayPricing = function (addon) {
        var price = addon.price;
        if (price && this.instanceOfPricing(price)) {
            return price;
        }
        return {
            currency: this.product.currency,
            prices: [{
                    price: addon.price,
                    frequency: addon.billingFrequency ? addon.billingFrequency : 'Monthly'
                }]
        };
    };
    VaAddonListComponent.prototype.noData = function () {
        return isNullOrUndefined(this._hasVerifiedContract) || isNullOrUndefined(this._canAccessContractPricing);
    };
    VaAddonListComponent.prototype.displayContractPricing = function () {
        return this._canAccessContractPricing && this._hasVerifiedContract;
    };
    VaAddonListComponent.prototype.isBilledProductLoaded = function (addon) {
        if (this.noData()) {
            return false;
        }
        if (this.displayContractPricing()) {
            var value = this.addonBilledProductMap.get(addon.addonId);
            return value ? value.isLoaded : false;
        }
        return true;
    };
    VaAddonListComponent.prototype.getBilledProduct = function (addon) {
        var value = this.addonBilledProductMap.get(addon.addonId);
        return value ? value.billedProduct : null;
    };
    VaAddonListComponent.prototype.ngOnDestroy = function () {
        this.subscriptions.forEach(function (subscription) { return subscription.unsubscribe(); });
    };
    VaAddonListComponent.decorators = [
        { type: Component, args: [{
                    selector: 'va-addon-list',
                    template: "<mat-list *ngIf=\"addons\" class=\"addon-list\"> <mat-divider></mat-divider> <ng-container *ngFor=\"let addon of addons\"> <mat-list-item (click)=\"onClick(addon.addonId)\"> <div class=\"addon-icon-title\"> <img *ngIf=\"addon.icon;else noIcon\" class=\"addon-icon\" [src]=\"addon.icon\" mat-list-avatar/> <ng-template #noIcon> <mat-icon class=\"addon-default-icon\" mat-list-icon>add_circle</mat-icon> </ng-template> <div class=\"addon-title-tagline\"> <p class=\"addon-title\" matLine>{{ addon.title }} </p> <p class=\"addon-tagline\" matLine>{{ addon.tagline }}</p> </div> </div> <div *ngIf=\"showPricing\" class=\"price-section\"> <va-pricing [pricing]=\"getDisplayPricing(addon)\" [highlightPrice]=\"false\" [hasVerifiedContract]=\"_hasVerifiedContract\" [billedProduct]=\"getBilledProduct(addon)\" [loaded]=\"isBilledProductLoaded(addon)\"> </va-pricing> </div> </mat-list-item> <mat-divider></mat-divider> </ng-container> </mat-list> ",
                    styles: [":host { display: block; } h2 + :host { margin: -8px 0; } :host ::ng-deep .mat-list-item.mat-2-line { height: auto !important; } :host ::ng-deep .mat-list .mat-list-item .mat-list-item-content { padding: 8px; align-items: flex-start; flex-direction: column; } @media screen and (min-width: 800px) { :host ::ng-deep .mat-list .mat-list-item .mat-list-item-content { flex-direction: row; } } .addon-list { position: relative; } .addon-default-icon { margin: 0 5px; color: #4caf50; } .addon-icon { width: 32px; height: 32px; } .addon-icon-title { flex-grow: 1; display: flex; width: 100%; } @media screen and (min-width: 800px) { .addon-icon-title { width: auto; } } .addon-title-tagline { padding: 0 16px 10px 8px; flex-grow: 1; } .addon-title-tagline .addon-title { color: #212121; font-size: 16px; line-height: 1.2; margin: 6px 0; white-space: normal; } .addon-title-tagline .addon-tagline { color: #616161; font-size: 14px; margin: 0; white-space: normal; } .price-section { min-width: 10em; margin-top: 6px; flex-shrink: 0; } mat-list-item:hover { background-color: #fafafa !important; cursor: pointer !important; } "]
                },] },
    ];
    /** @nocollapse */
    VaAddonListComponent.ctorParameters = function () { return [
        { type: ContractPricingService, },
    ]; };
    VaAddonListComponent.propDecorators = {
        "addons": [{ type: Input },],
        "product": [{ type: Input },],
        "showPricing": [{ type: Input },],
        "hasVerifiedContract": [{ type: Input, args: ['hasVerifiedContract',] },],
        "canAccessContractPricing": [{ type: Input, args: ['canAccessContractPricing',] },],
        "addonSelected": [{ type: Output },],
    };
    return VaAddonListComponent;
}());
export { VaAddonListComponent };