includio-cms 0.26.0 → 0.28.0

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getContext } from 'svelte';
+	import { getContext, untrack } from 'svelte';
 	import { Button } from '../../../components/ui/button/index.js';
 	import { Switch } from '../../../components/ui/switch/index.js';
 	import TrashIcon from '@tabler/icons-svelte/icons/trash';
@@ -8,6 +8,9 @@
 	import { getRemotes } from '../../../sveltekit/index.js';
 	import { errorMessages } from '../../i18n/errors.js';
 	import type { ShopField } from '../../../types/fields.js';
+	import VariantAttributeRenderer from '../variant-form/VariantAttributeRenderer.svelte';
+	import { interpolateTemplate } from '../../../shop/template.js';
+	import { isVariantExpired } from '../../../shop/expiry.js';
 
 	type Props = { field: ShopField };
 	const { field }: Props = $props();
@@ -22,14 +25,21 @@
 	let inputPrice = $state('0.00');
 	let vatRate = $state<number | string>(23);
 	let isActive = $state(true);
+	type PolicyType = 'full' | 'deposit';
+	type DepositKind = 'percent' | 'amount';
+	let policyType = $state<PolicyType>('full');
+	let depositKind = $state<DepositKind>('percent');
+	let depositValue = $state<string>('30');
 	let variants = $state<
 		Array<{
 			id?: string;
 			sku: string;
 			name: string;
+			nameDirty: boolean;
 			priceDelta: string;
 			priceDeltaMode: InputMode;
 			stock: string;
+			attributes: Record<string, unknown>;
 		}>
 	>([]);
 
@@ -37,6 +47,7 @@
 	let saving = $state(false);
 	let errorMessage = $state<string | null>(null);
 	let successMessage = $state<string | null>(null);
+	let showExpired = $state(false);
 
 	// PLN-precise math — storage w numeric(20,6). Round do groszy tylko przy prezentacji.
 	const inputPln = $derived(parseFloat(inputPrice || '0') || 0);
@@ -68,20 +79,35 @@
 				inputPrice = formatPln(grossInitial);
 				vatRate = shop.vatRate;
 				isActive = shop.isActive;
-				variants = shop.variants.map((v) => ({
-					id: v.id,
-					sku: v.sku ?? '',
-					name:
+				const policy = shop.paymentPolicy ?? null;
+				if (policy && policy.type === 'deposit') {
+					policyType = 'deposit';
+					depositKind = policy.depositAmount.type;
+					depositValue = String(policy.depositAmount.value);
+				} else {
+					policyType = 'full';
+				}
+				variants = shop.variants.map((v) => {
+					const name =
 						typeof v.name === 'object' && v.name !== null
 							? String(
 									Object.values(v.name as Record<string, string>)[0] ?? ''
 								)
-							: '',
-					// Delta hydratowana jako netto (kanoniczna), mode default 'net' dla istniejących.
-					priceDelta: formatPln(Number(v.priceDelta)),
-					priceDeltaMode: 'net' as InputMode,
-					stock: v.stock == null ? '' : String(v.stock)
-				}));
+							: '';
+					return {
+						id: v.id,
+						sku: v.sku ?? '',
+						name,
+						// Saved non-empty name = editor's choice; lock pre-fill for this session.
+						nameDirty: name !== '',
+						// Delta hydratowana jako netto (kanoniczna), mode default 'net' dla istniejących.
+						priceDelta: formatPln(Number(v.priceDelta)),
+						priceDeltaMode: 'net' as InputMode,
+						stock: v.stock == null ? '' : String(v.stock),
+						attributes:
+							(v.attributes as Record<string, unknown> | null | undefined) ?? {}
+					};
+				});
 			} else {
 				const defaultVat = configQuery.current?.vatRates[0] ?? 23;
 				vatRate = defaultVat;
@@ -101,12 +127,31 @@
 			id: undefined,
 			sku: '',
 			name: '',
+			nameDirty: false,
 			priceDelta: '0.00',
 			priceDeltaMode: 'gross',
-			stock: ''
+			stock: '',
+			attributes: {}
 		});
 	}
 
+	// Auto-prefill `name` from variantLabel.template whenever attributes change,
+	// unless the user has edited the name manually (dirty flag, per session).
+	$effect(() => {
+		const template = configQuery.current?.variantLabel?.template;
+		if (!template) return;
+		for (let i = 0; i < variants.length; i++) {
+			// Tracked: re-run when this variant's attributes change.
+			const attrs = variants[i].attributes;
+			const next = interpolateTemplate(template, attrs, 'pl');
+			untrack(() => {
+				const v = variants[i];
+				if (v.nameDirty) return;
+				if (v.name !== next) v.name = next;
+			});
+		}
+	});
+
 	function switchVariantMode(i: number, newMode: InputMode) {
 		const v = variants[i];
 		if (v.priceDeltaMode === newMode) return;
@@ -119,6 +164,38 @@
 		variants.splice(i, 1);
 	}
 
+	const expiryConfig = $derived(configQuery.current?.variantExpiry ?? null);
+
+	const displayVariants = $derived.by(() => {
+		const enriched = variants.map((v, originalIndex) => ({
+			v,
+			originalIndex,
+			expired: expiryConfig
+				? isVariantExpired({ attributes: v.attributes }, expiryConfig)
+				: false
+		}));
+		const visible = showExpired ? enriched : enriched.filter((x) => !x.expired);
+		const source = expiryConfig?.source;
+		if (!source) return visible;
+		return [...visible].sort((a, b) => {
+			const aVal = a.v.attributes?.[source];
+			const bVal = b.v.attributes?.[source];
+			const aTs = typeof aVal === 'string' ? Date.parse(aVal) : NaN;
+			const bTs = typeof bVal === 'string' ? Date.parse(bVal) : NaN;
+			if (Number.isNaN(aTs) && Number.isNaN(bTs)) return 0;
+			if (Number.isNaN(aTs)) return 1;
+			if (Number.isNaN(bTs)) return -1;
+			return aTs - bTs;
+		});
+	});
+
+	const expiredCount = $derived(
+		expiryConfig
+			? variants.filter((v) => isVariantExpired({ attributes: v.attributes }, expiryConfig))
+					.length
+			: 0
+	);
+
 	async function save() {
 		if (!entryId) {
 			errorMessage = 'Brak ID wpisu — zapisz najpierw wpis, potem dane sklepu.';
@@ -130,12 +207,26 @@
 		try {
 			const stockEnabled = configQuery.current?.features.stock ?? false;
 			const variantsEnabled = configQuery.current?.features.variants ?? false;
+			const policyValue = Number(depositValue);
+			const paymentPolicy =
+				policyType === 'full'
+					? ({ type: 'full' as const })
+					: Number.isFinite(policyValue) && policyValue > 0
+						? ({
+								type: 'deposit' as const,
+								depositAmount:
+									depositKind === 'percent'
+										? { type: 'percent' as const, value: policyValue }
+										: { type: 'amount' as const, value: Math.round(policyValue) }
+							})
+						: ({ type: 'full' as const });
 			await remotes.upsertShopDataForEntry({
 				entryId,
 				data: {
 					basePrice: netPln,
 					vatRate: Number(vatRate),
-					isActive
+					isActive,
+					paymentPolicy
 				},
 				variants: variantsEnabled
 					? variants.map((v) => ({
@@ -144,7 +235,7 @@
 							name: v.name ? { pl: v.name } : null,
 							priceDelta: variantDeltaNetPln(v),
 							stock: stockEnabled && v.stock !== '' ? parseInt(v.stock, 10) : null,
-							attributes: null
+							attributes: Object.keys(v.attributes).length > 0 ? v.attributes : null
 						}))
 					: []
 			});
@@ -243,24 +334,122 @@
 			</div>
 		</div>
 
+		<div class="border-border space-y-3 rounded-lg border-t pt-4">
+			<h4 class="text-sm font-bold">Zasady płatności</h4>
+			<div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4">
+				<label class="flex items-center gap-2 text-sm">
+					<input
+						type="radio"
+						name="policy-type"
+						value="full"
+						checked={policyType === 'full'}
+						onchange={() => (policyType = 'full')}
+					/>
+					<span>Płatność z góry (pełna kwota)</span>
+				</label>
+				<label class="flex items-center gap-2 text-sm">
+					<input
+						type="radio"
+						name="policy-type"
+						value="deposit"
+						checked={policyType === 'deposit'}
+						onchange={() => (policyType = 'deposit')}
+					/>
+					<span>Zaliczka + dopłata</span>
+				</label>
+			</div>
+			{#if policyType === 'deposit'}
+				<div class="bg-muted/30 grid grid-cols-1 gap-3 rounded-md p-3 sm:grid-cols-[auto_1fr]">
+					<label class="flex flex-col gap-1 text-xs">
+						<span class="text-muted-foreground font-semibold">Typ zaliczki</span>
+						<select
+							class="border-border rounded-md border px-2 py-1.5 text-sm"
+							bind:value={depositKind}
+						>
+							<option value="percent">Procent ceny</option>
+							<option value="amount">Kwota stała (grosze)</option>
+						</select>
+					</label>
+					<label class="flex flex-col gap-1 text-xs">
+						<span class="text-muted-foreground font-semibold">
+							{depositKind === 'percent' ? 'Procent (1–100)' : 'Kwota w groszach'}
+						</span>
+						<input
+							type="number"
+							inputmode="numeric"
+							min="1"
+							max={depositKind === 'percent' ? '100' : undefined}
+							step={depositKind === 'percent' ? '1' : '1'}
+							class="border-border rounded-md border px-2 py-1.5 text-sm tabular-nums"
+							bind:value={depositValue}
+						/>
+					</label>
+					<p class="text-muted-foreground col-span-full text-xs">
+						{#if depositKind === 'percent'}
+							Klient płaci {depositValue || '0'}% przy zamówieniu, resztę po wygenerowaniu linka do dopłaty w panelu admina.
+						{:else}
+							Klient płaci {(Number(depositValue) || 0) / 100} zł przy zamówieniu, resztę po wygenerowaniu linka do dopłaty.
+						{/if}
+					</p>
+				</div>
+			{/if}
+		</div>
+
 		{#if config.features.variants}
 			<div class="border-border space-y-3 rounded-lg border-t pt-4">
-				<div class="flex items-center justify-between">
+				<div class="flex items-center justify-between gap-2">
 					<h4 class="text-sm font-bold">Warianty</h4>
-					<Button type="button" variant="outline" size="sm" onclick={addVariant}>
-						<PlusIcon class="mr-1 size-4" /> Dodaj wariant
-					</Button>
+					<div class="flex items-center gap-3">
+						{#if expiryConfig && expiredCount > 0}
+							<label class="text-muted-foreground flex items-center gap-1.5 text-xs">
+								<input type="checkbox" bind:checked={showExpired} class="size-3.5" />
+								Pokaż zakończone ({expiredCount})
+							</label>
+						{/if}
+						<Button type="button" variant="outline" size="sm" onclick={addVariant}>
+							<PlusIcon class="mr-1 size-4" /> Dodaj wariant
+						</Button>
+					</div>
 				</div>
 				{#if variants.length === 0}
 					<p class="text-muted-foreground text-xs">Brak wariantów — zostanie użyta cena bazowa.</p>
+				{:else if displayVariants.length === 0}
+					<p class="text-muted-foreground text-xs">
+						Wszystkie warianty są zakończone. Zaznacz „Pokaż zakończone", aby je zobaczyć.
+					</p>
 				{/if}
-				{#each variants as v, i (i)}
-					<div class="border-border grid grid-cols-2 gap-2 rounded-lg border p-3">
+				{#each displayVariants as { v, originalIndex, expired } (originalIndex)}
+					{@const i = originalIndex}
+					<div
+						class="border-border space-y-3 rounded-lg border p-3 {expired ? 'opacity-60' : ''}"
+					>
+						{#if expired}
+							<span
+								class="bg-muted text-muted-foreground inline-flex items-center rounded-md border border-border px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide"
+								aria-label="Wariant zakończony"
+							>
+								Zakończony
+							</span>
+						{/if}
+						{#if config.variantAttributes && Object.keys(config.variantAttributes).length > 0}
+							<div class="grid grid-cols-1 gap-3 md:grid-cols-2">
+								{#each Object.entries(config.variantAttributes) as [attrKey, attrConfig] (attrKey)}
+									<VariantAttributeRenderer
+										{attrKey}
+										{attrConfig}
+										bind:value={v.attributes[attrKey]}
+									/>
+								{/each}
+							</div>
+							<div class="border-border border-t pt-3" aria-hidden="true"></div>
+						{/if}
+						<div class="grid grid-cols-2 gap-2">
 						<label class="block">
 							<span class="text-muted-foreground mb-0.5 block text-xs">Nazwa</span>
 							<input
 								type="text"
 								bind:value={v.name}
+								oninput={() => (v.nameDirty = true)}
 								class="border-border w-full rounded border px-2 py-1 text-sm"
 							/>
 						</label>
@@ -323,6 +512,7 @@
 								<TrashIcon class="size-4" />
 							</Button>
 						</div>
+						</div>
 					</div>
 				{/each}
 			</div>

package/dist/admin/components/layout/layout-tabs.svelte

@@ -128,6 +128,7 @@
 
 	:global(.layout-tab-panel.bleed) {
 		box-sizing: border-box;
+		width: 100%;
 		max-width: 1100px;
 		margin: 0 auto;
 		padding: 24px;

package/dist/admin/components/variant-form/VariantAttributeRenderer.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+	import type { VariantAttribute } from '../../../shop/types.js';
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import { getLocalizedLabel } from '../../utils/collectionLabel.js';
+	import TextField from '../fields/text-field.svelte';
+	import NumberField from '../fields/number-field.svelte';
+	import DatetimeField from '../fields/datetime-field.svelte';
+	import SelectField from '../fields/select-field.svelte';
+	import BooleanField from '../fields/boolean-field.svelte';
+	import Input from '../../../components/ui/input/input.svelte';
+	import type {
+		TextField as TextFieldType,
+		NumberField as NumberFieldType,
+		DateTimeField as DateTimeFieldType,
+		SelectField as SelectFieldType,
+		BooleanField as BooleanFieldType
+	} from '../../../types/fields.js';
+
+	type Props = {
+		attrKey: string;
+		attrConfig: VariantAttribute;
+		value: unknown;
+	};
+
+	let { attrKey, attrConfig, value = $bindable() }: Props = $props();
+
+	const interfaceLanguage = useInterfaceLanguage();
+	const label = $derived(
+		getLocalizedLabel(attrConfig.label, interfaceLanguage.current) || attrKey
+	);
+
+	// Adapter — VariantAttribute → CMS Field shape that each field component expects.
+	// Booleans render their own label inline; everything else uses our outer <label>.
+	const textField = $derived<TextFieldType>({
+		type: 'text',
+		slug: attrKey,
+		label,
+		required: attrConfig.required,
+		multiline: false
+	});
+	const numberField = $derived<NumberFieldType>({
+		type: 'number',
+		slug: attrKey,
+		label,
+		required: attrConfig.required
+	});
+	const datetimeField = $derived<DateTimeFieldType>({
+		type: 'datetime',
+		slug: attrKey,
+		label,
+		required: attrConfig.required
+	});
+	const selectField = $derived<SelectFieldType>(
+		attrConfig.type === 'select'
+			? {
+					type: 'select',
+					slug: attrKey,
+					label,
+					required: attrConfig.required,
+					options: attrConfig.options
+				}
+			: ({} as SelectFieldType)
+	);
+	const booleanField = $derived<BooleanFieldType>({
+		type: 'boolean',
+		slug: attrKey,
+		label,
+		required: attrConfig.required,
+		defaultValue: false
+	});
+</script>
+
+{#if attrConfig.type === 'boolean'}
+	<!-- boolean-field renders its own label, asterisk, and switch row -->
+	<BooleanField field={booleanField} bind:value={value as boolean | undefined} />
+{:else}
+	<label class="block">
+		<span class="text-muted-foreground mb-1 block text-xs font-semibold">
+			{label}
+			{#if attrConfig.required}<span class="text-destructive ml-0.5" aria-hidden="true"
+					>*</span
+				>{/if}
+		</span>
+
+		{#if attrConfig.type === 'text'}
+			<TextField field={textField} bind:value={value as string | undefined} />
+		{:else if attrConfig.type === 'number'}
+			<NumberField field={numberField} bind:value={value as number | undefined} />
+		{:else if attrConfig.type === 'datetime'}
+			<DatetimeField field={datetimeField} bind:value={value as string | undefined} />
+		{:else if attrConfig.type === 'select'}
+			<SelectField field={selectField} bind:value={value as string | undefined} />
+		{:else if attrConfig.type === 'slug'}
+			<Input
+				bind:value={value as string | undefined}
+				type="text"
+				pattern="[a-z0-9-]+"
+				placeholder="moj-slug"
+			/>
+		{:else if attrConfig.type === 'image' || attrConfig.type === 'entry'}
+			<!-- Pełny picker UI defer post-1.0; tymczasowo: wklej UUID -->
+			<Input
+				bind:value={value as string | undefined}
+				type="text"
+				placeholder="UUID ({attrConfig.type === 'image' ? 'media' : 'wpis'})"
+			/>
+		{/if}
+	</label>
+{/if}

package/dist/admin/components/variant-form/VariantAttributeRenderer.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { VariantAttribute } from '../../../shop/types.js';
+type Props = {
+    attrKey: string;
+    attrConfig: VariantAttribute;
+    value: unknown;
+};
+declare const VariantAttributeRenderer: import("svelte").Component<Props, {}, "value">;
+type VariantAttributeRenderer = ReturnType<typeof VariantAttributeRenderer>;
+export default VariantAttributeRenderer;

package/dist/admin/helpers/build-icon-set-map.d.ts

@@ -0,0 +1,8 @@
+import type { IconSetPlugin } from '../../types/plugins.js';
+/**
+ * Build a Map<slug, IconSetPlugin> from icon-set plugin instances.
+ * Use in consumer's admin `+layout.svelte` to pass `iconSets` to AdminLayout —
+ * Svelte icon components cannot serialize through SvelteKit data, so the same
+ * plugin instances must be imported on the client and forwarded explicitly.
+ */
+export declare function buildIconSetMap(...plugins: IconSetPlugin[]): Map<string, IconSetPlugin>;

package/dist/admin/helpers/build-icon-set-map.js

@@ -0,0 +1,16 @@
+/**
+ * Build a Map<slug, IconSetPlugin> from icon-set plugin instances.
+ * Use in consumer's admin `+layout.svelte` to pass `iconSets` to AdminLayout —
+ * Svelte icon components cannot serialize through SvelteKit data, so the same
+ * plugin instances must be imported on the client and forwarded explicitly.
+ */
+export function buildIconSetMap(...plugins) {
+    const map = new Map();
+    for (const p of plugins) {
+        if (map.has(p.slug)) {
+            throw new Error(`Duplicate icon-set plugin slug: "${p.slug}"`);
+        }
+        map.set(p.slug, p);
+    }
+    return map;
+}

package/dist/admin/helpers/index.d.ts

@@ -1,7 +1,9 @@
 export { useField } from './use-field.js';
 export { buildCustomFieldsMap } from './build-custom-fields-map.js';
+export { buildIconSetMap } from './build-icon-set-map.js';
 export { useInterfaceLanguage } from '../state/interface-language.svelte.js';
 export { getContentLanguage } from '../state/content-language.svelte.js';
 export { getRemotes } from '../context/remotes.js';
 export { getCustomFields } from '../state/custom-fields.svelte.js';
+export { getIconSets, resolveIconSet } from '../state/icon-sets.svelte.js';
 export { getLocalizedLabel } from '../utils/collectionLabel.js';

package/dist/admin/helpers/index.js

@@ -1,7 +1,9 @@
 export { useField } from './use-field.js';
 export { buildCustomFieldsMap } from './build-custom-fields-map.js';
+export { buildIconSetMap } from './build-icon-set-map.js';
 export { useInterfaceLanguage } from '../state/interface-language.svelte.js';
 export { getContentLanguage } from '../state/content-language.svelte.js';
 export { getRemotes } from '../context/remotes.js';
 export { getCustomFields } from '../state/custom-fields.svelte.js';
+export { getIconSets, resolveIconSet } from '../state/icon-sets.svelte.js';
 export { getLocalizedLabel } from '../utils/collectionLabel.js';