feat(account-center): auto select single verification method (#8032)

Author: wangsijie

packages/account-center/src/components/VerificationMethodList/index.tsx

@@ -1,4 +1,4 @@
-import { useContext, useState } from 'react';
+import { useContext, useEffect, useMemo, useRef, useState } from 'react';
 
 import PageContext from '@ac/Providers/PageContextProvider/PageContext';
 import SecondaryPageLayout from '@ac/layouts/SecondaryPageLayout';
@@ -9,9 +9,45 @@ import PasswordVerification from '../PasswordVerification';
 import PhoneVerification from '../PhoneVerification';
 import VerificationMethodButton from '../VerificationMethodButton';
 
+const isVerificationMethod = (value: VerificationMethod | false): value is VerificationMethod =>
+  value !== false;
+
 const VerificationMethodList = () => {
   const { userInfo } = useContext(PageContext);
   const [verifyingMethod, setVerifyingMethod] = useState<VerificationMethod>();
+  // Track if we already auto-selected the only available method to avoid re-trigger on Back.
+  const hasAutoSelectedMethod = useRef(false);
+
+  const hasPasswordVerification = Boolean(userInfo?.hasPassword);
+  const hasEmailVerification = Boolean(userInfo?.primaryEmail);
+  const hasPhoneVerification = Boolean(userInfo?.primaryPhone);
+
+  const availableMethods = useMemo(
+    () =>
+      [
+        hasPasswordVerification && VerificationMethod.Password,
+        hasEmailVerification && VerificationMethod.EmailCode,
+        hasPhoneVerification && VerificationMethod.PhoneCode,
+      ].filter((method) => isVerificationMethod(method)),
+    [hasEmailVerification, hasPasswordVerification, hasPhoneVerification]
+  );
+
+  useEffect(() => {
+    // Auto-select the lone available method once on mount.
+    if (!verifyingMethod && availableMethods.length === 1 && !hasAutoSelectedMethod.current) {
+      setVerifyingMethod(availableMethods[0]);
+      // eslint-disable-next-line @silverhand/fp/no-mutation
+      hasAutoSelectedMethod.current = true;
+      return;
+    }
+
+    // Clear selection if it no longer exists (e.g., user info changed).
+    if (verifyingMethod && !availableMethods.includes(verifyingMethod)) {
+      setVerifyingMethod(undefined);
+      // eslint-disable-next-line @silverhand/fp/no-mutation
+      hasAutoSelectedMethod.current = false;
+    }
+  }, [availableMethods, verifyingMethod]);
 
   if (verifyingMethod === VerificationMethod.Password) {
     return (
@@ -43,16 +79,13 @@ const VerificationMethodList = () => {
     );
   }
 
-  const hasEmailVerification = Boolean(userInfo?.primaryEmail);
-  const hasPhoneVerification = Boolean(userInfo?.primaryPhone);
-
   return (
     <SecondaryPageLayout
       title="account_center.verification.title"
       description="account_center.verification.description"
     >
       <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
-        {userInfo?.hasPassword && (
+        {hasPasswordVerification && (
           <VerificationMethodButton
             method={VerificationMethod.Password}
             onClick={() => {