includio-cms 0.24.1 → 0.26.0

package/dist/admin/client/shop/shipping-method-form.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
 	import { Button } from '../../../components/ui/button/index.js';
 	import { Switch } from '../../../components/ui/switch/index.js';
+	import FormErrorSummary, {
+		type FormErrorEntry
+	} from '../../components/forms/form-error-summary.svelte';
 
 	type CarrierType = 'none' | 'inpost';
 	type InpostServiceType =
@@ -135,6 +138,29 @@
 			? (initial.conditions.freeAbove / 100).toFixed(2)
 			: '200.00'
 	);
+	const summaryErrors = $derived.by<FormErrorEntry[]>(() => {
+		const list: FormErrorEntry[] = [];
+		if (errorMessage) {
+			list.push({ path: '_form', label: 'Formularz', message: errorMessage });
+		}
+		if (restrictPayments && allowedPaymentIds.length === 0) {
+			list.push({
+				path: 'allowedPaymentMethods',
+				label: 'Metody płatności',
+				message: 'Wybierz przynajmniej jedną metodę, inaczej checkout dla tej dostawy będzie zablokowany.'
+			});
+		}
+		const firstLang = languages[0] ?? 'pl';
+		if (!names[firstLang]?.trim()) {
+			list.push({
+				path: `name-${firstLang}`,
+				label: `Nazwa (${firstLang.toUpperCase()})`,
+				message: 'Wpisz nazwę widoczną w koszyku.'
+			});
+		}
+		return list;
+	});
+
 	async function handleSubmit(e: SubmitEvent) {
 		e.preventDefault();
 		await onsubmit({
@@ -158,15 +184,13 @@
 </script>
 
 <form onsubmit={handleSubmit} class="space-y-6">
-	{#if errorMessage}
-		<div class="rounded-lg bg-red-50 p-3 text-sm text-red-800">{errorMessage}</div>
-	{/if}
+	<FormErrorSummary errors={summaryErrors} />
 
 	<section class="border-border bg-card space-y-4 rounded-xl border p-6">
 		<h2 class="text-lg font-bold">Podstawowe informacje</h2>
 
 		{#each languages as lang (lang)}
-			<label class="block">
+			<label class="block" data-field-path={`name-${lang}`}>
 				<span class="mb-1 block text-sm font-semibold">Nazwa ({lang})</span>
 				<input
 					type="text"
@@ -276,8 +300,11 @@
 	</section>
 
 	{#if paymentMethods.length > 0}
-		<section class="border-border bg-card space-y-4 rounded-xl border p-6">
-			<h2 class="text-lg font-bold">Dozwolone metody płatności</h2>
+		<fieldset
+			class="border-border bg-card space-y-4 rounded-xl border p-6"
+			data-field-path="allowedPaymentMethods"
+		>
+			<legend class="text-lg font-bold">Dozwolone metody płatności</legend>
 			<p class="text-muted-foreground text-sm">
 				Ogranicz metody płatności dla tej dostawy (np. wyłącz płatność za pobraniem dla paczkomatu).
 				Jeśli wyłączone — wszystkie skonfigurowane metody są dostępne.
@@ -301,13 +328,13 @@
 						</label>
 					{/each}
 					{#if allowedPaymentIds.length === 0}
-						<p class="text-xs text-amber-700">
+						<p class="text-warning text-xs" role="alert">
 							Wybierz co najmniej jedną metodę, inaczej checkout dla tej dostawy będzie zablokowany.
 						</p>
 					{/if}
 				</div>
 			{/if}
-		</section>
+		</fieldset>
 	{/if}
 
 	<section class="border-border bg-card space-y-4 rounded-xl border p-6">
@@ -321,7 +348,7 @@
 		</label>
 
 		{#if carrierType === 'inpost'}
-			<div class="border-primary/30 space-y-4 border-l-2 pl-4">
+			<div class="border-primary/30 space-y-4 border-l-2 pl-4" aria-live="polite">
 				<p class="text-muted-foreground text-sm">
 					Wymaga skonfigurowanego adaptera <code>inpostAdapter</code> w <code>cms.config.ts</code>.
 				</p>

package/dist/admin/client/shop/shipping-method-new-page.svelte

@@ -2,10 +2,46 @@
 	import { goto } from '$app/navigation';
 	import { getRemotes } from '../../../sveltekit/index.js';
 	import ShippingMethodForm, { type ShippingFormPayload } from './shipping-method-form.svelte';
+	import DetailPageShell from '../../components/layout/detail-page-shell.svelte';
+	import StateDisplay from '../collection/state-display.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();
+	const interfaceLanguage = useInterfaceLanguage();
+	const breadcrumbs = getBreadcrumbs();
 	const configQuery = $derived(remotes.getShopConfig());
 
+	const lang: Record<
+		InterfaceLanguage,
+		{ title: string; description: string; submitLabel: string; saveError: string }
+	> = {
+		pl: {
+			title: 'Nowa metoda wysyłki',
+			description: 'Skonfiguruj sposób dostawy widoczny w checkout.',
+			submitLabel: 'Utwórz metodę',
+			saveError: 'Nie udało się zapisać'
+		},
+		en: {
+			title: 'New shipping method',
+			description: 'Configure a delivery method visible at checkout.',
+			submitLabel: 'Create method',
+			saveError: 'Failed to save'
+		}
+	};
+	const t = $derived(lang[interfaceLanguage.current]);
+
+	$effect(() => {
+		const s = sidebarLang[interfaceLanguage.current].shop;
+		breadcrumbs.state = [
+			{ label: s.title },
+			{ label: s.shipping, href: '/admin/shop/shipping-methods' },
+			{ label: t.title }
+		];
+	});
+
 	let saving = $state(false);
 	let errorMessage = $state<string | null>(null);
 
@@ -16,30 +52,25 @@
 			const row = await remotes.createShippingMethodCmd(payload);
 			await goto(`/admin/shop/shipping-methods/${row.id}`);
 		} catch (err) {
-			errorMessage = err instanceof Error ? err.message : 'Nie udało się zapisać';
+			errorMessage = err instanceof Error ? err.message : t.saveError;
 		} finally {
 			saving = false;
 		}
 	}
 </script>
 
-{#if !configQuery.ready}
-	<div class="text-muted-foreground p-6">Ładowanie…</div>
-{:else if configQuery.current}
-	<div class="space-y-6 p-6">
-		<div>
-			<h1 class="text-2xl font-extrabold tracking-tight">Nowa metoda wysyłki</h1>
-			<a href="/admin/shop/shipping-methods" class="text-muted-foreground text-sm hover:underline"
-				>← Wróć do listy</a
-			>
-		</div>
+<DetailPageShell title={t.title} description={t.description}>
+	{#if !configQuery.ready}
+		<StateDisplay kind="loading" />
+	{:else if configQuery.current}
 		<ShippingMethodForm
 			languages={configQuery.current.languages}
 			vatRates={configQuery.current.vatRates}
 			paymentMethods={configQuery.current.paymentMethods}
 			{saving}
 			{errorMessage}
+			submitLabel={t.submitLabel}
 			onsubmit={handleSubmit}
 		/>
-	</div>
-{/if}
+	{/if}
+</DetailPageShell>

package/dist/admin/client/shop/shipping-methods-list-page.svelte

@@ -3,15 +3,28 @@
 	import { droppable, draggable, dndState } from '@thisux/sveltednd';
 	import { getRemotes } from '../../../sveltekit/index.js';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import { getBreadcrumbs } from '../../state/breadcrumbs.svelte.js';
+	import { sidebarLang } from '../../components/layout/lang.js';
 	import { resolveI18n } from '../../../shop/pricing.js';
 	import { Button } from '../../../components/ui/button/index.js';
 	import PlusIcon from '@tabler/icons-svelte/icons/plus';
 	import GripIcon from '@tabler/icons-svelte/icons/grip-vertical';
+	import { formatPlnPrice, formatCentsPrice } from '../../utils/formatters.js';
+	import PageHeader from '../../components/layout/page-header.svelte';
+	import StatusBadge from '../collection/status-badge.svelte';
+	import StateDisplay from '../collection/state-display.svelte';
+	import type { InterfaceLanguage } from '../../../types/languages.js';
 
 	const remotes = getRemotes();
 	const interfaceLanguage = useInterfaceLanguage();
+	const breadcrumbs = getBreadcrumbs();
 	const query = $derived(remotes.listShippingMethodsAdmin());
 
+	$effect(() => {
+		const s = sidebarLang[interfaceLanguage.current].shop;
+		breadcrumbs.state = [{ label: s.title }, { label: s.shipping }];
+	});
+
 	type Row = NonNullable<ReturnType<typeof remotes.listShippingMethodsAdmin>['current']>[number];
 
 	let localRows = $state<Row[]>([]);
@@ -35,16 +48,61 @@
 		}
 	});
 
-	function formatPricePln(pln: number) {
-		return new Intl.NumberFormat('pl-PL', {
-			style: 'currency',
-			currency: 'PLN',
-			minimumFractionDigits: 2
-		}).format(pln);
-	}
-	function formatPriceCents(cents: number) {
-		return formatPricePln(cents / 100);
-	}
+	const lang: Record<
+		InterfaceLanguage,
+		{
+			title: string;
+			descriptionPrefix: string;
+			columnName: string;
+			columnPrice: string;
+			columnVat: string;
+			columnFreeFrom: string;
+			columnType: string;
+			columnStatus: string;
+			addMethod: string;
+			emptyTitle: string;
+			emptyDescription: string;
+			activeYes: string;
+			activeNo: string;
+			dragLabel: (i: number, total: number) => string;
+		}
+	> = {
+		en: {
+			title: 'Shipping methods',
+			descriptionPrefix: 'Drag to reorder',
+			columnName: 'Name',
+			columnPrice: 'Price (net)',
+			columnVat: 'VAT',
+			columnFreeFrom: 'Free from',
+			columnType: 'Type',
+			columnStatus: 'Status',
+			addMethod: 'Add method',
+			emptyTitle: 'No shipping methods',
+			emptyDescription:
+				'Add your first method — courier, parcel locker, in-store pickup.',
+			activeYes: 'Active',
+			activeNo: 'Inactive',
+			dragLabel: (i, total) => `Drag to reorder, row ${i + 1} of ${total}`
+		},
+		pl: {
+			title: 'Metody wysyłki',
+			descriptionPrefix: 'Przeciągnij, aby zmienić kolejność',
+			columnName: 'Nazwa',
+			columnPrice: 'Cena (netto)',
+			columnVat: 'VAT',
+			columnFreeFrom: 'Darmowa od',
+			columnType: 'Typ',
+			columnStatus: 'Status',
+			addMethod: 'Dodaj metodę',
+			emptyTitle: 'Brak metod wysyłki',
+			emptyDescription:
+				'Dodaj pierwszą metodę — np. kurier, paczkomat, odbiór osobisty.',
+			activeYes: 'Aktywna',
+			activeNo: 'Nieaktywna',
+			dragLabel: (i, total) => `Przeciągnij, aby zmienić kolejność, wiersz ${i + 1} z ${total}`
+		}
+	};
+	const t = $derived(lang[interfaceLanguage.current]);
 
 	async function doReorder(fromIndex: number, toIndex: number) {
 		if (fromIndex === toIndex) return;
@@ -61,48 +119,36 @@
 	}
 </script>
 
-<div class="flex items-center justify-between gap-4 p-6">
-	<div>
-		<h1 class="text-2xl font-extrabold tracking-tight">Metody wysyłki</h1>
-		<p class="text-muted-foreground text-sm">
-			{#if query.ready}
-				{localRows.length}
-				{localRows.length === 1 ? 'metoda' : 'metod'} · przeciągnij
-				<GripIcon class="inline size-3.5 align-[-2px]" />
-				by zmienić kolejność
-			{:else}
-				Ładowanie…
-			{/if}
-		</p>
-	</div>
-	<Button href="/admin/shop/shipping-methods/new">
-		<PlusIcon class="mr-1 size-4" />
-		Dodaj metodę
-	</Button>
-</div>
+<div class="p-5 pb-24 md:p-7">
+	<PageHeader
+		title={t.title}
+		count={query.ready ? localRows.length : undefined}
+		description={t.descriptionPrefix}
+	>
+		{#snippet primaryActions()}
+			<Button href="/admin/shop/shipping-methods/new">
+				<PlusIcon class="size-4" />
+				{t.addMethod}
+			</Button>
+		{/snippet}
+	</PageHeader>
 
-<div class="px-6 pb-12">
 	{#if !query.ready}
-		<div class="text-muted-foreground">Ładowanie…</div>
+		<StateDisplay kind="loading" />
 	{:else if localRows.length === 0}
-		<div class="bg-lavender-lighter/40 border-border rounded-xl border p-8 text-center text-sm">
-			<p class="mb-2 font-semibold">Brak metod wysyłki</p>
-			<p class="text-muted-foreground">
-				Dodaj pierwszą metodę — np. kurier, paczkomat, odbiór osobisty.
-			</p>
-		</div>
+		<StateDisplay kind="empty" title={t.emptyTitle} description={t.emptyDescription} />
 	{:else}
-		<div class="border-border overflow-hidden rounded-xl border">
+		<div class="overflow-hidden rounded-xl border bg-card shadow-sm">
 			<div
-				class="bg-muted/50 grid grid-cols-[32px_minmax(0,2fr)_minmax(0,1fr)_minmax(0,0.6fr)_minmax(0,1fr)_minmax(0,0.8fr)_minmax(0,1fr)] gap-3 px-4 py-3 text-left text-xs font-semibold tracking-wide uppercase"
+				class="text-muted-foreground bg-muted grid h-10 grid-cols-[32px_minmax(0,2fr)_minmax(0,1fr)_minmax(0,0.6fr)_minmax(0,1fr)_minmax(0,0.8fr)_minmax(0,1fr)] items-center gap-3 px-4 text-left text-[11px] font-bold tracking-[0.04em] uppercase"
 			>
 				<div></div>
-				<div>Nazwa</div>
-				<div>Cena (netto)</div>
-				<div>VAT</div>
-				<div>Darmowa od</div>
-				<div>Typ</div>
-				<div>Status</div>
+				<div>{t.columnName}</div>
+				<div>{t.columnPrice}</div>
+				<div>{t.columnVat}</div>
+				<div>{t.columnFreeFrom}</div>
+				<div>{t.columnType}</div>
+				<div>{t.columnStatus}</div>
 			</div>
 			<div>
 				{#each localRows as m, i (m.id)}
@@ -129,14 +175,14 @@
 							}
 						}}
 						animate:flip={{ duration: matchesReducedMotion ? 0 : 200 }}
-						class="border-border hover:bg-muted/30 grid grid-cols-[32px_minmax(0,2fr)_minmax(0,1fr)_minmax(0,0.6fr)_minmax(0,1fr)_minmax(0,0.8fr)_minmax(0,1fr)] items-center gap-3 border-t px-4 py-3 text-sm transition-colors"
+						class="hover:bg-lavender-lighter/50 grid grid-cols-[32px_minmax(0,2fr)_minmax(0,1fr)_minmax(0,0.6fr)_minmax(0,1fr)_minmax(0,0.8fr)_minmax(0,1fr)] items-center gap-3 border-b px-4 py-3 text-sm transition-colors last:border-b-0"
 					>
 						<div
 							use:draggable={{ container: i.toString(), dragData: { index: i } }}
 							class="text-muted-foreground hover:text-foreground flex cursor-grab items-center justify-center"
 							role="button"
 							tabindex="0"
-							aria-label={`Drag to reorder, row ${i + 1} of ${localRows.length}`}
+							aria-label={t.dragLabel(i, localRows.length)}
 						>
 							<GripIcon class="size-4" />
 						</div>
@@ -145,27 +191,23 @@
 								{resolveI18n(m.name as Record<string, string>, interfaceLanguage.current, '')}
 							</a>
 						</div>
-						<div>{formatPricePln(Number(m.price))}</div>
+						<div>{formatPlnPrice(Number(m.price))}</div>
 						<div>{m.vatRate}%</div>
 						<div>
 							{#if cond?.freeAbove != null}
-								{formatPriceCents(cond.freeAbove)}
+								{formatCentsPrice(cond.freeAbove, 'PLN')}
 							{:else}
 								<span class="text-muted-foreground text-xs">—</span>
 							{/if}
 						</div>
 						<div class="text-muted-foreground font-mono text-xs">{m.carrierType}</div>
 						<div>
-							{#if m.isActive}
-								<span
-									class="inline-flex rounded-full bg-green-100 px-2 py-0.5 text-xs text-green-800"
-									>Aktywna</span
-								>
-							{:else}
-								<span class="inline-flex rounded-full bg-gray-100 px-2 py-0.5 text-xs text-gray-800"
-									>Nieaktywna</span
-								>
-							{/if}
+							<StatusBadge
+								variant="boolean"
+								active={m.isActive}
+								activeLabel={t.activeYes}
+								inactiveLabel={t.activeNo}
+							/>
 						</div>
 					</div>
 				{/each}