@vendasta/store
Version:
Components and data for Store
104 lines (103 loc) • 6.11 kB
JavaScript
import { Component, Input } from '@angular/core';
var VaPricingComponent = /** @class */ (function () {
function VaPricingComponent() {
this.pricing = null;
this.wrapFrequency = false;
this.isAddon = false;
}
VaPricingComponent.prototype.getCurrencySymbol = function (currency) {
var currencySymbol = '$';
switch (currency) {
case 'EUR':
currencySymbol = '\u20AC';
break;
case 'GBP':
currencySymbol = '\u00A3';
break;
case 'CHF':
currencySymbol = 'Fr';
break;
case 'CNY':
currencySymbol = '\u00A5';
break;
case 'JPY':
currencySymbol = '\u00A5';
break;
case 'CZK':
currencySymbol = 'K\u010d';
break;
case 'INR':
currencySymbol = '\u20B9';
break;
case 'KHR':
currencySymbol = '\u17DB';
break;
case 'KRW':
currencySymbol = '\u20A9';
break;
case 'NOK':
currencySymbol = 'kr';
break;
case 'SEK':
currencySymbol = 'kr';
break;
case 'RUB':
currencySymbol = '\u20BD';
break;
case 'TRY':
currencySymbol = '\u20BA';
break;
case 'ZAR':
currencySymbol = 'R';
break;
default:
currencySymbol = '$';
break;
}
return currencySymbol;
};
// this function makes the assumption that all numerical prices do not have decimal formatting for cents.
VaPricingComponent.prototype.getDisplayPrice = function (priceWithoutCents) {
return priceWithoutCents ? (priceWithoutCents / 100.0).toFixed(2).toString() : null;
};
Object.defineProperty(VaPricingComponent.prototype, "currencyString", {
get: function () {
var hasCurrencyAndIsNotUSD = this.pricing.currency && this.pricing.currency !== 'USD';
return hasCurrencyAndIsNotUSD ? this.pricing.currency : '';
},
enumerable: true,
configurable: true
});
Object.defineProperty(VaPricingComponent.prototype, "isFree", {
get: function () {
return this.pricing && this.pricing.prices ? this.pricing.prices.some(function (p) { return p.price === 0; }) : null;
},
enumerable: true,
configurable: true
});
Object.defineProperty(VaPricingComponent.prototype, "shouldContactSales", {
get: function () {
return this.pricing && this.pricing.prices ?
this.pricing.prices.some(function (p) { return p.price === null || p.price === undefined; }) ||
this.pricing.prices.length === 0 : true;
},
enumerable: true,
configurable: true
});
VaPricingComponent.decorators = [
{ type: Component, args: [{
selector: 'va-pricing',
template: "\n <div *ngIf=\"pricing\">\n <div class=\"no-price\" *ngIf=\"shouldContactSales\">\n Contact sales for pricing\n </div>\n <div class=\"no-price\" *ngIf=\"!shouldContactSales && isFree\">\n <b>Free</b>\n </div>\n <ng-container *ngIf=\"!shouldContactSales && !isFree && !isAddon\">\n <div *ngIf= \"pricing && pricing.prices[0] as price\" class=\"price-box\">\n <b class=\"price-number\">{{getCurrencySymbol(pricing.currency)}}{{ getDisplayPrice(price.price) }} {{currencyString}} </b>\n <span *ngIf=\"price.frequency as frequency\" class=\"billing-freq\" [ngClass]=\"{'va-wrap': wrapFrequency}\">\n {{ frequency }}</span>\n </div>\n <div *ngIf=\"pricing && pricing.prices[1] as price\" class=\"price-box\">\n <b class=\"price-number\">+ {{getCurrencySymbol(pricing.currency)}}{{ getDisplayPrice(price.price) }} {{currencyString}}</b>\n <span *ngIf=\"price.frequency as frequency\" class=\"billing-freq\" [ngClass]=\"{'va-wrap': wrapFrequency}\">\n {{ frequency }}</span>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!shouldContactSales && !isFree && isAddon\">\n <div *ngIf= \"pricing && pricing.prices[0] as price\" class=\"price-box\">\n <span *ngIf=\"price.frequency\" class=\"addon-billing-freq\">\n {{ price.frequency }}</span>\n <b class=\"price-number\">{{getCurrencySymbol(pricing.currency)}}{{ getDisplayPrice(price.price) }} {{currencyString}} </b>\n </div>\n </ng-container>\n </div>\n <div *ngIf=\"!pricing\">\n <div class=\"stencil-pricing-title stencil-shimmer\"></div>\n <div class=\"stencil-pricing stencil-shimmer\"></div>\n </div>\n ",
styles: [":host { color: #9e9e9e; } .price-box { display: flex; align-items: baseline; flex-direction: row-reverse; } @media screen and (max-width: 600px) { .price-box { font-size: 16px; } } .no-price { text-align: center; } @media screen and (max-width: 600px) { .no-price { font-size: 16px; } } b { color: #212121; font-size: 20px; } @media screen and (max-width: 600px) { b { font-size: 16px; } } .billing-freq { text-transform: capitalize; flex: 1; } .addon-billing-freq { padding-left: 5px; } .va-wrap { display: block; } .stencil-pricing-title { height: 32px; margin-bottom: 10px; } .stencil-pricing { height: 75px; } "]
},] },
];
/** @nocollapse */
VaPricingComponent.ctorParameters = function () { return []; };
VaPricingComponent.propDecorators = {
'pricing': [{ type: Input },],
'wrapFrequency': [{ type: Input },],
'isAddon': [{ type: Input },],
};
return VaPricingComponent;
}());
export { VaPricingComponent };