fix(unlock-app): Account migration cleanup (#15088)

* automatically check user type if user is available

* update migration notif modal

* update migrate user content

* allow user to sign out from modal

unlock-app/src/components/legacy-auth/ConnectViaEmail.tsx

@@ -4,13 +4,26 @@ import { useMutation } from '@tanstack/react-query'
 import { locksmith } from '~/config/locksmith'
 import { UserAccountType } from '~/utils/userAccountType'
 import { ToastHelper } from '~/components/helpers/toast.helper'
+import { useEffect } from 'react'
 
 interface ConnectViaEmailProps {
   onNext: (data: { email: string; accountType: UserAccountType[] }) => void
+  email?: string
 }
 
-export const ConnectViaEmail = ({ onNext }: ConnectViaEmailProps) => {
-  const methods = useForm<{ email: string }>()
+export const ConnectViaEmail = ({ onNext, email }: ConnectViaEmailProps) => {
+  const methods = useForm<{ email: string }>({
+    defaultValues: {
+      email: email || '',
+    },
+  })
+
+  useEffect(() => {
+    if (email) {
+      methods.setValue('email', email)
+      onSubmit({ email })
+    }
+  }, [email])
 
   // check user account type
   const checkUserAccountType = useMutation({
@@ -51,16 +64,7 @@ export const ConnectViaEmail = ({ onNext }: ConnectViaEmailProps) => {
         return
       }
 
-      // Check if user already has Privy account
-      const privyUser = await checkPrivyUserMutation.mutateAsync(email)
-      if (privyUser) {
-        ToastHelper.error('This email already has a Privy account.')
-        // Clear the form
-        methods.reset()
-        return
-      }
-
-      // Only proceed to check account type if no Privy account exists
+      // proceed to check account type if no Privy account exists
       const accountType = await checkUserAccountType.mutateAsync(email)
       if (!accountType?.length) {
         ToastHelper.error('No account found for this email')

unlock-app/src/components/legacy-auth/MigrateUserContent.tsx

@@ -19,6 +19,7 @@ export const MigrateUserContent = () => {
   const [userEmail, setUserEmail] = useState<string>('')
   const [walletPk, setWalletPk] = useState<string | null>(null)
   const [userAccountType, setUserAccountType] = useState<UserAccountType[]>([])
+
   // Track migration status
   const [isMigrating, setIsMigrating] = useState(false)
   // Track Privy connection status
@@ -89,8 +90,9 @@ export const MigrateUserContent = () => {
                 // If not, it "yields" the email account + type to the next step
                 return (
                   <ConnectViaEmail
+                    email={user?.email?.address || ''}
                     onNext={({ email, accountType }) => {
-                      setUserEmail(email)
+                      setUserEmail(email || user?.email?.address || '')
                       setUserAccountType(accountType)
                       onNext()
                     }}

unlock-app/src/components/legacy-auth/MigrationNotificationModal.tsx

@@ -1,3 +1,4 @@
+import { usePrivy } from '@privy-io/react-auth'
 import { Button, Modal } from '@unlock-protocol/ui'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
@@ -10,23 +11,39 @@ export const MigrationModal = ({
   setIsOpen: (isOpen: boolean) => void
 }) => {
   const pathname = usePathname()
+  const { logout } = usePrivy()
   const isCheckoutPage = pathname?.includes('checkout')
-  // don't show the modal on the checkout page
-  if (isCheckoutPage) return null
+  const isMigrationPage = pathname?.includes('migrate-user')
+  // don't show the modal on the checkout or migration page
+  if (isCheckoutPage || isMigrationPage) return null
+
+  // no-op function to prevent modal from closing, even by entering the escape key
+  const preventClose = () => {}
+
+  const handleSignOut = async () => {
+    await logout()
+    setIsOpen(false)
+  }
 
   return (
-    <Modal isOpen={isOpen} setIsOpen={setIsOpen} size="small">
+    <Modal isOpen={isOpen} setIsOpen={preventClose} size="small" hideCloseIcon>
       <div className="flex flex-col gap-4 text-center">
         <h2 className="text-xl font-bold">Legacy Account Detected</h2>
         <p>
           We&apos;ve detected that you have an existing Unlock account that
           needs to be migrated. Please complete the migration process to
           continue.
         </p>
-        <div className="flex justify-center">
+        <div className="flex flex-col gap-2 items-center">
           <Link href="/migrate-user">
             <Button>Start Migration</Button>
           </Link>
+          <p
+            className="text-sm underline text-brand-ui-primary cursor-pointer"
+            onClick={handleSignOut}
+          >
+            Sign out
+          </p>
         </div>
       </div>
     </Modal>