53 |
76 | )
77 | }
78 |
79 | async function ProductSuspense({
80 | productsFetcher,
81 | }: {
82 | productsFetcher: () => Promise
54 |
62 | {title}
55 | 61 |
63 |
66 |
74 |
75 |
58 |
90 |
95 |
96 |
97 | )
98 | }
99 |
100 | function Form({
101 | priceInCents,
102 | productId,
103 | discountCode,
104 | }: {
105 | priceInCents: number
106 | productId: string
107 | discountCode?: {
108 | id: string
109 | discountAmount: number
110 | discountType: DiscountCodeType
111 | }
112 | }) {
113 | const stripe = useStripe()
114 | const elements = useElements()
115 | const [isLoading, setIsLoading] = useState(false)
116 | const [errorMessage, setErrorMessage] = useState
59 |
86 |
60 |
67 |
68 |
85 |
69 |
80 |
74 | {formatCurrency(product.priceInCents / 100)}
75 |
76 | {isDiscounted && (
77 | {formatCurrency(amount / 100)}
78 | )}
79 | {product.name}
81 |
82 | {product.description}
83 |
84 | Download link expired
8 | 11 | 12 | ) 13 | } 14 | -------------------------------------------------------------------------------- /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 |
16 |
19 |
30 |
31 | )
32 | }
33 |
34 | async function ProductsSuspense() {
35 | const products = await getProducts()
36 |
37 | return products.map(product =>
29 |
62 | )
63 | }
64 |
65 | async function createDownloadVerification(productId: string) {
66 | return (
67 | await db.downloadVerification.create({
68 | data: {
69 | productId,
70 | expiresAt: new Date(Date.now() + 1000 * 60 * 60 * 24),
71 | },
72 | })
73 | ).id
74 | }
75 |
--------------------------------------------------------------------------------
/src/app/admin/_actions/discountCodes.ts:
--------------------------------------------------------------------------------
1 | "use server"
2 |
3 | import db from "@/db/db"
4 | import { DiscountCodeType } from "@prisma/client"
5 | import { notFound, redirect } from "next/navigation"
6 | import { z } from "zod"
7 |
8 | const addSchema = z
9 | .object({
10 | code: z.string().min(1),
11 | discountAmount: z.coerce.number().int().min(1),
12 | discountType: z.nativeEnum(DiscountCodeType),
13 | allProducts: z.coerce.boolean(),
14 | productIds: z.array(z.string()).optional(),
15 | expiresAt: z.preprocess(
16 | value => (value === "" ? undefined : value),
17 | z.coerce.date().min(new Date()).optional()
18 | ),
19 | limit: z.preprocess(
20 | value => (value === "" ? undefined : value),
21 | z.coerce.number().int().min(1).optional()
22 | ),
23 | })
24 | .refine(
25 | data =>
26 | data.discountAmount <= 100 ||
27 | data.discountType !== DiscountCodeType.PERCENTAGE,
28 | {
29 | message: "Percentage discount must be less than or equal to 100",
30 | path: ["discountAmount"],
31 | }
32 | )
33 | .refine(data => !data.allProducts || data.productIds == null, {
34 | message: "Cannot select products when all products is selected",
35 | path: ["productIds"],
36 | })
37 | .refine(data => data.allProducts || data.productIds != null, {
38 | message: "Must select products when all products is not selected",
39 | path: ["productIds"],
40 | })
41 |
42 | export async function addDiscountCode(prevState: unknown, formData: FormData) {
43 | const productIds = formData.getAll("productIds")
44 | const result = addSchema.safeParse({
45 | ...Object.fromEntries(formData.entries()),
46 | productIds: productIds.length > 0 ? productIds : undefined,
47 | })
48 |
49 | if (result.success === false) return result.error.formErrors.fieldErrors
50 |
51 | const data = result.data
52 |
53 | await db.discountCode.create({
54 | data: {
55 | code: data.code,
56 | discountAmount: data.discountAmount,
57 | discountType: data.discountType,
58 | allProducts: data.allProducts,
59 | products:
60 | data.productIds != null
61 | ? { connect: data.productIds.map(id => ({ id })) }
62 | : undefined,
63 | expiresAt: data.expiresAt,
64 | limit: data.limit,
65 | },
66 | })
67 |
68 | redirect("/admin/discount-codes")
69 | }
70 |
71 | export async function toggleDiscountCodeActive(id: string, isActive: boolean) {
72 | await db.discountCode.update({ where: { id }, data: { isActive } })
73 | }
74 |
75 | export async function deleteDiscountCode(id: string) {
76 | const discountCode = await db.discountCode.delete({ where: { id } })
77 |
78 | if (discountCode == null) return notFound()
79 |
80 | return discountCode
81 | }
82 |
--------------------------------------------------------------------------------
/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/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/_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/_components/ChartCard.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import { Button } from "@/components/ui/button"
4 | import { Calendar } from "@/components/ui/calendar"
5 | import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
6 | import {
7 | DropdownMenu,
8 | DropdownMenuContent,
9 | DropdownMenuItem,
10 | DropdownMenuSeparator,
11 | DropdownMenuSub,
12 | DropdownMenuSubContent,
13 | DropdownMenuSubTrigger,
14 | DropdownMenuTrigger,
15 | } from "@/components/ui/dropdown-menu"
16 | import { RANGE_OPTIONS } from "@/lib/rangeOptions"
17 | import { subDays } from "date-fns"
18 | import { usePathname, useRouter, useSearchParams } from "next/navigation"
19 | import { ReactNode, useState } from "react"
20 | import { DateRange } from "react-day-picker"
21 | import { date } from "zod"
22 |
23 | type ChartCardProps = {
24 | title: string
25 | queryKey: string
26 | selectedRangeLabel: string
27 | children: ReactNode
28 | }
29 |
30 | export function ChartCard({
31 | title,
32 | children,
33 | queryKey,
34 | selectedRangeLabel,
35 | }: ChartCardProps) {
36 | const searchParams = useSearchParams()
37 | const router = useRouter()
38 | const pathname = usePathname()
39 | const [dateRange, setDateRange] = useState30 | {isSuccess ? "Success!" : "Error!"} 31 |
32 |
33 |
61 |
34 |
41 |
42 |
60 | {product.name}
43 |
44 | {product.description}
45 |
46 |
59 |
63 | {title}
64 |
65 |
66 |
67 |
68 |
69 | {Object.entries(RANGE_OPTIONS).map(([key, value]) => (
70 | setRange(key as keyof typeof RANGE_OPTIONS)}
72 | key={key}
73 | >
74 | {value.label}
75 |
76 | ))}
77 |
79 | Custom
80 |
81 |
104 |
105 |
106 |
107 |
108 |
82 |
91 |
101 |
102 |
103 | {children}
5 | } 6 | -------------------------------------------------------------------------------- /src/app/admin/_components/charts/OrdersByDayChart.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import { formatCurrency } from "@/lib/formatters" 4 | import { 5 | CartesianGrid, 6 | Line, 7 | LineChart, 8 | ResponsiveContainer, 9 | Tooltip, 10 | XAxis, 11 | YAxis, 12 | } from "recharts" 13 | 14 | type OrdersByDayChartProps = { 15 | data: { 16 | date: string 17 | totalSales: number 18 | }[] 19 | } 20 | 21 | export function OrdersByDayChart({ data }: OrdersByDayChartProps) { 22 | return ( 23 |
85 | Coupons
86 |
89 |
90 |
96 |
99 |
100 | )
101 | }
102 |
103 | type DiscountCodesTableProps = {
104 | discountCodes: AwaitedExpired Coupons
97 |{children}
20 |
21 | )
22 | }
23 |
--------------------------------------------------------------------------------
/src/app/admin/loading.tsx:
--------------------------------------------------------------------------------
1 | import { Loader2 } from "lucide-react"
2 |
3 | export default function AdminLoading() {
4 | return (
5 |
6 |
8 | )
9 | }
10 |
--------------------------------------------------------------------------------
/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 | No sales found
47 | 48 | return ( 49 |
232 |
250 |
251 |
256 |
258 |
263 |
265 |
270 |
272 |
273 |
274 | )
275 | }
276 |
277 | type DashboardCardProps = {
278 | title: string
279 | subtitle: string
280 | body: string
281 | }
282 |
283 | function DashboardCard({ title, subtitle, body }: DashboardCardProps) {
284 | return (
285 | {body}
292 |
31 | Products
32 |
35 |
36 | No products found
54 | 55 | return ( 56 |No customers found
44 | 45 | return ( 46 |
32 |
34 | {description}
40 |Hi
3 | } 4 | -------------------------------------------------------------------------------- /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
10 |
15 |
16 | ))
17 | Table.displayName = "Table"
18 |
19 | const TableHeader = React.forwardRef<
20 | HTMLTableSectionElement,
21 | React.HTMLAttributes} 74 |