Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
bbf6a90e18 |
@@ -28,6 +28,7 @@ bun run dev:web
|
||||
Common checks:
|
||||
|
||||
```bash
|
||||
bun run check
|
||||
bun run test
|
||||
bun run build:web
|
||||
```
|
||||
|
||||
@@ -120,7 +120,6 @@ export function initializeDatabase(sqlite: Database) {
|
||||
created_at TEXT NOT NULL
|
||||
);
|
||||
`);
|
||||
|
||||
if (!columnExists(sqlite, "orders", "notes")) {
|
||||
sqlite.exec("ALTER TABLE orders ADD COLUMN notes TEXT");
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { canCancelOrder, orderCancellationBlockedMessage } from "@orderops/shared/order-status";
|
||||
import type { DatabaseContext } from "../db/database";
|
||||
import { canCancelOrder } from "./order-status";
|
||||
import { appendAuditEvent, findOrderDetail, updateOrderStatus } from "./order-repository";
|
||||
|
||||
export async function cancelOrder(
|
||||
@@ -17,7 +17,7 @@ export async function cancelOrder(
|
||||
}
|
||||
|
||||
if (!canCancelOrder(order.status)) {
|
||||
return { statusCode: 400, message: orderCancellationBlockedMessage } as const;
|
||||
return { statusCode: 400, message: "Order cannot be cancelled for this order status." } as const;
|
||||
}
|
||||
|
||||
const updatedAt = new Date().toISOString();
|
||||
|
||||
@@ -1,91 +0,0 @@
|
||||
import { afterEach, beforeEach, describe, expect, test } from "bun:test";
|
||||
import type { AppWithContext } from "../app";
|
||||
import { buildApp } from "../app";
|
||||
import { createUser } from "../users/user-repository";
|
||||
|
||||
let app: AppWithContext;
|
||||
let employeeCookie = "";
|
||||
|
||||
function firstHeader(value: string | string[] | undefined) {
|
||||
return Array.isArray(value) ? value[0] : value ?? "";
|
||||
}
|
||||
|
||||
async function login(username: string) {
|
||||
const response = await app.inject({ method: "POST", url: "/api/login", payload: { username } });
|
||||
return firstHeader(response.headers["set-cookie"]);
|
||||
}
|
||||
|
||||
beforeEach(async () => {
|
||||
app = await buildApp(":memory:");
|
||||
|
||||
await createUser(app.dbContext, {
|
||||
username: "dev-employee",
|
||||
name: "Dev Employee",
|
||||
email: "dev.employee@example.com",
|
||||
role: "employee"
|
||||
});
|
||||
|
||||
employeeCookie = await login("dev-employee");
|
||||
});
|
||||
|
||||
afterEach(async () => {
|
||||
await app.close();
|
||||
});
|
||||
|
||||
describe("assignment 3 quantity validation", () => {
|
||||
test("allows quantity changes for pending orders", async () => {
|
||||
const response = await app.inject({
|
||||
method: "POST",
|
||||
url: "/api/orders/order_1/items/item_1/quantity",
|
||||
headers: { cookie: employeeCookie },
|
||||
payload: { quantity: 5 }
|
||||
});
|
||||
|
||||
expect(response.statusCode).toBe(200);
|
||||
expect(response.json().items.find((item: { id: string }) => item.id === "item_1")?.quantity).toBe(5);
|
||||
});
|
||||
|
||||
test("rejects quantity changes for processing orders", async () => {
|
||||
const response = await app.inject({
|
||||
method: "POST",
|
||||
url: "/api/orders/order_2/items/item_3/quantity",
|
||||
headers: { cookie: employeeCookie },
|
||||
payload: { quantity: 2 }
|
||||
});
|
||||
|
||||
expect(response.statusCode).toBe(400);
|
||||
});
|
||||
|
||||
test("rejects quantity changes for shipped orders", async () => {
|
||||
const response = await app.inject({
|
||||
method: "POST",
|
||||
url: "/api/orders/order_3/items/item_4/quantity",
|
||||
headers: { cookie: employeeCookie },
|
||||
payload: { quantity: 1 }
|
||||
});
|
||||
|
||||
expect(response.statusCode).toBe(400);
|
||||
});
|
||||
|
||||
test("rejects quantity outside the allowed range", async () => {
|
||||
const response = await app.inject({
|
||||
method: "POST",
|
||||
url: "/api/orders/order_1/items/item_1/quantity",
|
||||
headers: { cookie: employeeCookie },
|
||||
payload: { quantity: 0 }
|
||||
});
|
||||
|
||||
expect(response.statusCode).toBe(400);
|
||||
});
|
||||
|
||||
test("rejects quantity above effective inventory", async () => {
|
||||
const response = await app.inject({
|
||||
method: "POST",
|
||||
url: "/api/orders/order_1/items/item_1/quantity",
|
||||
headers: { cookie: employeeCookie },
|
||||
payload: { quantity: 9 }
|
||||
});
|
||||
|
||||
expect(response.statusCode).toBe(400);
|
||||
});
|
||||
});
|
||||
@@ -96,9 +96,9 @@ export async function findOrderDetail(context: DatabaseContext, orderId: string)
|
||||
id: header.order.id,
|
||||
orderNumber: header.order.orderNumber,
|
||||
status: header.order.status as OrderDetail["status"],
|
||||
notes: header.order.notes,
|
||||
createdAt: header.order.createdAt,
|
||||
updatedAt: header.order.updatedAt,
|
||||
notes: header.order.notes,
|
||||
customer: {
|
||||
id: header.customer.id,
|
||||
name: header.customer.name,
|
||||
@@ -117,28 +117,21 @@ export async function findOrderItemRecord(context: DatabaseContext, orderId: str
|
||||
.leftJoin(inventory, eq(orderItems.productId, inventory.productId))
|
||||
.where(and(eq(orderItems.id, itemId), eq(orderItems.orderId, orderId)));
|
||||
|
||||
if (!row) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return {
|
||||
...row,
|
||||
order: { ...row.order, status: row.order.status as OrderDetail["status"] }
|
||||
};
|
||||
return row ?? null;
|
||||
}
|
||||
|
||||
export async function updateOrderItemQuantity(context: DatabaseContext, itemId: string, quantity: number) {
|
||||
await context.db.update(orderItems).set({ quantity }).where(eq(orderItems.id, itemId));
|
||||
}
|
||||
|
||||
export async function updateOrderNotes(context: DatabaseContext, orderId: string, notes: string) {
|
||||
await context.db.update(orders).set({ notes }).where(eq(orders.id, orderId));
|
||||
}
|
||||
|
||||
export async function updateOrderTimestamp(context: DatabaseContext, orderId: string, updatedAt: string) {
|
||||
await context.db.update(orders).set({ 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 updateOrderStatus(context: DatabaseContext, orderId: string, status: OrderDetail["status"], updatedAt: string) {
|
||||
await context.db.update(orders).set({ status, updatedAt }).where(eq(orders.id, orderId));
|
||||
}
|
||||
|
||||
@@ -6,7 +6,8 @@ import { cancelOrder } from "./cancel-order";
|
||||
import { getOrder } from "./get-order";
|
||||
import { listAuditEvents } from "./list-audit-events";
|
||||
import { listOrders } from "./list-orders";
|
||||
import { changeOrderItemQuantity, updateOrderNotes } from "./update-order-item";
|
||||
import { changeOrderItemQuantity } from "./update-order-item";
|
||||
import { changeOrderNotes } from "./update-order-notes";
|
||||
import { changeShippingAddress } from "./update-shipping-address";
|
||||
|
||||
interface OrderRouteOptions {
|
||||
@@ -33,10 +34,6 @@ interface CancelBody {
|
||||
reason?: string;
|
||||
}
|
||||
|
||||
interface NotesBody {
|
||||
notes: string;
|
||||
}
|
||||
|
||||
type AuthenticatedRequest = FastifyRequest & { currentUser: AuthUser };
|
||||
|
||||
export const registerOrderRoutes: FastifyPluginAsync<OrderRouteOptions> = async (app, options) => {
|
||||
@@ -73,6 +70,29 @@ export const registerOrderRoutes: FastifyPluginAsync<OrderRouteOptions> = async
|
||||
|
||||
app.get<{ Params: IdParams }>("/orders/:orderId/audit-events", async (request) => listAuditEvents(options.db, request.params.orderId));
|
||||
|
||||
app.post<{ Params: IdParams; Body: { notes: string } }>("/orders/:orderId/notes", {
|
||||
schema: {
|
||||
body: {
|
||||
type: "object",
|
||||
required: ["notes"],
|
||||
properties: {
|
||||
notes: { type: "string", minLength: 1, maxLength: 1000 }
|
||||
}
|
||||
}
|
||||
}
|
||||
}, async (request, reply) => {
|
||||
const result = await changeOrderNotes(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;
|
||||
});
|
||||
|
||||
app.post<{ Params: OrderItemParams; Body: QuantityBody }>("/orders/:orderId/items/:itemId/quantity", {
|
||||
schema: {
|
||||
body: {
|
||||
@@ -99,31 +119,6 @@ export const registerOrderRoutes: FastifyPluginAsync<OrderRouteOptions> = async
|
||||
return result.order;
|
||||
});
|
||||
|
||||
app.post<{ Params: IdParams; Body: NotesBody }>("/orders/:orderId/notes", {
|
||||
schema: {
|
||||
body: {
|
||||
type: "object",
|
||||
required: ["notes"],
|
||||
properties: {
|
||||
notes: { type: "string", maxLength: 1000 }
|
||||
}
|
||||
}
|
||||
}
|
||||
}, async (request, reply) => {
|
||||
const currentUser = (request as AuthenticatedRequest).currentUser;
|
||||
const result = await updateOrderNotes(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", {
|
||||
schema: {
|
||||
body: {
|
||||
|
||||
@@ -1,108 +0,0 @@
|
||||
import { afterEach, beforeEach, describe, expect, test } from "bun:test";
|
||||
import type { AppWithContext } from "../app";
|
||||
import { buildApp } from "../app";
|
||||
import { createUser } from "../users/user-repository";
|
||||
|
||||
let app: AppWithContext;
|
||||
let employeeCookie = "";
|
||||
|
||||
function firstHeader(value: string | string[] | undefined) {
|
||||
return Array.isArray(value) ? value[0] : value ?? "";
|
||||
}
|
||||
|
||||
async function login(username: string) {
|
||||
const response = await app.inject({ method: "POST", url: "/api/login", payload: { username } });
|
||||
return firstHeader(response.headers["set-cookie"]);
|
||||
}
|
||||
|
||||
beforeEach(async () => {
|
||||
app = await buildApp(":memory:");
|
||||
|
||||
await createUser(app.dbContext, {
|
||||
username: "dev-employee",
|
||||
name: "Dev Employee",
|
||||
email: "dev.employee@example.com",
|
||||
role: "employee"
|
||||
});
|
||||
|
||||
employeeCookie = await login("dev-employee");
|
||||
});
|
||||
|
||||
afterEach(async () => {
|
||||
await app.close();
|
||||
});
|
||||
|
||||
describe("assignment 4 order lifecycle rules", () => {
|
||||
test("keeps quantity editing blocked for processing orders", async () => {
|
||||
const response = await app.inject({
|
||||
method: "POST",
|
||||
url: "/api/orders/order_2/items/item_3/quantity",
|
||||
headers: { cookie: employeeCookie },
|
||||
payload: { quantity: 2 }
|
||||
});
|
||||
|
||||
expect(response.statusCode).toBe(400);
|
||||
});
|
||||
|
||||
test("allows address editing for processing orders", async () => {
|
||||
const response = await app.inject({
|
||||
method: "POST",
|
||||
url: "/api/orders/order_2/shipping-address",
|
||||
headers: { cookie: employeeCookie },
|
||||
payload: {
|
||||
fullName: "Jane Doe",
|
||||
line1: "50 New Street",
|
||||
line2: null,
|
||||
city: "Oakland",
|
||||
state: "CA",
|
||||
postalCode: "94607",
|
||||
country: "US"
|
||||
}
|
||||
});
|
||||
|
||||
expect(response.statusCode).toBe(200);
|
||||
expect(response.json().shippingAddress.city).toBe("Oakland");
|
||||
});
|
||||
|
||||
test("allows cancellation for processing orders", async () => {
|
||||
const response = await app.inject({
|
||||
method: "POST",
|
||||
url: "/api/orders/order_2/cancel",
|
||||
headers: { cookie: employeeCookie },
|
||||
payload: { reason: "Customer request" }
|
||||
});
|
||||
|
||||
expect(response.statusCode).toBe(200);
|
||||
expect(response.json().status).toBe("cancelled");
|
||||
});
|
||||
|
||||
test("blocks address editing for shipped orders", async () => {
|
||||
const response = await app.inject({
|
||||
method: "POST",
|
||||
url: "/api/orders/order_3/shipping-address",
|
||||
headers: { cookie: employeeCookie },
|
||||
payload: {
|
||||
fullName: "John Smith",
|
||||
line1: "77 Final Mile Road",
|
||||
line2: null,
|
||||
city: "Denver",
|
||||
state: "CO",
|
||||
postalCode: "80202",
|
||||
country: "US"
|
||||
}
|
||||
});
|
||||
|
||||
expect(response.statusCode).toBe(400);
|
||||
});
|
||||
|
||||
test("blocks cancellation for shipped orders", async () => {
|
||||
const response = await app.inject({
|
||||
method: "POST",
|
||||
url: "/api/orders/order_3/cancel",
|
||||
headers: { cookie: employeeCookie },
|
||||
payload: { reason: "Late request" }
|
||||
});
|
||||
|
||||
expect(response.statusCode).toBe(400);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,13 @@
|
||||
import type { OrderStatus } from "@orderops/shared/order-status";
|
||||
|
||||
export function canEditOrderItems(status: OrderStatus) {
|
||||
return status === "pending" || status === "processing";
|
||||
}
|
||||
|
||||
export function canEditShippingAddress(status: OrderStatus) {
|
||||
return status === "pending" || status === "processing";
|
||||
}
|
||||
|
||||
export function canCancelOrder(status: OrderStatus) {
|
||||
return status === "pending" || status === "processing";
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
import { canEditOrderItems, orderItemsLockedMessage } from "@orderops/shared/order-status";
|
||||
import type { DatabaseContext } from "../db/database";
|
||||
import { appendAuditEvent, findOrderDetail, findOrderItemRecord, updateOrderItemQuantity, updateOrderNotes as saveOrderNotes, updateOrderTimestamp } from "./order-repository";
|
||||
import { canEditOrderItems } from "./order-status";
|
||||
import { appendAuditEvent, findOrderDetail, findOrderItemRecord, updateOrderItemQuantity, updateOrderTimestamp } from "./order-repository";
|
||||
|
||||
export async function changeOrderItemQuantity(
|
||||
context: DatabaseContext,
|
||||
@@ -17,8 +17,8 @@ export async function changeOrderItemQuantity(
|
||||
return { statusCode: 404, message: "Order item not found." } as const;
|
||||
}
|
||||
|
||||
if (!canEditOrderItems(row.order.status)) {
|
||||
return { statusCode: 400, message: orderItemsLockedMessage } as const;
|
||||
if (!canEditOrderItems(row.order.status as never)) {
|
||||
return { statusCode: 400, message: "Order items cannot be changed for this order status." } as const;
|
||||
}
|
||||
|
||||
if (input.quantity < 1 || input.quantity > 10) {
|
||||
@@ -47,44 +47,3 @@ export async function changeOrderItemQuantity(
|
||||
order: await findOrderDetail(context, input.orderId)
|
||||
} as const;
|
||||
}
|
||||
|
||||
export async function updateOrderNotes(
|
||||
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) {
|
||||
return { statusCode: 400, message: "Notes cannot be empty." } as const;
|
||||
}
|
||||
|
||||
if (notes.length > 1000) {
|
||||
return { statusCode: 400, message: "Notes must be 1000 characters or fewer." } as const;
|
||||
}
|
||||
|
||||
const updatedAt = new Date().toISOString();
|
||||
await saveOrderNotes(context, input.orderId, notes);
|
||||
await updateOrderTimestamp(context, input.orderId, updatedAt);
|
||||
await appendAuditEvent(context, {
|
||||
orderId: input.orderId,
|
||||
actor: input.actor,
|
||||
type: "order.notes_updated",
|
||||
message: "Updated internal order notes.",
|
||||
createdAt: updatedAt
|
||||
});
|
||||
|
||||
return {
|
||||
statusCode: 200,
|
||||
order: await findOrderDetail(context, input.orderId)
|
||||
} as const;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,19 @@
|
||||
import type { DatabaseContext } from "../db/database";
|
||||
import { findOrderDetail, updateOrderNotes } from "./order-repository";
|
||||
|
||||
export async function changeOrderNotes(context: DatabaseContext, input: { orderId: string; notes: string }) {
|
||||
const notes = input.notes.trim();
|
||||
|
||||
if (!notes || Array.from(input.notes).length > 1000) {
|
||||
return { statusCode: 400, message: "Internal notes must contain between 1 and 1000 characters." } as const;
|
||||
}
|
||||
|
||||
const order = await findOrderDetail(context, input.orderId);
|
||||
if (!order) {
|
||||
return { statusCode: 404, message: "Order not found." } as const;
|
||||
}
|
||||
|
||||
await updateOrderNotes(context, input.orderId, notes, new Date().toISOString());
|
||||
|
||||
return { statusCode: 200, order: await findOrderDetail(context, input.orderId) } as const;
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
import type { Address } from "@orderops/shared/address";
|
||||
import { canEditShippingAddress, shippingAddressLockedMessage } from "@orderops/shared/order-status";
|
||||
import type { DatabaseContext } from "../db/database";
|
||||
import { canEditShippingAddress } from "./order-status";
|
||||
import { appendAuditEvent, findOrderDetail, updateOrderAddress, updateOrderTimestamp } from "./order-repository";
|
||||
|
||||
export async function changeShippingAddress(
|
||||
@@ -18,7 +18,7 @@ export async function changeShippingAddress(
|
||||
}
|
||||
|
||||
if (!canEditShippingAddress(order.status)) {
|
||||
return { statusCode: 400, message: shippingAddressLockedMessage } as const;
|
||||
return { statusCode: 400, message: "Shipping address cannot be changed for this order status." } as const;
|
||||
}
|
||||
|
||||
const updatedAt = new Date().toISOString();
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -21,13 +21,6 @@ export function updateOrderItemQuantity(orderId: string, itemId: string, quantit
|
||||
});
|
||||
}
|
||||
|
||||
export function updateOrderNotes(orderId: string, notes: string) {
|
||||
return apiRequest<OrderDetail>(`/api/orders/${orderId}/notes`, {
|
||||
method: "POST",
|
||||
body: JSON.stringify({ notes })
|
||||
});
|
||||
}
|
||||
|
||||
export function updateShippingAddress(orderId: string, address: Address) {
|
||||
return apiRequest<OrderDetail>(`/api/orders/${orderId}/shipping-address`, {
|
||||
method: "POST",
|
||||
@@ -41,3 +34,10 @@ export function cancelOrder(orderId: string, reason?: string) {
|
||||
body: JSON.stringify({ reason })
|
||||
});
|
||||
}
|
||||
|
||||
export function updateOrderNotes(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 { AuditTimeline } from "./audit-timeline";
|
||||
import { OrderItemsPanel } from "./order-items-panel";
|
||||
import { OrderNotes } from "./order-notes";
|
||||
import { OrderNotesForm } from "./order-notes-form";
|
||||
import { OrderSummaryPanel } from "./order-summary";
|
||||
import { ShippingAddressForm } from "./shipping-address-form";
|
||||
|
||||
@@ -10,8 +10,8 @@ interface OrderDetailPageProps {
|
||||
auditEvents: AuditEvent[];
|
||||
onUpdateQuantity: (itemId: string, quantity: number) => Promise<void>;
|
||||
onSaveAddress: (address: Address) => Promise<void>;
|
||||
onSaveNotes: (notes: string) => Promise<void>;
|
||||
onCancel: () => Promise<void>;
|
||||
onSaveNotes: (notes: string) => Promise<boolean>;
|
||||
}
|
||||
|
||||
export function OrderDetailPage({
|
||||
@@ -19,21 +19,28 @@ export function OrderDetailPage({
|
||||
auditEvents,
|
||||
onUpdateQuantity,
|
||||
onSaveAddress,
|
||||
onSaveNotes,
|
||||
onCancel
|
||||
onCancel,
|
||||
onSaveNotes
|
||||
}: OrderDetailPageProps) {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<OrderSummaryPanel order={order} />
|
||||
<div className="flex justify-end">
|
||||
<div className="flex justify-end gap-3">
|
||||
<button className="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white" type="button" onClick={() => {
|
||||
const input = document.getElementById("internal-order-notes");
|
||||
input?.scrollIntoView({ block: "center" });
|
||||
input?.focus({ preventScroll: true });
|
||||
}}>
|
||||
{order.notes ? "Edit internal notes" : "Add internal note"}
|
||||
</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
|
||||
</button>
|
||||
</div>
|
||||
<OrderItemsPanel order={order} onUpdateQuantity={onUpdateQuantity} />
|
||||
<ShippingAddressForm order={order} onSave={onSaveAddress} />
|
||||
<OrderNotes order={order} onSave={onSaveNotes} />
|
||||
<AuditTimeline events={auditEvents} />
|
||||
<OrderNotesForm key={order.id} notes={order.notes} onSave={onSaveNotes} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,58 @@
|
||||
import { useState } from "react";
|
||||
|
||||
interface OrderNotesFormProps {
|
||||
notes: string | null;
|
||||
onSave: (notes: string) => Promise<boolean>;
|
||||
}
|
||||
|
||||
export function OrderNotesForm({ notes, onSave }: OrderNotesFormProps) {
|
||||
const [draft, setDraft] = useState(notes ?? "");
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
const length = Array.from(draft).length;
|
||||
|
||||
return (
|
||||
<section className="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
|
||||
<div className="mb-3 flex items-center gap-3">
|
||||
<h3 className="text-sm font-semibold text-slate-700">Internal notes</h3>
|
||||
<span className="rounded-full bg-slate-100 px-3 py-1 text-xs text-slate-600">Employees only</span>
|
||||
</div>
|
||||
{notes ? <p className="mb-3 whitespace-pre-wrap break-words rounded-lg border border-slate-200 p-3 text-sm text-slate-700">{notes}</p> : null}
|
||||
<form onSubmit={async (event) => {
|
||||
event.preventDefault();
|
||||
if (isSaving || !draft.trim() || length > 1000) return;
|
||||
setIsSaving(true);
|
||||
try {
|
||||
if (await onSave(draft)) setDraft(draft.trim());
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
}}>
|
||||
<label className="mb-1 block text-sm text-slate-700" htmlFor="internal-order-notes">
|
||||
{notes ? "Edit internal notes" : "Add a note for your teammates"}
|
||||
</label>
|
||||
<textarea
|
||||
id="internal-order-notes"
|
||||
className="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm"
|
||||
aria-describedby="internal-order-notes-help"
|
||||
placeholder="Add a note for your teammates..."
|
||||
rows={3}
|
||||
value={draft}
|
||||
disabled={isSaving}
|
||||
onChange={(event) => setDraft(event.target.value)}
|
||||
/>
|
||||
<div className="mt-2 flex items-center justify-between gap-3">
|
||||
<p id="internal-order-notes-help" className="text-xs text-slate-600">
|
||||
{length}/1000 characters. Saving replaces the current notes.
|
||||
</p>
|
||||
<button
|
||||
className="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white disabled:opacity-50"
|
||||
type="submit"
|
||||
disabled={isSaving || !draft.trim() || length > 1000}
|
||||
>
|
||||
{isSaving ? "Saving..." : notes ? "Save notes" : "Add note"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -1,37 +0,0 @@
|
||||
import { useState } from "react";
|
||||
import type { OrderDetail } from "@orderops/shared";
|
||||
|
||||
interface OrderNotesProps {
|
||||
order: OrderDetail;
|
||||
onSave: (notes: string) => Promise<void>;
|
||||
}
|
||||
|
||||
export function OrderNotes({ order, onSave }: OrderNotesProps) {
|
||||
const [notes, setNotes] = useState(order.notes ?? "");
|
||||
|
||||
return (
|
||||
<section className="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
|
||||
<h3 className="mb-3 text-sm font-semibold text-slate-700">Internal notes</h3>
|
||||
<form
|
||||
className="space-y-3"
|
||||
onSubmit={async (event) => {
|
||||
event.preventDefault();
|
||||
await onSave(notes);
|
||||
}}
|
||||
>
|
||||
<label className="block text-sm text-slate-700">
|
||||
<span className="mb-1 block">Notes</span>
|
||||
<textarea
|
||||
className="w-full resize-none rounded-lg border border-slate-300 px-3 py-2"
|
||||
rows={5}
|
||||
value={notes}
|
||||
onChange={(event) => setNotes(event.target.value)}
|
||||
/>
|
||||
</label>
|
||||
<button className="rounded-md bg-slate-900 px-4 py-2 text-sm font-medium text-white" type="submit">
|
||||
Save notes
|
||||
</button>
|
||||
</form>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { canEditOrderItems, orderItemsLockedMessage, type Address, type AuditEvent, type OrderDetail } from "@orderops/shared";
|
||||
import type { Address, AuditEvent, OrderDetail } from "@orderops/shared";
|
||||
import { Link, useParams } from "react-router-dom";
|
||||
import { Toast } from "../ui/toast";
|
||||
import { cancelOrder, getOrder, listAuditEvents, updateOrderItemQuantity, updateOrderNotes, updateShippingAddress } from "./order-api";
|
||||
@@ -55,7 +55,7 @@ export function OrderPage() {
|
||||
|
||||
async function runAction(action: () => Promise<OrderDetail>, successMessage: string) {
|
||||
if (!orderId) {
|
||||
return;
|
||||
return false;
|
||||
}
|
||||
|
||||
try {
|
||||
@@ -64,27 +64,16 @@ export function OrderPage() {
|
||||
setOrder(nextOrder);
|
||||
await refreshOrder(orderId);
|
||||
setToast({ message: successMessage, variant: "success" });
|
||||
return true;
|
||||
} catch (caught) {
|
||||
setToast({
|
||||
message: caught instanceof Error ? caught.message : "Request failed.",
|
||||
variant: "error"
|
||||
});
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleUpdateQuantity(itemId: string, quantity: number) {
|
||||
if (!order) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!canEditOrderItems(order.status)) {
|
||||
setToast({ message: orderItemsLockedMessage, variant: "error" });
|
||||
return;
|
||||
}
|
||||
|
||||
await runAction(() => updateOrderItemQuantity(order.id, itemId, quantity), "Quantity saved.");
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<Link className="inline-flex text-sm font-medium text-blue-600 hover:text-blue-700" to="/orders">
|
||||
@@ -97,10 +86,10 @@ export function OrderPage() {
|
||||
<OrderDetailPage
|
||||
order={order}
|
||||
auditEvents={auditEvents}
|
||||
onUpdateQuantity={handleUpdateQuantity}
|
||||
onSaveAddress={(address: Address) => runAction(() => updateShippingAddress(order.id, address), "Shipping address saved.")}
|
||||
onSaveNotes={(notes) => runAction(() => updateOrderNotes(order.id, notes), "Notes saved.")}
|
||||
onCancel={() => runAction(() => cancelOrder(order.id), "Order cancelled.")}
|
||||
onUpdateQuantity={async (itemId, quantity) => { await runAction(() => updateOrderItemQuantity(order.id, itemId, quantity), "Quantity saved."); }}
|
||||
onSaveAddress={async (address: Address) => { await runAction(() => updateShippingAddress(order.id, address), "Shipping address saved."); }}
|
||||
onCancel={async () => { await runAction(() => cancelOrder(order.id), "Order cancelled."); }}
|
||||
onSaveNotes={(notes) => runAction(() => updateOrderNotes(order.id, notes), "Internal notes saved.")}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
@@ -17,9 +17,9 @@ export interface OrderDetail {
|
||||
id: string;
|
||||
orderNumber: string;
|
||||
status: OrderStatus;
|
||||
notes: string | null;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
notes: string | null;
|
||||
customer: CustomerSummary;
|
||||
shippingAddress: Address;
|
||||
items: OrderItemDetail[];
|
||||
|
||||
@@ -1,23 +1,3 @@
|
||||
export const orderStatuses = ["pending", "processing", "shipped", "cancelled", "refunded"] as const;
|
||||
|
||||
export type OrderStatus = (typeof orderStatuses)[number];
|
||||
|
||||
const orderItemsEditableStatuses: readonly OrderStatus[] = ["pending"];
|
||||
const shippingAddressEditableStatuses: readonly OrderStatus[] = ["pending", "processing"];
|
||||
const orderCancellableStatuses: readonly OrderStatus[] = ["pending", "processing"];
|
||||
|
||||
export const orderItemsLockedMessage = "Order items cannot be changed for this order status.";
|
||||
export const shippingAddressLockedMessage = "Shipping address cannot be changed for this order status.";
|
||||
export const orderCancellationBlockedMessage = "Order cannot be cancelled for this order status.";
|
||||
|
||||
export function canEditOrderItems(status: OrderStatus) {
|
||||
return orderItemsEditableStatuses.includes(status);
|
||||
}
|
||||
|
||||
export function canEditShippingAddress(status: OrderStatus) {
|
||||
return shippingAddressEditableStatuses.includes(status);
|
||||
}
|
||||
|
||||
export function canCancelOrder(status: OrderStatus) {
|
||||
return orderCancellableStatuses.includes(status);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user