@agence-zef/astro 0.2.0 → 0.3.1

package/README.md

@@ -1,5 +1,5 @@
 # @agence-zef/astro
 
-Intégration Astro du CMS de l'agence ZEF : route des pages, aperçu de l'éditeur, composants `Button`, `Image`, `Video`, `RichText`, `Form`, `Popups`, `CookieBanner`.
+Intégration Astro du CMS de l'agence ZEF : route des pages, aperçu de l'éditeur, composants `Button`, `Image`, `Video`, `RichText`, `Form`, `Popups`, `CookieBanner`, et comptes du site (option `accounts`, `AccountForm`, `getAccount`).
 
 Paquet du CMS de l'agence ZEF (dépôt privé). Licence MIT.

package/components/AccountForm.astro

@@ -0,0 +1,253 @@
+---
+/**
+ * Formulaire de compte du module Comptes (§ 7 U), sans style imposé : connexion, inscription,
+ * déconnexion, mot de passe oublié, nouveau mot de passe (page du lien reçu, `?token=`),
+ * profil, renvoi du lien de vérification, suppression du compte. Envoyé sans JavaScript à
+ * `/__zef/account/<action>` (option `accounts` de l'intégration), dans une page rendue à la
+ * demande (`export const prerender = false`). Messages d'erreur et de succès affichés au retour.
+ * Inscription et profil affichent aussi les champs personnalisés du compte déclarés dans
+ * `zef.config.ts` (`defineFields`, entité `accounts.account`), nommés `custom.<champ>`.
+ * Classes `zef-account__*` et attributs `data-*` pour le CSS du site.
+ */
+import config from "virtual:zef/config";
+import {
+	ACCOUNT_ERRORS,
+	ACCOUNT_SUCCESS,
+	type AccountAction,
+	getAccount,
+	getAccountsSettings,
+	MESSAGE_COOKIE,
+} from "@agence-zef/astro/accounts";
+
+interface Props {
+	action: AccountAction;
+	/** Page où aller après un succès (sinon `?redirect=` de l'adresse, puis l'accueil). */
+	redirect?: string;
+	/** Libellé du bouton. */
+	submitLabel?: string;
+	class?: string;
+}
+
+const { action, submitLabel, class: className } = Astro.props;
+const params = Astro.url.searchParams;
+const redirect = Astro.props.redirect ?? params.get("redirect") ?? "";
+const settings = await getAccountsSettings();
+const needsAccount =
+	action === "profile" || action === "resend-verification" || action === "delete";
+const account = needsAccount ? await getAccount(Astro) : null;
+const errorCode = params.get("zef_form") === action ? params.get("zef_error") : null;
+const success = params.get("zef_ok") === action ? ACCOUNT_SUCCESS[action] : null;
+// Page du lien « mot de passe oublié » ouverte sans jeton : rien à saisir.
+const missingToken = action === "reset-password" && !params.get("token") && !success;
+const errorKey = errorCode ?? (missingToken ? "invalid_token" : null);
+const error = errorKey
+	? errorKey === "refused" && Astro.cookies.get(MESSAGE_COOKIE)?.value
+		? Astro.cookies.get(MESSAGE_COOKIE)?.value
+		: (ACCOUNT_ERRORS[errorKey] ?? ACCOUNT_ERRORS.unknown)
+	: null;
+// Mot de passe enregistré ou lien manquant : le formulaire n'a plus lieu d'être.
+const done = action === "reset-password" && (Boolean(success) || missingToken);
+const token = params.get("token") ?? "";
+const id = `zef-account-${action}`;
+
+const LABELS: Record<AccountAction, string> = {
+	"sign-in": "Se connecter",
+	"sign-up": "Créer mon compte",
+	"sign-out": "Se déconnecter",
+	"forgot-password": "Recevoir un lien",
+	"reset-password": "Enregistrer le mot de passe",
+	profile: "Enregistrer",
+	"resend-verification": "Renvoyer le lien de vérification",
+	delete: "Supprimer mon compte",
+};
+
+type FieldDef = {
+	name: string;
+	label: string;
+	type: string;
+	autocomplete: string;
+	required: boolean;
+	value?: string;
+	minlength?: number;
+};
+const email = (value?: string): FieldDef => ({
+	name: "email",
+	label: "Email",
+	type: "email",
+	autocomplete: "email",
+	required: true,
+	value,
+});
+const password = (autocomplete: string, label = "Mot de passe"): FieldDef => ({
+	name: "password",
+	label,
+	type: "password",
+	autocomplete,
+	required: true,
+	minlength: autocomplete === "new-password" ? 8 : undefined,
+});
+const names = (a?: { firstName: string; lastName: string } | null): FieldDef[] => [
+	{
+		name: "firstName",
+		label: "Prénom",
+		type: "text",
+		autocomplete: "given-name",
+		required: true,
+		value: a?.firstName,
+	},
+	{
+		name: "lastName",
+		label: "Nom",
+		type: "text",
+		autocomplete: "family-name",
+		required: true,
+		value: a?.lastName,
+	},
+];
+const phone = (value?: string | null): FieldDef[] =>
+	!settings || settings.phone === "none"
+		? []
+		: [
+				{
+					name: "phone",
+					label: "Téléphone",
+					type: "tel",
+					autocomplete: "tel",
+					required: settings.phone === "required",
+					value: value ?? undefined,
+				},
+			];
+
+const fields: FieldDef[] = {
+	"sign-in": [email(), password("current-password")],
+	"sign-up": [...names(), email(), ...phone(), password("new-password")],
+	"sign-out": [],
+	"forgot-password": [email()],
+	"reset-password": [password("new-password", "Nouveau mot de passe")],
+	profile: account ? [...names(account), email(account.email), ...phone(account.phone)] : [],
+	"resend-verification": [],
+	delete: [password("current-password", "Mot de passe pour confirmer")],
+}[action];
+// Champs personnalisés du compte (`defineFields`), à l'inscription et dans le profil.
+const customFields =
+	action === "sign-up" || (action === "profile" && account)
+		? Object.entries(config.fields?.find((d) => d.entity === "accounts.account")?.fields ?? {})
+		: [];
+const customValue = (key: string): unknown =>
+	(account?.custom as Record<string, unknown> | undefined)?.[key];
+const turnstile = action === "sign-up" ? settings?.turnstileSiteKey : null;
+const hidden =
+	(needsAccount && !account) || (action === "resend-verification" && account?.emailVerified);
+---
+
+{
+	settings && !hidden && (
+		<form id={id} class:list={["zef-account", className]} data-action={action} method="post" action={`/__zef/account/${action}`}>
+			<input type="hidden" name="zef_page" value={Astro.url.pathname} />
+			{redirect && <input type="hidden" name="zef_redirect" value={redirect} />}
+			{action === "reset-password" && <input type="hidden" name="token" value={token} />}
+			{error && (
+				<p class="zef-account__error" role="alert" data-code={errorKey}>
+					{error}
+				</p>
+			)}
+			{success && (
+				<p class="zef-account__success" role="status">
+					{success}
+				</p>
+			)}
+			{action === "profile" && account && !account.emailVerified && (
+				<p class="zef-account__notice">Adresse email pas encore vérifiée : cliquez sur le lien reçu.</p>
+			)}
+			{!done && fields.map((f) => (
+				<div class="zef-account__field" data-field={f.name}>
+					<label for={`${id}-${f.name}`}>
+						{f.label}
+						{!f.required && <span class="zef-account__optional"> (facultatif)</span>}
+					</label>
+					<input
+						id={`${id}-${f.name}`}
+						name={f.name}
+						type={f.type}
+						autocomplete={f.autocomplete}
+						required={f.required}
+						minlength={f.minlength}
+						value={f.value}
+					/>
+					{f.minlength && <p class="zef-account__help">{f.minlength} caractères minimum.</p>}
+				</div>
+			))}
+			{!done && customFields.length > 0 && <input type="hidden" name="zef_custom" value={customFields.map(([k]) => k).join(",")} />}
+			{!done && customFields.map(([key, f]) => {
+				const fid = `${id}-custom-${key}`;
+				const name = `custom.${key}`;
+				const value = customValue(key);
+				const optional = !f.required && <span class="zef-account__optional"> (facultatif)</span>;
+				if (f.type === "boolean") {
+					return (
+						<div class="zef-account__field" data-field={name} data-type="boolean">
+							<label for={fid}>
+								<input id={fid} name={name} type="checkbox" value="1" checked={value === true} />
+								{f.label}
+							</label>
+							{f.help && <p class="zef-account__help">{f.help}</p>}
+						</div>
+					);
+				}
+				if (f.type === "select" && f.multiple) {
+					const chosen = Array.isArray(value) ? value : [];
+					return (
+						<fieldset class="zef-account__field" data-field={name} data-type="select">
+							<legend>{f.label}{optional}</legend>
+							{Object.entries(f.options).map(([k, label]) => (
+								<label>
+									<input name={name} type="checkbox" value={k} checked={chosen.includes(k)} />
+									{label}
+								</label>
+							))}
+							{f.help && <p class="zef-account__help">{f.help}</p>}
+						</fieldset>
+					);
+				}
+				return (
+					<div class="zef-account__field" data-field={name} data-type={f.type}>
+						<label for={fid}>
+							{f.label}
+							{optional}
+						</label>
+						{f.type === "textarea" ? (
+							<textarea id={fid} name={name} required={f.required} maxlength={f.maxLength}>{typeof value === "string" ? value : ""}</textarea>
+						) : f.type === "select" ? (
+							<select id={fid} name={name} required={f.required}>
+								<option value="">—</option>
+								{Object.entries(f.options).map(([k, label]) => (
+									<option value={k} selected={value === k}>{label}</option>
+								))}
+							</select>
+						) : (
+							<input
+								id={fid}
+								name={name}
+								type={f.type === "number" ? "number" : f.type === "date" ? (f.time ? "datetime-local" : "date") : "text"}
+								required={f.required}
+								maxlength={f.type === "text" ? f.maxLength : undefined}
+								min={f.type === "number" ? f.min : undefined}
+								max={f.type === "number" ? f.max : undefined}
+								step={f.type === "number" ? (f.step ?? "any") : undefined}
+								value={value === null || value === undefined ? undefined : String(value)}
+							/>
+						)}
+						{f.help && <p class="zef-account__help">{f.help}</p>}
+					</div>
+				);
+			})}
+			{turnstile && <div class="cf-turnstile zef-account__turnstile" data-sitekey={turnstile} data-size="flexible" />}
+			{!done && (
+				<button type="submit" class="zef-account__submit">
+					{submitLabel ?? LABELS[action]}
+				</button>
+			)}
+		</form>
+	)
+}
+{turnstile && <script is:inline src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer />}

package/components/AddToCart.astro

@@ -0,0 +1,107 @@
+---
+import { formatPrice } from "@agence-zef/astro/shop";
+/**
+ * Ajout au panier d'un produit de la Boutique, sans style imposé : choix de la variante (si le
+ * produit en a plusieurs), quantité, bouton. Envoi sans JavaScript à `/__zef/shop/add`, puis
+ * le panier affiche le résultat (la fiche produit peut rester statique) ; un visiteur non
+ * connecté passe par la connexion. Classes `zef-cart-add__*`.
+ *
+ * Carte cadeau (lot 14e4b2) : montant proposé ou libre, destinataire (nom, email), message et
+ * date d'envoi facultative (`/__zef/shop/buy-gift-card`). Classes `zef-gift-card__*`.
+ */
+import type { ApiProduct } from "@agence-zef/sdk";
+
+interface Props {
+	product: ApiProduct | undefined;
+	/** Libellé du bouton. */
+	label?: string;
+	class?: string;
+}
+
+const { product, label = "Ajouter au panier", class: className } = Astro.props;
+const variants = product?.variants ?? [];
+const available = variants.filter((v) => v.available);
+const variantLabel = (v: ApiProduct["variants"][number]) =>
+	product?.options
+		.map((o) => o.values.find((x) => x.id === v.options[o.id])?.label)
+		.filter(Boolean)
+		.join(" · ") || "";
+---
+
+{
+	product?.type === "gift_card" && product.giftCard && (
+		<form class:list={["zef-cart-add", "zef-gift-card", className]} method="post" action="/__zef/shop/buy-gift-card">
+			<input type="hidden" name="zef_page" value={Astro.url.pathname} />
+			<input type="hidden" name="zef_locale" value={Astro.currentLocale ?? ""} />
+			<input type="hidden" name="productId" value={product.id} />
+			<fieldset class="zef-gift-card__amounts">
+				<legend>Montant</legend>
+				{product.giftCard.amounts.map((a, i) => (
+					<label>
+						<input type="radio" name="amount" value={a} checked={i === 0} />
+						{formatPrice(a)}
+					</label>
+				))}
+				{product.giftCard.custom && (
+					<label class="zef-gift-card__custom">
+						Autre montant ({formatPrice(product.giftCard.custom.min)} à {formatPrice(product.giftCard.custom.max)})
+						<input name="customAmount" inputmode="decimal" placeholder={String(product.giftCard.custom.min / 100)} />
+					</label>
+				)}
+			</fieldset>
+			<label>
+				Nom du destinataire
+				<input name="recipientName" required autocomplete="off" />
+			</label>
+			<label>
+				Email du destinataire
+				<input name="recipientEmail" type="email" required autocomplete="off" />
+			</label>
+			<label>
+				Message <span class="zef-gift-card__optional">(facultatif)</span>
+				<textarea name="message" rows="3" maxlength="500"></textarea>
+			</label>
+			<label>
+				Date d'envoi <span class="zef-gift-card__optional">(facultatif : sinon dès le paiement)</span>
+				<input name="sendOn" type="date" />
+			</label>
+			<button type="submit" class="zef-cart-add__submit" disabled={!product.available}>
+				{product.available ? label : "Indisponible"}
+			</button>
+		</form>
+	)
+}
+{
+	product && product.type !== "gift_card" && (
+		<form class:list={["zef-cart-add", className]} method="post" action="/__zef/shop/add" data-available={String(product.available)}>
+			<input type="hidden" name="zef_page" value={Astro.url.pathname} />
+			<input type="hidden" name="zef_locale" value={Astro.currentLocale ?? ""} />
+			{variants.length > 1 ? (
+				<label class="zef-cart-add__variant">
+					<span>{product.options.map((o) => o.name).join(" · ") || "Choix"}</span>
+					<select name="variantId">
+						{variants.map((v) => (
+							<option value={v.id} disabled={!v.available} selected={v.id === available[0]?.id}>
+								{variantLabel(v)} — {formatPrice(v.price)}
+								{v.available ? (v.lowStock ? " · bientôt épuisé" : "") : " · épuisé"}
+							</option>
+						))}
+					</select>
+				</label>
+			) : (
+				variants[0] && <input type="hidden" name="variantId" value={variants[0].id} />
+			)}
+			{product.type === "access" || product.type === "subscription" ? (
+				<input type="hidden" name="quantity" value="1" />
+			) : (
+				<label class="zef-cart-add__quantity">
+					<span>Quantité</span>
+					<input type="number" name="quantity" min="1" max="99" value="1" />
+				</label>
+			)}
+			<button type="submit" class="zef-cart-add__submit" disabled={!product.available}>
+				{product.available ? (product.type === "subscription" && !Astro.props.label ? "S'abonner" : label) : "Épuisé"}
+			</button>
+		</form>
+	)
+}

package/components/Cart.astro

@@ -0,0 +1,141 @@
+---
+/**
+ * Panier du compte connecté, sans style imposé : une ligne par variante (nom, variante, prix,
+ * quantité modifiable, Retirer), code promo (`/__zef/shop/promo`, gardé dans un cookie ; remise
+ * ou raison du refus affichée), sous-total, total, lien vers le paiement. Formulaires sans
+ * JavaScript. Classes `zef-cart__*`. Page rendue à la demande.
+ */
+import { formatPrice, getCart, SHOP_ERRORS } from "@agence-zef/astro/shop";
+
+interface Props {
+	/** Page du paiement (`shop.checkout` de l'intégration par défaut). */
+	checkoutHref?: string;
+	empty?: string;
+	class?: string;
+}
+
+const {
+	checkoutHref = "/paiement",
+	empty = "Votre panier est vide.",
+	class: className,
+} = Astro.props;
+const cart = await getCart(Astro, Astro.currentLocale);
+const errorCode = Astro.url.searchParams.get("zef_shop_error");
+const added = Astro.url.searchParams.get("zef_shop_ok") === "add";
+const blocked = cart?.lines.some((l) => !l.sellable || l.quantity > l.available);
+---
+
+<div class:list={["zef-cart", className]}>
+	{added && <p class="zef-cart__success" role="status">Ajouté au panier.</p>}
+	{errorCode && <p class="zef-cart__error" role="alert">{SHOP_ERRORS[errorCode] ?? SHOP_ERRORS.unknown}</p>}
+	{
+		!cart || cart.lines.length === 0 ? (
+			<p class="zef-cart__empty">{empty}</p>
+		) : (
+			<>
+				<ul class="zef-cart__lines">
+					{cart.lines.map((l) => (
+						<li class="zef-cart__line" data-blocked={String(!l.sellable || l.quantity > l.available)}>
+							<span class="zef-cart__name">
+								{l.name}
+								{l.variantLabel && <span class="zef-cart__variant"> · {l.variantLabel}</span>}
+							</span>
+							<span class="zef-cart__price">{formatPrice(l.unitPrice)}</span>
+							{l.productType === "access" || l.productType === "subscription" ? (
+								<span class="zef-cart__single" />
+							) : l.giftCard ? (
+								<span class="zef-cart__gift-card-to">
+									{l.giftCard.recipientEmail}
+									{l.giftCard.sendAt && ` · envoi le ${new Date(l.giftCard.sendAt).toLocaleDateString("fr-FR", { day: "numeric", month: "long" })}`}
+								</span>
+							) : (
+								<form method="post" action="/__zef/shop/update" class="zef-cart__quantity">
+									<input type="hidden" name="zef_page" value={Astro.url.pathname} />
+									<input type="hidden" name="variantId" value={l.variantId} />
+									<input type="number" name="quantity" min="0" max="99" value={l.quantity} aria-label={`Quantité de ${l.name}`} />
+									<button type="submit">Mettre à jour</button>
+								</form>
+							)}
+							<span class="zef-cart__total">{formatPrice(l.total)}</span>
+							<form method="post" action={l.giftCardLineId ? "/__zef/shop/remove-gift-card" : "/__zef/shop/remove"}>
+								<input type="hidden" name="zef_page" value={Astro.url.pathname} />
+								<input type="hidden" name="variantId" value={l.variantId} />
+								<input type="hidden" name="lineId" value={l.giftCardLineId ?? ""} />
+								<button type="submit" class="zef-cart__remove">Retirer</button>
+							</form>
+							{!l.sellable ? (
+								<p class="zef-cart__warning">Plus disponible : retirez-le pour commander.</p>
+							) : l.quantity > l.available ? (
+								<p class="zef-cart__warning">Il n'en reste que {l.available}.</p>
+							) : null}
+						</li>
+					))}
+				</ul>
+				<form method="post" action="/__zef/shop/promo" class="zef-cart__promo">
+					<input type="hidden" name="zef_page" value={Astro.url.pathname} />
+					{cart.promo ? (
+						<p class="zef-cart__promo-applied">
+							Code <strong>{cart.promo.code}</strong> : {cart.promo.freeShipping ? "livraison offerte" : cart.promo.label}
+							<button type="submit" name="remove" value="1" class="zef-cart__promo-remove">Retirer</button>
+						</p>
+					) : (
+						<>
+							<label>
+								Code promo
+								<input name="code" autocomplete="off" />
+							</label>
+							<button type="submit">Appliquer</button>
+							{cart.promoError && (
+								<>
+									<p class="zef-cart__warning" role="alert">{cart.promoError}</p>
+									<button type="submit" name="remove" value="1" class="zef-cart__promo-remove">Retirer le code</button>
+								</>
+							)}
+						</>
+					)}
+				</form>
+				<form method="post" action="/__zef/shop/giftcard" class="zef-cart__gift-card">
+					<input type="hidden" name="zef_page" value={Astro.url.pathname} />
+					{cart.giftCard ? (
+						<p class="zef-cart__gift-card-applied">
+							Carte cadeau •••• {cart.giftCard.last4} : solde {formatPrice(cart.giftCard.available)}, déduit au paiement
+							<button type="submit" name="remove" value="1" class="zef-cart__gift-card-remove">Retirer</button>
+						</p>
+					) : (
+						<>
+							<label>
+								Carte cadeau
+								<input name="code" autocomplete="off" />
+							</label>
+							<button type="submit">Utiliser</button>
+							{cart.giftCardError && (
+								<>
+									<p class="zef-cart__warning" role="alert">{cart.giftCardError}</p>
+									<button type="submit" name="remove" value="1" class="zef-cart__gift-card-remove">Retirer la carte</button>
+								</>
+							)}
+						</>
+					)}
+				</form>
+				<p class="zef-cart__subtotal">
+					Sous-total <strong>{formatPrice(cart.subtotal)}</strong>
+				</p>
+				{cart.promo && cart.promo.discount > 0 && (
+					<p class="zef-cart__discount">
+						Code {cart.promo.code} <strong>−{formatPrice(cart.promo.discount)}</strong>
+					</p>
+				)}
+				{cart.total !== cart.subtotal && (
+					<p class="zef-cart__total-due">
+						Total <strong>{formatPrice(cart.total)}</strong> hors livraison
+					</p>
+				)}
+				{blocked ? (
+					<p class="zef-cart__warning">Corrigez le panier pour commander.</p>
+				) : (
+					<a class="zef-cart__checkout" href={checkoutHref}>Passer au paiement</a>
+				)}
+			</>
+		)
+	}
+</div>