refactor(payment): unify method selector visibility

src/app/_components/payment/__tests__/payment-method-selector.test.tsx

@@ -7,8 +7,11 @@ describe("PaymentMethodSelector", () => {
   it("orders the default channel first and renders page analytics", () => {
     const html = renderToStaticMarkup(
       <PaymentMethodSelector
+        config={{
+          canChoosePaymentMethod: true,
+          initialPayChannel: "ezpay",
+        }}
         value="ezpay"
-        defaultChannel="ezpay"
         caption="GCash by default"
         analyticsKey="tip.payment_method"
         onChange={() => undefined}
@@ -40,6 +43,10 @@ describe("PaymentMethodSelector", () => {
   it("disables both payment methods while payment is busy", () => {
     const html = renderToStaticMarkup(
       <PaymentMethodSelector
+        config={{
+          canChoosePaymentMethod: true,
+          initialPayChannel: "stripe",
+        }}
         value="stripe"
         disabled
         analyticsKey="subscription.payment_method"
@@ -52,4 +59,20 @@ describe("PaymentMethodSelector", () => {
       'data-analytics-key="subscription.payment_method"',
     );
   });
+
+  it("does not render when payment method selection is unavailable", () => {
+    const html = renderToStaticMarkup(
+      <PaymentMethodSelector
+        config={{
+          canChoosePaymentMethod: false,
+          initialPayChannel: "stripe",
+        }}
+        value="stripe"
+        analyticsKey="tip.payment_method"
+        onChange={() => undefined}
+      />,
+    );
+
+    expect(html).toBe("");
+  });
 });

src/app/_components/payment/payment-method-selector.tsx

@@ -3,6 +3,7 @@
 import Image from "next/image";
 
 import type { PayChannel } from "@/data/schemas/payment";
+import type { PaymentMethodConfig } from "@/lib/payment/payment_method";
 
 const PAYMENT_METHODS: readonly {
   channel: PayChannel;
@@ -21,24 +22,28 @@ const PAYMENT_METHODS: readonly {
 ];
 
 export interface PaymentMethodSelectorProps {
+  config: PaymentMethodConfig;
   value: PayChannel;
-  defaultChannel?: PayChannel;
   disabled?: boolean;
   caption?: string;
+  className?: string;
   analyticsKey: string;
   onChange: (channel: PayChannel) => void;
 }
 
 export function PaymentMethodSelector({
+  config,
   value,
-  defaultChannel = "stripe",
   disabled = false,
   caption = "Stripe by default",
+  className,
   analyticsKey,
   onChange,
 }: PaymentMethodSelectorProps) {
+  if (!config.canChoosePaymentMethod) return null;
+
   const paymentMethods =
-    defaultChannel === "ezpay"
+    config.initialPayChannel === "ezpay"
       ? [...PAYMENT_METHODS].sort((a, b) =>
           a.channel === "ezpay" ? -1 : b.channel === "ezpay" ? 1 : 0,
         )
@@ -46,7 +51,7 @@ export function PaymentMethodSelector({
 
   return (
     <section
-      className="flex flex-col gap-[clamp(8px,1.852vw,10px)]"
+      className={`flex flex-col gap-[clamp(8px,1.852vw,10px)] ${className ?? ""}`.trim()}
       aria-labelledby="payment-method-title"
     >
       <div className="flex items-baseline justify-between gap-sm px-xs">

src/app/subscription/subscription-screen.tsx

@@ -224,18 +224,15 @@ export function SubscriptionScreen({
           />
         </div>
 
-        {paymentMethodConfig.canChoosePaymentMethod ? (
+        <PaymentMethodSelector
-          <section className={styles.paymentMethodSlot}>
+          config={paymentMethodConfig}
-            <PaymentMethodSelector
+          value={payment.payChannel}
-              value={payment.payChannel}
+          disabled={isPaymentBusy}
-              defaultChannel={paymentMethodConfig.initialPayChannel}
+          caption="GCash by default in the Philippines"
-              disabled={isPaymentBusy}
+          className={styles.paymentMethodSlot}
-              caption="GCash by default in the Philippines"
+          analyticsKey="subscription.payment_method"
-              analyticsKey="subscription.payment_method"
+          onChange={handlePaymentMethodChange}
-              onChange={handlePaymentMethodChange}
+        />
-            />
-          </section>
-        ) : null}
 
         <div className={styles.ctaSlot}>
           <SubscriptionCheckoutButton

src/app/tip/tip-screen.tsx

@@ -284,18 +284,15 @@ export function TipScreen({
           />
         </section>
 
-        {paymentMethodConfig.canChoosePaymentMethod ? (
+        <PaymentMethodSelector
-          <section className={styles.paymentMethodSlot}>
+          config={paymentMethodConfig}
-            <PaymentMethodSelector
+          value={payment.payChannel}
-              value={payment.payChannel}
+          disabled={isPaymentBusy}
-              defaultChannel={paymentMethodConfig.initialPayChannel}
+          caption="GCash by default in the Philippines"
-              disabled={isPaymentBusy}
+          className={styles.paymentMethodSlot}
-              caption="GCash by default in the Philippines"
+          analyticsKey="tip.payment_method"
-              analyticsKey="tip.payment_method"
+          onChange={handlePaymentMethodChange}
-              onChange={handlePaymentMethodChange}
+        />
-            />
-          </section>
-        ) : null}
 
         {showMissingPlan ? (
           <p className={styles.statusMessage} role="alert">