Fix: invite bugs

src/app/(mobile-ui)/points/page.tsx

@@ -15,10 +15,11 @@ import { Invite } from '@/services/services.types'
 import { generateInvitesShareText } from '@/utils'
 import { useQuery } from '@tanstack/react-query'
 import { useRouter } from 'next/navigation'
+import { useEffect } from 'react'
 
 const PointsPage = () => {
     const router = useRouter()
-    const { user } = useAuth()
+    const { user, fetchUser } = useAuth()
     const { data: invites, isLoading } = useQuery({
         queryKey: ['invites', user?.user.userId],
         queryFn: () => invitesApi.getInvites(),
@@ -29,6 +30,11 @@ const PointsPage = () => {
     const inviteCode = username ? `${username.toUpperCase()}INVITESYOU` : ''
     const inviteLink = `${process.env.NEXT_PUBLIC_BASE_URL}/invite?code=${inviteCode}`
 
+    useEffect(() => {
+        // Re-fetch user to get the latest invitees list for showing heart Icon
+        fetchUser()
+    }, [])
+
     if (isLoading) {
         return <PeanutLoading coverFullScreen />
     }

src/app/(setup)/setup/page.tsx

@@ -10,6 +10,7 @@ import { Suspense, useEffect, useState } from 'react'
 import { setupSteps as masterSetupSteps } from '../../../components/Setup/Setup.consts'
 import UnsupportedBrowserModal from '@/components/Global/UnsupportedBrowserModal'
 import { isLikelyWebview, isDeviceOsSupported, getDeviceTypeForLogic } from '@/components/Setup/Setup.utils'
+import { getFromCookie } from '@/utils'
 
 function SetupPageContent() {
     const { steps, inviteCode } = useSetupStore()
@@ -111,8 +112,13 @@ function SetupPageContent() {
                 determinedSetupInitialStepId = 'pwa-install'
             }
 
+            const inviteCodeFromCookie = getFromCookie('inviteCode')
+
+            // invite code can also be store in cookies, so we need to check both
+            const userInviteCode = inviteCode || inviteCodeFromCookie
+
             // If invite code is present, set the step to the signup screen
-            if (determinedSetupInitialStepId && inviteCode) {
+            if (determinedSetupInitialStepId && userInviteCode) {
                 const signupScreenIndex = steps.findIndex((s: ISetupStep) => s.screenId === 'signup')
                 dispatch(setupActions.setStep(signupScreenIndex + 1))
             } else if (determinedSetupInitialStepId) {

src/components/Global/Icons/Icon.tsx

@@ -63,7 +63,6 @@ import { ShieldIcon } from './shield'
 import { TrophyIcon } from './trophy'
 import { InviteHeartIcon } from './invite-heart'
 import { LockIcon } from './lock'
-import { InviterHeartIcon } from './inviter-heart'
 
 // available icon names
 export type IconName =
@@ -131,8 +130,6 @@ export type IconName =
     | 'trophy'
     | 'invite-heart'
     | 'lock'
-    | 'inviter-heart'
-
 export interface IconProps extends SVGProps<SVGSVGElement> {
     name: IconName
     size?: number | string
@@ -204,7 +201,6 @@ const iconComponents: Record<IconName, ComponentType<SVGProps<SVGSVGElement>>> =
     trophy: TrophyIcon,
     'invite-heart': InviteHeartIcon,
     lock: LockIcon,
-    'inviter-heart': InviterHeartIcon,
 }
 
 export const Icon: FC<IconProps> = ({ name, size = 24, width, height, ...props }) => {

src/components/Invites/InvitesPage.tsx

@@ -13,11 +13,12 @@ import { useAppDispatch } from '@/redux/hooks'
 import { setupActions } from '@/redux/slices/setup-slice'
 import { useAuth } from '@/context/authContext'
 import { EInviteType } from '@/services/services.types'
+import { saveToCookie } from '@/utils'
 
 function InvitePageContent() {
     const searchParams = useSearchParams()
     const inviteCode = searchParams.get('code')
-    const { logoutUser, isLoggingOut } = useAuth()
+    const { logoutUser, isLoggingOut, user } = useAuth()
 
     const dispatch = useAppDispatch()
     const router = useRouter()
@@ -36,10 +37,19 @@ function InvitePageContent() {
         if (inviteCode) {
             dispatch(setupActions.setInviteCode(inviteCode))
             dispatch(setupActions.setInviteType(EInviteType.PAYMENT_LINK))
+            saveToCookie('inviteCode', inviteCode) // Save to cookies as well, so that if user installs PWA, they can still use the invite code
             router.push('/setup?step=signup')
         }
     }
 
+    const handleLogout = () => {
+        if (user) {
+            logoutUser()
+        } else {
+            router.push('/setup')
+        }
+    }
+
     if (isLoading) {
         return <PeanutLoading coverFullScreen />
     }
@@ -76,7 +86,7 @@ function InvitePageContent() {
                             Claim your spot
                         </Button>
 
-                        <button disabled={isLoggingOut} onClick={logoutUser} className="text-sm underline">
+                        <button disabled={isLoggingOut} onClick={handleLogout} className="text-sm underline">
                             {isLoggingOut ? 'Please wait...' : 'Already have an account? Log in!'}
                         </button>
                     </div>

src/components/Invites/JoinWaitlistPage.tsx

@@ -15,15 +15,15 @@ import PeanutLoading from '../Global/PeanutLoading'
 import { useSetupStore } from '@/redux/hooks'
 
 const JoinWaitlistPage = () => {
-    const [inviteCode, setInviteCode] = useState('')
     const [isValid, setIsValid] = useState(false)
     const [isChanging, setIsChanging] = useState(false)
     const [isLoading, setisLoading] = useState(false)
     const [error, setError] = useState('')
     const { fetchUser, isFetchingUser, logoutUser, user } = useAuth()
     const [isLoggingOut, setisLoggingOut] = useState(false)
     const router = useRouter()
-    const { inviteType } = useSetupStore()
+    const { inviteType, inviteCode: setupInviteCode } = useSetupStore()
+    const [inviteCode, setInviteCode] = useState(setupInviteCode)
 
     const { data, isLoading: isLoadingWaitlistPosition } = useQuery({
         queryKey: ['waitlist-position'],

src/components/Setup/Views/SetupPasskey.tsx

@@ -10,7 +10,7 @@ import * as Sentry from '@sentry/nextjs'
 import { WalletProviderType, AccountType } from '@/interfaces'
 import { WebAuthnError } from '@simplewebauthn/browser'
 import Link from 'next/link'
-import { getFromLocalStorage, sanitizeRedirectURL } from '@/utils'
+import { getFromCookie, getFromLocalStorage, sanitizeRedirectURL } from '@/utils'
 import { POST_SIGNUP_ACTIONS } from '@/components/Global/PostSignupActionManager/post-signup-action.consts'
 
 const SetupPasskey = () => {
@@ -35,8 +35,12 @@ const SetupPasskey = () => {
                 telegramHandle: telegramHandle.length > 0 ? telegramHandle : undefined,
             })
                 .then(() => {
+                    const inviteCodeFromCookie = getFromCookie('inviteCode')
+
+                    const userInviteCode = inviteCode || inviteCodeFromCookie
+
                     // if no invite code, go to collect email step
-                    if (!inviteCode) {
+                    if (!userInviteCode) {
                         handleNext()
                         return
                     }

src/components/UserHeader/index.tsx

@@ -95,17 +95,15 @@ export const VerifiedUserLabel = ({
                     {badge}
                 </Tooltip>
             )}
-            {isInvitedByLoggedInUser && (
-                <Tooltip id="invited-by-user" content="You've invited this user." position="top">
+            {(isInvitedByLoggedInUser || isInviter) && (
+                <Tooltip
+                    id={isInviter ? 'inviter-user' : 'invited-by-user'}
+                    content={isInviter ? 'You were invited by this user.' : "You've invited this user."}
+                    position="top"
+                >
                     <Icon name="invite-heart" size={iconSize} />
                 </Tooltip>
             )}
-
-            {isInviter && (
-                <Tooltip id="inviter-user" content="You were invited by this user." position="top">
-                    <Icon name="inviter-heart" size={iconSize} />
-                </Tooltip>
-            )}
         </div>
     )
 }

src/hooks/useZeroDev.ts

@@ -6,7 +6,7 @@ import { useAuth } from '@/context/authContext'
 import { useKernelClient } from '@/context/kernelClient.context'
 import { useAppDispatch, useSetupStore, useZerodevStore } from '@/redux/hooks'
 import { zerodevActions } from '@/redux/slices/zerodev-slice'
-import { saveToCookie, saveToLocalStorage } from '@/utils'
+import { getFromCookie, removeFromCookie, saveToCookie, saveToLocalStorage } from '@/utils'
 import { toWebAuthnKey, WebAuthnMode } from '@zerodev/passkey-validator'
 import { useCallback, useContext } from 'react'
 import type { TransactionReceipt, Hex, Hash } from 'viem'
@@ -56,12 +56,20 @@ export const useZeroDev = () => {
                 rpID: window.location.hostname.replace(/^www\./, ''),
             })
 
-            if (inviteCode.trim().length > 0) {
+            const inviteCodeFromCookie = getFromCookie('inviteCode')
+
+            // invite code can also be store in cookies, so we need to check both
+            const userInviteCode = inviteCode || inviteCodeFromCookie
+
+            if (userInviteCode.trim().length > 0) {
                 try {
-                    const result = await invitesApi.acceptInvite(inviteCode, inviteType)
+                    const result = await invitesApi.acceptInvite(userInviteCode, inviteType)
                     if (!result.success) {
                         console.error('Error accepting invite', result)
                     }
+                    if (inviteCodeFromCookie) {
+                        removeFromCookie('inviteCode')
+                    }
                 } catch (e) {
                     console.error('Error accepting invite', e)
                 }