style(subscription): prioritize default payment option

src/app/subscription/components/subscription-payment-method.tsx

@@ -24,6 +24,7 @@ const PAYMENT_METHODS: Array<{
 
 export interface SubscriptionPaymentMethodProps {
   value: PayChannel;
+  defaultChannel?: PayChannel;
   disabled?: boolean;
   caption?: string;
   onChange: (channel: PayChannel) => void;
@@ -31,10 +32,18 @@ export interface SubscriptionPaymentMethodProps {
 
 export function SubscriptionPaymentMethod({
   value,
+  defaultChannel = "stripe",
   disabled = false,
   caption = "Stripe by default",
   onChange,
 }: SubscriptionPaymentMethodProps) {
+  const paymentMethods =
+    defaultChannel === "ezpay"
+      ? [...PAYMENT_METHODS].sort((a, b) =>
+          a.channel === "ezpay" ? -1 : b.channel === "ezpay" ? 1 : 0,
+        )
+      : PAYMENT_METHODS;
+
   return (
     <section className={styles.root} aria-labelledby="payment-method-title">
       <div className={styles.header}>
@@ -44,7 +53,7 @@ export function SubscriptionPaymentMethod({
         <span className={styles.caption}>{caption}</span>
       </div>
       <div className={styles.options}>
-        {PAYMENT_METHODS.map((method) => {
+        {paymentMethods.map((method) => {
           const selected = method.channel === value;
           const classes = [
             styles.option,

src/app/subscription/subscription-screen.tsx

@@ -211,6 +211,7 @@ export function SubscriptionScreen({
           <section className={styles.paymentMethodSlot}>
             <SubscriptionPaymentMethod
               value={payment.payChannel}
+              defaultChannel={resolvedInitialPayChannel}
               disabled={isPaymentBusy}
               caption="GCash by default in the Philippines"
               onChange={(payChannel) => {