Nora
408 lines
14 KiB
TypeScript
408 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import NextImage from "next/image";
|
|
import Link from "next/link";
|
|
import { useState, useRef } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { uploadProductImage, deleteProductImage } from "@/actions/products/upload-image";
|
|
import { updateProduct } from "@/actions/products/update-product";
|
|
import { AdminInput, AdminTextInput, AdminTextarea, AdminSelect } from "./design-system";
|
|
|
|
async function resizeImage(file: File, maxWidth: number): Promise<ArrayBuffer> {
|
|
return new Promise((resolve, reject) => {
|
|
const img = new Image();
|
|
img.onload = () => {
|
|
let { width, height } = img;
|
|
if (width > maxWidth) {
|
|
height = Math.round(height * (maxWidth / width));
|
|
width = maxWidth;
|
|
}
|
|
const canvas = document.createElement("canvas");
|
|
canvas.width = width;
|
|
canvas.height = height;
|
|
const ctx = canvas.getContext("2d")!;
|
|
ctx.drawImage(img, 0, 0, width, height);
|
|
canvas.toBlob((blob) => {
|
|
if (!blob) {
|
|
reject(new Error("Failed to resize image"));
|
|
return;
|
|
}
|
|
blob.arrayBuffer().then((buf) => resolve(buf));
|
|
}, "image/jpeg", 0.85);
|
|
};
|
|
img.onerror = reject;
|
|
img.src = URL.createObjectURL(file);
|
|
});
|
|
}
|
|
|
|
type Brand = {
|
|
id: string;
|
|
name: string;
|
|
slug: string;
|
|
};
|
|
|
|
type ProductEditFormProps = {
|
|
product: {
|
|
id: string;
|
|
name: string;
|
|
description: string;
|
|
price: number;
|
|
type: string;
|
|
active: boolean;
|
|
brand_id: string;
|
|
image_url?: string | null;
|
|
is_taxable?: boolean;
|
|
pickup_type?: string;
|
|
};
|
|
brands: Brand[];
|
|
};
|
|
|
|
export default function ProductEditForm({ product, brands }: ProductEditFormProps) {
|
|
const router = useRouter();
|
|
const [saving, setSaving] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [saved, setSaved] = useState(false);
|
|
|
|
// Holds user edits only; missing keys fall back to the current prop so we
|
|
// never copy the prop into useState. When the prop changes, the fallback
|
|
// value tracks the new prop automatically.
|
|
const [draft, setDraft] = useState<{
|
|
name?: string;
|
|
description?: string;
|
|
price?: number;
|
|
type?: string;
|
|
active?: boolean;
|
|
brand_id?: string;
|
|
image_url?: string;
|
|
is_taxable?: boolean;
|
|
pickup_type?: string;
|
|
}>({});
|
|
|
|
const name = draft.name ?? product.name;
|
|
const description = draft.description ?? product.description;
|
|
const price = draft.price ?? product.price;
|
|
const type = draft.type ?? product.type;
|
|
const active = draft.active ?? product.active;
|
|
const brand_id = draft.brand_id ?? product.brand_id;
|
|
const image_url = draft.image_url ?? product.image_url ?? "";
|
|
const is_taxable = draft.is_taxable ?? product.is_taxable ?? true;
|
|
const pickup_type = draft.pickup_type ?? product.pickup_type ?? "scheduled_stop";
|
|
|
|
const setName = (v: string | ((prev: string) => string)) =>
|
|
setDraft((d) => ({
|
|
...d,
|
|
name: typeof v === "function" ? v(d.name ?? product.name) : v,
|
|
}));
|
|
const setDescription = (v: string | ((prev: string) => string)) =>
|
|
setDraft((d) => ({
|
|
...d,
|
|
description: typeof v === "function" ? v(d.description ?? product.description) : v,
|
|
}));
|
|
const setPrice = (v: number | ((prev: number) => number)) =>
|
|
setDraft((d) => ({
|
|
...d,
|
|
price: typeof v === "function" ? v(d.price ?? product.price) : v,
|
|
}));
|
|
const setType = (v: string | ((prev: string) => string)) =>
|
|
setDraft((d) => ({
|
|
...d,
|
|
type: typeof v === "function" ? v(d.type ?? product.type) : v,
|
|
}));
|
|
const setActive = (v: boolean | ((prev: boolean) => boolean)) =>
|
|
setDraft((d) => ({
|
|
...d,
|
|
active: typeof v === "function" ? v(d.active ?? product.active) : v,
|
|
}));
|
|
const setBrand_id = (v: string | ((prev: string) => string)) =>
|
|
setDraft((d) => ({
|
|
...d,
|
|
brand_id: typeof v === "function" ? v(d.brand_id ?? product.brand_id) : v,
|
|
}));
|
|
const setImage_url = (v: string | ((prev: string) => string)) =>
|
|
setDraft((d) => ({
|
|
...d,
|
|
image_url:
|
|
typeof v === "function" ? v(d.image_url ?? product.image_url ?? "") : v,
|
|
}));
|
|
const setIs_taxable = (v: boolean | ((prev: boolean) => boolean)) =>
|
|
setDraft((d) => ({
|
|
...d,
|
|
is_taxable:
|
|
typeof v === "function" ? v(d.is_taxable ?? product.is_taxable ?? true) : v,
|
|
}));
|
|
const setPickup_type = (v: string | ((prev: string) => string)) =>
|
|
setDraft((d) => ({
|
|
...d,
|
|
pickup_type:
|
|
typeof v === "function"
|
|
? v(d.pickup_type ?? product.pickup_type ?? "scheduled_stop")
|
|
: v,
|
|
}));
|
|
|
|
const [dragOver, setDragOver] = useState(false);
|
|
const [uploading, setUploading] = useState(false);
|
|
const [uploadError, setUploadError] = useState<string | null>(null);
|
|
const [imagePreview, setImagePreview] = useState<string | null>(product.image_url ?? null);
|
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
|
|
|
async function handleFileSelect(file: File) {
|
|
const validTypes = ["image/png", "image/jpeg", "image/webp"];
|
|
if (!validTypes.includes(file.type)) {
|
|
setUploadError("Only PNG, JPEG, and WebP images are allowed.");
|
|
return;
|
|
}
|
|
if (file.size > 5 * 1024 * 1024) {
|
|
setUploadError("Image must be under 5MB.");
|
|
return;
|
|
}
|
|
|
|
// Client-side resize to max 1200px width
|
|
const resizedBuffer = await resizeImage(file, 1200);
|
|
const resizedFile = new File([resizedBuffer], file.name, { type: "image/jpeg" });
|
|
|
|
setUploadError(null);
|
|
setUploading(true);
|
|
const result = await uploadProductImage(product.id, resizedFile);
|
|
setUploading(false);
|
|
|
|
if (result.success) {
|
|
setImage_url(result.imageUrl);
|
|
setImagePreview(result.imageUrl);
|
|
} else {
|
|
setUploadError(result.error ?? "Upload failed.");
|
|
}
|
|
}
|
|
|
|
async function handleRemoveImage() {
|
|
const result = await deleteProductImage(product.id);
|
|
if (result.success) {
|
|
setImage_url("");
|
|
setImagePreview(null);
|
|
}
|
|
}
|
|
|
|
async function handleSave() {
|
|
if (!name.trim()) {
|
|
setError("Product name is required.");
|
|
return;
|
|
}
|
|
setSaving(true);
|
|
setError(null);
|
|
setSaved(false);
|
|
|
|
const result = await updateProduct(product.id, brand_id, {
|
|
name,
|
|
description,
|
|
price: Number(price),
|
|
type,
|
|
active,
|
|
image_url: image_url || null,
|
|
is_taxable,
|
|
pickup_type,
|
|
});
|
|
|
|
if (!result.success) {
|
|
setError(result.error ?? "Failed to save");
|
|
setSaving(false);
|
|
return;
|
|
}
|
|
|
|
setSaved(true);
|
|
setSaving(false);
|
|
router.refresh();
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{error && (
|
|
<div className="rounded-xl bg-[var(--admin-danger-soft)] border border-[var(--admin-danger)] p-4 text-sm text-[var(--admin-danger)]">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
{saved && (
|
|
<div className="rounded-xl bg-[var(--admin-primary-soft)] border border-[var(--admin-primary)] p-4 text-sm text-[var(--admin-primary)]">
|
|
Product updated successfully.
|
|
</div>
|
|
)}
|
|
|
|
<AdminInput label="Name">
|
|
<AdminTextInput
|
|
value={name}
|
|
onChange={(e) => setName(e.target.value)}
|
|
placeholder="Product name"
|
|
/>
|
|
</AdminInput>
|
|
|
|
<AdminInput label="Description">
|
|
<AdminTextarea
|
|
value={description}
|
|
onChange={(e) => setDescription(e.target.value)}
|
|
rows={3}
|
|
placeholder="Product description"
|
|
/>
|
|
</AdminInput>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<AdminInput label="Price">
|
|
<AdminTextInput
|
|
type="number"
|
|
step="0.01"
|
|
min="0"
|
|
value={price}
|
|
onChange={(e) => setPrice(Number(e.target.value))}
|
|
placeholder="0.00"
|
|
/>
|
|
</AdminInput>
|
|
|
|
<AdminInput label="Type">
|
|
<AdminTextInput
|
|
value={type}
|
|
onChange={(e) => setType(e.target.value)}
|
|
placeholder="e.g. Sweet Corn"
|
|
/>
|
|
</AdminInput>
|
|
</div>
|
|
|
|
<AdminInput label="Brand">
|
|
<AdminSelect
|
|
value={brand_id}
|
|
onChange={(e) => setBrand_id(e.target.value)}
|
|
options={brands.map((b) => ({ value: b.id, label: b.name }))}
|
|
/>
|
|
</AdminInput>
|
|
|
|
<div>
|
|
<label className="mb-2 block text-sm font-medium text-[var(--admin-text-primary)]">Status</label>
|
|
<button type="button"
|
|
onClick={() => setActive((v) => !v)}
|
|
className={`w-full rounded-xl px-4 py-3 text-sm font-medium transition-colors ${
|
|
active
|
|
? "bg-[var(--admin-primary-soft)] text-[var(--admin-primary)] ring-1 ring-[var(--admin-primary)]"
|
|
: "bg-[var(--admin-bg)] text-[var(--admin-text-muted)] hover:bg-[var(--admin-bg-subtle)]"
|
|
}`}
|
|
>
|
|
{active ? "Active" : "Inactive"}
|
|
</button>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="mb-2 block text-sm font-medium text-[var(--admin-text-primary)]">Taxable</label>
|
|
<button type="button"
|
|
onClick={() => setIs_taxable((v) => !v)}
|
|
className={`w-full rounded-xl px-4 py-3 text-sm font-medium transition-colors flex items-center gap-3 ${
|
|
is_taxable
|
|
? "bg-[var(--admin-primary-soft)] text-[var(--admin-primary)] ring-1 ring-[var(--admin-primary)]"
|
|
: "bg-[var(--admin-accent-soft)] text-[var(--admin-accent)] ring-1 ring-[var(--admin-accent)]"
|
|
}`}
|
|
>
|
|
<span className="text-lg">{is_taxable ? "✓" : "✗"}</span>
|
|
<span>{is_taxable ? "Taxable — tax applied at checkout for nexus shipments" : "Non-taxable — always exempt from sales tax"}</span>
|
|
</button>
|
|
<p className="mt-1.5 text-xs text-[var(--admin-text-muted)]">Tax is calculated at checkout for shipping orders in your brand's nexus states. Non-taxable items (e.g. cooler boxes, apparel) are always exempt.</p>
|
|
</div>
|
|
|
|
<AdminInput
|
|
label="Pickup Type"
|
|
helpText="Shed pickup uses the product description as the pickup location — no stop required at checkout."
|
|
>
|
|
<AdminSelect
|
|
value={pickup_type}
|
|
onChange={(e) => setPickup_type(e.target.value)}
|
|
options={[
|
|
{ value: "scheduled_stop", label: "Scheduled Stop — requires stop selection at checkout" },
|
|
{ value: "shed", label: "Shed Pickup — uses description as location" },
|
|
]}
|
|
/>
|
|
</AdminInput>
|
|
|
|
<div>
|
|
<label className="mb-1 block text-sm font-medium text-[var(--admin-text-primary)]">Product Image</label>
|
|
<p className="text-xs text-[var(--admin-text-muted)] mb-2">JPG, PNG, WebP · 1200px max width · max 5MB (ideally under 2MB)</p>
|
|
|
|
<div
|
|
role="button"
|
|
tabIndex={0}
|
|
onKeyDown={(e) => {
|
|
if (e.key === "Enter" || e.key === " ") {
|
|
fileInputRef.current?.click();
|
|
}
|
|
}}
|
|
onDragOver={(e) => e.preventDefault()}
|
|
onDrop={(e) => {
|
|
e.preventDefault();
|
|
const file = e.dataTransfer.files[0];
|
|
if (file) handleFileSelect(file);
|
|
}}
|
|
onClick={() => fileInputRef.current?.click()}
|
|
className={`
|
|
flex flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed p-6 cursor-pointer transition-colors
|
|
${dragOver ? "border-[var(--admin-primary)] bg-[var(--admin-primary-soft)]" : "border-[var(--admin-border)] hover:border-[var(--admin-primary)] hover:bg-[var(--admin-bg)]"}
|
|
${uploading ? "opacity-50 pointer-events-none" : ""}
|
|
`}
|
|
>
|
|
{uploading ? (
|
|
<>
|
|
<div className="h-5 w-5 rounded-full border-2 border-[var(--admin-text-muted)] border-t-transparent animate-spin" />
|
|
<span className="text-sm text-[var(--admin-text-muted)]">Uploading...</span>
|
|
</>
|
|
) : imagePreview ? (
|
|
<>
|
|
<span className="relative inline-block h-32 w-auto">
|
|
<NextImage src={imagePreview} alt="Product preview" fill style={{ objectFit: "contain" }} className="rounded-lg" />
|
|
</span>
|
|
<span className="text-xs text-[var(--admin-text-muted)]">Click or drop to replace</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
<svg className="h-8 w-8 text-[var(--admin-text-muted)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
|
</svg>
|
|
<span className="text-sm text-[var(--admin-text-muted)]">Drag & drop or click to upload</span>
|
|
</>
|
|
)}
|
|
<input aria-label="File upload"
|
|
ref={fileInputRef}
|
|
type="file"
|
|
accept="image/png,image/jpeg,image/webp"
|
|
className="hidden"
|
|
onChange={(e) => {
|
|
const file = e.target.files?.[0];
|
|
if (file) handleFileSelect(file);
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
{uploadError && <p className="mt-1 text-xs text-[var(--admin-danger)]">{uploadError}</p>}
|
|
|
|
{imagePreview && (
|
|
<button
|
|
type="button"
|
|
onClick={handleRemoveImage}
|
|
className="mt-2 text-xs text-[var(--admin-danger)] hover:underline"
|
|
>
|
|
Remove image
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{/* Save button bar — new design tokens */}
|
|
<div className="flex items-center gap-3 pt-4 border-t border-[var(--admin-border-light)]">
|
|
<button type="button"
|
|
onClick={handleSave}
|
|
disabled={saving}
|
|
className="ha-btn-primary"
|
|
>
|
|
{saving ? "Saving..." : "Save Changes"}
|
|
</button>
|
|
<Link
|
|
href="/admin/products"
|
|
className="ha-btn-ghost"
|
|
>
|
|
Cancel
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|