[TASK-14876] Feat/invites

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

@@ -40,6 +40,7 @@ import { useClaimBankFlow } from '@/context/ClaimBankFlowContext'
 import { useDeviceType, DeviceType } from '@/hooks/useGetDeviceType'
 import useKycStatus from '@/hooks/useKycStatus'
 import HomeBanners from '@/components/Home/HomeBanners'
+import InvitesIcon from '@/components/Home/InvitesIcon'
 
 const BALANCE_WARNING_THRESHOLD = parseInt(process.env.NEXT_PUBLIC_BALANCE_WARNING_THRESHOLD ?? '500')
 const BALANCE_WARNING_EXPIRY = parseInt(process.env.NEXT_PUBLIC_BALANCE_WARNING_EXPIRY ?? '1814400') // 21 days in seconds
@@ -218,7 +219,12 @@ export default function Home() {
             <div className="h-full w-full space-y-6 p-5">
                 <div className="flex items-center justify-between gap-2">
                     <UserHeader username={username!} fullName={userFullName} isVerified={isUserKycApproved} />
-                    <SearchUsers />
+                    <div className="flex items-center gap-2">
+                        <Link href="/points">
+                            <InvitesIcon />
+                        </Link>
+                        <SearchUsers />
+                    </div>
                 </div>
                 <div className="space-y-4">
                     <ActionButtonGroup>

src/app/(mobile-ui)/layout.tsx

@@ -16,11 +16,12 @@ import { twMerge } from 'tailwind-merge'
 import '../../styles/globals.css'
 import SupportDrawer from '@/components/Global/SupportDrawer'
 import { useSupportModalContext } from '@/context/SupportModalContext'
+import JoinWaitlistPage from '@/components/Invites/JoinWaitlistPage'
 import { useRouter } from 'next/navigation'
 import { Banner } from '@/components/Global/Banner'
 
 // Allow access to some public paths without authentication
-const publicPathRegex = /^\/(request\/pay|claim|pay\/.+$|support)/
+const publicPathRegex = /^\/(request\/pay|claim|pay\/.+$|support|invite)/
 
 const Layout = ({ children }: { children: React.ReactNode }) => {
     const pathName = usePathname()
@@ -83,14 +84,21 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
         }
     }, [user, isFetchingUser])
 
-    if (!isReady || (isFetchingUser && !user && !hasToken && !isPublicPath)) {
+    if (!isReady || isFetchingUser || (!hasToken && !isPublicPath) || (!isPublicPath && !user)) {
         return (
             <div className="flex h-[100dvh] w-full flex-col items-center justify-center">
                 <PeanutLoading />
             </div>
         )
     }
 
+    // Show waitlist page if user doesn't have app access
+    if (!isFetchingUser && user && !user?.user.hasAppAccess) {
+        return <JoinWaitlistPage />
+    }
+
+    console.log(user, 'user')
+
     return (
         <div className="flex min-h-[100dvh] w-full bg-background">
             {/* Wrapper div for desktop layout */}

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

@@ -1,32 +1,108 @@
 'use client'
 
-import Icon from '@/components/Global/Icon'
+import PageContainer from '@/components/0_Bruddle/PageContainer'
+import Card, { getCardPosition } from '@/components/Global/Card'
+import CopyToClipboard from '@/components/Global/CopyToClipboard'
+import { Icon } from '@/components/Global/Icons/Icon'
+import NavHeader from '@/components/Global/NavHeader'
+import PeanutLoading from '@/components/Global/PeanutLoading'
+import ShareButton from '@/components/Global/ShareButton'
+import TransactionAvatarBadge from '@/components/TransactionDetails/TransactionAvatarBadge'
+import { VerifiedUserLabel } from '@/components/UserHeader'
 import { useAuth } from '@/context/authContext'
-import peanutClub from '@/assets/peanut/peanut-club.png'
+import { invitesApi } from '@/services/invites'
+import { Invite } from '@/services/services.types'
+import { generateInvitesShareText } from '@/utils'
+import { useQuery } from '@tanstack/react-query'
+import { useRouter } from 'next/navigation'
 
 const PointsPage = () => {
+    const router = useRouter()
     const { user } = useAuth()
-    const points = user?.totalPoints ?? 0
-    const invites = user?.referredUsers ?? 0
+    const { data: invites, isLoading } = useQuery({
+        queryKey: ['invites', user?.user.userId],
+        queryFn: () => invitesApi.getInvites(),
+        enabled: !!user?.user.userId,
+    })
+
+    const username = user?.user.username
+    const inviteCode = username ? `${username.toUpperCase()}INVITESYOU` : ''
+    const inviteLink = `${process.env.NEXT_PUBLIC_BASE_URL}/invite?code=${inviteCode}`
+
+    if (isLoading) {
+        return <PeanutLoading coverFullScreen />
+    }
 
     return (
-        <div className="flex h-full w-full flex-col items-center justify-between">
-            <div className="flex flex-col gap-2">
-                <div>
-                    <div className="flex flex-row items-center">
-                        <Icon name="arrow-next" className="h-8 w-8" />
-                        {points} Points
-                    </div>
-                </div>
-                <div>
-                    <div className="flex flex-row items-center">
-                        <Icon name="arrow-next" className="h-8 w-8" />
-                        {invites} Invites
-                    </div>
+        <PageContainer className="flex flex-col">
+            <NavHeader title="Invites" onPrev={() => router.back()} />
+
+            <section className="mx-auto mb-auto mt-10 w-full space-y-4">
+                <h1 className="font-bold">Invite friends with your code</h1>
+                <div className="flex w-full items-center justify-between gap-3">
+                    <Card className="flex w-full items-center justify-between py-3.5">
+                        <p className="overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold md:text-base">{`${inviteCode}`}</p>
+                        <CopyToClipboard textToCopy={inviteCode} />
+                    </Card>
                 </div>
-            </div>
-            <img src={peanutClub.src} className="h-[240px] w-[240px] object-contain" alt="logo" />
-        </div>
+
+                {invites && invites.length > 0 && (
+                    <>
+                        <ShareButton
+                            generateText={() => Promise.resolve(generateInvitesShareText(inviteLink))}
+                            title="Share your invite link"
+                        >
+                            Share Invite link
+                        </ShareButton>
+                        <h2 className="!mt-8 font-bold">People you invited</h2>
+                        <div>
+                            {invites?.map((invite: Invite, i: number) => {
+                                const username = invite.invitee.username
+                                const isVerified = invite.invitee.bridgeKycStatus === 'approved'
+                                return (
+                                    <Card key={invite.id} position={getCardPosition(i, invites.length)}>
+                                        <div className="flex items-center justify-between gap-4">
+                                            <div className="flex items-center gap-3">
+                                                <TransactionAvatarBadge
+                                                    initials={username}
+                                                    userName={username}
+                                                    isLinkTransaction={false}
+                                                    transactionType={'send'}
+                                                    context="card"
+                                                    size="small"
+                                                />
+                                            </div>
+
+                                            <div className="min-w-0 flex-1 truncate font-roboto text-[16px] font-medium">
+                                                <VerifiedUserLabel name={username} isVerified={isVerified} />
+                                            </div>
+                                        </div>
+                                    </Card>
+                                )
+                            })}
+                        </div>
+                    </>
+                )}
+                {invites?.length === 0 && (
+                    <Card className="flex flex-col items-center justify-center gap-4 py-4">
+                        <div className="flex items-center justify-center rounded-full bg-primary-1 p-2">
+                            <Icon name="trophy" />
+                        </div>
+                        <h2 className="font-medium">No invites yet</h2>
+
+                        <p className="text-center text-sm text-grey-1">
+                            Send your invite link to start earning more rewards
+                        </p>
+                        <ShareButton
+                            generateText={() => Promise.resolve(generateInvitesShareText(inviteLink))}
+                            title="Share your invite link"
+                        >
+                            Share Invite link
+                        </ShareButton>
+                    </Card>
+                )}
+            </section>
+        </PageContainer>
     )
 }
 

src/app/(setup)/layout.tsx

@@ -3,12 +3,13 @@
 import { usePWAStatus } from '@/hooks/usePWAStatus'
 import { useAppDispatch } from '@/redux/hooks'
 import { setupActions } from '@/redux/slices/setup-slice'
-import { useEffect } from 'react'
+import { useEffect, Suspense } from 'react'
 import { setupSteps } from '../../components/Setup/Setup.consts'
 import '../../styles/globals.css'
+import PeanutLoading from '@/components/Global/PeanutLoading'
 import { Banner } from '@/components/Global/Banner'
 
-const SetupLayout = ({ children }: { children?: React.ReactNode }) => {
+function SetupLayoutContent({ children }: { children?: React.ReactNode }) {
     const dispatch = useAppDispatch()
     const isPWA = usePWAStatus()
 
@@ -28,4 +29,12 @@ const SetupLayout = ({ children }: { children?: React.ReactNode }) => {
     )
 }
 
+const SetupLayout = ({ children }: { children?: React.ReactNode }) => {
+    return (
+        <Suspense fallback={<PeanutLoading coverFullScreen />}>
+            <SetupLayoutContent>{children}</SetupLayoutContent>
+        </Suspense>
+    )
+}
+
 export default SetupLayout

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

@@ -6,15 +6,13 @@ import { BeforeInstallPromptEvent, ScreenId, ISetupStep } from '@/components/Set
 import { useSetupFlow } from '@/hooks/useSetupFlow'
 import { useAppDispatch, useSetupStore } from '@/redux/hooks'
 import { setupActions } from '@/redux/slices/setup-slice'
-import { useEffect, useState } from 'react'
-import ActionModal from '@/components/Global/ActionModal'
-import { IconName } from '@/components/Global/Icons/Icon'
+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'
 
-export default function SetupPage() {
-    const { steps } = useSetupStore()
+function SetupPageContent() {
+    const { steps, inviteCode } = useSetupStore()
     const { step, handleNext, handleBack } = useSetupFlow()
     const [direction, setDirection] = useState(0)
     const [currentStepIndex, setCurrentStepIndex] = useState(0)
@@ -113,7 +111,11 @@ export default function SetupPage() {
                 determinedSetupInitialStepId = 'pwa-install'
             }
 
-            if (determinedSetupInitialStepId) {
+            // If invite code is present, set the step to the signup screen
+            if (determinedSetupInitialStepId && inviteCode) {
+                const signupScreenIndex = steps.findIndex((s: ISetupStep) => s.screenId === 'signup')
+                dispatch(setupActions.setStep(signupScreenIndex + 1))
+            } else if (determinedSetupInitialStepId) {
                 const initialStepIndex = steps.findIndex((s: ISetupStep) => s.screenId === determinedSetupInitialStepId)
                 if (initialStepIndex !== -1) {
                     dispatch(setupActions.setStep(initialStepIndex + 1))
@@ -208,3 +210,11 @@ export default function SetupPage() {
         </SetupWrapper>
     )
 }
+
+export default function SetupPage() {
+    return (
+        <Suspense fallback={<PeanutLoading coverFullScreen />}>
+            <SetupPageContent />
+        </Suspense>
+    )
+}

src/app/[...recipient]/client.tsx

@@ -494,6 +494,9 @@ export default function PaymentPage({ recipient, flow = 'request_pay' }: Props)
                                 flow="request"
                                 requestLinkData={parsedPaymentData as ParsedURL}
                                 isLoggedIn={!!user?.user.userId}
+                                isInviteLink={
+                                    flow === 'request_pay' && parsedPaymentData?.recipient?.recipientType === 'USERNAME'
+                                } // invite link is only available for request pay flow
                             />
                         )}
                     </div>

src/app/actions/invites.ts

@@ -0,0 +1,43 @@
+'use server'
+
+import { PEANUT_API_URL } from '@/constants'
+import { fetchWithSentry } from '@/utils'
+
+const API_KEY = process.env.PEANUT_API_KEY!
+
+export async function validateInviteCode(
+    inviteCode: string
+): Promise<{ data?: { success: boolean; username: string }; error?: string }> {
+    const apiUrl = PEANUT_API_URL
+
+    if (!apiUrl || !API_KEY) {
+        console.error('API URL or API Key is not configured.')
+        return { error: 'Server configuration error.' }
+    }
+
+    try {
+        const response = await fetchWithSentry(`${apiUrl}/invites/validate`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'api-key': API_KEY,
+            },
+            body: JSON.stringify({ inviteCode }),
+        })
+
+        if (!response.ok) {
+            const data = await response.json()
+            return { error: data.error || 'Failed to validate invite code.' }
+        }
+
+        const data = await response.json()
+
+        return { data: { success: true, username: data.username } }
+    } catch (error) {
+        console.error('Error calling validate invite code API:', error)
+        if (error instanceof Error) {
+            return { error: error.message }
+        }
+        return { error: 'An unexpected error occurred.' }
+    }
+}

src/app/api/og/route.tsx

@@ -10,6 +10,7 @@ import { ReceiptCardOG } from '@/components/og/ReceiptCardOG'
 import { printableAddress, resolveAddressToUsername } from '@/utils'
 import { isAddress } from 'viem'
 import { ProfileCardOG } from '@/components/og/ProfileCardOG'
+import { InviteCardOG } from '@/components/og/InviteCardOG'
 
 export const runtime = 'nodejs' //node.js instead of edge!
 
@@ -68,6 +69,38 @@ export async function GET(req: NextRequest) {
     const token = searchParams.get('token') || null
     const isReceipt = searchParams.get('isReceipt') || 'false'
     const isPeanutUsername = searchParams.get('isPeanutUsername') || 'false'
+    const isInvite = searchParams.get('isInvite') || 'false'
+
+    // create an object with all arrow SVG paths
+    const arrowSrcs = {
+        topLeft: `${origin}/arrows/top-left-arrows.svg`,
+        topRight: `${origin}/arrows/top-right-arrow.svg`,
+        bottomLeft: `${origin}/arrows/bottom-left-arrow.svg`,
+        bottomRight: `${origin}/arrows/bottom-right-arrow.svg`,
+        topRight2: `${origin}/arrows/top-right-arrow-2.svg`,
+    }
+
+    if (isInvite === 'true') {
+        return new ImageResponse(
+            (
+                <InviteCardOG
+                    username={username}
+                    scribbleSrc={`${origin}/scribble.svg`}
+                    iconSrc={`${origin}/icons/peanut-icon.svg`}
+                    logoSrc={`${origin}/logos/peanut-logo.svg`}
+                    arrowSrcs={arrowSrcs}
+                />
+            ),
+            {
+                width: 1200,
+                height: 630,
+                fonts: [
+                    { name: 'Montserrat Medium', data: montserratMedium, style: 'normal' },
+                    { name: 'Montserrat SemiBold', data: montserratSemibold, style: 'normal' },
+                ],
+            }
+        )
+    }
 
     if (type === 'generic') {
         return new ImageResponse(<div style={{}}>Peanut Protocol</div>, {
@@ -111,14 +144,6 @@ export async function GET(req: NextRequest) {
         )
     }
     if (isReceipt === 'true') {
-        // create an object with all arrow SVG paths for receipts
-        const arrowSrcs = {
-            topLeft: `${origin}/arrows/top-left-arrows.svg`,
-            topRight: `${origin}/arrows/top-right-arrow.svg`,
-            bottomLeft: `${origin}/arrows/bottom-left-arrow.svg`,
-            bottomRight: `${origin}/arrows/bottom-right-arrow.svg`,
-        }
-
         const link: PaymentLink & { token?: string } = {
             type,
             username,
@@ -149,14 +174,6 @@ export async function GET(req: NextRequest) {
         )
     }
 
-    // create an object with all arrow SVG paths
-    const arrowSrcs = {
-        topLeft: `${origin}/arrows/top-left-arrows.svg`,
-        topRight: `${origin}/arrows/top-right-arrow.svg`,
-        bottomLeft: `${origin}/arrows/bottom-left-arrow.svg`,
-        bottomRight: `${origin}/arrows/bottom-right-arrow.svg`,
-    }
-
     const link: PaymentLink & { token?: string } = {
         type,
         username,