1 | import { Component, EventEmitter, Input, Output } from '@angular/core';
|
2 | import { BehaviorSubject } from 'rxjs/BehaviorSubject';
|
3 | import { Observable } from 'rxjs/Observable';
|
4 | import { ReplaySubject } from 'rxjs/ReplaySubject';
|
5 | import { Package } from './package';
|
6 | import { Addon } from '@vendasta/core/marketplace-apps';
|
7 | import 'rxjs/add/operator/shareReplay';
|
8 | import 'rxjs/add/operator/take';
|
9 | import 'rxjs/add/observable/merge';
|
10 | var VaPackageDetailsComponent = (function () {
|
11 | function VaPackageDetailsComponent() {
|
12 | this.showActionButton = true;
|
13 | this.showPricing = true;
|
14 | this.actionLabel = 'Get It Now';
|
15 | this.getItNow = new EventEmitter();
|
16 | this.products$ = new BehaviorSubject([]);
|
17 | this.addons$ = new BehaviorSubject([]);
|
18 | this.pkg$ = new ReplaySubject(1);
|
19 | this.itemSelectedEvent$ = new ReplaySubject(1);
|
20 | this.combinedItemsList$ = Observable.combineLatest(this.products$, this.addons$, function (products, addons) {
|
21 | return [].concat(products || []).concat(addons || []);
|
22 | });
|
23 | var nonEmptyCombinedItemsList = this.combinedItemsList$
|
24 | .skipWhile(function (items) { return !items || items.length === 0; })
|
25 | .shareReplay(1);
|
26 |
|
27 | var initialSelectedItem$ = nonEmptyCombinedItemsList
|
28 | .map(function (_) { return 0; })
|
29 | .take(1);
|
30 | var mergedSelection = Observable.merge(initialSelectedItem$, this.itemSelectedEvent$);
|
31 | this.selectedItem$ = Observable.combineLatest(mergedSelection, this.combinedItemsList$).map(function (_a) {
|
32 | var index = _a[0], items = _a[1];
|
33 | return items[index];
|
34 | });
|
35 | this.lmiCategories$ = this.products$
|
36 | .skipWhile(function (products) { return !products || products.length === 0; })
|
37 | .map(function (products) {
|
38 | return VaPackageDetailsComponent.getLmiCategories(products);
|
39 | });
|
40 | this.productNameForSingleAddon$ = nonEmptyCombinedItemsList.map(function (items) {
|
41 | return VaPackageDetailsComponent.getProductNameForSingleAddon(items);
|
42 | });
|
43 | this.displayTagName$ = Observable.combineLatest(this.pkg$, this.combinedItemsList$)
|
44 | .map(function (_a) {
|
45 | var pkg = _a[0], items = _a[1];
|
46 | return VaPackageDetailsComponent.getDisplayTagline(pkg, items);
|
47 | });
|
48 | }
|
49 | Object.defineProperty(VaPackageDetailsComponent.prototype, "products", {
|
50 | set: function (products) {
|
51 | this.products$.next(products);
|
52 | },
|
53 | enumerable: true,
|
54 | configurable: true
|
55 | });
|
56 | Object.defineProperty(VaPackageDetailsComponent.prototype, "addons", {
|
57 | set: function (addons) {
|
58 | this.addons$.next(addons);
|
59 | },
|
60 | enumerable: true,
|
61 | configurable: true
|
62 | });
|
63 | Object.defineProperty(VaPackageDetailsComponent.prototype, "pkg", {
|
64 | set: function (pkg) {
|
65 | this.pkg$.next(pkg);
|
66 | },
|
67 | enumerable: true,
|
68 | configurable: true
|
69 | });
|
70 | VaPackageDetailsComponent.getLmiCategories = function (products) {
|
71 | var lmiCategories = [];
|
72 | if (products) {
|
73 | products.forEach(function (product) {
|
74 | lmiCategories = lmiCategories.concat(product.getLmiCategoryNames());
|
75 | });
|
76 | }
|
77 | return new Set(lmiCategories);
|
78 | };
|
79 | VaPackageDetailsComponent.getDisplayTagline = function (pkg, items) {
|
80 | if (pkg && pkg.tagline) {
|
81 | return pkg.tagline;
|
82 | }
|
83 | else if (items && items.length === 1) {
|
84 |
|
85 | return items[0].tagline || '';
|
86 | }
|
87 | return '';
|
88 | };
|
89 | VaPackageDetailsComponent.getProductNameForSingleAddon = function (items) {
|
90 | if (items && items.length === 1 && items[0] instanceof Addon) {
|
91 | var addon = items[0];
|
92 | return addon.productName;
|
93 | }
|
94 | };
|
95 | VaPackageDetailsComponent.prototype.selectItem = function (i) {
|
96 | this.itemSelectedEvent$.next(i);
|
97 | };
|
98 | VaPackageDetailsComponent.prototype.emitGetItNow = function () {
|
99 | this.getItNow.emit();
|
100 | };
|
101 | VaPackageDetailsComponent.decorators = [
|
102 | { type: Component, args: [{
|
103 | selector: 'va-package-details',
|
104 | template: "<div *ngIf=\"pkg$ | async as pkg\" class=\"page\"> <va-header-container [iconUrl]=\"pkg.icon\" [title]=\"pkg.name\" [tagline]=\"displayTagName$ | async\" [prerequisite]=\"productNameForSingleAddon$ | async\" [chipLabels]=\"lmiCategories$ | async\" [pricing]=\"pkg.pricing\" [pricingLabel]=\"'Pricing'\" [showAction]=\"showActionButton\" [showPricing]=\"showPricing\" [actionLabel]=\"actionLabel\" [actionEnabled]=true (actionSelected)=\"emitGetItNow()\" ></va-header-container> <ng-container *ngIf=\"pkg?.content\"> <va-selling-info [description]=\"pkg.content\"></va-selling-info> </ng-container> <va-products-nav [items]=\"combinedItemsList$ | async\" [hideItemsNav]=\"pkg?.hide_product_icons_and_names\" (itemSelected)=\"selectItem($event)\"></va-products-nav> <ng-container *ngIf=\"selectedItem$ | async as selectedItem\"> <div *ngIf=\"!pkg?.hide_product_details\" class=\"package-content\"> <div class=\"left-column\"> <section *ngIf=\"(selectedItem.endUserMarketing?.description || selectedItem.endUserMarketing?.keySellingPoints) || (selectedItem.description || selectedItem.keySellingPoints)\"> <va-selling-info [description]=\"selectedItem.endUserMarketing?.description || selectedItem.description\" [keySellingPoints]=\"selectedItem.endUserMarketing?.keySellingPoints || selectedItem.keySellingPoints\"></va-selling-info> </section> <section *ngIf=\"(selectedItem.endUserMarketing?.faqs?.length > 0 && selectedItem.endUserMarketing?.faqs[0].question) || selectedItem.faqs?.length > 0\"> <h2 class=\"va-component-title\">FAQs</h2> <va-faqs [faqs]=\"selectedItem.endUserMarketing?.faqs || selectedItem.faqs\"></va-faqs> </section> </div> <div class=\"right-column\"> <section *ngIf=\"selectedItem.screenshotUrls?.length > 0 || selectedItem.screenshots?.length > 0\"> <h2 class=\"va-component-title\">Gallery</h2> <va-image-gallery [imageUrls]=\"selectedItem.screenshotUrls || selectedItem.screenshots\"></va-image-gallery> </section> <section *ngIf=\"selectedItem.endUserMarketing?.files?.length > 0 || selectedItem.files?.length > 0\"> <h2 class=\"va-component-title\">Files</h2> <va-files [files]=\"selectedItem.endUserMarketingFiles || selectedItem.files\"></va-files> </section> </div> </div> </ng-container> </div> ",
|
105 | styles: [":host { display: block; font-size: 14px; line-height: 1.4; } :host * { box-sizing: border-box; } .va-component-title { font-size: 24px; font-weight: 300; margin-top: 0; } @media screen and (min-width: 600px) { .va-component-title { font-size: 32px; } } img { max-width: 100%; } va-icon { display: inline-block; } .page { position: relative; margin: 0 auto 20px; background: #ffffff; color: #212121; box-shadow: 0 3px 10px rgba(33, 33, 33, 0.3); overflow: hidden; font-size: 16px; } .page .item-amount { color: #9e9e9e; font-size: 14px; text-align: right; margin: 0 24px 8px; } section { padding: 24px; } .left-column { width: 66%; } @media screen and (max-width: 600px) { .left-column { width: 100%; } } .right-column { width: 34%; } @media screen and (max-width: 600px) { .right-column { width: 100%; } } .package-content { display: flex; } @media screen and (max-width: 600px) { .package-content { flex-direction: column; } } "]
|
106 | },] },
|
107 | ];
|
108 |
|
109 | VaPackageDetailsComponent.ctorParameters = function () { return []; };
|
110 | VaPackageDetailsComponent.propDecorators = {
|
111 | "showActionButton": [{ type: Input },],
|
112 | "showPricing": [{ type: Input },],
|
113 | "actionLabel": [{ type: Input },],
|
114 | "getItNow": [{ type: Output },],
|
115 | "products": [{ type: Input },],
|
116 | "addons": [{ type: Input },],
|
117 | "pkg": [{ type: Input },],
|
118 | };
|
119 | return VaPackageDetailsComponent;
|
120 | }());
|
121 | export { VaPackageDetailsComponent };
|