feat(admin): Phase 2.2 - Broadcast create/edit wizard
This commit is contained in:
saravanakumardb1
parent
ee3b23711f
commit
dbc9ffd328
@ -0,0 +1,523 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import {
|
||||
apiCreateBroadcast,
|
||||
apiGetBroadcast,
|
||||
apiUpdateBroadcast,
|
||||
apiEstimateBroadcastReach,
|
||||
type ApiBroadcast,
|
||||
} 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 { Checkbox } from '@/components/ui/checkbox';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||
import { useToast } from '@/components/ui/toast';
|
||||
import { ArrowLeft, Users, Loader2 } from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
|
||||
const CHANNELS = [
|
||||
{ id: 'push', label: 'Push Notification', description: 'Send to mobile devices' },
|
||||
{ id: 'in_app', label: 'In-App Message', description: 'Show in app UI' },
|
||||
{ id: 'email', label: 'Email', description: 'Send email to users' },
|
||||
] as const;
|
||||
|
||||
const PLATFORMS = ['ios', 'android', 'web', 'macos', 'windows'] as const;
|
||||
const SEGMENTS = ['free', 'pro', 'enterprise', 'churned', 'active'] as const;
|
||||
|
||||
export default function BroadcastEditorPage() {
|
||||
const params = useParams();
|
||||
const router = useRouter();
|
||||
const { toast } = useToast();
|
||||
const isEdit = params.id && params.id !== 'new';
|
||||
const broadcastId = isEdit ? (params.id as string) : null;
|
||||
|
||||
const [loading, setLoading] = useState(isEdit);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [estimating, setEstimating] = useState(false);
|
||||
const [reachEstimate, setReachEstimate] = useState<{
|
||||
estimatedCount: number;
|
||||
sampleUserIds: string[];
|
||||
} | null>(null);
|
||||
|
||||
const [form, setForm] = useState({
|
||||
title: '',
|
||||
body: '',
|
||||
bodyMarkdown: '',
|
||||
ctaText: '',
|
||||
ctaUrl: '',
|
||||
imageUrl: '',
|
||||
channels: [] as string[],
|
||||
target: {
|
||||
platforms: [] as string[],
|
||||
userSegments: [] as string[],
|
||||
countryCodes: '',
|
||||
appVersionMin: '',
|
||||
appVersionMax: '',
|
||||
percentageRollout: 100,
|
||||
specificUserIds: '',
|
||||
},
|
||||
scheduledAt: '',
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (broadcastId) {
|
||||
loadBroadcast();
|
||||
}
|
||||
}, [broadcastId]);
|
||||
|
||||
async function loadBroadcast() {
|
||||
try {
|
||||
const { data, error } = await apiGetBroadcast(broadcastId!);
|
||||
if (error) throw new Error(error);
|
||||
if (data) {
|
||||
setForm({
|
||||
title: data.title,
|
||||
body: data.body,
|
||||
bodyMarkdown: data.bodyMarkdown || '',
|
||||
ctaText: data.ctaText || '',
|
||||
ctaUrl: data.ctaUrl || '',
|
||||
imageUrl: data.imageUrl || '',
|
||||
channels: data.channels,
|
||||
target: {
|
||||
platforms: data.target.platforms || [],
|
||||
userSegments: data.target.userSegments || [],
|
||||
countryCodes: data.target.countryCodes?.join(', ') || '',
|
||||
appVersionMin: data.target.appVersionMin || '',
|
||||
appVersionMax: data.target.appVersionMax || '',
|
||||
percentageRollout: data.target.percentageRollout ?? 100,
|
||||
specificUserIds: data.target.specificUserIds?.join(', ') || '',
|
||||
},
|
||||
scheduledAt: data.scheduledAt || '',
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
toast({
|
||||
title: 'Error',
|
||||
description: err instanceof Error ? err.message : 'Failed to load broadcast',
|
||||
variant: 'error',
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleEstimateReach() {
|
||||
setEstimating(true);
|
||||
try {
|
||||
const { data, error } = await apiEstimateBroadcastReach({
|
||||
platforms: form.target.platforms,
|
||||
userSegments: form.target.userSegments as ApiBroadcast['target']['userSegments'],
|
||||
countryCodes: form.target.countryCodes
|
||||
.split(',')
|
||||
.map((c) => c.trim())
|
||||
.filter(Boolean),
|
||||
percentageRollout: form.target.percentageRollout,
|
||||
specificUserIds: form.target.specificUserIds
|
||||
.split(',')
|
||||
.map((id) => id.trim())
|
||||
.filter(Boolean),
|
||||
});
|
||||
if (error) throw new Error(error);
|
||||
if (data) setReachEstimate(data);
|
||||
} catch (err) {
|
||||
toast({
|
||||
title: 'Error',
|
||||
description: err instanceof Error ? err.message : 'Failed to estimate reach',
|
||||
variant: 'error',
|
||||
});
|
||||
} finally {
|
||||
setEstimating(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSave(asDraft = false) {
|
||||
setSaving(true);
|
||||
try {
|
||||
const payload = {
|
||||
...form,
|
||||
channels: form.channels as ('push' | 'email' | 'in_app')[],
|
||||
target: {
|
||||
...form.target,
|
||||
countryCodes: form.target.countryCodes
|
||||
.split(',')
|
||||
.map((c) => c.trim())
|
||||
.filter(Boolean),
|
||||
specificUserIds: form.target.specificUserIds
|
||||
.split(',')
|
||||
.map((id) => id.trim())
|
||||
.filter(Boolean),
|
||||
},
|
||||
status: asDraft ? 'draft' : undefined,
|
||||
};
|
||||
|
||||
if (isEdit) {
|
||||
const { error } = await apiUpdateBroadcast(broadcastId!, payload as unknown as Partial<ApiBroadcast>);
|
||||
if (error) throw new Error(error);
|
||||
toast({ title: 'Success', description: 'Broadcast updated', variant: 'success' });
|
||||
} else {
|
||||
const { error } = await apiCreateBroadcast(payload as unknown as Omit<ApiBroadcast, 'id' | 'metrics' | 'createdAt' | 'updatedAt' | 'createdBy'>);
|
||||
if (error) throw new Error(error);
|
||||
toast({ title: 'Success', description: 'Broadcast created', variant: 'success' });
|
||||
}
|
||||
router.push('/broadcasts');
|
||||
} 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="/broadcasts">
|
||||
<Button variant="ghost" size="icon">
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">
|
||||
{isEdit ? 'Edit Broadcast' : 'New Broadcast'}
|
||||
</h1>
|
||||
<p className="text-muted-foreground">
|
||||
{isEdit ? 'Update your broadcast details' : 'Create a targeted message campaign'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Tabs defaultValue="content" className="space-y-6">
|
||||
<TabsList>
|
||||
<TabsTrigger value="content">Content</TabsTrigger>
|
||||
<TabsTrigger value="targeting">Targeting</TabsTrigger>
|
||||
<TabsTrigger value="channels">Channels</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="content" className="space-y-4">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Message Content</CardTitle>
|
||||
<CardDescription>
|
||||
Craft your broadcast message
|
||||
</CardDescription>
|
||||
</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 broadcast title"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="body">Body *</Label>
|
||||
<Textarea
|
||||
id="body"
|
||||
value={form.body}
|
||||
onChange={(e) => setForm({ ...form, body: e.target.value })}
|
||||
placeholder="Enter broadcast message"
|
||||
rows={4}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="bodyMarkdown">Markdown Body (optional)</Label>
|
||||
<Textarea
|
||||
id="bodyMarkdown"
|
||||
value={form.bodyMarkdown}
|
||||
onChange={(e) => setForm({ ...form, bodyMarkdown: e.target.value })}
|
||||
placeholder="Rich text version (supports Markdown)"
|
||||
rows={4}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="ctaText">CTA Button Text</Label>
|
||||
<Input
|
||||
id="ctaText"
|
||||
value={form.ctaText}
|
||||
onChange={(e) => setForm({ ...form, ctaText: e.target.value })}
|
||||
placeholder="Learn More"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="ctaUrl">CTA URL</Label>
|
||||
<Input
|
||||
id="ctaUrl"
|
||||
value={form.ctaUrl}
|
||||
onChange={(e) => setForm({ ...form, ctaUrl: e.target.value })}
|
||||
placeholder="https://..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="imageUrl">Image URL</Label>
|
||||
<Input
|
||||
id="imageUrl"
|
||||
value={form.imageUrl}
|
||||
onChange={(e) => setForm({ ...form, imageUrl: e.target.value })}
|
||||
placeholder="https://..."
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="targeting" className="space-y-4">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Audience Targeting</CardTitle>
|
||||
<CardDescription>
|
||||
Define who should receive this broadcast
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<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>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="countryCodes">Country Codes (comma-separated)</Label>
|
||||
<Input
|
||||
id="countryCodes"
|
||||
value={form.target.countryCodes}
|
||||
onChange={(e) =>
|
||||
setForm({
|
||||
...form,
|
||||
target: { ...form.target, countryCodes: e.target.value },
|
||||
})
|
||||
}
|
||||
placeholder="US, CA, GB"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="percentageRollout">Percentage Rollout</Label>
|
||||
<Input
|
||||
id="percentageRollout"
|
||||
type="number"
|
||||
min={1}
|
||||
max={100}
|
||||
value={form.target.percentageRollout}
|
||||
onChange={(e) =>
|
||||
setForm({
|
||||
...form,
|
||||
target: {
|
||||
...form.target,
|
||||
percentageRollout: parseInt(e.target.value) || 100,
|
||||
},
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="appVersionMin">Min App Version</Label>
|
||||
<Input
|
||||
id="appVersionMin"
|
||||
value={form.target.appVersionMin}
|
||||
onChange={(e) =>
|
||||
setForm({
|
||||
...form,
|
||||
target: { ...form.target, appVersionMin: e.target.value },
|
||||
})
|
||||
}
|
||||
placeholder="1.0.0"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="appVersionMax">Max App Version</Label>
|
||||
<Input
|
||||
id="appVersionMax"
|
||||
value={form.target.appVersionMax}
|
||||
onChange={(e) =>
|
||||
setForm({
|
||||
...form,
|
||||
target: { ...form.target, appVersionMax: e.target.value },
|
||||
})
|
||||
}
|
||||
placeholder="2.0.0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="specificUserIds">Specific User IDs (comma-separated)</Label>
|
||||
<Input
|
||||
id="specificUserIds"
|
||||
value={form.target.specificUserIds}
|
||||
onChange={(e) =>
|
||||
setForm({
|
||||
...form,
|
||||
target: { ...form.target, specificUserIds: e.target.value },
|
||||
})
|
||||
}
|
||||
placeholder="user_123, user_456"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4 pt-4 border-t">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={handleEstimateReach}
|
||||
disabled={estimating}
|
||||
>
|
||||
{estimating ? (
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<Users className="mr-2 h-4 w-4" />
|
||||
)}
|
||||
Estimate Reach
|
||||
</Button>
|
||||
{reachEstimate && (
|
||||
<div className="text-sm">
|
||||
<span className="font-medium">{reachEstimate.estimatedCount.toLocaleString()}</span>{' '}
|
||||
users targeted
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="channels" className="space-y-4">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Delivery Channels</CardTitle>
|
||||
<CardDescription>
|
||||
Select how to deliver this broadcast
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
{CHANNELS.map((channel) => (
|
||||
<div key={channel.id} className="flex items-start space-x-3">
|
||||
<Checkbox
|
||||
id={channel.id}
|
||||
checked={form.channels.includes(channel.id)}
|
||||
onCheckedChange={(checked) =>
|
||||
setForm({
|
||||
...form,
|
||||
channels: checked
|
||||
? [...form.channels, channel.id]
|
||||
: form.channels.filter((c) => c !== channel.id),
|
||||
})
|
||||
}
|
||||
/>
|
||||
<div className="space-y-1">
|
||||
<Label htmlFor={channel.id} className="font-medium">
|
||||
{channel.label}
|
||||
</Label>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{channel.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
<div className="flex items-center justify-end gap-4">
|
||||
<Link href="/broadcasts">
|
||||
<Button variant="outline" disabled={saving}>
|
||||
Cancel
|
||||
</Button>
|
||||
</Link>
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={() => handleSave(true)}
|
||||
disabled={saving || !form.title || !form.body || form.channels.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.body || form.channels.length === 0}
|
||||
>
|
||||
{saving ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
|
||||
{isEdit ? 'Update Broadcast' : 'Create Broadcast'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
34
dashboards/admin-web/src/components/ui/checkbox.tsx
Normal file
34
dashboards/admin-web/src/components/ui/checkbox.tsx
Normal file
@ -0,0 +1,34 @@
|
||||
'use client'
|
||||
|
||||
import * as React from 'react'
|
||||
import { Check } from 'lucide-react'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
export interface CheckboxProps
|
||||
extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
checked?: boolean
|
||||
onCheckedChange?: (checked: boolean) => void
|
||||
}
|
||||
|
||||
const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(
|
||||
({ className, checked, onCheckedChange, ...props }, ref) => (
|
||||
<button
|
||||
type="button"
|
||||
role="checkbox"
|
||||
aria-checked={checked}
|
||||
ref={ref}
|
||||
onClick={() => onCheckedChange?.(!checked)}
|
||||
className={cn(
|
||||
'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
|
||||
className
|
||||
)}
|
||||
data-state={checked ? 'checked' : 'unchecked'}
|
||||
{...props}
|
||||
>
|
||||
{checked && <Check className="h-4 w-4" />}
|
||||
</button>
|
||||
)
|
||||
)
|
||||
Checkbox.displayName = 'Checkbox'
|
||||
|
||||
export { Checkbox }
|
||||
23
dashboards/admin-web/src/components/ui/textarea.tsx
Normal file
23
dashboards/admin-web/src/components/ui/textarea.tsx
Normal file
@ -0,0 +1,23 @@
|
||||
import * as React from "react"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
export interface TextareaProps
|
||||
extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
|
||||
|
||||
const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
|
||||
({ className, ...props }, ref) => {
|
||||
return (
|
||||
<textarea
|
||||
className={cn(
|
||||
"flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
)
|
||||
Textarea.displayName = "Textarea"
|
||||
|
||||
export { Textarea }
|
||||
Loading…
Reference in New Issue
Block a user