How to Integrate Bolt.new with Wave

1// .env.local
2WAVE_API_TOKEN=your_wave_api_token_here
3WAVE_BUSINESS_ID=your_wave_business_id_uuid
4
5// lib/wave.ts
6const WAVE_ENDPOINT = 'https://gql.waveapps.com/graphql/public';
7
8interface GraphQLResponse<T> {
9  data: T;
10  errors?: Array<{ message: string; locations?: unknown[]; path?: string[] }>;
11}
12
13export async function waveQuery<T>(
14  operation: string,
15  variables: Record<string, unknown> = {}
16): Promise<T> {
17  const apiToken = process.env.WAVE_API_TOKEN;
18
19  if (!apiToken) {
20    throw new Error('WAVE_API_TOKEN is not set in environment variables');
21  }
22
23  const response = await fetch(WAVE_ENDPOINT, {
24    method: 'POST',
25    headers: {
26      Authorization: `Bearer ${apiToken}`,
27      'Content-Type': 'application/json',
28    },
29    body: JSON.stringify({ query: operation, variables }),
30  });
31
32  if (!response.ok) {
33    throw new Error(`Wave API HTTP error: ${response.status} ${response.statusText}`);
34  }
35
36  const result: GraphQLResponse<T> = await response.json();
37
38  if (result.errors && result.errors.length > 0) {
39    const errorMessages = result.errors.map((e) => e.message).join('; ');
40    throw new Error(`Wave GraphQL errors: ${errorMessages}`);
41  }
42
43  return result.data;
44}

1// app/api/wave/invoices/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { waveQuery } from '@/lib/wave';
4
5const GET_INVOICES = `
6  query GetInvoices($businessId: ID!, $page: Int!, $pageSize: Int!) {
7    business(id: $businessId) {
8      invoices(page: $page, pageSize: $pageSize) {
9        pageInfo {
10          currentPage
11          totalPages
12          totalCount
13        }
14        edges {
15          node {
16            id
17            invoiceNumber
18            status
19            invoiceDate
20            dueDate
21            amountDue {
22              value
23              currency { symbol }
24            }
25            amountPaid {
26              value
27            }
28            total {
29              value
30            }
31            customer {
32              name
33              email
34            }
35            memo
36            lineItems {
37              description
38              quantity
39              unitPrice {
40                value
41              }
42              subtotal {
43                value
44              }
45            }
46          }
47        }
48      }
49    }
50  }
51`;
52
53export async function GET(request: NextRequest) {
54  const { searchParams } = new URL(request.url);
55  const page = parseInt(searchParams.get('page') ?? '1', 10);
56  const pageSize = Math.min(parseInt(searchParams.get('pageSize') ?? '50', 10), 100);
57
58  try {
59    const businessId = process.env.WAVE_BUSINESS_ID;
60    if (!businessId) {
61      return NextResponse.json({ error: 'WAVE_BUSINESS_ID not configured' }, { status: 500 });
62    }
63
64    const data = await waveQuery<{
65      business: {
66        invoices: {
67          pageInfo: { currentPage: number; totalPages: number; totalCount: number };
68          edges: Array<{ node: Record<string, unknown> }>;
69        };
70      };
71    }>(GET_INVOICES, { businessId, page, pageSize });
72
73    const invoices = data.business.invoices.edges.map(({ node }) => ({
74      id: node.id,
75      invoiceNumber: node.invoiceNumber,
76      status: node.status,
77      invoiceDate: node.invoiceDate,
78      dueDate: node.dueDate,
79      amountDue: (node.amountDue as Record<string, unknown>)?.value,
80      amountPaid: (node.amountPaid as Record<string, unknown>)?.value,
81      total: (node.total as Record<string, unknown>)?.value,
82      currency: ((node.amountDue as Record<string, unknown>)?.currency as Record<string, unknown>)?.symbol ?? '$',
83      customerName: (node.customer as Record<string, unknown>)?.name,
84      customerEmail: (node.customer as Record<string, unknown>)?.email,
85      memo: node.memo,
86      lineItems: node.lineItems,
87    }));
88
89    return NextResponse.json({
90      invoices,
91      pagination: data.business.invoices.pageInfo,
92    });
93  } catch (error) {
94    const message = error instanceof Error ? error.message : 'Failed to fetch invoices';
95    return NextResponse.json({ error: message }, { status: 500 });
96  }
97}

1// app/api/wave/invoices/create/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { waveQuery } from '@/lib/wave';
4
5const CREATE_CUSTOMER = `
6  mutation CreateCustomer($input: CustomerCreateInput!) {
7    customerCreate(input: $input) {
8      didSucceed
9      inputErrors { code message path }
10      customer { id name email }
11    }
12  }
13`;
14
15const CREATE_INVOICE = `
16  mutation CreateInvoice($input: InvoiceCreateInput!) {
17    invoiceCreate(input: $input) {
18      didSucceed
19      inputErrors { code message path }
20      invoice {
21        id
22        invoiceNumber
23        viewUrl
24        status
25      }
26    }
27  }
28`;
29
30const ADD_LINE_ITEMS = `
31  mutation AddLineItems($input: InvoiceAddLineItemsInput!) {
32    invoiceAddLineItems(input: $input) {
33      didSucceed
34      inputErrors { code message path }
35      invoice { id total { value } }
36    }
37  }
38`;
39
40const SEND_INVOICE = `
41  mutation SendInvoice($input: InvoiceSendInput!) {
42    invoiceSend(input: $input) {
43      didSucceed
44      inputErrors { code message path }
45    }
46  }
47`;
48
49export async function POST(request: NextRequest) {
50  const body = await request.json() as {
51    customerEmail: string;
52    customerName: string;
53    lineItems: Array<{ description: string; quantity: number; unitPrice: number }>;
54    invoiceDate: string;
55    dueDate?: string;
56    memo?: string;
57    sendImmediately?: boolean;
58  };
59
60  const businessId = process.env.WAVE_BUSINESS_ID!;
61
62  try {
63    // Step 1: Create customer
64    const customerData = await waveQuery<{ customerCreate: { didSucceed: boolean; customer: { id: string } } }>(
65      CREATE_CUSTOMER,
66      {
67        input: {
68          businessId,
69          name: body.customerName,
70          email: body.customerEmail,
71          currency: { code: 'USD' },
72        },
73      }
74    );
75
76    if (!customerData.customerCreate.didSucceed) {
77      return NextResponse.json({ error: 'Failed to create customer' }, { status: 400 });
78    }
79    const customerId = customerData.customerCreate.customer.id;
80
81    // Step 2: Create invoice
82    const invoiceData = await waveQuery<{ invoiceCreate: { didSucceed: boolean; invoice: { id: string; invoiceNumber: string; viewUrl: string } } }>(
83      CREATE_INVOICE,
84      {
85        input: {
86          businessId,
87          customerId,
88          invoiceDate: body.invoiceDate,
89          dueDate: body.dueDate,
90          memo: body.memo ?? '',
91          status: 'SAVED',
92        },
93      }
94    );
95
96    if (!invoiceData.invoiceCreate.didSucceed) {
97      return NextResponse.json({ error: 'Failed to create invoice' }, { status: 400 });
98    }
99    const invoice = invoiceData.invoiceCreate.invoice;
100
101    // Step 3: Add line items
102    await waveQuery(ADD_LINE_ITEMS, {
103      input: {
104        invoiceId: invoice.id,
105        lineItems: body.lineItems.map((item) => ({
106          product: { name: item.description },
107          quantity: item.quantity,
108          unitPrice: item.unitPrice,
109        })),
110      },
111    });
112
113    // Step 4: Optionally send the invoice
114    if (body.sendImmediately) {
115      await waveQuery(SEND_INVOICE, {
116        input: {
117          invoiceId: invoice.id,
118          to: [{ name: body.customerName, email: body.customerEmail }],
119          subject: `Invoice ${invoice.invoiceNumber}`,
120          message: 'Please find your invoice attached.',
121        },
122      });
123    }
124
125    return NextResponse.json({
126      invoiceId: invoice.id,
127      invoiceNumber: invoice.invoiceNumber,
128      viewUrl: invoice.viewUrl,
129      sent: body.sendImmediately ?? false,
130    });
131  } catch (error) {
132    const message = error instanceof Error ? error.message : 'Invoice creation failed';
133    return NextResponse.json({ error: message }, { status: 500 });
134  }
135}

1// components/WaveInvoiceDashboard.tsx
2'use client';
3
4import { useEffect, useState } from 'react';
5
6interface Invoice {
7  id: string;
8  invoiceNumber: string;
9  status: string;
10  invoiceDate: string;
11  dueDate: string | null;
12  amountDue: number;
13  amountPaid: number;
14  total: number;
15  currency: string;
16  customerName: string;
17  customerEmail: string;
18}
19
20const STATUS_COLORS: Record<string, string> = {
21  PAID: 'bg-green-100 text-green-800',
22  SENT: 'bg-blue-100 text-blue-800',
23  VIEWED: 'bg-blue-100 text-blue-800',
24  OVERDUE: 'bg-red-100 text-red-800',
25  DRAFT: 'bg-gray-100 text-gray-600',
26  SAVED: 'bg-yellow-100 text-yellow-800',
27  PARTIAL: 'bg-orange-100 text-orange-800',
28};
29
30function formatCurrency(amount: number, symbol = '$'): string {
31  return `${symbol}${amount.toFixed(2)}`;
32}
33
34export default function WaveInvoiceDashboard() {
35  const [invoices, setInvoices] = useState<Invoice[]>([]);
36  const [loading, setLoading] = useState(true);
37  const [filter, setFilter] = useState<string>('ALL');
38  const [error, setError] = useState('');
39
40  useEffect(() => {
41    fetch('/api/wave/invoices')
42      .then((r) => r.json())
43      .then((data) => {
44        if (data.error) throw new Error(data.error);
45        setInvoices(data.invoices ?? []);
46      })
47      .catch((e) => setError(e.message))
48      .finally(() => setLoading(false));
49  }, []);
50
51  const now = new Date();
52  const thisMonthStart = new Date(now.getFullYear(), now.getMonth(), 1).toISOString().split('T')[0];
53
54  const outstanding = invoices.filter((i) => !['PAID', 'DRAFT'].includes(i.status)).reduce((s, i) => s + i.amountDue, 0);
55  const overdue = invoices.filter((i) => i.status === 'OVERDUE').reduce((s, i) => s + i.amountDue, 0);
56  const paidThisMonth = invoices.filter((i) => i.status === 'PAID' && i.invoiceDate >= thisMonthStart).reduce((s, i) => s + i.total, 0);
57  const invoicedThisMonth = invoices.filter((i) => i.invoiceDate >= thisMonthStart).reduce((s, i) => s + i.total, 0);
58
59  const filtered = filter === 'ALL' ? invoices
60    : filter === 'OUTSTANDING' ? invoices.filter((i) => ['SENT', 'VIEWED', 'PARTIAL', 'SAVED'].includes(i.status))
61    : filter === 'OVERDUE' ? invoices.filter((i) => i.status === 'OVERDUE')
62    : invoices.filter((i) => i.status === 'PAID');
63
64  if (loading) return <div className="p-8 text-center">Loading Wave invoices...</div>;
65  if (error) return <div className="p-8 text-red-600">Error: {error}</div>;
66
67  return (
68    <div className="p-6 max-w-6xl mx-auto">
69      <h1 className="text-2xl font-bold mb-6">Wave Invoices</h1>
70
71      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
72        {[{label: 'Outstanding', value: outstanding, color: 'text-blue-600'},
73          {label: 'Overdue', value: overdue, color: 'text-red-600'},
74          {label: 'Paid This Month', value: paidThisMonth, color: 'text-green-600'},
75          {label: 'Invoiced This Month', value: invoicedThisMonth, color: 'text-gray-800'},
76        ].map(({label, value, color}) => (
77          <div key={label} className="border rounded-lg p-4">
78            <p className="text-sm text-gray-500">{label}</p>
79            <p className={`text-2xl font-bold ${color}`}>{formatCurrency(value)}</p>
80          </div>
81        ))}
82      </div>
83
84      <div className="flex gap-2 mb-4">
85        {['ALL', 'OUTSTANDING', 'OVERDUE', 'PAID'].map((f) => (
86          <button key={f} onClick={() => setFilter(f)}
87            className={`px-3 py-1 rounded text-sm ${filter === f ? 'bg-blue-600 text-white' : 'bg-gray-100'}`}>
88            {f}
89          </button>
90        ))}
91      </div>
92
93      <div className="overflow-x-auto">
94        <table className="w-full text-sm">
95          <thead>
96            <tr className="border-b">
97              <th className="text-left py-2 font-medium">Invoice #</th>
98              <th className="text-left py-2 font-medium">Customer</th>
99              <th className="text-left py-2 font-medium">Date</th>
100              <th className="text-left py-2 font-medium">Due</th>
101              <th className="text-right py-2 font-medium">Amount</th>
102              <th className="text-left py-2 font-medium">Status</th>
103            </tr>
104          </thead>
105          <tbody>
106            {filtered.map((invoice) => (
107              <tr key={invoice.id} className="border-b hover:bg-gray-50">
108                <td className="py-3">{invoice.invoiceNumber}</td>
109                <td className="py-3">{invoice.customerName}</td>
110                <td className="py-3">{invoice.invoiceDate}</td>
111                <td className="py-3">{invoice.dueDate ?? '—'}</td>
112                <td className="py-3 text-right">{formatCurrency(invoice.total, invoice.currency)}</td>
113                <td className="py-3">
114                  <span className={`px-2 py-1 rounded-full text-xs ${STATUS_COLORS[invoice.status] ?? 'bg-gray-100'}`}>
115                    {invoice.status}
116                  </span>
117                </td>
118              </tr>
119            ))}
120          </tbody>
121        </table>
122        {filtered.length === 0 && (
123          <p className="text-center text-gray-400 py-8">No invoices match this filter.</p>
124        )}
125      </div>
126    </div>
127  );
128}