refactor(ui): Update TaskSetupMFA to handle optional auto-navigation and improve type definitions for session tasks

Author: octoper

packages/ui/src/components/SessionTasks/tasks/TaskSetupMfa/SmsCodeFlowScreen.tsx

@@ -1,18 +1,16 @@
-import { useClerk, useReverification, useSession, useUser } from '@clerk/shared/react';
+import { useReverification, useUser } from '@clerk/shared/react';
 import type { PhoneNumberResource, UserResource } from '@clerk/shared/types';
 import React, { useRef } from 'react';
 
 import { useWizard, Wizard } from '@/common';
 import { MfaBackupCodeList } from '@/components/UserProfile/MfaBackupCodeList';
-import { useEnvironment } from '@/contexts';
-import { useSessionTasksContext, useTaskSetupMFAContext } from '@/contexts/components/SessionTasks';
 import { Action, Actions } from '@/elements/Actions';
 import { useCardState } from '@/elements/contexts';
 import { Form } from '@/elements/Form';
 import { FormButtonContainer } from '@/elements/FormButtons';
 import { PreviewButton } from '@/elements/PreviewButton';
+import { type VerificationCodeCardProps, VerificationCodeContent } from '@/elements/VerificationCodeCard';
 import { Add } from '@/icons';
-import { useRouter } from '@/router';
 import { Button, Col, descriptors, Flex, Flow, localizationKeys, Text } from '@/ui/customizables';
 import { Card } from '@/ui/elements/Card';
 import { Header } from '@/ui/elements/Header';
@@ -22,7 +20,6 @@ import { getFlagEmojiFromCountryIso, parsePhoneString, stringToFormattedPhoneStr
 import { useFormControl } from '@/ui/utils/useFormControl';
 
 import { SharedFooterActionForSignOut } from './shared';
-import { VerificationCodeContent, type VerificationCodeCardProps } from '@/elements/VerificationCodeCard';
 
 type MFAVerifyPhoneForSessionTasksProps = {
   resourceRef: React.MutableRefObject<PhoneNumberResource | undefined>;
@@ -43,8 +40,8 @@ const MFAVerifyPhoneForSessionTasks = (props: MFAVerifyPhoneForSessionTasksProps
   const enableMfa = async () => {
     card.setLoading(phone?.id);
     try {
-      await setReservedForSecondFactor();
-      resourceRef.current = phone;
+      const result = await setReservedForSecondFactor();
+      resourceRef.current = result;
       onSuccess();
     } catch (err) {
       handleError(err as Error, [], card.setError);
@@ -213,8 +210,8 @@ const PhoneItem = ({ phone, onSuccess, onUnverifiedPhoneClick, resourceRef }: Ph
 
     card.setLoading(phone.id);
     try {
-      await setReservedForSecondFactor();
-      resourceRef.current = phone;
+      const result = await setReservedForSecondFactor();
+      resourceRef.current = result;
       onSuccess();
     } catch (err) {
       handleError(err as Error, [], card.setError);
@@ -315,7 +312,7 @@ const SmsCodeScreen = (props: SmsCodeScreenProps) => {
                 width: t.sizes.$8,
                 height: t.sizes.$6,
               })}
-            ></Action>
+            />
           </Actions>
           <Flex
             justify='center'