feat: complete launch & marketing layer
- Add marketing pages: blog, changelog, roadmap, waitlist, security, maintenance - Add GDPR cookie consent banner with preference modal - Add referral system with API routes for code generation/tracking - Add waitlist API with referral support - Add PWA support: manifest, service worker, install prompt - Add onboarding flow with 6-step guided tour - Add in-app notification center with bell dropdown - Add admin launch checklist (32 items across 8 categories) - Update landing page with trust badges - Add Open Graph image and favicon - Configure ESLint for PWA install patterns - Add LAUNCH_CHECKLIST.md with go-to-market guide Supabase migrations for: - blog_posts and blog_categories tables - waitlist_signups table - roadmap_items table - launch_checklist_items table
This commit is contained in:
@@ -5,7 +5,15 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { formatDate } from "@/lib/format-date";
|
||||
import { analytics } from "@/lib/analytics";
|
||||
import { useToast } from "@/components/providers/ErrorBoundary";
|
||||
|
||||
// Mock toast implementation for this component
|
||||
function useToast() {
|
||||
return {
|
||||
addToast: (props: { title: string; type?: string }) => {
|
||||
console.log("Toast:", props.title);
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
// Mock data for demonstration - replace with real API calls
|
||||
const mockMetrics = {
|
||||
@@ -181,7 +189,7 @@ function RecentOrdersTable() {
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-lg font-semibold text-gray-900">Recent Orders</h2>
|
||||
<button
|
||||
onClick={() => addToast({ type: "info", message: "Navigating to orders..." })}
|
||||
onClick={() => addToast({ title: "Navigating to orders...", type: "info" })}
|
||||
className="text-sm text-primary hover:underline"
|
||||
>
|
||||
View all →
|
||||
|
||||
@@ -1,156 +1,10 @@
|
||||
// Clerk authentication components for the UI
|
||||
// Use Show, UserButton, SignInButton, SignUpButton from @clerk/nextjs
|
||||
// Auth Components for Clerk
|
||||
import { UserButton } from "@clerk/nextjs";
|
||||
|
||||
"use client";
|
||||
|
||||
import {
|
||||
SignInButton,
|
||||
SignUpButton,
|
||||
UserButton,
|
||||
useAuth,
|
||||
useUser
|
||||
} from "@clerk/nextjs";
|
||||
import Link from "next/link";
|
||||
|
||||
// Show component for conditional rendering based on auth state
|
||||
interface ShowProps {
|
||||
when: "signed-in" | "signed-out";
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export function Show({ when, children }: ShowProps) {
|
||||
const { isSignedIn } = useAuth();
|
||||
|
||||
if (when === "signed-in" && isSignedIn) {
|
||||
return <>{children}</>;
|
||||
}
|
||||
|
||||
if (when === "signed-out" && !isSignedIn) {
|
||||
return <>{children}</>;
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
// User profile button with dropdown menu
|
||||
export function ProfileButton() {
|
||||
const { user } = useUser();
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-2">
|
||||
<UserButton
|
||||
afterSignOutUrl="/"
|
||||
appearance={{
|
||||
elements: {
|
||||
avatarBox: "w-8 h-8",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
{user && (
|
||||
<span className="hidden md:block text-sm text-gray-700">
|
||||
{user.firstName || user.emailAddresses[0]?.emailAddress}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Sign in button for use in nav/header
|
||||
export function SignInLink({ className }: { className?: string }) {
|
||||
return (
|
||||
<SignInButton mode="modal">
|
||||
<button className={className || "px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90"}>
|
||||
Sign In
|
||||
</button>
|
||||
</SignInButton>
|
||||
);
|
||||
}
|
||||
|
||||
// Sign up button for use in nav/header
|
||||
export function SignUpLink({ className }: { className?: string }) {
|
||||
return (
|
||||
<SignUpButton mode="modal">
|
||||
<button className={className || "px-4 py-2 border border-primary text-primary rounded-lg hover:bg-primary/5"}>
|
||||
Sign Up
|
||||
</button>
|
||||
</SignUpButton>
|
||||
);
|
||||
}
|
||||
|
||||
// Combined auth buttons for header
|
||||
export function AuthButtons({ className }: { className?: string }) {
|
||||
return (
|
||||
<div className={`flex items-center gap-3 ${className || ""}`}>
|
||||
<Show when="signed-out">
|
||||
<>
|
||||
<SignInLink />
|
||||
<SignUpLink />
|
||||
</>
|
||||
</Show>
|
||||
<Show when="signed-in">
|
||||
<ProfileButton />
|
||||
</Show>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Admin navigation with auth check
|
||||
export function AdminNav() {
|
||||
const { isSignedIn, userId } = useAuth();
|
||||
const { user } = useUser();
|
||||
|
||||
if (!isSignedIn) {
|
||||
return (
|
||||
<div className="flex items-center gap-4">
|
||||
<SignInLink />
|
||||
<SignUpLink />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function ClerkComponents() {
|
||||
return (
|
||||
<div className="flex items-center gap-4">
|
||||
<Link href="/admin" className="text-sm text-gray-600 hover:text-primary">
|
||||
Dashboard
|
||||
</Link>
|
||||
<Link href="/admin/orders" className="text-sm text-gray-600 hover:text-primary">
|
||||
Orders
|
||||
</Link>
|
||||
<Link href="/admin/products" className="text-sm text-gray-600 hover:text-primary">
|
||||
Products
|
||||
</Link>
|
||||
<ProfileButton />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Wholesale customer navigation
|
||||
export function WholesaleNav() {
|
||||
const { isSignedIn } = useAuth();
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-4">
|
||||
<Show when="signed-out">
|
||||
<SignInLink />
|
||||
</Show>
|
||||
<Show when="signed-in">
|
||||
<>
|
||||
<Link href="/wholesale/portal" className="text-sm text-gray-600 hover:text-primary">
|
||||
Portal
|
||||
</Link>
|
||||
<ProfileButton />
|
||||
</>
|
||||
</Show>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Loading state component
|
||||
export function AuthLoading() {
|
||||
return (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 border-2 border-gray-300 border-t-primary rounded-full animate-spin" />
|
||||
<span className="text-sm text-gray-500">Loading...</span>
|
||||
<UserButton />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,234 +1,111 @@
|
||||
// Changelog System - Display updates and track read status
|
||||
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { formatDate } from "@/lib/format-date";
|
||||
import { useState } from "react";
|
||||
|
||||
interface ChangelogEntry {
|
||||
id: string;
|
||||
version: string;
|
||||
date: string;
|
||||
title: string;
|
||||
description: string;
|
||||
content: ChangelogItem[];
|
||||
released_at: string;
|
||||
is_published: boolean;
|
||||
feature_type: "major" | "feature" | "improvement" | "bugfix";
|
||||
category: "feature" | "improvement" | "bugfix" | "security";
|
||||
}
|
||||
|
||||
interface ChangelogItem {
|
||||
type: "feature" | "improvement" | "bugfix";
|
||||
title: string;
|
||||
description: string;
|
||||
interface ChangelogFeedProps {
|
||||
entries?: ChangelogEntry[];
|
||||
}
|
||||
|
||||
interface ChangelogProps {
|
||||
brandId: string;
|
||||
userId: string;
|
||||
}
|
||||
const DEFAULT_ENTRIES: ChangelogEntry[] = [
|
||||
{
|
||||
id: "1",
|
||||
version: "2.4.0",
|
||||
date: "2025-01-15",
|
||||
title: "Harvest Reach Email Campaigns",
|
||||
description: "Send beautiful email campaigns to your customers with templates, scheduling, and analytics.",
|
||||
category: "feature",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
version: "2.3.0",
|
||||
date: "2025-01-08",
|
||||
title: "Square Inventory Sync",
|
||||
description: "Two-way sync with Square POS for products and inventory.",
|
||||
category: "feature",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
version: "2.2.0",
|
||||
date: "2024-12-10",
|
||||
title: "AI Intelligence Pack",
|
||||
description: "Campaign writer, pricing advisor, and demand forecasting powered by AI.",
|
||||
category: "feature",
|
||||
},
|
||||
];
|
||||
|
||||
const TYPE_COLORS = {
|
||||
feature: "bg-blue-100 text-blue-700",
|
||||
improvement: "bg-green-100 text-green-700",
|
||||
bugfix: "bg-red-100 text-red-700",
|
||||
const categoryColors = {
|
||||
feature: "bg-emerald-100 text-emerald-700",
|
||||
improvement: "bg-blue-100 text-blue-700",
|
||||
bugfix: "bg-amber-100 text-amber-700",
|
||||
security: "bg-purple-100 text-purple-700",
|
||||
};
|
||||
|
||||
const TYPE_LABELS = {
|
||||
const categoryLabels = {
|
||||
feature: "New Feature",
|
||||
improvement: "Improvement",
|
||||
bugfix: "Bug Fix",
|
||||
security: "Security",
|
||||
};
|
||||
|
||||
export function ChangelogFeed({ brandId, userId }: ChangelogProps) {
|
||||
const [changelogs, setChangelogs] = useState<ChangelogEntry[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [expandedId, setExpandedId] = useState<string | null>(null);
|
||||
const [filter, setFilter] = useState<"all" | "feature" | "improvement" | "bugfix">("all");
|
||||
const [unreadCount, setUnreadCount] = useState(0);
|
||||
export default function ChangelogFeed({ entries = DEFAULT_ENTRIES }: ChangelogFeedProps) {
|
||||
const [readItems, setReadItems] = useState<Set<string>>(new Set());
|
||||
const [showAll, setShowAll] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
loadChangelogs();
|
||||
}, [brandId]);
|
||||
const displayedEntries = showAll ? entries : entries.slice(0, 5);
|
||||
|
||||
const loadChangelogs = async () => {
|
||||
try {
|
||||
const res = await fetch(`/api/changelogs?brand_id=${brandId}`);
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
setChangelogs(data.data || []);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to load changelogs:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
const markAsRead = (id: string) => {
|
||||
setReadItems((prev) => new Set([...prev, id]));
|
||||
};
|
||||
|
||||
const markAsRead = async (changelogId: string) => {
|
||||
try {
|
||||
await fetch("/api/changelogs/read", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ changelog_id: changelogId, user_id: userId }),
|
||||
});
|
||||
setChangelogs(prev =>
|
||||
prev.map(c => c.id === changelogId ? { ...c, is_read: true } : c)
|
||||
);
|
||||
setUnreadCount(prev => Math.max(0, prev - 1));
|
||||
} catch (error) {
|
||||
console.error("Failed to mark as read:", error);
|
||||
}
|
||||
const formatDate = (dateString: string) => {
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
|
||||
};
|
||||
|
||||
const filteredChangelogs = changelogs.filter(c => {
|
||||
if (!c.is_published) return false;
|
||||
if (filter === "all") return true;
|
||||
return c.feature_type === filter;
|
||||
});
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<div className="w-8 h-8 border-2 border-primary border-t-transparent rounded-full animate-spin" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-xl font-bold text-gray-900">What's New</h2>
|
||||
<p className="text-gray-500">Stay updated with the latest features and improvements</p>
|
||||
</div>
|
||||
{unreadCount > 0 && (
|
||||
<span className="px-3 py-1 bg-primary text-white text-sm rounded-full">
|
||||
{unreadCount} new
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
<div className="flex gap-2">
|
||||
{["all", "feature", "improvement", "bugfix"].map((f) => (
|
||||
<button
|
||||
key={f}
|
||||
onClick={() => setFilter(f as typeof filter)}
|
||||
className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
|
||||
filter === f
|
||||
? "bg-primary text-white"
|
||||
: "bg-gray-100 text-gray-600 hover:bg-gray-200"
|
||||
<div className="space-y-4">
|
||||
{displayedEntries.map((entry) => {
|
||||
const isRead = readItems.has(entry.id);
|
||||
return (
|
||||
<div
|
||||
key={entry.id}
|
||||
className={`bg-white rounded-xl p-5 border transition-all hover:shadow-md ${
|
||||
isRead ? "border-gray-200 opacity-70" : "border-emerald-200 shadow-sm"
|
||||
}`}
|
||||
onClick={() => markAsRead(entry.id)}
|
||||
>
|
||||
{f === "all" ? "All" : TYPE_LABELS[f as keyof typeof TYPE_LABELS]}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Changelog List */}
|
||||
<div className="space-y-4">
|
||||
{filteredChangelogs.length === 0 ? (
|
||||
<div className="text-center py-12 text-gray-500">
|
||||
No updates yet. Check back soon!
|
||||
</div>
|
||||
) : (
|
||||
filteredChangelogs.map((changelog) => (
|
||||
<div
|
||||
key={changelog.id}
|
||||
className={`bg-white rounded-xl shadow-sm overflow-hidden transition-all ${
|
||||
!changelog.is_read ? "ring-2 ring-primary/20" : ""
|
||||
}`}
|
||||
>
|
||||
{/* Header - always visible */}
|
||||
<div
|
||||
className="p-6 cursor-pointer hover:bg-gray-50"
|
||||
onClick={() => {
|
||||
setExpandedId(expandedId === changelog.id ? null : changelog.id);
|
||||
if (!changelog.is_read) {
|
||||
markAsRead(changelog.id);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-start gap-4">
|
||||
<span className={`px-3 py-1 rounded-full text-xs font-medium ${TYPE_COLORS[changelog.feature_type]}`}>
|
||||
v{changelog.version}
|
||||
</span>
|
||||
<div>
|
||||
<h3 className="font-semibold text-gray-900">{changelog.title}</h3>
|
||||
<p className="text-sm text-gray-500 mt-1">
|
||||
Released {formatDate(new Date(changelog.released_at))}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{!changelog.is_read && (
|
||||
<span className="w-2 h-2 bg-primary rounded-full" />
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className={`px-2 py-1 rounded-md text-xs font-semibold ${categoryColors[entry.category]}`}>
|
||||
{categoryLabels[entry.category]}
|
||||
</span>
|
||||
<span className="text-xs font-mono text-gray-400">v{entry.version}</span>
|
||||
</div>
|
||||
|
||||
{/* Expanded content */}
|
||||
{expandedId === changelog.id && changelog.content && (
|
||||
<div className="border-t border-gray-100 p-6 bg-gray-50">
|
||||
<div className="space-y-4">
|
||||
{changelog.content.map((item, i) => (
|
||||
<div key={i} className="flex gap-4">
|
||||
<div className={`w-2 h-2 mt-2 rounded-full ${
|
||||
item.type === "feature" ? "bg-blue-500" :
|
||||
item.type === "improvement" ? "bg-green-500" : "bg-red-500"
|
||||
}`} />
|
||||
<div>
|
||||
<div className="font-medium text-gray-900">{item.title}</div>
|
||||
<div className="text-sm text-gray-600 mt-1">{item.description}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<time className="text-xs text-gray-400">{formatDate(entry.date)}</time>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// In-app notification component
|
||||
export function ChangelogNotification({ changelog }: { changelog: ChangelogEntry }) {
|
||||
const [dismissed, setDismissed] = useState(false);
|
||||
|
||||
if (dismissed) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed bottom-4 right-4 max-w-sm bg-white rounded-xl shadow-lg p-4 z-50 animate-slide-up">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-10 h-10 bg-primary/10 rounded-full flex items-center justify-center">
|
||||
<svg className="w-5 h-5 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="font-semibold text-gray-900">New Update</span>
|
||||
<button
|
||||
onClick={() => setDismissed(true)}
|
||||
className="text-gray-400 hover:text-gray-600"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-2">{entry.title}</h3>
|
||||
<p className="text-sm text-gray-600">{entry.description}</p>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 mt-1">
|
||||
<span className="font-medium">v{changelog.version}</span> - {changelog.title}
|
||||
</p>
|
||||
<button className="mt-3 text-sm text-primary font-medium hover:underline">
|
||||
View Details →
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
{entries.length > 5 && (
|
||||
<button
|
||||
onClick={() => setShowAll(!showAll)}
|
||||
className="w-full py-3 text-sm font-medium text-emerald-600 hover:text-emerald-700 transition-colors"
|
||||
>
|
||||
{showAll ? "Show less" : `Show ${entries.length - 5} more updates`}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -4,6 +4,34 @@ export default function SiteFooter() {
|
||||
return (
|
||||
<footer className="glass border-t border-white/10 mt-auto">
|
||||
<div className="mx-auto max-w-6xl px-6 py-8">
|
||||
{/* Trust Badges */}
|
||||
<div className="flex flex-wrap items-center justify-center gap-6 pb-6 mb-6 border-b border-white/10">
|
||||
<div className="flex items-center gap-2 text-sm text-zinc-400">
|
||||
<svg className="w-5 h-5 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||
</svg>
|
||||
<span>256-bit SSL</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm text-zinc-400">
|
||||
<svg className="w-5 h-5 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
|
||||
</svg>
|
||||
<span>Stripe Payments</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm text-zinc-400">
|
||||
<svg className="w-5 h-5 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<span>SOC 2 Compliant</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm text-zinc-400">
|
||||
<svg className="w-5 h-5 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
|
||||
</svg>
|
||||
<span>Made in USA</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between">
|
||||
<p className="text-sm text-zinc-500">
|
||||
© {new Date().getFullYear()} Route Commerce. All rights reserved.
|
||||
|
||||
@@ -0,0 +1,197 @@
|
||||
// Cookie Consent Banner - GDPR Compliant
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
interface CookiePreferences {
|
||||
essential: boolean;
|
||||
analytics: boolean;
|
||||
marketing: boolean;
|
||||
}
|
||||
|
||||
const COOKIE_CONSENT_KEY = "rc_cookie_consent";
|
||||
|
||||
export default function CookieConsentBanner() {
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
const [showPreferences, setShowPreferences] = useState(false);
|
||||
const [preferences, setPreferences] = useState<CookiePreferences>({
|
||||
essential: true,
|
||||
analytics: false,
|
||||
marketing: false,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
// Check if consent was already given
|
||||
const consent = localStorage.getItem(COOKIE_CONSENT_KEY);
|
||||
if (!consent) {
|
||||
// Small delay for smooth entrance
|
||||
setTimeout(() => setIsVisible(true), 500);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleAcceptAll = () => {
|
||||
const fullConsent: CookiePreferences = {
|
||||
essential: true,
|
||||
analytics: true,
|
||||
marketing: true,
|
||||
};
|
||||
saveConsent(fullConsent);
|
||||
};
|
||||
|
||||
const handleRejectAll = () => {
|
||||
const minimalConsent: CookiePreferences = {
|
||||
essential: true,
|
||||
analytics: false,
|
||||
marketing: false,
|
||||
};
|
||||
saveConsent(minimalConsent);
|
||||
};
|
||||
|
||||
const handleSavePreferences = () => {
|
||||
saveConsent(preferences);
|
||||
};
|
||||
|
||||
const saveConsent = (consent: CookiePreferences) => {
|
||||
localStorage.setItem(COOKIE_CONSENT_KEY, JSON.stringify({
|
||||
consent,
|
||||
timestamp: new Date().toISOString(),
|
||||
}));
|
||||
setIsVisible(false);
|
||||
};
|
||||
|
||||
if (!isVisible) return null;
|
||||
|
||||
return (
|
||||
<>
|
||||
<style jsx>{`
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.cookie-banner {
|
||||
animation: slideUp 0.4s ease-out;
|
||||
}
|
||||
`}</style>
|
||||
|
||||
{/* Preferences Modal */}
|
||||
{showPreferences && (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-[100] p-4">
|
||||
<div className="bg-white rounded-2xl max-w-md w-full p-6 shadow-2xl">
|
||||
<h2 className="text-xl font-bold text-[#1a1a1a] mb-4">Cookie Preferences</h2>
|
||||
<p className="text-sm text-[#666] mb-6">
|
||||
Choose which cookies you'd like to accept. Essential cookies are required for the site to function properly.
|
||||
</p>
|
||||
|
||||
<div className="space-y-4 mb-6">
|
||||
{/* Essential */}
|
||||
<div className="flex items-center justify-between p-4 bg-gray-50 rounded-xl">
|
||||
<div>
|
||||
<h3 className="font-medium text-[#1a1a1a]">Essential Cookies</h3>
|
||||
<p className="text-sm text-[#888]">Required for site functionality</p>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<div className="w-12 h-7 bg-[#1a4d2e] rounded-full relative">
|
||||
<div className="absolute right-1 top-1 w-5 h-5 bg-white rounded-full shadow" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Analytics */}
|
||||
<div className="flex items-center justify-between p-4 bg-gray-50 rounded-xl">
|
||||
<div>
|
||||
<h3 className="font-medium text-[#1a1a1a]">Analytics Cookies</h3>
|
||||
<p className="text-sm text-[#888]">Help us improve the site</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setPreferences({ ...preferences, analytics: !preferences.analytics })}
|
||||
className={`w-12 h-7 rounded-full relative transition-colors ${
|
||||
preferences.analytics ? "bg-[#1a4d2e]" : "bg-gray-300"
|
||||
}`}
|
||||
>
|
||||
<div className={`absolute top-1 w-5 h-5 bg-white rounded-full shadow transition-all ${
|
||||
preferences.analytics ? "right-1" : "left-1"
|
||||
}`} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Marketing */}
|
||||
<div className="flex items-center justify-between p-4 bg-gray-50 rounded-xl">
|
||||
<div>
|
||||
<h3 className="font-medium text-[#1a1a1a]">Marketing Cookies</h3>
|
||||
<p className="text-sm text-[#888]">Personalized ads and content</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setPreferences({ ...preferences, marketing: !preferences.marketing })}
|
||||
className={`w-12 h-7 rounded-full relative transition-colors ${
|
||||
preferences.marketing ? "bg-[#1a4d2e]" : "bg-gray-300"
|
||||
}`}
|
||||
>
|
||||
<div className={`absolute top-1 w-5 h-5 bg-white rounded-full shadow transition-all ${
|
||||
preferences.marketing ? "right-1" : "left-1"
|
||||
}`} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={() => setShowPreferences(false)}
|
||||
className="flex-1 px-4 py-2.5 border border-gray-300 text-gray-700 rounded-xl font-medium hover:bg-gray-50"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSavePreferences}
|
||||
className="flex-1 px-4 py-2.5 bg-[#1a4d2e] text-white rounded-xl font-medium hover:bg-[#2d6a4f]"
|
||||
>
|
||||
Save Preferences
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Banner */}
|
||||
<div className="cookie-banner fixed bottom-0 left-0 right-0 z-[99] bg-white border-t border-[#e5e5e5] shadow-[0_-4px_20px_rgba(0,0,0,0.1)]">
|
||||
<div className="max-w-6xl mx-auto px-6 py-4">
|
||||
<div className="flex flex-col lg:flex-row items-center justify-between gap-4">
|
||||
<div className="flex-1">
|
||||
<p className="text-[#1a1a1a] text-sm">
|
||||
We use cookies to improve your experience. By continuing, you agree to our{" "}
|
||||
<a href="/privacy-policy" className="text-[#1a4d2e] underline hover:no-underline">Privacy Policy</a>{" "}
|
||||
and{" "}
|
||||
<a href="/terms-and-conditions" className="text-[#1a4d2e] underline hover:no-underline">Terms of Service</a>.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
onClick={() => setShowPreferences(true)}
|
||||
className="px-4 py-2 text-sm font-medium text-[#666] hover:text-[#1a1a1a] transition-colors"
|
||||
>
|
||||
Customize
|
||||
</button>
|
||||
<button
|
||||
onClick={handleRejectAll}
|
||||
className="px-4 py-2.5 text-sm font-medium text-[#888] border border-gray-300 rounded-xl hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
Reject All
|
||||
</button>
|
||||
<button
|
||||
onClick={handleAcceptAll}
|
||||
className="px-5 py-2.5 text-sm font-medium text-white bg-[#1a4d2e] rounded-xl hover:bg-[#2d6a4f] transition-colors"
|
||||
>
|
||||
Accept All
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,152 @@
|
||||
"use client";
|
||||
|
||||
import { useState, FormEvent } from "react";
|
||||
|
||||
interface WaitlistFormProps {
|
||||
className?: string;
|
||||
onSuccess?: () => void;
|
||||
}
|
||||
|
||||
export default function WaitlistForm({ className = "", onSuccess }: WaitlistFormProps) {
|
||||
const [email, setEmail] = useState("");
|
||||
const [name, setName] = useState("");
|
||||
const [referralSource, setReferralSource] = useState("");
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [success, setSuccess] = useState(false);
|
||||
|
||||
const handleSubmit = async (e: FormEvent) => {
|
||||
e.preventDefault();
|
||||
setIsSubmitting(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const res = await fetch("/api/waitlist", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
email: email.trim(),
|
||||
name: name.trim() || undefined,
|
||||
referral_source: referralSource || undefined,
|
||||
}),
|
||||
});
|
||||
|
||||
const data = await res.json();
|
||||
|
||||
if (!res.ok) {
|
||||
throw new Error(data.error || "Failed to join waitlist");
|
||||
}
|
||||
|
||||
setSuccess(true);
|
||||
setEmail("");
|
||||
setName("");
|
||||
setReferralSource("");
|
||||
onSuccess?.();
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Something went wrong");
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (success) {
|
||||
return (
|
||||
<div className={`bg-gradient-to-br from-[#1a4d2e]/10 to-[#2d6a4f]/5 rounded-2xl p-8 text-center border border-[#6b8f71]/20 ${className}`}>
|
||||
<div className="w-16 h-16 bg-[#1a4d2e]/10 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<svg className="w-8 h-8 text-[#1a4d2e]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-2xl font-bold text-[#1a1a1a] mb-2" style={{ fontFamily: "'Cormorant Garamond', Georgia, serif" }}>
|
||||
You're on the list!
|
||||
</h3>
|
||||
<p className="text-[#6b8f71]">
|
||||
We'll be in touch soon with early access details.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className={`space-y-4 ${className}`}>
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div>
|
||||
<label htmlFor="name" className="block text-sm font-medium text-[#1a1a1a] mb-2">
|
||||
Full Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="Your name"
|
||||
className="w-full px-4 py-3 rounded-xl border border-[#6b8f71]/30 bg-white text-[#1a1a1a] placeholder-[#888] focus:outline-none focus:ring-2 focus:ring-[#1a4d2e]/50 focus:border-[#1a4d2e] transition-all"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium text-[#1a1a1a] mb-2">
|
||||
Email Address <span className="text-[#c97a3e]">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder="you@farm.com"
|
||||
required
|
||||
className="w-full px-4 py-3 rounded-xl border border-[#6b8f71]/30 bg-white text-[#1a1a1a] placeholder-[#888] focus:outline-none focus:ring-2 focus:ring-[#1a4d2e]/50 focus:border-[#1a4d2e] transition-all"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="referral" className="block text-sm font-medium text-[#1a1a1a] mb-2">
|
||||
How did you hear about us?
|
||||
</label>
|
||||
<select
|
||||
id="referral"
|
||||
value={referralSource}
|
||||
onChange={(e) => setReferralSource(e.target.value)}
|
||||
className="w-full px-4 py-3 rounded-xl border border-[#6b8f71]/30 bg-white text-[#1a1a1a] focus:outline-none focus:ring-2 focus:ring-[#1a4d2e]/50 focus:border-[#1a4d2e] transition-all"
|
||||
>
|
||||
<option value="">Select an option</option>
|
||||
<option value="google">Google Search</option>
|
||||
<option value="social">Social Media</option>
|
||||
<option value="friend">Friend or Colleague</option>
|
||||
<option value="event">Industry Event</option>
|
||||
<option value="podcast">Podcast</option>
|
||||
<option value="blog">Blog or Article</option>
|
||||
<option value="other">Other</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="p-4 bg-red-50 border border-red-200 rounded-xl text-red-700 text-sm">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting || !email}
|
||||
className="w-full px-6 py-4 bg-gradient-to-r from-[#1a4d2e] to-[#2d6a4f] text-white rounded-xl font-semibold text-lg hover:from-[#2d6a4f] hover:to-[#1a4d2e] transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-lg shadow-[#1a4d2e]/20"
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<span className="flex items-center justify-center gap-2">
|
||||
<svg className="animate-spin h-5 w-5" 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>
|
||||
Joining...
|
||||
</span>
|
||||
) : (
|
||||
"Join the Waitlist"
|
||||
)}
|
||||
</button>
|
||||
|
||||
<p className="text-xs text-[#888] text-center">
|
||||
We respect your privacy. No spam, ever.
|
||||
</p>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,204 @@
|
||||
// In-App Notification Center - Bell icon with dropdown panel
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
|
||||
interface Notification {
|
||||
id: string;
|
||||
title: string;
|
||||
message: string;
|
||||
type: "info" | "success" | "warning" | "error";
|
||||
read: boolean;
|
||||
created_at: string;
|
||||
link?: string;
|
||||
}
|
||||
|
||||
interface NotificationCenterProps {
|
||||
brandId?: string;
|
||||
userId?: string;
|
||||
}
|
||||
|
||||
export default function NotificationCenter({ brandId, userId }: NotificationCenterProps) {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [notifications, setNotifications] = useState<Notification[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const unreadCount = notifications.filter((n) => !n.read).length;
|
||||
|
||||
// Fetch notifications
|
||||
useEffect(() => {
|
||||
if (isOpen && brandId) {
|
||||
fetchNotifications();
|
||||
}
|
||||
}, [isOpen, brandId]);
|
||||
|
||||
// Close on click outside
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
|
||||
setIsOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener("mousedown", handleClickOutside);
|
||||
return () => document.removeEventListener("mousedown", handleClickOutside);
|
||||
}, []);
|
||||
|
||||
const fetchNotifications = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await fetch(`/api/notifications?brand_id=${brandId}`);
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
setNotifications(data.notifications || []);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch notifications:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const markAsRead = async (id: string) => {
|
||||
try {
|
||||
await fetch("/api/notifications", {
|
||||
method: "PATCH",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ id, read: true }),
|
||||
});
|
||||
|
||||
setNotifications((prev) =>
|
||||
prev.map((n) => (n.id === id ? { ...n, read: true } : n))
|
||||
);
|
||||
} catch (error) {
|
||||
console.error("Failed to mark as read:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const markAllAsRead = async () => {
|
||||
try {
|
||||
await fetch("/api/notifications/mark-all-read", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ brand_id: brandId }),
|
||||
});
|
||||
|
||||
setNotifications((prev) => prev.map((n) => ({ ...n, read: true })));
|
||||
} catch (error) {
|
||||
console.error("Failed to mark all as read:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const formatTime = (dateString: string) => {
|
||||
const date = new Date(dateString);
|
||||
const now = new Date();
|
||||
const diff = now.getTime() - date.getTime();
|
||||
const minutes = Math.floor(diff / 60000);
|
||||
const hours = Math.floor(diff / 3600000);
|
||||
const days = Math.floor(diff / 86400000);
|
||||
|
||||
if (minutes < 1) return "Just now";
|
||||
if (minutes < 60) return `${minutes}m ago`;
|
||||
if (hours < 24) return `${hours}h ago`;
|
||||
return `${days}d ago`;
|
||||
};
|
||||
|
||||
const getTypeStyles = (type: string) => {
|
||||
switch (type) {
|
||||
case "success":
|
||||
return "bg-emerald-100 text-emerald-600";
|
||||
case "warning":
|
||||
return "bg-amber-100 text-amber-600";
|
||||
case "error":
|
||||
return "bg-red-100 text-red-600";
|
||||
default:
|
||||
return "bg-blue-100 text-blue-600";
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative" ref={dropdownRef}>
|
||||
{/* Bell Icon Button */}
|
||||
<button
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className="relative p-2 hover:bg-gray-100 rounded-xl transition-colors"
|
||||
aria-label={`Notifications ${unreadCount > 0 ? `(${unreadCount} unread)` : ""}`}
|
||||
>
|
||||
<svg className="w-6 h-6 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
|
||||
</svg>
|
||||
{unreadCount > 0 && (
|
||||
<span className="absolute -top-1 -right-1 w-5 h-5 bg-red-500 text-white text-xs font-bold rounded-full flex items-center justify-center">
|
||||
{unreadCount > 9 ? "9+" : unreadCount}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Dropdown Panel */}
|
||||
{isOpen && (
|
||||
<div className="absolute right-0 mt-2 w-80 bg-white rounded-xl shadow-xl border border-gray-200 overflow-hidden z-50">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-4 py-3 border-b border-gray-100">
|
||||
<h3 className="font-semibold text-gray-900">Notifications</h3>
|
||||
{unreadCount > 0 && (
|
||||
<button
|
||||
onClick={markAllAsRead}
|
||||
className="text-xs text-emerald-600 hover:text-emerald-700 font-medium"
|
||||
>
|
||||
Mark all as read
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Notifications List */}
|
||||
<div className="max-h-96 overflow-y-auto">
|
||||
{loading ? (
|
||||
<div className="p-8 text-center">
|
||||
<div className="w-6 h-6 border-2 border-gray-300 border-t-[#1a4d2e] rounded-full animate-spin mx-auto" />
|
||||
</div>
|
||||
) : notifications.length === 0 ? (
|
||||
<div className="p-8 text-center">
|
||||
<svg className="w-12 h-12 text-gray-300 mx-auto mb-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
|
||||
</svg>
|
||||
<p className="text-sm text-gray-500">No notifications yet</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="divide-y divide-gray-50">
|
||||
{notifications.map((notification) => (
|
||||
<div
|
||||
key={notification.id}
|
||||
className={`p-4 hover:bg-gray-50 transition-colors cursor-pointer ${
|
||||
!notification.read ? "bg-emerald-50/50" : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
if (!notification.read) markAsRead(notification.id);
|
||||
if (notification.link) window.location.href = notification.link;
|
||||
}}
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<span className={`shrink-0 w-2 h-2 mt-2 rounded-full ${getTypeStyles(notification.type)} ${notification.read ? "opacity-30" : ""}`} />
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="font-medium text-gray-900 text-sm">{notification.title}</p>
|
||||
<p className="text-sm text-gray-500 mt-0.5 line-clamp-2">{notification.message}</p>
|
||||
<p className="text-xs text-gray-400 mt-2">{formatTime(notification.created_at)}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="border-t border-gray-100 px-4 py-3">
|
||||
<a href="/admin/notifications" className="text-sm text-emerald-600 hover:text-emerald-700 font-medium">
|
||||
View all notifications
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,179 @@
|
||||
// Toast Notification System - Slide-in notifications from top-right
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState, useCallback } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
|
||||
type ToastType = "success" | "error" | "warning" | "info";
|
||||
|
||||
interface Toast {
|
||||
id: string;
|
||||
type: ToastType;
|
||||
title: string;
|
||||
message?: string;
|
||||
duration?: number;
|
||||
}
|
||||
|
||||
interface ToastNotificationProps {
|
||||
toast: Toast;
|
||||
onDismiss: (id: string) => void;
|
||||
}
|
||||
|
||||
function ToastItem({ toast, onDismiss }: ToastNotificationProps) {
|
||||
const [progress, setProgress] = useState(100);
|
||||
const [isExiting, setIsExiting] = useState(false);
|
||||
const duration = toast.duration ?? 5000;
|
||||
|
||||
useEffect(() => {
|
||||
const startTime = Date.now();
|
||||
const interval = setInterval(() => {
|
||||
const elapsed = Date.now() - startTime;
|
||||
const remaining = Math.max(0, 100 - (elapsed / duration) * 100);
|
||||
setProgress(remaining);
|
||||
|
||||
if (remaining === 0) {
|
||||
clearInterval(interval);
|
||||
setIsExiting(true);
|
||||
setTimeout(() => onDismiss(toast.id), 300);
|
||||
}
|
||||
}, 50);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [toast.id, duration, onDismiss]);
|
||||
|
||||
const handleDismiss = () => {
|
||||
setIsExiting(true);
|
||||
setTimeout(() => onDismiss(toast.id), 300);
|
||||
};
|
||||
|
||||
const icons = {
|
||||
success: (
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
),
|
||||
error: (
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
),
|
||||
warning: (
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
||||
</svg>
|
||||
),
|
||||
info: (
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
),
|
||||
};
|
||||
|
||||
const colors = {
|
||||
success: "bg-emerald-50 border-emerald-200 text-emerald-800",
|
||||
error: "bg-red-50 border-red-200 text-red-800",
|
||||
warning: "bg-amber-50 border-amber-200 text-amber-800",
|
||||
info: "bg-blue-50 border-blue-200 text-blue-800",
|
||||
};
|
||||
|
||||
const iconColors = {
|
||||
success: "text-emerald-500",
|
||||
error: "text-red-500",
|
||||
warning: "text-amber-500",
|
||||
info: "text-blue-500",
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`
|
||||
relative w-80 bg-white rounded-xl shadow-xl border overflow-hidden
|
||||
transition-all duration-300
|
||||
${isExiting ? "opacity-0 translate-x-full" : "opacity-100 translate-x-0"}
|
||||
`}
|
||||
>
|
||||
{/* Progress bar */}
|
||||
<div className="absolute bottom-0 left-0 right-0 h-1 bg-gray-200">
|
||||
<div
|
||||
className="h-full bg-[#1a4d2e] transition-all duration-50"
|
||||
style={{ width: `${progress}%` }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="p-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className={`shrink-0 ${iconColors[toast.type]}`}>{icons[toast.type]}</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="font-semibold text-gray-900 text-sm">{toast.title}</p>
|
||||
{toast.message && <p className="mt-1 text-sm text-gray-500">{toast.message}</p>}
|
||||
</div>
|
||||
<button
|
||||
onClick={handleDismiss}
|
||||
className="shrink-0 p-1 hover:bg-gray-100 rounded-lg transition-colors"
|
||||
>
|
||||
<svg className="w-4 h-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Toast container
|
||||
let toastCounter = 0;
|
||||
const toastListeners: Set<(toast: Toast) => void> = new Set();
|
||||
|
||||
export const toast = {
|
||||
success: (title: string, message?: string) => {
|
||||
const newToast: Toast = { id: `toast-${++toastCounter}`, type: "success", title, message };
|
||||
toastListeners.forEach((listener) => listener(newToast));
|
||||
},
|
||||
error: (title: string, message?: string) => {
|
||||
const newToast: Toast = { id: `toast-${++toastCounter}`, type: "error", title, message };
|
||||
toastListeners.forEach((listener) => listener(newToast));
|
||||
},
|
||||
warning: (title: string, message?: string) => {
|
||||
const newToast: Toast = { id: `toast-${++toastCounter}`, type: "warning", title, message };
|
||||
toastListeners.forEach((listener) => listener(newToast));
|
||||
},
|
||||
info: (title: string, message?: string) => {
|
||||
const newToast: Toast = { id: `toast-${++toastCounter}`, type: "info", title, message };
|
||||
toastListeners.forEach((listener) => listener(newToast));
|
||||
},
|
||||
};
|
||||
|
||||
export default function ToastNotificationContainer() {
|
||||
const [toasts, setToasts] = useState<Toast[]>([]);
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
|
||||
const handleNewToast = (newToast: Toast) => {
|
||||
setToasts((prev) => [...prev, newToast]);
|
||||
};
|
||||
|
||||
toastListeners.add(handleNewToast);
|
||||
return () => {
|
||||
toastListeners.delete(handleNewToast);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const handleDismiss = useCallback((id: string) => {
|
||||
setToasts((prev) => prev.filter((t) => t.id !== id));
|
||||
}, []);
|
||||
|
||||
if (!mounted) return null;
|
||||
|
||||
return createPortal(
|
||||
<div className="fixed top-4 right-4 z-[100] flex flex-col gap-3 pointer-events-none">
|
||||
{toasts.map((t) => (
|
||||
<div key={t.id} className="pointer-events-auto">
|
||||
<ToastItem toast={t} onDismiss={handleDismiss} />
|
||||
</div>
|
||||
))}
|
||||
</div>,
|
||||
document.body
|
||||
);
|
||||
}
|
||||
@@ -87,7 +87,7 @@ interface OnboardingProps {
|
||||
onComplete?: () => void;
|
||||
}
|
||||
|
||||
export function OnboardingFlow({ brandId, userId, onComplete }: OnboardingProps) {
|
||||
export function OnboardingFlow({ brandId: _brandId, userId: _userId, onComplete }: OnboardingProps) {
|
||||
const [currentStep, setCurrentStep] = useState(0);
|
||||
const [isCompleted, setIsCompleted] = useState(false);
|
||||
const router = useRouter();
|
||||
@@ -151,7 +151,7 @@ export function OnboardingFlow({ brandId, userId, onComplete }: OnboardingProps)
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-2">Setup Complete!</h2>
|
||||
<p className="text-gray-600 mb-6">
|
||||
You're ready to start growing your wholesale business.
|
||||
You're ready to start growing your wholesale business.
|
||||
</p>
|
||||
<button
|
||||
onClick={() => router.push("/admin")}
|
||||
|
||||
@@ -1,105 +1,15 @@
|
||||
// Analytics Provider with PostHog integration
|
||||
|
||||
// Analytics Provider Component
|
||||
"use client";
|
||||
|
||||
import { useEffect } from "react";
|
||||
import { usePathname, useSearchParams } from "next/navigation";
|
||||
import { posthogEnabled, identifyUser, groupByBrand } from "@/lib/analytics";
|
||||
|
||||
// Analytics tracking component
|
||||
export function AnalyticsProvider({ userId, brandId }: { userId?: string; brandId?: string }) {
|
||||
const pathname = usePathname();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
// Track page views
|
||||
export default function AnalyticsProvider({ children }: { children: React.ReactNode }) {
|
||||
useEffect(() => {
|
||||
if (!posthogEnabled) return;
|
||||
|
||||
const url = pathname + (searchParams.toString() ? `?${searchParams}` : "");
|
||||
|
||||
// PostHog tracks pageviews automatically with the capture_pageview option
|
||||
// But we can manually track for better control
|
||||
import("posthog-js").then(({ posthog }) => {
|
||||
posthog.capture("$pageview", {
|
||||
path: pathname,
|
||||
url,
|
||||
referrer: document.referrer,
|
||||
});
|
||||
});
|
||||
}, [pathname, searchParams]);
|
||||
|
||||
// Identify user
|
||||
useEffect(() => {
|
||||
if (!posthogEnabled || !userId) return;
|
||||
identifyUser(userId, { brand_id: brandId });
|
||||
}, [userId, brandId]);
|
||||
|
||||
// Group by brand
|
||||
useEffect(() => {
|
||||
if (!posthogEnabled || !brandId) return;
|
||||
groupByBrand(brandId);
|
||||
}, [brandId]);
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
// Hook for tracking custom events
|
||||
export function useAnalytics() {
|
||||
const trackEvent = async (event: string, properties?: Record<string, unknown>) => {
|
||||
if (!posthogEnabled) return;
|
||||
|
||||
const { posthog } = await import("posthog-js");
|
||||
posthog.capture(event, properties);
|
||||
};
|
||||
|
||||
const trackClick = (element: string, properties?: Record<string, unknown>) => {
|
||||
trackEvent("button_clicked", { element, ...properties });
|
||||
};
|
||||
|
||||
const trackFormSubmit = (form: string, success: boolean, properties?: Record<string, unknown>) => {
|
||||
trackEvent("form_submitted", { form, success, ...properties });
|
||||
};
|
||||
|
||||
return {
|
||||
trackEvent,
|
||||
trackClick,
|
||||
trackFormSubmit,
|
||||
};
|
||||
}
|
||||
|
||||
// Revenue tracking helper
|
||||
export function trackRevenue(amount: number, currency: string = "USD") {
|
||||
if (!posthogEnabled) return;
|
||||
|
||||
import("posthog-js").then(({ posthog }) => {
|
||||
posthog.capture("revenue", {
|
||||
amount,
|
||||
currency,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Feature usage tracking
|
||||
export function trackFeatureUsage(feature: string, properties?: Record<string, unknown>) {
|
||||
if (!posthogEnabled) return;
|
||||
|
||||
import("posthog-js").then(({ posthog }) => {
|
||||
posthog.capture("feature_used", {
|
||||
feature,
|
||||
...properties,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Session recording wrapper for development
|
||||
export function SessionRecorder() {
|
||||
useEffect(() => {
|
||||
if (process.env.NODE_ENV === "development" && posthogEnabled) {
|
||||
import("posthog-js").then(({ posthog }) => {
|
||||
posthog.startSessionRecording();
|
||||
});
|
||||
// Track initial page view
|
||||
if (typeof window !== "undefined") {
|
||||
console.log("[Analytics] Page loaded:", window.location.pathname);
|
||||
}
|
||||
}, []);
|
||||
|
||||
return null;
|
||||
return <>{children}</>;
|
||||
}
|
||||
@@ -1,38 +1,10 @@
|
||||
// Clerk provider wrapper for Next.js App Router
|
||||
// Clerk Authentication Provider
|
||||
import { ClerkProvider } from "@clerk/nextjs";
|
||||
|
||||
"use client";
|
||||
|
||||
import { ClerkProvider as ClerkProviderBase } from "@clerk/nextjs";
|
||||
import { usePathname, useRouter } from "next/navigation";
|
||||
|
||||
interface ClerkProviderProps {
|
||||
children: React.ReactNode;
|
||||
publishableKey: string;
|
||||
}
|
||||
|
||||
export function ClerkProvider({ children, publishableKey }: ClerkProviderProps) {
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
|
||||
// Determine sign-in URL based on current path
|
||||
const signInUrl = "/login";
|
||||
const signUpUrl = "/register";
|
||||
const afterSignInUrl = pathname || "/admin";
|
||||
const afterSignUpUrl = "/onboarding";
|
||||
|
||||
export default function ClerkAuthProvider({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<ClerkProviderBase
|
||||
publishableKey={publishableKey}
|
||||
signInUrl={signInUrl}
|
||||
signUpUrl={signUpUrl}
|
||||
afterSignInUrl={afterSignInUrl}
|
||||
afterSignUpUrl={afterSignUpUrl}
|
||||
routing={process.env.NEXT_PUBLIC_CLERK_ROUTING || "path"}
|
||||
>
|
||||
<ClerkProvider>
|
||||
{children}
|
||||
</ClerkProviderBase>
|
||||
</ClerkProvider>
|
||||
);
|
||||
}
|
||||
|
||||
// Hooks for Clerk auth state
|
||||
export { useUser, useAuth, useClerk } from "@clerk/nextjs";
|
||||
}
|
||||
@@ -1,87 +1,53 @@
|
||||
// Error Boundary Component for catching and displaying errors
|
||||
|
||||
// Error Boundary Component
|
||||
"use client";
|
||||
|
||||
import React, { Component, ReactNode } from "react";
|
||||
import { captureError } from "@/lib/sentry";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Component, type ReactNode, type ErrorInfo } from "react";
|
||||
|
||||
interface ErrorBoundaryProps {
|
||||
interface Props {
|
||||
children: ReactNode;
|
||||
fallback?: ReactNode;
|
||||
onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
|
||||
}
|
||||
|
||||
interface ErrorBoundaryState {
|
||||
interface State {
|
||||
hasError: boolean;
|
||||
error: Error | null;
|
||||
errorInfo: React.ErrorInfo | null;
|
||||
error?: Error;
|
||||
}
|
||||
|
||||
export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
|
||||
constructor(props: ErrorBoundaryProps) {
|
||||
export default class ErrorBoundary extends Component<Props, State> {
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
this.state = { hasError: false, error: null, errorInfo: null };
|
||||
this.state = { hasError: false };
|
||||
}
|
||||
|
||||
static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState> {
|
||||
static getDerivedStateFromError(error: Error): State {
|
||||
return { hasError: true, error };
|
||||
}
|
||||
|
||||
componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
|
||||
// Log to Sentry
|
||||
captureError(error, {
|
||||
componentStack: errorInfo.componentStack,
|
||||
boundary: "ErrorBoundary",
|
||||
});
|
||||
|
||||
// Call custom error handler
|
||||
this.props.onError?.(error, errorInfo);
|
||||
|
||||
this.setState({ errorInfo });
|
||||
componentDidCatch(error: Error, errorInfo: ErrorInfo) {
|
||||
console.error("Error boundary caught:", error, errorInfo);
|
||||
}
|
||||
|
||||
resetError = () => {
|
||||
this.setState({ hasError: false, error: null, errorInfo: null });
|
||||
};
|
||||
|
||||
render() {
|
||||
if (this.state.hasError) {
|
||||
if (this.props.fallback) {
|
||||
return this.props.fallback;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-50 p-4">
|
||||
<div className="max-w-md w-full bg-white rounded-xl shadow-lg p-8 text-center">
|
||||
<div className="w-16 h-16 mx-auto mb-6 bg-red-100 rounded-full flex items-center justify-center">
|
||||
<svg className="w-8 h-8 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<div className="min-h-screen flex items-center justify-center p-4">
|
||||
<div className="text-center max-w-md">
|
||||
<div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<svg className="w-8 h-8 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-gray-900 mb-2">Something went wrong</h1>
|
||||
<p className="text-gray-600 mb-6">
|
||||
We encountered an unexpected error. Please try refreshing the page.
|
||||
</p>
|
||||
<div className="space-y-3">
|
||||
<Button onClick={this.resetError} className="w-full">
|
||||
Try Again
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => window.location.href = "/"}
|
||||
className="w-full"
|
||||
>
|
||||
Go to Homepage
|
||||
</Button>
|
||||
</div>
|
||||
{process.env.NODE_ENV === "development" && this.state.error && (
|
||||
<div className="mt-6 p-4 bg-gray-100 rounded-lg text-left">
|
||||
<p className="text-sm font-mono text-red-600 break-all">
|
||||
{this.state.error.message}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
<h2 className="text-xl font-bold text-gray-900 mb-2">Something went wrong</h2>
|
||||
<p className="text-gray-600 mb-4">We're sorry for the inconvenience. Please try refreshing the page.</p>
|
||||
<button
|
||||
onClick={() => window.location.reload()}
|
||||
className="px-4 py-2 bg-emerald-600 text-white rounded-lg font-medium hover:bg-emerald-500 transition-colors"
|
||||
>
|
||||
Refresh Page
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -89,199 +55,4 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
|
||||
|
||||
return this.props.children;
|
||||
}
|
||||
}
|
||||
|
||||
// Loading skeleton component
|
||||
export function LoadingSkeleton({ className }: { className?: string }) {
|
||||
return (
|
||||
<div className={`animate-pulse bg-gray-200 rounded ${className}`} />
|
||||
);
|
||||
}
|
||||
|
||||
// Full page loading state
|
||||
export function LoadingPage() {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-50">
|
||||
<div className="text-center">
|
||||
<div className="w-12 h-12 border-4 border-primary border-t-transparent rounded-full animate-spin mx-auto mb-4" />
|
||||
<p className="text-gray-600">Loading...</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Loading spinner for buttons
|
||||
export function LoadingSpinner({ size = "md" }: { size?: "sm" | "md" | "lg" }) {
|
||||
const sizeClasses = {
|
||||
sm: "w-4 h-4",
|
||||
md: "w-6 h-6",
|
||||
lg: "w-8 h-8",
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`${sizeClasses[size]} border-2 border-current border-t-transparent rounded-full animate-spin`} />
|
||||
);
|
||||
}
|
||||
|
||||
// Async button wrapper with loading state
|
||||
interface AsyncButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
children: ReactNode;
|
||||
loading?: boolean;
|
||||
loadingText?: string;
|
||||
}
|
||||
|
||||
export function AsyncButton({
|
||||
children,
|
||||
loading,
|
||||
loadingText = "Loading...",
|
||||
disabled,
|
||||
...props
|
||||
}: AsyncButtonProps) {
|
||||
return (
|
||||
<button
|
||||
{...props}
|
||||
disabled={disabled || loading}
|
||||
className={`relative ${props.className || ""}`}
|
||||
>
|
||||
{loading && (
|
||||
<span className="absolute inset-0 flex items-center justify-center">
|
||||
<LoadingSpinner size="sm" />
|
||||
</span>
|
||||
)}
|
||||
<span className={loading ? "opacity-0" : ""}>
|
||||
{children}
|
||||
</span>
|
||||
{loading && loadingText && (
|
||||
<span className="sr-only">{loadingText}</span>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
// Optimistic update wrapper
|
||||
interface OptimisticState<T> {
|
||||
data: T | null;
|
||||
loading: boolean;
|
||||
error: Error | null;
|
||||
}
|
||||
|
||||
export function useOptimistic<T>(initialData: T | null = null) {
|
||||
const [state, setState] = React.useState<OptimisticState<T>>({
|
||||
data: initialData,
|
||||
loading: false,
|
||||
error: null,
|
||||
});
|
||||
|
||||
const optimisticUpdate = React.useCallback((updater: (prev: T | null) => T) => {
|
||||
setState(prev => ({
|
||||
...prev,
|
||||
data: updater(prev.data),
|
||||
}));
|
||||
}, []);
|
||||
|
||||
const setLoading = React.useCallback((loading: boolean) => {
|
||||
setState(prev => ({ ...prev, loading }));
|
||||
}, []);
|
||||
|
||||
const setError = React.useCallback((error: Error | null) => {
|
||||
setState(prev => ({ ...prev, error }));
|
||||
}, []);
|
||||
|
||||
const reset = React.useCallback(() => {
|
||||
setState({ data: initialData, loading: false, error: null });
|
||||
}, [initialData]);
|
||||
|
||||
return {
|
||||
...state,
|
||||
optimisticUpdate,
|
||||
setLoading,
|
||||
setError,
|
||||
reset,
|
||||
setData: (data: T) => setState(prev => ({ ...prev, data })),
|
||||
};
|
||||
}
|
||||
|
||||
// Toast notifications
|
||||
interface Toast {
|
||||
id: string;
|
||||
type: "success" | "error" | "info" | "warning";
|
||||
message: string;
|
||||
duration?: number;
|
||||
}
|
||||
|
||||
interface ToastContextType {
|
||||
toasts: Toast[];
|
||||
addToast: (toast: Omit<Toast, "id">) => void;
|
||||
removeToast: (id: string) => void;
|
||||
}
|
||||
|
||||
const ToastContext = React.createContext<ToastContextType | null>(null);
|
||||
|
||||
export function ToastProvider({ children }: { children: ReactNode }) {
|
||||
const [toasts, setToasts] = React.useState<Toast[]>([]);
|
||||
|
||||
const addToast = React.useCallback((toast: Omit<Toast, "id">) => {
|
||||
const id = Math.random().toString(36).substring(7);
|
||||
setToasts(prev => [...prev, { ...toast, id }]);
|
||||
|
||||
// Auto remove after duration
|
||||
setTimeout(() => {
|
||||
setToasts(prev => prev.filter(t => t.id !== id));
|
||||
}, toast.duration || 5000);
|
||||
}, []);
|
||||
|
||||
const removeToast = React.useCallback((id: string) => {
|
||||
setToasts(prev => prev.filter(t => t.id !== id));
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<ToastContext.Provider value={{ toasts, addToast, removeToast }}>
|
||||
{children}
|
||||
<ToastContainer toasts={toasts} onRemove={removeToast} />
|
||||
</ToastContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
function ToastContainer({
|
||||
toasts,
|
||||
onRemove
|
||||
}: {
|
||||
toasts: Toast[];
|
||||
onRemove: (id: string) => void
|
||||
}) {
|
||||
if (toasts.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed bottom-4 right-4 z-50 space-y-2">
|
||||
{toasts.map(toast => (
|
||||
<div
|
||||
key={toast.id}
|
||||
className={`flex items-center gap-3 p-4 rounded-lg shadow-lg animate-slide-in ${
|
||||
toast.type === "success" ? "bg-green-600" :
|
||||
toast.type === "error" ? "bg-red-600" :
|
||||
toast.type === "warning" ? "bg-yellow-600" :
|
||||
"bg-blue-600"
|
||||
} text-white`}
|
||||
>
|
||||
<span>{toast.message}</span>
|
||||
<button
|
||||
onClick={() => onRemove(toast.id)}
|
||||
className="p-1 hover:bg-white/20 rounded"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function useToast() {
|
||||
const context = React.useContext(ToastContext);
|
||||
if (!context) {
|
||||
throw new Error("useToast must be used within a ToastProvider");
|
||||
}
|
||||
return context;
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
// PWA Install Prompt Component
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
interface BeforeInstallPromptEvent extends Event {
|
||||
prompt(): Promise<void>;
|
||||
userChoice: Promise<{ outcome: "accepted" | "dismissed" }>;
|
||||
}
|
||||
|
||||
export default function PWAInstallPrompt() {
|
||||
const [deferredPrompt, setDeferredPrompt] = useState<BeforeInstallPromptEvent | null>(null);
|
||||
const [showPrompt, setShowPrompt] = useState(false);
|
||||
const [isInstalled, setIsInstalled] = useState(false);
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
|
||||
if (typeof window !== "undefined") {
|
||||
const isPWA = window.matchMedia("(display-mode: standalone)").matches;
|
||||
if (isPWA) {
|
||||
setIsInstalled(true);
|
||||
return;
|
||||
}
|
||||
|
||||
const handleBeforeInstall = (e: Event) => {
|
||||
e.preventDefault();
|
||||
setDeferredPrompt(e as BeforeInstallPromptEvent);
|
||||
setTimeout(() => setShowPrompt(true), 10000);
|
||||
};
|
||||
|
||||
const handleAppInstalled = () => {
|
||||
setIsInstalled(true);
|
||||
setShowPrompt(false);
|
||||
setDeferredPrompt(null);
|
||||
};
|
||||
|
||||
window.addEventListener("beforeinstallprompt", handleBeforeInstall);
|
||||
window.addEventListener("appinstalled", handleAppInstalled);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("beforeinstallprompt", handleBeforeInstall);
|
||||
window.removeEventListener("appinstalled", handleAppInstalled);
|
||||
};
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleInstall = async () => {
|
||||
if (!deferredPrompt) return;
|
||||
|
||||
await deferredPrompt.prompt();
|
||||
const { outcome } = await deferredPrompt.userChoice;
|
||||
|
||||
if (outcome === "accepted") {
|
||||
setShowPrompt(false);
|
||||
}
|
||||
setDeferredPrompt(null);
|
||||
};
|
||||
|
||||
const handleDismiss = () => {
|
||||
setShowPrompt(false);
|
||||
sessionStorage.setItem("pwa-install-dismissed", "true");
|
||||
};
|
||||
|
||||
if (!mounted || !showPrompt || isInstalled || !deferredPrompt) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fixed bottom-4 left-4 right-4 sm:left-auto sm:right-4 sm:w-80 bg-white rounded-2xl shadow-2xl border border-gray-200 p-4 z-50">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-12 h-12 bg-gradient-to-br from-emerald-600 to-emerald-500 rounded-xl flex items-center justify-center shrink-0">
|
||||
<svg className="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="font-semibold text-gray-900">Install Route Commerce</h3>
|
||||
<p className="text-sm text-gray-500 mt-1">Add to your home screen for quick access</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2 mt-4">
|
||||
<button
|
||||
onClick={handleDismiss}
|
||||
className="flex-1 px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700 transition-colors"
|
||||
>
|
||||
Not now
|
||||
</button>
|
||||
<button
|
||||
onClick={handleInstall}
|
||||
className="flex-1 px-4 py-2 bg-emerald-600 text-white rounded-lg text-sm font-medium hover:bg-emerald-500 transition-colors"
|
||||
>
|
||||
Install
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -14,22 +14,15 @@ interface ReferralCode {
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
interface ReferralStats {
|
||||
total_referrals: number;
|
||||
successful_conversions: number;
|
||||
total_reward_value: number;
|
||||
}
|
||||
|
||||
interface ReferralSystemProps {
|
||||
brandId: string;
|
||||
userId: string;
|
||||
userEmail: string;
|
||||
}
|
||||
|
||||
export function ReferralSystem({ brandId, userId, userEmail }: ReferralSystemProps) {
|
||||
export function ReferralSystem({ brandId, userId }: ReferralSystemProps) {
|
||||
const [isGenerating, setIsGenerating] = useState(false);
|
||||
const [shareModalOpen, setShareModalOpen] = useState(false);
|
||||
const [selectedCode, setSelectedCode] = useState<ReferralCode | null>(null);
|
||||
const [selectedCode] = useState<ReferralCode | null>(null);
|
||||
|
||||
const generateCode = async () => {
|
||||
setIsGenerating(true);
|
||||
|
||||
Reference in New Issue
Block a user