refactor(subscription): migrate payment components to tailwind

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

@@ -2,6 +2,8 @@ import { renderToStaticMarkup } from "react-dom/server";
 import { describe, expect, it } from "vitest";
 
 import { SubscriptionCtaButton } from "../subscription-cta-button";
+import { SubscriptionPaymentMethod } from "../subscription-payment-method";
+import { SubscriptionPaymentSuccessDialog } from "../subscription-payment-success-dialog";
 
 describe("subscription Tailwind components", () => {
   it("renders SubscriptionCtaButton with loading state", () => {
@@ -15,4 +17,55 @@ describe("subscription Tailwind components", () => {
     expect(html).toContain("disabled");
     expect(html).toContain("Pay now");
   });
+
+  it("renders SubscriptionPaymentSuccessDialog with topup content", () => {
+    expect(
+      renderToStaticMarkup(
+        <SubscriptionPaymentSuccessDialog
+          open={false}
+          subscriptionType="vip"
+          onClose={() => undefined}
+        />,
+      ),
+    ).toBe("");
+
+    const html = renderToStaticMarkup(
+      <SubscriptionPaymentSuccessDialog
+        open
+        subscriptionType="topup"
+        onClose={() => undefined}
+      />,
+    );
+
+    expect(html).toContain('role="alertdialog"');
+    expect(html).toContain("z-80");
+    expect(html).toContain("Payment successful");
+    expect(html).toContain("Your coins have been added");
+    expect(html).toContain("bg-[linear-gradient(135deg,#ff67e0_0%,#f657a0_100%)]");
+    expect(html).toContain("OK");
+  });
+
+  it("renders SubscriptionPaymentMethod with default ordering and selection", () => {
+    const html = renderToStaticMarkup(
+      <SubscriptionPaymentMethod
+        value="ezpay"
+        defaultChannel="ezpay"
+        caption="GCash by default"
+        onChange={() => undefined}
+      />,
+    );
+
+    expect(html).toContain('aria-labelledby="payment-method-title"');
+    expect(html).toContain("Payment Method");
+    expect(html).toContain("GCash by default");
+    expect(html.indexOf('aria-label="GCash"')).toBeLessThan(
+      html.indexOf('aria-label="Stripe"'),
+    );
+    expect(html).toContain('aria-pressed="true"');
+    expect(html).toContain("border-[#d92f7f]");
+    expect(html).toContain("bg-[#fff4f9]");
+    expect(html).toContain("0_0_0_3px_rgba(217,47,127,0.18)");
+    expect(html).toContain("-translate-y-0.5");
+    expect(html).toContain("/images/subscription/gcash-logo.svg");
+  });
 });