feat(payment): share payment method selector

2026-07-17 18:27:24 +08:00
parent 66445a9972
commit b22db6d147
13 changed files with 386 additions and 173 deletions
@@ -0,0 +1,55 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+
+import { PaymentMethodSelector } from "../payment-method-selector";
+
+describe("PaymentMethodSelector", () => {
+  it("orders the default channel first and renders page analytics", () => {
+    const html = renderToStaticMarkup(
+      <PaymentMethodSelector
+        value="ezpay"
+        defaultChannel="ezpay"
+        caption="GCash by default"
+        analyticsKey="tip.payment_method"
+        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"'),
+    );
+    const selectedButton = html.match(
+      /<button[^>]*aria-pressed="true"[^>]*>/,
+    )?.[0];
+    expect(selectedButton).toBeDefined();
+    expect(selectedButton).toContain(
+      'data-analytics-key="tip.payment_method"',
+    );
+    expect(selectedButton).toContain("border-[#f657a0]");
+    expect(selectedButton).not.toContain("border-[rgba(246,87,160,0.18)]");
+    expect(selectedButton).toContain("bg-[#fff4f9]");
+    expect(selectedButton).not.toContain("bg-white");
+    expect(selectedButton).toContain("0_0_0_3px_rgba(217,47,127,0.18)");
+    expect(selectedButton).toContain("-translate-y-0.5");
+    expect(html).toContain("/images/subscription/gcash-logo.svg");
+  });
+
+  it("disables both payment methods while payment is busy", () => {
+    const html = renderToStaticMarkup(
+      <PaymentMethodSelector
+        value="stripe"
+        disabled
+        analyticsKey="subscription.payment_method"
+        onChange={() => undefined}
+      />,
+    );
+
+    expect(html.match(/ disabled=""/g)).toHaveLength(2);
+    expect(html).toContain(
+      'data-analytics-key="subscription.payment_method"',
+    );
+  });
+});