fix(subscription): restrict payment methods by country

src/app/subscription/subscription-screen.tsx

@@ -1,10 +1,11 @@
 "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 type { PayChannel } from "@/data/dto/payment";
+import { useUserState } from "@/stores/user/user-context";
 
 import {
   SubscriptionCheckoutButton,
@@ -16,8 +17,10 @@ import {
 import styles from "./components/subscription-screen.module.css";
 import {
   findSelectedSubscriptionPlan,
+  canChooseSubscriptionPayChannel,
   getFirstRechargeOfferView,
   getDefaultSubscriptionPlanId,
+  resolveSubscriptionPayChannel,
   toCoinsOfferPlanViews,
   toVipOfferPlanViews,
   type SubscriptionType,
@@ -30,15 +33,24 @@ export interface SubscriptionScreenProps {
   subscriptionType?: SubscriptionType;
   shouldResumePendingOrder?: boolean;
   returnTo?: "chat" | null;
-  initialPayChannel?: PayChannel;
+  initialPayChannel?: PayChannel | null;
 }
 
 export function SubscriptionScreen({
   subscriptionType = "vip",
   shouldResumePendingOrder = false,
   returnTo = null,
-  initialPayChannel = "stripe",
+  initialPayChannel = null,
 }: SubscriptionScreenProps) {
+  const userState = useUserState();
+  const countryCode = userState.currentUser?.countryCode;
+  const canChoosePaymentMethod =
+    canChooseSubscriptionPayChannel(countryCode);
+  const resolvedInitialPayChannel = resolveSubscriptionPayChannel({
+    countryCode,
+    requestedPayChannel: initialPayChannel,
+  });
+  const phDefaultPayChannelAppliedRef = useRef(false);
   const {
     payment,
     paymentDispatch,
@@ -49,7 +61,7 @@ export function SubscriptionScreen({
     subscriptionType,
     shouldResumePendingOrder,
     returnTo,
-    initialPayChannel,
+    initialPayChannel: resolvedInitialPayChannel,
   });
   const canSubscribeVip = subscriptionType === "vip";
 
@@ -89,6 +101,36 @@ export function SubscriptionScreen({
   const canActivate =
     selectedPlan !== null && payment.agreed && !isPaymentBusy;
 
+  useEffect(() => {
+    if (isPaymentBusy) return;
+
+    if (!canChoosePaymentMethod) {
+      if (payment.payChannel === "stripe") return;
+      paymentDispatch({
+        type: "PaymentPayChannelChanged",
+        payChannel: "stripe",
+      });
+      return;
+    }
+
+    if (initialPayChannel !== null) return;
+    if (phDefaultPayChannelAppliedRef.current) return;
+    phDefaultPayChannelAppliedRef.current = true;
+
+    if (payment.payChannel === resolvedInitialPayChannel) return;
+    paymentDispatch({
+      type: "PaymentPayChannelChanged",
+      payChannel: resolvedInitialPayChannel,
+    });
+  }, [
+    canChoosePaymentMethod,
+    initialPayChannel,
+    isPaymentBusy,
+    payment.payChannel,
+    paymentDispatch,
+    resolvedInitialPayChannel,
+  ]);
+
   useEffect(() => {
     const defaultPlanId = getDefaultSubscriptionPlanId({
       canSubscribeVip,
@@ -171,18 +213,21 @@ export function SubscriptionScreen({
           />
         </div>
 
-        <section className={styles.paymentMethodSlot}>
-          <SubscriptionPaymentMethod
-            value={payment.payChannel}
-            disabled={isPaymentBusy}
-            onChange={(payChannel) => {
-              paymentDispatch({
-                type: "PaymentPayChannelChanged",
-                payChannel,
-              });
-            }}
-          />
-        </section>
+        {canChoosePaymentMethod ? (
+          <section className={styles.paymentMethodSlot}>
+            <SubscriptionPaymentMethod
+              value={payment.payChannel}
+              disabled={isPaymentBusy}
+              caption="Ezpay by default in the Philippines"
+              onChange={(payChannel) => {
+                paymentDispatch({
+                  type: "PaymentPayChannelChanged",
+                  payChannel,
+                });
+              }}
+            />
+          </section>
+        ) : null}
 
         <div className={styles.ctaSlot}>
           <SubscriptionCheckoutButton