feat(admin): rewrite orders page with tabs, search, multi-select filters
- AdminOrdersPanel: clean rewrite matching earth-tone theme - Add status tabs (All/Pending/Picked Up) with pill-style buttons - Add search bar for name, phone, order ID - Add stop multi-select dropdown with checkbox filter - Standard 7-column table with pagination - UpgradePlanModal: Apple HIG glass-style modal component - DashboardHeader: reusable header with upgrade modal integration - DashboardUpgradeButton: standalone upgrade button component - Update stripe-checkout to support annual billing period - Fix readability in tools/addons section (darker badges)
This commit is contained in:
@@ -1,7 +1,8 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useState, useMemo, useCallback } from "react";
|
||||
import { markPickupComplete } from "@/actions/pickup";
|
||||
import { formatDate } from "@/lib/format-date";
|
||||
|
||||
type OrderItem = {
|
||||
id: string;
|
||||
@@ -48,17 +49,17 @@ type AdminOrdersPanelProps = {
|
||||
brandId: string | null;
|
||||
};
|
||||
|
||||
type StatusTab = "all" | "pending" | "picked_up";
|
||||
|
||||
function shortId(id: string) {
|
||||
return id.slice(0, 8).toUpperCase();
|
||||
}
|
||||
|
||||
function formatDate(iso: string | undefined) {
|
||||
if (!iso) return "—";
|
||||
return new Date(iso).toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
});
|
||||
function formatCurrency(amount: number) {
|
||||
return new Intl.NumberFormat("en-US", {
|
||||
style: "currency",
|
||||
currency: "USD",
|
||||
}).format(amount);
|
||||
}
|
||||
|
||||
export { formatDate };
|
||||
@@ -71,14 +72,75 @@ export default function AdminOrdersPanel({
|
||||
const [orders, setOrders] = useState<Order[]>(initialOrders);
|
||||
const [stops] = useState<Stop[]>(initialStops);
|
||||
const [search, setSearch] = useState("");
|
||||
const [stopFilter, setStopFilter] = useState("");
|
||||
const [activeTab, setActiveTab] = useState<StatusTab>("all");
|
||||
const [selectedStops, setSelectedStops] = useState<string[]>([]);
|
||||
const [showStopDropdown, setShowStopDropdown] = useState(false);
|
||||
const [pickingUp, setPickingUp] = useState<string | null>(null);
|
||||
const [squareFilter, setSquareFilter] = useState<"all" | "square" | "other">("all");
|
||||
const [statusFilter, setStatusFilter] = useState<"all" | "pending" | "picked_up">("all");
|
||||
const [page, setPage] = useState(0);
|
||||
const [pickupToast, setPickupToast] = useState<string | null>(null);
|
||||
const PAGE_SIZE = 50;
|
||||
const PAGE_SIZE = 20;
|
||||
|
||||
// Filter orders based on all criteria
|
||||
const filteredOrders = useMemo(() => {
|
||||
return orders.filter((order) => {
|
||||
// Status filter
|
||||
if (activeTab === "pending" && order.pickup_complete) return false;
|
||||
if (activeTab === "picked_up" && !order.pickup_complete) return false;
|
||||
|
||||
// Stop filter
|
||||
if (selectedStops.length > 0 && order.stop_id && !selectedStops.includes(order.stop_id)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Search filter
|
||||
if (search.trim()) {
|
||||
const searchLower = search.toLowerCase();
|
||||
const matchesName = order.customer_name.toLowerCase().includes(searchLower);
|
||||
const matchesPhone = (order.customer_phone ?? "").toLowerCase().includes(searchLower);
|
||||
const matchesId = order.id.toLowerCase().includes(searchLower);
|
||||
if (!matchesName && !matchesPhone && !matchesId) return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
});
|
||||
}, [orders, activeTab, selectedStops, search]);
|
||||
|
||||
// Pagination
|
||||
const totalFiltered = filteredOrders.length;
|
||||
const totalPages = Math.ceil(totalFiltered / PAGE_SIZE);
|
||||
const paginatedOrders = filteredOrders.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE);
|
||||
|
||||
// Stats
|
||||
const pendingCount = orders.filter((o) => !o.pickup_complete).length;
|
||||
const pickedUpCount = orders.filter((o) => o.pickup_complete).length;
|
||||
|
||||
// Toggle stop selection
|
||||
const toggleStop = useCallback((stopId: string) => {
|
||||
setSelectedStops((prev) =>
|
||||
prev.includes(stopId) ? prev.filter((id) => id !== stopId) : [...prev, stopId]
|
||||
);
|
||||
setPage(0);
|
||||
}, []);
|
||||
|
||||
// Clear all stop filters
|
||||
const clearStopFilters = useCallback(() => {
|
||||
setSelectedStops([]);
|
||||
setPage(0);
|
||||
}, []);
|
||||
|
||||
// Handle tab change
|
||||
const handleTabChange = useCallback((tab: StatusTab) => {
|
||||
setActiveTab(tab);
|
||||
setPage(0);
|
||||
}, []);
|
||||
|
||||
// Handle search
|
||||
const handleSearch = useCallback((value: string) => {
|
||||
setSearch(value);
|
||||
setPage(0);
|
||||
}, []);
|
||||
|
||||
// Handle pickup
|
||||
async function handleMarkPickup(orderId: string) {
|
||||
setPickingUp(orderId);
|
||||
const result = await markPickupComplete(orderId, brandId);
|
||||
@@ -101,273 +163,348 @@ export default function AdminOrdersPanel({
|
||||
setPickingUp(null);
|
||||
}
|
||||
|
||||
const filtered = orders.filter((o) => {
|
||||
const matchesSearch =
|
||||
!search ||
|
||||
o.customer_name.toLowerCase().includes(search.toLowerCase()) ||
|
||||
(o.customer_phone ?? "").includes(search) ||
|
||||
o.id.includes(search.toUpperCase().slice(0, 8));
|
||||
|
||||
const matchesStop = !stopFilter || o.stop_id === stopFilter;
|
||||
|
||||
const matchesSquare =
|
||||
squareFilter === "all" ||
|
||||
(squareFilter === "square" && o.payment_processor === "square") ||
|
||||
(squareFilter === "other" && o.payment_processor !== "square");
|
||||
|
||||
const matchesStatus =
|
||||
statusFilter === "all" ||
|
||||
(statusFilter === "pending" && !o.pickup_complete) ||
|
||||
(statusFilter === "picked_up" && o.pickup_complete);
|
||||
|
||||
return matchesSearch && matchesStop && matchesSquare && matchesStatus;
|
||||
});
|
||||
|
||||
const totalFiltered = filtered.length;
|
||||
const paginated = filtered.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE);
|
||||
const totalPages = Math.ceil(totalFiltered / PAGE_SIZE);
|
||||
|
||||
const pendingCount = filtered.filter((o) => !o.pickup_complete).length;
|
||||
const pickedUpCount = filtered.filter((o) => o.pickup_complete).length;
|
||||
|
||||
return (
|
||||
<div className="bg-transparent">
|
||||
{/* Header */}
|
||||
<div className="border-b border-stone-200 bg-white px-6 py-5">
|
||||
<div className="mx-auto max-w-7xl">
|
||||
<div className="min-h-screen bg-stone-50 px-6 py-8">
|
||||
<div className="mx-auto max-w-7xl space-y-6">
|
||||
{/* Header */}
|
||||
<div className="rounded-2xl border border-stone-200 bg-white p-6 shadow-sm">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-stone-950 tracking-tight">Orders</h1>
|
||||
<p className="mt-0.5 text-sm text-stone-500">
|
||||
{pendingCount} pending
|
||||
{pickedUpCount > 0 && ` · ${pickedUpCount} picked up`}
|
||||
<h1 className="text-2xl font-semibold tracking-tight text-stone-950">Orders</h1>
|
||||
<div className="mt-2 flex items-center gap-4">
|
||||
<span className="text-sm text-stone-500">
|
||||
<span className="font-medium text-stone-700">{pendingCount}</span> pending
|
||||
</span>
|
||||
<span className="text-sm text-stone-500">
|
||||
<span className="font-medium text-stone-700">{pickedUpCount}</span> picked up
|
||||
</span>
|
||||
{brandId && (
|
||||
<span className="ml-2 text-xs text-stone-400">(brand-scoped)</span>
|
||||
<span className="rounded-full bg-violet-50 border border-violet-200 px-2.5 py-0.5 text-xs font-medium text-violet-700">
|
||||
Brand scoped
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mx-auto max-w-7xl px-6 py-4">
|
||||
{/* Status filter + pagination */}
|
||||
<div className="mb-4 flex items-center justify-between gap-3 flex-wrap">
|
||||
<div className="flex gap-1 rounded-lg border border-stone-200 bg-white p-1">
|
||||
{(["all", "pending", "picked_up"] as const).map((f) => (
|
||||
{/* Filter Bar */}
|
||||
<div className="rounded-2xl border border-stone-200 bg-white p-4 shadow-sm">
|
||||
<div className="flex flex-wrap items-center gap-4">
|
||||
{/* Status Tabs */}
|
||||
<div className="flex items-center gap-1 rounded-xl border border-stone-200 bg-stone-50 p-1">
|
||||
{(["all", "pending", "picked_up"] as const).map((tab) => (
|
||||
<button
|
||||
key={tab}
|
||||
onClick={() => handleTabChange(tab)}
|
||||
className={`rounded-lg px-4 py-2 text-sm font-medium transition-all ${
|
||||
activeTab === tab
|
||||
? "bg-white text-emerald-700 shadow-sm border border-emerald-200"
|
||||
: "text-stone-600 hover:text-stone-900 hover:bg-white/50"
|
||||
}`}
|
||||
>
|
||||
{tab === "all" ? "All" : tab === "pending" ? "Pending" : "Picked Up"}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Search */}
|
||||
<div className="relative flex-1 min-w-64">
|
||||
<svg
|
||||
className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-stone-400"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
|
||||
/>
|
||||
</svg>
|
||||
<input
|
||||
type="search"
|
||||
placeholder="Search by name, phone, or order #..."
|
||||
value={search}
|
||||
onChange={(e) => handleSearch(e.target.value)}
|
||||
className="w-full rounded-xl border border-stone-200 bg-white pl-10 pr-4 py-2.5 text-sm text-stone-900 placeholder:text-stone-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20 transition-all"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Stop Multi-Select */}
|
||||
<div className="relative">
|
||||
<button
|
||||
key={f}
|
||||
onClick={() => { setStatusFilter(f); setPage(0); }}
|
||||
className={`rounded-md px-3 py-1.5 text-xs font-medium transition-colors ${
|
||||
statusFilter === f
|
||||
? "bg-emerald-100 text-emerald-700 border border-emerald-200"
|
||||
: "text-stone-500 hover:text-stone-700 hover:bg-stone-50"
|
||||
onClick={() => setShowStopDropdown(!showStopDropdown)}
|
||||
className={`flex items-center gap-2 rounded-xl border px-4 py-2.5 text-sm font-medium transition-all ${
|
||||
selectedStops.length > 0
|
||||
? "border-emerald-200 bg-emerald-50 text-emerald-700"
|
||||
: "border-stone-200 bg-white text-stone-600 hover:border-stone-300"
|
||||
}`}
|
||||
>
|
||||
{f === "all" ? "All" : f === "pending" ? "Pending" : "Picked Up"}
|
||||
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" />
|
||||
</svg>
|
||||
<span>Stops</span>
|
||||
{selectedStops.length > 0 && (
|
||||
<span className="rounded-full bg-emerald-600 text-white px-1.5 py-0.5 text-xs font-semibold">
|
||||
{selectedStops.length}
|
||||
</span>
|
||||
)}
|
||||
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
))}
|
||||
|
||||
{showStopDropdown && (
|
||||
<>
|
||||
<div
|
||||
className="fixed inset-0 z-10"
|
||||
onClick={() => setShowStopDropdown(false)}
|
||||
/>
|
||||
<div className="absolute right-0 top-full mt-2 z-20 w-72 rounded-xl border border-stone-200 bg-white shadow-lg">
|
||||
<div className="flex items-center justify-between border-b border-stone-100 px-4 py-3">
|
||||
<span className="text-sm font-semibold text-stone-700">Filter by Stop</span>
|
||||
<button
|
||||
onClick={clearStopFilters}
|
||||
className="text-xs text-emerald-600 hover:text-emerald-700 font-medium"
|
||||
>
|
||||
Clear all
|
||||
</button>
|
||||
</div>
|
||||
<div className="max-h-64 overflow-y-auto p-2">
|
||||
{stops.map((stop) => (
|
||||
<label
|
||||
key={stop.id}
|
||||
className="flex items-center gap-3 rounded-lg px-3 py-2 hover:bg-stone-50 cursor-pointer"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedStops.includes(stop.id)}
|
||||
onChange={() => toggleStop(stop.id)}
|
||||
className="h-4 w-4 rounded border-stone-300 text-emerald-600 focus:ring-emerald-500"
|
||||
/>
|
||||
<div className="flex-1">
|
||||
<span className="text-sm font-medium text-stone-700">
|
||||
{stop.city}, {stop.state}
|
||||
</span>
|
||||
<span className="ml-2 text-xs text-stone-400">
|
||||
{formatDate(stop.date)}
|
||||
</span>
|
||||
</div>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Results count */}
|
||||
<div className="ml-auto text-sm text-stone-500">
|
||||
{totalFiltered} order{totalFiltered !== 1 ? "s" : ""}
|
||||
</div>
|
||||
</div>
|
||||
{totalPages > 1 && (
|
||||
<div className="flex items-center gap-1">
|
||||
<button
|
||||
onClick={() => setPage((p) => Math.max(0, p - 1))}
|
||||
disabled={page === 0}
|
||||
className="flex h-7 w-7 items-center justify-center rounded border border-stone-200 text-stone-500 hover:border-stone-300 hover:text-stone-700 hover:bg-stone-50 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
|
||||
aria-label="Previous page"
|
||||
>
|
||||
<svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
<span className="px-2 text-xs text-stone-500">{page + 1} / {totalPages}</span>
|
||||
<button
|
||||
onClick={() => setPage((p) => Math.min(totalPages - 1, p + 1))}
|
||||
disabled={page >= totalPages - 1}
|
||||
className="flex h-7 w-7 items-center justify-center rounded border border-stone-200 text-stone-500 hover:border-stone-300 hover:text-stone-700 hover:bg-stone-50 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
|
||||
aria-label="Next page"
|
||||
>
|
||||
<svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{/* Selected stop chips */}
|
||||
{selectedStops.length > 0 && (
|
||||
<div className="mt-3 flex flex-wrap items-center gap-2">
|
||||
<span className="text-xs text-stone-500">Selected:</span>
|
||||
{selectedStops.map((stopId) => {
|
||||
const stop = stops.find((s) => s.id === stopId);
|
||||
if (!stop) return null;
|
||||
return (
|
||||
<span
|
||||
key={stopId}
|
||||
className="inline-flex items-center gap-1 rounded-full bg-emerald-100 border border-emerald-200 px-3 py-1 text-xs font-medium text-emerald-700"
|
||||
>
|
||||
{stop.city}, {stop.state}
|
||||
<button
|
||||
onClick={() => toggleStop(stopId)}
|
||||
className="ml-1 hover:text-emerald-900"
|
||||
>
|
||||
<svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Search + Stop + Square filter */}
|
||||
<div className="mb-4 flex gap-3 flex-wrap">
|
||||
<input
|
||||
type="search"
|
||||
placeholder="Search name, phone, order #..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
className="flex-1 min-w-48 rounded-lg border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 outline-none focus:border-emerald-500 placeholder:text-stone-400 font-mono transition-colors"
|
||||
/>
|
||||
<select
|
||||
value={stopFilter}
|
||||
onChange={(e) => setStopFilter(e.target.value)}
|
||||
className="rounded-lg border border-stone-200 bg-white px-3 py-2 text-sm text-stone-700 outline-none focus:border-emerald-500 transition-colors"
|
||||
>
|
||||
<option value="">All Stops</option>
|
||||
{stops.map((s) => (
|
||||
<option key={s.id} value={s.id}>
|
||||
{s.city}, {s.state} · {formatDate(s.date)}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<div className="flex gap-1 rounded-lg border border-stone-200 bg-white p-1">
|
||||
{(["all", "square", "other"] as const).map((f) => (
|
||||
<button
|
||||
key={f}
|
||||
onClick={() => setSquareFilter(f)}
|
||||
className={`rounded-md px-3 py-1.5 text-xs font-medium transition-colors ${
|
||||
squareFilter === f
|
||||
? "bg-emerald-100 text-emerald-700 border border-emerald-200"
|
||||
: "text-stone-500 hover:text-stone-700 hover:bg-stone-50"
|
||||
}`}
|
||||
>
|
||||
{f === "all" ? "All" : f === "square" ? "Square" : "Other"}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Table */}
|
||||
{paginated.length === 0 ? (
|
||||
<div className="rounded-lg bg-white border border-stone-200 py-12 text-center text-sm text-stone-500 shadow-sm">
|
||||
No orders found
|
||||
{/* Orders Table */}
|
||||
{paginatedOrders.length === 0 ? (
|
||||
<div className="rounded-2xl border border-stone-200 bg-white py-16 text-center shadow-sm">
|
||||
<svg
|
||||
className="mx-auto h-12 w-12 text-stone-300"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={1.5}
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.801 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25zM6.75 12h.008v.008H6.75V12zm0 3h.008v.008H6.75V15zm0 3h.008v.008H6.75V18z"
|
||||
/>
|
||||
</svg>
|
||||
<p className="mt-4 text-sm font-medium text-stone-500">No orders found</p>
|
||||
<p className="mt-1 text-xs text-stone-400">Try adjusting your filters</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto rounded-lg bg-white border border-stone-200 shadow-sm">
|
||||
<table className="w-full text-sm">
|
||||
<div className="overflow-hidden rounded-2xl border border-stone-200 bg-white shadow-sm">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b border-stone-200 bg-stone-50 text-left">
|
||||
<th className="px-4 py-3 font-semibold text-stone-500">Order</th>
|
||||
<th className="px-4 py-3 font-semibold text-stone-500">Customer</th>
|
||||
<th className="px-4 py-3 font-semibold text-stone-500 hidden md:table-cell">Stop</th>
|
||||
<th className="px-4 py-3 font-semibold text-stone-500 hidden lg:table-cell">Date</th>
|
||||
<th className="px-4 py-3 font-semibold text-stone-500 text-center">Items</th>
|
||||
<th className="px-4 py-3 font-semibold text-stone-500 text-right">Total</th>
|
||||
<th className="px-4 py-3 font-semibold text-stone-500 text-center">Status</th>
|
||||
<th className="px-4 py-3 font-semibold text-stone-500 text-right">Actions</th>
|
||||
<tr className="border-b border-stone-100 bg-stone-50">
|
||||
<th className="px-5 py-4 text-left text-xs font-semibold uppercase tracking-wide text-stone-500">
|
||||
Order
|
||||
</th>
|
||||
<th className="px-5 py-4 text-left text-xs font-semibold uppercase tracking-wide text-stone-500">
|
||||
Customer
|
||||
</th>
|
||||
<th className="px-5 py-4 text-left text-xs font-semibold uppercase tracking-wide text-stone-500 hidden md:table-cell">
|
||||
Stop
|
||||
</th>
|
||||
<th className="px-5 py-4 text-left text-xs font-semibold uppercase tracking-wide text-stone-500 hidden lg:table-cell">
|
||||
Date
|
||||
</th>
|
||||
<th className="px-5 py-4 text-center text-xs font-semibold uppercase tracking-wide text-stone-500">
|
||||
Items
|
||||
</th>
|
||||
<th className="px-5 py-4 text-right text-xs font-semibold uppercase tracking-wide text-stone-500">
|
||||
Total
|
||||
</th>
|
||||
<th className="px-5 py-4 text-center text-xs font-semibold uppercase tracking-wide text-stone-500">
|
||||
Status
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{paginated.map((order) => (
|
||||
<OrderRow
|
||||
<tbody className="divide-y divide-stone-100">
|
||||
{paginatedOrders.map((order) => (
|
||||
<tr
|
||||
key={order.id}
|
||||
order={order}
|
||||
onMarkPickup={handleMarkPickup}
|
||||
pickingUp={pickingUp}
|
||||
shortId={shortId(order.id)}
|
||||
showToast={pickupToast === order.id}
|
||||
/>
|
||||
className="hover:bg-stone-50 transition-colors"
|
||||
>
|
||||
{/* Order ID */}
|
||||
<td className="px-5 py-4">
|
||||
<span className="font-mono text-sm text-stone-600">{shortId(order.id)}</span>
|
||||
</td>
|
||||
|
||||
{/* Customer */}
|
||||
<td className="px-5 py-4">
|
||||
<div className="font-medium text-stone-900">{order.customer_name}</div>
|
||||
{order.customer_phone && (
|
||||
<div className="font-mono text-xs text-stone-400">{order.customer_phone}</div>
|
||||
)}
|
||||
</td>
|
||||
|
||||
{/* Stop */}
|
||||
<td className="px-5 py-4 hidden md:table-cell">
|
||||
{order.stops ? (
|
||||
<span className="text-sm text-stone-600">
|
||||
{order.stops.city}, {order.stops.state}
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-stone-300">—</span>
|
||||
)}
|
||||
</td>
|
||||
|
||||
{/* Date */}
|
||||
<td className="px-5 py-4 hidden lg:table-cell">
|
||||
<span className="text-sm text-stone-500">{formatDate(order.created_at)}</span>
|
||||
</td>
|
||||
|
||||
{/* Items */}
|
||||
<td className="px-5 py-4 text-center">
|
||||
<span className="font-mono text-sm text-stone-600">
|
||||
{order.order_items?.length ?? 0}
|
||||
</span>
|
||||
</td>
|
||||
|
||||
{/* Total */}
|
||||
<td className="px-5 py-4 text-right">
|
||||
<span className="font-mono font-semibold text-stone-900">
|
||||
{formatCurrency(order.subtotal)}
|
||||
</span>
|
||||
</td>
|
||||
|
||||
{/* Status & Actions */}
|
||||
<td className="px-5 py-4">
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<span
|
||||
className={`rounded-full px-2.5 py-0.5 text-xs font-semibold ${
|
||||
order.pickup_complete
|
||||
? "bg-emerald-100 text-emerald-800 border border-emerald-200"
|
||||
: "bg-amber-100 text-amber-800 border border-amber-200"
|
||||
}`}
|
||||
>
|
||||
{order.pickup_complete ? "Picked Up" : "Pending"}
|
||||
</span>
|
||||
{order.payment_processor === "square" && (
|
||||
<span className="rounded-full bg-violet-100 border border-violet-200 px-1.5 py-0.5 text-xs font-semibold text-violet-700">
|
||||
Square
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Pagination */}
|
||||
{totalPages > 1 && (
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-sm text-stone-500">
|
||||
Showing {(page * PAGE_SIZE) + 1} to {Math.min((page + 1) * PAGE_SIZE, totalFiltered)} of {totalFiltered}
|
||||
</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => setPage((p) => Math.max(0, p - 1))}
|
||||
disabled={page === 0}
|
||||
className="flex h-9 w-9 items-center justify-center rounded-xl border border-stone-200 text-stone-500 hover:border-stone-300 hover:text-stone-700 hover:bg-white disabled:opacity-40 disabled:cursor-not-allowed transition-all"
|
||||
aria-label="Previous page"
|
||||
>
|
||||
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
<span className="px-3 text-sm font-medium text-stone-700">
|
||||
{page + 1} / {totalPages}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => setPage((p) => Math.min(totalPages - 1, p + 1))}
|
||||
disabled={page >= totalPages - 1}
|
||||
className="flex h-9 w-9 items-center justify-center rounded-xl border border-stone-200 text-stone-500 hover:border-stone-300 hover:text-stone-700 hover:bg-white disabled:opacity-40 disabled:cursor-not-allowed transition-all"
|
||||
aria-label="Next page"
|
||||
>
|
||||
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Pickup Toast */}
|
||||
{pickupToast && (
|
||||
<div className="fixed bottom-6 right-6 z-50 rounded-xl border border-emerald-200 bg-emerald-50 px-5 py-3 shadow-lg">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-emerald-100">
|
||||
<svg className="h-4 w-4 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<span className="font-medium text-emerald-800">Pickup confirmed!</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
type OrderRowProps = {
|
||||
order: Order;
|
||||
onMarkPickup: (orderId: string) => void;
|
||||
pickingUp: string | null;
|
||||
shortId: string;
|
||||
showToast?: boolean;
|
||||
};
|
||||
|
||||
function OrderRow({ order, onMarkPickup, pickingUp, shortId, showToast }: OrderRowProps) {
|
||||
const itemCount = order.order_items?.length ?? 0;
|
||||
|
||||
return (
|
||||
<tr className="border-b border-stone-100 last:border-0 hover:bg-stone-50 transition-colors">
|
||||
{/* Order ID */}
|
||||
<td className="px-4 py-3">
|
||||
<span className="font-mono text-xs text-stone-500">{shortId}</span>
|
||||
</td>
|
||||
|
||||
{/* Customer */}
|
||||
<td className="px-4 py-3">
|
||||
<div className="font-medium text-stone-900">{order.customer_name}</div>
|
||||
{order.customer_phone && (
|
||||
<div className="font-mono text-xs text-stone-400">{order.customer_phone}</div>
|
||||
)}
|
||||
</td>
|
||||
|
||||
{/* Stop */}
|
||||
<td className="px-4 py-3 hidden md:table-cell">
|
||||
{order.stops ? (
|
||||
<span className="text-stone-600">{order.stops.city}, {order.stops.state}</span>
|
||||
) : (
|
||||
<span className="text-stone-300">—</span>
|
||||
)}
|
||||
</td>
|
||||
|
||||
{/* Date */}
|
||||
<td className="px-4 py-3 hidden lg:table-cell">
|
||||
<span className="font-mono text-stone-500">{formatDate(order.created_at)}</span>
|
||||
</td>
|
||||
|
||||
{/* Items */}
|
||||
<td className="px-4 py-3 text-center">
|
||||
<span className="font-mono text-stone-600">{itemCount}</span>
|
||||
</td>
|
||||
|
||||
{/* Total */}
|
||||
<td className="px-4 py-3 text-right">
|
||||
<span className="font-mono font-semibold text-stone-900">
|
||||
${Number(order.subtotal).toFixed(2)}
|
||||
</span>
|
||||
</td>
|
||||
|
||||
{/* Status */}
|
||||
<td className="px-4 py-3 text-center">
|
||||
<span
|
||||
className={`inline-block rounded-full px-2 py-0.5 text-xs font-semibold ${
|
||||
order.pickup_complete
|
||||
? "bg-emerald-100 text-emerald-700 border border-emerald-200"
|
||||
: "bg-amber-100 text-amber-700 border border-amber-200"
|
||||
}`}
|
||||
>
|
||||
{order.pickup_complete ? "Picked Up" : "Pending"}
|
||||
</span>
|
||||
{order.payment_processor === "square" && (
|
||||
<span className="ml-1.5 inline-block rounded-full bg-purple-100 border border-purple-200 px-1.5 py-0.5 text-xs font-semibold text-purple-700">
|
||||
Square
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
|
||||
{/* Actions */}
|
||||
<td className="px-4 py-3 text-right">
|
||||
<div className="flex items-center justify-end gap-2">
|
||||
<a
|
||||
href={`/admin/orders/${order.id}`}
|
||||
className="rounded-lg px-3 py-1.5 text-xs font-medium text-stone-600 hover:text-stone-900 hover:bg-stone-100 transition-colors"
|
||||
>
|
||||
View / Edit
|
||||
</a>
|
||||
{!order.pickup_complete && (
|
||||
<button
|
||||
onClick={() => onMarkPickup(order.id)}
|
||||
disabled={pickingUp === order.id}
|
||||
className="rounded-lg bg-emerald-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-emerald-500 active:bg-emerald-700 disabled:opacity-50 transition-colors shadow-sm"
|
||||
>
|
||||
{pickingUp === order.id ? "..." : "Pick Up"}
|
||||
</button>
|
||||
)}
|
||||
{showToast && (
|
||||
<div className="fixed bottom-6 right-6 z-50 rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-2.5 text-xs font-semibold text-emerald-700 shadow-lg">
|
||||
Done
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useCallback } from "react";
|
||||
import UpgradePlanModal from "@/components/admin/UpgradePlanModal";
|
||||
|
||||
interface DashboardHeaderProps {
|
||||
brandId: string | null;
|
||||
brandName: string;
|
||||
planTier: string;
|
||||
}
|
||||
|
||||
export default function DashboardHeader({ brandId, brandName, planTier }: DashboardHeaderProps) {
|
||||
const [isUpgradeOpen, setIsUpgradeOpen] = useState(false);
|
||||
|
||||
const openUpgrade = useCallback(() => setIsUpgradeOpen(true), []);
|
||||
const closeUpgrade = useCallback(() => setIsUpgradeOpen(false), []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex items-end justify-between">
|
||||
<div>
|
||||
<p className="text-xs font-semibold uppercase tracking-widest text-emerald-600 mb-2">Control Center</p>
|
||||
<h1 className="text-4xl font-semibold tracking-tight text-stone-950">{brandName}</h1>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<a href="/admin/settings/billing" className="text-sm font-medium text-stone-500 hover:text-stone-700 transition-colors">
|
||||
Billing →
|
||||
</a>
|
||||
{planTier === "starter" && brandId && (
|
||||
<button
|
||||
onClick={openUpgrade}
|
||||
className="rounded-full bg-emerald-600 hover:bg-emerald-500 px-5 py-2.5 text-sm font-semibold text-white transition-all shadow-sm"
|
||||
>
|
||||
Upgrade Plan
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{planTier === "starter" && brandId && (
|
||||
<UpgradePlanModal
|
||||
isOpen={isUpgradeOpen}
|
||||
onClose={closeUpgrade}
|
||||
brandId={brandId}
|
||||
currentTier={planTier}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useCallback } from "react";
|
||||
import UpgradePlanModal from "@/components/admin/UpgradePlanModal";
|
||||
|
||||
interface DashboardUpgradeButtonProps {
|
||||
brandId: string | null;
|
||||
currentTier: string;
|
||||
}
|
||||
|
||||
export default function DashboardUpgradeButton({ brandId, currentTier }: DashboardUpgradeButtonProps) {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
const openModal = useCallback(() => setIsOpen(true), []);
|
||||
const closeModal = useCallback(() => setIsOpen(false), []);
|
||||
|
||||
if (!brandId) return null;
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
onClick={openModal}
|
||||
className="rounded-full bg-emerald-600 hover:bg-emerald-500 px-5 py-2.5 text-sm font-semibold text-white transition-all shadow-sm"
|
||||
>
|
||||
Upgrade Plan
|
||||
</button>
|
||||
|
||||
<UpgradePlanModal
|
||||
isOpen={isOpen}
|
||||
onClose={closeModal}
|
||||
brandId={brandId}
|
||||
currentTier={currentTier}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,341 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
import { createPlanUpgradeCheckout } from "@/actions/billing/stripe-checkout";
|
||||
|
||||
type PlanTier = "starter" | "farm" | "enterprise";
|
||||
|
||||
interface Plan {
|
||||
id: PlanTier;
|
||||
name: string;
|
||||
price: number;
|
||||
annualPrice: number;
|
||||
description: string;
|
||||
features: string[];
|
||||
highlighted?: boolean;
|
||||
}
|
||||
|
||||
const PLANS: Plan[] = [
|
||||
{
|
||||
id: "starter",
|
||||
name: "Starter",
|
||||
price: 49,
|
||||
annualPrice: 441,
|
||||
description: "Perfect for small farms just getting started",
|
||||
features: [
|
||||
"Products catalog",
|
||||
"10 stops/month",
|
||||
"Orders & pickup",
|
||||
"25 products max",
|
||||
"1 team member",
|
||||
"Email support",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "farm",
|
||||
name: "Farm",
|
||||
price: 149,
|
||||
annualPrice: 1341,
|
||||
description: "Everything you need to grow your wholesale business",
|
||||
features: [
|
||||
"Everything in Starter",
|
||||
"Unlimited stops",
|
||||
"Wholesale portal",
|
||||
"Harvest Reach (email/SMS)",
|
||||
"Unlimited products",
|
||||
"5 team members",
|
||||
"Priority support",
|
||||
],
|
||||
highlighted: true,
|
||||
},
|
||||
{
|
||||
id: "enterprise",
|
||||
name: "Enterprise",
|
||||
price: 399,
|
||||
annualPrice: 3591,
|
||||
description: "Custom solutions for large-scale operations",
|
||||
features: [
|
||||
"Everything in Farm",
|
||||
"AI Intelligence Pack",
|
||||
"SMS Campaigns",
|
||||
"Square Sync",
|
||||
"Water Log",
|
||||
"Unlimited team members",
|
||||
"Dedicated SLA",
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
interface UpgradePlanModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
brandId: string;
|
||||
currentTier: string;
|
||||
defaultAnnual?: boolean;
|
||||
}
|
||||
|
||||
export default function UpgradePlanModal({
|
||||
isOpen,
|
||||
onClose,
|
||||
brandId,
|
||||
currentTier,
|
||||
defaultAnnual = false,
|
||||
}: UpgradePlanModalProps) {
|
||||
const [annual, setAnnual] = useState(defaultAnnual);
|
||||
const [loading, setLoading] = useState<PlanTier | null>(null);
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
|
||||
// Handle animation state
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
requestAnimationFrame(() => setIsVisible(true));
|
||||
} else {
|
||||
setIsVisible(false);
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
// Lock body scroll when modal is open
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
document.body.style.overflow = "hidden";
|
||||
} else {
|
||||
document.body.style.overflow = "";
|
||||
}
|
||||
return () => {
|
||||
document.body.style.overflow = "";
|
||||
};
|
||||
}, [isOpen]);
|
||||
|
||||
// Handle escape key
|
||||
useEffect(() => {
|
||||
const handleEscape = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape") onClose();
|
||||
};
|
||||
if (isOpen) {
|
||||
window.addEventListener("keydown", handleEscape);
|
||||
return () => window.removeEventListener("keydown", handleEscape);
|
||||
}
|
||||
}, [isOpen, onClose]);
|
||||
|
||||
const handleUpgrade = useCallback(async (targetTier: PlanTier) => {
|
||||
const tierOrder = ["starter", "farm", "enterprise"];
|
||||
const currentIndex = tierOrder.indexOf(currentTier);
|
||||
const targetIndex = tierOrder.indexOf(targetTier);
|
||||
|
||||
// No upgrades for current or downgrade
|
||||
if (targetIndex <= currentIndex) return;
|
||||
|
||||
setLoading(targetTier);
|
||||
try {
|
||||
const result = await createPlanUpgradeCheckout(brandId, targetTier, annual ? "annual" : "monthly");
|
||||
if (result.success && result.url) {
|
||||
window.location.href = result.url;
|
||||
} else {
|
||||
alert(result.error ?? "Failed to start upgrade");
|
||||
}
|
||||
} finally {
|
||||
setLoading(null);
|
||||
}
|
||||
}, [brandId, currentTier, annual]);
|
||||
|
||||
const handleBackdropClick = (e: React.MouseEvent) => {
|
||||
if (e.target === e.currentTarget) onClose();
|
||||
};
|
||||
|
||||
if (!isOpen && !isVisible) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`fixed inset-0 z-50 flex items-center justify-center p-4 transition-all duration-300 ${
|
||||
isVisible ? "opacity-100" : "opacity-0"
|
||||
}`}
|
||||
onClick={handleBackdropClick}
|
||||
>
|
||||
{/* Glass backdrop */}
|
||||
<div className="absolute inset-0 bg-black/40 backdrop-blur-md" />
|
||||
|
||||
{/* Modal container */}
|
||||
<div
|
||||
className={`relative w-full max-w-4xl max-h-[90vh] overflow-hidden rounded-3xl border border-white/20 bg-white/80 shadow-2xl backdrop-blur-xl transition-all duration-300 ${
|
||||
isVisible ? "scale-100 opacity-100" : "scale-95 opacity-0"
|
||||
}`}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="relative border-b border-white/20 bg-gradient-to-r from-emerald-600 to-emerald-500 px-8 py-6">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="absolute right-4 top-4 flex h-8 w-8 items-center justify-center rounded-full bg-white/10 hover:bg-white/20 transition-colors"
|
||||
aria-label="Close"
|
||||
>
|
||||
<svg className="h-4 w-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div className="text-center">
|
||||
<h2 className="text-2xl font-semibold text-white">Upgrade Your Plan</h2>
|
||||
<p className="mt-1 text-sm text-white/80">Choose the perfect plan for your business</p>
|
||||
</div>
|
||||
|
||||
{/* Billing toggle */}
|
||||
<div className="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2">
|
||||
<div className="flex items-center rounded-full bg-white/20 p-1 backdrop-blur-sm">
|
||||
<button
|
||||
onClick={() => setAnnual(false)}
|
||||
className={`rounded-full px-5 py-1.5 text-sm font-medium transition-all ${
|
||||
!annual
|
||||
? "bg-white text-emerald-700 shadow-sm"
|
||||
: "text-white/80 hover:text-white"
|
||||
}`}
|
||||
>
|
||||
Monthly
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setAnnual(true)}
|
||||
className={`rounded-full px-5 py-1.5 text-sm font-medium transition-all ${
|
||||
annual
|
||||
? "bg-white text-emerald-700 shadow-sm"
|
||||
: "text-white/80 hover:text-white"
|
||||
}`}
|
||||
>
|
||||
Annual
|
||||
<span className="ml-1.5 text-xs text-emerald-200">Save 25%</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Plans grid */}
|
||||
<div className="flex gap-6 p-8 overflow-y-auto max-h-[calc(90vh-180px)]">
|
||||
{PLANS.map((plan) => {
|
||||
const tierOrder = ["starter", "farm", "enterprise"];
|
||||
const currentIndex = tierOrder.indexOf(currentTier);
|
||||
const targetIndex = tierOrder.indexOf(plan.id);
|
||||
const isCurrent = plan.id === currentTier;
|
||||
const isDowngrade = targetIndex < currentIndex;
|
||||
const canUpgrade = targetIndex > currentIndex;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={plan.id}
|
||||
className={`relative flex-1 rounded-2xl border transition-all ${
|
||||
plan.highlighted
|
||||
? "border-emerald-300 bg-white shadow-lg shadow-emerald-100"
|
||||
: "border-stone-200 bg-white/60"
|
||||
}`}
|
||||
>
|
||||
{plan.highlighted && (
|
||||
<div className="absolute -top-3 left-1/2 -translate-x-1/2">
|
||||
<span className="rounded-full bg-emerald-500 px-4 py-1 text-xs font-semibold text-white shadow-sm">
|
||||
Most Popular
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="p-6">
|
||||
{/* Plan header */}
|
||||
<div className="text-center mb-6">
|
||||
<h3 className="text-lg font-semibold text-stone-900">{plan.name}</h3>
|
||||
<div className="mt-3 flex items-baseline justify-center">
|
||||
<span className="text-4xl font-bold text-stone-900">
|
||||
${annual ? plan.annualPrice : plan.price}
|
||||
</span>
|
||||
<span className="ml-1 text-sm text-stone-500">/{annual ? "year" : "mo"}</span>
|
||||
</div>
|
||||
{annual && (
|
||||
<p className="mt-1 text-xs text-emerald-600 font-medium">
|
||||
${Math.round(annual ? plan.annualPrice / 12 : plan.price)}/month billed annually
|
||||
</p>
|
||||
)}
|
||||
<p className="mt-2 text-sm text-stone-500">{plan.description}</p>
|
||||
</div>
|
||||
|
||||
{/* Features */}
|
||||
<ul className="space-y-3 mb-6">
|
||||
{plan.features.map((feature, i) => (
|
||||
<li key={i} className="flex items-start gap-3">
|
||||
<div className={`flex-shrink-0 mt-0.5 rounded-full p-0.5 ${
|
||||
plan.highlighted ? "bg-emerald-100" : "bg-stone-100"
|
||||
}`}>
|
||||
<svg className={`h-3.5 w-3.5 ${
|
||||
plan.highlighted ? "text-emerald-600" : "text-stone-500"
|
||||
}`} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<span className="text-sm text-stone-600">{feature}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
{/* Action button */}
|
||||
{isCurrent ? (
|
||||
<div className="rounded-xl bg-emerald-50 py-3 text-center text-sm font-semibold text-emerald-700 border border-emerald-200">
|
||||
Current Plan
|
||||
</div>
|
||||
) : isDowngrade ? (
|
||||
<div className="rounded-xl bg-stone-50 py-3 text-center text-sm font-medium text-stone-400 border border-stone-200">
|
||||
Downgrade via support
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => handleUpgrade(plan.id)}
|
||||
disabled={loading !== null}
|
||||
className={`w-full rounded-xl py-3 text-sm font-semibold transition-all disabled:opacity-50 ${
|
||||
plan.highlighted
|
||||
? "bg-gradient-to-r from-emerald-600 to-emerald-500 text-white hover:from-emerald-500 hover:to-emerald-400 shadow-sm shadow-emerald-200 hover:shadow-md"
|
||||
: "bg-stone-900 text-white hover:bg-stone-800"
|
||||
}`}
|
||||
>
|
||||
{loading === plan.id ? (
|
||||
<span className="flex items-center justify-center gap-2">
|
||||
<svg className="h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
|
||||
</svg>
|
||||
Processing...
|
||||
</span>
|
||||
) : (
|
||||
`Upgrade to ${plan.name}`
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="border-t border-white/20 px-8 py-4 bg-white/50">
|
||||
<p className="text-center text-xs text-stone-500">
|
||||
Need a custom solution?{" "}
|
||||
<a href="mailto:team@cielohermosa.com" className="text-emerald-600 hover:text-emerald-700 font-medium">
|
||||
Contact us
|
||||
</a>{" "}
|
||||
for Enterprise pricing.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Hook for easy integration
|
||||
export function useUpgradePlanModal(brandId: string, currentTier: string) {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
const open = useCallback(() => setIsOpen(true), []);
|
||||
const close = useCallback(() => setIsOpen(false), []);
|
||||
|
||||
const Modal = useCallback(() => (
|
||||
<UpgradePlanModal
|
||||
isOpen={isOpen}
|
||||
onClose={close}
|
||||
brandId={brandId}
|
||||
currentTier={currentTier}
|
||||
/>
|
||||
), [isOpen, close, brandId, currentTier]);
|
||||
|
||||
return { open, close, Modal };
|
||||
}
|
||||
Reference in New Issue
Block a user