feat(ui): differentiate legacy vs one-time referrals in UI

- Add is_legacy field to referrals API response
- Update CreditsBadge to show "per month" for legacy, "(one-time)" for new
- Add "(legacy)" label next to legacy referrals in the list
- Change main description to "one-time bonus" instead of "per month"
- Add defensive default for is_legacy in Zod schema

Author: brandonkachen

web/src/app/api/referrals/route.ts

@@ -13,12 +13,13 @@ import { extractApiKeyFromHeader } from '@/util/auth'
 import type { NextRequest } from 'next/server'
 
 type Referral = Pick<typeof schema.user.$inferSelect, 'id' | 'name' | 'email'> &
-  Pick<typeof schema.referral.$inferSelect, 'credits'>
+  Pick<typeof schema.referral.$inferSelect, 'credits' | 'is_legacy'>
 const ReferralSchema = z.object({
   id: z.string(),
   name: z.string(),
   email: z.string().email(),
   credits: z.coerce.number(),
+  is_legacy: z.boolean().default(false),
 })
 
 export type ReferralData = {
@@ -52,6 +53,7 @@ export async function GET() {
       .select({
         id: schema.referral.referred_id,
         credits: schema.referral.credits,
+        is_legacy: schema.referral.is_legacy,
       })
       .from(schema.referral)
       .where(eq(schema.referral.referrer_id, session.user.id))
@@ -62,6 +64,7 @@ export async function GET() {
         name: schema.user.name,
         email: schema.user.email,
         credits: referralsQuery.credits,
+        is_legacy: referralsQuery.is_legacy,
       })
       .from(referralsQuery)
       .leftJoin(schema.user, eq(schema.user.id, referralsQuery.id))
@@ -71,6 +74,7 @@ export async function GET() {
       .select({
         id: schema.referral.referrer_id,
         credits: schema.referral.credits,
+        is_legacy: schema.referral.is_legacy,
       })
       .from(schema.referral)
       .where(eq(schema.referral.referred_id, session.user.id))
@@ -82,6 +86,7 @@ export async function GET() {
         name: schema.user.name,
         email: schema.user.email,
         credits: referredByIdQuery.credits,
+        is_legacy: referredByIdQuery.is_legacy,
       })
       .from(referredByIdQuery)
       .leftJoin(schema.user, eq(schema.user.id, referredByIdQuery.id))

web/src/app/profile/components/referrals-section.tsx

@@ -33,12 +33,18 @@ const copyReferral = (link: string) => {
   })
 }
 
-const CreditsBadge = (credits: number) => {
+const CreditsBadge = ({
+  credits,
+  isLegacy,
+}: {
+  credits: number
+  isLegacy: boolean
+}) => {
   return (
     <span
       className={`flex-none p-2 rounded-full text-xs bg-gradient-to-r from-green-300 to-emerald-300 dark:from-green-600 dark:to-emerald-600 text-green-800 dark:text-white font-semibold item-center text-center shadow-sm`}
     >
-      +{credits} credits
+      +{credits} credits{isLegacy && ' per month'}
     </span>
   )
 }
@@ -111,7 +117,10 @@ export function ReferralsSection() {
               <div className="text-sm flex items-center">
                 <p>{data.referredBy.name} referred you. </p>
               </div>
-              {CreditsBadge(data.referredBy.credits)}
+              <CreditsBadge
+                credits={data.referredBy.credits}
+                isLegacy={data.referredBy.is_legacy}
+              />
             </div>
           </CardContent>
         </Card>
@@ -124,7 +133,7 @@ export function ReferralsSection() {
           </CardTitle>
           <CardDescription className="text-green-700 dark:text-green-300">
             Refer a friend and <b>you'll both</b> earn {CREDITS_REFERRAL_BONUS}{' '}
-            credits per month!{' '}
+            credits as a one-time bonus!{' '}
           </CardDescription>
         </CardHeader>
         <CardContent>
@@ -203,9 +212,9 @@ export function ReferralsSection() {
                           className="flex justify-between items-center"
                         >
                           <span>
-                            {r.name} ({r.email})
+                            {r.name} ({r.email}){r.is_legacy && ' (legacy)'}
                           </span>
-                          {CreditsBadge(r.credits)}
+                          <CreditsBadge credits={r.credits} isLegacy={r.is_legacy} />
                         </li>
                       ))}
                     </ul>