ok

Author: aryasatya13

backend/internal/api/subscribers.go

@@ -281,8 +281,39 @@ func ListSubscribers(w http.ResponseWriter, r *http.Request) {
 	var subscribers []models.Subscriber
 	q.Offset(offset).Limit(limit).Find(&subscribers)
 
+	// Enrich with coupon info
+	subIDs := make([]string, len(subscribers))
+	for i, s := range subscribers {
+		subIDs[i] = s.ID
+	}
+	var coupons []models.CouponCode
+	if len(subIDs) > 0 {
+		database.DB.Where("subscriber_id IN ?", subIDs).Find(&coupons)
+	}
+	couponMap := map[string]models.CouponCode{}
+	for _, c := range coupons {
+		couponMap[c.SubscriberID] = c
+	}
+
+	type enrichedSub struct {
+		models.Subscriber
+		CouponCode   string `json:"coupon_code,omitempty"`
+		CouponStatus string `json:"coupon_status,omitempty"`
+		PromoUsed    string `json:"promo_used,omitempty"`
+	}
+
+	enriched := make([]enrichedSub, len(subscribers))
+	for i, s := range subscribers {
+		enriched[i] = enrichedSub{Subscriber: s}
+		if c, ok := couponMap[s.ID]; ok {
+			enriched[i].CouponCode = c.Code
+			enriched[i].CouponStatus = string(c.Status)
+			enriched[i].PromoUsed = c.SourceCode
+		}
+	}
+
 	jsonResponse(w, map[string]interface{}{
-		"subscribers": subscribers,
+		"subscribers": enriched,
 		"total":       total,
 		"page":        page,
 		"limit":       limit,

docs/public-api.md

@@ -15,6 +15,7 @@ Content-Type: application/json
 | `name` | string | ✅ | Subscriber name |
 | `source` | string | — | `"form"` (default), `"api"`, or `"widget"` |
 | `promo` | string | — | Promo campaign code (e.g., `get5`) |
+| `custom_data` | object | — | Custom field responses. Keys match field `key` from project settings (e.g., `{"city":"NYC","plan":"Pro"}`) |
 
 **Response `201`:**
 ```json

frontend/src/routes/dashboard.projects.$id.subscribers.tsx

@@ -124,17 +124,20 @@ function SubscribersPage() {
                 <th>Name</th>
                 <th>Email</th>
                 <th>Status</th>
+                <th>Promo</th>
+                <th>Coupon</th>
                 <th>Source</th>
+                <th>IP</th>
                 <th>Country</th>
                 <th>Signed Up</th>
                 <th style={{ width: 60 }}></th>
               </tr>
             </thead>
             <tbody>
               {isLoading ? (
-                <tr><td colSpan={8} style={{ textAlign: 'center', padding: 40, color: '#64748b' }}>Loading...</td></tr>
+                <tr><td colSpan={11} style={{ textAlign: 'center', padding: 40, color: '#64748b' }}>Loading...</td></tr>
               ) : subscribers.length === 0 ? (
-                <tr><td colSpan={8} style={{ textAlign: 'center', padding: 40, color: '#64748b' }}>No subscribers found</td></tr>
+                <tr><td colSpan={11} style={{ textAlign: 'center', padding: 40, color: '#64748b' }}>No subscribers found</td></tr>
               ) : subscribers.map((s: any) => (
                 <React.Fragment key={s.id}>
                 <tr>
@@ -154,9 +157,31 @@ function SubscribersPage() {
                       {s.status}
                     </span>
                   </td>
+                  <td style={{ fontSize: 13 }}>
+                    {s.promo_used ? (
+                      <span style={{
+                        padding: '2px 8px', borderRadius: 6, fontSize: 11, fontWeight: 600,
+                        background: 'rgba(250,204,21,0.1)', color: '#facc15', border: '1px solid rgba(250,204,21,0.2)',
+                      }}>{s.promo_used}</span>
+                    ) : <span style={{ color: '#334155' }}>—</span>}
+                  </td>
+                  <td style={{ fontSize: 13 }}>
+                    {s.coupon_code ? (
+                      <div>
+                        <code style={{ fontSize: 11, color: '#94a3b8' }}>{s.coupon_code}</code>
+                        <span className={`badge ${s.coupon_status === 'used' ? 'badge-green' : s.coupon_status === 'revoked' ? 'badge-red' : 'badge-gray'}`}
+                          style={{ marginLeft: 4, fontSize: 10 }}>
+                          {s.coupon_status}
+                        </span>
+                      </div>
+                    ) : <span style={{ color: '#334155' }}>—</span>}
+                  </td>
                   <td>
                     <span className="badge badge-purple">{s.source}</span>
                   </td>
+                  <td style={{ fontSize: 12, color: '#475569', fontFamily: 'monospace' }}>
+                    {s.ip_address || '—'}
+                  </td>
                   <td style={{ fontSize: 13 }}>
                     {s.country ? (
                       <span style={{ color: '#94a3b8' }}>{s.country}</span>
@@ -179,7 +204,7 @@ function SubscribersPage() {
                     if (entries.length === 0) return null
                     return (
                       <tr>
-                        <td colSpan={8} style={{ padding: '8px 16px 12px 48px', background: 'rgba(99,102,241,0.03)' }}>
+                        <td colSpan={11} style={{ padding: '8px 16px 12px 48px', background: 'rgba(99,102,241,0.03)' }}>
                           <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px 20px' }}>
                             {entries.map(([k, v]) => (
                               <div key={k} style={{ fontSize: 12 }}>

frontend/src/routes/docs.tsx

@@ -183,7 +183,7 @@ Content-Type: application/json`}</CodeBlock>
               ['<code>name</code>', 'string', '✅', 'Subscriber name'],
               ['<code>source</code>', 'string', '—', '<code>form</code>, <code>api</code>, or <code>widget</code>'],
               ['<code>promo</code>', 'string', '—', 'Promo campaign trigger code (e.g. <code>get5</code>)'],
-              ['<code>custom_data</code>', 'object', '—', 'Custom field responses as key-value pairs'],
+              ['<code>custom_data</code>', 'object', '—', 'Responses to custom fields. Keys match the field <code>key</code> defined in project settings (e.g. <code>{"city":"NYC","plan":"Pro"}</code>)'],
             ]}
           />
           <CodeBlock>{`// Response 201

frontend/src/routes/w.$slug.tsx

@@ -2,7 +2,7 @@ import { createFileRoute } from '@tanstack/react-router'
 import { useQuery, useMutation } from '@tanstack/react-query'
 import { publicApi } from '@/lib/api'
 import { useState } from 'react'
-import { Hourglass, CheckCircle, Mail, User, Zap, Gift, Copy, Check } from 'lucide-react'
+import { Hourglass, CheckCircle, Mail, User, Zap, Gift, Copy, Check, Tag } from 'lucide-react'
 import toast from 'react-hot-toast'
 import { getDaysLeft } from '@/lib/utils'
 
@@ -16,6 +16,11 @@ function WaitlistPage() {
   const [form, setForm] = useState<Record<string, any>>({ name: '', email: '' })
   const [coupon, setCoupon] = useState<any>(null)
   const [codeCopied, setCodeCopied] = useState(false)
+  const [showPromo, setShowPromo] = useState(false)
+
+  // Read promo code from URL: /w/my-project?promo=get5
+  const urlPromo = new URLSearchParams(window.location.search).get('promo') || ''
+  const [promo, setPromo] = useState(urlPromo)
 
   const { data, isLoading, error } = useQuery({
     queryKey: ['public-project', slug],
@@ -38,6 +43,7 @@ function WaitlistPage() {
       })
       return publicApi.subscribe(slug, {
         name: form.name, email: form.email,
+        ...(promo ? { promo } : {}),
         ...(Object.keys(customData).length > 0 ? { custom_data: customData } : {}),
       })
     },
@@ -247,6 +253,35 @@ function WaitlistPage() {
                     </div>
 
                     {/* Custom fields */}
+
+                    {/* Promo code */}
+                    {urlPromo ? (
+                      <div style={{
+                        display: 'flex', alignItems: 'center', gap: 8, padding: '8px 12px',
+                        background: `rgba(${hexToRgb(themeColor)},0.06)`, borderRadius: 8,
+                        border: `1px solid rgba(${hexToRgb(themeColor)},0.15)`,
+                      }}>
+                        <Tag size={13} color={themeColor} />
+                        <span style={{ fontSize: 13, color: '#94a3b8' }}>Promo: <strong style={{ color: themeColor }}>{urlPromo}</strong></span>
+                      </div>
+                    ) : (
+                      <div>
+                        {!showPromo ? (
+                          <button type="button" onClick={() => setShowPromo(true)}
+                            style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: 13, color: '#475569', padding: 0 }}>
+                            Have a promo code?
+                          </button>
+                        ) : (
+                          <div style={{ position: 'relative' }}>
+                            <Tag size={14} style={{ position: 'absolute', left: 12, top: '50%', transform: 'translateY(-50%)', color: '#475569' }} />
+                            <input className="input" placeholder="Enter promo code"
+                              value={promo} onChange={e => setPromo(e.target.value.toLowerCase())}
+                              style={{ paddingLeft: 34 }} />
+                          </div>
+                        )}
+                      </div>
+                    )}
+
                     {customFields.map((cf: any) => (
                       <div key={cf.key}>
                         {cf.type === 'text' && (