1 | import { Component, EventEmitter, Input, Output } from '@angular/core';
|
2 | import { BillingModel } from '@vendasta/core';
|
3 | var VaHeaderContainerComponent = (function () {
|
4 | function VaHeaderContainerComponent() {
|
5 | this.loaded = true;
|
6 | this.prerequisiteSelected = new EventEmitter();
|
7 | this.actionSelected = new EventEmitter();
|
8 | this.pricingActionSelected = new EventEmitter();
|
9 | }
|
10 | VaHeaderContainerComponent.prototype.onActionSelected = function () {
|
11 | this.actionSelected.emit();
|
12 | };
|
13 | VaHeaderContainerComponent.prototype.onPrerequisiteSelected = function () {
|
14 | this.prerequisiteSelected.emit();
|
15 | };
|
16 | VaHeaderContainerComponent.prototype.showPricingModel = function (billedProduct) {
|
17 | return billedProduct && [BillingModel.Tiered, BillingModel.Stairstep].includes(billedProduct.billingModel);
|
18 | };
|
19 | VaHeaderContainerComponent.prototype.getPricingModelTooltips = function (billingModel) {
|
20 | switch (billingModel) {
|
21 | case BillingModel.Stairstep:
|
22 | return 'Price applies per unit within a range';
|
23 | case BillingModel.Tiered:
|
24 | return 'Price applies to all units once range is met';
|
25 | default:
|
26 | return '';
|
27 | }
|
28 | };
|
29 | VaHeaderContainerComponent.decorators = [
|
30 | { type: Component, args: [{
|
31 | selector: 'va-header-container',
|
32 | template: "<div class=\"header-container\"> <div class=\"product-overview\"> <div class=\"product-id\"> <va-icon [iconUrl]=\"iconUrl\" [name]=\"title\" [diameter]=\"120\"></va-icon> <div class=\"product-id-text\"> <h1 [ngClass]=\"{'stencil-title stencil-shimmer': !title, 'product-title': title}\"> {{ title }} </h1> <span [ngClass]=\"{'stencil-tagline stencil-shimmer': !title && !tagline, 'tagline': tagline}\"> {{ tagline }} </span> <div *ngIf=\"prerequisite\" class=\"prerequisite\"> <span class=\"requires-text\">Requires </span> <span>{{ prerequisite }}</span> </div> <mat-chip-list> <mat-chip *ngFor=\"let chip of chipLabels\">{{ chip }}</mat-chip> </mat-chip-list> </div> </div> <div class=\"pricing\"> <button *ngIf=\"showAction\" mat-raised-button class=\"app-enable-button\" [disabled]=\"!actionEnabled\" (click)=\"onActionSelected()\"> {{ actionLabel }} </button> <div *ngIf=\"prerequisiteLabel\" class=\"addon-enable\" (click)=\"onPrerequisiteSelected()\"> Enabled with {{prerequisiteLabel}} </div> <div *ngIf=\"showPricing\" class=\"price-box\"> <div *ngIf=\"pricing?.prices?.length\" class=\"wholesale-price\">{{ pricingLabel }} <div *ngIf=\"showPricingModel(billedProduct) && hasVerifiedContract\" class=\"pricing-model\" matTooltip=\"{{getPricingModelTooltips(billedProduct.billingModel)}}\">({{ billedProduct.billingModel }}) </div> </div> <va-pricing [pricing]=\"pricing\" [billedProduct]=\"billedProduct\" [hasVerifiedContract]=\"hasVerifiedContract\" [loaded]=\"loaded\"></va-pricing> </div> <p *ngIf=\"pricingActionEnabled\" class=\"pricing-action-container\"> <a (click)=\"pricingActionSelected.emit()\"><mat-icon>local_offer</mat-icon>{{ pricingActionLabel }}</a> </p> </div> </div> </div> ",
|
33 | styles: [":host { font-size: 16px; } .product-title { font-size: 24px; } @media screen and (min-width: 600px) { .product-title { font-size: 32px; } } .product-overview { display: flex; flex-wrap: wrap; border-bottom: 1px solid #e0e0e0; } .product-overview h1 { margin: 0; font-weight: normal; line-height: 1.2; } .product-overview mat-chip { margin-bottom: 3px; } .product-id { display: flex; width: 100%; padding: 24px; flex-grow: 1; } .product-id va-icon { margin-right: 20px; } @media screen and (max-width: 600px) { .product-id va-icon ::ng-deep .va-icon-container { width: 40px !important; height: 40px !important; } .product-id va-icon ::ng-deep .va-icon-container span { line-height: 40px !important; font-size: 15px !important; } } .product-id .product-id-text { display: flex; flex-direction: column; justify-content: center; } .product-id span { overflow: hidden; } .product-id .tagline { color: #616161; margin: 0.5em 0 1em; font-size: 16px; } @media screen and (min-width: 600px) { .product-id .tagline { font-size: 20px; } } @media screen and (min-width: 600px) { .product-id { width: 66%; padding-right: 20px; } } .product-id .prerequisite { margin: 0.5em 0 1em; font-size: 14px; } .product-id .requires-text { color: #9e9e9e; } .inline-link { display: inline-flex !important; color: #1e88e5; cursor: pointer; padding-top: 5px; } .pricing { display: flex; flex-direction: column; width: 100%; padding: 0 24px 24px; color: #616161; } @media screen and (min-width: 600px) { .pricing { width: 34%; padding-top: 24px; padding-left: 20px; } } .pricing span { display: block; } .pricing span:nth-child(2) { margin: 0.5em 0 1em; } .pricing .price { font-size: 24px; font-weight: bold; line-height: 1; color: #4caf50; } .pricing .price-box { padding-top: 10px; } .pricing .pricing-action-container { margin: 8px 0px; } .pricing .pricing-action-container mat-icon { vertical-align: middle; margin-right: 6px; } .pricing .pricing-action-container a { cursor: pointer; } .pricing .pricing-model { display: inline-block; font-size: 0.8rem; color: #9e9e9e; text-decoration: underline dotted; } .app-enable-button { height: inherit; color: #ffffff; background-color: #4caf50; font-size: 20px; padding: 14px 16px; line-height: 1; } .addon-enable { height: inherit; background-color: #e0e0e0; font-size: 14px; padding: 14px 16px; line-height: 1; color: #1e88e5; cursor: pointer; text-align: center; } .wholesale-price { margin-top: 0; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid #e0e0e0; } .stencil-title { height: 32px; width: 200px; margin-bottom: 5px !important; } .stencil-tagline { height: 32px; width: 250px; } "]
|
34 | },] },
|
35 | ];
|
36 |
|
37 | VaHeaderContainerComponent.ctorParameters = function () { return []; };
|
38 | VaHeaderContainerComponent.propDecorators = {
|
39 | "iconUrl": [{ type: Input },],
|
40 | "title": [{ type: Input },],
|
41 | "tagline": [{ type: Input },],
|
42 | "prerequisite": [{ type: Input },],
|
43 | "chipLabels": [{ type: Input },],
|
44 | "pricing": [{ type: Input },],
|
45 | "billedProduct": [{ type: Input },],
|
46 | "loaded": [{ type: Input },],
|
47 | "hasVerifiedContract": [{ type: Input },],
|
48 | "pricingLabel": [{ type: Input },],
|
49 | "pricingActionLabel": [{ type: Input },],
|
50 | "pricingActionEnabled": [{ type: Input },],
|
51 | "actionEnabled": [{ type: Input },],
|
52 | "actionLabel": [{ type: Input },],
|
53 | "showAction": [{ type: Input },],
|
54 | "showPricing": [{ type: Input },],
|
55 | "prerequisiteLabel": [{ type: Input },],
|
56 | "prerequisiteSelected": [{ type: Output },],
|
57 | "actionSelected": [{ type: Output },],
|
58 | "pricingActionSelected": [{ type: Output },],
|
59 | };
|
60 | return VaHeaderContainerComponent;
|
61 | }());
|
62 | export { VaHeaderContainerComponent };
|