fix(user): mobile announcement close + payment method selection (Fixes #8)

apps/user/src/sections/subscribe/payment-methods.tsx

@@ -9,7 +9,7 @@ import {
 import { cn } from "@workspace/ui/lib/utils";
 import { getAvailablePaymentMethods } from "@workspace/ui/services/user/portal";
 import type React from "react";
-import { memo } from "react";
+import React, { memo } from "react";
 import { useTranslation } from "react-i18next";
 
 interface PaymentMethodsProps {
@@ -30,12 +30,21 @@ const PaymentMethods: React.FC<PaymentMethodsProps> = ({
     queryFn: async () => {
       const { data } = await getAvailablePaymentMethods();
       const list = data.data?.list || [];
-      const methods = balance ? list : list.filter((item) => item.id !== -1);
+      return balance ? list : list.filter((item) => item.id !== -1);
-      const defaultMethod = methods.find((item) => item.id)?.id;
-      if (defaultMethod) onChange(defaultMethod);
-      return methods;
     },
   });
+
+  // Only set a default when the current value is not a valid option.
+  // This avoids resetting the user's selection on refetch (common on mobile).
+  // Prefer non-balance methods when possible.
+  React.useEffect(() => {
+    if (!data || data.length === 0) return;
+    const valid = data.some((m) => String(m.id) === String(value));
+    if (valid) return;
+
+    const preferred = data.find((m) => m.id !== -1)?.id ?? data[0]!.id;
+    onChange(preferred);
+  }, [data, onChange, value]);
   return (
     <>
       <div className="font-semibold">
@@ -44,7 +53,6 @@ const PaymentMethods: React.FC<PaymentMethodsProps> = ({
       <RadioGroup
         className="grid grid-cols-2 gap-2 md:grid-cols-5"
         onValueChange={(val) => {
-          console.log(val);
           onChange(Number(val));
         }}
         value={String(value)}

apps/user/src/sections/user/announcement.tsx

@@ -11,6 +11,7 @@ import Empty from "@workspace/ui/composed/empty";
 import { Icon } from "@workspace/ui/composed/icon";
 import { Markdown } from "@workspace/ui/composed/markdown";
 import { queryAnnouncement } from "@workspace/ui/services/user/announcement";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useGlobalStore } from "@/stores/global";
 
@@ -39,10 +40,16 @@ export default function Announcement({ type }: { type: "popup" | "pinned" }) {
 
   if (!data) return null;
 
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    if (type === "popup" && !!data) setOpen(true);
+  }, [data, type]);
+
   if (type === "popup") {
     return (
-      <Dialog defaultOpen={!!data}>
+      <Dialog onOpenChange={setOpen} open={open}>
-        <DialogContent className="sm:max-w-[425px]">
+        <DialogContent className="max-h-[85vh] overflow-auto sm:max-w-[425px]">
           <DialogHeader>
             <DialogTitle>{data?.title}</DialogTitle>
           </DialogHeader>