add:internal order notes #10

Open
cq0622 wants to merge 1 commits from order-internal-notes into master
11 changed files with 154 additions and 3 deletions
+6
View File
@@ -90,6 +90,7 @@ export function initializeDatabase(sqlite: Database) {
customer_id TEXT NOT NULL REFERENCES users(id), customer_id TEXT NOT NULL REFERENCES users(id),
shipping_address_id TEXT NOT NULL REFERENCES addresses(id), shipping_address_id TEXT NOT NULL REFERENCES addresses(id),
status TEXT NOT NULL, status TEXT NOT NULL,
notes TEXT NOT NULL DEFAULT '',
created_at TEXT NOT NULL, created_at TEXT NOT NULL,
updated_at TEXT NOT NULL updated_at TEXT NOT NULL
); );
@@ -119,4 +120,9 @@ export function initializeDatabase(sqlite: Database) {
created_at TEXT NOT NULL created_at TEXT NOT NULL
); );
`); `);
// 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 ''`);
}
} }
+1
View File
@@ -9,6 +9,7 @@ export const orders = sqliteTable("orders", {
customerId: text("customer_id").notNull().references(() => users.id), customerId: text("customer_id").notNull().references(() => users.id),
shippingAddressId: text("shipping_address_id").notNull().references(() => addresses.id), shippingAddressId: text("shipping_address_id").notNull().references(() => addresses.id),
status: text("status").notNull(), status: text("status").notNull(),
notes: text("notes").notNull().default(""),
createdAt: text("created_at").notNull(), createdAt: text("created_at").notNull(),
updatedAt: text("updated_at").notNull() updatedAt: text("updated_at").notNull()
}); });
+6 -1
View File
@@ -104,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;
} }
@@ -174,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 })
+29
View File
@@ -7,6 +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 { saveOrderNotes } from "./update-order-notes";
import { changeShippingAddress } from "./update-shipping-address"; import { changeShippingAddress } from "./update-shipping-address";
interface OrderRouteOptions { interface OrderRouteOptions {
@@ -33,6 +34,10 @@ 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) => {
@@ -157,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;
});
}; };
+38
View File
@@ -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
+7
View File
@@ -34,3 +34,10 @@ export function cancelOrder(orderId: string, reason?: string) {
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,6 +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-panel";
import { OrderSummaryPanel } from "./order-summary"; import { OrderSummaryPanel } from "./order-summary";
import { ShippingAddressForm } from "./shipping-address-form"; import { ShippingAddressForm } from "./shipping-address-form";
@@ -9,6 +10,7 @@ interface OrderDetailPageProps {
auditEvents: AuditEvent[]; auditEvents: AuditEvent[];
onUpdateQuantity: (itemId: string, quantity: number) => Promise<void>; onUpdateQuantity: (itemId: string, quantity: number) => Promise<void>;
onSaveAddress: (address: Address) => Promise<void>; onSaveAddress: (address: Address) => Promise<void>;
onSaveNotes: (notes: string) => Promise<void>;
onCancel: () => Promise<void>; onCancel: () => Promise<void>;
} }
@@ -17,6 +19,7 @@ export function OrderDetailPage({
auditEvents, auditEvents,
onUpdateQuantity, onUpdateQuantity,
onSaveAddress, onSaveAddress,
onSaveNotes,
onCancel onCancel
}: OrderDetailPageProps) { }: OrderDetailPageProps) {
return ( return (
@@ -29,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>
); );
+56
View File
@@ -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
Review

Should add a maxLength to the textarea for UX

Should add a `maxLength` to the textarea for UX
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>
);
}
+2 -1
View File
@@ -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, 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,6 +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(() => saveOrderNotes(order.id, notes), "Internal notes saved.")}
onCancel={() => runAction(() => cancelOrder(order.id), "Order cancelled.")} onCancel={() => runAction(() => cancelOrder(order.id), "Order cancelled.")}
/> />
) : null} ) : null}
+4
View File
@@ -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;
Review

This is fine for sharing a simple value across frontend and backend. I think a better way to make it more explicit is to encapsulate it by relation, so make it so that you can use it like: orderConstraints.notes.maxLength or similar, this way we can also easily add any other constraints when needed.

This is fine for sharing a simple value across frontend and backend. I think a better way to make it more explicit is to encapsulate it by relation, so make it so that you can use it like: `orderConstraints.notes.maxLength` or similar, this way we can also easily add any other constraints when needed.
export interface OrderItemDetail { export interface OrderItemDetail {
id: string; id: string;
productId: string; productId: string;
@@ -22,4 +25,5 @@ export interface OrderDetail {
customer: CustomerSummary; customer: CustomerSummary;
shippingAddress: Address; shippingAddress: Address;
items: OrderItemDetail[]; items: OrderItemDetail[];
notes: string;
} }