includio-cms 0.25.0 → 0.27.0

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

@@ -1,12 +1,16 @@
 <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';
 	import PlusIcon from '@tabler/icons-svelte/icons/plus';
 	import BuildingStoreIcon from '@tabler/icons-svelte/icons/building-store';
 	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();
@@ -21,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>;
 		}>
 	>([]);
 
@@ -36,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);
@@ -67,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;
@@ -100,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;
@@ -118,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.';
@@ -129,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) => ({
@@ -143,14 +235,14 @@
 							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
 						}))
 					: []
 			});
 			await dataQuery.refresh();
 			successMessage = 'Zapisano dane sklepu.';
 		} catch (err) {
-			errorMessage = err instanceof Error ? err.message : 'Nie udało się zapisać';
+			errorMessage = err instanceof Error ? err.message : errorMessages.server.saveFailed.pl;
 		} finally {
 			saving = false;
 		}
@@ -183,9 +275,10 @@
 						<span class="text-muted-foreground text-xs font-semibold">
 							Cena bazowa ({inputMode === 'net' ? 'netto' : 'brutto'}, PLN)
 						</span>
-						<div class="bg-muted inline-flex rounded-md p-0.5 text-xs">
+						<div class="bg-muted inline-flex rounded-md p-0.5 text-xs" role="group" aria-label="Tryb wpisywania ceny">
 							<button
 								type="button"
+								aria-pressed={inputMode === 'net'}
 								class="rounded px-2 py-0.5 {inputMode === 'net'
 									? 'bg-background text-primary font-semibold shadow-sm'
 									: 'text-muted-foreground'}"
@@ -195,6 +288,7 @@
 							</button>
 							<button
 								type="button"
+								aria-pressed={inputMode === 'gross'}
 								class="rounded px-2 py-0.5 {inputMode === 'gross'
 									? 'bg-background text-primary font-semibold shadow-sm'
 									: 'text-muted-foreground'}"
@@ -240,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>
@@ -274,9 +466,10 @@
 								<span class="text-muted-foreground text-xs">
 									Zmiana ceny ({v.priceDeltaMode === 'net' ? 'netto' : 'brutto'}, PLN)
 								</span>
-								<div class="bg-muted inline-flex rounded-md p-0.5 text-[10px]">
+								<div class="bg-muted inline-flex rounded-md p-0.5 text-[10px]" role="group" aria-label="Tryb zmiany ceny wariantu {i + 1}">
 									<button
 										type="button"
+										aria-pressed={v.priceDeltaMode === 'net'}
 										class="rounded px-1.5 py-0.5 {v.priceDeltaMode === 'net'
 											? 'bg-background text-primary font-semibold shadow-sm'
 											: 'text-muted-foreground'}"
@@ -286,6 +479,7 @@
 									</button>
 									<button
 										type="button"
+										aria-pressed={v.priceDeltaMode === 'gross'}
 										class="rounded px-1.5 py-0.5 {v.priceDeltaMode === 'gross'
 											? 'bg-background text-primary font-semibold shadow-sm'
 											: 'text-muted-foreground'}"
@@ -314,10 +508,11 @@
 							</label>
 						{/if}
 						<div class="col-span-2 flex justify-end">
-							<Button type="button" variant="ghost" size="sm" onclick={() => removeVariant(i)}>
+							<Button type="button" variant="ghost" size="sm" onclick={() => removeVariant(i)} aria-label="Usuń wariant {i + 1}">
 								<TrashIcon class="size-4" />
 							</Button>
 						</div>
+						</div>
 					</div>
 				{/each}
 			</div>