How to Build Shipping integration with V0

1// Paste this prompt into V0's AI chat:
2// Create a Supabase schema for a shipping integration:
3// 1. shipments table: id (uuid PK), order_id (uuid), carrier (text), service_level (text), tracking_number (text), label_url (text), rate_cents (int), status (text DEFAULT 'pending' — 'pending', 'in_transit', 'delivered', 'exception'), estimated_delivery (date), created_at (timestamptz)
4// 2. shipping_rates table: id (uuid PK), shipment_id (uuid FK), carrier (text), service (text), rate_cents (int), transit_days (int), fetched_at (timestamptz) for caching rate quotes
5// 3. addresses table: id (uuid PK), user_id (uuid FK), street (text), city (text), state (text), zip (text), country (text DEFAULT 'US'), is_validated (boolean DEFAULT false)
6// Add RLS policies so authenticated users can only see their own shipments.
7// Generate the SQL migration.

1import { NextRequest, NextResponse } from 'next/server'
2import { createClient } from '@supabase/supabase-js'
3
4const supabase = createClient(
5  process.env.NEXT_PUBLIC_SUPABASE_URL!,
6  process.env.SUPABASE_SERVICE_ROLE_KEY!
7)
8
9export async function POST(req: NextRequest) {
10  const { from_address, to_address, parcel } = await req.json()
11
12  const shipmentRes = await fetch('https://api.easypost.com/v2/shipments', {
13    method: 'POST',
14    headers: {
15      Authorization: `Bearer ${process.env.EASYPOST_API_KEY}`,
16      'Content-Type': 'application/json',
17    },
18    body: JSON.stringify({
19      shipment: {
20        from_address,
21        to_address,
22        parcel,
23      },
24    }),
25  })
26
27  const shipment = await shipmentRes.json()
28
29  if (shipment.error) {
30    return NextResponse.json({ error: shipment.error.message }, { status: 400 })
31  }
32
33  const rates = shipment.rates
34    .map((rate: any) => ({
35      id: rate.id,
36      carrier: rate.carrier,
37      service: rate.service,
38      rate_cents: Math.round(parseFloat(rate.rate) * 100),
39      transit_days: rate.est_delivery_days,
40      currency: rate.currency,
41    }))
42    .sort((a: any, b: any) => a.rate_cents - b.rate_cents)
43
44  return NextResponse.json({
45    shipment_id: shipment.id,
46    rates,
47  })
48}

1'use client'
2
3import { useState } from 'react'
4import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
5import { Input } from '@/components/ui/input'
6import { Button } from '@/components/ui/button'
7import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
8import { Badge } from '@/components/ui/badge'
9import { Label } from '@/components/ui/label'
10
11type ShippingRate = {
12  id: string
13  carrier: string
14  service: string
15  rate_cents: number
16  transit_days: number
17}
18
19export function ShippingRateSelector() {
20  const [rates, setRates] = useState<ShippingRate[]>([])
21  const [selected, setSelected] = useState('')
22  const [loading, setLoading] = useState(false)
23
24  async function fetchRates(formData: FormData) {
25    setLoading(true)
26    const res = await fetch('/api/shipping/rates', {
27      method: 'POST',
28      headers: { 'Content-Type': 'application/json' },
29      body: JSON.stringify({
30        from_address: {
31          street1: formData.get('from_street'),
32          city: formData.get('from_city'),
33          state: formData.get('from_state'),
34          zip: formData.get('from_zip'),
35          country: 'US',
36        },
37        to_address: {
38          street1: formData.get('to_street'),
39          city: formData.get('to_city'),
40          state: formData.get('to_state'),
41          zip: formData.get('to_zip'),
42          country: 'US',
43        },
44        parcel: { length: 10, width: 8, height: 4, weight: 16 },
45      }),
46    })
47    const data = await res.json()
48    setRates(data.rates ?? [])
49    setLoading(false)
50  }
51
52  return (
53    <div className="space-y-6">
54      <form action={fetchRates} className="grid grid-cols-2 gap-4">
55        <div className="space-y-2">
56          <h3 className="font-semibold">From Address</h3>
57          <Input name="from_street" placeholder="Street" required />
58          <Input name="from_city" placeholder="City" required />
59          <Input name="from_state" placeholder="State" required />
60          <Input name="from_zip" placeholder="ZIP" required />
61        </div>
62        <div className="space-y-2">
63          <h3 className="font-semibold">To Address</h3>
64          <Input name="to_street" placeholder="Street" required />
65          <Input name="to_city" placeholder="City" required />
66          <Input name="to_state" placeholder="State" required />
67          <Input name="to_zip" placeholder="ZIP" required />
68        </div>
69        <Button type="submit" disabled={loading} className="col-span-2">
70          {loading ? 'Fetching rates...' : 'Get Shipping Rates'}
71        </Button>
72      </form>
73      <RadioGroup value={selected} onValueChange={setSelected}>
74        <div className="grid gap-3">
75          {rates.map((rate) => (
76            <Label key={rate.id} htmlFor={rate.id} className="cursor-pointer">
77              <Card className={selected === rate.id ? 'border-primary' : ''}>
78                <CardContent className="flex items-center justify-between p-4">
79                  <div className="flex items-center gap-3">
80                    <RadioGroupItem value={rate.id} id={rate.id} />
81                    <div>
82                      <p className="font-medium">{rate.carrier} — {rate.service}</p>
83                      <p className="text-sm text-muted-foreground">
84                        {rate.transit_days} business days
85                      </p>
86                    </div>
87                  </div>
88                  <Badge variant="secondary">
89                    ${(rate.rate_cents / 100).toFixed(2)}
90                  </Badge>
91                </CardContent>
92              </Card>
93            </Label>
94          ))}
95        </div>
96      </RadioGroup>
97    </div>
98  )
99}

1import { NextRequest, NextResponse } from 'next/server'
2import { createHmac } from 'crypto'
3import { createClient } from '@supabase/supabase-js'
4
5const supabase = createClient(
6  process.env.NEXT_PUBLIC_SUPABASE_URL!,
7  process.env.SUPABASE_SERVICE_ROLE_KEY!
8)
9
10export async function POST(req: NextRequest) {
11  const rawBody = await req.text()
12  const signature = req.headers.get('x-hmac-signature')
13
14  if (!signature || !process.env.EASYPOST_WEBHOOK_SECRET) {
15    return NextResponse.json({ error: 'Missing signature' }, { status: 401 })
16  }
17
18  const expectedSig = createHmac('sha256', process.env.EASYPOST_WEBHOOK_SECRET)
19    .update(rawBody)
20    .digest('hex')
21
22  if (signature !== expectedSig) {
23    return NextResponse.json({ error: 'Invalid signature' }, { status: 401 })
24  }
25
26  const event = JSON.parse(rawBody)
27  const tracker = event.result
28
29  if (event.description === 'tracker.updated') {
30    const statusMap: Record<string, string> = {
31      pre_transit: 'pending',
32      in_transit: 'in_transit',
33      out_for_delivery: 'in_transit',
34      delivered: 'delivered',
35      failure: 'exception',
36    }
37
38    await supabase
39      .from('shipments')
40      .update({
41        status: statusMap[tracker.status] ?? 'in_transit',
42        estimated_delivery: tracker.est_delivery_date,
43      })
44      .eq('tracking_number', tracker.tracking_code)
45  }
46
47  return NextResponse.json({ received: true })
48}

1// Paste this prompt into V0's AI chat:
2// Build a shipment tracking dashboard at app/shipping/page.tsx.
3// Requirements:
4// - Server Component that fetches all shipments from Supabase ordered by created_at desc
5// - Display in a shadcn/ui Table with columns: Order ID, Carrier, Tracking Number, Status, Estimated Delivery, Rate
6// - Status column uses Badge with colors: pending=gray, in_transit=blue, delivered=green, exception=red
7// - Each tracking number is a clickable link to the carrier's tracking page
8// - Add a filter row at the top with Select for status filtering and Input for search by tracking number
9// - Include a Card at the top showing summary stats: total shipments, in transit, delivered today, exceptions
10// - Add a Dialog that shows full shipment details when clicking a row, including label download link
11// - Use Separator between the summary cards and the main table