includio-cms 0.26.0 → 0.27.0

package/dist/admin/client/shop/refund-dialog.svelte.d.ts

@@ -3,6 +3,9 @@ type Props = {
     orderId: string;
     currency: string;
     remainingRefundable: number;
+    /** When the order has a deposit policy with paid deposit + balance rows. */
+    hasPartial?: boolean;
+    balanceOwed?: boolean;
     onOpenChange: (open: boolean) => void;
     onRefunded: () => void;
 };

package/dist/admin/client/shop/shop-order-detail-page.svelte

@@ -66,6 +66,10 @@
 	let shipping = $state(false);
 	let errorMessage = $state<string | null>(null);
 	let successMessage = $state<string | null>(null);
+	let balanceLinkUrl = $state<string | null>(null);
+	let balanceLinkBusy = $state(false);
+	let balanceLinkError = $state<string | null>(null);
+	let balanceLinkCopied = $state(false);
 
 	type SaveStatus = 'idle' | 'saving' | 'saved' | 'unsaved' | 'error';
 	let statusFormStatus = $state<SaveStatus>('idle');
@@ -166,6 +170,34 @@
 			shipping = false;
 		}
 	}
+
+	async function generateBalanceLink() {
+		balanceLinkBusy = true;
+		balanceLinkError = null;
+		balanceLinkCopied = false;
+		try {
+			const result = await remotes.generateBalanceLinkForOrder(orderId);
+			if (!result.success) {
+				balanceLinkError = result.error;
+				balanceLinkUrl = null;
+				return;
+			}
+			balanceLinkUrl = result.url;
+			try {
+				const absolute = result.url.startsWith('http')
+					? result.url
+					: `${window.location.origin}${result.url.startsWith('/') ? '' : '/'}${result.url}`;
+				await navigator.clipboard.writeText(absolute);
+				balanceLinkCopied = true;
+			} catch {
+				balanceLinkCopied = false;
+			}
+		} catch (err) {
+			balanceLinkError = err instanceof Error ? err.message : 'Nie udało się wygenerować linku';
+		} finally {
+			balanceLinkBusy = false;
+		}
+	}
 </script>
 
 {#if !query.ready}
@@ -351,6 +383,79 @@
 					</Button>
 				</section>
 
+				{#if order.partialPayment}
+					{@const pp = order.partialPayment as {
+						kind: string;
+						paidAmount: number;
+						balanceAmount: number;
+						paidAt: string | null;
+					}}
+					<section class="border-border bg-card space-y-3 rounded-xl border p-3 text-sm sm:p-5">
+						<div class="flex items-center justify-between gap-2">
+							<h2 class="text-base font-bold">Płatność dzielona</h2>
+							{#if order.balanceOwed}
+								<span
+									class="rounded-md bg-[#5B4A9E] px-2 py-1 text-xs font-semibold text-white"
+									aria-label="Czeka na dopłatę"
+								>
+									Czeka na dopłatę
+								</span>
+							{:else}
+								<span
+									class="bg-success-bg text-success rounded-md px-2 py-1 text-xs font-semibold"
+								>
+									Opłacone w całości
+								</span>
+							{/if}
+						</div>
+						<dl class="space-y-1">
+							<div class="text-muted-foreground flex justify-between text-xs">
+								<dt>Zapłacono</dt>
+								<dd class="tabular-nums">{formatCentsPrice(pp.paidAmount, order.currency)}</dd>
+							</div>
+							<div class="text-muted-foreground flex justify-between text-xs">
+								<dt>Pozostało do dopłaty</dt>
+								<dd class="tabular-nums">{formatCentsPrice(pp.balanceAmount, order.currency)}</dd>
+							</div>
+							<div class="text-muted-foreground flex justify-between text-xs">
+								<dt>Razem</dt>
+								<dd class="tabular-nums">{formatCentsPrice(order.totalGross, order.currency)}</dd>
+							</div>
+						</dl>
+						{#if order.balanceOwed}
+							<Button
+								onclick={generateBalanceLink}
+								variant="outline"
+								class="w-full"
+								disabled={balanceLinkBusy}
+							>
+								{balanceLinkBusy ? 'Generuję…' : 'Wyślij link do dopłaty'}
+							</Button>
+							{#if balanceLinkUrl}
+								<div class="space-y-1">
+									<p class="text-muted-foreground text-xs">
+										{#if balanceLinkCopied}
+											Link skopiowany do schowka. Wyślij go klientowi mailowo lub innym kanałem.
+										{:else}
+											Link wygenerowany — skopiuj go ręcznie:
+										{/if}
+									</p>
+									<code class="border-border block break-all rounded-md border bg-[#F4F2FA] p-2 text-xs"
+										>{balanceLinkUrl}</code
+									>
+								</div>
+							{/if}
+							{#if balanceLinkError}
+								<p class="text-destructive text-xs" role="alert">{balanceLinkError}</p>
+							{/if}
+						{:else if pp.paidAt}
+							<p class="text-muted-foreground text-xs">
+								Dopłata zaksięgowana: {formatDateTime(pp.paidAt, interfaceLanguage.current)}
+							</p>
+						{/if}
+					</section>
+				{/if}
+
 				{#if refundsQuery.ready && refundsQuery.current}
 					{@const r = refundsQuery.current}
 					<section class="border-border bg-card space-y-3 rounded-xl border p-3 text-sm sm:p-5">
@@ -524,6 +629,8 @@
 			{orderId}
 			currency={refundsQuery.current.currency}
 			remainingRefundable={refundsQuery.current.remainingRefundable}
+			hasPartial={query.current?.order.partialPayment != null}
+			balanceOwed={query.current?.order.balanceOwed === true}
 			onOpenChange={(v) => (refundDialogOpen = v)}
 			onRefunded={async () => {
 				successMessage = 'Zwrot wykonany.';

package/dist/admin/components/fields/field-renderer.svelte

@@ -161,6 +161,10 @@
 						<DateTimeField {field} bind:value={$value} {...props} />
 					{:else if field.type === 'select'}
 						<SelectField {field} bind:value={$value} {...props} />
+					{:else if field.type === 'icon'}
+						{#await import('./icon-field.svelte') then { default: IconField }}
+							<IconField {field} bind:value={$value} {...props} />
+						{/await}
 					{:else if field.type === 'custom'}
 						{@const customDef = customFieldDefs.get(field.fieldType)}
 						{#if customDef}
@@ -169,7 +173,8 @@
 							<p>Nieznany custom field: {field.fieldType}</p>
 						{/if}
 					{:else}
-						<p>Nieobsługiwany typ pola: {field.type}</p>
+						<!-- All Field types are handled above; fallback kept as defensive guard for future additions. -->
+						<p>Nieobsługiwany typ pola: {(field as Field).type}</p>
 					{/if}
 				</div>
 			{/snippet}

package/dist/admin/components/fields/icon-field.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+	import type { IconField } from '../../../types/fields.js';
+	import { resolveIconSet } from '../../state/icon-sets.svelte.js';
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import { getLocalizedLabel } from '../../utils/collectionLabel.js';
+	import IconPickerDialog from './icon-picker-dialog.svelte';
+	import Plus from '@lucide/svelte/icons/plus';
+	import X from '@lucide/svelte/icons/x';
+	import HelpCircle from '@lucide/svelte/icons/help-circle';
+
+	type Props = {
+		field: IconField;
+		value: string | undefined;
+	};
+
+	let { field, value = $bindable(), ...props }: Props = $props();
+
+	const interfaceLanguage = useInterfaceLanguage();
+	const iconSet = $derived(resolveIconSet(field.set));
+	const iconDef = $derived(value && iconSet ? iconSet.icons[value] : undefined);
+	const isMissing = $derived(!!value && !!iconSet && !iconDef);
+	const label = $derived.by(() =>
+		iconDef ? getLocalizedLabel(iconDef.label, interfaceLanguage.current) : (value ?? '')
+	);
+
+	let dialogOpen = $state(false);
+
+	function clear() {
+		value = '';
+	}
+	function openDialog() {
+		dialogOpen = true;
+	}
+	function onConfirm(newValue: string) {
+		value = newValue;
+		dialogOpen = false;
+	}
+</script>
+
+{#if !iconSet}
+	<p class="text-sm text-destructive">
+		Brak zarejestrowanego zestawu ikon. Dodaj <code>IconSetPlugin</code> do
+		<code>plugins:</code> w cms.config i przekaż przez <code>buildIconSetMap(...)</code> do AdminLayout.
+	</p>
+{:else}
+	<div class="relative inline-block">
+		<button
+			type="button"
+			onclick={openDialog}
+			class="flex h-24 w-24 flex-col items-center justify-center gap-1.5 rounded-lg border bg-muted/30 transition-colors hover:border-primary hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+			aria-label={value ? `Zmień ikonę: ${label}` : 'Wybierz ikonę'}
+			{...props}
+		>
+			{#if !value}
+				<Plus class="h-7 w-7 text-muted-foreground" />
+				<span class="text-xs text-muted-foreground">Wybierz ikonę</span>
+			{:else if isMissing}
+				<HelpCircle class="h-7 w-7 text-warning" />
+				<span class="line-clamp-1 px-1 text-xs text-muted-foreground">{value}</span>
+			{:else if iconDef}
+				{@const Comp = iconDef.component}
+				<Comp size={32} />
+				<span class="line-clamp-1 px-1 text-xs">{label}</span>
+			{/if}
+		</button>
+
+		{#if value}
+			<button
+				type="button"
+				onclick={clear}
+				class="absolute -right-2 -top-2 rounded-full border bg-background p-1 text-muted-foreground shadow-sm transition-colors hover:text-destructive"
+				aria-label="Wyczyść ikonę"
+			>
+				<X class="h-3 w-3" />
+			</button>
+		{/if}
+	</div>
+
+	{#if isMissing}
+		<p class="mt-2 text-sm text-warning">
+			Ikona <code>{value}</code> nie jest już dostępna w bibliotece. Wybierz inną lub usuń.
+		</p>
+	{/if}
+
+	<IconPickerDialog bind:open={dialogOpen} {iconSet} initialValue={value} {onConfirm} />
+{/if}

package/dist/admin/components/fields/icon-field.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { IconField } from '../../../types/fields.js';
+type Props = {
+    field: IconField;
+    value: string | undefined;
+};
+declare const IconField: import("svelte").Component<Props, {}, "value">;
+type IconField = ReturnType<typeof IconField>;
+export default IconField;

package/dist/admin/components/fields/icon-picker-dialog.svelte

@@ -0,0 +1,174 @@
+<script lang="ts">
+	import * as Dialog from '../../../components/ui/dialog/index.js';
+	import { Input } from '../../../components/ui/input/index.js';
+	import { Button } from '../../../components/ui/button/index.js';
+	import { LiveRegion } from '../../../components/ui/live-region/index.js';
+	import type { IconSetPlugin } from '../../../types/plugins.js';
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import { getLocalizedLabel } from '../../utils/collectionLabel.js';
+	import type { InterfaceLanguage } from '../../../types/languages.js';
+	import type { Component } from 'svelte';
+
+	type Props = {
+		open: boolean;
+		iconSet: IconSetPlugin;
+		initialValue: string | undefined;
+		onConfirm: (value: string) => void;
+	};
+
+	let { open = $bindable(), iconSet, initialValue, onConfirm }: Props = $props();
+
+	const lang: Record<
+		InterfaceLanguage,
+		{
+			title: string;
+			search: string;
+			cancel: string;
+			confirm: string;
+			noResults: string;
+			resultsCount: (n: number) => string;
+			close: string;
+		}
+	> = {
+		en: {
+			title: 'Select icon',
+			search: 'Search icons...',
+			cancel: 'Cancel',
+			confirm: 'OK',
+			noResults: 'No icons match',
+			resultsCount: (n) => `${n} icons`,
+			close: 'Close'
+		},
+		pl: {
+			title: 'Wybierz ikonę',
+			search: 'Szukaj ikon...',
+			cancel: 'Anuluj',
+			confirm: 'OK',
+			noResults: 'Brak pasujących ikon',
+			resultsCount: (n) => `Wyniki: ${n}`,
+			close: 'Zamknij'
+		}
+	};
+
+	const interfaceLanguage = useInterfaceLanguage();
+	const t = $derived(lang[interfaceLanguage.current]);
+
+	let searchValue = $state('');
+	let selected = $state<string>('');
+	let wasOpen = false;
+
+	// Re-sync gdy dialog się otwiera ze świeżą wartością początkową.
+	// Wzorzec "edge-trigger": resetujemy TYLKO na przejściu closed→open,
+	// żeby kliknięcia użytkownika w grid nie były nadpisywane przez re-run efektu.
+	$effect(() => {
+		if (open && !wasOpen) {
+			selected = initialValue ?? '';
+			searchValue = '';
+		}
+		wasOpen = open;
+	});
+
+	type IconEntry = {
+		key: string;
+		label: string;
+		keywords: string[];
+		component: Component;
+	};
+
+	const allEntries = $derived<IconEntry[]>(
+		Object.entries(iconSet.icons).map(([key, def]) => ({
+			key,
+			label: getLocalizedLabel(def.label, interfaceLanguage.current),
+			keywords: def.keywords ?? [],
+			component: def.component
+		}))
+	);
+
+	const filtered = $derived.by(() => {
+		const q = searchValue.trim().toLowerCase();
+		if (!q) return allEntries;
+		return allEntries.filter(
+			(e) =>
+				e.key.toLowerCase().includes(q) ||
+				e.label.toLowerCase().includes(q) ||
+				e.keywords.some((k) => k.toLowerCase().includes(q))
+		);
+	});
+
+	function confirm() {
+		if (selected) onConfirm(selected);
+	}
+	function cancel() {
+		open = false;
+	}
+	function select(key: string) {
+		selected = key;
+	}
+	function handleOpenChange(next: boolean) {
+		open = next;
+	}
+</script>
+
+<Dialog.Root bind:open onOpenChange={handleOpenChange}>
+	<Dialog.Content class="flex max-h-[85vh] flex-col gap-0 p-0 sm:max-w-2xl">
+		<Dialog.Header class="border-b px-4 py-3">
+			<Dialog.Title class="text-base font-semibold">{t.title}</Dialog.Title>
+			<Dialog.Description class="sr-only">{t.title}</Dialog.Description>
+		</Dialog.Header>
+
+		<div class="border-b px-4 py-2">
+			<Input
+				type="search"
+				placeholder={t.search}
+				bind:value={searchValue}
+				autofocus
+				class="h-9"
+				aria-label={t.search}
+			/>
+		</div>
+
+		<div class="flex-1 overflow-y-auto p-4">
+			{#if filtered.length === 0}
+				<p class="text-center text-sm text-muted-foreground py-8">{t.noResults}</p>
+			{:else}
+				<div
+					role="listbox"
+					aria-label={t.title}
+					class="grid grid-cols-3 gap-2 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6"
+				>
+					{#each filtered as entry (entry.key)}
+						{@const isSelected = selected === entry.key}
+						{@const Comp = entry.component}
+						<button
+							type="button"
+							role="option"
+							aria-selected={isSelected}
+							onclick={() => select(entry.key)}
+							ondblclick={() => {
+								select(entry.key);
+								confirm();
+							}}
+							class={[
+								'flex h-20 flex-col items-center justify-center gap-1 rounded-md border p-1.5 transition-colors',
+								'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+								isSelected
+									? 'border-primary bg-primary/10'
+									: 'border-muted bg-background hover:bg-muted/50'
+							].join(' ')}
+						>
+							<Comp size={24} />
+							<span class="line-clamp-1 w-full text-center text-[10px]">{entry.label}</span>
+						</button>
+					{/each}
+				</div>
+			{/if}
+		</div>
+
+		<Dialog.Footer class="border-t px-4 py-3 sm:justify-end">
+			<Button type="button" variant="outline" onclick={cancel}>{t.cancel}</Button>
+			<Button type="button" onclick={confirm} disabled={!selected}>{t.confirm}</Button>
+		</Dialog.Footer>
+
+		<LiveRegion message={t.resultsCount(filtered.length)} />
+	</Dialog.Content>
+</Dialog.Root>

package/dist/admin/components/fields/icon-picker-dialog.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { IconSetPlugin } from '../../../types/plugins.js';
+import type { Component } from 'svelte';
+type Props = {
+    open: boolean;
+    iconSet: IconSetPlugin;
+    initialValue: string | undefined;
+    onConfirm: (value: string) => void;
+};
+declare const IconPickerDialog: Component<Props, {}, "open">;
+type IconPickerDialog = ReturnType<typeof IconPickerDialog>;
+export default IconPickerDialog;

package/dist/admin/components/fields/object-field.svelte

@@ -9,7 +9,6 @@
 	import type { ObjectField, ObjectFieldData } from '../../../types/fields.js';
 	import { evaluateCondition } from '../../utils/fieldCondition.js';
 	import { onMount } from 'svelte';
-	import * as Item from '../../../components/ui/item/index.js';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
 	import { getLocalizedLabel } from '../../utils/collectionLabel.js';
 	import { cn } from '../../../utils.js';
@@ -90,12 +89,33 @@
 			{@render content()}
 		</div>
 	{:else}
-		<!-- Top-level: with border -->
-		<Item.Root variant="outline">
-			<Item.Content>
-				<Item.Title class="mb-4 text-lg">{getLocalizedLabel(field.label, interfaceLanguage.current)}</Item.Title>
+		<!-- Top-level: full-width card -->
+		<div class="object-card">
+			<div class="object-card-header">{getLocalizedLabel(field.label, interfaceLanguage.current)}</div>
+			<div class="object-card-body">
 				{@render content()}
-			</Item.Content>
-		</Item.Root>
+			</div>
+		</div>
 	{/if}
 {/if}
+
+<style>
+	.object-card {
+		background: var(--card);
+		border: 1px solid var(--border);
+		border-radius: 12px;
+		box-shadow: 0 1px 2px rgba(43, 37, 88, 0.04);
+		overflow: hidden;
+	}
+
+	.object-card-header {
+		font-size: 13px;
+		font-weight: 700;
+		color: var(--foreground);
+		padding: 12px 16px 0;
+	}
+
+	.object-card-body {
+		padding: 10px 16px 16px;
+	}
+</style>