removes the "subscribe" and "purchase" text (#4436)

## Description:

removes the "subscribe" and "purchase" text:

<img width="988" height="496" alt="image"
src="https://github.com/user-attachments/assets/9566b450-0943-4684-8321-8024422bbd96"
/>

<img width="993" height="505" alt="image"
src="https://github.com/user-attachments/assets/f26bfd99-661d-48e3-beb3-e3e5d212e6f1"
/>

<img width="1002" height="511" alt="image"
src="https://github.com/user-attachments/assets/c8f2aadf-15d1-4e29-8142-f684c6e492f0"
/>

this is what it looks like if you're subbed to something now:
<img width="997" height="491" alt="image"
src="https://github.com/user-attachments/assets/5f011213-7ced-4a64-860e-45a6b0a7418f"
/>


## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory

## Please put your Discord username so you can be contacted if a bug or
regression is found:

w.o.n

resources/lang/en.json

@@ -1253,7 +1253,6 @@
     "confirm_downgrade": "Downgrade to {tier}? You'll get account credit for the unused portion of your current plan.",
     "confirm_upgrade": "Upgrade to {tier}? You'll be charged the prorated difference now.",
     "currency_pack_purchase_success": "Currency pack purchase successful!",
-    "current_plan": "Current Plan",
     "flags": "Flags",
     "login_required": "You must be logged in to purchase with currency.",
     "no_flags": "No flags available. Check back later for new items.",
@@ -1266,7 +1265,7 @@
     "price_per_month": "/mo",
     "purchase_failed": "Purchase failed. Please try again.",
     "purchase_success": "Purchase succeeded: {name}",
-    "subscribe_button": "Subscribe",
+    "subscribed": "Subscribed",
     "subscription_purchase_success": "Subscription activated!",
     "subscriptions": "Subscriptions",
     "switch_button": "Switch",
@@ -1288,7 +1287,6 @@
     "pattern": {
       "default": "Default"
     },
-    "purchase": "Purchase",
     "search": "Search...",
     "select_skin": "Select Skin",
     "selected": "selected",

src/client/components/CosmeticButton.ts

@@ -19,7 +19,6 @@ import "./CosmeticContainer";
 import "./CosmeticInfo";
 import { renderPatternPreview } from "./PatternPreview";
 import "./PlutoniumIcon";
-import { DEFAULT_DOLLAR_LABEL_KEY } from "./PurchaseButton";
 
 @customElement("cosmetic-button")
 export class CosmeticButton extends LitElement {
@@ -265,12 +264,11 @@ export class CosmeticButton extends LitElement {
     const isSkin = type === "skin";
     const isOwnedSubscription =
       type === "subscription" && active.relationship === "owned";
+    // Switching tiers shows "Switch"; a first-time subscribe shows price only.
     const dollarLabelKey =
-      type === "subscription"
-        ? this.userHasSubscription
-          ? "store.switch_button"
-          : "store.subscribe_button"
-        : DEFAULT_DOLLAR_LABEL_KEY;
+      type === "subscription" && this.userHasSubscription
+        ? "store.switch_button"
+        : "";
     const priceSuffix =
       type === "subscription" ? translateText("store.price_per_month") : "";
     const sizeClass = type === "flag" ? "gap-1 p-1.5 w-36" : "gap-2 p-3 w-48";
@@ -329,9 +327,9 @@ export class CosmeticButton extends LitElement {
         ${this.renderColorSwatches()}
         ${isOwnedSubscription
           ? html`<div
-              class="w-full mt-2 px-4 py-2 bg-amber-500/20 text-amber-300 border border-amber-500/40 rounded-lg text-xs font-bold uppercase tracking-wider text-center"
+              class="w-full mt-2 px-2 py-1.5 bg-amber-500/20 text-amber-300 border border-amber-500/40 rounded-lg text-base font-bold text-center"
             >
-              ${translateText("store.current_plan")}
+              ${translateText("store.subscribed")}
             </div>`
           : nothing}
       </cosmetic-container>

src/client/components/CosmeticContainer.ts

@@ -2,7 +2,6 @@ import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { Product } from "../../core/CosmeticSchemas";
 import "./PurchaseButton";
-import { DEFAULT_DOLLAR_LABEL_KEY } from "./PurchaseButton";
 
 type Rarity = "common" | "uncommon" | "rare" | "epic" | "legendary" | string;
 
@@ -159,9 +158,9 @@ export class CosmeticContainer extends LitElement {
   @property({ type: Number })
   priceSoft: number | null = null;
 
-  /** Override the dollar-button label key. */
+  /** Optional action-label key for the dollar button; empty shows price alone. */
   @property({ type: String })
-  dollarLabelKey: string = DEFAULT_DOLLAR_LABEL_KEY;
+  dollarLabelKey: string = "";
 
   /** Optional suffix appended to the displayed price, e.g. "/mo". */
   @property({ type: String })

src/client/components/PurchaseButton.ts

@@ -5,8 +5,6 @@ import { translateText } from "../Utils";
 import "./CapIcon";
 import "./PlutoniumIcon";
 
-export const DEFAULT_DOLLAR_LABEL_KEY = "territory_patterns.purchase";
-
 const PURCHASE_STYLE_ID = "purchase-button-styles";
 if (!document.getElementById(PURCHASE_STYLE_ID)) {
   const style = document.createElement("style");
@@ -192,9 +190,10 @@ export class PurchaseButton extends LitElement {
   @property({ type: String })
   rarity: string = "common";
 
-  /** Override the dollar-button label key. */
+  /** Optional action-label key shown before the price (e.g. "Switch"). Empty
+   * shows the price on its own. */
   @property({ type: String })
-  dollarLabelKey: string = DEFAULT_DOLLAR_LABEL_KEY;
+  dollarLabelKey: string = "";
 
   /** Optional suffix appended to the displayed price, e.g. "/mo". Not translated here. */
   @property({ type: String })
@@ -231,15 +230,14 @@ export class PurchaseButton extends LitElement {
   private renderDollarButton() {
     return html`
       <button
-        class="purchase-sparkle-btn relative overflow-hidden w-full px-4 py-2 bg-green-500/20 text-green-400 border border-green-500/30 rounded-lg text-xs font-bold uppercase tracking-wider cursor-pointer transition-all duration-200
+        class="purchase-sparkle-btn relative overflow-hidden w-full px-2 py-1.5 bg-green-500/20 text-green-400 border border-green-500/30 rounded-lg text-base font-bold cursor-pointer transition-all duration-200
          hover:bg-green-500 hover:border-green-400 hover:text-white hover:shadow-[0_0_20px_rgba(74,222,128,0.6)]"
         @click=${(e: Event) => this.handleClick(e, this.onPurchaseDollar)}
       >
         <span class="purchase-sparkle-streak"></span>
-        ${translateText(this.dollarLabelKey)}
-        <span class="ml-1 text-white/50"
-          >(${this.product!.price}${this.priceSuffix})</span
-        >
+        ${this.dollarLabelKey
+          ? html`${translateText(this.dollarLabelKey)} `
+          : nothing}${this.product!.price}${this.priceSuffix}
       </button>
     `;
   }