407 lines
16 KiB
TypeScript
407 lines
16 KiB
TypeScript
import Link from "next/link"
|
|
import { Button } from "@/components/ui/button"
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import {
|
|
CheckCircle,
|
|
XCircle,
|
|
AlertCircle,
|
|
ExternalLink,
|
|
Package,
|
|
ShoppingCart,
|
|
CreditCard,
|
|
Settings,
|
|
Zap,
|
|
} from "lucide-react"
|
|
|
|
export default async function StripeSetupPage() {
|
|
// Test Stripe connectivity
|
|
const testResponse = await fetch("http://localhost:3000/api/stripe/test", {
|
|
method: "POST",
|
|
cache: "no-store",
|
|
})
|
|
|
|
const testResult = testResponse.ok ? await testResponse.json() : null
|
|
const stripeWorking = testResult?.success
|
|
|
|
return (
|
|
<div className="container mx-auto px-4 py-8">
|
|
<div className="space-y-8">
|
|
{/* Header */}
|
|
<div className="text-center space-y-4">
|
|
<div className="flex items-center justify-center gap-2">
|
|
<Zap className="h-8 w-8 text-blue-600" />
|
|
<h1 className="text-4xl font-bold tracking-tight">
|
|
Stripe Integration Setup
|
|
</h1>
|
|
</div>
|
|
<p className="text-xl text-muted-foreground max-w-2xl mx-auto">
|
|
Everything is ready for your Stripe products. Complete the setup
|
|
below to activate your e-commerce functionality.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Status Overview */}
|
|
<Card
|
|
className={
|
|
stripeWorking
|
|
? "border-green-200 bg-green-50"
|
|
: "border-red-200 bg-red-50"
|
|
}
|
|
>
|
|
<CardContent className="pt-6">
|
|
<div className="flex items-center gap-3">
|
|
{stripeWorking ? (
|
|
<>
|
|
<CheckCircle className="h-8 w-8 text-green-600" />
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-green-800">
|
|
Stripe Integration Active
|
|
</h3>
|
|
<p className="text-green-700">
|
|
Your Stripe account is connected and ready for products.
|
|
</p>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<>
|
|
<XCircle className="h-8 w-8 text-red-600" />
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-red-800">
|
|
Setup Required
|
|
</h3>
|
|
<p className="text-red-700">
|
|
Complete the steps below to activate Stripe integration.
|
|
</p>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Quick Actions */}
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<Link href="https://dashboard.stripe.com/products/new">
|
|
<Card className="h-full hover:shadow-lg transition-shadow cursor-pointer">
|
|
<CardContent className="p-6 flex flex-col items-center text-center">
|
|
<Package className="h-12 w-12 text-blue-600 mb-4" />
|
|
<h3 className="font-semibold mb-2">Add Products</h3>
|
|
<p className="text-sm text-muted-foreground mb-4">
|
|
Create your first product in Stripe Dashboard
|
|
</p>
|
|
<Button className="w-full">
|
|
<ExternalLink className="h-4 w-4 mr-2" />
|
|
Go to Stripe
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</Link>
|
|
|
|
<Link href="/products">
|
|
<Card className="h-full hover:shadow-lg transition-shadow cursor-pointer">
|
|
<CardContent className="p-6 flex flex-col items-center text-center">
|
|
<ShoppingCart className="h-12 w-12 text-green-600 mb-4" />
|
|
<h3 className="font-semibold mb-2">Test Store</h3>
|
|
<p className="text-sm text-muted-foreground mb-4">
|
|
Browse your products and test checkout
|
|
</p>
|
|
<Button variant="outline" className="w-full">
|
|
View Store
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</Link>
|
|
|
|
<Link href="/admin">
|
|
<Card className="h-full hover:shadow-lg transition-shadow cursor-pointer">
|
|
<CardContent className="p-6 flex flex-col items-center text-center">
|
|
<Settings className="h-12 w-12 text-purple-600 mb-4" />
|
|
<h3 className="font-semibold mb-2">Admin Panel</h3>
|
|
<p className="text-sm text-muted-foreground mb-4">
|
|
Manage orders and view analytics
|
|
</p>
|
|
<Button variant="outline" className="w-full">
|
|
Admin Dashboard
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Setup Checklist */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Settings className="h-5 w-5" />
|
|
Setup Checklist
|
|
</CardTitle>
|
|
<CardDescription>
|
|
Complete these steps to activate your e-commerce store
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
{/* Step 1: Products */}
|
|
<div className="flex items-start gap-3 p-4 border rounded-lg">
|
|
<div className="flex-shrink-0 w-6 h-6 rounded-full bg-blue-600 text-white flex items-center justify-center text-sm font-medium">
|
|
1
|
|
</div>
|
|
<div className="flex-1">
|
|
<h3 className="font-medium">Add Products to Stripe</h3>
|
|
<p className="text-sm text-muted-foreground mt-1">
|
|
Create your vending machine products with prices in Stripe
|
|
Dashboard
|
|
</p>
|
|
<div className="flex items-center gap-2 mt-2">
|
|
{testResult?.products?.total ? (
|
|
<Badge variant="default">
|
|
{testResult.products.total} products
|
|
</Badge>
|
|
) : (
|
|
<Badge variant="secondary">No products yet</Badge>
|
|
)}
|
|
<Link href="https://dashboard.stripe.com/products/new">
|
|
<Button size="sm" variant="outline">
|
|
<ExternalLink className="h-3 w-3 mr-1" />
|
|
Add Products
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Step 2: Payment Methods */}
|
|
<div className="flex items-start gap-3 p-4 border rounded-lg">
|
|
<div className="flex-shrink-0 w-6 h-6 rounded-full bg-blue-600 text-white flex items-center justify-center text-sm font-medium">
|
|
2
|
|
</div>
|
|
<div className="flex-1">
|
|
<h3 className="font-medium">Enable Payment Methods</h3>
|
|
<p className="text-sm text-muted-foreground mt-1">
|
|
Ensure customers can pay with credit cards, Apple Pay, Google
|
|
Pay, etc.
|
|
</p>
|
|
<div className="flex items-center gap-2 mt-2">
|
|
{stripeWorking && testResult?.paymentMethods ? (
|
|
<Badge variant="default">
|
|
{testResult.paymentMethods.total} methods
|
|
</Badge>
|
|
) : (
|
|
<Badge variant="secondary">Check Stripe Dashboard</Badge>
|
|
)}
|
|
{stripeWorking ? (
|
|
<Badge variant="outline" className="text-green-600">
|
|
<CheckCircle className="h-3 w-3 mr-1" />
|
|
Ready
|
|
</Badge>
|
|
) : (
|
|
<Badge variant="outline" className="text-yellow-600">
|
|
<AlertCircle className="h-3 w-3 mr-1" />
|
|
Configure
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Step 3: Webhook */}
|
|
<div className="flex items-start gap-3 p-4 border rounded-lg">
|
|
<div className="flex-shrink-0 w-6 h-6 rounded-full bg-blue-600 text-white flex items-center justify-center text-sm font-medium">
|
|
3
|
|
</div>
|
|
<div className="flex-1">
|
|
<h3 className="font-medium">Webhook Configuration</h3>
|
|
<p className="text-sm text-muted-foreground mt-1">
|
|
Webhooks are already configured to handle order completion and
|
|
payments
|
|
</p>
|
|
<div className="flex items-center gap-2 mt-2">
|
|
{process.env.STRIPE_WEBHOOK_SECRET ? (
|
|
<Badge variant="outline" className="text-green-600">
|
|
<CheckCircle className="h-3 w-3 mr-1" />
|
|
Configured
|
|
</Badge>
|
|
) : (
|
|
<Badge variant="outline" className="text-red-600">
|
|
<XCircle className="h-3 w-3 mr-1" />
|
|
Missing
|
|
</Badge>
|
|
)}
|
|
<Link href="https://dashboard.stripe.com/webhooks">
|
|
<Button size="sm" variant="outline">
|
|
<ExternalLink className="h-3 w-3 mr-1" />
|
|
Manage Webhooks
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Step 4: Test */}
|
|
<div className="flex items-start gap-3 p-4 border rounded-lg">
|
|
<div className="flex-shrink-0 w-6 h-6 rounded-full bg-blue-600 text-white flex items-center justify-center text-sm font-medium">
|
|
4
|
|
</div>
|
|
<div className="flex-1">
|
|
<h3 className="font-medium">Test Your Store</h3>
|
|
<p className="text-sm text-muted-foreground mt-1">
|
|
Add products to cart and test the checkout process
|
|
</p>
|
|
<div className="flex items-center gap-2 mt-2">
|
|
{stripeWorking ? (
|
|
<Badge variant="outline" className="text-green-600">
|
|
<CheckCircle className="h-3 w-3 mr-1" />
|
|
Ready to Test
|
|
</Badge>
|
|
) : (
|
|
<Badge variant="outline" className="text-yellow-600">
|
|
<AlertCircle className="h-3 w-3 mr-1" />
|
|
Complete Setup First
|
|
</Badge>
|
|
)}
|
|
<Link href="/products">
|
|
<Button size="sm" variant="outline">
|
|
<ShoppingCart className="h-3 w-3 mr-1" />
|
|
Test Store
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Account Status */}
|
|
{stripeWorking && testResult?.account && (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<CreditCard className="h-5 w-5" />
|
|
Stripe Account Status
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<div className="text-sm text-muted-foreground">
|
|
Account ID
|
|
</div>
|
|
<div className="font-medium">{testResult.account.id}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-sm text-muted-foreground">
|
|
Business Name
|
|
</div>
|
|
<div className="font-medium">
|
|
{testResult.account.name || "Not set"}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-sm text-muted-foreground">Country</div>
|
|
<div className="font-medium">
|
|
{testResult.account.country}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-sm text-muted-foreground">
|
|
Charges Enabled
|
|
</div>
|
|
<div className="font-medium">
|
|
{testResult.account.charges_enabled ? (
|
|
<Badge variant="default">Yes</Badge>
|
|
) : (
|
|
<Badge variant="destructive">No</Badge>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-sm text-muted-foreground">
|
|
Payouts Enabled
|
|
</div>
|
|
<div className="font-medium">
|
|
{testResult.account.payouts_enabled ? (
|
|
<Badge variant="default">Yes</Badge>
|
|
) : (
|
|
<Badge variant="secondary">No</Badge>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-sm text-muted-foreground">
|
|
API Version
|
|
</div>
|
|
<div className="font-medium">{testResult.apiVersion}</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{/* Getting Started */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Quick Start Guide</CardTitle>
|
|
<CardDescription>
|
|
Get your store running in 4 easy steps
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div className="space-y-3">
|
|
<h4 className="font-medium">For New Products:</h4>
|
|
<ol className="list-decimal list-inside space-y-2 text-sm text-muted-foreground">
|
|
<li>Go to Stripe Dashboard → Products</li>
|
|
<li>Click "Add product"</li>
|
|
<li>Fill in product details and set price</li>
|
|
<li>Save and publish the product</li>
|
|
<li>Visit your store to see it!</li>
|
|
</ol>
|
|
</div>
|
|
<div className="space-y-3">
|
|
<h4 className="font-medium">For Existing Products:</h4>
|
|
<ol className="list-decimal list-inside space-y-2 text-sm text-muted-foreground">
|
|
<li>Go to Stripe Dashboard → Products</li>
|
|
<li>Find your existing products</li>
|
|
<li>Ensure they have active prices</li>
|
|
<li>Check that they're marked as "Active"</li>
|
|
<li>They'll appear in your store automatically!</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="pt-4 border-t">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm text-muted-foreground">
|
|
Need help? Check the Stripe documentation or contact
|
|
support.
|
|
</p>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Link href="/products">
|
|
<Button>View Store</Button>
|
|
</Link>
|
|
<Link href="https://stripe.com/docs">
|
|
<Button variant="outline">Documentation</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export const metadata = {
|
|
title: "Stripe Setup | Rocky Mountain Vending",
|
|
description:
|
|
"Complete your Stripe integration setup and add products to your store",
|
|
}
|