import { html, LitElement, TemplateResult } from "lit"; import { customElement, property } from "lit/decorators.js"; import { UserSubscription } from "../../core/ApiSchemas"; import { Subscription } from "../../core/CosmeticSchemas"; import { cancelSubscription, invalidateUserMe, openSubscriptionPortal, } from "../Api"; import { translateCosmetic } from "../Cosmetics"; import { translateText } from "../Utils"; import "./baseComponents/Button"; import "./CapIcon"; import "./PlutoniumIcon"; @customElement("subscription-panel") export class SubscriptionPanel extends LitElement { @property({ type: Object }) sub!: UserSubscription; @property({ type: Object }) cosmetic: Subscription | null = null; createRenderRoot() { return this; } private handleManage = async (): Promise => { const url = await openSubscriptionPortal(); if (url === false) { alert(translateText("account_modal.subscription_portal_failed")); return; } window.open(url, "_blank", "noopener,noreferrer"); }; private handleChangeTier = (): void => { window.location.hash = "modal=store&tab=subscriptions"; }; private handleCancel = async (): Promise => { const confirmed = window.confirm( translateText("account_modal.cancel_subscription_confirm"), ); if (!confirmed) return; const ok = await cancelSubscription(); if (!ok) { alert(translateText("account_modal.cancel_subscription_failed")); return; } alert(translateText("account_modal.cancel_subscription_success")); invalidateUserMe(); window.location.reload(); }; private renderStatus(): TemplateResult { const periodEnd = this.sub.currentPeriodEnd ? this.sub.currentPeriodEnd.toLocaleDateString(undefined, { year: "numeric", month: "short", day: "numeric", }) : null; if (this.sub.cancelAtPeriodEnd) { return html`
${periodEnd ? translateText("account_modal.sub_status_canceling_on", { date: periodEnd, }) : translateText("account_modal.sub_status_canceling")}
`; } const isActive = this.sub.status === "active" || this.sub.status === "trialing"; const colorClass = isActive ? "text-green-400" : "text-white/60"; const translatedStatus = translateText( `account_modal.sub_status_${this.sub.status}`, ); const statusLabel = translatedStatus.startsWith("account_modal.sub_status_") ? this.sub.status : translatedStatus; return html`
${statusLabel} ${periodEnd ? html`${translateText("account_modal.sub_renews_on", { date: periodEnd, })}` : ""}
`; } render() { const { sub, cosmetic } = this; return html`

${translateText("account_modal.your_subscription")}

${translateCosmetic( "subscriptions", cosmetic?.name ?? sub.tier, )}
${cosmetic?.product?.price ? html`
${translateText("account_modal.sub_price_monthly", { price: cosmetic.product.price, })}
` : ""}
${cosmetic?.description ? html`
${cosmetic.description}
` : ""} ${cosmetic ? html`
${cosmetic.dailyHardCurrency.toLocaleString()} ${translateText("cosmetics.per_day")}
${cosmetic.dailySoftCurrency.toLocaleString()} ${translateText("cosmetics.per_day")}
` : ""}
${this.renderStatus()}
${sub.cancelAtPeriodEnd ? html`` : html` `}
${sub.cancelAtPeriodEnd ? "" : html`
`}
`; } }