60 lines
1.9 KiB
TypeScript
60 lines
1.9 KiB
TypeScript
import { useState } from "react";
|
|
|
|
export const NOTES_MAX_LENGTH = 1000;
|
|
|
|
interface OrderNotesProps {
|
|
notes: string;
|
|
onSave: (notes: string) => Promise<void>;
|
|
}
|
|
|
|
export function OrderNotesPanel({ notes, onSave }: OrderNotesProps) {
|
|
const [draft, setDraft] = useState(notes);
|
|
const [isSaving, setIsSaving] = useState(false);
|
|
const trimmed = draft.trim();
|
|
const isDisabled = isSaving || trimmed.length === 0 || trimmed === notes;
|
|
|
|
async function handleSave() {
|
|
if (isDisabled) {
|
|
return;
|
|
}
|
|
|
|
setIsSaving(true);
|
|
try {
|
|
await onSave(trimmed);
|
|
} finally {
|
|
setIsSaving(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<section className="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
|
|
<div className="mb-3 flex items-center justify-between">
|
|
<h3 className="text-sm font-semibold text-slate-700">Internal notes</h3>
|
|
<span className="text-xs text-slate-500">{draft.length}/{NOTES_MAX_LENGTH}</span>
|
|
</div>
|
|
{notes ? (
|
|
<p className="mb-3 whitespace-pre-wrap text-sm text-slate-700">{notes}</p>
|
|
) : (
|
|
<p className="mb-3 text-sm text-slate-400">No internal notes yet. Add context for teammates following up on this order.</p>
|
|
)}
|
|
<textarea
|
|
className="w-full resize-y rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 focus:border-blue-500 focus:outline-none"
|
|
maxLength={NOTES_MAX_LENGTH}
|
|
onChange={(event) => setDraft(event.target.value)}
|
|
placeholder="Add internal notes..."
|
|
rows={3}
|
|
value={draft}
|
|
/>
|
|
<div className="mt-3 flex justify-end">
|
|
<button
|
|
className="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white disabled:cursor-not-allowed disabled:opacity-50"
|
|
disabled={isDisabled}
|
|
onClick={() => void handleSave()}
|
|
type="button"
|
|
>
|
|
{isSaving ? "Saving..." : "Save notes"}
|
|
</button>
|
|
</div>
|
|
</section>
|
|
);
|
|
} |