Add commissions
This commit is contained in:
304
src/components/commissions/CommissionOrderForm.tsx
Normal file
304
src/components/commissions/CommissionOrderForm.tsx
Normal file
@ -0,0 +1,304 @@
|
||||
"use client"
|
||||
|
||||
import { Button } from "@/components/ui/button"
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "@/components/ui/form"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Textarea } from "@/components/ui/textarea"
|
||||
import { CommissionCustomInput, CommissionExtra, CommissionOption, CommissionType, CommissionTypeCustomInput, CommissionTypeExtra, CommissionTypeOption } from "@/generated/prisma/client"
|
||||
import { commissionOrderSchema } from "@/schemas/commissionOrder"
|
||||
import { calculatePriceRange } from "@/utils/calculatePrice"
|
||||
import { zodResolver } from "@hookform/resolvers/zod"
|
||||
import Link from "next/link"
|
||||
import { useMemo, useState } from "react"
|
||||
import { useForm, useWatch } from "react-hook-form"
|
||||
import * as z from "zod/v4"
|
||||
import { FileDropzone } from "./FileDropzone"
|
||||
|
||||
type CommissionTypeWithRelations = CommissionType & {
|
||||
options: (CommissionTypeOption & { option: CommissionOption })[]
|
||||
extras: (CommissionTypeExtra & { extra: CommissionExtra })[]
|
||||
customInputs: (CommissionTypeCustomInput & { customInput: CommissionCustomInput })[]
|
||||
}
|
||||
|
||||
type Props = {
|
||||
types: CommissionTypeWithRelations[]
|
||||
}
|
||||
|
||||
export function CommissionOrderForm({ types }: Props) {
|
||||
const form = useForm<z.infer<typeof commissionOrderSchema>>({
|
||||
resolver: zodResolver(commissionOrderSchema),
|
||||
defaultValues: {
|
||||
typeId: "",
|
||||
optionId: "",
|
||||
extraIds: [],
|
||||
customerName: "",
|
||||
customerEmail: "",
|
||||
message: "",
|
||||
},
|
||||
})
|
||||
|
||||
const [files, setFiles] = useState<File[]>([])
|
||||
|
||||
const typeId = useWatch({ control: form.control, name: "typeId" })
|
||||
const optionId = useWatch({ control: form.control, name: "optionId" })
|
||||
const extraIds = useWatch({ control: form.control, name: "extraIds" })
|
||||
|
||||
const selectedType = useMemo(
|
||||
() => types.find((t) => t.id === typeId),
|
||||
[types, typeId]
|
||||
)
|
||||
|
||||
const selectedOption = useMemo(
|
||||
() => selectedType?.options.find((o) => o.optionId === optionId),
|
||||
[selectedType, optionId]
|
||||
)
|
||||
|
||||
const selectedExtras = useMemo(
|
||||
() => selectedType?.extras.filter((e) => extraIds?.includes(e.extraId)) ?? [],
|
||||
[selectedType, extraIds]
|
||||
)
|
||||
|
||||
const [minPrice, maxPrice] = useMemo(() => {
|
||||
return calculatePriceRange(selectedOption, selectedExtras)
|
||||
}, [selectedOption, selectedExtras])
|
||||
|
||||
async function onSubmit(values: z.infer<typeof commissionOrderSchema>) {
|
||||
const { customFields, ...rest } = values
|
||||
console.log("Submit:", { ...rest, customFields, files })
|
||||
}
|
||||
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="typeId"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Choose a commission type</FormLabel>
|
||||
<FormControl>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{types.map((type) => (
|
||||
<Button
|
||||
key={type.id}
|
||||
type="button"
|
||||
variant={field.value === type.id ? "default" : "outline"}
|
||||
onClick={() => field.onChange(type.id)}
|
||||
>
|
||||
{type.name}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{selectedType && (
|
||||
<>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="optionId"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Base Option</FormLabel>
|
||||
<FormControl>
|
||||
<div className="space-y-1">
|
||||
{selectedType.options.map((opt) => (
|
||||
<label key={opt.id} className="flex items-center gap-2">
|
||||
<input
|
||||
type="radio"
|
||||
checked={field.value === opt.optionId}
|
||||
value={opt.optionId}
|
||||
onChange={() => field.onChange(opt.optionId)}
|
||||
/>
|
||||
{opt.option.name}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="extraIds"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Extras</FormLabel>
|
||||
<FormControl>
|
||||
<div className="space-y-1">
|
||||
{selectedType?.extras.map((ext) => (
|
||||
<label key={ext.id} className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={field.value?.includes(ext.extraId) ?? false}
|
||||
value={ext.extraId}
|
||||
onChange={(e) => {
|
||||
const checked = e.target.checked
|
||||
const newSet = new Set(field.value ?? [])
|
||||
if (checked) {
|
||||
newSet.add(ext.extraId)
|
||||
} else {
|
||||
newSet.delete(ext.extraId)
|
||||
}
|
||||
field.onChange(Array.from(newSet))
|
||||
}}
|
||||
/>
|
||||
{ext.extra.name}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="customerName"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Your Name</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="Jane Doe" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="customerEmail"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Email</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="jane@example.com" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="message"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Project Details</FormLabel>
|
||||
<FormControl>
|
||||
<Textarea
|
||||
placeholder="Describe what you’d like drawn..."
|
||||
rows={4}
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{selectedType && selectedType.customInputs.length > 0 && (
|
||||
<div className="space-y-4">
|
||||
{selectedType.customInputs.map((input) => {
|
||||
const name = `customFields.${input.customInput.name}`
|
||||
return (
|
||||
<FormField
|
||||
key={input.id}
|
||||
control={form.control}
|
||||
name={name as `customFields.${string}`}
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{input.label}</FormLabel>
|
||||
<FormControl>
|
||||
{input.inputType === "textarea" ? (
|
||||
<Textarea {...field} rows={3} />
|
||||
) : input.inputType === "number" ? (
|
||||
<Input type="number" {...field} />
|
||||
) : input.inputType === "checkbox" ? (
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={field.value ?? false}
|
||||
onChange={(e) => field.onChange(e.target.checked)}
|
||||
/>
|
||||
) : input.inputType === "date" ? (
|
||||
<Input type="date" {...field} />
|
||||
) : input.inputType === "select" ? (
|
||||
// Placeholder select – populate with options if needed
|
||||
<select
|
||||
{...field}
|
||||
className="border rounded px-2 py-1 w-full"
|
||||
>
|
||||
<option value="">Please select</option>
|
||||
<option value="example1">Example 1</option>
|
||||
<option value="example2">Example 2</option>
|
||||
</select>
|
||||
) : (
|
||||
<Input {...field} />
|
||||
)}
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<FormItem>
|
||||
<FormLabel>Reference Images</FormLabel>
|
||||
<FormControl>
|
||||
<div className="space-y-2">
|
||||
<FileDropzone onFilesSelected={setFiles} />
|
||||
{files.length > 0 && (
|
||||
<ul className="list-disc pl-4 text-sm text-muted-foreground">
|
||||
{files.map((file, i) => (
|
||||
<li key={i}>{file.name}</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
|
||||
<div className="text-lg font-semibold">
|
||||
Estimated Price:{" "}
|
||||
{minPrice === maxPrice
|
||||
? `€${minPrice.toFixed(2)}`
|
||||
: `€${minPrice.toFixed(2)} – €${maxPrice.toFixed(2)}`}
|
||||
</div>
|
||||
|
||||
<div className="text-muted-foreground">
|
||||
By submitting this form, you agree to our{" "}
|
||||
<Link href="/tos" className="underline">
|
||||
Terms of Service
|
||||
</Link>
|
||||
.
|
||||
</div>
|
||||
|
||||
<Button type="submit" disabled={!form.formState.isValid}>
|
||||
Submit Request
|
||||
</Button>
|
||||
</form>
|
||||
</Form>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user