├── .eslintrc.json
├── src
    ├── components
    │   ├── page.tsx
    │   ├── ui
    │   │   ├── label.tsx
    │   │   ├── textarea.tsx
    │   │   ├── input.tsx
    │   │   ├── button.tsx
    │   │   ├── card.tsx
    │   │   ├── table.tsx
    │   │   └── dropdown-menu.tsx
    │   ├── Nav.tsx
    │   └── ProductCard.tsx
    ├── lib
    │   ├── utils.ts
    │   ├── cache.ts
    │   ├── isValidPassword.ts
    │   └── formatters.ts
    ├── app
    │   ├── admin
    │   │   ├── _components
    │   │   │   └── PageHeader.tsx
    │   │   ├── loading.tsx
    │   │   ├── products
    │   │   │   ├── new
    │   │   │   │   └── page.tsx
    │   │   │   ├── [id]
    │   │   │   │   ├── edit
    │   │   │   │   │   └── page.tsx
    │   │   │   │   └── download
    │   │   │   │   │   └── route.ts
    │   │   │   ├── _components
    │   │   │   │   ├── ProductActions.tsx
    │   │   │   │   └── ProductForm.tsx
    │   │   │   └── page.tsx
    │   │   ├── _actions
    │   │   │   ├── users.ts
    │   │   │   ├── orders.ts
    │   │   │   └── products.ts
    │   │   ├── layout.tsx
    │   │   ├── users
    │   │   │   ├── _components
    │   │   │   │   └── UserActions.tsx
    │   │   │   └── page.tsx
    │   │   ├── orders
    │   │   │   ├── _components
    │   │   │   │   └── OrderActions.tsx
    │   │   │   └── page.tsx
    │   │   └── page.tsx
    │   ├── actions
    │   │   └── orders.ts
    │   ├── (customerFacing)
    │   │   ├── products
    │   │   │   ├── download
    │   │   │   │   ├── expired
    │   │   │   │   │   └── page.tsx
    │   │   │   │   └── [downloadVerificationId]
    │   │   │   │   │   └── route.ts
    │   │   │   ├── [id]
    │   │   │   │   └── purchase
    │   │   │   │   │   ├── page.tsx
    │   │   │   │   │   └── _components
    │   │   │   │   │       └── CheckoutForm.tsx
    │   │   │   └── page.tsx
    │   │   ├── layout.tsx
    │   │   ├── orders
    │   │   │   └── page.tsx
    │   │   ├── stripe
    │   │   │   └── purchase-success
    │   │   │   │   └── page.tsx
    │   │   └── page.tsx
    │   ├── layout.tsx
    │   ├── globals.css
    │   └── webhooks
    │   │   └── stripe
    │   │       └── route.tsx
    ├── db
    │   └── db.ts
    ├── middleware.ts
    ├── email
    │   ├── PurchaseReceipt.tsx
    │   ├── OrderHistory.tsx
    │   └── components
    │   │   └── OrderInformation.tsx
    └── actions
    │   └── orders.tsx
├── next.config.mjs
├── postcss.config.js
├── prisma
    ├── migrations
    │   ├── migration_lock.toml
    │   └── 20240227191221_init
    │   │   └── migration.sql
    └── schema.prisma
├── components.json
├── .gitignore
├── tsconfig.json
├── LICENSE
├── package.json
├── README.md
└── tailwind.config.ts


/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals"
3 | }
4 | 


--------------------------------------------------------------------------------
/src/components/page.tsx:
--------------------------------------------------------------------------------
1 | export default function Home() {
2 |   return <h1>Hi</h1>
3 | }
4 | 


--------------------------------------------------------------------------------
/next.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {};
3 | 
4 | export default nextConfig;
5 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | };
7 | 


--------------------------------------------------------------------------------
/prisma/migrations/migration_lock.toml:
--------------------------------------------------------------------------------
1 | # Please do not edit this file manually
2 | # It should be added in your version-control system (i.e. Git)
3 | provider = "sqlite"


--------------------------------------------------------------------------------
/src/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { type ClassValue, clsx } from "clsx"
2 | import { twMerge } from "tailwind-merge"
3 | 
4 | export function cn(...inputs: ClassValue[]) {
5 |   return twMerge(clsx(inputs))
6 | }
7 | 


--------------------------------------------------------------------------------
/src/app/admin/_components/PageHeader.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode } from "react"
2 | 
3 | export function PageHeader({ children }: { children: ReactNode }) {
4 |   return <h1 className="text-4xl mb-4">{children}</h1>
5 | }
6 | 


--------------------------------------------------------------------------------
/src/app/admin/loading.tsx:
--------------------------------------------------------------------------------
 1 | import { Loader2 } from "lucide-react"
 2 | 
 3 | export default function AdminLoading() {
 4 |   return (
 5 |     <div className="flex justify-center">
 6 |       <Loader2 className="size-24 animate-spin" />
 7 |     </div>
 8 |   )
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/app/actions/orders.ts:
--------------------------------------------------------------------------------
 1 | "use server"
 2 | 
 3 | import db from "@/db/db"
 4 | 
 5 | export async function userOrderExists(email: string, productId: string) {
 6 |   return (
 7 |     (await db.order.findFirst({
 8 |       where: { user: { email }, productId },
 9 |       select: { id: true },
10 |     })) != null
11 |   )
12 | }
13 | 


--------------------------------------------------------------------------------
/src/app/admin/products/new/page.tsx:
--------------------------------------------------------------------------------
 1 | import { PageHeader } from "../../_components/PageHeader"
 2 | import { ProductForm } from "../_components/ProductForm"
 3 | 
 4 | export default function NewProductPage() {
 5 |   return (
 6 |     <>
 7 |       <PageHeader>Add Product</PageHeader>
 8 |       <ProductForm />
 9 |     </>
10 |   )
11 | }
12 | 


--------------------------------------------------------------------------------
/src/app/admin/_actions/users.ts:
--------------------------------------------------------------------------------
 1 | "use server"
 2 | 
 3 | import db from "@/db/db"
 4 | import { notFound } from "next/navigation"
 5 | 
 6 | export async function deleteUser(id: string) {
 7 |   const user = await db.user.delete({
 8 |     where: { id },
 9 |   })
10 | 
11 |   if (user == null) return notFound()
12 | 
13 |   return user
14 | }
15 | 


--------------------------------------------------------------------------------
/src/app/admin/_actions/orders.ts:
--------------------------------------------------------------------------------
 1 | "use server"
 2 | 
 3 | import db from "@/db/db"
 4 | import { notFound } from "next/navigation"
 5 | 
 6 | export async function deleteOrder(id: string) {
 7 |   const order = await db.order.delete({
 8 |     where: { id },
 9 |   })
10 | 
11 |   if (order == null) return notFound()
12 | 
13 |   return order
14 | }
15 | 


--------------------------------------------------------------------------------
/src/lib/cache.ts:
--------------------------------------------------------------------------------
 1 | import { unstable_cache as nextCache } from "next/cache"
 2 | import { cache as reactCache } from "react"
 3 | 
 4 | type Callback = (...args: any[]) => Promise<any>
 5 | export function cache<T extends Callback>(
 6 |   cb: T,
 7 |   keyParts: string[],
 8 |   options: { revalidate?: number | false; tags?: string[] } = {}
 9 | ) {
10 |   return nextCache(reactCache(cb), keyParts, options)
11 | }
12 | 


--------------------------------------------------------------------------------
/src/app/(customerFacing)/products/download/expired/page.tsx:
--------------------------------------------------------------------------------
 1 | import { Button } from "@/components/ui/button"
 2 | import Link from "next/link"
 3 | 
 4 | export default function Expired() {
 5 |   return (
 6 |     <>
 7 |       <h1 className="text-4xl mb-4">Download link expired</h1>
 8 |       <Button asChild size="lg">
 9 |         <Link href="/orders">Get New Link</Link>
10 |       </Button>
11 |     </>
12 |   )
13 | }
14 | 


--------------------------------------------------------------------------------
/src/db/db.ts:
--------------------------------------------------------------------------------
 1 | import { PrismaClient } from "@prisma/client"
 2 | 
 3 | const prismaClientSingleton = () => {
 4 |   return new PrismaClient()
 5 | }
 6 | 
 7 | declare global {
 8 |   var prisma: undefined | ReturnType<typeof prismaClientSingleton>
 9 | }
10 | 
11 | const db = globalThis.prisma ?? prismaClientSingleton()
12 | 
13 | export default db
14 | 
15 | if (process.env.NODE_ENV !== "production") globalThis.prisma = db
16 | 


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "default",
 4 |   "rsc": true,
 5 |   "tsx": true,
 6 |   "tailwind": {
 7 |     "config": "tailwind.config.ts",
 8 |     "css": "src/app/globals.css",
 9 |     "baseColor": "slate",
10 |     "cssVariables": true,
11 |     "prefix": ""
12 |   },
13 |   "aliases": {
14 |     "components": "@/components",
15 |     "utils": "@/lib/utils"
16 |   }
17 | }


--------------------------------------------------------------------------------
/src/lib/isValidPassword.ts:
--------------------------------------------------------------------------------
 1 | export async function isValidPassword(
 2 |   password: string,
 3 |   hashedPassword: string
 4 | ) {
 5 |   return (await hashPassword(password)) === hashedPassword
 6 | }
 7 | 
 8 | async function hashPassword(password: string) {
 9 |   const arrayBuffer = await crypto.subtle.digest(
10 |     "SHA-512",
11 |     new TextEncoder().encode(password)
12 |   )
13 | 
14 |   return Buffer.from(arrayBuffer).toString("base64")
15 | }
16 | 


--------------------------------------------------------------------------------
/src/lib/formatters.ts:
--------------------------------------------------------------------------------
 1 | const CURRENCY_FORMATTER = new Intl.NumberFormat("en-US", {
 2 |   currency: "USD",
 3 |   style: "currency",
 4 |   minimumFractionDigits: 0,
 5 | })
 6 | 
 7 | export function formatCurrency(amount: number) {
 8 |   return CURRENCY_FORMATTER.format(amount)
 9 | }
10 | 
11 | const NUMBER_FORMATTER = new Intl.NumberFormat("en-US")
12 | 
13 | export function formatNumber(number: number) {
14 |   return NUMBER_FORMATTER.format(number)
15 | }
16 | 


--------------------------------------------------------------------------------
/src/app/admin/products/[id]/edit/page.tsx:
--------------------------------------------------------------------------------
 1 | import db from "@/db/db"
 2 | import { PageHeader } from "../../../_components/PageHeader"
 3 | import { ProductForm } from "../../_components/ProductForm"
 4 | 
 5 | export default async function EditProductPage({
 6 |   params: { id },
 7 | }: {
 8 |   params: { id: string }
 9 | }) {
10 |   const product = await db.product.findUnique({ where: { id } })
11 | 
12 |   return (
13 |     <>
14 |       <PageHeader>Edit Product</PageHeader>
15 |       <ProductForm product={product} />
16 |     </>
17 |   )
18 | }
19 | 


--------------------------------------------------------------------------------
/src/app/(customerFacing)/layout.tsx:
--------------------------------------------------------------------------------
 1 | import { Nav, NavLink } from "@/components/Nav"
 2 | 
 3 | export const dynamic = "force-dynamic"
 4 | 
 5 | export default function Layout({
 6 |   children,
 7 | }: Readonly<{
 8 |   children: React.ReactNode
 9 | }>) {
10 |   return (
11 |     <>
12 |       <Nav>
13 |         <NavLink href="/">Home</NavLink>
14 |         <NavLink href="/products">Products</NavLink>
15 |         <NavLink href="/orders">My Orders</NavLink>
16 |       </Nav>
17 |       <div className="container my-6">{children}</div>
18 |     </>
19 |   )
20 | }
21 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | .yarn/install-state.gz
 8 | 
 9 | # testing
10 | /coverage
11 | 
12 | # next.js
13 | /.next/
14 | /out/
15 | 
16 | # production
17 | /build
18 | 
19 | # misc
20 | .DS_Store
21 | *.pem
22 | 
23 | # debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 | 
28 | # local env files
29 | .env*.local
30 | 
31 | # vercel
32 | .vercel
33 | 
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 | /products
38 | /public/products
39 | .env
40 | /prisma/dev.db


--------------------------------------------------------------------------------
/src/app/admin/layout.tsx:
--------------------------------------------------------------------------------
 1 | import { Nav, NavLink } from "@/components/Nav"
 2 | 
 3 | export const dynamic = "force-dynamic"
 4 | 
 5 | export default function AdminLayout({
 6 |   children,
 7 | }: Readonly<{
 8 |   children: React.ReactNode
 9 | }>) {
10 |   return (
11 |     <>
12 |       <Nav>
13 |         <NavLink href="/admin">Dashboard</NavLink>
14 |         <NavLink href="/admin/products">Products</NavLink>
15 |         <NavLink href="/admin/users">Customers</NavLink>
16 |         <NavLink href="/admin/orders">Sales</NavLink>
17 |       </Nav>
18 |       <div className="container my-6">{children}</div>
19 |     </>
20 |   )
21 | }
22 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "lib": ["dom", "dom.iterable", "esnext"],
 4 |     "allowJs": true,
 5 |     "skipLibCheck": true,
 6 |     "strict": true,
 7 |     "noEmit": true,
 8 |     "esModuleInterop": true,
 9 |     "module": "esnext",
10 |     "moduleResolution": "bundler",
11 |     "resolveJsonModule": true,
12 |     "isolatedModules": true,
13 |     "jsx": "preserve",
14 |     "incremental": true,
15 |     "plugins": [
16 |       {
17 |         "name": "next"
18 |       }
19 |     ],
20 |     "paths": {
21 |       "@/*": ["./src/*"]
22 |     }
23 |   },
24 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
25 |   "exclude": ["node_modules"]
26 | }
27 | 


--------------------------------------------------------------------------------
/src/app/admin/users/_components/UserActions.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import { DropdownMenuItem } from "@/components/ui/dropdown-menu"
 4 | import { useTransition } from "react"
 5 | import { deleteUser } from "../../_actions/users"
 6 | import { useRouter } from "next/navigation"
 7 | 
 8 | export function DeleteDropDownItem({ id }: { id: string }) {
 9 |   const [isPending, startTransition] = useTransition()
10 |   const router = useRouter()
11 | 
12 |   return (
13 |     <DropdownMenuItem
14 |       variant="destructive"
15 |       disabled={isPending}
16 |       onClick={() =>
17 |         startTransition(async () => {
18 |           await deleteUser(id)
19 |           router.refresh()
20 |         })
21 |       }
22 |     >
23 |       Delete
24 |     </DropdownMenuItem>
25 |   )
26 | }
27 | 


--------------------------------------------------------------------------------
/src/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import type { Metadata } from "next"
 2 | import { Inter } from "next/font/google"
 3 | import "./globals.css"
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const inter = Inter({ subsets: ["latin"], variable: "--font-sans" })
 7 | 
 8 | export const metadata: Metadata = {
 9 |   title: "Create Next App",
10 |   description: "Generated by create next app",
11 | }
12 | 
13 | export default function RootLayout({
14 |   children,
15 | }: Readonly<{
16 |   children: React.ReactNode
17 | }>) {
18 |   return (
19 |     <html lang="en">
20 |       <body
21 |         className={cn(
22 |           "bg-background min-h-screen font-sans antialiased",
23 |           inter.variable
24 |         )}
25 |       >
26 |         {children}
27 |       </body>
28 |     </html>
29 |   )
30 | }
31 | 


--------------------------------------------------------------------------------
/src/app/admin/orders/_components/OrderActions.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import { DropdownMenuItem } from "@/components/ui/dropdown-menu"
 4 | import { useTransition } from "react"
 5 | import { deleteOrder } from "../../_actions/orders"
 6 | import { useRouter } from "next/navigation"
 7 | 
 8 | export function DeleteDropDownItem({ id }: { id: string }) {
 9 |   const [isPending, startTransition] = useTransition()
10 |   const router = useRouter()
11 | 
12 |   return (
13 |     <DropdownMenuItem
14 |       variant="destructive"
15 |       disabled={isPending}
16 |       onClick={() =>
17 |         startTransition(async () => {
18 |           await deleteOrder(id)
19 |           router.refresh()
20 |         })
21 |       }
22 |     >
23 |       Delete
24 |     </DropdownMenuItem>
25 |   )
26 | }
27 | 


--------------------------------------------------------------------------------
/src/components/ui/label.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as LabelPrimitive from "@radix-ui/react-label"
 5 | import { cva, type VariantProps } from "class-variance-authority"
 6 | 
 7 | import { cn } from "@/lib/utils"
 8 | 
 9 | const labelVariants = cva(
10 |   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
11 | )
12 | 
13 | const Label = React.forwardRef<
14 |   React.ElementRef<typeof LabelPrimitive.Root>,
15 |   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
16 |     VariantProps<typeof labelVariants>
17 | >(({ className, ...props }, ref) => (
18 |   <LabelPrimitive.Root
19 |     ref={ref}
20 |     className={cn(labelVariants(), className)}
21 |     {...props}
22 |   />
23 | ))
24 | Label.displayName = LabelPrimitive.Root.displayName
25 | 
26 | export { Label }
27 | 


--------------------------------------------------------------------------------
/src/components/Nav.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | import Link from "next/link"
 5 | import { usePathname } from "next/navigation"
 6 | import { ComponentProps, ReactNode } from "react"
 7 | 
 8 | export function Nav({ children }: { children: ReactNode }) {
 9 |   return (
10 |     <nav className="bg-primary text-primary-foreground flex justify-center px-4">
11 |       {children}
12 |     </nav>
13 |   )
14 | }
15 | 
16 | export function NavLink(props: Omit<ComponentProps<typeof Link>, "className">) {
17 |   const pathname = usePathname()
18 |   return (
19 |     <Link
20 |       {...props}
21 |       className={cn(
22 |         "p-4 hover:bg-secondary hover:text-secondary-foreground focus-visible:bg-secondary focus-visible:text-secondary-foreground",
23 |         pathname === props.href && "bg-background text-foreground"
24 |       )}
25 |     />
26 |   )
27 | }
28 | 


--------------------------------------------------------------------------------
/src/components/ui/textarea.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | export interface TextareaProps
 6 |   extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
 7 | 
 8 | const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
 9 |   ({ className, ...props }, ref) => {
10 |     return (
11 |       <textarea
12 |         className={cn(
13 |           "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
14 |           className
15 |         )}
16 |         ref={ref}
17 |         {...props}
18 |       />
19 |     )
20 |   }
21 | )
22 | Textarea.displayName = "Textarea"
23 | 
24 | export { Textarea }
25 | 


--------------------------------------------------------------------------------
/src/app/admin/products/[id]/download/route.ts:
--------------------------------------------------------------------------------
 1 | import db from "@/db/db"
 2 | import { notFound } from "next/navigation"
 3 | import { NextRequest, NextResponse } from "next/server"
 4 | import fs from "fs/promises"
 5 | 
 6 | export async function GET(
 7 |   req: NextRequest,
 8 |   { params: { id } }: { params: { id: string } }
 9 | ) {
10 |   const product = await db.product.findUnique({
11 |     where: { id },
12 |     select: { filePath: true, name: true },
13 |   })
14 | 
15 |   if (product == null) return notFound()
16 | 
17 |   const { size } = await fs.stat(product.filePath)
18 |   const file = await fs.readFile(product.filePath)
19 |   const extension = product.filePath.split(".").pop()
20 | 
21 |   return new NextResponse(file, {
22 |     headers: {
23 |       "Content-Disposition": `attachment; filename="${product.name}.${extension}"`,
24 |       "Content-Length": size.toString(),
25 |     },
26 |   })
27 | }
28 | 


--------------------------------------------------------------------------------
/src/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | export interface InputProps
 6 |   extends React.InputHTMLAttributes<HTMLInputElement> {}
 7 | 
 8 | const Input = React.forwardRef<HTMLInputElement, InputProps>(
 9 |   ({ className, type, ...props }, ref) => {
10 |     return (
11 |       <input
12 |         type={type}
13 |         className={cn(
14 |           "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
15 |           className
16 |         )}
17 |         ref={ref}
18 |         {...props}
19 |       />
20 |     )
21 |   }
22 | )
23 | Input.displayName = "Input"
24 | 
25 | export { Input }
26 | 


--------------------------------------------------------------------------------
/src/app/(customerFacing)/products/[id]/purchase/page.tsx:
--------------------------------------------------------------------------------
 1 | import db from "@/db/db"
 2 | import { notFound } from "next/navigation"
 3 | import Stripe from "stripe"
 4 | import { CheckoutForm } from "./_components/CheckoutForm"
 5 | 
 6 | const stripe = new Stripe(process.env.STRIPE_SECRET_KEY as string)
 7 | 
 8 | export default async function PurchasePage({
 9 |   params: { id },
10 | }: {
11 |   params: { id: string }
12 | }) {
13 |   const product = await db.product.findUnique({ where: { id } })
14 |   if (product == null) return notFound()
15 | 
16 |   const paymentIntent = await stripe.paymentIntents.create({
17 |     amount: product.priceInCents,
18 |     currency: "USD",
19 |     metadata: { productId: product.id },
20 |   })
21 | 
22 |   if (paymentIntent.client_secret == null) {
23 |     throw Error("Stripe failed to create payment intent")
24 |   }
25 | 
26 |   return (
27 |     <CheckoutForm
28 |       product={product}
29 |       clientSecret={paymentIntent.client_secret}
30 |     />
31 |   )
32 | }
33 | 


--------------------------------------------------------------------------------
/src/middleware.ts:
--------------------------------------------------------------------------------
 1 | import { NextRequest, NextResponse } from "next/server"
 2 | import { isValidPassword } from "./lib/isValidPassword"
 3 | 
 4 | export async function middleware(req: NextRequest) {
 5 |   if ((await isAuthenticated(req)) === false) {
 6 |     return new NextResponse("Unauthorized", {
 7 |       status: 401,
 8 |       headers: { "WWW-Authenticate": "Basic" },
 9 |     })
10 |   }
11 | }
12 | 
13 | async function isAuthenticated(req: NextRequest) {
14 |   const authHeader =
15 |     req.headers.get("authorization") || req.headers.get("Authorization")
16 | 
17 |   if (authHeader == null) return false
18 | 
19 |   const [username, password] = Buffer.from(authHeader.split(" ")[1], "base64")
20 |     .toString()
21 |     .split(":")
22 | 
23 |   return (
24 |     username === process.env.ADMIN_USERNAME &&
25 |     (await isValidPassword(
26 |       password,
27 |       process.env.HASHED_ADMIN_PASSWORD as string
28 |     ))
29 |   )
30 | }
31 | 
32 | export const config = {
33 |   matcher: "/admin/:path*",
34 | }
35 | 


--------------------------------------------------------------------------------
/src/app/(customerFacing)/products/download/[downloadVerificationId]/route.ts:
--------------------------------------------------------------------------------
 1 | import db from "@/db/db"
 2 | import { NextRequest, NextResponse } from "next/server"
 3 | import fs from "fs/promises"
 4 | 
 5 | export async function GET(
 6 |   req: NextRequest,
 7 |   {
 8 |     params: { downloadVerificationId },
 9 |   }: { params: { downloadVerificationId: string } }
10 | ) {
11 |   const data = await db.downloadVerification.findUnique({
12 |     where: { id: downloadVerificationId, expiresAt: { gt: new Date() } },
13 |     select: { product: { select: { filePath: true, name: true } } },
14 |   })
15 | 
16 |   if (data == null) {
17 |     return NextResponse.redirect(new URL("/products/download/expired", req.url))
18 |   }
19 | 
20 |   const { size } = await fs.stat(data.product.filePath)
21 |   const file = await fs.readFile(data.product.filePath)
22 |   const extension = data.product.filePath.split(".").pop()
23 | 
24 |   return new NextResponse(file, {
25 |     headers: {
26 |       "Content-Disposition": `attachment; filename="${data.product.name}.${extension}"`,
27 |       "Content-Length": size.toString(),
28 |     },
29 |   })
30 | }
31 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2024 WebDevSimplified
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/app/(customerFacing)/products/page.tsx:
--------------------------------------------------------------------------------
 1 | import { ProductCard, ProductCardSkeleton } from "@/components/ProductCard"
 2 | import db from "@/db/db"
 3 | import { cache } from "@/lib/cache"
 4 | import { Suspense } from "react"
 5 | 
 6 | const getProducts = cache(() => {
 7 |   return db.product.findMany({
 8 |     where: { isAvailableForPurchase: true },
 9 |     orderBy: { name: "asc" },
10 |   })
11 | }, ["/products", "getProducts"])
12 | 
13 | export default function ProductsPage() {
14 |   return (
15 |     <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
16 |       <Suspense
17 |         fallback={
18 |           <>
19 |             <ProductCardSkeleton />
20 |             <ProductCardSkeleton />
21 |             <ProductCardSkeleton />
22 |             <ProductCardSkeleton />
23 |             <ProductCardSkeleton />
24 |             <ProductCardSkeleton />
25 |           </>
26 |         }
27 |       >
28 |         <ProductsSuspense />
29 |       </Suspense>
30 |     </div>
31 |   )
32 | }
33 | 
34 | async function ProductsSuspense() {
35 |   const products = await getProducts()
36 | 
37 |   return products.map(product => <ProductCard key={product.id} {...product} />)
38 | }
39 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "next-js-ecommerce-mvp",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint",
10 |     "email": "cp .env ./node_modules/react-email && email dev --dir src/email --port 3001"
11 |   },
12 |   "dependencies": {
13 |     "@prisma/client": "^5.10.2",
14 |     "@radix-ui/react-dropdown-menu": "^2.0.6",
15 |     "@radix-ui/react-label": "^2.0.2",
16 |     "@radix-ui/react-slot": "^1.0.2",
17 |     "@react-email/components": "^0.0.15",
18 |     "@stripe/react-stripe-js": "^2.5.1",
19 |     "@stripe/stripe-js": "^3.0.6",
20 |     "class-variance-authority": "^0.7.0",
21 |     "clsx": "^2.1.0",
22 |     "lucide-react": "^0.341.0",
23 |     "next": "14.1.0",
24 |     "react": "^18",
25 |     "react-dom": "^18",
26 |     "react-email": "^2.1.0",
27 |     "resend": "^3.2.0",
28 |     "stripe": "^14.18.0",
29 |     "tailwind-merge": "^2.2.1",
30 |     "tailwindcss-animate": "^1.0.7",
31 |     "zod": "^3.22.4"
32 |   },
33 |   "devDependencies": {
34 |     "@types/node": "^20",
35 |     "@types/react": "^18",
36 |     "@types/react-dom": "^18",
37 |     "autoprefixer": "^10.0.1",
38 |     "eslint": "^8",
39 |     "eslint-config-next": "14.1.0",
40 |     "postcss": "^8",
41 |     "prisma": "^5.10.2",
42 |     "tailwindcss": "^3.3.0",
43 |     "ts-node": "^10.9.2",
44 |     "typescript": "^5"
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 2 | 
 3 | ## Getting Started
 4 | 
 5 | First, run the development server:
 6 | 
 7 | ```bash
 8 | npm run dev
 9 | # or
10 | yarn dev
11 | # or
12 | pnpm dev
13 | # or
14 | bun dev
15 | ```
16 | 
17 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
18 | 
19 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
20 | 
21 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
22 | 
23 | ## Learn More
24 | 
25 | To learn more about Next.js, take a look at the following resources:
26 | 
27 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
28 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
29 | 
30 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
31 | 
32 | ## Deploy on Vercel
33 | 
34 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
35 | 
36 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
37 | 


--------------------------------------------------------------------------------
/src/app/admin/products/_components/ProductActions.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import { DropdownMenuItem } from "@/components/ui/dropdown-menu"
 4 | import { useTransition } from "react"
 5 | import {
 6 |   deleteProduct,
 7 |   toggleProductAvailability,
 8 | } from "../../_actions/products"
 9 | import { useRouter } from "next/navigation"
10 | 
11 | export function ActiveToggleDropdownItem({
12 |   id,
13 |   isAvailableForPurchase,
14 | }: {
15 |   id: string
16 |   isAvailableForPurchase: boolean
17 | }) {
18 |   const [isPending, startTransition] = useTransition()
19 |   const router = useRouter()
20 |   return (
21 |     <DropdownMenuItem
22 |       disabled={isPending}
23 |       onClick={() => {
24 |         startTransition(async () => {
25 |           await toggleProductAvailability(id, !isAvailableForPurchase)
26 |           router.refresh()
27 |         })
28 |       }}
29 |     >
30 |       {isAvailableForPurchase ? "Deactivate" : "Activate"}
31 |     </DropdownMenuItem>
32 |   )
33 | }
34 | 
35 | export function DeleteDropdownItem({
36 |   id,
37 |   disabled,
38 | }: {
39 |   id: string
40 |   disabled: boolean
41 | }) {
42 |   const [isPending, startTransition] = useTransition()
43 |   const router = useRouter()
44 |   return (
45 |     <DropdownMenuItem
46 |       variant="destructive"
47 |       disabled={disabled || isPending}
48 |       onClick={() => {
49 |         startTransition(async () => {
50 |           await deleteProduct(id)
51 |           router.refresh()
52 |         })
53 |       }}
54 |     >
55 |       Delete
56 |     </DropdownMenuItem>
57 |   )
58 | }
59 | 


--------------------------------------------------------------------------------
/src/email/PurchaseReceipt.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   Body,
 3 |   Container,
 4 |   Head,
 5 |   Heading,
 6 |   Html,
 7 |   Preview,
 8 |   Tailwind,
 9 | } from "@react-email/components"
10 | import { OrderInformation } from "./components/OrderInformation"
11 | 
12 | type PurchaseReceiptEmailProps = {
13 |   product: {
14 |     name: string
15 |     imagePath: string
16 |     description: string
17 |   }
18 |   order: { id: string; createdAt: Date; pricePaidInCents: number }
19 |   downloadVerificationId: string
20 | }
21 | 
22 | PurchaseReceiptEmail.PreviewProps = {
23 |   product: {
24 |     name: "Product name",
25 |     description: "Some description",
26 |     imagePath:
27 |       "/products/5aba7442-e4a5-4d2e-bfa7-5bd358cdad64-02 - What Is Next.js.jpg",
28 |   },
29 |   order: {
30 |     id: crypto.randomUUID(),
31 |     createdAt: new Date(),
32 |     pricePaidInCents: 10000,
33 |   },
34 |   downloadVerificationId: crypto.randomUUID(),
35 | } satisfies PurchaseReceiptEmailProps
36 | 
37 | export default function PurchaseReceiptEmail({
38 |   product,
39 |   order,
40 |   downloadVerificationId,
41 | }: PurchaseReceiptEmailProps) {
42 |   return (
43 |     <Html>
44 |       <Preview>Download {product.name} and view receipt</Preview>
45 |       <Tailwind>
46 |         <Head />
47 |         <Body className="font-sans bg-white">
48 |           <Container className="max-w-xl">
49 |             <Heading>Purchase Receipt</Heading>
50 |             <OrderInformation
51 |               order={order}
52 |               product={product}
53 |               downloadVerificationId={downloadVerificationId}
54 |             />
55 |           </Container>
56 |         </Body>
57 |       </Tailwind>
58 |     </Html>
59 |   )
60 | }
61 | 


--------------------------------------------------------------------------------
/src/app/(customerFacing)/orders/page.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import { emailOrderHistory } from "@/actions/orders"
 4 | import { Button } from "@/components/ui/button"
 5 | import {
 6 |   Card,
 7 |   CardContent,
 8 |   CardDescription,
 9 |   CardFooter,
10 |   CardHeader,
11 |   CardTitle,
12 | } from "@/components/ui/card"
13 | import { Input } from "@/components/ui/input"
14 | import { Label } from "@/components/ui/label"
15 | import { useFormState, useFormStatus } from "react-dom"
16 | 
17 | export default function MyOrdersPage() {
18 |   const [data, action] = useFormState(emailOrderHistory, {})
19 |   return (
20 |     <form action={action} className="max-2-xl mx-auto">
21 |       <Card>
22 |         <CardHeader>
23 |           <CardTitle>My Orders</CardTitle>
24 |           <CardDescription>
25 |             Enter your email and we will email you your order history and
26 |             download links
27 |           </CardDescription>
28 |         </CardHeader>
29 |         <CardContent>
30 |           <div className="space-y-2">
31 |             <Label htmlFor="email">Email</Label>
32 |             <Input type="email" required name="email" id="email" />
33 |             {data.error && <div className="text-destructive">{data.error}</div>}
34 |           </div>
35 |         </CardContent>
36 |         <CardFooter>
37 |           {data.message ? <p>{data.message}</p> : <SubmitButton />}
38 |         </CardFooter>
39 |       </Card>
40 |     </form>
41 |   )
42 | }
43 | 
44 | function SubmitButton() {
45 |   const { pending } = useFormStatus()
46 | 
47 |   return (
48 |     <Button className="w-full" size="lg" disabled={pending} type="submit">
49 |       {pending ? "Sending..." : "Send"}
50 |     </Button>
51 |   )
52 | }
53 | 


--------------------------------------------------------------------------------
/prisma/migrations/20240227191221_init/migration.sql:
--------------------------------------------------------------------------------
 1 | -- CreateTable
 2 | CREATE TABLE "Product" (
 3 |     "id" TEXT NOT NULL PRIMARY KEY,
 4 |     "name" TEXT NOT NULL,
 5 |     "priceInCents" INTEGER NOT NULL,
 6 |     "filePath" TEXT NOT NULL,
 7 |     "imagePath" TEXT NOT NULL,
 8 |     "description" TEXT NOT NULL,
 9 |     "isAvailableForPurchase" BOOLEAN NOT NULL DEFAULT true,
10 |     "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
11 |     "updatedAt" DATETIME NOT NULL
12 | );
13 | 
14 | -- CreateTable
15 | CREATE TABLE "User" (
16 |     "id" TEXT NOT NULL PRIMARY KEY,
17 |     "email" TEXT NOT NULL,
18 |     "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
19 |     "updatedAt" DATETIME NOT NULL
20 | );
21 | 
22 | -- CreateTable
23 | CREATE TABLE "Order" (
24 |     "id" TEXT NOT NULL PRIMARY KEY,
25 |     "pricePaidInCents" INTEGER NOT NULL,
26 |     "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
27 |     "updatedAt" DATETIME NOT NULL,
28 |     "userId" TEXT NOT NULL,
29 |     "productId" TEXT NOT NULL,
30 |     CONSTRAINT "Order_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User" ("id") ON DELETE CASCADE ON UPDATE CASCADE,
31 |     CONSTRAINT "Order_productId_fkey" FOREIGN KEY ("productId") REFERENCES "Product" ("id") ON DELETE RESTRICT ON UPDATE CASCADE
32 | );
33 | 
34 | -- CreateTable
35 | CREATE TABLE "DownloadVerification" (
36 |     "id" TEXT NOT NULL PRIMARY KEY,
37 |     "expiresAt" DATETIME NOT NULL,
38 |     "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
39 |     "productId" TEXT NOT NULL,
40 |     CONSTRAINT "DownloadVerification_productId_fkey" FOREIGN KEY ("productId") REFERENCES "Product" ("id") ON DELETE CASCADE ON UPDATE CASCADE
41 | );
42 | 
43 | -- CreateIndex
44 | CREATE UNIQUE INDEX "User_email_key" ON "User"("email");
45 | 


--------------------------------------------------------------------------------
/prisma/schema.prisma:
--------------------------------------------------------------------------------
 1 | // This is your Prisma schema file,
 2 | // learn more about it in the docs: https://pris.ly/d/prisma-schema
 3 | 
 4 | generator client {
 5 |   provider = "prisma-client-js"
 6 | }
 7 | 
 8 | datasource db {
 9 |   provider = "sqlite"
10 |   url      = env("DATABASE_URL")
11 | }
12 | 
13 | model Product {
14 |   id                     String                 @id @default(uuid())
15 |   name                   String
16 |   priceInCents           Int
17 |   filePath               String
18 |   imagePath              String
19 |   description            String
20 |   isAvailableForPurchase Boolean                @default(true)
21 |   createdAt              DateTime               @default(now())
22 |   updatedAt              DateTime               @updatedAt
23 |   orders                 Order[]
24 |   downloadVerifications  DownloadVerification[]
25 | }
26 | 
27 | model User {
28 |   id        String   @id @default(uuid())
29 |   email     String   @unique
30 |   createdAt DateTime @default(now())
31 |   updatedAt DateTime @updatedAt
32 |   orders    Order[]
33 | }
34 | 
35 | model Order {
36 |   id               String   @id @default(uuid())
37 |   pricePaidInCents Int
38 |   createdAt        DateTime @default(now())
39 |   updatedAt        DateTime @updatedAt
40 | 
41 |   userId    String
42 |   productId String
43 |   user      User    @relation(fields: [userId], references: [id], onDelete: Cascade)
44 |   product   Product @relation(fields: [productId], references: [id], onDelete: Restrict)
45 | }
46 | 
47 | model DownloadVerification {
48 |   id        String   @id @default(uuid())
49 |   expiresAt DateTime
50 |   createdAt DateTime @default(now())
51 |   productId String
52 |   product   Product  @relation(fields: [productId], references: [id], onDelete: Cascade)
53 | }
54 | 


--------------------------------------------------------------------------------
/src/app/globals.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 |  
 5 | @layer base {
 6 |   :root {
 7 |     --background: 0 0% 100%;
 8 |     --foreground: 222.2 84% 4.9%;
 9 | 
10 |     --card: 0 0% 100%;
11 |     --card-foreground: 222.2 84% 4.9%;
12 |  
13 |     --popover: 0 0% 100%;
14 |     --popover-foreground: 222.2 84% 4.9%;
15 |  
16 |     --primary: 222.2 47.4% 11.2%;
17 |     --primary-foreground: 210 40% 98%;
18 |  
19 |     --secondary: 210 40% 96.1%;
20 |     --secondary-foreground: 222.2 47.4% 11.2%;
21 |  
22 |     --muted: 210 40% 96.1%;
23 |     --muted-foreground: 215.4 16.3% 46.9%;
24 |  
25 |     --accent: 210 40% 96.1%;
26 |     --accent-foreground: 222.2 47.4% 11.2%;
27 |  
28 |     --destructive: 0 84.2% 60.2%;
29 |     --destructive-foreground: 210 40% 98%;
30 | 
31 |     --border: 214.3 31.8% 91.4%;
32 |     --input: 214.3 31.8% 91.4%;
33 |     --ring: 222.2 84% 4.9%;
34 |  
35 |     --radius: 0.5rem;
36 |   }
37 |  
38 |   .dark {
39 |     --background: 222.2 84% 4.9%;
40 |     --foreground: 210 40% 98%;
41 |  
42 |     --card: 222.2 84% 4.9%;
43 |     --card-foreground: 210 40% 98%;
44 |  
45 |     --popover: 222.2 84% 4.9%;
46 |     --popover-foreground: 210 40% 98%;
47 |  
48 |     --primary: 210 40% 98%;
49 |     --primary-foreground: 222.2 47.4% 11.2%;
50 |  
51 |     --secondary: 217.2 32.6% 17.5%;
52 |     --secondary-foreground: 210 40% 98%;
53 |  
54 |     --muted: 217.2 32.6% 17.5%;
55 |     --muted-foreground: 215 20.2% 65.1%;
56 |  
57 |     --accent: 217.2 32.6% 17.5%;
58 |     --accent-foreground: 210 40% 98%;
59 |  
60 |     --destructive: 0 62.8% 30.6%;
61 |     --destructive-foreground: 210 40% 98%;
62 |  
63 |     --border: 217.2 32.6% 17.5%;
64 |     --input: 217.2 32.6% 17.5%;
65 |     --ring: 212.7 26.8% 83.9%;
66 |   }
67 | }
68 |  
69 | @layer base {
70 |   * {
71 |     @apply border-border;
72 |   }
73 |   body {
74 |     @apply bg-background text-foreground;
75 |   }
76 | }


--------------------------------------------------------------------------------
/src/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { Slot } from "@radix-ui/react-slot"
 3 | import { cva, type VariantProps } from "class-variance-authority"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const buttonVariants = cva(
 8 |   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default: "bg-primary text-primary-foreground hover:bg-primary/90",
13 |         destructive:
14 |           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
15 |         outline:
16 |           "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
17 |         secondary:
18 |           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
19 |         ghost: "hover:bg-accent hover:text-accent-foreground",
20 |         link: "text-primary underline-offset-4 hover:underline",
21 |       },
22 |       size: {
23 |         default: "h-10 px-4 py-2",
24 |         sm: "h-9 rounded-md px-3",
25 |         lg: "h-11 rounded-md px-8",
26 |         icon: "h-10 w-10",
27 |       },
28 |     },
29 |     defaultVariants: {
30 |       variant: "default",
31 |       size: "default",
32 |     },
33 |   }
34 | )
35 | 
36 | export interface ButtonProps
37 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
38 |     VariantProps<typeof buttonVariants> {
39 |   asChild?: boolean
40 | }
41 | 
42 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
43 |   ({ className, variant, size, asChild = false, ...props }, ref) => {
44 |     const Comp = asChild ? Slot : "button"
45 |     return (
46 |       <Comp
47 |         className={cn(buttonVariants({ variant, size, className }))}
48 |         ref={ref}
49 |         {...props}
50 |       />
51 |     )
52 |   }
53 | )
54 | Button.displayName = "Button"
55 | 
56 | export { Button, buttonVariants }
57 | 


--------------------------------------------------------------------------------
/src/app/webhooks/stripe/route.tsx:
--------------------------------------------------------------------------------
 1 | import db from "@/db/db"
 2 | import { NextRequest, NextResponse } from "next/server"
 3 | import Stripe from "stripe"
 4 | import { Resend } from "resend"
 5 | import PurchaseReceiptEmail from "@/email/PurchaseReceipt"
 6 | 
 7 | const stripe = new Stripe(process.env.STRIPE_SECRET_KEY as string)
 8 | const resend = new Resend(process.env.RESEND_API_KEY as string)
 9 | 
10 | export async function POST(req: NextRequest) {
11 |   const event = await stripe.webhooks.constructEvent(
12 |     await req.text(),
13 |     req.headers.get("stripe-signature") as string,
14 |     process.env.STRIPE_WEBHOOK_SECRET as string
15 |   )
16 | 
17 |   if (event.type === "charge.succeeded") {
18 |     const charge = event.data.object
19 |     const productId = charge.metadata.productId
20 |     const email = charge.billing_details.email
21 |     const pricePaidInCents = charge.amount
22 | 
23 |     const product = await db.product.findUnique({ where: { id: productId } })
24 |     if (product == null || email == null) {
25 |       return new NextResponse("Bad Request", { status: 400 })
26 |     }
27 | 
28 |     const userFields = {
29 |       email,
30 |       orders: { create: { productId, pricePaidInCents } },
31 |     }
32 |     const {
33 |       orders: [order],
34 |     } = await db.user.upsert({
35 |       where: { email },
36 |       create: userFields,
37 |       update: userFields,
38 |       select: { orders: { orderBy: { createdAt: "desc" }, take: 1 } },
39 |     })
40 | 
41 |     const downloadVerification = await db.downloadVerification.create({
42 |       data: {
43 |         productId,
44 |         expiresAt: new Date(Date.now() + 1000 * 60 * 60 * 24),
45 |       },
46 |     })
47 | 
48 |     await resend.emails.send({
49 |       from: `Support <${process.env.SENDER_EMAIL}>`,
50 |       to: email,
51 |       subject: "Order Confirmation",
52 |       react: (
53 |         <PurchaseReceiptEmail
54 |           order={order}
55 |           product={product}
56 |           downloadVerificationId={downloadVerification.id}
57 |         />
58 |       ),
59 |     })
60 |   }
61 | 
62 |   return new NextResponse()
63 | }
64 | 


--------------------------------------------------------------------------------
/src/components/ui/card.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | const Card = React.forwardRef<
 6 |   HTMLDivElement,
 7 |   React.HTMLAttributes<HTMLDivElement>
 8 | >(({ className, ...props }, ref) => (
 9 |   <div
10 |     ref={ref}
11 |     className={cn(
12 |       "rounded-lg border bg-card text-card-foreground shadow-sm",
13 |       className
14 |     )}
15 |     {...props}
16 |   />
17 | ))
18 | Card.displayName = "Card"
19 | 
20 | const CardHeader = React.forwardRef<
21 |   HTMLDivElement,
22 |   React.HTMLAttributes<HTMLDivElement>
23 | >(({ className, ...props }, ref) => (
24 |   <div
25 |     ref={ref}
26 |     className={cn("flex flex-col space-y-1.5 p-6", className)}
27 |     {...props}
28 |   />
29 | ))
30 | CardHeader.displayName = "CardHeader"
31 | 
32 | const CardTitle = React.forwardRef<
33 |   HTMLParagraphElement,
34 |   React.HTMLAttributes<HTMLHeadingElement>
35 | >(({ className, ...props }, ref) => (
36 |   <h3
37 |     ref={ref}
38 |     className={cn(
39 |       "text-2xl font-semibold leading-none tracking-tight",
40 |       className
41 |     )}
42 |     {...props}
43 |   />
44 | ))
45 | CardTitle.displayName = "CardTitle"
46 | 
47 | const CardDescription = React.forwardRef<
48 |   HTMLParagraphElement,
49 |   React.HTMLAttributes<HTMLParagraphElement>
50 | >(({ className, ...props }, ref) => (
51 |   <p
52 |     ref={ref}
53 |     className={cn("text-sm text-muted-foreground", className)}
54 |     {...props}
55 |   />
56 | ))
57 | CardDescription.displayName = "CardDescription"
58 | 
59 | const CardContent = React.forwardRef<
60 |   HTMLDivElement,
61 |   React.HTMLAttributes<HTMLDivElement>
62 | >(({ className, ...props }, ref) => (
63 |   <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
64 | ))
65 | CardContent.displayName = "CardContent"
66 | 
67 | const CardFooter = React.forwardRef<
68 |   HTMLDivElement,
69 |   React.HTMLAttributes<HTMLDivElement>
70 | >(({ className, ...props }, ref) => (
71 |   <div
72 |     ref={ref}
73 |     className={cn("flex items-center p-6 pt-0", className)}
74 |     {...props}
75 |   />
76 | ))
77 | CardFooter.displayName = "CardFooter"
78 | 
79 | export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
80 | 


--------------------------------------------------------------------------------
/src/actions/orders.tsx:
--------------------------------------------------------------------------------
 1 | "use server"
 2 | 
 3 | import db from "@/db/db"
 4 | import OrderHistoryEmail from "@/email/OrderHistory"
 5 | import { Resend } from "resend"
 6 | import { z } from "zod"
 7 | 
 8 | const emailSchema = z.string().email()
 9 | const resend = new Resend(process.env.RESEND_API_KEY as string)
10 | 
11 | export async function emailOrderHistory(
12 |   prevState: unknown,
13 |   formData: FormData
14 | ): Promise<{ message?: string; error?: string }> {
15 |   const result = emailSchema.safeParse(formData.get("email"))
16 | 
17 |   if (result.success === false) {
18 |     return { error: "Invalid email address" }
19 |   }
20 | 
21 |   const user = await db.user.findUnique({
22 |     where: { email: result.data },
23 |     select: {
24 |       email: true,
25 |       orders: {
26 |         select: {
27 |           pricePaidInCents: true,
28 |           id: true,
29 |           createdAt: true,
30 |           product: {
31 |             select: {
32 |               id: true,
33 |               name: true,
34 |               imagePath: true,
35 |               description: true,
36 |             },
37 |           },
38 |         },
39 |       },
40 |     },
41 |   })
42 | 
43 |   if (user == null) {
44 |     return {
45 |       message:
46 |         "Check your email to view your order history and download your products.",
47 |     }
48 |   }
49 | 
50 |   const orders = user.orders.map(async order => {
51 |     return {
52 |       ...order,
53 |       downloadVerificationId: (
54 |         await db.downloadVerification.create({
55 |           data: {
56 |             expiresAt: new Date(Date.now() + 24 * 1000 * 60 * 60),
57 |             productId: order.product.id,
58 |           },
59 |         })
60 |       ).id,
61 |     }
62 |   })
63 | 
64 |   const data = await resend.emails.send({
65 |     from: `Support <${process.env.SENDER_EMAIL}>`,
66 |     to: user.email,
67 |     subject: "Order History",
68 |     react: <OrderHistoryEmail orders={await Promise.all(orders)} />,
69 |   })
70 | 
71 |   if (data.error) {
72 |     return { error: "There was an error sending your email. Please try again." }
73 |   }
74 | 
75 |   return {
76 |     message:
77 |       "Check your email to view your order history and download your products.",
78 |   }
79 | }
80 | 


--------------------------------------------------------------------------------
/src/components/ProductCard.tsx:
--------------------------------------------------------------------------------
 1 | import { formatCurrency } from "@/lib/formatters"
 2 | import {
 3 |   Card,
 4 |   CardContent,
 5 |   CardDescription,
 6 |   CardFooter,
 7 |   CardHeader,
 8 |   CardTitle,
 9 | } from "./ui/card"
10 | import { Button } from "./ui/button"
11 | import Link from "next/link"
12 | import Image from "next/image"
13 | 
14 | type ProductCardProps = {
15 |   id: string
16 |   name: string
17 |   priceInCents: number
18 |   description: string
19 |   imagePath: string
20 | }
21 | 
22 | export function ProductCard({
23 |   id,
24 |   name,
25 |   priceInCents,
26 |   description,
27 |   imagePath,
28 | }: ProductCardProps) {
29 |   return (
30 |     <Card className="flex overflow-hidden flex-col">
31 |       <div className="relative w-full h-auto aspect-video">
32 |         <Image src={imagePath} fill alt={name} />
33 |       </div>
34 |       <CardHeader>
35 |         <CardTitle>{name}</CardTitle>
36 |         <CardDescription>{formatCurrency(priceInCents / 100)}</CardDescription>
37 |       </CardHeader>
38 |       <CardContent className="flex-grow">
39 |         <p className="line-clamp-4">{description}</p>
40 |       </CardContent>
41 |       <CardFooter>
42 |         <Button asChild size="lg" className="w-full">
43 |           <Link href={`/products/${id}/purchase`}>Purchase</Link>
44 |         </Button>
45 |       </CardFooter>
46 |     </Card>
47 |   )
48 | }
49 | 
50 | export function ProductCardSkeleton() {
51 |   return (
52 |     <Card className="overflow-hidden flex flex-col animate-pulse">
53 |       <div className="w-full aspect-video bg-gray-300" />
54 |       <CardHeader>
55 |         <CardTitle>
56 |           <div className="w-3/4 h-6 rounded-full bg-gray-300" />
57 |         </CardTitle>
58 |         <CardDescription>
59 |           <div className="w-1/2 h-4 rounded-full bg-gray-300" />
60 |         </CardDescription>
61 |       </CardHeader>
62 |       <CardContent className="space-y-2">
63 |         <div className="w-full h-4 rounded-full bg-gray-300" />
64 |         <div className="w-full h-4 rounded-full bg-gray-300" />
65 |         <div className="w-3/4 h-4 rounded-full bg-gray-300" />
66 |       </CardContent>
67 |       <CardFooter>
68 |         <Button className="w-full" disabled size="lg"></Button>
69 |       </CardFooter>
70 |     </Card>
71 |   )
72 | }
73 | 


--------------------------------------------------------------------------------
/src/email/OrderHistory.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   Body,
 3 |   Container,
 4 |   Head,
 5 |   Heading,
 6 |   Hr,
 7 |   Html,
 8 |   Preview,
 9 |   Tailwind,
10 | } from "@react-email/components"
11 | import { OrderInformation } from "./components/OrderInformation"
12 | import React from "react"
13 | 
14 | type OrderHistoryEmailProps = {
15 |   orders: {
16 |     id: string
17 |     pricePaidInCents: number
18 |     createdAt: Date
19 |     downloadVerificationId: string
20 |     product: {
21 |       name: string
22 |       imagePath: string
23 |       description: string
24 |     }
25 |   }[]
26 | }
27 | 
28 | OrderHistoryEmail.PreviewProps = {
29 |   orders: [
30 |     {
31 |       id: crypto.randomUUID(),
32 |       createdAt: new Date(),
33 |       pricePaidInCents: 10000,
34 |       downloadVerificationId: crypto.randomUUID(),
35 |       product: {
36 |         name: "Product name",
37 |         description: "Some description",
38 |         imagePath:
39 |           "/products/5aba7442-e4a5-4d2e-bfa7-5bd358cdad64-02 - What Is Next.js.jpg",
40 |       },
41 |     },
42 |     {
43 |       id: crypto.randomUUID(),
44 |       createdAt: new Date(),
45 |       pricePaidInCents: 2000,
46 |       downloadVerificationId: crypto.randomUUID(),
47 |       product: {
48 |         name: "Product name 2",
49 |         description: "Some other desc",
50 |         imagePath:
51 |           "/products/db3035a5-e762-41b0-996f-d54ec730bc9c-01 - Course Introduction.jpg",
52 |       },
53 |     },
54 |   ],
55 | } satisfies OrderHistoryEmailProps
56 | 
57 | export default function OrderHistoryEmail({ orders }: OrderHistoryEmailProps) {
58 |   return (
59 |     <Html>
60 |       <Preview>Order History & Downloads</Preview>
61 |       <Tailwind>
62 |         <Head />
63 |         <Body className="font-sans bg-white">
64 |           <Container className="max-w-xl">
65 |             <Heading>Order History</Heading>
66 |             {orders.map((order, index) => (
67 |               <React.Fragment key={order.id}>
68 |                 <OrderInformation
69 |                   order={order}
70 |                   product={order.product}
71 |                   downloadVerificationId={order.downloadVerificationId}
72 |                 />
73 |                 {index < orders.length - 1 && <Hr />}
74 |               </React.Fragment>
75 |             ))}
76 |           </Container>
77 |         </Body>
78 |       </Tailwind>
79 |     </Html>
80 |   )
81 | }
82 | 


--------------------------------------------------------------------------------
/src/app/admin/orders/page.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   Table,
 3 |   TableBody,
 4 |   TableCell,
 5 |   TableHead,
 6 |   TableHeader,
 7 |   TableRow,
 8 | } from "@/components/ui/table"
 9 | import db from "@/db/db"
10 | import { formatCurrency } from "@/lib/formatters"
11 | import { PageHeader } from "../_components/PageHeader"
12 | import {
13 |   DropdownMenu,
14 |   DropdownMenuContent,
15 |   DropdownMenuItem,
16 |   DropdownMenuTrigger,
17 | } from "@/components/ui/dropdown-menu"
18 | import { MoreVertical } from "lucide-react"
19 | import { DeleteDropDownItem } from "./_components/OrderActions"
20 | 
21 | function getOrders() {
22 |   return db.order.findMany({
23 |     select: {
24 |       id: true,
25 |       pricePaidInCents: true,
26 |       product: { select: { name: true } },
27 |       user: { select: { email: true } },
28 |     },
29 |     orderBy: { createdAt: "desc" },
30 |   })
31 | }
32 | 
33 | export default function OrdersPage() {
34 |   return (
35 |     <>
36 |       <PageHeader>Sales</PageHeader>
37 |       <OrdersTable />
38 |     </>
39 |   )
40 | }
41 | 
42 | async function OrdersTable() {
43 |   const orders = await getOrders()
44 | 
45 |   if (orders.length === 0) return <p>No sales found</p>
46 | 
47 |   return (
48 |     <Table>
49 |       <TableHeader>
50 |         <TableRow>
51 |           <TableHead>Product</TableHead>
52 |           <TableHead>Customer</TableHead>
53 |           <TableHead>Price Paid</TableHead>
54 |           <TableHead className="w-0">
55 |             <span className="sr-only">Actions</span>
56 |           </TableHead>
57 |         </TableRow>
58 |       </TableHeader>
59 |       <TableBody>
60 |         {orders.map(order => (
61 |           <TableRow key={order.id}>
62 |             <TableCell>{order.product.name}</TableCell>
63 |             <TableCell>{order.user.email}</TableCell>
64 |             <TableCell>
65 |               {formatCurrency(order.pricePaidInCents / 100)}
66 |             </TableCell>
67 |             <TableCell className="text-center">
68 |               <DropdownMenu>
69 |                 <DropdownMenuTrigger>
70 |                   <MoreVertical />
71 |                   <span className="sr-only">Actions</span>
72 |                 </DropdownMenuTrigger>
73 |                 <DropdownMenuContent>
74 |                   <DeleteDropDownItem id={order.id} />
75 |                 </DropdownMenuContent>
76 |               </DropdownMenu>
77 |             </TableCell>
78 |           </TableRow>
79 |         ))}
80 |       </TableBody>
81 |     </Table>
82 |   )
83 | }
84 | 


--------------------------------------------------------------------------------
/src/app/admin/users/page.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   Table,
 3 |   TableBody,
 4 |   TableCell,
 5 |   TableHead,
 6 |   TableHeader,
 7 |   TableRow,
 8 | } from "@/components/ui/table"
 9 | import db from "@/db/db"
10 | import { formatCurrency, formatNumber } from "@/lib/formatters"
11 | import { PageHeader } from "../_components/PageHeader"
12 | import {
13 |   DropdownMenu,
14 |   DropdownMenuContent,
15 |   DropdownMenuTrigger,
16 | } from "@/components/ui/dropdown-menu"
17 | import { MoreVertical } from "lucide-react"
18 | import { DeleteDropDownItem } from "./_components/UserActions"
19 | 
20 | function getUsers() {
21 |   return db.user.findMany({
22 |     select: {
23 |       id: true,
24 |       email: true,
25 |       orders: { select: { pricePaidInCents: true } },
26 |     },
27 |     orderBy: { createdAt: "desc" },
28 |   })
29 | }
30 | 
31 | export default function UsersPage() {
32 |   return (
33 |     <>
34 |       <PageHeader>Customers</PageHeader>
35 |       <UsersTable />
36 |     </>
37 |   )
38 | }
39 | 
40 | async function UsersTable() {
41 |   const users = await getUsers()
42 | 
43 |   if (users.length === 0) return <p>No customers found</p>
44 | 
45 |   return (
46 |     <Table>
47 |       <TableHeader>
48 |         <TableRow>
49 |           <TableHead>Email</TableHead>
50 |           <TableHead>Orders</TableHead>
51 |           <TableHead>Value</TableHead>
52 |           <TableHead className="w-0">
53 |             <span className="sr-only">Actions</span>
54 |           </TableHead>
55 |         </TableRow>
56 |       </TableHeader>
57 |       <TableBody>
58 |         {users.map(user => (
59 |           <TableRow key={user.id}>
60 |             <TableCell>{user.email}</TableCell>
61 |             <TableCell>{formatNumber(user.orders.length)}</TableCell>
62 |             <TableCell>
63 |               {formatCurrency(
64 |                 user.orders.reduce((sum, o) => o.pricePaidInCents + sum, 0) /
65 |                   100
66 |               )}
67 |             </TableCell>
68 |             <TableCell className="text-center">
69 |               <DropdownMenu>
70 |                 <DropdownMenuTrigger>
71 |                   <MoreVertical />
72 |                   <span className="sr-only">Actions</span>
73 |                 </DropdownMenuTrigger>
74 |                 <DropdownMenuContent>
75 |                   <DeleteDropDownItem id={user.id} />
76 |                 </DropdownMenuContent>
77 |               </DropdownMenu>
78 |             </TableCell>
79 |           </TableRow>
80 |         ))}
81 |       </TableBody>
82 |     </Table>
83 |   )
84 | }
85 | 


--------------------------------------------------------------------------------
/src/app/(customerFacing)/stripe/purchase-success/page.tsx:
--------------------------------------------------------------------------------
 1 | import { Button } from "@/components/ui/button"
 2 | import db from "@/db/db"
 3 | import { formatCurrency } from "@/lib/formatters"
 4 | import Image from "next/image"
 5 | import Link from "next/link"
 6 | import { notFound } from "next/navigation"
 7 | import Stripe from "stripe"
 8 | 
 9 | const stripe = new Stripe(process.env.STRIPE_SECRET_KEY as string)
10 | 
11 | export default async function SuccessPage({
12 |   searchParams,
13 | }: {
14 |   searchParams: { payment_intent: string }
15 | }) {
16 |   const paymentIntent = await stripe.paymentIntents.retrieve(
17 |     searchParams.payment_intent
18 |   )
19 |   if (paymentIntent.metadata.productId == null) return notFound()
20 | 
21 |   const product = await db.product.findUnique({
22 |     where: { id: paymentIntent.metadata.productId },
23 |   })
24 |   if (product == null) return notFound()
25 | 
26 |   const isSuccess = paymentIntent.status === "succeeded"
27 | 
28 |   return (
29 |     <div className="max-w-5xl w-full mx-auto space-y-8">
30 |       <h1 className="text-4xl font-bold">
31 |         {isSuccess ? "Success!" : "Error!"}
32 |       </h1>
33 |       <div className="flex gap-4 items-center">
34 |         <div className="aspect-video flex-shrink-0 w-1/3 relative">
35 |           <Image
36 |             src={product.imagePath}
37 |             fill
38 |             alt={product.name}
39 |             className="object-cover"
40 |           />
41 |         </div>
42 |         <div>
43 |           <div className="text-lg">
44 |             {formatCurrency(product.priceInCents / 100)}
45 |           </div>
46 |           <h1 className="text-2xl font-bold">{product.name}</h1>
47 |           <div className="line-clamp-3 text-muted-foreground">
48 |             {product.description}
49 |           </div>
50 |           <Button className="mt-4" size="lg" asChild>
51 |             {isSuccess ? (
52 |               <a
53 |                 href={`/products/download/${await createDownloadVerification(
54 |                   product.id
55 |                 )}`}
56 |               >
57 |                 Download
58 |               </a>
59 |             ) : (
60 |               <Link href={`/products/${product.id}/purchase`}>Try Again</Link>
61 |             )}
62 |           </Button>
63 |         </div>
64 |       </div>
65 |     </div>
66 |   )
67 | }
68 | 
69 | async function createDownloadVerification(productId: string) {
70 |   return (
71 |     await db.downloadVerification.create({
72 |       data: {
73 |         productId,
74 |         expiresAt: new Date(Date.now() + 1000 * 60 * 60 * 24),
75 |       },
76 |     })
77 |   ).id
78 | }
79 | 


--------------------------------------------------------------------------------
/src/app/(customerFacing)/page.tsx:
--------------------------------------------------------------------------------
 1 | import { ProductCard, ProductCardSkeleton } from "@/components/ProductCard"
 2 | import { Button } from "@/components/ui/button"
 3 | import db from "@/db/db"
 4 | import { cache } from "@/lib/cache"
 5 | import { Product } from "@prisma/client"
 6 | import { ArrowRight } from "lucide-react"
 7 | import Link from "next/link"
 8 | import { Suspense } from "react"
 9 | 
10 | const getMostPopularProducts = cache(
11 |   () => {
12 |     return db.product.findMany({
13 |       where: { isAvailableForPurchase: true },
14 |       orderBy: { orders: { _count: "desc" } },
15 |       take: 6,
16 |     })
17 |   },
18 |   ["/", "getMostPopularProducts"],
19 |   { revalidate: 60 * 60 * 24 }
20 | )
21 | 
22 | const getNewestProducts = cache(() => {
23 |   return db.product.findMany({
24 |     where: { isAvailableForPurchase: true },
25 |     orderBy: { createdAt: "desc" },
26 |     take: 6,
27 |   })
28 | }, ["/", "getNewestProducts"])
29 | 
30 | export default function HomePage() {
31 |   return (
32 |     <main className="space-y-12">
33 |       <ProductGridSection
34 |         title="Most Popular"
35 |         productsFetcher={getMostPopularProducts}
36 |       />
37 |       <ProductGridSection title="Newest" productsFetcher={getNewestProducts} />
38 |     </main>
39 |   )
40 | }
41 | 
42 | type ProductGridSectionProps = {
43 |   title: string
44 |   productsFetcher: () => Promise<Product[]>
45 | }
46 | 
47 | function ProductGridSection({
48 |   productsFetcher,
49 |   title,
50 | }: ProductGridSectionProps) {
51 |   return (
52 |     <div className="space-y-4">
53 |       <div className="flex gap-4">
54 |         <h2 className="text-3xl font-bold">{title}</h2>
55 |         <Button variant="outline" asChild>
56 |           <Link href="/products" className="space-x-2">
57 |             <span>View All</span>
58 |             <ArrowRight className="size-4" />
59 |           </Link>
60 |         </Button>
61 |       </div>
62 |       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
63 |         <Suspense
64 |           fallback={
65 |             <>
66 |               <ProductCardSkeleton />
67 |               <ProductCardSkeleton />
68 |               <ProductCardSkeleton />
69 |             </>
70 |           }
71 |         >
72 |           <ProductSuspense productsFetcher={productsFetcher} />
73 |         </Suspense>
74 |       </div>
75 |     </div>
76 |   )
77 | }
78 | 
79 | async function ProductSuspense({
80 |   productsFetcher,
81 | }: {
82 |   productsFetcher: () => Promise<Product[]>
83 | }) {
84 |   return (await productsFetcher()).map(product => (
85 |     <ProductCard key={product.id} {...product} />
86 |   ))
87 | }
88 | 


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from "tailwindcss"
 2 | import { fontFamily } from "tailwindcss/defaultTheme"
 3 | 
 4 | const config = {
 5 |   darkMode: ["class"],
 6 |   content: [
 7 |     "./pages/**/*.{ts,tsx}",
 8 |     "./components/**/*.{ts,tsx}",
 9 |     "./app/**/*.{ts,tsx}",
10 |     "./src/**/*.{ts,tsx}",
11 |   ],
12 |   prefix: "",
13 |   theme: {
14 |     container: {
15 |       center: true,
16 |       padding: "2rem",
17 |       screens: {
18 |         "2xl": "1400px",
19 |       },
20 |     },
21 |     extend: {
22 |       fontFamily: {
23 |         sans: ["var(--font-sans)", ...fontFamily.sans],
24 |       },
25 |       colors: {
26 |         border: "hsl(var(--border))",
27 |         input: "hsl(var(--input))",
28 |         ring: "hsl(var(--ring))",
29 |         background: "hsl(var(--background))",
30 |         foreground: "hsl(var(--foreground))",
31 |         primary: {
32 |           DEFAULT: "hsl(var(--primary))",
33 |           foreground: "hsl(var(--primary-foreground))",
34 |         },
35 |         secondary: {
36 |           DEFAULT: "hsl(var(--secondary))",
37 |           foreground: "hsl(var(--secondary-foreground))",
38 |         },
39 |         destructive: {
40 |           DEFAULT: "hsl(var(--destructive))",
41 |           foreground: "hsl(var(--destructive-foreground))",
42 |         },
43 |         muted: {
44 |           DEFAULT: "hsl(var(--muted))",
45 |           foreground: "hsl(var(--muted-foreground))",
46 |         },
47 |         accent: {
48 |           DEFAULT: "hsl(var(--accent))",
49 |           foreground: "hsl(var(--accent-foreground))",
50 |         },
51 |         popover: {
52 |           DEFAULT: "hsl(var(--popover))",
53 |           foreground: "hsl(var(--popover-foreground))",
54 |         },
55 |         card: {
56 |           DEFAULT: "hsl(var(--card))",
57 |           foreground: "hsl(var(--card-foreground))",
58 |         },
59 |       },
60 |       borderRadius: {
61 |         lg: "var(--radius)",
62 |         md: "calc(var(--radius) - 2px)",
63 |         sm: "calc(var(--radius) - 4px)",
64 |       },
65 |       keyframes: {
66 |         "accordion-down": {
67 |           from: { height: "0" },
68 |           to: { height: "var(--radix-accordion-content-height)" },
69 |         },
70 |         "accordion-up": {
71 |           from: { height: "var(--radix-accordion-content-height)" },
72 |           to: { height: "0" },
73 |         },
74 |       },
75 |       animation: {
76 |         "accordion-down": "accordion-down 0.2s ease-out",
77 |         "accordion-up": "accordion-up 0.2s ease-out",
78 |       },
79 |     },
80 |   },
81 |   plugins: [require("tailwindcss-animate")],
82 | } satisfies Config
83 | 
84 | export default config
85 | 


--------------------------------------------------------------------------------
/src/email/components/OrderInformation.tsx:
--------------------------------------------------------------------------------
 1 | import { formatCurrency } from "@/lib/formatters"
 2 | import {
 3 |   Button,
 4 |   Column,
 5 |   Img,
 6 |   Row,
 7 |   Section,
 8 |   Text,
 9 | } from "@react-email/components"
10 | 
11 | type OrderInformationProps = {
12 |   order: { id: string; createdAt: Date; pricePaidInCents: number }
13 |   product: { imagePath: string; name: string; description: string }
14 |   downloadVerificationId: string
15 | }
16 | 
17 | const dateFormatter = new Intl.DateTimeFormat("en", { dateStyle: "medium" })
18 | 
19 | export function OrderInformation({
20 |   order,
21 |   product,
22 |   downloadVerificationId,
23 | }: OrderInformationProps) {
24 |   return (
25 |     <>
26 |       <Section>
27 |         <Row>
28 |           <Column>
29 |             <Text className="mb-0 text-gray-500 whitespace-nowrap text-nowrap mr-4">
30 |               Order ID
31 |             </Text>
32 |             <Text className="mt-0 mr-4">{order.id}</Text>
33 |           </Column>
34 |           <Column>
35 |             <Text className="mb-0 text-gray-500 whitespace-nowrap text-nowrap mr-4">
36 |               Purchased On
37 |             </Text>
38 |             <Text className="mt-0 mr-4">
39 |               {dateFormatter.format(order.createdAt)}
40 |             </Text>
41 |           </Column>
42 |           <Column>
43 |             <Text className="mb-0 text-gray-500 whitespace-nowrap text-nowrap mr-4">
44 |               Price Paid
45 |             </Text>
46 |             <Text className="mt-0 mr-4">
47 |               {formatCurrency(order.pricePaidInCents / 100)}
48 |             </Text>
49 |           </Column>
50 |         </Row>
51 |       </Section>
52 |       <Section className="border border-solid border-gray-500 rounded-lg p-4 md:p-6 my-4">
53 |         <Img
54 |           width="100%"
55 |           alt={product.name}
56 |           src={`${process.env.NEXT_PUBLIC_SERVER_URL}${product.imagePath}`}
57 |         />
58 |         <Row className="mt-8">
59 |           <Column className="align-bottom">
60 |             <Text className="text-lg font-bold m-0 mr-4">{product.name}</Text>
61 |           </Column>
62 |           <Column align="right">
63 |             <Button
64 |               href={`${process.env.NEXT_PUBLIC_SERVER_URL}/products/download/${downloadVerificationId}`}
65 |               className="bg-black text-white px-6 py-4 rounded text-lg"
66 |             >
67 |               Download
68 |             </Button>
69 |           </Column>
70 |         </Row>
71 |         <Row>
72 |           <Column>
73 |             <Text className="text-gray-500 mb-0">{product.description}</Text>
74 |           </Column>
75 |         </Row>
76 |       </Section>
77 |     </>
78 |   )
79 | }
80 | 


--------------------------------------------------------------------------------
/src/app/admin/page.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   Card,
 3 |   CardContent,
 4 |   CardDescription,
 5 |   CardHeader,
 6 |   CardTitle,
 7 | } from "@/components/ui/card"
 8 | import db from "@/db/db"
 9 | import { formatCurrency, formatNumber } from "@/lib/formatters"
10 | 
11 | async function getSalesData() {
12 |   const data = await db.order.aggregate({
13 |     _sum: { pricePaidInCents: true },
14 |     _count: true,
15 |   })
16 | 
17 |   return {
18 |     amount: (data._sum.pricePaidInCents || 0) / 100,
19 |     numberOfSales: data._count,
20 |   }
21 | }
22 | 
23 | async function getUserData() {
24 |   const [userCount, orderData] = await Promise.all([
25 |     db.user.count(),
26 |     db.order.aggregate({
27 |       _sum: { pricePaidInCents: true },
28 |     }),
29 |   ])
30 | 
31 |   return {
32 |     userCount,
33 |     averageValuePerUser:
34 |       userCount === 0
35 |         ? 0
36 |         : (orderData._sum.pricePaidInCents || 0) / userCount / 100,
37 |   }
38 | }
39 | 
40 | async function getProductData() {
41 |   const [activeCount, inactiveCount] = await Promise.all([
42 |     db.product.count({ where: { isAvailableForPurchase: true } }),
43 |     db.product.count({ where: { isAvailableForPurchase: false } }),
44 |   ])
45 | 
46 |   return { activeCount, inactiveCount }
47 | }
48 | 
49 | export default async function AdminDashboard() {
50 |   const [salesData, userData, productData] = await Promise.all([
51 |     getSalesData(),
52 |     getUserData(),
53 |     getProductData(),
54 |   ])
55 | 
56 |   return (
57 |     <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
58 |       <DashboardCard
59 |         title="Sales"
60 |         subtitle={`${formatNumber(salesData.numberOfSales)} Orders`}
61 |         body={formatCurrency(salesData.amount)}
62 |       />
63 |       <DashboardCard
64 |         title="Customers"
65 |         subtitle={`${formatCurrency(
66 |           userData.averageValuePerUser
67 |         )} Average Value`}
68 |         body={formatNumber(userData.userCount)}
69 |       />
70 |       <DashboardCard
71 |         title="Active Products"
72 |         subtitle={`${formatNumber(productData.inactiveCount)} Inactive`}
73 |         body={formatNumber(productData.activeCount)}
74 |       />
75 |     </div>
76 |   )
77 | }
78 | 
79 | type DashboardCardProps = {
80 |   title: string
81 |   subtitle: string
82 |   body: string
83 | }
84 | 
85 | function DashboardCard({ title, subtitle, body }: DashboardCardProps) {
86 |   return (
87 |     <Card>
88 |       <CardHeader>
89 |         <CardTitle>{title}</CardTitle>
90 |         <CardDescription>{subtitle}</CardDescription>
91 |       </CardHeader>
92 |       <CardContent>
93 |         <p>{body}</p>
94 |       </CardContent>
95 |     </Card>
96 |   )
97 | }
98 | 


--------------------------------------------------------------------------------
/src/components/ui/table.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | 
  3 | import { cn } from "@/lib/utils"
  4 | 
  5 | const Table = React.forwardRef<
  6 |   HTMLTableElement,
  7 |   React.HTMLAttributes<HTMLTableElement>
  8 | >(({ className, ...props }, ref) => (
  9 |   <div className="relative w-full overflow-auto">
 10 |     <table
 11 |       ref={ref}
 12 |       className={cn("w-full caption-bottom text-sm", className)}
 13 |       {...props}
 14 |     />
 15 |   </div>
 16 | ))
 17 | Table.displayName = "Table"
 18 | 
 19 | const TableHeader = React.forwardRef<
 20 |   HTMLTableSectionElement,
 21 |   React.HTMLAttributes<HTMLTableSectionElement>
 22 | >(({ className, ...props }, ref) => (
 23 |   <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
 24 | ))
 25 | TableHeader.displayName = "TableHeader"
 26 | 
 27 | const TableBody = React.forwardRef<
 28 |   HTMLTableSectionElement,
 29 |   React.HTMLAttributes<HTMLTableSectionElement>
 30 | >(({ className, ...props }, ref) => (
 31 |   <tbody
 32 |     ref={ref}
 33 |     className={cn("[&_tr:last-child]:border-0", className)}
 34 |     {...props}
 35 |   />
 36 | ))
 37 | TableBody.displayName = "TableBody"
 38 | 
 39 | const TableFooter = React.forwardRef<
 40 |   HTMLTableSectionElement,
 41 |   React.HTMLAttributes<HTMLTableSectionElement>
 42 | >(({ className, ...props }, ref) => (
 43 |   <tfoot
 44 |     ref={ref}
 45 |     className={cn(
 46 |       "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
 47 |       className
 48 |     )}
 49 |     {...props}
 50 |   />
 51 | ))
 52 | TableFooter.displayName = "TableFooter"
 53 | 
 54 | const TableRow = React.forwardRef<
 55 |   HTMLTableRowElement,
 56 |   React.HTMLAttributes<HTMLTableRowElement>
 57 | >(({ className, ...props }, ref) => (
 58 |   <tr
 59 |     ref={ref}
 60 |     className={cn(
 61 |       "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
 62 |       className
 63 |     )}
 64 |     {...props}
 65 |   />
 66 | ))
 67 | TableRow.displayName = "TableRow"
 68 | 
 69 | const TableHead = React.forwardRef<
 70 |   HTMLTableCellElement,
 71 |   React.ThHTMLAttributes<HTMLTableCellElement>
 72 | >(({ className, ...props }, ref) => (
 73 |   <th
 74 |     ref={ref}
 75 |     className={cn(
 76 |       "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
 77 |       className
 78 |     )}
 79 |     {...props}
 80 |   />
 81 | ))
 82 | TableHead.displayName = "TableHead"
 83 | 
 84 | const TableCell = React.forwardRef<
 85 |   HTMLTableCellElement,
 86 |   React.TdHTMLAttributes<HTMLTableCellElement>
 87 | >(({ className, ...props }, ref) => (
 88 |   <td
 89 |     ref={ref}
 90 |     className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
 91 |     {...props}
 92 |   />
 93 | ))
 94 | TableCell.displayName = "TableCell"
 95 | 
 96 | const TableCaption = React.forwardRef<
 97 |   HTMLTableCaptionElement,
 98 |   React.HTMLAttributes<HTMLTableCaptionElement>
 99 | >(({ className, ...props }, ref) => (
100 |   <caption
101 |     ref={ref}
102 |     className={cn("mt-4 text-sm text-muted-foreground", className)}
103 |     {...props}
104 |   />
105 | ))
106 | TableCaption.displayName = "TableCaption"
107 | 
108 | export {
109 |   Table,
110 |   TableHeader,
111 |   TableBody,
112 |   TableFooter,
113 |   TableHead,
114 |   TableRow,
115 |   TableCell,
116 |   TableCaption,
117 | }
118 | 


--------------------------------------------------------------------------------
/src/app/admin/products/_components/ProductForm.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import { Button } from "@/components/ui/button"
  4 | import { Input } from "@/components/ui/input"
  5 | import { Label } from "@/components/ui/label"
  6 | import { Textarea } from "@/components/ui/textarea"
  7 | import { formatCurrency } from "@/lib/formatters"
  8 | import { useState } from "react"
  9 | import { addProduct, updateProduct } from "../../_actions/products"
 10 | import { useFormState, useFormStatus } from "react-dom"
 11 | import { Product } from "@prisma/client"
 12 | import Image from "next/image"
 13 | 
 14 | export function ProductForm({ product }: { product?: Product | null }) {
 15 |   const [error, action] = useFormState(
 16 |     product == null ? addProduct : updateProduct.bind(null, product.id),
 17 |     {}
 18 |   )
 19 |   const [priceInCents, setPriceInCents] = useState<number | undefined>(
 20 |     product?.priceInCents
 21 |   )
 22 | 
 23 |   return (
 24 |     <form action={action} className="space-y-8">
 25 |       <div className="space-y-2">
 26 |         <Label htmlFor="name">Name</Label>
 27 |         <Input
 28 |           type="text"
 29 |           id="name"
 30 |           name="name"
 31 |           required
 32 |           defaultValue={product?.name || ""}
 33 |         />
 34 |         {error.name && <div className="text-destructive">{error.name}</div>}
 35 |       </div>
 36 |       <div className="space-y-2">
 37 |         <Label htmlFor="priceInCents">Price In Cents</Label>
 38 |         <Input
 39 |           type="number"
 40 |           id="priceInCents"
 41 |           name="priceInCents"
 42 |           required
 43 |           value={priceInCents}
 44 |           onChange={e => setPriceInCents(Number(e.target.value) || undefined)}
 45 |         />
 46 |         <div className="text-muted-foreground">
 47 |           {formatCurrency((priceInCents || 0) / 100)}
 48 |         </div>
 49 |         {error.priceInCents && (
 50 |           <div className="text-destructive">{error.priceInCents}</div>
 51 |         )}
 52 |       </div>
 53 |       <div className="space-y-2">
 54 |         <Label htmlFor="description">Description</Label>
 55 |         <Textarea
 56 |           id="description"
 57 |           name="description"
 58 |           required
 59 |           defaultValue={product?.description}
 60 |         />
 61 |         {error.description && (
 62 |           <div className="text-destructive">{error.description}</div>
 63 |         )}
 64 |       </div>
 65 |       <div className="space-y-2">
 66 |         <Label htmlFor="file">File</Label>
 67 |         <Input type="file" id="file" name="file" required={product == null} />
 68 |         {product != null && (
 69 |           <div className="text-muted-foreground">{product.filePath}</div>
 70 |         )}
 71 |         {error.file && <div className="text-destructive">{error.file}</div>}
 72 |       </div>
 73 |       <div className="space-y-2">
 74 |         <Label htmlFor="image">Image</Label>
 75 |         <Input type="file" id="image" name="image" required={product == null} />
 76 |         {product != null && (
 77 |           <Image
 78 |             src={product.imagePath}
 79 |             height="400"
 80 |             width="400"
 81 |             alt="Product Image"
 82 |           />
 83 |         )}
 84 |         {error.image && <div className="text-destructive">{error.image}</div>}
 85 |       </div>
 86 |       <SubmitButton />
 87 |     </form>
 88 |   )
 89 | }
 90 | 
 91 | function SubmitButton() {
 92 |   const { pending } = useFormStatus()
 93 | 
 94 |   return (
 95 |     <Button type="submit" disabled={pending}>
 96 |       {pending ? "Saving..." : "Save"}
 97 |     </Button>
 98 |   )
 99 | }
100 | 


--------------------------------------------------------------------------------
/src/app/admin/_actions/products.ts:
--------------------------------------------------------------------------------
  1 | "use server"
  2 | 
  3 | import db from "@/db/db"
  4 | import { z } from "zod"
  5 | import fs from "fs/promises"
  6 | import { notFound, redirect } from "next/navigation"
  7 | import { revalidatePath } from "next/cache"
  8 | 
  9 | const fileSchema = z.instanceof(File, { message: "Required" })
 10 | const imageSchema = fileSchema.refine(
 11 |   file => file.size === 0 || file.type.startsWith("image/")
 12 | )
 13 | 
 14 | const addSchema = z.object({
 15 |   name: z.string().min(1),
 16 |   description: z.string().min(1),
 17 |   priceInCents: z.coerce.number().int().min(1),
 18 |   file: fileSchema.refine(file => file.size > 0, "Required"),
 19 |   image: imageSchema.refine(file => file.size > 0, "Required"),
 20 | })
 21 | 
 22 | export async function addProduct(prevState: unknown, formData: FormData) {
 23 |   const result = addSchema.safeParse(Object.fromEntries(formData.entries()))
 24 |   if (result.success === false) {
 25 |     return result.error.formErrors.fieldErrors
 26 |   }
 27 | 
 28 |   const data = result.data
 29 | 
 30 |   await fs.mkdir("products", { recursive: true })
 31 |   const filePath = `products/${crypto.randomUUID()}-${data.file.name}`
 32 |   await fs.writeFile(filePath, Buffer.from(await data.file.arrayBuffer()))
 33 | 
 34 |   await fs.mkdir("public/products", { recursive: true })
 35 |   const imagePath = `/products/${crypto.randomUUID()}-${data.image.name}`
 36 |   await fs.writeFile(
 37 |     `public${imagePath}`,
 38 |     Buffer.from(await data.image.arrayBuffer())
 39 |   )
 40 | 
 41 |   await db.product.create({
 42 |     data: {
 43 |       isAvailableForPurchase: false,
 44 |       name: data.name,
 45 |       description: data.description,
 46 |       priceInCents: data.priceInCents,
 47 |       filePath,
 48 |       imagePath,
 49 |     },
 50 |   })
 51 | 
 52 |   revalidatePath("/")
 53 |   revalidatePath("/products")
 54 | 
 55 |   redirect("/admin/products")
 56 | }
 57 | 
 58 | const editSchema = addSchema.extend({
 59 |   file: fileSchema.optional(),
 60 |   image: imageSchema.optional(),
 61 | })
 62 | 
 63 | export async function updateProduct(
 64 |   id: string,
 65 |   prevState: unknown,
 66 |   formData: FormData
 67 | ) {
 68 |   const result = editSchema.safeParse(Object.fromEntries(formData.entries()))
 69 |   if (result.success === false) {
 70 |     return result.error.formErrors.fieldErrors
 71 |   }
 72 | 
 73 |   const data = result.data
 74 |   const product = await db.product.findUnique({ where: { id } })
 75 | 
 76 |   if (product == null) return notFound()
 77 | 
 78 |   let filePath = product.filePath
 79 |   if (data.file != null && data.file.size > 0) {
 80 |     await fs.unlink(product.filePath)
 81 |     filePath = `products/${crypto.randomUUID()}-${data.file.name}`
 82 |     await fs.writeFile(filePath, Buffer.from(await data.file.arrayBuffer()))
 83 |   }
 84 | 
 85 |   let imagePath = product.imagePath
 86 |   if (data.image != null && data.image.size > 0) {
 87 |     await fs.unlink(`public${product.imagePath}`)
 88 |     imagePath = `/products/${crypto.randomUUID()}-${data.image.name}`
 89 |     await fs.writeFile(
 90 |       `public${imagePath}`,
 91 |       Buffer.from(await data.image.arrayBuffer())
 92 |     )
 93 |   }
 94 | 
 95 |   await db.product.update({
 96 |     where: { id },
 97 |     data: {
 98 |       name: data.name,
 99 |       description: data.description,
100 |       priceInCents: data.priceInCents,
101 |       filePath,
102 |       imagePath,
103 |     },
104 |   })
105 | 
106 |   revalidatePath("/")
107 |   revalidatePath("/products")
108 | 
109 |   redirect("/admin/products")
110 | }
111 | 
112 | export async function toggleProductAvailability(
113 |   id: string,
114 |   isAvailableForPurchase: boolean
115 | ) {
116 |   await db.product.update({ where: { id }, data: { isAvailableForPurchase } })
117 | 
118 |   revalidatePath("/")
119 |   revalidatePath("/products")
120 | }
121 | 
122 | export async function deleteProduct(id: string) {
123 |   const product = await db.product.delete({ where: { id } })
124 | 
125 |   if (product == null) return notFound()
126 | 
127 |   await fs.unlink(product.filePath)
128 |   await fs.unlink(`public${product.imagePath}`)
129 | 
130 |   revalidatePath("/")
131 |   revalidatePath("/products")
132 | }
133 | 


--------------------------------------------------------------------------------
/src/app/admin/products/page.tsx:
--------------------------------------------------------------------------------
  1 | import { Button } from "@/components/ui/button"
  2 | import { PageHeader } from "../_components/PageHeader"
  3 | import Link from "next/link"
  4 | import {
  5 |   Table,
  6 |   TableBody,
  7 |   TableCell,
  8 |   TableHead,
  9 |   TableHeader,
 10 |   TableRow,
 11 | } from "@/components/ui/table"
 12 | import db from "@/db/db"
 13 | import { CheckCircle2, MoreVertical, XCircle } from "lucide-react"
 14 | import { formatCurrency, formatNumber } from "@/lib/formatters"
 15 | import {
 16 |   DropdownMenu,
 17 |   DropdownMenuContent,
 18 |   DropdownMenuItem,
 19 |   DropdownMenuSeparator,
 20 |   DropdownMenuTrigger,
 21 | } from "@/components/ui/dropdown-menu"
 22 | import {
 23 |   ActiveToggleDropdownItem,
 24 |   DeleteDropdownItem,
 25 | } from "./_components/ProductActions"
 26 | 
 27 | export default function AdminProductsPage() {
 28 |   return (
 29 |     <>
 30 |       <div className="flex justify-between items-center gap-4">
 31 |         <PageHeader>Products</PageHeader>
 32 |         <Button asChild>
 33 |           <Link href="/admin/products/new">Add Product</Link>
 34 |         </Button>
 35 |       </div>
 36 |       <ProductsTable />
 37 |     </>
 38 |   )
 39 | }
 40 | 
 41 | async function ProductsTable() {
 42 |   const products = await db.product.findMany({
 43 |     select: {
 44 |       id: true,
 45 |       name: true,
 46 |       priceInCents: true,
 47 |       isAvailableForPurchase: true,
 48 |       _count: { select: { orders: true } },
 49 |     },
 50 |     orderBy: { name: "asc" },
 51 |   })
 52 | 
 53 |   if (products.length === 0) return <p>No products found</p>
 54 | 
 55 |   return (
 56 |     <Table>
 57 |       <TableHeader>
 58 |         <TableRow>
 59 |           <TableHead className="w-0">
 60 |             <span className="sr-only">Available For Purchase</span>
 61 |           </TableHead>
 62 |           <TableHead>Name</TableHead>
 63 |           <TableHead>Price</TableHead>
 64 |           <TableHead>Orders</TableHead>
 65 |           <TableHead className="w-0">
 66 |             <span className="sr-only">Actions</span>
 67 |           </TableHead>
 68 |         </TableRow>
 69 |       </TableHeader>
 70 |       <TableBody>
 71 |         {products.map(product => (
 72 |           <TableRow key={product.id}>
 73 |             <TableCell>
 74 |               {product.isAvailableForPurchase ? (
 75 |                 <>
 76 |                   <span className="sr-only">Available</span>
 77 |                   <CheckCircle2 />
 78 |                 </>
 79 |               ) : (
 80 |                 <>
 81 |                   <span className="sr-only">Unavailable</span>
 82 |                   <XCircle className="stroke-destructive" />
 83 |                 </>
 84 |               )}
 85 |             </TableCell>
 86 |             <TableCell>{product.name}</TableCell>
 87 |             <TableCell>{formatCurrency(product.priceInCents / 100)}</TableCell>
 88 |             <TableCell>{formatNumber(product._count.orders)}</TableCell>
 89 |             <TableCell>
 90 |               <DropdownMenu>
 91 |                 <DropdownMenuTrigger>
 92 |                   <MoreVertical />
 93 |                   <span className="sr-only">Actions</span>
 94 |                 </DropdownMenuTrigger>
 95 |                 <DropdownMenuContent>
 96 |                   <DropdownMenuItem asChild>
 97 |                     <a download href={`/admin/products/${product.id}/download`}>
 98 |                       Download
 99 |                     </a>
100 |                   </DropdownMenuItem>
101 |                   <DropdownMenuItem asChild>
102 |                     <Link href={`/admin/products/${product.id}/edit`}>
103 |                       Edit
104 |                     </Link>
105 |                   </DropdownMenuItem>
106 |                   <ActiveToggleDropdownItem
107 |                     id={product.id}
108 |                     isAvailableForPurchase={product.isAvailableForPurchase}
109 |                   />
110 |                   <DropdownMenuSeparator />
111 |                   <DeleteDropdownItem
112 |                     id={product.id}
113 |                     disabled={product._count.orders > 0}
114 |                   />
115 |                 </DropdownMenuContent>
116 |               </DropdownMenu>
117 |             </TableCell>
118 |           </TableRow>
119 |         ))}
120 |       </TableBody>
121 |     </Table>
122 |   )
123 | }
124 | 


--------------------------------------------------------------------------------
/src/app/(customerFacing)/products/[id]/purchase/_components/CheckoutForm.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import { userOrderExists } from "@/app/actions/orders"
  4 | import { Button } from "@/components/ui/button"
  5 | import {
  6 |   Card,
  7 |   CardContent,
  8 |   CardDescription,
  9 |   CardFooter,
 10 |   CardHeader,
 11 |   CardTitle,
 12 | } from "@/components/ui/card"
 13 | import { formatCurrency } from "@/lib/formatters"
 14 | import {
 15 |   Elements,
 16 |   LinkAuthenticationElement,
 17 |   PaymentElement,
 18 |   useElements,
 19 |   useStripe,
 20 | } from "@stripe/react-stripe-js"
 21 | import { loadStripe } from "@stripe/stripe-js"
 22 | import Image from "next/image"
 23 | import { FormEvent, useState } from "react"
 24 | 
 25 | type CheckoutFormProps = {
 26 |   product: {
 27 |     id: string
 28 |     imagePath: string
 29 |     name: string
 30 |     priceInCents: number
 31 |     description: string
 32 |   }
 33 |   clientSecret: string
 34 | }
 35 | 
 36 | const stripePromise = loadStripe(
 37 |   process.env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY as string
 38 | )
 39 | 
 40 | export function CheckoutForm({ product, clientSecret }: CheckoutFormProps) {
 41 |   return (
 42 |     <div className="max-w-5xl w-full mx-auto space-y-8">
 43 |       <div className="flex gap-4 items-center">
 44 |         <div className="aspect-video flex-shrink-0 w-1/3 relative">
 45 |           <Image
 46 |             src={product.imagePath}
 47 |             fill
 48 |             alt={product.name}
 49 |             className="object-cover"
 50 |           />
 51 |         </div>
 52 |         <div>
 53 |           <div className="text-lg">
 54 |             {formatCurrency(product.priceInCents / 100)}
 55 |           </div>
 56 |           <h1 className="text-2xl font-bold">{product.name}</h1>
 57 |           <div className="line-clamp-3 text-muted-foreground">
 58 |             {product.description}
 59 |           </div>
 60 |         </div>
 61 |       </div>
 62 |       <Elements options={{ clientSecret }} stripe={stripePromise}>
 63 |         <Form priceInCents={product.priceInCents} productId={product.id} />
 64 |       </Elements>
 65 |     </div>
 66 |   )
 67 | }
 68 | 
 69 | function Form({
 70 |   priceInCents,
 71 |   productId,
 72 | }: {
 73 |   priceInCents: number
 74 |   productId: string
 75 | }) {
 76 |   const stripe = useStripe()
 77 |   const elements = useElements()
 78 |   const [isLoading, setIsLoading] = useState(false)
 79 |   const [errorMessage, setErrorMessage] = useState<string>()
 80 |   const [email, setEmail] = useState<string>()
 81 | 
 82 |   async function handleSubmit(e: FormEvent) {
 83 |     e.preventDefault()
 84 | 
 85 |     if (stripe == null || elements == null || email == null) return
 86 | 
 87 |     setIsLoading(true)
 88 | 
 89 |     const orderExists = await userOrderExists(email, productId)
 90 | 
 91 |     if (orderExists) {
 92 |       setErrorMessage(
 93 |         "You have already purchased this product. Try downloading it from the My Orders page"
 94 |       )
 95 |       setIsLoading(false)
 96 |       return
 97 |     }
 98 | 
 99 |     stripe
100 |       .confirmPayment({
101 |         elements,
102 |         confirmParams: {
103 |           return_url: `${process.env.NEXT_PUBLIC_SERVER_URL}/stripe/purchase-success`,
104 |         },
105 |       })
106 |       .then(({ error }) => {
107 |         if (error.type === "card_error" || error.type === "validation_error") {
108 |           setErrorMessage(error.message)
109 |         } else {
110 |           setErrorMessage("An unknown error occurred")
111 |         }
112 |       })
113 |       .finally(() => setIsLoading(false))
114 |   }
115 | 
116 |   return (
117 |     <form onSubmit={handleSubmit}>
118 |       <Card>
119 |         <CardHeader>
120 |           <CardTitle>Checkout</CardTitle>
121 |           {errorMessage && (
122 |             <CardDescription className="text-destructive">
123 |               {errorMessage}
124 |             </CardDescription>
125 |           )}
126 |         </CardHeader>
127 |         <CardContent>
128 |           <PaymentElement />
129 |           <div className="mt-4">
130 |             <LinkAuthenticationElement
131 |               onChange={e => setEmail(e.value.email)}
132 |             />
133 |           </div>
134 |         </CardContent>
135 |         <CardFooter>
136 |           <Button
137 |             className="w-full"
138 |             size="lg"
139 |             disabled={stripe == null || elements == null || isLoading}
140 |           >
141 |             {isLoading
142 |               ? "Purchasing..."
143 |               : `Purchase - ${formatCurrency(priceInCents / 100)}`}
144 |           </Button>
145 |         </CardFooter>
146 |       </Card>
147 |     </form>
148 |   )
149 | }
150 | 


--------------------------------------------------------------------------------
/src/components/ui/dropdown-menu.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
  5 | import { Check, ChevronRight, Circle } from "lucide-react"
  6 | 
  7 | import { cn } from "@/lib/utils"
  8 | import { cva } from "class-variance-authority"
  9 | 
 10 | const DropdownMenu = DropdownMenuPrimitive.Root
 11 | 
 12 | const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
 13 | 
 14 | const DropdownMenuGroup = DropdownMenuPrimitive.Group
 15 | 
 16 | const DropdownMenuPortal = DropdownMenuPrimitive.Portal
 17 | 
 18 | const DropdownMenuSub = DropdownMenuPrimitive.Sub
 19 | 
 20 | const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
 21 | 
 22 | const DropdownMenuSubTrigger = React.forwardRef<
 23 |   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
 24 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
 25 |     inset?: boolean
 26 |   }
 27 | >(({ className, inset, children, ...props }, ref) => (
 28 |   <DropdownMenuPrimitive.SubTrigger
 29 |     ref={ref}
 30 |     className={cn(
 31 |       "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
 32 |       inset && "pl-8",
 33 |       className
 34 |     )}
 35 |     {...props}
 36 |   >
 37 |     {children}
 38 |     <ChevronRight className="ml-auto h-4 w-4" />
 39 |   </DropdownMenuPrimitive.SubTrigger>
 40 | ))
 41 | DropdownMenuSubTrigger.displayName =
 42 |   DropdownMenuPrimitive.SubTrigger.displayName
 43 | 
 44 | const DropdownMenuSubContent = React.forwardRef<
 45 |   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
 46 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
 47 | >(({ className, ...props }, ref) => (
 48 |   <DropdownMenuPrimitive.SubContent
 49 |     ref={ref}
 50 |     className={cn(
 51 |       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 52 |       className
 53 |     )}
 54 |     {...props}
 55 |   />
 56 | ))
 57 | DropdownMenuSubContent.displayName =
 58 |   DropdownMenuPrimitive.SubContent.displayName
 59 | 
 60 | const DropdownMenuContent = React.forwardRef<
 61 |   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
 62 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
 63 | >(({ className, sideOffset = 4, ...props }, ref) => (
 64 |   <DropdownMenuPrimitive.Portal>
 65 |     <DropdownMenuPrimitive.Content
 66 |       ref={ref}
 67 |       sideOffset={sideOffset}
 68 |       className={cn(
 69 |         "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 70 |         className
 71 |       )}
 72 |       {...props}
 73 |     />
 74 |   </DropdownMenuPrimitive.Portal>
 75 | ))
 76 | DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
 77 | 
 78 | const dropdownMenuItemVariants = cva(
 79 |   "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors  data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 80 |   {
 81 |     variants: {
 82 |       variant: {
 83 |         default: "focus:bg-accent focus:text-accent-foreground0",
 84 |         destructive:
 85 |           "focus:bg-destructive focus:text-destructive-foreground text-destructive",
 86 |       },
 87 |     },
 88 |     defaultVariants: {
 89 |       variant: "default",
 90 |     },
 91 |   }
 92 | )
 93 | 
 94 | const DropdownMenuItem = React.forwardRef<
 95 |   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
 96 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
 97 |     inset?: boolean
 98 |     variant?: "default" | "destructive"
 99 |   }
100 | >(({ className, inset, variant, ...props }, ref) => (
101 |   <DropdownMenuPrimitive.Item
102 |     ref={ref}
103 |     className={cn(
104 |       dropdownMenuItemVariants({ variant, className }),
105 |       inset && "pl-8"
106 |     )}
107 |     {...props}
108 |   />
109 | ))
110 | DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
111 | 
112 | const DropdownMenuCheckboxItem = React.forwardRef<
113 |   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
114 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
115 | >(({ className, children, checked, ...props }, ref) => (
116 |   <DropdownMenuPrimitive.CheckboxItem
117 |     ref={ref}
118 |     className={cn(
119 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
120 |       className
121 |     )}
122 |     checked={checked}
123 |     {...props}
124 |   >
125 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
126 |       <DropdownMenuPrimitive.ItemIndicator>
127 |         <Check className="h-4 w-4" />
128 |       </DropdownMenuPrimitive.ItemIndicator>
129 |     </span>
130 |     {children}
131 |   </DropdownMenuPrimitive.CheckboxItem>
132 | ))
133 | DropdownMenuCheckboxItem.displayName =
134 |   DropdownMenuPrimitive.CheckboxItem.displayName
135 | 
136 | const DropdownMenuRadioItem = React.forwardRef<
137 |   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
138 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
139 | >(({ className, children, ...props }, ref) => (
140 |   <DropdownMenuPrimitive.RadioItem
141 |     ref={ref}
142 |     className={cn(
143 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
144 |       className
145 |     )}
146 |     {...props}
147 |   >
148 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
149 |       <DropdownMenuPrimitive.ItemIndicator>
150 |         <Circle className="h-2 w-2 fill-current" />
151 |       </DropdownMenuPrimitive.ItemIndicator>
152 |     </span>
153 |     {children}
154 |   </DropdownMenuPrimitive.RadioItem>
155 | ))
156 | DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
157 | 
158 | const DropdownMenuLabel = React.forwardRef<
159 |   React.ElementRef<typeof DropdownMenuPrimitive.Label>,
160 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
161 |     inset?: boolean
162 |   }
163 | >(({ className, inset, ...props }, ref) => (
164 |   <DropdownMenuPrimitive.Label
165 |     ref={ref}
166 |     className={cn(
167 |       "px-2 py-1.5 text-sm font-semibold",
168 |       inset && "pl-8",
169 |       className
170 |     )}
171 |     {...props}
172 |   />
173 | ))
174 | DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
175 | 
176 | const DropdownMenuSeparator = React.forwardRef<
177 |   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
178 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
179 | >(({ className, ...props }, ref) => (
180 |   <DropdownMenuPrimitive.Separator
181 |     ref={ref}
182 |     className={cn("-mx-1 my-1 h-px bg-muted", className)}
183 |     {...props}
184 |   />
185 | ))
186 | DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
187 | 
188 | const DropdownMenuShortcut = ({
189 |   className,
190 |   ...props
191 | }: React.HTMLAttributes<HTMLSpanElement>) => {
192 |   return (
193 |     <span
194 |       className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
195 |       {...props}
196 |     />
197 |   )
198 | }
199 | DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
200 | 
201 | export {
202 |   DropdownMenu,
203 |   DropdownMenuTrigger,
204 |   DropdownMenuContent,
205 |   DropdownMenuItem,
206 |   DropdownMenuCheckboxItem,
207 |   DropdownMenuRadioItem,
208 |   DropdownMenuLabel,
209 |   DropdownMenuSeparator,
210 |   DropdownMenuShortcut,
211 |   DropdownMenuGroup,
212 |   DropdownMenuPortal,
213 |   DropdownMenuSub,
214 |   DropdownMenuSubContent,
215 |   DropdownMenuSubTrigger,
216 |   DropdownMenuRadioGroup,
217 | }
218 | 


--------------------------------------------------------------------------------