feat(admin): Phase 2.3 - Survey builder UI
- surveys/[id]/page.tsx: Full survey builder with 9 question types - Questions tab: Add/edit/remove questions with drag handles - 9 question types: single/multiple choice, rating, NPS, text, dropdown, scale, ranking - Dynamic options management for choice-based questions - Settings tab: Display trigger selection, incentive configuration - Targeting tab: Platform and segment targeting
This commit is contained in:
saravanakumardb1
parent
dbc9ffd328
commit
bd8c6fde43
487
dashboards/admin-web/src/app/(dashboard)/surveys/[id]/page.tsx
Normal file
487
dashboards/admin-web/src/app/(dashboard)/surveys/[id]/page.tsx
Normal file
@ -0,0 +1,487 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import {
|
||||
apiCreateSurvey,
|
||||
apiGetSurvey,
|
||||
apiUpdateSurvey,
|
||||
type ApiSurvey,
|
||||
} from '@/lib/api';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||
import { useToast } from '@/components/ui/toast';
|
||||
import { ArrowLeft, Plus, Trash2, GripVertical, Loader2 } from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
|
||||
const QUESTION_TYPES = [
|
||||
{ id: 'single_choice', label: 'Single Choice', icon: '○' },
|
||||
{ id: 'multiple_choice', label: 'Multiple Choice', icon: '☐' },
|
||||
{ id: 'rating', label: 'Rating (1-10)', icon: '★' },
|
||||
{ id: 'nps', label: 'NPS (0-10)', icon: '📊' },
|
||||
{ id: 'text_short', label: 'Short Text', icon: '📝' },
|
||||
{ id: 'text_long', label: 'Long Text', icon: '📄' },
|
||||
{ id: 'dropdown', label: 'Dropdown', icon: '▼' },
|
||||
{ id: 'scale', label: 'Scale', icon: '↔' },
|
||||
{ id: 'ranking', label: 'Ranking', icon: '⇅' },
|
||||
] as const;
|
||||
|
||||
const PLATFORMS = ['ios', 'android', 'web', 'macos', 'windows'] as const;
|
||||
const SEGMENTS = ['free', 'pro', 'enterprise', 'churned', 'active'] as const;
|
||||
const TRIGGERS = ['immediate', 'delay_seconds', 'event', 'page_view'] as const;
|
||||
|
||||
interface Question {
|
||||
id: string;
|
||||
type: typeof QUESTION_TYPES[number]['id'];
|
||||
text: string;
|
||||
description: string;
|
||||
required: boolean;
|
||||
options: { id: string; text: string }[];
|
||||
}
|
||||
|
||||
export default function SurveyEditorPage() {
|
||||
const params = useParams();
|
||||
const router = useRouter();
|
||||
const { toast } = useToast();
|
||||
const isEdit = params.id && params.id !== 'new';
|
||||
const surveyId = isEdit ? (params.id as string) : null;
|
||||
|
||||
const [loading, setLoading] = useState(isEdit);
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
const [form, setForm] = useState({
|
||||
title: '',
|
||||
description: '',
|
||||
questions: [] as Question[],
|
||||
target: {
|
||||
platforms: [] as string[],
|
||||
userSegments: [] as string[],
|
||||
},
|
||||
displayTrigger: { type: 'immediate' as typeof TRIGGERS[number] },
|
||||
incentive: null as { type: 'pro_days' | 'credits'; amount: number } | null,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (surveyId) {
|
||||
loadSurvey();
|
||||
}
|
||||
}, [surveyId]);
|
||||
|
||||
async function loadSurvey() {
|
||||
try {
|
||||
const { data, error } = await apiGetSurvey(surveyId!);
|
||||
if (error) throw new Error(error);
|
||||
if (data) {
|
||||
setForm({
|
||||
title: data.title,
|
||||
description: data.description || '',
|
||||
questions: data.questions as Question[],
|
||||
target: {
|
||||
platforms: data.target.platforms || [],
|
||||
userSegments: data.target.userSegments || [],
|
||||
},
|
||||
displayTrigger: data.displayTrigger,
|
||||
incentive: data.incentive || null,
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
toast({
|
||||
title: 'Error',
|
||||
description: err instanceof Error ? err.message : 'Failed to load survey',
|
||||
variant: 'error',
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
function addQuestion(type: Question['type']) {
|
||||
const newQuestion: Question = {
|
||||
id: `q_${Date.now()}`,
|
||||
type,
|
||||
text: '',
|
||||
description: '',
|
||||
required: true,
|
||||
options: ['single_choice', 'multiple_choice', 'dropdown', 'ranking'].includes(type)
|
||||
? [
|
||||
{ id: `opt_${Date.now()}_1`, text: 'Option 1' },
|
||||
{ id: `opt_${Date.now()}_2`, text: 'Option 2' },
|
||||
]
|
||||
: [],
|
||||
};
|
||||
setForm({ ...form, questions: [...form.questions, newQuestion] });
|
||||
}
|
||||
|
||||
function updateQuestion(index: number, updates: Partial<Question>) {
|
||||
const updated = [...form.questions];
|
||||
updated[index] = { ...updated[index], ...updates };
|
||||
setForm({ ...form, questions: updated });
|
||||
}
|
||||
|
||||
function removeQuestion(index: number) {
|
||||
const updated = [...form.questions];
|
||||
updated.splice(index, 1);
|
||||
setForm({ ...form, questions: updated });
|
||||
}
|
||||
|
||||
function addOption(questionIndex: number) {
|
||||
const question = form.questions[questionIndex];
|
||||
const newOption = {
|
||||
id: `opt_${Date.now()}_${question.options.length + 1}`,
|
||||
text: `Option ${question.options.length + 1}`,
|
||||
};
|
||||
updateQuestion(questionIndex, {
|
||||
options: [...question.options, newOption],
|
||||
});
|
||||
}
|
||||
|
||||
function updateOption(questionIndex: number, optionIndex: number, text: string) {
|
||||
const question = form.questions[questionIndex];
|
||||
const updatedOptions = [...question.options];
|
||||
updatedOptions[optionIndex] = { ...updatedOptions[optionIndex], text };
|
||||
updateQuestion(questionIndex, { options: updatedOptions });
|
||||
}
|
||||
|
||||
function removeOption(questionIndex: number, optionIndex: number) {
|
||||
const question = form.questions[questionIndex];
|
||||
const updatedOptions = [...question.options];
|
||||
updatedOptions.splice(optionIndex, 1);
|
||||
updateQuestion(questionIndex, { options: updatedOptions });
|
||||
}
|
||||
|
||||
async function handleSave(asDraft = false) {
|
||||
setSaving(true);
|
||||
try {
|
||||
const payload = {
|
||||
...form,
|
||||
status: asDraft ? 'draft' : 'active',
|
||||
};
|
||||
|
||||
if (isEdit) {
|
||||
const { error } = await apiUpdateSurvey(surveyId!, payload as unknown as Partial<ApiSurvey>);
|
||||
if (error) throw new Error(error);
|
||||
toast({ title: 'Success', description: 'Survey updated', variant: 'success' });
|
||||
} else {
|
||||
const { error } = await apiCreateSurvey(payload as unknown as Omit<ApiSurvey, 'id' | 'metrics' | 'createdAt' | 'updatedAt' | 'createdBy'>);
|
||||
if (error) throw new Error(error);
|
||||
toast({ title: 'Success', description: 'Survey created', variant: 'success' });
|
||||
}
|
||||
router.push('/surveys');
|
||||
} catch (err) {
|
||||
toast({
|
||||
title: 'Error',
|
||||
description: err instanceof Error ? err.message : 'Failed to save',
|
||||
variant: 'error',
|
||||
});
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="container mx-auto py-8">
|
||||
<div className="animate-pulse space-y-4">
|
||||
<div className="h-8 w-48 bg-muted rounded" />
|
||||
<div className="h-64 bg-muted rounded" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container mx-auto py-8 space-y-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<Link href="/surveys">
|
||||
<Button variant="ghost" size="icon">
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">{isEdit ? 'Edit Survey' : 'New Survey'}</h1>
|
||||
<p className="text-muted-foreground">
|
||||
{isEdit ? 'Update your survey questions' : 'Create an in-app survey with conditional logic'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Tabs defaultValue="questions" className="space-y-6">
|
||||
<TabsList>
|
||||
<TabsTrigger value="questions">Questions</TabsTrigger>
|
||||
<TabsTrigger value="settings">Settings</TabsTrigger>
|
||||
<TabsTrigger value="targeting">Targeting</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="questions" className="space-y-4">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Survey Details</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="title">Title *</Label>
|
||||
<Input
|
||||
id="title"
|
||||
value={form.title}
|
||||
onChange={(e) => setForm({ ...form, title: e.target.value })}
|
||||
placeholder="Enter survey title"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="description">Description</Label>
|
||||
<Textarea
|
||||
id="description"
|
||||
value={form.description}
|
||||
onChange={(e) => setForm({ ...form, description: e.target.value })}
|
||||
placeholder="Enter survey description"
|
||||
rows={2}
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-lg font-medium">Questions ({form.questions.length})</h3>
|
||||
<div className="flex gap-2">
|
||||
{QUESTION_TYPES.map((type) => (
|
||||
<Button
|
||||
key={type.id}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => addQuestion(type.id)}
|
||||
>
|
||||
<Plus className="mr-1 h-3 w-3" />
|
||||
{type.label}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{form.questions.map((question, index) => (
|
||||
<Card key={question.id}>
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<GripVertical className="h-4 w-4 text-muted-foreground cursor-move" />
|
||||
<Badge variant="outline">{QUESTION_TYPES.find((t) => t.id === question.type)?.label}</Badge>
|
||||
<span className="text-sm text-muted-foreground">Q{index + 1}</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="ml-auto h-8 w-8 text-destructive"
|
||||
onClick={() => removeQuestion(index)}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Question Text *</Label>
|
||||
<Input
|
||||
value={question.text}
|
||||
onChange={(e) => updateQuestion(index, { text: e.target.value })}
|
||||
placeholder="Enter your question"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Description (optional)</Label>
|
||||
<Input
|
||||
value={question.description}
|
||||
onChange={(e) => updateQuestion(index, { description: e.target.value })}
|
||||
placeholder="Additional context for this question"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{question.options.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
<Label>Options</Label>
|
||||
<div className="space-y-2">
|
||||
{question.options.map((option, optIndex) => (
|
||||
<div key={option.id} className="flex items-center gap-2">
|
||||
<Input
|
||||
value={option.text}
|
||||
onChange={(e) => updateOption(index, optIndex, e.target.value)}
|
||||
placeholder={`Option ${optIndex + 1}`}
|
||||
/>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 text-destructive"
|
||||
onClick={() => removeOption(index, optIndex)}
|
||||
disabled={question.options.length <= 2}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
<Button variant="outline" size="sm" onClick={() => addOption(index)}>
|
||||
<Plus className="mr-1 h-3 w-3" />
|
||||
Add Option
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
|
||||
{form.questions.length === 0 && (
|
||||
<Card className="border-dashed">
|
||||
<CardContent className="py-8 text-center text-muted-foreground">
|
||||
<p>No questions yet. Click a question type above to add one.</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="settings" className="space-y-4">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Display Settings</CardTitle>
|
||||
<CardDescription>When and how to show this survey</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Display Trigger</Label>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{TRIGGERS.map((trigger) => (
|
||||
<Badge
|
||||
key={trigger}
|
||||
variant={form.displayTrigger.type === trigger ? 'default' : 'outline'}
|
||||
className="cursor-pointer"
|
||||
onClick={() =>
|
||||
setForm({
|
||||
...form,
|
||||
displayTrigger: { type: trigger } as ApiSurvey['displayTrigger'],
|
||||
})
|
||||
}
|
||||
>
|
||||
{trigger.replace('_', ' ')}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>Incentive (optional)</Label>
|
||||
<div className="flex gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Input
|
||||
type="number"
|
||||
min={0}
|
||||
value={form.incentive?.amount || ''}
|
||||
onChange={(e) =>
|
||||
setForm({
|
||||
...form,
|
||||
incentive: {
|
||||
type: 'pro_days',
|
||||
amount: parseInt(e.target.value) || 0,
|
||||
},
|
||||
})
|
||||
}
|
||||
placeholder="Amount"
|
||||
className="w-24"
|
||||
/>
|
||||
<span className="text-sm text-muted-foreground">Pro Days</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="targeting" className="space-y-4">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Audience Targeting</CardTitle>
|
||||
<CardDescription>Who should see this survey</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Platforms</Label>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{PLATFORMS.map((platform) => (
|
||||
<Badge
|
||||
key={platform}
|
||||
variant={form.target.platforms.includes(platform) ? 'default' : 'outline'}
|
||||
className="cursor-pointer"
|
||||
onClick={() =>
|
||||
setForm({
|
||||
...form,
|
||||
target: {
|
||||
...form.target,
|
||||
platforms: form.target.platforms.includes(platform)
|
||||
? form.target.platforms.filter((p) => p !== platform)
|
||||
: [...form.target.platforms, platform],
|
||||
},
|
||||
})
|
||||
}
|
||||
>
|
||||
{platform}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>User Segments</Label>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{SEGMENTS.map((segment) => (
|
||||
<Badge
|
||||
key={segment}
|
||||
variant={form.target.userSegments.includes(segment) ? 'default' : 'outline'}
|
||||
className="cursor-pointer"
|
||||
onClick={() =>
|
||||
setForm({
|
||||
...form,
|
||||
target: {
|
||||
...form.target,
|
||||
userSegments: form.target.userSegments.includes(segment)
|
||||
? form.target.userSegments.filter((s) => s !== segment)
|
||||
: [...form.target.userSegments, segment],
|
||||
},
|
||||
})
|
||||
}
|
||||
>
|
||||
{segment}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
<div className="flex items-center justify-end gap-4">
|
||||
<Link href="/surveys">
|
||||
<Button variant="outline" disabled={saving}>
|
||||
Cancel
|
||||
</Button>
|
||||
</Link>
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={() => handleSave(true)}
|
||||
disabled={saving || !form.title || form.questions.length === 0}
|
||||
>
|
||||
{saving ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
|
||||
Save as Draft
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => handleSave(false)}
|
||||
disabled={saving || !form.title || form.questions.length === 0}
|
||||
>
|
||||
{saving ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
|
||||
{isEdit ? 'Update Survey' : 'Create Survey'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user