diff --git a/src/app/store/[slug]/actions/subscribe/route.ts b/src/app/store/[slug]/actions/subscribe/route.ts new file mode 100644 index 00000000..629549bf --- /dev/null +++ b/src/app/store/[slug]/actions/subscribe/route.ts @@ -0,0 +1,86 @@ +/** + * Newsletter Subscription API Route + * + * Handles newsletter subscription requests + * Future integration point for email service (Resend) + */ + +import { NextRequest, NextResponse } from "next/server"; +import { headers } from "next/headers"; +import prisma from "@/lib/prisma"; + +/** + * POST /store/[slug]/actions/subscribe + * Subscribe to newsletter + */ +export async function POST( + request: NextRequest, + { params }: { params: Promise<{ slug: string }> } +) { + try { + const { slug } = await params; + const body = await request.json(); + const { email } = body; + + // Validate email + if (!email || typeof email !== 'string') { + return NextResponse.json( + { error: 'Email is required' }, + { status: 400 } + ); + } + + // Simple email validation + const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + if (!emailRegex.test(email)) { + return NextResponse.json( + { error: 'Invalid email address' }, + { status: 400 } + ); + } + + // Get store from headers or slug + const headersList = await headers(); + const storeId = headersList.get("x-store-id"); + + const store = await prisma.store.findFirst({ + where: storeId + ? { id: storeId, deletedAt: null } + : { slug, deletedAt: null }, + select: { id: true, name: true }, + }); + + if (!store) { + return NextResponse.json( + { error: 'Store not found' }, + { status: 404 } + ); + } + + // TODO: Future implementation + // 1. Check if email already subscribed + // 2. Store subscription in database (create NewsletterSubscription model) + // 3. Send confirmation email via Resend + // 4. Handle double opt-in confirmation + + // For now, just log and return success + console.log(`Newsletter subscription for ${store.name}: ${email}`); + + // Simulate async operation + await new Promise(resolve => setTimeout(resolve, 500)); + + return NextResponse.json( + { + success: true, + message: 'Successfully subscribed to newsletter' + }, + { status: 200 } + ); + } catch (error) { + console.error('Newsletter subscription error:', error); + return NextResponse.json( + { error: 'Failed to process subscription' }, + { status: 500 } + ); + } +} diff --git a/src/app/store/[slug]/components/homepage/categories-section.tsx b/src/app/store/[slug]/components/homepage/categories-section.tsx new file mode 100644 index 00000000..81b3e1cd --- /dev/null +++ b/src/app/store/[slug]/components/homepage/categories-section.tsx @@ -0,0 +1,105 @@ +import Link from "next/link"; +import Image from "next/image"; +import { Button } from "@/components/ui/button"; +import { ArrowRight } from "lucide-react"; +import { cn } from "@/lib/utils"; +import type { CategoriesConfig } from "@/types/storefront-config"; +import type { Category, StoreInfo } from "./types"; + +interface CategoriesSectionProps { + store: StoreInfo; + categories: Category[]; + config: CategoriesConfig; +} + +/** + * Categories Grid Section + * Displays product categories with configurable columns and product counts + * Supports 2, 3, or 4 column layouts + */ +export function CategoriesSection({ + store, + categories, + config +}: CategoriesSectionProps) { + if (!config.enabled || categories.length === 0) { + return null; + } + + // Limit categories based on config + const displayCategories = categories.slice(0, config.maxCount); + + // Grid column classes based on config + const gridClasses = cn( + "grid gap-4 sm:gap-6", + { + "grid-cols-2": config.columns === 2, + "grid-cols-2 sm:grid-cols-3": config.columns === 3, + "grid-cols-2 sm:grid-cols-3 md:grid-cols-4": config.columns === 4, + } + ); + + return ( +
+ {/* Section Header */} +
+
+

Shop by Category

+

+ Explore our curated collections +

+
+ +
+ + {/* Categories Grid */} +
+ {displayCategories.map((category) => ( + + {/* Category Image */} + {category.image ? ( +
+ {category.name} +
+ ) : ( +
+ 📦 +
+ )} + + {/* Gradient Overlay */} +
+ + {/* Category Info */} +
+

+ {category.name} +

+ {config.showProductCount && ( +

+ {category._count.products} {category._count.products === 1 ? 'product' : 'products'} +

+ )} +
+ + ))} +
+
+ ); +} diff --git a/src/app/store/[slug]/components/homepage/featured-section.tsx b/src/app/store/[slug]/components/homepage/featured-section.tsx new file mode 100644 index 00000000..76999754 --- /dev/null +++ b/src/app/store/[slug]/components/homepage/featured-section.tsx @@ -0,0 +1,74 @@ +import Link from "next/link"; +import { Button } from "@/components/ui/button"; +import { ArrowRight } from "lucide-react"; +import { ProductGrid } from "../product-grid"; +import type { FeaturedProductsConfig } from "@/types/storefront-config"; +import type { Product, StoreInfo } from "./types"; + +interface FeaturedSectionProps { + store: StoreInfo; + products: Product[]; + config: FeaturedProductsConfig; +} + +/** + * Featured Products Section + * Displays featured products with configurable count and headings + * Includes empty state when no products are available + */ +export function FeaturedSection({ + store, + products, + config +}: FeaturedSectionProps) { + if (!config.enabled) { + return null; + } + + // Limit products based on config + const displayProducts = products.slice(0, config.count); + + return ( +
+ {/* Section Header */} +
+
+

{config.heading}

+ {config.subheading && ( +

+ {config.subheading} +

+ )} +
+ +
+ + {/* Products or Empty State */} + {displayProducts.length === 0 ? ( +
+
🛍️
+

No Featured Products Yet

+

+ Check back soon for amazing deals! +

+ +
+ ) : ( + + )} +
+ ); +} diff --git a/src/app/store/[slug]/components/homepage/hero-section.tsx b/src/app/store/[slug]/components/homepage/hero-section.tsx new file mode 100644 index 00000000..5ecc2c50 --- /dev/null +++ b/src/app/store/[slug]/components/homepage/hero-section.tsx @@ -0,0 +1,126 @@ +import Link from "next/link"; +import { Button } from "@/components/ui/button"; +import { Badge } from "@/components/ui/badge"; +import { ShoppingBag, ArrowRight } from "lucide-react"; +import { cn } from "@/lib/utils"; +import type { HeroConfig } from "@/types/storefront-config"; +import type { StoreInfo } from "./types"; + +interface HeroSectionProps { + store: StoreInfo; + config: HeroConfig; +} + +/** + * Hero Section Component + * Supports multiple styles: gradient, image, minimal + * Configurable headline, subheadline, and CTA buttons + */ +export function HeroSection({ store, config }: HeroSectionProps) { + const { + style = 'gradient', + headline, + subheadline, + primaryCta, + secondaryCta, + backgroundImage, + } = config; + + // Base styles + const baseClasses = "relative overflow-hidden"; + + // Style-specific classes + const styleClasses = { + gradient: "bg-linear-to-br from-blue-50 via-indigo-50 to-purple-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900", + image: "bg-cover bg-center bg-no-repeat", + minimal: "bg-background", + }; + + return ( +
+ {/* Grid pattern overlay for gradient style */} + {style === 'gradient' && ( +
+ )} + + {/* Dark overlay for image style */} + {style === 'image' && ( +
+ )} + +
+
+ {/* Store Badge */} + + Welcome to {store.name} + + + {/* Headline */} +

+ {headline || ( + <> + Discover Amazing + + {" "}Products{" "} + + Today + + )} +

+ + {/* Subheadline */} + {subheadline && ( +

+ {subheadline} +

+ )} + + {/* CTA Buttons */} +
+ {primaryCta && ( + + )} + + {secondaryCta && ( + + )} +
+
+
+
+ ); +} diff --git a/src/app/store/[slug]/components/homepage/newsletter-section.tsx b/src/app/store/[slug]/components/homepage/newsletter-section.tsx new file mode 100644 index 00000000..92c6748d --- /dev/null +++ b/src/app/store/[slug]/components/homepage/newsletter-section.tsx @@ -0,0 +1,157 @@ +"use client"; + +import { useState } from "react"; +import { Button } from "@/components/ui/button"; +import { Input } from "@/components/ui/input"; +import { Mail } from "lucide-react"; +import { cn } from "@/lib/utils"; +import type { NewsletterConfig } from "@/types/storefront-config"; + +interface NewsletterSectionProps { + storeSlug: string; + config: NewsletterConfig; +} + +type FormState = 'idle' | 'loading' | 'success' | 'error'; + +/** + * Newsletter Subscription Section + * Client component with form validation and async submission + * Shows success/error states with proper feedback + */ +export function NewsletterSection({ storeSlug, config }: NewsletterSectionProps) { + const [email, setEmail] = useState(""); + const [state, setState] = useState('idle'); + const [errorMessage, setErrorMessage] = useState(""); + + if (!config.enabled) { + return null; + } + + // Email validation + const isValidEmail = (email: string): boolean => { + const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + return emailRegex.test(email); + }; + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + + // Reset error + setErrorMessage(""); + + // Validate email + if (!email.trim()) { + setErrorMessage("Please enter your email address"); + return; + } + + if (!isValidEmail(email)) { + setErrorMessage("Please enter a valid email address"); + return; + } + + // Set loading state + setState('loading'); + + try { + // Call server action + const response = await fetch(`/store/${storeSlug}/actions/subscribe`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ email }), + }); + + const data = await response.json(); + + if (!response.ok) { + throw new Error(data.error || 'Failed to subscribe'); + } + + // Success + setState('success'); + setEmail(""); + + // Reset after 5 seconds + setTimeout(() => { + setState('idle'); + }, 5000); + } catch (error) { + setState('error'); + setErrorMessage(error instanceof Error ? error.message : 'Something went wrong'); + + // Reset error state after 5 seconds + setTimeout(() => { + setState('idle'); + setErrorMessage(""); + }, 5000); + } + }; + + return ( +
+
+
+ {/* Icon */} +
+ +
+ + {/* Headline */} +

{config.headline}

+ + {/* Description */} +

+ {config.description} +

+ + {/* Form */} +
+ setEmail(e.target.value)} + disabled={state === 'loading' || state === 'success'} + className={cn( + "flex-1 h-12 text-base", + state === 'error' && "border-destructive focus-visible:ring-destructive" + )} + aria-label="Email address" + /> + +
+ + {/* Feedback Messages */} + {state === 'success' && ( +

+ ✓ Thank you for subscribing! Check your email for confirmation. +

+ )} + + {state === 'error' && errorMessage && ( +

+ ✗ {errorMessage} +

+ )} + + {/* Privacy Text */} + {config.privacyText && ( +

+ {config.privacyText} +

+ )} +
+
+
+ ); +} diff --git a/src/app/store/[slug]/components/homepage/trust-badges.tsx b/src/app/store/[slug]/components/homepage/trust-badges.tsx new file mode 100644 index 00000000..7560f19f --- /dev/null +++ b/src/app/store/[slug]/components/homepage/trust-badges.tsx @@ -0,0 +1,47 @@ +import { TruckIcon, Shield, Star, Package, CreditCard, Headphones } from "lucide-react"; +import type { TrustBadgesConfig } from "@/types/storefront-config"; + +interface TrustBadgesProps { + config: TrustBadgesConfig; +} + +/** + * Trust Badges Section + * Displays trust indicators like free shipping, secure payment, etc. + * Configurable badges with icons, titles, and descriptions + */ +export function TrustBadges({ config }: TrustBadgesProps) { + if (!config.enabled || config.badges.length === 0) { + return null; + } + + // Map icon names to Lucide icons + const iconMap: Record> = { + truck: TruckIcon, + shield: Shield, + star: Star, + package: Package, + 'credit-card': CreditCard, + headphones: Headphones, + }; + + return ( +
+
+
+ {config.badges.map((badge, index) => { + const Icon = iconMap[badge.icon] || Package; + + return ( +
+ +

{badge.title}

+

{badge.description}

+
+ ); + })} +
+
+
+ ); +} diff --git a/src/app/store/[slug]/components/homepage/types.ts b/src/app/store/[slug]/components/homepage/types.ts new file mode 100644 index 00000000..f7a6ab41 --- /dev/null +++ b/src/app/store/[slug]/components/homepage/types.ts @@ -0,0 +1,37 @@ +/** + * Shared types for homepage components + * Used across hero, categories, featured, and newsletter sections + */ + +export interface StoreInfo { + id: string; + name: string; + slug: string; + description?: string | null; +} + +export interface Category { + id: string; + name: string; + slug: string; + image?: string | null; + description?: string | null; + _count: { + products: number; + }; +} + +export interface Product { + id: string; + name: string; + slug: string; + price: number; + compareAtPrice?: number | null; + thumbnailUrl?: string | null; + images: string; + isFeatured?: boolean; + category?: { + name: string; + slug: string; + } | null; +} diff --git a/src/app/store/[slug]/page.tsx b/src/app/store/[slug]/page.tsx index af1e466c..8247c153 100644 --- a/src/app/store/[slug]/page.tsx +++ b/src/app/store/[slug]/page.tsx @@ -1,20 +1,21 @@ import { headers } from "next/headers"; import prisma from "@/lib/prisma"; -import Link from "next/link"; -import Image from "next/image"; import { notFound } from "next/navigation"; -import { Button } from "@/components/ui/button"; -import { Badge } from "@/components/ui/badge"; -import { ProductGrid } from "./components/product-grid"; -import { ArrowRight, ShoppingBag, Star, TruckIcon, Shield } from "lucide-react"; +import { getDefaultStorefrontConfig } from "@/lib/storefront/get-default-config"; +import { HeroSection } from "./components/homepage/hero-section"; +import { TrustBadges } from "./components/homepage/trust-badges"; +import { CategoriesSection } from "./components/homepage/categories-section"; +import { FeaturedSection } from "./components/homepage/featured-section"; +import { NewsletterSection } from "./components/homepage/newsletter-section"; interface StoreHomePageProps { params: Promise<{ slug: string }>; } /** - * Modern store homepage with hero, categories, and featured products - * Responsive design with gradient backgrounds and trust badges + * Refactored Store Homepage + * Modular design with tenant-configurable sections + * Sections: Hero, Trust Badges, Categories, Featured Products, Newsletter */ export default async function StoreHomePage({ params }: StoreHomePageProps) { const { slug } = await params; @@ -23,7 +24,7 @@ export default async function StoreHomePage({ params }: StoreHomePageProps) { const headersList = await headers(); const storeId = headersList.get("x-store-id"); - // Get store and featured products + // Get store data const store = await prisma.store.findFirst({ where: storeId ? { id: storeId, deletedAt: null } @@ -40,7 +41,11 @@ export default async function StoreHomePage({ params }: StoreHomePageProps) { notFound(); } - // Fetch featured products + // Get storefront configuration (using defaults for now) + // TODO: In the future, fetch custom config from database per store + const config = getDefaultStorefrontConfig(store); + + // Fetch featured products based on config const featuredProducts = await prisma.product.findMany({ where: { storeId: store.id, @@ -48,7 +53,7 @@ export default async function StoreHomePage({ params }: StoreHomePageProps) { status: "ACTIVE", deletedAt: null, }, - take: 12, + take: config.homepage.featuredProducts.count, orderBy: { createdAt: "desc" }, select: { id: true, @@ -68,7 +73,7 @@ export default async function StoreHomePage({ params }: StoreHomePageProps) { }, }); - // Fetch categories for navigation + // Fetch categories based on config const categories = await prisma.category.findMany({ where: { storeId: store.id, @@ -76,7 +81,7 @@ export default async function StoreHomePage({ params }: StoreHomePageProps) { deletedAt: null, parentId: null, // Top-level categories only }, - take: 8, + take: config.homepage.categories.maxCount, orderBy: { sortOrder: "asc" }, select: { id: true, @@ -100,163 +105,30 @@ export default async function StoreHomePage({ params }: StoreHomePageProps) { return (
{/* Hero Section */} -
-
-
-
- - Welcome to {store.name} - - -

- Discover Amazing - - {" "}Products{" "} - - Today -

- - {store.description && ( -

- {store.description} -

- )} - -
- - -
-
-
-
+ {/* Trust Badges */} -
-
-
-
- -

Free Shipping

-

On orders over $50

-
-
- -

Secure Payment

-

100% secure transactions

-
-
- -

Quality Guarantee

-

Verified products only

-
-
-
-
+ {/* Categories Section */} - {categories.length > 0 && ( -
-
-
-

Shop by Category

-

- Explore our curated collections -

-
- -
- -
- {categories.map((category) => ( - - {category.image ? ( -
- {category.name} -
- ) : ( -
- 📦 -
- )} -
-
-

- {category.name} -

-

- {category._count.products} {category._count.products === 1 ? 'product' : 'products'} -

-
- - ))} -
-
- )} + {/* Featured Products Section */} -
-
-
-

Featured Products

-

- Hand-picked favorites just for you -

-
- -
+ - {featuredProducts.length === 0 ? ( -
-
🛍️
-

No Featured Products Yet

-

- Check back soon for amazing deals! -

- -
- ) : ( - - )} -
+ {/* Newsletter Section */} +
); } diff --git a/src/lib/storefront/get-default-config.ts b/src/lib/storefront/get-default-config.ts new file mode 100644 index 00000000..a36b7c85 --- /dev/null +++ b/src/lib/storefront/get-default-config.ts @@ -0,0 +1,77 @@ +/** + * Default Storefront Configuration Generator + * + * Provides sensible defaults for stores without custom configuration + * Uses store name and description dynamically + */ + +import type { StorefrontConfig } from "@/types/storefront-config"; + +interface StoreData { + name: string; + slug: string; + description?: string | null; +} + +/** + * Generate default storefront configuration for a store + * @param store - Store data including name and description + * @returns Complete storefront configuration with defaults + */ +export function getDefaultStorefrontConfig(store: StoreData): StorefrontConfig { + return { + homepage: { + hero: { + style: 'gradient', + headline: `Discover Amazing Products Today`, + subheadline: store.description || `Welcome to ${store.name}`, + primaryCta: { + text: 'Shop All Products', + href: `/store/${store.slug}/products`, + }, + secondaryCta: { + text: 'Browse Categories', + href: `/store/${store.slug}/categories`, + }, + }, + categories: { + enabled: true, + maxCount: 8, + columns: 4, + showProductCount: true, + }, + featuredProducts: { + enabled: true, + count: 12, + heading: 'Featured Products', + subheading: 'Hand-picked favorites just for you', + }, + newsletter: { + enabled: true, + headline: 'Stay Updated', + description: 'Subscribe to our newsletter for exclusive offers, new arrivals, and updates.', + privacyText: 'We respect your privacy. Unsubscribe at any time.', + }, + trustBadges: { + enabled: true, + badges: [ + { + icon: 'truck', + title: 'Free Shipping', + description: 'On orders over $50', + }, + { + icon: 'shield', + title: 'Secure Payment', + description: '100% secure transactions', + }, + { + icon: 'star', + title: 'Quality Guarantee', + description: 'Verified products only', + }, + ], + }, + }, + }; +} diff --git a/src/types/storefront-config.ts b/src/types/storefront-config.ts new file mode 100644 index 00000000..2753a537 --- /dev/null +++ b/src/types/storefront-config.ts @@ -0,0 +1,69 @@ +/** + * Storefront Configuration Types + * + * Defines the structure for tenant-configurable storefront layouts + * Allows each store/tenant to customize hero, categories, products, newsletter sections + */ + +export type HeroStyle = 'gradient' | 'image' | 'minimal'; +export type GridColumns = 2 | 3 | 4; +export type ProductCount = 8 | 12 | 16; + +export interface HeroConfig { + style: HeroStyle; + headline?: string; + subheadline?: string; + primaryCta?: { + text: string; + href: string; + }; + secondaryCta?: { + text: string; + href: string; + }; + backgroundImage?: string; +} + +export interface CategoriesConfig { + enabled: boolean; + maxCount: number; + columns: GridColumns; + showProductCount: boolean; +} + +export interface FeaturedProductsConfig { + enabled: boolean; + count: ProductCount; + heading: string; + subheading?: string; +} + +export interface NewsletterConfig { + enabled: boolean; + headline: string; + description: string; + privacyText?: string; +} + +export interface TrustBadge { + icon: string; + title: string; + description: string; +} + +export interface TrustBadgesConfig { + enabled: boolean; + badges: TrustBadge[]; +} + +export interface HomepageConfig { + hero: HeroConfig; + categories: CategoriesConfig; + featuredProducts: FeaturedProductsConfig; + newsletter: NewsletterConfig; + trustBadges: TrustBadgesConfig; +} + +export interface StorefrontConfig { + homepage: HomepageConfig; +}