includio-cms 0.25.0 → 0.26.0

package/dist/admin/client/shop/coupon-form.svelte

@@ -1,17 +1,16 @@
 <script lang="ts">
+	import { defaults, superForm } from 'sveltekit-superforms';
+	import { zod4, zod4Client } from 'sveltekit-superforms/adapters';
+	import * as Form from '../../../components/ui/form/index.js';
 	import { Input } from '../../../components/ui/input/index.js';
 	import { Button } from '../../../components/ui/button/index.js';
-	import Label from '../../../components/ui/label/label.svelte';
-
-	type CouponInput = {
-		code: string;
-		type: 'percent' | 'fixed';
-		value: number;
-		minOrderAmount: number | null;
-		maxUses: number | null;
-		expiresAt: string | null;
-		isActive: boolean;
-	};
+	import { Switch } from '../../../components/ui/switch/index.js';
+	import FormErrorSummary, {
+		type FormErrorEntry
+	} from '../../components/forms/form-error-summary.svelte';
+	import { createCouponSchema, defaultCoupon, type CouponInput } from './coupon-schema.js';
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import type { InterfaceLanguage } from '../../../types/languages.js';
 
 	type Props = {
 		initial?: Partial<CouponInput>;
@@ -20,150 +19,295 @@
 		onCancel?: () => void;
 	};
 
-	let { initial, submitLabel = 'Zapisz', onSubmit, onCancel }: Props = $props();
+	let { initial, submitLabel, onSubmit, onCancel }: Props = $props();
 
-	let code = $state(initial?.code ?? '');
-	let type = $state<'percent' | 'fixed'>(initial?.type ?? 'percent');
-	let value = $state(initial?.value != null ? String(initial.value) : '');
-	let minOrderAmountPln = $state(
-		initial?.minOrderAmount != null ? (initial.minOrderAmount / 100).toFixed(2) : ''
-	);
-	let maxUses = $state(initial?.maxUses != null ? String(initial.maxUses) : '');
-	let expiresAt = $state(initial?.expiresAt ? initial.expiresAt.slice(0, 10) : '');
-	let isActive = $state(initial?.isActive ?? true);
-
-	let submitting = $state(false);
-	let error = $state<string | null>(null);
-
-	async function handleSubmit(e: Event) {
-		e.preventDefault();
-		error = null;
-		const numValue = Number(value.replace(',', '.'));
-		if (!Number.isFinite(numValue) || numValue <= 0) {
-			error = 'Podaj wartość większą od zera.';
-			return;
-		}
-		if (type === 'percent' && numValue > 100) {
-			error = 'Procent nie może przekraczać 100.';
-			return;
+	const interfaceLanguage = useInterfaceLanguage();
+
+	const lang: Record<
+		InterfaceLanguage,
+		{
+			code: string;
+			codeHint: string;
+			codePlaceholder: string;
+			discountType: string;
+			discountTypePercent: string;
+			discountTypeFixed: string;
+			value: string;
+			valuePercent: string;
+			valueFixed: string;
+			valuePercentPlaceholder: string;
+			valueFixedPlaceholder: string;
+			conditionsSection: string;
+			minOrder: string;
+			minOrderHint: string;
+			minOrderPlaceholder: string;
+			maxUses: string;
+			maxUsesPlaceholder: string;
+			expiresAt: string;
+			expiresHint: string;
+			statusSection: string;
+			isActive: string;
+			isActiveHint: string;
+			save: string;
+			saving: string;
+			cancel: string;
 		}
-		const minOrderCents = minOrderAmountPln
-			? Math.round(Number(minOrderAmountPln.replace(',', '.')) * 100)
-			: null;
-		if (minOrderCents != null && (!Number.isFinite(minOrderCents) || minOrderCents < 0)) {
-			error = 'Minimalna wartość zamówienia musi być nieujemna.';
-			return;
+	> = {
+		pl: {
+			code: 'Kod',
+			codeHint: 'Litery, cyfry, „_”, „-”. Wielkość liter zostanie ujednolicona do dużych.',
+			codePlaceholder: 'np. ARIA10',
+			discountType: 'Typ rabatu',
+			discountTypePercent: 'Procent (% od kwoty netto)',
+			discountTypeFixed: 'Kwota stała (PLN)',
+			value: 'Wartość',
+			valuePercent: 'Procent (0–100)',
+			valueFixed: 'Kwota (PLN)',
+			valuePercentPlaceholder: 'np. 10',
+			valueFixedPlaceholder: 'np. 50,00',
+			conditionsSection: 'Warunki',
+			minOrder: 'Min. wartość zamówienia (PLN)',
+			minOrderHint: 'Zostaw puste, jeśli rabat nie ma minimum.',
+			minOrderPlaceholder: 'opcjonalnie',
+			maxUses: 'Maks. liczba użyć',
+			maxUsesPlaceholder: 'bez limitu',
+			expiresAt: 'Data wygaśnięcia',
+			expiresHint: 'Zostaw puste, jeśli kod nie ma terminu.',
+			statusSection: 'Status',
+			isActive: 'Aktywny',
+			isActiveHint: 'Tylko aktywne kody działają w koszyku.',
+			save: 'Zapisz',
+			saving: 'Zapisuję…',
+			cancel: 'Anuluj'
+		},
+		en: {
+			code: 'Code',
+			codeHint: 'Letters, digits, "_", "-". Case will be normalized to uppercase.',
+			codePlaceholder: 'e.g. ARIA10',
+			discountType: 'Discount type',
+			discountTypePercent: 'Percent (% off net amount)',
+			discountTypeFixed: 'Fixed amount (PLN)',
+			value: 'Value',
+			valuePercent: 'Percent (0–100)',
+			valueFixed: 'Amount (PLN)',
+			valuePercentPlaceholder: 'e.g. 10',
+			valueFixedPlaceholder: 'e.g. 50.00',
+			conditionsSection: 'Conditions',
+			minOrder: 'Min. order amount (PLN)',
+			minOrderHint: 'Leave empty if there is no minimum.',
+			minOrderPlaceholder: 'optional',
+			maxUses: 'Max uses',
+			maxUsesPlaceholder: 'no limit',
+			expiresAt: 'Expiry date',
+			expiresHint: 'Leave empty if the code does not expire.',
+			statusSection: 'Status',
+			isActive: 'Active',
+			isActiveHint: 'Only active codes work at checkout.',
+			save: 'Save',
+			saving: 'Saving…',
+			cancel: 'Cancel'
 		}
-		const maxUsesNum = maxUses ? Number(maxUses) : null;
-		if (maxUsesNum != null && (!Number.isInteger(maxUsesNum) || maxUsesNum <= 0)) {
-			error = 'Maksymalna liczba użyć musi być dodatnią liczbą całkowitą.';
-			return;
+	};
+
+	const t = $derived(lang[interfaceLanguage.current]);
+
+	const initialData: CouponInput = {
+		...defaultCoupon,
+		...initial
+	};
+
+	const schema = createCouponSchema(interfaceLanguage.current);
+
+	const form = superForm(defaults(initialData, zod4(schema)), {
+		validators: zod4Client(schema),
+		SPA: true,
+		resetForm: false,
+		onUpdate: async ({ form }) => {
+			if (form.valid) {
+				await onSubmit({
+					...form.data,
+					code: form.data.code.trim().toUpperCase()
+				});
+			}
 		}
+	});
 
-		submitting = true;
-		try {
-			await onSubmit({
-				code: code.trim().toUpperCase(),
-				type,
-				value: numValue,
-				minOrderAmount: minOrderCents,
-				maxUses: maxUsesNum,
-				expiresAt: expiresAt ? new Date(expiresAt).toISOString() : null,
-				isActive
-			});
-		} catch (err) {
-			error = err instanceof Error ? err.message : 'Nie udało się zapisać.';
-			submitting = false;
+	const { form: formData, errors, enhance, submitting } = form;
+
+	const summaryErrors = $derived.by<FormErrorEntry[]>(() => {
+		const list: FormErrorEntry[] = [];
+		const e = $errors as Record<string, string[] | undefined>;
+		const labels: Record<string, string> = {
+			code: t.code,
+			type: t.discountType,
+			value: t.value,
+			minOrderAmount: t.minOrder,
+			maxUses: t.maxUses,
+			expiresAt: t.expiresAt,
+			isActive: t.isActive
+		};
+		for (const [key, msgs] of Object.entries(e)) {
+			if (!msgs || !Array.isArray(msgs)) continue;
+			for (const message of msgs) {
+				list.push({ path: key, label: labels[key] ?? key, message });
+			}
 		}
-	}
+		return list;
+	});
+
+	let valueInput = $state(initialData.value === 0 ? '' : String(initialData.value));
+	let minOrderPlnInput = $state(
+		initialData.minOrderAmount != null ? (initialData.minOrderAmount / 100).toFixed(2) : ''
+	);
+	let maxUsesInput = $state(initialData.maxUses != null ? String(initialData.maxUses) : '');
+	let expiresInput = $state(initialData.expiresAt ? initialData.expiresAt.slice(0, 10) : '');
+
+	$effect(() => {
+		const num = Number(valueInput.replace(',', '.'));
+		$formData.value = Number.isFinite(num) ? num : 0;
+	});
+
+	$effect(() => {
+		const num = minOrderPlnInput ? Number(minOrderPlnInput.replace(',', '.')) : null;
+		$formData.minOrderAmount = num != null && Number.isFinite(num) ? Math.round(num * 100) : null;
+	});
+
+	$effect(() => {
+		const num = maxUsesInput ? Number(maxUsesInput) : null;
+		$formData.maxUses = num != null && Number.isInteger(num) ? num : null;
+	});
+
+	$effect(() => {
+		$formData.expiresAt = expiresInput ? new Date(expiresInput).toISOString() : null;
+	});
 </script>
 
-<form onsubmit={handleSubmit} class="space-y-5">
-	<div class="space-y-2">
-		<Label for="coupon-code">Kod</Label>
-		<Input
-			id="coupon-code"
-			bind:value={code}
-			placeholder="np. ARIA10"
-			required
-			pattern="[A-Za-z0-9_-]+"
-			maxlength={64}
-			aria-describedby="coupon-code-hint"
-		/>
-		<p id="coupon-code-hint" class="text-muted-foreground text-xs">
-			Wielkość liter zostanie ujednolicona do dużych liter. Tylko litery, cyfry, „_”, „-”.
-		</p>
-	</div>
+{#snippet sectionHeader(title: string)}
+	<h2 class="text-lg font-bold">{title}</h2>
+{/snippet}
 
-	<fieldset class="space-y-2">
-		<legend class="mb-1 text-sm font-semibold">Typ rabatu</legend>
-		<label class="flex items-center gap-2 text-sm">
-			<input type="radio" name="coupon-type" value="percent" bind:group={type} />
-			<span>Procent (% od kwoty netto)</span>
-		</label>
-		<label class="flex items-center gap-2 text-sm">
-			<input type="radio" name="coupon-type" value="fixed" bind:group={type} />
-			<span>Kwota stała (PLN)</span>
-		</label>
-	</fieldset>
-
-	<div class="space-y-2">
-		<Label for="coupon-value">{type === 'percent' ? 'Procent (0–100)' : 'Kwota (PLN)'}</Label>
-		<Input
-			id="coupon-value"
-			type="text"
-			inputmode="decimal"
-			bind:value
-			placeholder={type === 'percent' ? 'np. 10' : 'np. 50,00'}
-			required
-		/>
-	</div>
+<form method="POST" use:enhance class="space-y-6">
+	<FormErrorSummary errors={summaryErrors} />
 
-	<div class="grid grid-cols-2 gap-4">
-		<div class="space-y-2">
-			<Label for="coupon-min-order">Min. wartość zamówienia (PLN)</Label>
-			<Input
-				id="coupon-min-order"
-				type="text"
-				inputmode="decimal"
-				bind:value={minOrderAmountPln}
-				placeholder="opcjonalnie"
-			/>
-		</div>
-		<div class="space-y-2">
-			<Label for="coupon-max-uses">Maks. liczba użyć</Label>
-			<Input
-				id="coupon-max-uses"
-				type="number"
-				min="1"
-				step="1"
-				bind:value={maxUses}
-				placeholder="bez limitu"
-			/>
-		</div>
-	</div>
+	<section class="border-border bg-card space-y-4 rounded-xl border p-6">
+		{@render sectionHeader(t.code)}
+		<Form.Field name="code" {form}>
+			<Form.Control>
+				{#snippet children({ props })}
+					<Input
+						{...props}
+						bind:value={$formData.code}
+						placeholder={t.codePlaceholder}
+						maxlength={64}
+					/>
+				{/snippet}
+			</Form.Control>
+			<Form.Description>{t.codeHint}</Form.Description>
+			<Form.FieldErrors />
+		</Form.Field>
+	</section>
 
-	<div class="space-y-2">
-		<Label for="coupon-expires-at">Data wygaśnięcia</Label>
-		<Input id="coupon-expires-at" type="date" bind:value={expiresAt} />
-	</div>
+	<section class="border-border bg-card space-y-4 rounded-xl border p-6">
+		{@render sectionHeader(t.discountType)}
+		<Form.Fieldset {form} name="type" class="space-y-2">
+			<label class="flex items-center gap-2 text-sm">
+				<input type="radio" name="coupon-type" value="percent" bind:group={$formData.type} />
+				<span>{t.discountTypePercent}</span>
+			</label>
+			<label class="flex items-center gap-2 text-sm">
+				<input type="radio" name="coupon-type" value="fixed" bind:group={$formData.type} />
+				<span>{t.discountTypeFixed}</span>
+			</label>
+			<Form.FieldErrors />
+		</Form.Fieldset>
 
-	<label class="flex items-center gap-2 text-sm">
-		<input type="checkbox" bind:checked={isActive} />
-		<span>Aktywny (dostępny przy checkoucie)</span>
-	</label>
+		<Form.ElementField name="value" {form}>
+			<Form.Control>
+				{#snippet children({ props })}
+					<Form.Label>
+						{$formData.type === 'percent' ? t.valuePercent : t.valueFixed}
+					</Form.Label>
+					<Input
+						{...props}
+						type="text"
+						inputmode="decimal"
+						bind:value={valueInput}
+						placeholder={$formData.type === 'percent'
+							? t.valuePercentPlaceholder
+							: t.valueFixedPlaceholder}
+					/>
+				{/snippet}
+			</Form.Control>
+			<Form.FieldErrors />
+		</Form.ElementField>
+	</section>
 
-	{#if error}
-		<p class="text-destructive text-sm" role="alert">{error}</p>
-	{/if}
+	<section class="border-border bg-card space-y-4 rounded-xl border p-6">
+		{@render sectionHeader(t.conditionsSection)}
+		<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+			<Form.ElementField name="minOrderAmount" {form}>
+				<Form.Control>
+					{#snippet children({ props })}
+						<Form.Label>{t.minOrder}</Form.Label>
+						<Input
+							{...props}
+							type="text"
+							inputmode="decimal"
+							bind:value={minOrderPlnInput}
+							placeholder={t.minOrderPlaceholder}
+						/>
+					{/snippet}
+				</Form.Control>
+				<Form.Description>{t.minOrderHint}</Form.Description>
+				<Form.FieldErrors />
+			</Form.ElementField>
+
+			<Form.ElementField name="maxUses" {form}>
+				<Form.Control>
+					{#snippet children({ props })}
+						<Form.Label>{t.maxUses}</Form.Label>
+						<Input
+							{...props}
+							type="number"
+							min="1"
+							step="1"
+							bind:value={maxUsesInput}
+							placeholder={t.maxUsesPlaceholder}
+						/>
+					{/snippet}
+				</Form.Control>
+				<Form.FieldErrors />
+			</Form.ElementField>
+		</div>
+
+		<Form.ElementField name="expiresAt" {form}>
+			<Form.Control>
+				{#snippet children({ props })}
+					<Form.Label>{t.expiresAt}</Form.Label>
+					<Input {...props} type="date" bind:value={expiresInput} />
+				{/snippet}
+			</Form.Control>
+			<Form.Description>{t.expiresHint}</Form.Description>
+			<Form.FieldErrors />
+		</Form.ElementField>
+	</section>
+
+	<section class="border-border bg-card space-y-4 rounded-xl border p-6">
+		{@render sectionHeader(t.statusSection)}
+		<label class="flex items-center gap-2">
+			<Switch bind:checked={$formData.isActive} />
+			<span class="text-sm">{t.isActive}</span>
+		</label>
+		<p class="text-muted-foreground text-sm">{t.isActiveHint}</p>
+	</section>
 
 	<div class="flex gap-2">
-		<Button type="submit" disabled={submitting}>
-			{submitting ? 'Zapisywanie…' : submitLabel}
+		<Button type="submit" disabled={$submitting}>
+			{$submitting ? t.saving : (submitLabel ?? t.save)}
 		</Button>
 		{#if onCancel}
-			<Button type="button" variant="outline" onclick={onCancel} disabled={submitting}>
-				Anuluj
+			<Button type="button" variant="outline" onclick={onCancel} disabled={$submitting}>
+				{t.cancel}
 			</Button>
 		{/if}
 	</div>

package/dist/admin/client/shop/coupon-form.svelte.d.ts

@@ -1,12 +1,4 @@
-type CouponInput = {
-    code: string;
-    type: 'percent' | 'fixed';
-    value: number;
-    minOrderAmount: number | null;
-    maxUses: number | null;
-    expiresAt: string | null;
-    isActive: boolean;
-};
+import { type CouponInput } from './coupon-schema.js';
 type Props = {
     initial?: Partial<CouponInput>;
     submitLabel?: string;

package/dist/admin/client/shop/coupon-new-page.svelte

@@ -1,25 +1,55 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import { getRemotes } from '../../../sveltekit/index.js';
+	import { toast } from 'svelte-sonner';
 	import CouponForm from './coupon-form.svelte';
+	import DetailPageShell from '../../components/layout/detail-page-shell.svelte';
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import { getBreadcrumbs } from '../../state/breadcrumbs.svelte.js';
+	import { sidebarLang } from '../../components/layout/lang.js';
+	import type { InterfaceLanguage } from '../../../types/languages.js';
 
 	const remotes = getRemotes();
-</script>
+	const interfaceLanguage = useInterfaceLanguage();
+	const breadcrumbs = getBreadcrumbs();
+
+	const lang: Record<
+		InterfaceLanguage,
+		{ title: string; description: string; submitLabel: string; createdToast: string }
+	> = {
+		pl: {
+			title: 'Nowy kod rabatowy',
+			description: 'Skonfiguruj rabat — procent lub kwotę stałą.',
+			submitLabel: 'Utwórz kod',
+			createdToast: 'Kod utworzony.'
+		},
+		en: {
+			title: 'New coupon',
+			description: 'Configure the discount — percentage or fixed amount.',
+			submitLabel: 'Create coupon',
+			createdToast: 'Coupon created.'
+		}
+	};
+	const t = $derived(lang[interfaceLanguage.current]);
 
-<div class="mx-auto max-w-2xl space-y-6 p-6">
-	<header>
-		<h1 class="text-2xl font-extrabold tracking-tight">Nowy kod rabatowy</h1>
-		<p class="text-muted-foreground text-sm">
-			<a href="/admin/shop/coupons" class="hover:underline">← Wróć do listy</a>
-		</p>
-	</header>
+	$effect(() => {
+		const s = sidebarLang[interfaceLanguage.current].shop;
+		breadcrumbs.state = [
+			{ label: s.title },
+			{ label: s.coupons, href: '/admin/shop/coupons' },
+			{ label: t.title }
+		];
+	});
+</script>
 
+<DetailPageShell title={t.title} description={t.description}>
 	<CouponForm
-		submitLabel="Utwórz kod"
+		submitLabel={t.submitLabel}
 		onSubmit={async (input) => {
 			await remotes.createCouponCmd(input);
+			toast.success(t.createdToast);
 			await goto('/admin/shop/coupons');
 		}}
 		onCancel={() => goto('/admin/shop/coupons')}
 	/>
-</div>
+</DetailPageShell>

package/dist/admin/client/shop/coupon-new-page.svelte.d.ts

@@ -1,18 +1,3 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const CouponNewPage: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type CouponNewPage = InstanceType<typeof CouponNewPage>;
+declare const CouponNewPage: import("svelte").Component<Record<string, never>, {}, "">;
+type CouponNewPage = ReturnType<typeof CouponNewPage>;
 export default CouponNewPage;

package/dist/admin/client/shop/coupon-schema.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @internal
+ * Zod schema for coupon edit form (superForm + formsnap, S8).
+ */
+import { z } from 'zod';
+import type { InterfaceLanguage } from '../../../types/languages.js';
+export type CouponInput = {
+    code: string;
+    type: 'percent' | 'fixed';
+    value: number;
+    minOrderAmount: number | null;
+    maxUses: number | null;
+    expiresAt: string | null;
+    isActive: boolean;
+};
+export declare function createCouponSchema(lang?: InterfaceLanguage): z.ZodObject<{
+    code: z.ZodString;
+    type: z.ZodEnum<{
+        fixed: "fixed";
+        percent: "percent";
+    }>;
+    value: z.ZodNumber;
+    minOrderAmount: z.ZodNullable<z.ZodNumber>;
+    maxUses: z.ZodNullable<z.ZodNumber>;
+    expiresAt: z.ZodNullable<z.ZodString>;
+    isActive: z.ZodBoolean;
+}, z.core.$strip>;
+export declare const defaultCoupon: CouponInput;

package/dist/admin/client/shop/coupon-schema.js

@@ -0,0 +1,53 @@
+/**
+ * @internal
+ * Zod schema for coupon edit form (superForm + formsnap, S8).
+ */
+import { z } from 'zod';
+const messages = {
+    pl: {
+        codeRequired: 'Wpisz kod, np. ARIA10.',
+        codeFormat: 'Kod może zawierać litery, cyfry, „_” i „-”.',
+        valuePositive: 'Podaj wartość większą od zera.',
+        percentRange: 'Procent nie może przekraczać 100.',
+        minOrderNonneg: 'Minimalna wartość zamówienia musi być nieujemna.',
+        maxUsesPositive: 'Maksymalna liczba użyć musi być dodatnia.'
+    },
+    en: {
+        codeRequired: 'Enter a code, e.g. ARIA10.',
+        codeFormat: 'Use letters, digits, "_" or "-" only.',
+        valuePositive: 'Enter a value greater than zero.',
+        percentRange: 'Percent cannot exceed 100.',
+        minOrderNonneg: 'Minimum order amount must be non-negative.',
+        maxUsesPositive: 'Maximum uses must be positive.'
+    }
+};
+export function createCouponSchema(lang = 'pl') {
+    const m = messages[lang];
+    return z
+        .object({
+        code: z
+            .string()
+            .min(1, m.codeRequired)
+            .max(64)
+            .regex(/^[A-Za-z0-9_-]+$/, m.codeFormat),
+        type: z.enum(['percent', 'fixed']),
+        value: z.number().positive(m.valuePositive),
+        minOrderAmount: z.number().int().nonnegative(m.minOrderNonneg).nullable(),
+        maxUses: z.number().int().positive(m.maxUsesPositive).nullable(),
+        expiresAt: z.string().nullable(),
+        isActive: z.boolean()
+    })
+        .refine((d) => !(d.type === 'percent' && d.value > 100), {
+        message: m.percentRange,
+        path: ['value']
+    });
+}
+export const defaultCoupon = {
+    code: '',
+    type: 'percent',
+    value: 10,
+    minOrderAmount: null,
+    maxUses: null,
+    expiresAt: null,
+    isActive: true
+};