feat(subscription): highlight popular plans

src/app/subscription/components/__tests__/tailwind-components.test.tsx

@@ -6,6 +6,8 @@ import { StripePaymentDialog } from "@/app/_components/payment/stripe-payment-di
 import { SubscriptionCtaButton } from "../subscription-cta-button";
 import { SubscriptionPaymentMethod } from "../subscription-payment-method";
 import { SubscriptionPaymentSuccessDialog } from "../subscription-payment-success-dialog";
+import { SubscriptionCoinsOfferSection } from "../subscription-coins-offer-section";
+import { SubscriptionVipOfferSection } from "../subscription-vip-offer-section";
 
 describe("subscription Tailwind components", () => {
   it("renders SubscriptionCtaButton with loading state", () => {
@@ -93,4 +95,44 @@ describe("subscription Tailwind components", () => {
     expect(html).toContain("Payment unavailable");
     expect(html).toContain("bg-[linear-gradient(var(--color-button-gradient-start,#ff67e0)");
   });
+
+  it("renders most popular badges for VIP and coin plans", () => {
+    const vipHtml = renderToStaticMarkup(
+      <SubscriptionVipOfferSection
+        plans={[
+          {
+            id: "vip_monthly",
+            title: "Monthly",
+            price: "9.99",
+            currency: "usd",
+            originalPrice: "19.99",
+            mostPopular: true,
+            isFirstRechargeOffer: true,
+            firstRechargeDiscountPercent: 50,
+          },
+        ]}
+        selectedPlanId="vip_monthly"
+        onSelectPlan={() => undefined}
+      />,
+    );
+    const coinsHtml = renderToStaticMarkup(
+      <SubscriptionCoinsOfferSection
+        plans={[
+          {
+            id: "coin_1000",
+            coins: 1000,
+            price: "9.99",
+            currency: "US$",
+            mostPopular: true,
+          },
+        ]}
+        selectedPlanId={null}
+        onSelectPlan={() => undefined}
+      />,
+    );
+
+    expect(vipHtml).toContain("Most Popular");
+    expect(vipHtml).toContain("50% OFF");
+    expect(coinsHtml).toContain("Most Popular");
+  });
 });