kofi-stack-template-generator 2.1.37 → 2.1.39

package/templates/marketing/payload/src/app/(frontend)/[slug]/page.tsx

@@ -0,0 +1,114 @@
+import type { Metadata } from "next"
+
+import { PayloadRedirects } from "@/components/PayloadRedirects"
+import { homeStatic } from "@/endpoints/seed/home-static"
+import configPromise from "@payload-config"
+import { draftMode } from "next/headers"
+import { type RequiredDataFromCollectionSlug, getPayload } from "payload"
+import { cache } from "react"
+
+import { RenderBlocks } from "@/blocks/RenderBlocks"
+import { LivePreviewListener } from "@/components/LivePreviewListener"
+import { RenderHero } from "@/heros/RenderHero"
+import { generateMeta } from "@/utilities/generateMeta"
+import PageClient from "./page.client"
+
+export async function generateStaticParams() {
+	const payload = await getPayload({ config: configPromise })
+	const pages = await payload.find({
+		collection: "pages",
+		draft: false,
+		limit: 1000,
+		overrideAccess: false,
+		pagination: false,
+		select: {
+			slug: true,
+		},
+	})
+
+	const params = pages.docs
+		?.filter((doc) => {
+			return doc.slug !== "home"
+		})
+		.map(({ slug }) => {
+			return { slug }
+		})
+
+	return params
+}
+
+type Args = {
+	params: Promise<{
+		slug?: string
+	}>
+}
+
+export default async function Page({ params: paramsPromise }: Args) {
+	const { isEnabled: draft } = await draftMode()
+	const { slug = "home" } = await paramsPromise
+	// Decode to support slugs with special characters
+	const decodedSlug = decodeURIComponent(slug)
+	const url = `/${decodedSlug}`
+	let page: RequiredDataFromCollectionSlug<"pages"> | null
+
+	page = await queryPageBySlug({
+		slug: decodedSlug,
+	})
+
+	// Remove this code once your website is seeded
+	if (!page && slug === "home") {
+		page = homeStatic
+	}
+
+	if (!page) {
+		return <PayloadRedirects url={url} />
+	}
+
+	const { hero, layout } = page
+
+	return (
+		<article className="pt-16 pb-24">
+			<PageClient />
+			{/* Allows redirects for valid pages too */}
+			<PayloadRedirects disableNotFound url={url} />
+
+			{draft && <LivePreviewListener />}
+
+			<RenderHero {...hero} />
+			<RenderBlocks blocks={layout} />
+		</article>
+	)
+}
+
+export async function generateMetadata({ params: paramsPromise }: Args): Promise<Metadata> {
+	const { slug = "home" } = await paramsPromise
+	// Decode to support slugs with special characters
+	const decodedSlug = decodeURIComponent(slug)
+	const page = await queryPageBySlug({
+		slug: decodedSlug,
+	})
+
+	return generateMeta({ doc: page })
+}
+
+const queryPageBySlug = cache(async ({ slug }: { slug: string }) => {
+	const { isEnabled: draft } = await draftMode()
+
+	const payload = await getPayload({ config: configPromise })
+
+	const result = await payload.find({
+		collection: "pages",
+		depth: 2, // Populate relationships in rich text content
+		draft,
+		limit: 1,
+		pagination: false,
+		overrideAccess: draft,
+		where: {
+			slug: {
+				equals: slug,
+			},
+		},
+	})
+
+	return result.docs?.[0] || null
+})

package/templates/marketing/payload/src/app/(frontend)/api/docs-search/route.ts

@@ -0,0 +1,67 @@
+import { getDocsFromConvex } from "@/lib/docs-source"
+import { NextResponse } from "next/server"
+
+/**
+ * Search API for documentation
+ * Returns matching docs based on query
+ */
+export async function GET(request: Request) {
+	const { searchParams } = new URL(request.url)
+	const query = searchParams.get("q")?.toLowerCase() || ""
+
+	if (!query || query.length < 2) {
+		return NextResponse.json({ results: [] })
+	}
+
+	try {
+		const docs = await getDocsFromConvex()
+
+		// Simple search implementation
+		const results = docs
+			.filter((doc) => {
+				const titleMatch = doc.title.toLowerCase().includes(query)
+				const descriptionMatch = doc.description?.toLowerCase().includes(query)
+				const contentMatch = doc.content.toLowerCase().includes(query)
+				return titleMatch || descriptionMatch || contentMatch
+			})
+			.map((doc) => ({
+				id: doc._id,
+				title: doc.title,
+				description: doc.description || "",
+				url: `/docs/${doc.slug}`,
+				// Extract a snippet from the content
+				snippet: extractSnippet(doc.content, query),
+			}))
+			.slice(0, 10) // Limit results
+
+		return NextResponse.json({ results })
+	} catch (error) {
+		console.error("Search error:", error)
+		return NextResponse.json({ results: [], error: "Search failed" }, { status: 500 })
+	}
+}
+
+/**
+ * Extract a snippet around the search query
+ */
+function extractSnippet(content: string, query: string): string {
+	const lowerContent = content.toLowerCase()
+	const index = lowerContent.indexOf(query)
+
+	if (index === -1) {
+		// Return first 150 chars if query not found in content
+		return `${content.slice(0, 150).trim()}...`
+	}
+
+	// Get 50 chars before and 100 chars after the match
+	const start = Math.max(0, index - 50)
+	const end = Math.min(content.length, index + query.length + 100)
+
+	let snippet = content.slice(start, end).trim()
+
+	// Add ellipsis if needed
+	if (start > 0) snippet = `...${snippet}`
+	if (end < content.length) snippet = `${snippet}...`
+
+	return snippet
+}

package/templates/marketing/payload/src/app/(frontend)/api/newsletter/route.ts

@@ -0,0 +1,260 @@
+import { NextResponse } from "next/server"
+
+const RESEND_API_URL = "https://api.resend.com"
+
+/**
+ * Email validation regex
+ */
+const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+
+/**
+ * Company address for CAN-SPAM compliance
+ */
+const COMPANY_ADDRESS = "KrumaLabs • 102 West Main Street #501, New Albany, OH 43054"
+
+/**
+ * DirectoryHub logo URL
+ */
+const LOGO_URL = "https://directoryhub.app/logo.png"
+
+/**
+ * Generate newsletter confirmation email HTML with logo and branding
+ */
+function renderNewsletterConfirmationEmail(unsubscribeUrl?: string): string {
+	const emailStyles = {
+		main: `
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+      line-height: 1.6;
+      color: #333;
+      background-color: #f5f5f5;
+      margin: 0;
+      padding: 20px;
+    `,
+		container: `
+      background-color: #ffffff;
+      border-radius: 8px;
+      margin: 0 auto;
+      padding: 0;
+      max-width: 600px;
+    `,
+		header: `
+      padding: 32px 32px 24px;
+      border-bottom: 1px solid #e5e5e5;
+    `,
+		logoText: `
+      color: #0070f3;
+      font-size: 24px;
+      font-weight: 600;
+      margin: 0;
+      padding: 0;
+      line-height: 1;
+    `,
+		heading: `
+      color: #111111;
+      font-size: 24px;
+      font-weight: 600;
+      line-height: 1.4;
+      margin: 0 0 24px;
+    `,
+		content: `
+      padding: 32px;
+    `,
+		paragraph: `
+      font-size: 16px;
+      color: #444444;
+      margin: 0 0 16px;
+      line-height: 1.6;
+    `,
+		paragraphSmall: `
+      font-size: 14px;
+      color: #666666;
+      margin: 0 0 16px;
+      line-height: 1.6;
+    `,
+		button: `
+      background-color: #0070f3;
+      color: white;
+      padding: 14px 32px;
+      text-decoration: none;
+      border-radius: 6px;
+      display: inline-block;
+      font-weight: 500;
+      font-size: 16px;
+    `,
+		footer: `
+      padding: 24px 32px;
+      text-align: center;
+    `,
+		footerText: `
+      color: #666666;
+      font-size: 14px;
+      line-height: 1.6;
+      margin: 0 0 8px;
+    `,
+		footerTextSmall: `
+      color: #999999;
+      font-size: 12px;
+      line-height: 1.6;
+      margin: 16px 0 0;
+    `,
+		footerAddress: `
+      color: #999999;
+      font-size: 11px;
+      line-height: 1.6;
+      margin: 8px 0 0;
+    `,
+		link: `
+      color: #0070f3;
+      text-decoration: underline;
+    `,
+	}
+
+	return `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+<body style="${emailStyles.main}">
+  <div style="${emailStyles.container}">
+    <!-- Header with Logo -->
+    <div style="${emailStyles.header}">
+      <a href="https://directoryhub.app" style="display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit;">
+        <img src="${LOGO_URL}" alt="DirectoryHub" width="32" height="32" style="display: block; width: 32px; height: 32px;">
+        <span style="${emailStyles.logoText}">DirectoryHub</span>
+      </a>
+    </div>
+    
+    <!-- Content -->
+    <div style="padding: 32px 32px 0;"><h1 style="${emailStyles.heading}">Welcome to the Newsletter!</h1></div>
+    <div style="${emailStyles.content}">
+      <p style="${emailStyles.paragraph}">
+        Thanks for subscribing to the DirectoryHub newsletter! 🎉
+      </p>
+      <p style="${emailStyles.paragraph}">
+        You'll now receive updates about:
+      </p>
+      <ul style="${emailStyles.paragraph}">
+        <li>New features and product updates</li>
+        <li>Tips for building better directories</li>
+        <li>Industry insights and best practices</li>
+        <li>Special announcements and offers</li>
+      </ul>
+      <p style="${emailStyles.paragraph}">
+        We respect your inbox and only send emails when we have something valuable to share.
+      </p>
+      <div style="margin: 32px 0; text-align: center;">
+        <a href="https://directoryhub.app" style="${emailStyles.button}">Visit DirectoryHub</a>
+      </div>
+      <p style="${emailStyles.paragraphSmall}">
+        If you didn't subscribe to this newsletter, you can safely ignore this email or
+        <a href="${unsubscribeUrl || "https://directoryhub.app/unsubscribe"}" style="${emailStyles.link}">unsubscribe here</a>.
+      </p>
+    </div>
+    
+    <!-- Divider -->
+    <hr style="border: none; border-top: 1px solid #e5e5e5; margin: 0 32px;">
+    
+    <!-- Footer -->
+    <div style="${emailStyles.footer}">
+      <p style="${emailStyles.footerText}">DirectoryHub - Build beautiful directory websites</p>
+      <p style="${emailStyles.footerText}">
+        <a href="https://directoryhub.app" style="${emailStyles.link}">Visit our website</a>
+        <span style="color: #999999;"> • </span>
+        <a href="https://directoryhub.app/support" style="${emailStyles.link}">Support</a>
+        ${unsubscribeUrl ? `<span style="color: #999999;"> • </span><a href="${unsubscribeUrl}" style="${emailStyles.link}">Unsubscribe</a>` : ""}
+      </p>
+      <p style="${emailStyles.footerTextSmall}">You're receiving this email because you signed up for the DirectoryHub newsletter.</p>
+      <p style="${emailStyles.footerAddress}">${COMPANY_ADDRESS}</p>
+    </div>
+  </div>
+</body>
+</html>`.trim()
+}
+
+export async function POST(request: Request) {
+	try {
+		const body = await request.json()
+		const { email } = body
+
+		if (!email) {
+			return NextResponse.json({ success: false, message: "Email is required." }, { status: 400 })
+		}
+
+		// Normalize and validate email
+		const normalizedEmail = email.toLowerCase().trim()
+		if (!EMAIL_REGEX.test(normalizedEmail)) {
+			return NextResponse.json(
+				{ success: false, message: "Please enter a valid email address." },
+				{ status: 400 },
+			)
+		}
+
+		const apiKey = process.env.RESEND_API_KEY
+		const audienceId = process.env.RESEND_AUDIENCE_NEWSLETTER
+		// Marketing emails use "Theo from DirectoryHub" as sender
+		const fromEmail = "Theo from DirectoryHub <theo@notifications.directoryhub.app>"
+
+		// In development without API key, just return success
+		if (!apiKey) {
+			console.warn("RESEND_API_KEY not set - newsletter signup simulated")
+			return NextResponse.json({
+				success: true,
+				message: "Thanks for subscribing! Check your inbox for a confirmation email.",
+			})
+		}
+
+		// Call Convex newsletter subscribe action via HTTP
+		// This ensures consistent handling and uses the proper addNewsletterSubscriber function
+		const convexUrl = process.env.NEXT_PUBLIC_CONVEX_URL || process.env.CONVEX_URL
+		if (!convexUrl) {
+			console.warn("CONVEX_URL not set - newsletter signup will fail")
+			return NextResponse.json(
+				{ success: false, message: "Server configuration error. Please try again later." },
+				{ status: 500 },
+			)
+		}
+
+		try {
+			const response = await fetch(`${convexUrl}/api/newsletter/subscribe`, {
+				method: "POST",
+				headers: {
+					"Content-Type": "application/json",
+				},
+				body: JSON.stringify({
+					email: normalizedEmail,
+				}),
+			})
+
+			const result = await response.json()
+
+			if (!result.success) {
+				return NextResponse.json(result, { status: response.status })
+			}
+
+			return NextResponse.json(result)
+		} catch (error) {
+			console.error("Newsletter subscription error:", error)
+			return NextResponse.json(
+				{ success: false, message: "Something went wrong. Please try again later." },
+				{ status: 500 },
+			)
+		}
+	} catch (error) {
+		console.error("Newsletter subscription error:", error)
+
+		// Check if it's a duplicate subscriber error
+		if (error instanceof Error && error.message.includes("already exists")) {
+			return NextResponse.json({
+				success: true,
+				message: "You're already subscribed to our newsletter!",
+			})
+		}
+
+		return NextResponse.json(
+			{ success: false, message: "Something went wrong. Please try again later." },
+			{ status: 500 },
+		)
+	}
+}

package/templates/marketing/payload/src/app/(frontend)/api/pricing/route.ts

@@ -0,0 +1,266 @@
+import { NextResponse } from "next/server"
+import Stripe from "stripe"
+
+/**
+ * Stripe Lookup Keys - defined in Stripe Dashboard for each price
+ * These must match the lookup keys configured in your Stripe Dashboard
+ */
+const STRIPE_LOOKUP_KEYS = {
+	free_monthly: "free_monthly",
+	free_annual: "free_annual",
+	pro_monthly: "pro_monthly",
+	pro_annual: "pro_annual",
+	business_monthly: "business_monthly",
+	business_annual: "business_annual",
+} as const
+
+/**
+ * Default product metadata when Stripe metadata is missing
+ */
+const DEFAULT_PRODUCT_INFO: Record<
+	string,
+	{ description: string; popular: boolean; order: number }
+> = {
+	free: { description: "Perfect for getting started", popular: false, order: 1 },
+	pro: { description: "For growing businesses", popular: false, order: 2 },
+	business: { description: "For teams and agencies", popular: true, order: 3 },
+}
+
+/**
+ * Feature type from Stripe Entitlements
+ */
+interface PlanFeature {
+	id: string
+	lookupKey: string
+	name: string
+	metadata?: Record<string, string>
+}
+
+/**
+ * All features type for comparison table
+ */
+interface AllFeature {
+	id: string
+	lookupKey: string
+	name: string
+	category?: string
+	metadata?: Record<string, string>
+}
+
+/**
+ * Plan pricing type with features from Stripe
+ */
+interface PlanPricing {
+	planId: string
+	stripeProductId: string
+	name: string
+	description: string
+	features: PlanFeature[]
+	monthlyPriceId?: string
+	monthlyAmount: number
+	annualPriceId?: string
+	annualAmount: number
+	annualDiscount: number
+	popular: boolean
+	order: number
+}
+
+/**
+ * Fetch pricing and features from Stripe and return formatted data
+ * GET /api/pricing
+ *
+ * Returns JSON with plan pricing and features for the marketing site
+ */
+export async function GET() {
+	try {
+		const stripeSecretKey = process.env.STRIPE_SECRET_KEY
+
+		if (!stripeSecretKey) {
+			return NextResponse.json(
+				{
+					plans: [],
+					allFeatures: [],
+					lastFetched: Date.now(),
+					error: "Stripe not configured",
+				},
+				{ status: 200 },
+			)
+		}
+
+		const stripe = new Stripe(stripeSecretKey)
+
+		// Fetch all features for comparison table
+		const allFeatures: AllFeature[] = []
+		try {
+			const featuresResponse = await stripe.entitlements.features.list({ limit: 100 })
+			for (const feature of featuresResponse.data) {
+				allFeatures.push({
+					id: feature.id,
+					lookupKey: feature.lookup_key,
+					name: feature.name,
+					category: feature.metadata?.category,
+					metadata: feature.metadata as Record<string, string> | undefined,
+				})
+			}
+		} catch (err) {
+			console.error("Error fetching Stripe features:", err)
+		}
+
+		// Fetch prices with product info
+		const priceMap = new Map<string, { id: string; amount: number; productId: string }>()
+
+		try {
+			const allLookupKeys = Object.values(STRIPE_LOOKUP_KEYS)
+			const prices = await stripe.prices.list({
+				lookup_keys: allLookupKeys,
+				active: true,
+				expand: ["data.product"],
+				limit: 20,
+			})
+
+			for (const price of prices.data) {
+				if (price.lookup_key && price.unit_amount !== null) {
+					const productId = typeof price.product === "string" ? price.product : price.product?.id
+					if (productId) {
+						priceMap.set(price.lookup_key, {
+							id: price.id,
+							amount: price.unit_amount,
+							productId,
+						})
+					}
+				}
+			}
+		} catch (stripeError) {
+			console.error("Error fetching Stripe prices:", stripeError)
+		}
+
+		// Group prices by product
+		const productPrices = new Map<
+			string,
+			{ monthly?: { id: string; amount: number }; annual?: { id: string; amount: number } }
+		>()
+
+		for (const [lookupKey, priceData] of priceMap.entries()) {
+			const isAnnual = lookupKey.endsWith("_annual")
+			const existingPrices = productPrices.get(priceData.productId) || {}
+
+			if (isAnnual) {
+				existingPrices.annual = { id: priceData.id, amount: priceData.amount }
+			} else {
+				existingPrices.monthly = { id: priceData.id, amount: priceData.amount }
+			}
+
+			productPrices.set(priceData.productId, existingPrices)
+		}
+
+		// Build plans from products
+		const plans: PlanPricing[] = []
+
+		for (const [productId, prices] of productPrices.entries()) {
+			// Fetch product details
+			let product: Stripe.Product | null = null
+			try {
+				const fetched = await stripe.products.retrieve(productId)
+				if (!fetched.deleted) {
+					product = fetched
+				}
+			} catch (err) {
+				console.error(`Error fetching product ${productId}:`, err)
+				continue
+			}
+
+			if (!product) continue
+
+			// Get plan ID from product metadata
+			const planId = product.metadata?.plan_id
+			if (!planId) {
+				console.warn(`Product ${productId} missing plan_id metadata, skipping`)
+				continue
+			}
+
+			// Fetch features for this product
+			const features: PlanFeature[] = []
+			try {
+				const productFeatures = await stripe.products.listFeatures(productId, {
+					limit: 100,
+				})
+				for (const pf of productFeatures.data) {
+					features.push({
+						id: pf.entitlement_feature.id,
+						lookupKey: pf.entitlement_feature.lookup_key,
+						name: pf.entitlement_feature.name,
+						metadata: pf.entitlement_feature.metadata as Record<string, string> | undefined,
+					})
+				}
+			} catch (err) {
+				console.error(`Error fetching features for product ${productId}:`, err)
+			}
+
+			// Get metadata or use defaults
+			const defaultInfo = DEFAULT_PRODUCT_INFO[planId] || {
+				description: "",
+				popular: false,
+				order: 99,
+			}
+			const description =
+				product.metadata?.description || product.description || defaultInfo.description
+			const popular = product.metadata?.popular === "true" || defaultInfo.popular
+			const order = Number.parseInt(product.metadata?.order || String(defaultInfo.order), 10)
+
+			const monthlyAmount = prices.monthly?.amount ?? 0
+			const annualAmount = prices.annual?.amount ?? 0
+
+			// Calculate annual discount
+			const yearlyMonthlyEquivalent = monthlyAmount * 12
+			const annualDiscount =
+				yearlyMonthlyEquivalent > 0
+					? Math.round(((yearlyMonthlyEquivalent - annualAmount) / yearlyMonthlyEquivalent) * 100)
+					: 0
+
+			plans.push({
+				planId,
+				stripeProductId: productId,
+				name: product.name,
+				description,
+				features,
+				monthlyPriceId: prices.monthly?.id,
+				monthlyAmount,
+				annualPriceId: prices.annual?.id,
+				annualAmount,
+				annualDiscount: Math.max(0, annualDiscount),
+				popular,
+				order,
+			})
+		}
+
+		// Sort plans by order
+		plans.sort((a, b) => a.order - b.order)
+
+		return NextResponse.json(
+			{
+				plans,
+				allFeatures,
+				lastFetched: Date.now(),
+			},
+			{
+				status: 200,
+				headers: {
+					// Cache for 1 hour on CDN, revalidate in background
+					"Cache-Control": "public, s-maxage=3600, stale-while-revalidate=7200",
+				},
+			},
+		)
+	} catch (error) {
+		console.error("Pricing API error:", error)
+
+		return NextResponse.json(
+			{
+				plans: [],
+				allFeatures: [],
+				lastFetched: Date.now(),
+				error: "Failed to fetch pricing",
+			},
+			{ status: 200 },
+		)
+	}
+}