@agence-zef/astro 0.1.0 → 0.3.0

package/components/Checkout.astro

@@ -0,0 +1,307 @@
+---
+import { getAccount } from "@agence-zef/astro/accounts";
+/**
+ * Paiement d'une commande, sans style imposé, en trois étapes (sans JavaScript jusqu'au paiement) :
+ * 1. adresse de livraison (`/__zef/shop/address`, gardée une heure dans un cookie) ;
+ * 2. livraison (`?etape=livraison`) : modes proposés pour le pays et le poids du panier (Sendcloud,
+ *    retrait sur place), point relais parmi les plus proches, conditions générales de vente ; le CMS
+ *    crée la commande, réserve le stock 30 minutes et la facture (`/__zef/shop/checkout`) ;
+ * 3. paiement (`?etape=paiement`) : Payment Element de Stripe (JavaScript, habillé par les
+ *    variables CSS du site via `appearance`), ou « Payer (simulation) » en développement local.
+ * Classes `zef-checkout__*`. Page protégée (compte connecté), rendue à la demande.
+ */
+import {
+	checkoutAddress,
+	formatPrice,
+	getCart,
+	getServicePoints,
+	getShippingOptions,
+	pendingPayment,
+	SHOP_ERRORS,
+} from "@agence-zef/astro/shop";
+
+interface Props {
+	/** Page des conditions générales de vente, liée à la case à cocher. */
+	termsHref: string;
+	/** Page de confirmation (`?commande=<id>`). */
+	confirmationHref?: string;
+	cartHref?: string;
+	class?: string;
+}
+
+const {
+	termsHref,
+	confirmationHref = "/commande",
+	cartHref = "/panier",
+	class: className,
+} = Astro.props;
+const params = Astro.url.searchParams;
+const saved = checkoutAddress(Astro);
+const asked = params.get("etape");
+const step =
+	asked === "paiement" ? "payment" : asked === "livraison" && saved ? "shipping" : "address";
+const errorCode = params.get("zef_shop_error");
+const account = await getAccount(Astro);
+const cart = step !== "payment" ? await getCart(Astro, Astro.currentLocale) : null;
+const options = step === "shipping" && saved ? await getShippingOptions(Astro, saved.country) : [];
+const points = Object.fromEntries(
+	await Promise.all(
+		options
+			.filter((o) => o.servicePoint && saved)
+			.map(
+				async (o) =>
+					[
+						o.id,
+						await getServicePoints(Astro, {
+							option: o.id,
+							country: saved?.country ?? "FR",
+							postalCode: saved?.postalCode ?? "",
+						}),
+					] as const,
+			),
+	),
+);
+const payment = step === "payment" ? pendingPayment(Astro) : null;
+// Rien à livrer (cartes cadeaux, accès) : ni adresse ni livraison, les conditions puis le paiement.
+const giftsOnly = !!cart && cart.lines.length > 0 && !cart.shippingRequired;
+const returnUrl = payment
+	? new URL(`${confirmationHref}?commande=${payment.orderId}`, Astro.url.origin).toString()
+	: "";
+const address = saved ?? {
+	name: account ? `${account.firstName} ${account.lastName}` : "",
+	line1: "",
+	line2: "",
+	postalCode: "",
+	city: "",
+	country: "FR",
+	phone: account?.phone ?? "",
+};
+const COUNTRIES = [
+	["FR", "France"],
+	["BE", "Belgique"],
+	["LU", "Luxembourg"],
+	["CH", "Suisse"],
+	["MC", "Monaco"],
+];
+const price = (o: { kind: string; price: number; free: boolean }) =>
+	o.kind === "pickup" ? "Gratuit" : o.free || o.price === 0 ? "Offerte" : formatPrice(o.price);
+---
+
+<div class:list={["zef-checkout", className]} data-step={step}>
+	{errorCode && <p class="zef-checkout__error" role="alert">{SHOP_ERRORS[errorCode] ?? SHOP_ERRORS.unknown}</p>}
+	{
+		step === "address" &&
+			(!cart || cart.lines.length === 0 ? (
+				<p class="zef-checkout__empty">
+					Votre panier est vide. <a href={cartHref}>Retour au panier</a>
+				</p>
+			) : giftsOnly ? (
+				<form method="post" action="/__zef/shop/checkout" class="zef-checkout__gifts">
+					<input type="hidden" name="zef_page" value={Astro.url.pathname} />
+					<input type="hidden" name="zef_locale" value={Astro.currentLocale ?? ""} />
+					<input type="hidden" name="giftsOnly" value="1" />
+					<p class="zef-checkout__summary">
+						{cart.count} article{cart.count > 1 ? "s" : ""} · <strong>{formatPrice(cart.total)}</strong> TTC ·{" "}
+						<a href={cartHref}>Modifier le panier</a>
+					</p>
+					<p class="zef-checkout__notice">Rien à livrer : les cartes cadeaux partent par email, les accès s'ouvrent dans votre compte.</p>
+					<label class="zef-checkout__terms">
+						<input type="checkbox" name="acceptTerms" required />
+						J'accepte les <a href={termsHref} target="_blank">conditions générales de vente</a>.
+					</label>
+					<button type="submit" class="zef-checkout__submit">Continuer vers le paiement</button>
+				</form>
+			) : (
+				<form method="post" action="/__zef/shop/address" class="zef-checkout__address">
+					<input type="hidden" name="zef_page" value={Astro.url.pathname} />
+					<p class="zef-checkout__summary">
+						{cart.count} article{cart.count > 1 ? "s" : ""} · <strong>{formatPrice(cart.total)}</strong> TTC ·{" "}
+						<a href={cartHref}>Modifier le panier</a>
+					</p>
+					<fieldset class="zef-checkout__fields">
+						<legend>Adresse de livraison</legend>
+						<label>
+							Nom
+							<input name="name" required autocomplete="name" value={address.name} />
+						</label>
+						<label>
+							Adresse
+							<input name="line1" required autocomplete="address-line1" value={address.line1} />
+						</label>
+						<label>
+							Complément <span class="zef-checkout__optional">(facultatif)</span>
+							<input name="line2" autocomplete="address-line2" value={address.line2 ?? ""} />
+						</label>
+						<label>
+							Code postal
+							<input name="postalCode" required autocomplete="postal-code" inputmode="numeric" value={address.postalCode} />
+						</label>
+						<label>
+							Ville
+							<input name="city" required autocomplete="address-level2" value={address.city} />
+						</label>
+						<label>
+							Pays
+							<select name="country" autocomplete="country">
+								{COUNTRIES.map(([code, label]) => (
+									<option value={code} selected={address.country === code}>{label}</option>
+								))}
+							</select>
+						</label>
+						<label>
+							Téléphone <span class="zef-checkout__optional">(facultatif)</span>
+							<input name="phone" type="tel" autocomplete="tel" value={address.phone ?? ""} />
+						</label>
+					</fieldset>
+					<button type="submit" class="zef-checkout__submit">Continuer vers la livraison</button>
+				</form>
+			))
+	}
+	{
+		step === "shipping" &&
+			saved &&
+			(!cart || cart.lines.length === 0 ? (
+				<p class="zef-checkout__empty">
+					Votre panier est vide. <a href={cartHref}>Retour au panier</a>
+				</p>
+			) : (
+				<form method="post" action="/__zef/shop/checkout" class="zef-checkout__shipping">
+					<input type="hidden" name="zef_page" value={`${Astro.url.pathname}?etape=livraison`} />
+					<input type="hidden" name="zef_locale" value={Astro.currentLocale ?? ""} />
+					<p class="zef-checkout__summary">
+						Livraison à {saved.name}, {saved.line1}, {saved.postalCode} {saved.city} ·{" "}
+						<a href={Astro.url.pathname}>Modifier l'adresse</a>
+					</p>
+					{options.length === 0 ? (
+						<p class="zef-checkout__notice">Aucun mode de livraison ne dessert cette adresse.</p>
+					) : (
+						<fieldset class="zef-checkout__options">
+							<legend>Mode de livraison</legend>
+							{options.map((o, i) => (
+								<div class="zef-checkout__option" data-kind={o.kind}>
+									<label>
+										<input type="radio" name="shippingOption" value={o.id} required checked={i === 0} />
+										<span class="zef-checkout__option-label">{o.label}</span>
+										<span class="zef-checkout__option-price">{price(o)}</span>
+									</label>
+									{o.pickup && (
+										<p class="zef-checkout__pickup">
+											{o.pickup.address}
+											{o.pickup.hours && <><br />{o.pickup.hours}</>}
+											{o.pickup.instructions && <><br />{o.pickup.instructions}</>}
+										</p>
+									)}
+									{o.servicePoint &&
+										((points[o.id] ?? []).length === 0 ? (
+											<p class="zef-checkout__notice">Aucun point relais près de {saved.postalCode}.</p>
+										) : (
+											<label class="zef-checkout__points">
+												Point relais
+												<select name={`servicePoint_${o.id}`}>
+													{(points[o.id] ?? []).map((p) => (
+														<option value={p.id}>
+															{p.name} · {p.address}, {p.postalCode} {p.city}
+															{p.distance !== null ? ` (${(p.distance / 1000).toFixed(1).replace(".", ",")} km)` : ""}
+														</option>
+													))}
+												</select>
+											</label>
+										))}
+								</div>
+							))}
+						</fieldset>
+					)}
+					<p class="zef-checkout__summary">
+						Articles : <strong>{formatPrice(cart.total)}</strong> TTC
+						{cart.promo && <> (code {cart.promo.code}{cart.promo.discount ? ` −${formatPrice(cart.promo.discount)}` : ", livraison offerte"})</>}, livraison en plus selon le mode choisi.
+						{cart.giftCard && <> Carte cadeau •••• {cart.giftCard.last4} : jusqu'à {formatPrice(cart.giftCard.available)} déduits au paiement.</>}
+					</p>
+					<label class="zef-checkout__terms">
+						<input type="checkbox" name="acceptTerms" required />
+						J'accepte les <a href={termsHref} target="_blank">conditions générales de vente</a>.
+					</label>
+					<button type="submit" class="zef-checkout__submit" disabled={options.length === 0}>
+						Continuer vers le paiement
+					</button>
+				</form>
+			))
+	}
+	{
+		step === "payment" &&
+			(!payment ? (
+				<p class="zef-checkout__empty">
+					Aucun paiement en cours. <a href={cartHref}>Retour au panier</a>
+				</p>
+			) : payment.provider === "simulated" ? (
+				<form method="post" action="/__zef/shop/simulate" class="zef-checkout__payment" data-provider="simulated">
+					<input type="hidden" name="zef_page" value={Astro.url.pathname} />
+					<input type="hidden" name="orderId" value={payment.orderId} />
+					<p class="zef-checkout__summary">
+						Commande {payment.number} · <strong>{formatPrice(payment.total)}</strong> TTC
+					</p>
+					<p class="zef-checkout__notice">Paiement simulé (développement) : aucune carte n'est débitée.</p>
+					<button type="submit" class="zef-checkout__submit">Payer (simulation)</button>
+				</form>
+			) : (
+				<form
+					class="zef-checkout__payment"
+					data-provider="stripe"
+					data-zef-stripe
+					data-key={payment.publishableKey ?? ""}
+					data-secret={payment.clientSecret ?? ""}
+					data-return={returnUrl}
+				>
+					<p class="zef-checkout__summary">
+						Commande {payment.number} · <strong>{formatPrice(payment.total)}</strong> TTC
+						{payment.test && <span class="zef-checkout__test"> · mode test</span>}
+					</p>
+					<div class="zef-checkout__element" data-element />
+					<p class="zef-checkout__error" role="alert" data-message hidden />
+					<button type="submit" class="zef-checkout__submit">Payer {formatPrice(payment.total)}</button>
+				</form>
+			))
+	}
+</div>
+
+{payment?.provider === "stripe" && <script is:inline src="https://js.stripe.com/v3/" />}
+
+<script>
+	type StripeLike = {
+		elements(o: object): { create(type: string, o?: object): { mount(el: Element): void } };
+		confirmPayment(o: object): Promise<{ error?: { message?: string } }>;
+	};
+	// Payment Element : les couleurs et la police du site sont reprises de ses variables CSS.
+	for (const form of document.querySelectorAll<HTMLFormElement>("[data-zef-stripe]")) {
+		const Stripe = (window as unknown as { Stripe?: (key: string) => StripeLike }).Stripe;
+		const { key, secret, return: returnUrl } = form.dataset;
+		if (!Stripe || !key || !secret) continue;
+		const stripe = Stripe(key);
+		const css = getComputedStyle(document.documentElement);
+		const variable = (name: string) => css.getPropertyValue(name).trim() || undefined;
+		const elements = stripe.elements({
+			clientSecret: secret,
+			appearance: {
+				variables: {
+					colorPrimary: variable("--color-accent"),
+					colorText: variable("--color-text"),
+					fontFamily: variable("--font-body"),
+					borderRadius: variable("--radius"),
+				},
+			},
+		});
+		const target = form.querySelector("[data-element]");
+		if (target) elements.create("payment").mount(target);
+		form.addEventListener("submit", async (event) => {
+			event.preventDefault();
+			const button = form.querySelector<HTMLButtonElement>("button[type=submit]");
+			if (button) button.disabled = true;
+			const { error } = await stripe.confirmPayment({ elements, confirmParams: { return_url: returnUrl } });
+			const message = form.querySelector<HTMLElement>("[data-message]");
+			if (error && message) {
+				message.textContent = error.message ?? "Le paiement a échoué.";
+				message.hidden = false;
+			}
+			if (button) button.disabled = false;
+		});
+	}
+</script>

package/components/ReservedNotice.astro

@@ -0,0 +1,33 @@
+---
+/**
+ * Contenu réservé sans droit (lot 14e5c), sans style imposé : titre, phrase, produits qui le
+ * débloquent et lien de connexion. Classes `zef-reserved__*`. Le site peut la remplacer par la
+ * sienne en lisant `access` sur la page.
+ */
+interface Props {
+	title: string;
+	products: { id: string; name: string; url: string | null }[];
+	signInHref?: string;
+	class?: string;
+}
+
+const { title, products, signInHref = "/compte/connexion", class: className } = Astro.props;
+const redirect = encodeURIComponent(Astro.url.pathname);
+---
+
+<section class:list={["zef-reserved", className]}>
+	<h1 class="zef-reserved__title">{title}</h1>
+	<p class="zef-reserved__text">Ce contenu est réservé à ses acheteurs.</p>
+	{
+		products.length > 0 && (
+			<ul class="zef-reserved__products">
+				{products.map((p) => (
+					<li>{p.url ? <a href={p.url}>{p.name}</a> : p.name}</li>
+				))}
+			</ul>
+		)
+	}
+	<p class="zef-reserved__sign-in">
+		Déjà acheté ? <a href={`${signInHref}?redirect=${redirect}`}>Connectez-vous</a>.
+	</p>
+</section>

package/components/Subscriptions.astro

@@ -0,0 +1,91 @@
+---
+/**
+ * Abonnements du compte connecté (lot 14e6b), sans style imposé : produit, prix et période,
+ * statut (essai, actif, paiement refusé, résilié, terminé), prochaine échéance ; « Changer de
+ * carte » (portail Stripe) et « Résilier » (à la fin de la période payée, confirmation par une
+ * case à cocher). Formulaires sans JavaScript. Classes `zef-subscriptions__*`. Page rendue à la
+ * demande.
+ */
+import { formatPrice, getSubscriptions, SHOP_ERRORS } from "@agence-zef/astro/shop";
+
+interface Props {
+	empty?: string;
+	class?: string;
+}
+
+const { empty = "Aucun abonnement pour le moment.", class: className } = Astro.props;
+const subscriptions = await getSubscriptions(Astro);
+const errorCode = Astro.url.searchParams.get("zef_shop_error");
+const cancelled = Astro.url.searchParams.get("zef_shop_ok") === "cancel-subscription";
+const date = (iso: string) =>
+	new Date(iso).toLocaleDateString("fr-FR", { day: "numeric", month: "long", year: "numeric" });
+const period = (i: "month" | "year") => (i === "year" ? "par an" : "par mois");
+
+function state(s: (typeof subscriptions)[number]) {
+	if (s.endedAt) return { key: "ended", label: `Terminé le ${date(s.endedAt)}` };
+	if (s.cancelAtPeriodEnd)
+		return {
+			key: "canceling",
+			label: s.currentPeriodEnd
+				? `Résilié : accès jusqu'au ${date(s.currentPeriodEnd)}`
+				: "Résilié",
+		};
+	if (s.status === "trialing")
+		return {
+			key: "trialing",
+			label: s.trialEnd ? `Essai gratuit jusqu'au ${date(s.trialEnd)}` : "Essai gratuit",
+		};
+	if (s.status === "past_due" || s.status === "unpaid")
+		return { key: "past_due", label: "Paiement refusé : mettez à jour votre carte" };
+	return {
+		key: "active",
+		label: s.currentPeriodEnd
+			? `Actif · prochaine échéance le ${date(s.currentPeriodEnd)}`
+			: "Actif",
+	};
+}
+---
+
+<div class:list={["zef-subscriptions", className]}>
+	{cancelled && <p class="zef-subscriptions__success" role="status">Abonnement résilié : vous gardez vos accès jusqu'à la fin de la période payée.</p>}
+	{errorCode && <p class="zef-subscriptions__error" role="alert">{SHOP_ERRORS[errorCode] ?? SHOP_ERRORS.unknown}</p>}
+	{
+		subscriptions.length === 0 ? (
+			<p class="zef-subscriptions__empty">{empty}</p>
+		) : (
+			<ul class="zef-subscriptions__list">
+				{subscriptions.map((s) => {
+					const st = state(s);
+					const live = st.key !== "ended";
+					return (
+						<li class="zef-subscriptions__item" data-state={st.key}>
+							<span class="zef-subscriptions__product">{s.product}</span>
+							<span class="zef-subscriptions__price">
+								{formatPrice(s.priceCents)} {period(s.interval)}
+							</span>
+							<span class="zef-subscriptions__state">{st.label}</span>
+							{live && (
+								<form method="post" action="/__zef/shop/subscription-card" class="zef-subscriptions__card">
+									<input type="hidden" name="zef_page" value={Astro.url.pathname} />
+									<input type="hidden" name="subscriptionId" value={s.id} />
+									<button type="submit">Changer de carte</button>
+								</form>
+							)}
+							{live && !s.cancelAtPeriodEnd && (
+								<form method="post" action="/__zef/shop/cancel-subscription" class="zef-subscriptions__cancel">
+									<input type="hidden" name="zef_page" value={Astro.url.pathname} />
+									<input type="hidden" name="subscriptionId" value={s.id} />
+									<label>
+										<input type="checkbox" name="confirm" required />
+										Je confirme la résiliation{s.currentPeriodEnd ? ` (accès gardés jusqu'au ${date(s.currentPeriodEnd)})` : ""}
+									</label>
+									<button type="submit">Résilier</button>
+								</form>
+							)}
+						</li>
+					);
+				})}
+			</ul>
+		)
+	}
+</div>

package/components/VideoPlayer.astro

@@ -0,0 +1,71 @@
+---
+/**
+ * Lecture d'une vidéo vendue par la Boutique (lot 14e5b), sans style imposé. Selon l'accès du
+ * compte connecté : lecteur (liens signés de courte durée, jamais publics), bouton
+ * « Commencer la location » pour une location pas encore commencée (le premier visionnage la
+ * démarre), ou message (accès terminé, pas d'accès). Classes `zef-video__*`. Page rendue à la
+ * demande, protégée par `accounts.protect` de préférence.
+ */
+import { getAccess, getPlayback } from "@agence-zef/astro/shop";
+
+interface Props {
+	videoId: string;
+	/** Texte sans accès (par défaut : lien vers la boutique). */
+	locked?: string;
+	class?: string;
+}
+
+const {
+	videoId,
+	locked = "Cette vidéo est réservée à ses acheteurs.",
+	class: className,
+} = Astro.props;
+const access = (await getAccess(Astro)).filter((a) => a.videoId === videoId);
+const active = access.find((a) => a.state === "active");
+const waiting = !active ? access.find((a) => a.state === "not_started") : undefined;
+const playback = active ? await getPlayback(Astro, videoId) : null;
+const duration = (h: number | null) =>
+	!h ? "" : h % 24 === 0 ? `${h / 24} jour${h / 24 > 1 ? "s" : ""}` : `${h} h`;
+const date = (iso: string) =>
+	new Date(iso).toLocaleDateString("fr-FR", {
+		day: "numeric",
+		month: "long",
+		hour: "2-digit",
+		minute: "2-digit",
+	});
+---
+
+<div class:list={["zef-video", className]} data-state={active ? "active" : waiting ? "not_started" : access[0]?.state ?? "none"}>
+	{
+		playback ? (
+			<>
+				{playback.iframe ? (
+					<iframe
+						class="zef-video__player"
+						src={playback.iframe}
+						title="Lecteur vidéo"
+						allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture"
+						allowfullscreen
+					/>
+				) : playback.mp4 ? (
+					<video class="zef-video__player" src={playback.mp4} controls playsinline />
+				) : null}
+				{playback.endsAt && <p class="zef-video__until">Accès jusqu'au {date(playback.endsAt)}.</p>}
+			</>
+		) : waiting ? (
+			<form method="post" action="/__zef/shop/play" class="zef-video__start">
+				<input type="hidden" name="zef_page" value={Astro.url.pathname + Astro.url.search} />
+				<input type="hidden" name="videoId" value={videoId} />
+				<p>
+					Location de {duration(waiting.durationHours)} à partir du premier visionnage
+					{waiting.startBefore && <>, à commencer avant le {date(waiting.startBefore)}</>}.
+				</p>
+				<button type="submit" class="zef-video__button">Commencer la location</button>
+			</form>
+		) : access.length ? (
+			<p class="zef-video__ended">Votre accès à cette vidéo est terminé.</p>
+		) : (
+			<p class="zef-video__locked">{locked}</p>
+		)
+	}
+</div>

package/components/routes/account.ts

@@ -0,0 +1,23 @@
+import config from "virtual:zef/config";
+import { handleAccountForm, isAccountAction } from "@agence-zef/astro/accounts";
+import type { APIRoute } from "astro";
+
+/*
+ * Envoi des formulaires de compte (`<AccountForm>`), injecté par l'option `accounts` de
+ * `@agence-zef/astro` : appelle le CMS avec la clé du site, pose ou efface le cookie de session,
+ * puis redirige (fonctionne sans JavaScript).
+ */
+
+export const prerender = false;
+
+export const POST: APIRoute = async (context) => {
+	const action = context.params.action ?? "";
+	if (!isAccountAction(action)) return new Response("Action inconnue", { status: 404 });
+	const origin = context.request.headers.get("origin");
+	if (origin && origin !== context.url.origin) {
+		return new Response("Origine refusée", { status: 403 });
+	}
+	const form = await context.request.formData();
+	const fields = config.fields?.find((d) => d.entity === "accounts.account")?.fields;
+	return context.redirect(await handleAccountForm(context, action, form, fields), 303);
+};

package/components/routes/reserved.astro

@@ -0,0 +1,54 @@
+---
+import Layout from "virtual:zef/layout";
+/**
+ * Contenu réservé (lot 14e5c), rendu à la demande : la route statique ne génère pas les pages
+ * et éléments qu'un produit d'accès ouvre. Avec la session du compte, le CMS sert les sections
+ * à qui en a le droit ; sinon `<ReservedNotice>` dit quoi acheter. Toute autre adresse : 404.
+ */
+import { getClient } from "@agence-zef/astro";
+import { visitorOf } from "@agence-zef/astro/accounts";
+import ReservedNotice from "../ReservedNotice.astro";
+import ZefSections from "../ZefSections.astro";
+
+const api = getClient();
+const [found, site] = await Promise.all([
+	api.document(decodeURI(Astro.url.pathname), visitorOf(Astro)).catch(() => null),
+	api.site(),
+]);
+const doc = found && (found.kind === "page" ? found.page : found.item);
+if (!found || !doc?.access?.reserved) {
+	return new Response(null, { status: 404 });
+}
+const locale = found.kind === "page" ? found.page.locale : site.defaultLocale;
+const layout = await api.layout({ locale });
+const title =
+	found.kind === "page"
+		? (found.page.seo.title ?? found.page.title)
+		: String(found.item[found.titleField] ?? "");
+const seo =
+	found.kind === "page"
+		? found.page.seo
+		: { title: null, description: null, noindex: false, canonical: null, image: null };
+---
+
+<Layout
+	site={site}
+	locale={locale}
+	title={title}
+	seo={{ ...seo, noindex: true }}
+	alternates={found.kind === "page" ? found.page.alternates : {}}
+	header={layout.header}
+	footer={layout.footer}
+>
+	{
+		doc.access.granted ? (
+			found.kind === "page" ? (
+				<ZefSections sections={found.page.sections} />
+			) : (
+				<ZefSections sections={found.item.sections ?? []} item={found.item} />
+			)
+		) : (
+			<ReservedNotice title={title} products={doc.access.products} />
+		)
+	}
+</Layout>

package/components/routes/shop.ts

@@ -0,0 +1,21 @@
+import paths from "virtual:zef/shop";
+import { handleShopForm, isShopAction } from "@agence-zef/astro/shop";
+import type { APIRoute } from "astro";
+
+/*
+ * Envoi des formulaires de la boutique (`<AddToCart>`, `<Cart>`, `<Checkout>`), injecté par
+ * l'option `shop` de `@agence-zef/astro` : appelle le CMS avec la clé du site et la session du
+ * compte, puis redirige (fonctionne sans JavaScript).
+ */
+
+export const prerender = false;
+
+export const POST: APIRoute = async (context) => {
+	const action = context.params.action ?? "";
+	if (!isShopAction(action)) return new Response("Action inconnue", { status: 404 });
+	const origin = context.request.headers.get("origin");
+	if (origin && origin !== context.url.origin)
+		return new Response("Origine refusée", { status: 403 });
+	const form = await context.request.formData();
+	return context.redirect(await handleShopForm(context, action, form, paths), 303);
+};

package/components/virtual.d.ts

@@ -10,3 +10,7 @@ declare module "virtual:zef/layout" {
 	const layout: (props: Record<string, unknown>) => unknown;
 	export default layout;
 }
+declare module "virtual:zef/shop" {
+	const paths: { cart: string; checkout: string; confirmation: string; signIn: string };
+	export default paths;
+}