How to Integrate Flock with V0

1// app/api/notify/flock/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4const NOTIFICATION_COLORS: Record<string, string> = {
5  success: '#00C851',
6  error: '#FF4444',
7  warning: '#FF8800',
8  info: '#33b5e5',
9  lead: '#AA66CC',
10};
11
12interface FlockField {
13  title: string;
14  value: string;
15  short?: boolean;
16}
17
18interface NotificationPayload {
19  type?: string;
20  title: string;
21  message: string;
22  fields?: FlockField[];
23  actionUrl?: string;
24  actionLabel?: string;
25  channel?: 'default' | 'errors' | 'leads' | 'signups';
26}
27
28function getWebhookUrl(channel: string): string {
29  const urls: Record<string, string | undefined> = {
30    errors: process.env.FLOCK_WEBHOOK_ERRORS,
31    leads: process.env.FLOCK_WEBHOOK_LEADS,
32    signups: process.env.FLOCK_WEBHOOK_SIGNUPS,
33    default: process.env.FLOCK_WEBHOOK_URL,
34  };
35  return urls[channel] || urls.default || '';
36}
37
38export async function POST(request: NextRequest) {
39  const webhookUrl = process.env.FLOCK_WEBHOOK_URL;
40
41  if (!webhookUrl) {
42    return NextResponse.json({ error: 'Flock webhook not configured' }, { status: 500 });
43  }
44
45  let body: NotificationPayload;
46  try {
47    body = await request.json();
48  } catch {
49    return NextResponse.json({ error: 'Invalid request body' }, { status: 400 });
50  }
51
52  const { type = 'info', title, message, fields = [], actionUrl, actionLabel, channel = 'default' } = body;
53
54  const targetUrl = getWebhookUrl(channel);
55  const color = NOTIFICATION_COLORS[type] || NOTIFICATION_COLORS.info;
56
57  // Build Flock message payload with attachment
58  const flockPayload: Record<string, unknown> = {
59    text: '', // Required but can be empty when using attachments
60    attachments: [{
61      title,
62      description: { type: 'text', value: message },
63      color,
64      views: {
65        flockml: `<flockml>${message}${fields.map(f =>
66          `<br/><b>${f.title}:</b> ${f.value}`
67        ).join('')}${actionUrl ? `<br/><a href="${actionUrl}">${actionLabel || 'View Details'}</a>` : ''}</flockml>`,
68      },
69    }],
70  };
71
72  try {
73    const response = await fetch(targetUrl, {
74      method: 'POST',
75      headers: { 'Content-Type': 'application/json' },
76      body: JSON.stringify(flockPayload),
77    });
78
79    if (!response.ok) {
80      const error = await response.text();
81      console.error('Flock webhook error:', response.status, error);
82      return NextResponse.json(
83        { error: 'Failed to send Flock notification' },
84        { status: 500 }
85      );
86    }
87
88    return NextResponse.json({ success: true });
89  } catch (error) {
90    console.error('Flock notification error:', error);
91    return NextResponse.json({ error: 'Notification failed' }, { status: 500 });
92  }
93}

1// Example: triggering Flock notification from a signup API route
2// app/api/signup/route.ts
3import { NextRequest, NextResponse } from 'next/server';
4
5async function sendFlockNotification(payload: {
6  type: string;
7  title: string;
8  message: string;
9  fields?: { title: string; value: string }[];
10}): Promise<void> {
11  try {
12    await fetch(`${process.env.NEXT_PUBLIC_APP_URL}/api/notify/flock`, {
13      method: 'POST',
14      headers: { 'Content-Type': 'application/json' },
15      body: JSON.stringify(payload),
16    });
17  } catch {
18    // Silently fail — don't let notification errors break the main flow
19    console.error('Flock notification failed (non-critical)');
20  }
21}
22
23export async function POST(request: NextRequest) {
24  try {
25    const { name, email, company } = await request.json();
26
27    // TODO: Save user to your database here
28    // await db.users.create({ name, email, company });
29
30    // Send Flock notification (non-blocking)
31    sendFlockNotification({
32      type: 'success',
33      title: 'New Signup!',
34      message: `${name} from ${company || 'Unknown Company'} just signed up.`,
35      fields: [
36        { title: 'Email', value: email },
37        { title: 'Company', value: company || 'Not provided' },
38        { title: 'Signed up', value: new Date().toLocaleString() },
39      ],
40    }); // Note: intentionally NOT awaited
41
42    return NextResponse.json({ success: true });
43  } catch (error) {
44    // Send error notification
45    sendFlockNotification({
46      type: 'error',
47      title: 'Signup Error',
48      message: `Failed to process signup: ${error instanceof Error ? error.message : 'Unknown error'}`,
49    }); // Also not awaited
50
51    return NextResponse.json({ error: 'Signup failed' }, { status: 500 });
52  }
53}