163 lines
9.0 KiB
TypeScript
163 lines
9.0 KiB
TypeScript
import type { ActionFunctionArgs, LoaderFunctionArgs } from "react-router";
|
||
import { Form, useActionData, useLoaderData } from "react-router";
|
||
import prisma from "../db.server";
|
||
import { checkFreshness, evaluateRules } from "../engine/rules";
|
||
import { addDays, localParts } from "../engine/time";
|
||
import type { RuleAction } from "../engine/types";
|
||
import { adminContext, formInt, formList, formString } from "../lib/admin.server";
|
||
import { niceDate } from "../lib/format";
|
||
import { bumpConfig } from "../services/config.server";
|
||
import { RuleActionSchema, RuleTargetSchema } from "../services/settings";
|
||
|
||
type Fresh = Extract<RuleAction, { type: "freshness" }>;
|
||
|
||
export const loader = async ({ request }: LoaderFunctionArgs) => {
|
||
const { cfg, features } = await adminContext(request);
|
||
const today = localParts(Date.now(), cfg.shop.timezone).date;
|
||
const rules = cfg.rules
|
||
.filter((r) => r.action.type === "freshness")
|
||
.map((r) => {
|
||
const a = r.action as Fresh;
|
||
// Preview which of the next 28 days this product could be fulfilled.
|
||
const cons = evaluateRules({ items: [{ productId: "x", variantId: "x", title: r.name, quantity: 1, price: 0, tags: ["__preview"] }] }, [
|
||
{ ...r, enabled: true, target: { type: "tag", values: ["__preview"] } },
|
||
]);
|
||
const strip = Array.from({ length: 28 }, (_, i) => {
|
||
const d = addDays(today, i);
|
||
return { d, ok: !checkFreshness(cons.freshness, d, cfg.locations[0]?.id ?? "") };
|
||
});
|
||
return { ...r, a, strip };
|
||
});
|
||
return { rules, allowed: features.freshness, locations: cfg.locations.map((l) => ({ id: l.id, name: l.name })) };
|
||
};
|
||
|
||
export const action = async ({ request }: ActionFunctionArgs) => {
|
||
const { cfg, features } = await adminContext(request);
|
||
if (!features.freshness) return { ok: false, message: "Fresh-stock windows are on the Growth plan" };
|
||
const fd = await request.formData();
|
||
const intent = formString(fd, "intent");
|
||
const find = async (id: string) => prisma.productRule.findFirst({ where: { id, shopId: cfg.shop.id } });
|
||
|
||
if (intent === "create") {
|
||
const target = RuleTargetSchema.safeParse({ type: formString(fd, "targetType"), values: formList(fd, "targetValues") });
|
||
const act = RuleActionSchema.safeParse({
|
||
type: "freshness",
|
||
arrivals: formList(fd, "arrivals").map((date) => ({ date })),
|
||
minDaysAfterArrival: formInt(fd, "minDays") ?? 1,
|
||
shelfLifeDays: formInt(fd, "shelfLife") ?? 4,
|
||
});
|
||
if (!target.success || !act.success) return { ok: false, message: "Check the product match and the dates (YYYY-MM-DD)" };
|
||
await prisma.productRule.create({
|
||
data: { shopId: cfg.shop.id, name: formString(fd, "name") || "Fresh stock", priority: 5, target: target.data, action: act.data, message: formString(fd, "message") || null },
|
||
});
|
||
} else {
|
||
const [op, id, extra] = intent.split(":");
|
||
const r = await find(id);
|
||
if (!r) return { ok: false, message: "Not found" };
|
||
const a = r.action as unknown as Fresh;
|
||
if (op === "add") {
|
||
const date = formString(fd, `arrival_${id}`);
|
||
const locs = formString(fd, `arrivalLoc_${id}`);
|
||
if (!/^\d{4}-\d{2}-\d{2}$/.test(date)) return { ok: false, message: "Pick an arrival date" };
|
||
a.arrivals = [...a.arrivals, { date, ...(locs ? { locationIds: [locs] } : {}) }].sort((x, y) => (x.date < y.date ? -1 : 1));
|
||
}
|
||
if (op === "remove") a.arrivals = a.arrivals.filter((_, i) => i !== Number(extra));
|
||
if (op === "window") {
|
||
a.minDaysAfterArrival = formInt(fd, `min_${id}`) ?? a.minDaysAfterArrival;
|
||
a.shelfLifeDays = formInt(fd, `shelf_${id}`) ?? a.shelfLifeDays;
|
||
}
|
||
if (op === "delete") {
|
||
await prisma.productRule.delete({ where: { id } });
|
||
await bumpConfig(cfg.shop.id, cfg.shop.domain);
|
||
return { ok: true, message: "Removed" };
|
||
}
|
||
await prisma.productRule.update({ where: { id }, data: { action: a as object } });
|
||
}
|
||
await bumpConfig(cfg.shop.id, cfg.shop.domain);
|
||
return { ok: true, message: "Saved" };
|
||
};
|
||
|
||
export default function Freshness() {
|
||
const { rules, allowed, locations } = useLoaderData<typeof loader>();
|
||
const result = useActionData<typeof action>();
|
||
return (
|
||
<s-page heading="Fresh stock">
|
||
{result && <s-banner tone={result.ok ? "success" : "critical"}>{result.message}</s-banner>}
|
||
{!allowed && <s-banner tone="info" heading="Growth plan feature">Tie bookable dates to when perishable stock arrives. <s-link href="/app/settings#plan">See plans</s-link></s-banner>}
|
||
<s-section>
|
||
<s-paragraph>
|
||
For perishables like flowers, produce and sweets: customers can only pick dates from arrival + "ready after" days up to arrival + shelf life. If no batch covers a date, the calendar tells the customer when the next fresh batch is ready.
|
||
</s-paragraph>
|
||
</s-section>
|
||
{rules.map((r) => (
|
||
<s-section key={r.id} heading={r.name}>
|
||
<s-stack gap="base">
|
||
<s-text color="subdued">Applies to {r.target.type}: {r.target.values.join(", ")}</s-text>
|
||
<s-stack direction="inline" gap="small-200">
|
||
{r.a.arrivals.map((x, i) => (
|
||
<Form method="post" key={`${x.date}-${i}`}>
|
||
<input type="hidden" name="intent" value={`remove:${r.id}:${i}`} />
|
||
<s-box padding="small-200" border="base" borderRadius="large">
|
||
<s-stack direction="inline" gap="small-200" alignItems="center">
|
||
<s-text>{niceDate(x.date)}{x.locationIds?.length ? ` · ${locations.find((l) => l.id === x.locationIds![0])?.name ?? ""}` : ""}</s-text>
|
||
<s-button type="submit" variant="tertiary" accessibilityLabel={`Remove arrival ${x.date}`}>×</s-button>
|
||
</s-stack>
|
||
</s-box>
|
||
</Form>
|
||
))}
|
||
</s-stack>
|
||
<Form method="post">
|
||
<input type="hidden" name="intent" value={`add:${r.id}`} />
|
||
<s-stack direction="inline" gap="base" alignItems="end">
|
||
<s-date-field name={`arrival_${r.id}`} label="Stock arrives" />
|
||
<s-select name={`arrivalLoc_${r.id}`} label="At">
|
||
<s-option value="">All locations</s-option>
|
||
{locations.map((l) => <s-option key={l.id} value={l.id}>{l.name}</s-option>)}
|
||
</s-select>
|
||
<s-button type="submit">Add arrival</s-button>
|
||
</s-stack>
|
||
</Form>
|
||
<Form method="post">
|
||
<input type="hidden" name="intent" value={`window:${r.id}`} />
|
||
<s-stack direction="inline" gap="base" alignItems="end">
|
||
<s-number-field name={`min_${r.id}`} label="Ready after (days)" defaultValue={String(r.a.minDaysAfterArrival)} min={0} />
|
||
<s-number-field name={`shelf_${r.id}`} label="Shelf life (days)" defaultValue={String(r.a.shelfLifeDays)} min={1} />
|
||
<s-button type="submit">Update window</s-button>
|
||
</s-stack>
|
||
</Form>
|
||
<s-text color="subdued">Bookable in the next 28 days:</s-text>
|
||
<div style={{ display: "grid", gridTemplateColumns: "repeat(28, minmax(22px, 1fr))", gap: 3, overflowX: "auto" }}>
|
||
{r.strip.map((s) => (
|
||
<div key={s.d} title={niceDate(s.d)} style={{ textAlign: "center", fontSize: 11, padding: "4px 0", borderRadius: 5, background: s.ok ? "#cdfee1" : "#f1f1f1", color: s.ok ? "#0c5132" : "#8a8a8a" }}>
|
||
{s.d.slice(8)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
<Form method="post"><input type="hidden" name="intent" value={`delete:${r.id}`} /><s-button type="submit" variant="tertiary" tone="critical">Delete this rule</s-button></Form>
|
||
</s-stack>
|
||
</s-section>
|
||
))}
|
||
<s-section heading="Track a perishable product">
|
||
<Form method="post">
|
||
<input type="hidden" name="intent" value="create" />
|
||
<s-grid gridTemplateColumns="repeat(auto-fit, minmax(190px, 1fr))" gap="base" alignItems="end">
|
||
<s-text-field name="name" label="Name" placeholder="Marigold air shipments" />
|
||
<s-select name="targetType" label="Match by">
|
||
<s-option value="tag">Product tag</s-option>
|
||
<s-option value="productType">Product type</s-option>
|
||
<s-option value="collection">Collection ID</s-option>
|
||
<s-option value="product">Product ID</s-option>
|
||
</s-select>
|
||
<s-text-field name="targetValues" label="Values" placeholder="fresh-flowers" required />
|
||
<s-text-field name="arrivals" label="Arrival dates" placeholder="2026-11-03, 2026-11-05" />
|
||
<s-number-field name="minDays" label="Ready after (days)" defaultValue="1" min={0} />
|
||
<s-number-field name="shelfLife" label="Shelf life (days)" defaultValue="4" min={1} />
|
||
<s-text-field name="message" label="Customer message (optional)" />
|
||
<s-button type="submit" variant="primary" disabled={!allowed}>Add</s-button>
|
||
</s-grid>
|
||
</Form>
|
||
</s-section>
|
||
</s-page>
|
||
);
|
||
}
|