import { LitElement, html, css, unsafeCSS } from 'lit';
import { customElement, property } from 'lit/decorators.js';
interface Plan {
id: string;
name: string;
price_monthly: number | null;
price_annually: number | null;
features: { [key: string]: any } | string[];
badge?: string;
}
@customElement('pricing-card')
export class PricingCard extends LitElement {
@property({ type: Object }) plan!: Plan;
@property({ type: String }) interval: 'month' | 'year' = 'month';
@property({ type: Array }) featureOrder: string[] = [];
@property({ type: Object }) featureLabels: Record<string, string> = {};
@property({ type: Boolean }) dark = false;
private formatPrice(plan: Plan) {
if (plan.id === 'enterprise') {
return html`<div class="price-main">Custom</div>`;
}
const isMonthly = this.interval === 'month';
const amount = isMonthly ? plan.price_monthly : plan.price_annually;
const unit = isMonthly ? '/user/month' : '/user/year';
if (amount === null) {
return html`<div class="price-main">Custom</div>`;
}
if (amount === 0) {
return html`<div class="price-main">Free</div>`;
}
const perMo =
!isMonthly && typeof plan.price_annually === 'number'
? Math.round((plan.price_annually as number) / 12)
: null;
return html`
<div class="price-main">$${amount}</div>
<div class="unit">${unit}</div>
${!isMonthly && perMo !== null
? html`<div class="price-sub">~$${perMo}/mo billed annually</div>`
: null}
`;
}
private _formatNumber(num: number): string {
if (num === -1) return 'Unlimited';
if (num < 1000) return num.toString();
return new Intl.NumberFormat('en-US', {
notation: 'compact',
compactDisplay: 'short',
}).format(num);
}
private renderFeature(value: any, key: string) {
const label = this.featureLabels[key] ?? key.replace(/_/g, ' ');
let included = false;
let displayValue: string | null = null;
if (value === true) {
included = true;
} else if (value === false) {
included = false;
} else if (value === -1) {
included = true;
displayValue = 'Unlimited';
} else if (typeof value === 'number') {
included = true;
displayValue = this._formatNumber(value);
}
return html`
<li class=${included ? 'feature included' : 'feature excluded'}>
<span class="feat-icon"
>${included
? html`<sl-icon name="check-lg"></sl-icon>`
: html`<sl-icon name="x-lg"></sl-icon>`}</span
>
<span class="feat-text">
${label}${displayValue
? html`<span class="feat-value">: ${displayValue}</span>`
: ''}
</span>
</li>
`;
}
private _handleSignUp() {
this.dispatchEvent(
new CustomEvent('signup-requested', {
detail: { planId: this.plan.id, interval: this.interval },
bubbles: true,
composed: true,
})
);
}
static styles = css`
:host {
display: flex;
}
.plan-card {
position: relative;
display: flex;
flex-direction: column;
border-radius: 20px;
padding: 1.5rem;
background-color: var(--sl-color-neutral-100);
width: 100%;
}
.plan-card.sl-theme-dark {
background-color: #21262f; /* Dark background from landing page */
}
.plan-card.popular {
border: none;
background: linear-gradient(
90deg,
hsl(220, 60%, 40%),
hsl(260, 65%, 38%)
);
color: white;
}
.badge {
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(45deg, #a777ff, #f777ff);
color: white;
padding: 0.4rem 1rem;
border-radius: 16px;
font-size: 0.9rem;
font-weight: 700;
white-space: nowrap;
z-index: 1;
}
.badge.alt {
background: var(--sl-color-neutral-700);
top: 12px; /* Reset position for enterprise badge */
left: auto;
right: 12px;
transform: none;
box-shadow: none;
font-size: 0.75rem;
padding: 0.25rem 0.5rem;
}
.plan-name {
margin: 0 0 0.25rem 0;
font-size: 1.25rem;
}
.price-wrap {
margin: 0.25rem 0 0.75rem 0;
}
.price-main {
font-size: 2rem;
font-weight: 800;
}
.unit {
font-size: 0.95rem;
}
.plan-name,
.price-main,
.unit {
text-align: center;
}
.price-sub {
color: var(--sl-color-text-secondary);
font-size: 0.95rem;
margin-top: 0.25rem;
}
.plan-card.popular .price-sub {
color: var(--sl-color-neutral-300);
}
.divider {
border: none;
height: 1px;
background-color: var(--sl-color-neutral-600);
margin: 1rem 0;
}
.plan-card.popular .divider {
background-color: var(--sl-color-primary-500);
}
.features {
list-style: none;
padding: 0;
margin: 0.5rem 0 1rem 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.feat-icon {
color: var(--sl-color-success-600);
}
.feature.excluded .feat-icon {
color: var(--sl-color-neutral-400);
}
.feat-text {
font-size: 0.95rem;
}
.feat-value {
font-size: 0.85rem;
color: var(--sl-color-text-secondary);
}
.cta {
margin-top: auto;
width: 100%;
}
.cta::part(label) {
font-weight: 600;
}
/* Default outlined button style */
.cta::part(base) {
background-color: transparent;
border: 1px solid #58a6ff;
color: #58a6ff;
font-weight: 600;
transition: all 0.2s ease-in-out;
}
.cta::part(base):hover {
background-color: #58a6ff;
color: white;
}
/* Solid, gradient button for the popular plan */
.popular .cta::part(base) {
background: linear-gradient(45deg, #a777ff, #f777ff);
border: none;
color: white;
}
.popular .cta::part(base):hover {
filter: brightness(1.1);
}
`;
render() {
const isPopular = this.plan.id === 'teams' || this.plan.id === 'ultra';
const hasArrayFeatures = Array.isArray(this.plan.features);
return html`
<div
class="plan-card ${isPopular ? 'popular' : ''} ${this.dark
? 'sl-theme-dark'
: ''}"
>
${this.plan.badge
? html`<div class="badge">${this.plan.badge}</div>`
: null}
${this.plan.id === 'enterprise' && !this.plan.badge
? html`<div class="badge alt">Enterprise</div>`
: null}
${this.plan.id !== 'free'
? html`<h3 class="plan-name">${this.plan.name}</h3>`
: ''}
<div class="price-wrap">${this.formatPrice(this.plan)}</div>
<hr class="divider" />
<ul class="features">
${hasArrayFeatures
? (this.plan.features as string[]).map(
(feature) =>
html`<li class="feature included">
<span class="feat-icon"
><sl-icon name="check-lg"></sl-icon
></span>
<span class="feat-text">${feature}</span>
</li>`
)
: this.featureOrder.map((key) =>
this.renderFeature(
(this.plan.features as { [key: string]: any })[key],
key
)
)}
</ul>
<sl-button
class="cta"
size="large"
variant="default"
@click=${this._handleSignUp}
>
${this.plan.id === 'enterprise'
? 'Contact Sales'
: this.plan.id === 'opensource'
? 'View on GitHub'
: this.plan.id === 'free'
? 'Get Free'
: this.plan.id === 'teams'
? 'Start Free Trial'
: `Get ${this.plan.name}`}
</sl-button>
</div>
`;
}
}
