Compare commits
6
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
2c3353db19 | ||
|
|
79b485db56 | ||
|
|
4c0783091a | ||
|
|
12a262e640 | ||
|
|
32931e697f | ||
|
|
0cfe045afa |
@@ -5,7 +5,6 @@ Describe problem and user or business impact.
|
|||||||
## Ticket / Assignment
|
## Ticket / Assignment
|
||||||
|
|
||||||
- Ticket:
|
- Ticket:
|
||||||
- Assignment:
|
|
||||||
|
|
||||||
## What changed
|
## What changed
|
||||||
|
|
||||||
@@ -18,7 +17,6 @@ Describe problem and user or business impact.
|
|||||||
List exact commands and manual checks.
|
List exact commands and manual checks.
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
bun run check
|
|
||||||
bun run test
|
bun run test
|
||||||
bun run build:web
|
bun run build:web
|
||||||
```
|
```
|
||||||
|
|||||||
@@ -8,3 +8,4 @@ bun.lock
|
|||||||
*.sqlite-wal
|
*.sqlite-wal
|
||||||
dist
|
dist
|
||||||
coverage
|
coverage
|
||||||
|
pi-session*
|
||||||
|
|||||||
@@ -1,5 +1,9 @@
|
|||||||
# Typescript Full Stack App Agent
|
# Typescript Full Stack App Agent
|
||||||
|
|
||||||
|
## Coding Conventions
|
||||||
|
- Before planning any code plan, check the `CONTRIBUTING.md` file in the root directory of the project to understand and apply coding conventions for this project
|
||||||
|
- Instead of reading and parsing the `CONTRIBUTING.md` every time, cache the findings of `CONTRIBUTING.md` and refer to this cache'd file whenever checking the conventions is required
|
||||||
|
|
||||||
## Output Rules
|
## Output Rules
|
||||||
|
|
||||||
### Response Style
|
### Response Style
|
||||||
@@ -176,4 +180,3 @@ Skip `discover_context` for narrow tasks with explicit file targets.
|
|||||||
### Boundaries
|
### Boundaries
|
||||||
- Recon is read-only unless user requested implementation.
|
- Recon is read-only unless user requested implementation.
|
||||||
- Do not treat scout output as complete when evidence suggests missing files.
|
- Do not treat scout output as complete when evidence suggests missing files.
|
||||||
|
|
||||||
|
|||||||
@@ -121,7 +121,8 @@ export function initializeDatabase(sqlite: Database) {
|
|||||||
);
|
);
|
||||||
`);
|
`);
|
||||||
|
|
||||||
if (tableExists(sqlite, "orders") && !columnExists(sqlite, "orders", "notes")) {
|
// Existing local databases predate internal notes, so add the column in place.
|
||||||
|
if (!columnExists(sqlite, "orders", "notes")) {
|
||||||
sqlite.exec(`ALTER TABLE orders ADD COLUMN notes TEXT NOT NULL DEFAULT ''`);
|
sqlite.exec(`ALTER TABLE orders ADD COLUMN notes TEXT NOT NULL DEFAULT ''`);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -35,13 +35,13 @@ function toOrderItemDetail(row: {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export async function listOrderSummaries(context: DatabaseContext, query?: string) {
|
export async function listOrderSummaries(context: DatabaseContext, query?: string) {
|
||||||
const search = query?.trim();
|
const search = query?.trim().toLowerCase();
|
||||||
|
|
||||||
const filters = search
|
const filters = search
|
||||||
? or(
|
? or(
|
||||||
sql`instr(lower(${orders.orderNumber}), lower(${search})) > 0`,
|
sql`instr(lower(${orders.orderNumber}), ${search}) > 0`,
|
||||||
sql`instr(lower(${users.name}), lower(${search})) > 0`,
|
sql`instr(lower(${users.name}), ${search}) > 0`,
|
||||||
sql`instr(lower(${users.email}), lower(${search})) > 0`
|
sql`instr(lower(${users.email}), ${search}) > 0`
|
||||||
)
|
)
|
||||||
: undefined;
|
: undefined;
|
||||||
|
|
||||||
@@ -96,7 +96,6 @@ export async function findOrderDetail(context: DatabaseContext, orderId: string)
|
|||||||
id: header.order.id,
|
id: header.order.id,
|
||||||
orderNumber: header.order.orderNumber,
|
orderNumber: header.order.orderNumber,
|
||||||
status: header.order.status as OrderDetail["status"],
|
status: header.order.status as OrderDetail["status"],
|
||||||
notes: header.order.notes,
|
|
||||||
createdAt: header.order.createdAt,
|
createdAt: header.order.createdAt,
|
||||||
updatedAt: header.order.updatedAt,
|
updatedAt: header.order.updatedAt,
|
||||||
customer: {
|
customer: {
|
||||||
@@ -105,7 +104,8 @@ export async function findOrderDetail(context: DatabaseContext, orderId: string)
|
|||||||
email: header.customer.email
|
email: header.customer.email
|
||||||
},
|
},
|
||||||
shippingAddress: toAddress(header.address),
|
shippingAddress: toAddress(header.address),
|
||||||
items: itemRows.map(toOrderItemDetail)
|
items: itemRows.map(toOrderItemDetail),
|
||||||
|
notes: header.order.notes
|
||||||
} satisfies OrderDetail;
|
} satisfies OrderDetail;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -132,10 +132,6 @@ export async function updateOrderStatus(context: DatabaseContext, orderId: strin
|
|||||||
await context.db.update(orders).set({ status, updatedAt }).where(eq(orders.id, orderId));
|
await context.db.update(orders).set({ status, updatedAt }).where(eq(orders.id, orderId));
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function updateOrderNotes(context: DatabaseContext, orderId: string, notes: string, updatedAt: string) {
|
|
||||||
await context.db.update(orders).set({ notes, updatedAt }).where(eq(orders.id, orderId));
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function updateOrderAddress(context: DatabaseContext, orderId: string, address: Address) {
|
export async function updateOrderAddress(context: DatabaseContext, orderId: string, address: Address) {
|
||||||
const [row] = await context.db.select({ shippingAddressId: orders.shippingAddressId }).from(orders).where(eq(orders.id, orderId));
|
const [row] = await context.db.select({ shippingAddressId: orders.shippingAddressId }).from(orders).where(eq(orders.id, orderId));
|
||||||
|
|
||||||
@@ -179,6 +175,10 @@ export async function appendAuditEvent(
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export async function updateOrderNotes(context: DatabaseContext, orderId: string, notes: string) {
|
||||||
|
await context.db.update(orders).set({ notes }).where(eq(orders.id, orderId));
|
||||||
|
}
|
||||||
|
|
||||||
async function findCustomerSummaryByOrderId(context: DatabaseContext, orderId: string) {
|
async function findCustomerSummaryByOrderId(context: DatabaseContext, orderId: string) {
|
||||||
const [row] = await context.db
|
const [row] = await context.db
|
||||||
.select({ customer: users })
|
.select({ customer: users })
|
||||||
|
|||||||
@@ -7,7 +7,7 @@ import { getOrder } from "./get-order";
|
|||||||
import { listAuditEvents } from "./list-audit-events";
|
import { listAuditEvents } from "./list-audit-events";
|
||||||
import { listOrders } from "./list-orders";
|
import { listOrders } from "./list-orders";
|
||||||
import { changeOrderItemQuantity } from "./update-order-item";
|
import { changeOrderItemQuantity } from "./update-order-item";
|
||||||
import { changeOrderNotes } from "./update-notes";
|
import { saveOrderNotes } from "./update-order-notes";
|
||||||
import { changeShippingAddress } from "./update-shipping-address";
|
import { changeShippingAddress } from "./update-shipping-address";
|
||||||
|
|
||||||
interface OrderRouteOptions {
|
interface OrderRouteOptions {
|
||||||
@@ -30,14 +30,14 @@ interface QuantityBody {
|
|||||||
quantity: number;
|
quantity: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface NotesBody {
|
|
||||||
notes: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface CancelBody {
|
interface CancelBody {
|
||||||
reason?: string;
|
reason?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
interface NotesBody {
|
||||||
|
notes: string;
|
||||||
|
}
|
||||||
|
|
||||||
type AuthenticatedRequest = FastifyRequest & { currentUser: AuthUser };
|
type AuthenticatedRequest = FastifyRequest & { currentUser: AuthUser };
|
||||||
|
|
||||||
export const registerOrderRoutes: FastifyPluginAsync<OrderRouteOptions> = async (app, options) => {
|
export const registerOrderRoutes: FastifyPluginAsync<OrderRouteOptions> = async (app, options) => {
|
||||||
@@ -100,31 +100,6 @@ export const registerOrderRoutes: FastifyPluginAsync<OrderRouteOptions> = async
|
|||||||
return result.order;
|
return result.order;
|
||||||
});
|
});
|
||||||
|
|
||||||
app.post<{ Params: IdParams; Body: NotesBody }>("/orders/:orderId/notes", {
|
|
||||||
schema: {
|
|
||||||
body: {
|
|
||||||
type: "object",
|
|
||||||
required: ["notes"],
|
|
||||||
properties: {
|
|
||||||
notes: { type: "string" }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, async (request, reply) => {
|
|
||||||
const currentUser = (request as AuthenticatedRequest).currentUser;
|
|
||||||
const result = await changeOrderNotes(options.db, {
|
|
||||||
orderId: request.params.orderId,
|
|
||||||
notes: request.body.notes,
|
|
||||||
actor: currentUser.username
|
|
||||||
});
|
|
||||||
|
|
||||||
if (result.statusCode !== 200) {
|
|
||||||
return reply.code(result.statusCode).send({ message: result.message });
|
|
||||||
}
|
|
||||||
|
|
||||||
return result.order;
|
|
||||||
});
|
|
||||||
|
|
||||||
app.post<{ Params: IdParams; Body: Address }>("/orders/:orderId/shipping-address", {
|
app.post<{ Params: IdParams; Body: Address }>("/orders/:orderId/shipping-address", {
|
||||||
schema: {
|
schema: {
|
||||||
body: {
|
body: {
|
||||||
@@ -187,4 +162,28 @@ export const registerOrderRoutes: FastifyPluginAsync<OrderRouteOptions> = async
|
|||||||
|
|
||||||
return result.order;
|
return result.order;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
app.post<{ Params: IdParams; Body: NotesBody }>("/orders/:orderId/notes", {
|
||||||
|
schema: {
|
||||||
|
body: {
|
||||||
|
type: "object",
|
||||||
|
required: ["notes"],
|
||||||
|
properties: {
|
||||||
|
// Empty and length rules are measured on the trimmed notes in saveOrderNotes.
|
||||||
|
notes: { type: "string" }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, async (request, reply) => {
|
||||||
|
const result = await saveOrderNotes(options.db, {
|
||||||
|
orderId: request.params.orderId,
|
||||||
|
notes: request.body.notes
|
||||||
|
});
|
||||||
|
|
||||||
|
if (result.statusCode !== 200) {
|
||||||
|
return reply.code(result.statusCode).send({ message: result.message });
|
||||||
|
}
|
||||||
|
|
||||||
|
return result.order;
|
||||||
|
});
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -7,7 +7,7 @@ let app: AppWithContext;
|
|||||||
let employeeCookie = "";
|
let employeeCookie = "";
|
||||||
|
|
||||||
function firstHeader(value: string | string[] | undefined) {
|
function firstHeader(value: string | string[] | undefined) {
|
||||||
return Array.isArray(value) ? (value[0] ?? "") : value ?? "";
|
return Array.isArray(value) ? value[0] : value ?? "";
|
||||||
}
|
}
|
||||||
|
|
||||||
async function login(username: string) {
|
async function login(username: string) {
|
||||||
|
|||||||
@@ -1,44 +0,0 @@
|
|||||||
import type { DatabaseContext } from "../db/database";
|
|
||||||
import { appendAuditEvent, findOrderDetail, updateOrderNotes } from "./order-repository";
|
|
||||||
|
|
||||||
export const NOTES_MAX_LENGTH = 1000;
|
|
||||||
|
|
||||||
export async function changeOrderNotes(
|
|
||||||
context: DatabaseContext,
|
|
||||||
input: {
|
|
||||||
orderId: string;
|
|
||||||
notes: string;
|
|
||||||
actor: string;
|
|
||||||
}
|
|
||||||
) {
|
|
||||||
const order = await findOrderDetail(context, input.orderId);
|
|
||||||
|
|
||||||
if (!order) {
|
|
||||||
return { statusCode: 404, message: "Order not found." } as const;
|
|
||||||
}
|
|
||||||
|
|
||||||
const notes = input.notes.trim();
|
|
||||||
|
|
||||||
if (notes.length === 0) {
|
|
||||||
return { statusCode: 400, message: "Notes cannot be empty." } as const;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (notes.length > NOTES_MAX_LENGTH) {
|
|
||||||
return { statusCode: 400, message: `Notes cannot exceed ${NOTES_MAX_LENGTH} characters.` } as const;
|
|
||||||
}
|
|
||||||
|
|
||||||
const updatedAt = new Date().toISOString();
|
|
||||||
await updateOrderNotes(context, input.orderId, notes, updatedAt);
|
|
||||||
await appendAuditEvent(context, {
|
|
||||||
orderId: input.orderId,
|
|
||||||
actor: input.actor,
|
|
||||||
type: "order.notes_updated",
|
|
||||||
message: "Updated internal notes.",
|
|
||||||
createdAt: updatedAt
|
|
||||||
});
|
|
||||||
|
|
||||||
return {
|
|
||||||
statusCode: 200,
|
|
||||||
order: await findOrderDetail(context, input.orderId)
|
|
||||||
} as const;
|
|
||||||
}
|
|
||||||
@@ -0,0 +1,38 @@
|
|||||||
|
import { orderNotesMaxLength } from "@orderops/shared";
|
||||||
|
import type { DatabaseContext } from "../db/database";
|
||||||
|
import { findOrderDetail, updateOrderNotes, updateOrderTimestamp } from "./order-repository";
|
||||||
|
|
||||||
|
// Notes are allowed for every order status: follow-up work often happens
|
||||||
|
// after an order has shipped, been cancelled, or been refunded.
|
||||||
|
export async function saveOrderNotes(
|
||||||
|
context: DatabaseContext,
|
||||||
|
input: {
|
||||||
|
orderId: string;
|
||||||
|
notes: string;
|
||||||
|
}
|
||||||
|
) {
|
||||||
|
const order = await findOrderDetail(context, input.orderId);
|
||||||
|
|
||||||
|
if (!order) {
|
||||||
|
return { statusCode: 404, message: "Order not found." } as const;
|
||||||
|
}
|
||||||
|
|
||||||
|
const notes = input.notes.trim();
|
||||||
|
|
||||||
|
if (!notes) {
|
||||||
|
return { statusCode: 400, message: "Notes cannot be empty." } as const;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (notes.length > orderNotesMaxLength) {
|
||||||
|
return { statusCode: 400, message: `Notes must be ${orderNotesMaxLength} characters or fewer.` } as const;
|
||||||
|
}
|
||||||
|
|
||||||
|
const updatedAt = new Date().toISOString();
|
||||||
|
await updateOrderNotes(context, input.orderId, notes);
|
||||||
|
await updateOrderTimestamp(context, input.orderId, updatedAt);
|
||||||
|
|
||||||
|
return {
|
||||||
|
statusCode: 200,
|
||||||
|
order: await findOrderDetail(context, input.orderId)
|
||||||
|
} as const;
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
@@ -28,16 +28,16 @@ export function updateShippingAddress(orderId: string, address: Address) {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
export function updateOrderNotes(orderId: string, notes: string) {
|
|
||||||
return apiRequest<OrderDetail>(`/api/orders/${orderId}/notes`, {
|
|
||||||
method: "POST",
|
|
||||||
body: JSON.stringify({ notes })
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function cancelOrder(orderId: string, reason?: string) {
|
export function cancelOrder(orderId: string, reason?: string) {
|
||||||
return apiRequest<OrderDetail>(`/api/orders/${orderId}/cancel`, {
|
return apiRequest<OrderDetail>(`/api/orders/${orderId}/cancel`, {
|
||||||
method: "POST",
|
method: "POST",
|
||||||
body: JSON.stringify({ reason })
|
body: JSON.stringify({ reason })
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function saveOrderNotes(orderId: string, notes: string) {
|
||||||
|
return apiRequest<OrderDetail>(`/api/orders/${orderId}/notes`, {
|
||||||
|
method: "POST",
|
||||||
|
body: JSON.stringify({ notes })
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import type { Address, AuditEvent, OrderDetail } from "@orderops/shared";
|
import type { Address, AuditEvent, OrderDetail } from "@orderops/shared";
|
||||||
import { AuditTimeline } from "./audit-timeline";
|
import { AuditTimeline } from "./audit-timeline";
|
||||||
import { OrderItemsPanel } from "./order-items-panel";
|
import { OrderItemsPanel } from "./order-items-panel";
|
||||||
import { OrderNotesPanel } from "./order-notes";
|
import { OrderNotesPanel } from "./order-notes-panel";
|
||||||
import { OrderSummaryPanel } from "./order-summary";
|
import { OrderSummaryPanel } from "./order-summary";
|
||||||
import { ShippingAddressForm } from "./shipping-address-form";
|
import { ShippingAddressForm } from "./shipping-address-form";
|
||||||
|
|
||||||
@@ -25,7 +25,6 @@ export function OrderDetailPage({
|
|||||||
return (
|
return (
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<OrderSummaryPanel order={order} />
|
<OrderSummaryPanel order={order} />
|
||||||
<OrderNotesPanel notes={order.notes} onSave={onSaveNotes} />
|
|
||||||
<div className="flex justify-end">
|
<div className="flex justify-end">
|
||||||
<button className="rounded-md bg-red-600 px-4 py-2 text-sm font-medium text-white" onClick={() => void onCancel()} type="button">
|
<button className="rounded-md bg-red-600 px-4 py-2 text-sm font-medium text-white" onClick={() => void onCancel()} type="button">
|
||||||
Cancel order
|
Cancel order
|
||||||
@@ -33,6 +32,7 @@ export function OrderDetailPage({
|
|||||||
</div>
|
</div>
|
||||||
<OrderItemsPanel order={order} onUpdateQuantity={onUpdateQuantity} />
|
<OrderItemsPanel order={order} onUpdateQuantity={onUpdateQuantity} />
|
||||||
<ShippingAddressForm order={order} onSave={onSaveAddress} />
|
<ShippingAddressForm order={order} onSave={onSaveAddress} />
|
||||||
|
<OrderNotesPanel notes={order.notes} onSaveNotes={onSaveNotes} />
|
||||||
<AuditTimeline events={auditEvents} />
|
<AuditTimeline events={auditEvents} />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -0,0 +1,56 @@
|
|||||||
|
import { useEffect, useState } from "react";
|
||||||
|
|
||||||
|
interface OrderNotesPanelProps {
|
||||||
|
notes: string;
|
||||||
|
onSaveNotes: (notes: string) => Promise<void>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function OrderNotesPanel({ notes, onSaveNotes }: OrderNotesPanelProps) {
|
||||||
|
const [draft, setDraft] = useState(notes);
|
||||||
|
const [isSaving, setIsSaving] = useState(false);
|
||||||
|
const canSubmit = draft.trim().length > 0 && draft !== notes && !isSaving;
|
||||||
|
|
||||||
|
// Show the stored notes again whenever the order is reloaded.
|
||||||
|
useEffect(() => {
|
||||||
|
setDraft(notes);
|
||||||
|
}, [notes]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
|
||||||
|
<h3 className="text-sm font-semibold text-slate-700">Internal notes</h3>
|
||||||
|
<p className="mb-3 text-xs text-slate-500">Visible to OrderOps employees only.</p>
|
||||||
|
<form
|
||||||
|
className="space-y-2"
|
||||||
|
onSubmit={async (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
if (!canSubmit) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setIsSaving(true);
|
||||||
|
await onSaveNotes(draft);
|
||||||
|
setIsSaving(false);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<label className="block text-sm text-slate-700">
|
||||||
|
<span className="mb-1 block">Notes</span>
|
||||||
|
<textarea
|
||||||
|
className="w-full rounded-lg border border-slate-300 px-3 py-2"
|
||||||
|
placeholder="Add context for teammates following up on this order"
|
||||||
|
rows={4}
|
||||||
|
value={draft}
|
||||||
|
onChange={(event) => setDraft(event.target.value)}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<button
|
||||||
|
className="rounded-md bg-slate-900 px-4 py-2 text-sm font-medium text-white disabled:opacity-50"
|
||||||
|
disabled={!canSubmit}
|
||||||
|
type="submit"
|
||||||
|
>
|
||||||
|
{isSaving ? "Saving notes..." : "Save notes"}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,60 +0,0 @@
|
|||||||
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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
|
|||||||
import type { Address, AuditEvent, OrderDetail } from "@orderops/shared";
|
import type { Address, AuditEvent, OrderDetail } from "@orderops/shared";
|
||||||
import { Link, useParams } from "react-router-dom";
|
import { Link, useParams } from "react-router-dom";
|
||||||
import { Toast } from "../ui/toast";
|
import { Toast } from "../ui/toast";
|
||||||
import { cancelOrder, getOrder, listAuditEvents, updateOrderItemQuantity, updateOrderNotes, updateShippingAddress } from "./order-api";
|
import { cancelOrder, getOrder, listAuditEvents, saveOrderNotes, updateOrderItemQuantity, updateShippingAddress } from "./order-api";
|
||||||
import { OrderDetailPage } from "./order-detail-page";
|
import { OrderDetailPage } from "./order-detail-page";
|
||||||
|
|
||||||
interface ToastState {
|
interface ToastState {
|
||||||
@@ -86,7 +86,7 @@ export function OrderPage() {
|
|||||||
auditEvents={auditEvents}
|
auditEvents={auditEvents}
|
||||||
onUpdateQuantity={(itemId, quantity) => runAction(() => updateOrderItemQuantity(order.id, itemId, quantity), "Quantity saved.")}
|
onUpdateQuantity={(itemId, quantity) => runAction(() => updateOrderItemQuantity(order.id, itemId, quantity), "Quantity saved.")}
|
||||||
onSaveAddress={(address: Address) => runAction(() => updateShippingAddress(order.id, address), "Shipping address saved.")}
|
onSaveAddress={(address: Address) => runAction(() => updateShippingAddress(order.id, address), "Shipping address saved.")}
|
||||||
onSaveNotes={(notes: string) => runAction(() => updateOrderNotes(order.id, notes), "Notes saved.")}
|
onSaveNotes={(notes: string) => runAction(() => saveOrderNotes(order.id, notes), "Internal notes saved.")}
|
||||||
onCancel={() => runAction(() => cancelOrder(order.id), "Order cancelled.")}
|
onCancel={() => runAction(() => cancelOrder(order.id), "Order cancelled.")}
|
||||||
/>
|
/>
|
||||||
) : null}
|
) : null}
|
||||||
|
|||||||
@@ -3,6 +3,9 @@ import type { CustomerSummary } from "./customer";
|
|||||||
import type { Money } from "./money";
|
import type { Money } from "./money";
|
||||||
import type { OrderStatus } from "./order-status";
|
import type { OrderStatus } from "./order-status";
|
||||||
|
|
||||||
|
// Shared so the API and the notes panel describe the same limit.
|
||||||
|
export const orderNotesMaxLength = 1000;
|
||||||
|
|
||||||
export interface OrderItemDetail {
|
export interface OrderItemDetail {
|
||||||
id: string;
|
id: string;
|
||||||
productId: string;
|
productId: string;
|
||||||
@@ -17,10 +20,10 @@ export interface OrderDetail {
|
|||||||
id: string;
|
id: string;
|
||||||
orderNumber: string;
|
orderNumber: string;
|
||||||
status: OrderStatus;
|
status: OrderStatus;
|
||||||
notes: string;
|
|
||||||
createdAt: string;
|
createdAt: string;
|
||||||
updatedAt: string;
|
updatedAt: string;
|
||||||
customer: CustomerSummary;
|
customer: CustomerSummary;
|
||||||
shippingAddress: Address;
|
shippingAddress: Address;
|
||||||
items: OrderItemDetail[];
|
items: OrderItemDetail[];
|
||||||
|
notes: string;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user