feat(subscription): default pay channel by country

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>