npm package: @initd.ai/lead-capture
Description: A configurable lead capture form plugin for initd.ai generated apps.
Latest version: 1.1.0

# @initdai/lead-capture

A configurable lead capture form plugin for initd.ai generated apps.

## Installation

```
npm install @initdai/lead-capture
```

## Exports

### Components

- **LeadCaptureForm**: A form widget for capturing lead data.
  - Props: `projectId: string`, `fields: FieldDefinition[]`, `theme?: 'light' | 'dark'`, `submitLabel?: string`, `onSuccess?: () => void`, `onError?: (error: Error) => void`

- **LeadsTable**: A table widget for displaying all captured leads.
  - Props: `projectId: string`, `fields: FieldDefinition[]`, `theme?: 'light' | 'dark'`
  - Fetches leads on mount and provides a refresh button.
  - Columns are driven by the same `fields` array used in `LeadCaptureForm`.

### Hooks

- **useLeadCapture**: Core submission logic for custom form implementations.
  - Options: `{ projectId: string }`
  - Returns: `{ submit, loading, error, success }`

- **useLeads**: Fetches the list of captured leads for a project.
  - Options: `{ projectId: string }`
  - Returns: `{ leads: Lead[], loading, error, refetch }`

### Types

- **FieldDefinition**: `{ name: string, label: string, type: 'text' | 'email' | 'tel' | 'number' | 'checkbox', required?: boolean, placeholder?: string }`
- **Lead**: `{ id: string, createdAt: string, fields: Record<string, string | number | boolean> }`

## Usage

### Capture form

```tsx
import { LeadCaptureForm } from '@initdai/lead-capture';

<LeadCaptureForm
  projectId="my-project-id"
  fields={[
    { name: 'email', label: 'Email', type: 'email', required: true },
    { name: 'name', label: 'Name', type: 'text', required: true },
  ]}
  onSuccess={() => alert('Thanks!')}
/>
```

### Leads table

```tsx
import { LeadsTable } from '@initdai/lead-capture';

<LeadsTable
  projectId="my-project-id"
  fields={[
    { name: 'email', label: 'Email', type: 'email' },
    { name: 'name', label: 'Name', type: 'text' },
  ]}
/>
```

### Custom UI with hooks

```tsx
import { useLeadCapture, useLeads } from '@initdai/lead-capture';

// Submit a lead
function MyForm({ projectId }: { projectId: string }) {
  const { submit, loading, error, success } = useLeadCapture({ projectId });

  const handleSubmit = async () => {
    await submit({ email: 'user@example.com', name: 'Jane' });
  };

  if (success) return <p>Thank you!</p>;

  return (
    <button onClick={handleSubmit} disabled={loading}>
      {loading ? 'Submitting…' : 'Submit'}
    </button>
  );
}

// List leads
function MyLeadsList({ projectId }: { projectId: string }) {
  const { leads, loading, error, refetch } = useLeads({ projectId });

  if (loading) return <p>Loading…</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <ul>
      {leads.map((lead) => (
        <li key={lead.id}>{JSON.stringify(lead.fields)}</li>
      ))}
    </ul>
  );
}
```

## API

### Submit a lead

```
POST /projects/{projectId}/plugin
Cookie: guestToken (sent automatically via credentials: 'include')
Body: {
  pluginId: "lead-capture",
  action: "submit",
  payload: { fields: Record<string, string | number | boolean> }
}
```

### List leads

```
GET /projects/{projectId}/plugin?pluginId=lead-capture&action=list
Cookie: guestToken (sent automatically via credentials: 'include')
Response: Lead[]
```