@vendasta/store/esm2020/lib/product-details-v2/billing-price/billing-pricing-display/billing-pricing-display.component.mjs

Components and data for Store

import { Component, Input } from '@angular/core';
import { formatCommitmentString, formatCurrencyAndFrequencyString, formatPrice, hasCommitment, } from '../../product-info-string-formatting/product-info-string-formatting';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@ngx-translate/core";
export class BillingPricingDisplayComponent {
    constructor() {
        this.hasCommitment = hasCommitment;
        this.formatPrice = formatPrice;
        this.formatCurrencyAndFrequencyString = formatCurrencyAndFrequencyString;
        this.formatCommitmentString = formatCommitmentString;
    }
    getTierValue(value) {
        if (value >= 0) {
            return value;
        }
        else {
            return '∞';
        }
    }
}
BillingPricingDisplayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: BillingPricingDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
BillingPricingDisplayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: BillingPricingDisplayComponent, selector: "app-billing-pricing-display", inputs: { contactSales: "contactSales", priceData: "priceData" }, ngImport: i0, template: "<div class=\"tiered-price\">\n  <div\n    *ngIf=\"contactSales; else pricingTemplate\"\n    class=\"price-card-title tiered-price\"\n  >\n    {{ 'FRONTEND.STORE.CONTACT_SALES' | translate }}\n  </div>\n\n  <ng-template #pricingTemplate>\n    <ng-container\n      *ngIf=\"\n        priceData.pricingRules && priceData.pricingRules.length === 1;\n        else tiered\n      \"\n    >\n      <ng-container *ngIf=\"priceData.pricingRules[0].price > 0; else free\">\n        <div class=\"price-card-title\">\n          {{ formatPrice(priceData.currency, priceData.pricingRules[0].price) }}\n          <div class=\"currency-frequency\">\n            <span class=\"subtitle\">\n              {{\n                formatCurrencyAndFrequencyString(\n                  priceData.currency,\n                  priceData.frequency\n                )\n              }}\n            </span>\n          </div>\n        </div>\n        <div\n          *ngIf=\"hasCommitment(priceData.commitment, priceData.frequency)\"\n          class=\"footer\"\n        >\n          {{\n            formatCommitmentString(priceData.commitment, priceData.frequency)\n          }}\n        </div>\n        <div *ngIf=\"priceData.setupFee > 0\" class=\"price-card-setup-fee\">\n          + {{ formatPrice(priceData.currency, priceData.setupFee) }}\n          <span class=\"price-card-setup-fee-text\">Setup fee</span>\n        </div>\n      </ng-container>\n    </ng-container>\n\n    <ng-template #tiered>\n      <div\n        *ngFor=\"let pricingRule of priceData.pricingRules\"\n        class=\"tiered-price\"\n      >\n        <div class=\"subtitle\">\n          {{ getTierValue(pricingRule.minUnits) }} -\n          {{ getTierValue(pricingRule.maxUnits) }}\n          {{ 'FRONTEND.STORE.ACCOUNTS' | translate }}\n        </div>\n        <ng-container *ngIf=\"pricingRule.price > 0; else free\">\n          <div class=\"price-card-title\">\n            {{ formatPrice(priceData.currency, pricingRule.price) }}\n            <div class=\"currency-frequency\">\n              <span class=\"subtitle\">\n                {{\n                  formatCurrencyAndFrequencyString(\n                    priceData.currency,\n                    priceData.frequency\n                  )\n                }}\n              </span>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </ng-template>\n  </ng-template>\n\n  <ng-template #free>\n    <div class=\"price-card-title\">\n      {{ 'FRONTEND.STORE.FREE' | translate }}\n    </div>\n  </ng-template>\n</div>\n", styles: [".tiered-price{align-self:baseline;margin-bottom:16px}.price-card-title{font-size:32px;font-weight:400;color:#212121;display:flex;flex-direction:row;padding-top:4px;align-items:baseline}.price-card-setup-fee{font-size:20px;font-weight:400;color:#212121;display:flex;align-items:baseline}.price-card-setup-fee .price-card-setup-fee-text{margin-left:4px;display:flex;flex-direction:column;justify-content:flex-end;font-size:14px;color:#616161}.currency-frequency{display:flex;flex-direction:column;padding-left:4px;justify-content:flex-end}.subtitle{font-size:14px;font-weight:400;color:#616161}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i2.TranslatePipe } });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: BillingPricingDisplayComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-billing-pricing-display', template: "<div class=\"tiered-price\">\n  <div\n    *ngIf=\"contactSales; else pricingTemplate\"\n    class=\"price-card-title tiered-price\"\n  >\n    {{ 'FRONTEND.STORE.CONTACT_SALES' | translate }}\n  </div>\n\n  <ng-template #pricingTemplate>\n    <ng-container\n      *ngIf=\"\n        priceData.pricingRules && priceData.pricingRules.length === 1;\n        else tiered\n      \"\n    >\n      <ng-container *ngIf=\"priceData.pricingRules[0].price > 0; else free\">\n        <div class=\"price-card-title\">\n          {{ formatPrice(priceData.currency, priceData.pricingRules[0].price) }}\n          <div class=\"currency-frequency\">\n            <span class=\"subtitle\">\n              {{\n                formatCurrencyAndFrequencyString(\n                  priceData.currency,\n                  priceData.frequency\n                )\n              }}\n            </span>\n          </div>\n        </div>\n        <div\n          *ngIf=\"hasCommitment(priceData.commitment, priceData.frequency)\"\n          class=\"footer\"\n        >\n          {{\n            formatCommitmentString(priceData.commitment, priceData.frequency)\n          }}\n        </div>\n        <div *ngIf=\"priceData.setupFee > 0\" class=\"price-card-setup-fee\">\n          + {{ formatPrice(priceData.currency, priceData.setupFee) }}\n          <span class=\"price-card-setup-fee-text\">Setup fee</span>\n        </div>\n      </ng-container>\n    </ng-container>\n\n    <ng-template #tiered>\n      <div\n        *ngFor=\"let pricingRule of priceData.pricingRules\"\n        class=\"tiered-price\"\n      >\n        <div class=\"subtitle\">\n          {{ getTierValue(pricingRule.minUnits) }} -\n          {{ getTierValue(pricingRule.maxUnits) }}\n          {{ 'FRONTEND.STORE.ACCOUNTS' | translate }}\n        </div>\n        <ng-container *ngIf=\"pricingRule.price > 0; else free\">\n          <div class=\"price-card-title\">\n            {{ formatPrice(priceData.currency, pricingRule.price) }}\n            <div class=\"currency-frequency\">\n              <span class=\"subtitle\">\n                {{\n                  formatCurrencyAndFrequencyString(\n                    priceData.currency,\n                    priceData.frequency\n                  )\n                }}\n              </span>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </ng-template>\n  </ng-template>\n\n  <ng-template #free>\n    <div class=\"price-card-title\">\n      {{ 'FRONTEND.STORE.FREE' | translate }}\n    </div>\n  </ng-template>\n</div>\n", styles: [".tiered-price{align-self:baseline;margin-bottom:16px}.price-card-title{font-size:32px;font-weight:400;color:#212121;display:flex;flex-direction:row;padding-top:4px;align-items:baseline}.price-card-setup-fee{font-size:20px;font-weight:400;color:#212121;display:flex;align-items:baseline}.price-card-setup-fee .price-card-setup-fee-text{margin-left:4px;display:flex;flex-direction:column;justify-content:flex-end;font-size:14px;color:#616161}.currency-frequency{display:flex;flex-direction:column;padding-left:4px;justify-content:flex-end}.subtitle{font-size:14px;font-weight:400;color:#616161}\n"] }]
        }], propDecorators: { contactSales: [{
                type: Input
            }], priceData: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmlsbGluZy1wcmljaW5nLWRpc3BsYXkuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9zdG9yZS9zcmMvbGliL3Byb2R1Y3QtZGV0YWlscy12Mi9iaWxsaW5nLXByaWNlL2JpbGxpbmctcHJpY2luZy1kaXNwbGF5L2JpbGxpbmctcHJpY2luZy1kaXNwbGF5LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvc3RvcmUvc3JjL2xpYi9wcm9kdWN0LWRldGFpbHMtdjIvYmlsbGluZy1wcmljZS9iaWxsaW5nLXByaWNpbmctZGlzcGxheS9iaWxsaW5nLXByaWNpbmctZGlzcGxheS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUVqRCxPQUFPLEVBQ0wsc0JBQXNCLEVBQ3RCLGdDQUFnQyxFQUNoQyxXQUFXLEVBQ1gsYUFBYSxHQUNkLE1BQU0scUVBQXFFLENBQUM7Ozs7QUFPN0UsTUFBTSxPQUFPLDhCQUE4QjtJQUwzQztRQVNFLGtCQUFhLEdBQUcsYUFBYSxDQUFDO1FBQzlCLGdCQUFXLEdBQUcsV0FBVyxDQUFDO1FBQzFCLHFDQUFnQyxHQUFHLGdDQUFnQyxDQUFDO1FBQ3BFLDJCQUFzQixHQUFHLHNCQUFzQixDQUFDO0tBU2pEO0lBUEMsWUFBWSxDQUFDLEtBQWE7UUFDeEIsSUFBSSxLQUFLLElBQUksQ0FBQyxFQUFFO1lBQ2QsT0FBTyxLQUFLLENBQUM7U0FDZDthQUFNO1lBQ0wsT0FBTyxHQUFHLENBQUM7U0FDWjtJQUNILENBQUM7OzJIQWZVLDhCQUE4QjsrR0FBOUIsOEJBQThCLHFJQ2QzQyx5L0VBK0VBOzJGRGpFYSw4QkFBOEI7a0JBTDFDLFNBQVM7K0JBQ0UsNkJBQTZCOzhCQUs5QixZQUFZO3NCQUFwQixLQUFLO2dCQUNHLFNBQVM7c0JBQWpCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDdXJyZW5jeSwgRnJlcXVlbmN5LCBQcm9kdWN0UHJpY2luZyB9IGZyb20gJ0B2ZW5kYXN0YS9iaWxsaW5nJztcbmltcG9ydCB7XG4gIGZvcm1hdENvbW1pdG1lbnRTdHJpbmcsXG4gIGZvcm1hdEN1cnJlbmN5QW5kRnJlcXVlbmN5U3RyaW5nLFxuICBmb3JtYXRQcmljZSxcbiAgaGFzQ29tbWl0bWVudCxcbn0gZnJvbSAnLi4vLi4vcHJvZHVjdC1pbmZvLXN0cmluZy1mb3JtYXR0aW5nL3Byb2R1Y3QtaW5mby1zdHJpbmctZm9ybWF0dGluZyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2FwcC1iaWxsaW5nLXByaWNpbmctZGlzcGxheScsXG4gIHRlbXBsYXRlVXJsOiAnLi9iaWxsaW5nLXByaWNpbmctZGlzcGxheS5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2JpbGxpbmctcHJpY2luZy1kaXNwbGF5LmNvbXBvbmVudC5zY3NzJ10sXG59KVxuZXhwb3J0IGNsYXNzIEJpbGxpbmdQcmljaW5nRGlzcGxheUNvbXBvbmVudCB7XG4gIEBJbnB1dCgpIGNvbnRhY3RTYWxlczogYm9vbGVhbjtcbiAgQElucHV0KCkgcHJpY2VEYXRhOiBQcm9kdWN0UHJpY2luZztcblxuICBoYXNDb21taXRtZW50ID0gaGFzQ29tbWl0bWVudDtcbiAgZm9ybWF0UHJpY2UgPSBmb3JtYXRQcmljZTtcbiAgZm9ybWF0Q3VycmVuY3lBbmRGcmVxdWVuY3lTdHJpbmcgPSBmb3JtYXRDdXJyZW5jeUFuZEZyZXF1ZW5jeVN0cmluZztcbiAgZm9ybWF0Q29tbWl0bWVudFN0cmluZyA9IGZvcm1hdENvbW1pdG1lbnRTdHJpbmc7XG5cbiAgZ2V0VGllclZhbHVlKHZhbHVlOiBudW1iZXIpOiBzdHJpbmcgfCBudW1iZXIge1xuICAgIGlmICh2YWx1ZSA+PSAwKSB7XG4gICAgICByZXR1cm4gdmFsdWU7XG4gICAgfSBlbHNlIHtcbiAgICAgIHJldHVybiAn4oieJztcbiAgICB9XG4gIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJ0aWVyZWQtcHJpY2VcIj5cbiAgPGRpdlxuICAgICpuZ0lmPVwiY29udGFjdFNhbGVzOyBlbHNlIHByaWNpbmdUZW1wbGF0ZVwiXG4gICAgY2xhc3M9XCJwcmljZS1jYXJkLXRpdGxlIHRpZXJlZC1wcmljZVwiXG4gID5cbiAgICB7eyAnRlJPTlRFTkQuU1RPUkUuQ09OVEFDVF9TQUxFUycgfCB0cmFuc2xhdGUgfX1cbiAgPC9kaXY+XG5cbiAgPG5nLXRlbXBsYXRlICNwcmljaW5nVGVtcGxhdGU+XG4gICAgPG5nLWNvbnRhaW5lclxuICAgICAgKm5nSWY9XCJcbiAgICAgICAgcHJpY2VEYXRhLnByaWNpbmdSdWxlcyAmJiBwcmljZURhdGEucHJpY2luZ1J1bGVzLmxlbmd0aCA9PT0gMTtcbiAgICAgICAgZWxzZSB0aWVyZWRcbiAgICAgIFwiXG4gICAgPlxuICAgICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cInByaWNlRGF0YS5wcmljaW5nUnVsZXNbMF0ucHJpY2UgPiAwOyBlbHNlIGZyZWVcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cInByaWNlLWNhcmQtdGl0bGVcIj5cbiAgICAgICAgICB7eyBmb3JtYXRQcmljZShwcmljZURhdGEuY3VycmVuY3ksIHByaWNlRGF0YS5wcmljaW5nUnVsZXNbMF0ucHJpY2UpIH19XG4gICAgICAgICAgPGRpdiBjbGFzcz1cImN1cnJlbmN5LWZyZXF1ZW5jeVwiPlxuICAgICAgICAgICAgPHNwYW4gY2xhc3M9XCJzdWJ0aXRsZVwiPlxuICAgICAgICAgICAgICB7e1xuICAgICAgICAgICAgICAgIGZvcm1hdEN1cnJlbmN5QW5kRnJlcXVlbmN5U3RyaW5nKFxuICAgICAgICAgICAgICAgICAgcHJpY2VEYXRhLmN1cnJlbmN5LFxuICAgICAgICAgICAgICAgICAgcHJpY2VEYXRhLmZyZXF1ZW5jeVxuICAgICAgICAgICAgICAgIClcbiAgICAgICAgICAgICAgfX1cbiAgICAgICAgICAgIDwvc3Bhbj5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxkaXZcbiAgICAgICAgICAqbmdJZj1cImhhc0NvbW1pdG1lbnQocHJpY2VEYXRhLmNvbW1pdG1lbnQsIHByaWNlRGF0YS5mcmVxdWVuY3kpXCJcbiAgICAgICAgICBjbGFzcz1cImZvb3RlclwiXG4gICAgICAgID5cbiAgICAgICAgICB7e1xuICAgICAgICAgICAgZm9ybWF0Q29tbWl0bWVudFN0cmluZyhwcmljZURhdGEuY29tbWl0bWVudCwgcHJpY2VEYXRhLmZyZXF1ZW5jeSlcbiAgICAgICAgICB9fVxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPGRpdiAqbmdJZj1cInByaWNlRGF0YS5zZXR1cEZlZSA+IDBcIiBjbGFzcz1cInByaWNlLWNhcmQtc2V0dXAtZmVlXCI+XG4gICAgICAgICAgKyB7eyBmb3JtYXRQcmljZShwcmljZURhdGEuY3VycmVuY3ksIHByaWNlRGF0YS5zZXR1cEZlZSkgfX1cbiAgICAgICAgICA8c3BhbiBjbGFzcz1cInByaWNlLWNhcmQtc2V0dXAtZmVlLXRleHRcIj5TZXR1cCBmZWU8L3NwYW4+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgPC9uZy1jb250YWluZXI+XG5cbiAgICA8bmctdGVtcGxhdGUgI3RpZXJlZD5cbiAgICAgIDxkaXZcbiAgICAgICAgKm5nRm9yPVwibGV0IHByaWNpbmdSdWxlIG9mIHByaWNlRGF0YS5wcmljaW5nUnVsZXNcIlxuICAgICAgICBjbGFzcz1cInRpZXJlZC1wcmljZVwiXG4gICAgICA+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJzdWJ0aXRsZVwiPlxuICAgICAgICAgIHt7IGdldFRpZXJWYWx1ZShwcmljaW5nUnVsZS5taW5Vbml0cykgfX0gLVxuICAgICAgICAgIHt7IGdldFRpZXJWYWx1ZShwcmljaW5nUnVsZS5tYXhVbml0cykgfX1cbiAgICAgICAgICB7eyAnRlJPTlRFTkQuU1RPUkUuQUNDT1VOVFMnIHwgdHJhbnNsYXRlIH19XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwicHJpY2luZ1J1bGUucHJpY2UgPiAwOyBlbHNlIGZyZWVcIj5cbiAgICAgICAgICA8ZGl2IGNsYXNzPVwicHJpY2UtY2FyZC10aXRsZVwiPlxuICAgICAgICAgICAge3sgZm9ybWF0UHJpY2UocHJpY2VEYXRhLmN1cnJlbmN5LCBwcmljaW5nUnVsZS5wcmljZSkgfX1cbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJjdXJyZW5jeS1mcmVxdWVuY3lcIj5cbiAgICAgICAgICAgICAgPHNwYW4gY2xhc3M9XCJzdWJ0aXRsZVwiPlxuICAgICAgICAgICAgICAgIHt7XG4gICAgICAgICAgICAgICAgICBmb3JtYXRDdXJyZW5jeUFuZEZyZXF1ZW5jeVN0cmluZyhcbiAgICAgICAgICAgICAgICAgICAgcHJpY2VEYXRhLmN1cnJlbmN5LFxuICAgICAgICAgICAgICAgICAgICBwcmljZURhdGEuZnJlcXVlbmN5XG4gICAgICAgICAgICAgICAgICApXG4gICAgICAgICAgICAgICAgfX1cbiAgICAgICAgICAgICAgPC9zcGFuPlxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgPC9kaXY+XG4gICAgPC9uZy10ZW1wbGF0ZT5cbiAgPC9uZy10ZW1wbGF0ZT5cblxuICA8bmctdGVtcGxhdGUgI2ZyZWU+XG4gICAgPGRpdiBjbGFzcz1cInByaWNlLWNhcmQtdGl0bGVcIj5cbiAgICAgIHt7ICdGUk9OVEVORC5TVE9SRS5GUkVFJyB8IHRyYW5zbGF0ZSB9fVxuICAgIDwvZGl2PlxuICA8L25nLXRlbXBsYXRlPlxuPC9kaXY+XG4iXX0=