feat(subscription): default pay channel by country

src/app/subscription/__tests__/subscription-screen.helpers.test.ts

@@ -4,6 +4,7 @@ import { PaymentPlan } from "@/data/dto/payment";
 
 import {
   findSelectedSubscriptionPlan,
+  getDefaultPayChannelForCountryCode,
   getDefaultSubscriptionPlanId,
   toCoinsOfferPlanViews,
   toVipOfferPlanViews,
@@ -28,6 +29,14 @@ function makePlan(
 }
 
 describe("subscription screen helpers", () => {
+  it("defaults Philippines users to Ezpay and other countries to Stripe", () => {
+    expect(getDefaultPayChannelForCountryCode("PH")).toBe("ezpay");
+    expect(getDefaultPayChannelForCountryCode("ph")).toBe("ezpay");
+    expect(getDefaultPayChannelForCountryCode("HK")).toBe("stripe");
+    expect(getDefaultPayChannelForCountryCode("")).toBe("stripe");
+    expect(getDefaultPayChannelForCountryCode(null)).toBe("stripe");
+  });
+
   it("maps at most three VIP plans and all coin plans", () => {
     const plans = [
       makePlan({ planId: "vip_monthly", planName: "Monthly" }),

src/app/subscription/subscription-screen.helpers.ts

@@ -1,10 +1,16 @@
-import type { PaymentPlan } from "@/data/dto/payment";
+import type { PayChannel, PaymentPlan } from "@/data/dto/payment";
 
 import type { CoinsOfferPlanView } from "./components/subscription-coins-offer-section";
 import type { VipOfferPlanView } from "./components/subscription-vip-offer-section";
 
 export type SubscriptionType = "vip" | "topup";
 
+export function getDefaultPayChannelForCountryCode(
+  countryCode: string | null | undefined,
+): PayChannel {
+  return countryCode?.trim().toUpperCase() === "PH" ? "ezpay" : "stripe";
+}
+
 export function isVipPlan(plan: PaymentPlan): boolean {
   return plan.vipDays !== null;
 }

src/app/subscription/subscription-screen.tsx

@@ -1,9 +1,10 @@
 "use client";
-import { useEffect, useMemo } from "react";
+import { useEffect, useMemo, useRef } from "react";
 
 import { BackButton } from "@/app/_components";
 import { Checkbox, MobileShell } from "@/app/_components/core";
 import { AppConstants } from "@/core/app_constants";
+import { useUserState } from "@/stores/user/user-context";
 
 import {
   SubscriptionCheckoutButton,
@@ -15,6 +16,7 @@ import {
 import styles from "./components/subscription-screen.module.css";
 import {
   findSelectedSubscriptionPlan,
+  getDefaultPayChannelForCountryCode,
   getDefaultSubscriptionPlanId,
   toCoinsOfferPlanViews,
   toVipOfferPlanViews,
@@ -46,6 +48,8 @@ export function SubscriptionScreen({
     shouldResumePendingOrder,
     returnTo,
   });
+  const user = useUserState();
+  const paymentMethodManuallySelectedRef = useRef(false);
   const canSubscribeVip = subscriptionType === "vip";
 
   const vipOfferPlans = useMemo(
@@ -96,6 +100,28 @@ export function SubscriptionScreen({
     vipOfferPlans,
   ]);
 
+  useEffect(() => {
+    if (payment.status !== "ready") return;
+    if (paymentMethodManuallySelectedRef.current) return;
+
+    const countryCode = user.currentUser?.countryCode ?? "";
+    if (countryCode.trim().length === 0) return;
+
+    const defaultPayChannel =
+      getDefaultPayChannelForCountryCode(countryCode);
+    if (payment.payChannel === defaultPayChannel) return;
+
+    paymentDispatch({
+      type: "PaymentPayChannelChanged",
+      payChannel: defaultPayChannel,
+    });
+  }, [
+    payment.payChannel,
+    payment.status,
+    paymentDispatch,
+    user.currentUser?.countryCode,
+  ]);
+
   return (
     <MobileShell>
       <div className={styles.shell}>
@@ -136,12 +162,13 @@ export function SubscriptionScreen({
           <SubscriptionPaymentMethod
             value={payment.payChannel}
             disabled={isPaymentBusy}
-            onChange={(payChannel) =>
+            onChange={(payChannel) => {
+              paymentMethodManuallySelectedRef.current = true;
               paymentDispatch({
                 type: "PaymentPayChannelChanged",
                 payChannel,
-              })
-            }
+              });
+            }}
           />
         </section>