How to Integrate Bolt.new with ScheduleOnce (OnceHub)

1// components/SchedulingWidget.tsx
2'use client';
3
4import { useEffect, useRef } from 'react';
5
6interface SchedulingWidgetProps {
7  bookingPageId: string;
8  height?: number;
9  color?: string;
10}
11
12export default function SchedulingWidget({
13  bookingPageId,
14  height = 700,
15  color = '#1a73e8',
16}: SchedulingWidgetProps) {
17  const containerRef = useRef<HTMLDivElement>(null);
18  const scriptLoaded = useRef(false);
19
20  useEffect(() => {
21    if (scriptLoaded.current) return;
22    scriptLoaded.current = true;
23
24    const script = document.createElement('script');
25    script.src = 'https://cdn.oncehub.com/mergedjs/so.js';
26    script.async = true;
27    document.body.appendChild(script);
28
29    return () => {
30      // Cleanup on unmount
31      const existingScript = document.querySelector(
32        'script[src="https://cdn.oncehub.com/mergedjs/so.js"]'
33      );
34      if (existingScript) document.body.removeChild(existingScript);
35    };
36  }, []);
37
38  return (
39    <div
40      id={`SOIDIV_${bookingPageId}`}
41      data-type="bookingpage"
42      data-bookingpage={bookingPageId}
43      data-color={color}
44      data-height={String(height)}
45      ref={containerRef}
46      style={{ minHeight: `${height}px`, width: '100%' }}
47    />
48  );
49}

1// app/api/oncehub/bookings/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4const ONCEHUB_API_BASE = 'https://api.oncehub.com/v2';
5
6export async function GET(request: NextRequest) {
7  const apiKey = process.env.ONCEHUB_API_KEY;
8  if (!apiKey) {
9    return NextResponse.json({ error: 'OnceHub API key not configured' }, { status: 500 });
10  }
11
12  const { searchParams } = new URL(request.url);
13  const daysAhead = parseInt(searchParams.get('days') ?? '7', 10);
14
15  const now = new Date();
16  const future = new Date(now.getTime() + daysAhead * 24 * 60 * 60 * 1000);
17
18  const queryParams = new URLSearchParams({
19    start_time: now.toISOString(),
20    end_time: future.toISOString(),
21    limit: '100',
22    status: 'booked',
23  });
24
25  const response = await fetch(
26    `${ONCEHUB_API_BASE}/bookings?${queryParams.toString()}`,
27    {
28      headers: {
29        Authorization: `Bearer ${apiKey}`,
30        'Content-Type': 'application/json',
31      },
32    }
33  );
34
35  if (!response.ok) {
36    const error = await response.json().catch(() => ({}));
37    return NextResponse.json(
38      { error: error.message ?? `OnceHub API error ${response.status}` },
39      { status: response.status }
40    );
41  }
42
43  const data = await response.json();
44
45  const bookings = (data.data ?? []).map((booking: Record<string, unknown>) => ({
46    id: booking.id,
47    customerName: (booking.customer as Record<string, unknown>)?.name,
48    customerEmail: (booking.customer as Record<string, unknown>)?.email,
49    startTime: booking.start_time,
50    endTime: booking.end_time,
51    bookingPageName: (booking.booking_page as Record<string, unknown>)?.name,
52    assignedTo: (booking.assigned_member as Record<string, unknown>)?.name,
53    meetingLink: booking.join_url,
54    status: booking.status,
55  }));
56
57  return NextResponse.json({
58    bookings,
59    total: data.total_records ?? bookings.length,
60    pageSize: data.paging?.limit ?? bookings.length,
61  });
62}

1// app/api/oncehub/webhook/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import crypto from 'crypto';
4
5interface OnceHubWebhookPayload {
6  event_type: 'booking.created' | 'booking.cancelled' | 'booking.rescheduled';
7  booking: {
8    id: string;
9    status: string;
10    start_time: string;
11    end_time: string;
12    customer: {
13      name: string;
14      email: string;
15      phone?: string;
16    };
17    booking_page: {
18      id: string;
19      name: string;
20    };
21    assigned_member?: {
22      id: string;
23      name: string;
24      email: string;
25    };
26    join_url?: string;
27  };
28}
29
30function verifySignature(payload: string, signature: string, secret: string): boolean {
31  const expectedSig = crypto
32    .createHmac('sha256', secret)
33    .update(payload, 'utf8')
34    .digest('hex');
35  return crypto.timingSafeEqual(
36    Buffer.from(signature, 'hex'),
37    Buffer.from(expectedSig, 'hex')
38  );
39}
40
41export async function POST(request: NextRequest) {
42  const rawBody = await request.text();
43  const signature = request.headers.get('x-oncehub-signature') ?? '';
44  const webhookSecret = process.env.ONCEHUB_WEBHOOK_SECRET ?? '';
45
46  if (webhookSecret && signature) {
47    const isValid = verifySignature(rawBody, signature, webhookSecret);
48    if (!isValid) {
49      return NextResponse.json({ error: 'Invalid signature' }, { status: 401 });
50    }
51  }
52
53  // Return 200 immediately — process async
54  const payload: OnceHubWebhookPayload = JSON.parse(rawBody);
55
56  // Fire-and-forget processing
57  processWebhookEvent(payload).catch(console.error);
58
59  return NextResponse.json({ received: true });
60}
61
62async function processWebhookEvent(payload: OnceHubWebhookPayload) {
63  const { event_type, booking } = payload;
64
65  switch (event_type) {
66    case 'booking.created':
67      console.log('New booking:', booking.id, booking.customer.email, booking.start_time);
68      // Save to your database here
69      break;
70    case 'booking.cancelled':
71      console.log('Booking cancelled:', booking.id);
72      // Update status in your database
73      break;
74    case 'booking.rescheduled':
75      console.log('Booking rescheduled:', booking.id, 'New time:', booking.start_time);
76      // Update time in your database
77      break;
78    default:
79      console.log('Unknown event type:', event_type);
80  }
81}

1// components/BookingDashboard.tsx
2'use client';
3
4import { useEffect, useState } from 'react';
5
6interface Booking {
7  id: string;
8  customerName: string;
9  customerEmail: string;
10  startTime: string;
11  endTime: string;
12  bookingPageName: string;
13  assignedTo: string;
14  meetingLink?: string;
15  status: string;
16}
17
18function formatTime(isoString: string): string {
19  return new Intl.DateTimeFormat(undefined, {
20    weekday: 'short',
21    month: 'short',
22    day: 'numeric',
23    hour: 'numeric',
24    minute: '2-digit',
25    timeZoneName: 'short',
26  }).format(new Date(isoString));
27}
28
29export default function BookingDashboard() {
30  const [bookings, setBookings] = useState<Booking[]>([]);
31  const [loading, setLoading] = useState(true);
32  const [days, setDays] = useState(7);
33  const [total, setTotal] = useState(0);
34
35  useEffect(() => {
36    setLoading(true);
37    fetch(`/api/oncehub/bookings?days=${days}`)
38      .then((r) => r.json())
39      .then((data) => {
40        setBookings(data.bookings ?? []);
41        setTotal(data.total ?? 0);
42      })
43      .catch(console.error)
44      .finally(() => setLoading(false));
45  }, [days]);
46
47  const grouped = bookings.reduce<Record<string, Booking[]>>((acc, b) => {
48    const key = b.assignedTo ?? 'Unassigned';
49    if (!acc[key]) acc[key] = [];
50    acc[key].push(b);
51    return acc;
52  }, {});
53
54  return (
55    <div className="p-6 max-w-5xl mx-auto">
56      <div className="flex items-center justify-between mb-6">
57        <h1 className="text-2xl font-bold">Upcoming Bookings ({total})</h1>
58        <div className="flex gap-2">
59          {[1, 7, 14].map((d) => (
60            <button
61              key={d}
62              onClick={() => setDays(d)}
63              className={`px-4 py-2 rounded text-sm ${
64                days === d ? 'bg-blue-600 text-white' : 'bg-gray-100 hover:bg-gray-200'
65              }`}
66            >
67              {d === 1 ? 'Today' : d === 7 ? 'This Week' : 'Next 14 Days'}
68            </button>
69          ))}
70        </div>
71      </div>
72
73      {loading ? (
74        <div className="space-y-4">
75          {[1, 2, 3].map((i) => (
76            <div key={i} className="h-24 bg-gray-100 rounded animate-pulse" />
77          ))}
78        </div>
79      ) : Object.keys(grouped).length === 0 ? (
80        <p className="text-gray-500 text-center py-12">No bookings in this period.</p>
81      ) : (
82        Object.entries(grouped).map(([member, memberBookings]) => (
83          <div key={member} className="mb-8">
84            <h2 className="text-lg font-semibold text-gray-700 mb-3">{member}</h2>
85            <div className="space-y-3">
86              {memberBookings.map((b) => (
87                <div key={b.id} className="border rounded-lg p-4 flex justify-between items-start">
88                  <div>
89                    <p className="font-medium">{b.customerName}</p>
90                    <p className="text-sm text-gray-500">{b.customerEmail}</p>
91                    <p className="text-sm text-blue-600 mt-1">{formatTime(b.startTime)}</p>
92                    <p className="text-xs text-gray-400">{b.bookingPageName}</p>
93                  </div>
94                  {b.meetingLink && (
95                    <a
96                      href={b.meetingLink}
97                      target="_blank"
98                      rel="noopener noreferrer"
99                      className="px-3 py-1 bg-blue-50 text-blue-700 rounded text-sm hover:bg-blue-100"
100                    >
101                      Join
102                    </a>
103                  )}
104                </div>
105              ))}
106            </div>
107          </div>
108        ))
109      )}
110    </div>
111  );
112}