Compare commits

..
Author SHA1 Message Date
Abdulaziz Salim Said AL-GharbiandClaude Opus 5.5 12c4bc62c1 refactor:centralize order status rules in shared package
Runner Test / test (push) Successful in 17s
Runner Test / test (pull_request) Successful in 18s
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-08 16:25:50 +04:00
derrick 31b367e3a3 add:assignment 4 tests
Runner Test / test (push) Successful in 16s
2026-10-02 16:54:39 +09:00
derrick 877eb9e09a Merge pull request 'Fix Item Quantity Update Constraints' (#21) from fix/dg-3-item-quantity-update-constraints into master
Runner Test / test (push) Successful in 16s
Reviewed-on: #21
2026-10-02 07:52:27 +00:00
derrick 6d3570909a update:item quantity change conditional
Runner Test / test (push) Successful in 17s
Runner Test / test (pull_request) Successful in 17s
2026-10-02 16:49:25 +09:00
derrick 82ed809f32 update:remove unused check
Runner Test / test (push) Failing after 15s
2026-09-27 22:05:51 +09:00
derrick 0e1e64b6ca add:assignment 3 tests
Runner Test / test (push) Failing after 14s
2026-09-27 22:04:59 +09:00
derrick 8235ceb61f Merge pull request 'Feature Internal Order Notes' (#12) from feat/dg-2-internal-order-notes into master
Runner Test / test (push) Failing after 14s
Reviewed-on: #12
2026-09-25 03:47:36 +00:00
derrick 698a49ae82 add:order notes ui component
Runner Test / test (push) Successful in 17s
Runner Test / test (pull_request) Successful in 16s
2026-09-24 22:35:55 +09:00
derrick 97438aaa56 add:order notes crud 2026-09-24 21:07:19 +09:00
derrick 2e2694354d add:notes column to orders 2026-09-24 18:09:20 +09:00
19 changed files with 383 additions and 160 deletions
-1
View File
@@ -28,7 +28,6 @@ bun run dev:web
Common checks: Common checks:
```bash ```bash
bun run check
bun run test bun run test
bun run build:web bun run build:web
``` ```
+1
View File
@@ -120,6 +120,7 @@ export function initializeDatabase(sqlite: Database) {
created_at TEXT NOT NULL created_at TEXT NOT NULL
); );
`); `);
if (!columnExists(sqlite, "orders", "notes")) { if (!columnExists(sqlite, "orders", "notes")) {
sqlite.exec("ALTER TABLE orders ADD COLUMN notes TEXT"); sqlite.exec("ALTER TABLE orders ADD COLUMN notes TEXT");
} }
+2 -2
View File
@@ -1,5 +1,5 @@
import { canCancelOrder, orderCancellationBlockedMessage } from "@orderops/shared/order-status";
import type { DatabaseContext } from "../db/database"; import type { DatabaseContext } from "../db/database";
import { canCancelOrder } from "./order-status";
import { appendAuditEvent, findOrderDetail, updateOrderStatus } from "./order-repository"; import { appendAuditEvent, findOrderDetail, updateOrderStatus } from "./order-repository";
export async function cancelOrder( export async function cancelOrder(
@@ -17,7 +17,7 @@ export async function cancelOrder(
} }
if (!canCancelOrder(order.status)) { if (!canCancelOrder(order.status)) {
return { statusCode: 400, message: "Order cannot be cancelled for this order status." } as const; return { statusCode: 400, message: orderCancellationBlockedMessage } as const;
} }
const updatedAt = new Date().toISOString(); const updatedAt = new Date().toISOString();
@@ -0,0 +1,91 @@
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);
});
});
+13 -6
View File
@@ -96,9 +96,9 @@ 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,
notes: header.order.notes,
customer: { customer: {
id: header.customer.id, id: header.customer.id,
name: header.customer.name, name: header.customer.name,
@@ -117,19 +117,26 @@ export async function findOrderItemRecord(context: DatabaseContext, orderId: str
.leftJoin(inventory, eq(orderItems.productId, inventory.productId)) .leftJoin(inventory, eq(orderItems.productId, inventory.productId))
.where(and(eq(orderItems.id, itemId), eq(orderItems.orderId, orderId))); .where(and(eq(orderItems.id, itemId), eq(orderItems.orderId, orderId)));
return row ?? null; if (!row) {
return null;
}
return {
...row,
order: { ...row.order, status: row.order.status as OrderDetail["status"] }
};
} }
export async function updateOrderItemQuantity(context: DatabaseContext, itemId: string, quantity: number) { export async function updateOrderItemQuantity(context: DatabaseContext, itemId: string, quantity: number) {
await context.db.update(orderItems).set({ quantity }).where(eq(orderItems.id, itemId)); await context.db.update(orderItems).set({ quantity }).where(eq(orderItems.id, itemId));
} }
export async function updateOrderTimestamp(context: DatabaseContext, orderId: string, updatedAt: string) { export async function updateOrderNotes(context: DatabaseContext, orderId: string, notes: string) {
await context.db.update(orders).set({ updatedAt }).where(eq(orders.id, orderId)); await context.db.update(orders).set({ notes }).where(eq(orders.id, orderId));
} }
export async function updateOrderNotes(context: DatabaseContext, orderId: string, notes: string, updatedAt: string) { export async function updateOrderTimestamp(context: DatabaseContext, orderId: string, updatedAt: string) {
await context.db.update(orders).set({ notes, updatedAt }).where(eq(orders.id, orderId)); await context.db.update(orders).set({ updatedAt }).where(eq(orders.id, orderId));
} }
export async function updateOrderStatus(context: DatabaseContext, orderId: string, status: OrderDetail["status"], updatedAt: string) { export async function updateOrderStatus(context: DatabaseContext, orderId: string, status: OrderDetail["status"], updatedAt: string) {
+30 -25
View File
@@ -6,8 +6,7 @@ import { cancelOrder } from "./cancel-order";
import { getOrder } from "./get-order"; 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, updateOrderNotes } from "./update-order-item";
import { changeOrderNotes } from "./update-order-notes";
import { changeShippingAddress } from "./update-shipping-address"; import { changeShippingAddress } from "./update-shipping-address";
interface OrderRouteOptions { interface OrderRouteOptions {
@@ -34,6 +33,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) => {
@@ -70,29 +73,6 @@ export const registerOrderRoutes: FastifyPluginAsync<OrderRouteOptions> = async
app.get<{ Params: IdParams }>("/orders/:orderId/audit-events", async (request) => listAuditEvents(options.db, request.params.orderId)); 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", { app.post<{ Params: OrderItemParams; Body: QuantityBody }>("/orders/:orderId/items/:itemId/quantity", {
schema: { schema: {
body: { body: {
@@ -119,6 +99,31 @@ 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", 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", { app.post<{ Params: IdParams; Body: Address }>("/orders/:orderId/shipping-address", {
schema: { schema: {
body: { body: {
@@ -0,0 +1,108 @@
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);
});
});
-13
View File
@@ -1,13 +0,0 @@
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";
}
+45 -4
View File
@@ -1,6 +1,6 @@
import { canEditOrderItems, orderItemsLockedMessage } from "@orderops/shared/order-status";
import type { DatabaseContext } from "../db/database"; import type { DatabaseContext } from "../db/database";
import { canEditOrderItems } from "./order-status"; import { appendAuditEvent, findOrderDetail, findOrderItemRecord, updateOrderItemQuantity, updateOrderNotes as saveOrderNotes, updateOrderTimestamp } from "./order-repository";
import { appendAuditEvent, findOrderDetail, findOrderItemRecord, updateOrderItemQuantity, updateOrderTimestamp } from "./order-repository";
export async function changeOrderItemQuantity( export async function changeOrderItemQuantity(
context: DatabaseContext, context: DatabaseContext,
@@ -17,8 +17,8 @@ export async function changeOrderItemQuantity(
return { statusCode: 404, message: "Order item not found." } as const; return { statusCode: 404, message: "Order item not found." } as const;
} }
if (!canEditOrderItems(row.order.status as never)) { if (!canEditOrderItems(row.order.status)) {
return { statusCode: 400, message: "Order items cannot be changed for this order status." } as const; return { statusCode: 400, message: orderItemsLockedMessage } as const;
} }
if (input.quantity < 1 || input.quantity > 10) { if (input.quantity < 1 || input.quantity > 10) {
@@ -47,3 +47,44 @@ export async function changeOrderItemQuantity(
order: await findOrderDetail(context, input.orderId) order: await findOrderDetail(context, input.orderId)
} as const; } 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;
}
-19
View File
@@ -1,19 +0,0 @@
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 type { Address } from "@orderops/shared/address";
import { canEditShippingAddress, shippingAddressLockedMessage } from "@orderops/shared/order-status";
import type { DatabaseContext } from "../db/database"; import type { DatabaseContext } from "../db/database";
import { canEditShippingAddress } from "./order-status";
import { appendAuditEvent, findOrderDetail, updateOrderAddress, updateOrderTimestamp } from "./order-repository"; import { appendAuditEvent, findOrderDetail, updateOrderAddress, updateOrderTimestamp } from "./order-repository";
export async function changeShippingAddress( export async function changeShippingAddress(
@@ -18,7 +18,7 @@ export async function changeShippingAddress(
} }
if (!canEditShippingAddress(order.status)) { if (!canEditShippingAddress(order.status)) {
return { statusCode: 400, message: "Shipping address cannot be changed for this order status." } as const; return { statusCode: 400, message: shippingAddressLockedMessage } as const;
} }
const updatedAt = new Date().toISOString(); const updatedAt = new Date().toISOString();
File diff suppressed because one or more lines are too long
+7 -7
View File
@@ -21,6 +21,13 @@ 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) { export function updateShippingAddress(orderId: string, address: Address) {
return apiRequest<OrderDetail>(`/api/orders/${orderId}/shipping-address`, { return apiRequest<OrderDetail>(`/api/orders/${orderId}/shipping-address`, {
method: "POST", method: "POST",
@@ -34,10 +41,3 @@ export function cancelOrder(orderId: string, reason?: string) {
body: JSON.stringify({ reason }) body: JSON.stringify({ reason })
}); });
} }
export function updateOrderNotes(orderId: string, notes: string) {
return apiRequest<OrderDetail>(`/api/orders/${orderId}/notes`, {
method: "POST",
body: JSON.stringify({ notes })
});
}
+6 -13
View File
@@ -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 { OrderNotesForm } from "./order-notes-form"; import { OrderNotes } from "./order-notes";
import { OrderSummaryPanel } from "./order-summary"; import { OrderSummaryPanel } from "./order-summary";
import { ShippingAddressForm } from "./shipping-address-form"; import { ShippingAddressForm } from "./shipping-address-form";
@@ -10,8 +10,8 @@ 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>;
onSaveNotes: (notes: string) => Promise<boolean>;
} }
export function OrderDetailPage({ export function OrderDetailPage({
@@ -19,28 +19,21 @@ export function OrderDetailPage({
auditEvents, auditEvents,
onUpdateQuantity, onUpdateQuantity,
onSaveAddress, onSaveAddress,
onCancel, onSaveNotes,
onSaveNotes onCancel
}: OrderDetailPageProps) { }: OrderDetailPageProps) {
return ( return (
<div className="space-y-4"> <div className="space-y-4">
<OrderSummaryPanel order={order} /> <OrderSummaryPanel order={order} />
<div className="flex justify-end gap-3"> <div className="flex justify-end">
<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"> <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
</button> </button>
</div> </div>
<OrderItemsPanel order={order} onUpdateQuantity={onUpdateQuantity} /> <OrderItemsPanel order={order} onUpdateQuantity={onUpdateQuantity} />
<ShippingAddressForm order={order} onSave={onSaveAddress} /> <ShippingAddressForm order={order} onSave={onSaveAddress} />
<OrderNotes order={order} onSave={onSaveNotes} />
<AuditTimeline events={auditEvents} /> <AuditTimeline events={auditEvents} />
<OrderNotesForm key={order.id} notes={order.notes} onSave={onSaveNotes} />
</div> </div>
); );
} }
-58
View File
@@ -1,58 +0,0 @@
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>
);
}
+37
View File
@@ -0,0 +1,37 @@
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>
);
}
+19 -8
View File
@@ -1,5 +1,5 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import type { Address, AuditEvent, OrderDetail } from "@orderops/shared"; import { canEditOrderItems, orderItemsLockedMessage, type Address, type AuditEvent, type 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, updateOrderItemQuantity, updateOrderNotes, updateShippingAddress } from "./order-api";
@@ -55,7 +55,7 @@ export function OrderPage() {
async function runAction(action: () => Promise<OrderDetail>, successMessage: string) { async function runAction(action: () => Promise<OrderDetail>, successMessage: string) {
if (!orderId) { if (!orderId) {
return false; return;
} }
try { try {
@@ -64,16 +64,27 @@ export function OrderPage() {
setOrder(nextOrder); setOrder(nextOrder);
await refreshOrder(orderId); await refreshOrder(orderId);
setToast({ message: successMessage, variant: "success" }); setToast({ message: successMessage, variant: "success" });
return true;
} catch (caught) { } catch (caught) {
setToast({ setToast({
message: caught instanceof Error ? caught.message : "Request failed.", message: caught instanceof Error ? caught.message : "Request failed.",
variant: "error" 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 ( return (
<div className="space-y-4"> <div className="space-y-4">
<Link className="inline-flex text-sm font-medium text-blue-600 hover:text-blue-700" to="/orders"> <Link className="inline-flex text-sm font-medium text-blue-600 hover:text-blue-700" to="/orders">
@@ -86,10 +97,10 @@ export function OrderPage() {
<OrderDetailPage <OrderDetailPage
order={order} order={order}
auditEvents={auditEvents} auditEvents={auditEvents}
onUpdateQuantity={async (itemId, quantity) => { await runAction(() => updateOrderItemQuantity(order.id, itemId, quantity), "Quantity saved."); }} onUpdateQuantity={handleUpdateQuantity}
onSaveAddress={async (address: Address) => { await runAction(() => updateShippingAddress(order.id, address), "Shipping address saved."); }} onSaveAddress={(address: Address) => runAction(() => updateShippingAddress(order.id, address), "Shipping address saved.")}
onCancel={async () => { await runAction(() => cancelOrder(order.id), "Order cancelled."); }} onSaveNotes={(notes) => runAction(() => updateOrderNotes(order.id, notes), "Notes saved.")}
onSaveNotes={(notes) => runAction(() => updateOrderNotes(order.id, notes), "Internal notes saved.")} onCancel={() => runAction(() => cancelOrder(order.id), "Order cancelled.")}
/> />
) : null} ) : null}
</div> </div>
+1 -1
View File
@@ -17,9 +17,9 @@ export interface OrderDetail {
id: string; id: string;
orderNumber: string; orderNumber: string;
status: OrderStatus; status: OrderStatus;
notes: string | null;
createdAt: string; createdAt: string;
updatedAt: string; updatedAt: string;
notes: string | null;
customer: CustomerSummary; customer: CustomerSummary;
shippingAddress: Address; shippingAddress: Address;
items: OrderItemDetail[]; items: OrderItemDetail[];
+20
View File
@@ -1,3 +1,23 @@
export const orderStatuses = ["pending", "processing", "shipped", "cancelled", "refunded"] as const; export const orderStatuses = ["pending", "processing", "shipped", "cancelled", "refunded"] as const;
export type OrderStatus = (typeof orderStatuses)[number]; 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);
}