@revenexx/cover 0.1.0

package/app/components/product/detail/ProductDetailAddToCart.vue

@@ -0,0 +1,188 @@
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+
+import type { CartItem, CartItemPriceTier } from "../../../interfaces/cart-item";
+import type { ProductDetailProduct } from "../../../interfaces/product-detail";
+
+const { icon } = useIcons();
+
+const props = defineProps<{
+	product: ProductDetailProduct;
+	maxQuantity: number;
+	price: number;
+	taxRate: number;
+	sku: string;
+	imageUrl: string;
+	prices: { [key: string]: number }[];
+	categorySlug?: string;
+	subcategorySlug?: string;
+}>();
+
+const cartStore = useCartStore();
+const toast = useToast();
+const { t } = useI18n();
+const quantity = ref(1);
+
+const currentCartQuantity = computed(() =>
+	cartStore.items.find((item: CartItem) => item.id === props.product.id && !item.requisitionId)?.quantity ?? 0,
+);
+const quantityInvalid = computed(() => quantity.value < 1);
+const quantityExceeded = computed(() =>
+	currentCartQuantity.value + quantity.value > props.maxQuantity,
+);
+
+let exceededTimer: ReturnType<typeof setTimeout> | null = null;
+const showQuantityExceeded = ref(false);
+
+function triggerExceededError() {
+	showQuantityExceeded.value = true;
+	if (exceededTimer !== null) {
+		clearTimeout(exceededTimer);
+	}
+	exceededTimer = setTimeout(() => {
+		showQuantityExceeded.value = false;
+		exceededTimer = null;
+	}, 2000);
+}
+
+function buildPriceTiers(prices: { [key: string]: number }[]): CartItemPriceTier[] {
+	const priceMap = prices[0];
+	if (!priceMap) {
+		return [];
+	}
+	return Object.entries(priceMap)
+		.map(([qty, totalCents]) => ({
+			minQuantity: parseInt(qty),
+			unitPrice: Number(totalCents) / parseInt(qty) / 100,
+		}))
+		.sort((a, b) => a.minQuantity - b.minQuantity);
+}
+
+function setQuantity(next: number) {
+	quantity.value = Math.max(1, Math.min(next, 999999));
+}
+
+function onQuantityInput(event: Event) {
+	const input = event.target as HTMLInputElement;
+	const sanitized = input.value.replace(/[^0-9]/g, "").slice(0, 6);
+	input.value = sanitized;
+	quantity.value = parseInt(sanitized) || 0;
+}
+
+function addToCart() {
+	if (quantityInvalid.value) {
+		return;
+	}
+	if (quantityExceeded.value) {
+		triggerExceededError();
+		return;
+	}
+
+	const added = cartStore.addItem({
+		id: props.product.id,
+		name: props.product.name,
+		image: props.imageUrl,
+		sku: props.sku,
+		price: props.price / 100,
+		taxRate: props.taxRate,
+		priceTiers: buildPriceTiers(props.prices),
+		maxOrderQuantity: props.maxQuantity,
+		categorySlug: props.categorySlug,
+		subcategorySlug: props.subcategorySlug,
+	}, { chooseTarget: true });
+	if (!added) {
+		triggerExceededError();
+		return;
+	}
+	if (quantity.value > 1) {
+		const item = cartStore.items.find(i => i.id === props.product.id && !i.requisitionId);
+		if (item) {
+			cartStore.updateQuantityByKey(cartStore.keyOf(item), item.quantity + quantity.value - 1);
+		}
+	}
+
+	toast.add({
+		title: t("product.actions.addedToCart", { quantity: quantity.value, name: props.product.name }),
+		color: "primary",
+		icon: icon("check"),
+		duration: 1500,
+	});
+}
+
+onUnmounted(() => {
+	if (exceededTimer !== null) {
+		clearTimeout(exceededTimer);
+		exceededTimer = null;
+	}
+});
+</script>
+
+<template>
+	<div class="space-y-4">
+		<div class="flex gap-3">
+			<div
+				class="flex items-center rounded-lg border border-(--ui-border) overflow-hidden
+				shrink-0"
+			>
+				<UButton
+					:icon="icon('minus')"
+					color="neutral"
+					variant="ghost"
+					tabindex="0"
+					:disabled="quantity <= 1"
+					:aria-label="t('cart.item.ariaDecreaseQuantity', { name: product.name })"
+					@click="setQuantity(quantity - 1)"
+				/>
+				<input
+					:value="String(quantity)"
+					type="text"
+					inputmode="numeric"
+					class="w-12 text-center text-sm font-medium bg-transparent
+					focus:outline-none"
+					:aria-label="t('product.detail.quantity')"
+					@input="onQuantityInput"
+				>
+				<UButton
+					:icon="icon('plus')"
+					color="neutral"
+					variant="ghost"
+					tabindex="0"
+					:aria-label="t('cart.item.ariaIncreaseQuantity', { name: product.name })"
+					@click="setQuantity(quantity + 1)"
+				/>
+			</div>
+			<UButton
+				:icon="icon('cart')"
+				size="lg"
+				class="flex-1 justify-center"
+				tabindex="0"
+				:label="t('product.actions.addToCart')"
+				:disabled="quantityInvalid"
+				@click="addToCart"
+			/>
+			<slot name="after-cta" />
+		</div>
+
+		<UiFeedbackErrorBoundary
+			v-if="showQuantityExceeded"
+			:title="t('product.actions.maxQuantityReachedTitle', { count: currentCartQuantity })"
+			:description="t('product.actions.maxQuantityReachedDescription', { max: maxQuantity })"
+			:show-retry="false"
+		/>
+
+		<!-- B2B incentives -->
+		<ul class="rounded-xl bg-elevated/60 ring-1 ring-(--ui-border) divide-y divide-(--ui-border)">
+			<li
+				v-for="incentive in (['delivery', 'paymentTerms', 'volume'] as const)"
+				:key="incentive"
+				class="flex items-center gap-2.5 px-3.5 py-2.5 text-sm text-muted"
+			>
+				<UIcon
+					:name="icon(incentive === 'delivery' ? 'delivery' : incentive === 'paymentTerms' ? 'payment' : 'grid')"
+					class="size-4 shrink-0 text-(--ui-primary)"
+				/>
+				{{ t(`product.incentives.${incentive}`) }}
+			</li>
+		</ul>
+	</div>
+</template>

package/app/components/product/detail/ProductDetailDescription.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+
+defineProps<{
+	description: string;
+}>();
+
+const { t } = useI18n();
+</script>
+
+<template>
+	<div>
+		<h3 class="text-lg font-semibold text-highlighted mb-4">
+			{{ t('product.description') }}
+		</h3>
+		<p class="text-sm/6 text-muted max-w-prose">
+			{{ description }}
+		</p>
+	</div>
+</template>

package/app/components/product/detail/ProductDetailImageGallery.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import type { ProductDetailImage } from "../../../interfaces/product-detail";
+
+const props = defineProps<{
+	images: ProductDetailImage[];
+	getImageUrl: (filename: string) => string;
+}>();
+
+const selectedIndex = ref(0);
+const selectedImage = computed(() => props.images[selectedIndex.value]);
+
+watch(() => props.images, () => {
+	selectedIndex.value = 0;
+});
+</script>
+
+<template>
+	<div class="flex flex-col gap-3">
+		<div
+			class="w-full aspect-square rounded-2xl overflow-hidden bg-elevated/60
+			ring-1 ring-(--ui-border) flex items-center justify-center p-8"
+		>
+			<img
+				v-if="selectedImage"
+				:src="getImageUrl(selectedImage.url)"
+				:alt="`Product image ${selectedIndex + 1}`"
+				class="max-w-full max-h-full object-contain"
+			>
+		</div>
+
+		<div
+			v-if="images.length > 1"
+			class="grid grid-cols-5 sm:grid-cols-6 gap-2"
+		>
+			<button
+				v-for="(image, index) in images"
+				:key="image.url"
+				type="button"
+				tabindex="0"
+				class="aspect-square rounded-lg overflow-hidden bg-elevated/60 p-1.5
+				ring-1 transition-all cursor-pointer
+				focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ui-primary)"
+				:class="index === selectedIndex
+					? 'ring-2 ring-(--ui-primary)'
+					: 'ring-(--ui-border) hover:ring-(--ui-primary)/50'"
+				:aria-label="`Thumbnail ${index + 1}`"
+				:aria-pressed="index === selectedIndex"
+				@click="selectedIndex = index"
+			>
+				<img
+					:src="getImageUrl(image.url)"
+					:alt="`Thumbnail ${index + 1}`"
+					class="w-full h-full object-contain"
+				>
+			</button>
+		</div>
+	</div>
+</template>

package/app/components/product/detail/ProductDetailPricing.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+
+const props = defineProps<{
+	prices: { [key: string]: number }[];
+	formatPrice: (cents: number) => string;
+	currentCartQuantity?: number;
+}>();
+
+const { t } = useI18n();
+
+const tiers = computed(() => {
+	if (!props.prices.length) {
+		return [];
+	}
+	const priceMap = props.prices[0];
+	return Object.entries(priceMap ?? {})
+		.map(([qty, totalCents]) => {
+			const quantity = parseInt(qty);
+			return {
+				quantity,
+				totalCents: Number(totalCents),
+				unitCents: Number(totalCents) / quantity,
+			};
+		})
+		.sort((a, b) => a.quantity - b.quantity);
+});
+
+const baseUnit = computed(() => tiers.value[0]?.unitCents ?? 0);
+
+function saving(unitCents: number): number {
+	if (!baseUnit.value || unitCents >= baseUnit.value) {
+		return 0;
+	}
+	return Math.round((1 - unitCents / baseUnit.value) * 100);
+}
+
+const activeTier = computed(() => {
+	if (!props.currentCartQuantity || props.currentCartQuantity < 1) {
+		return null;
+	}
+	return [...tiers.value]
+		.reverse()
+		.find(tier => tier.quantity <= props.currentCartQuantity!) ?? null;
+});
+
+const isActiveTier = (tierQuantity: number): boolean =>
+	activeTier.value?.quantity === tierQuantity;
+</script>
+
+<template>
+	<div v-if="tiers.length > 1">
+		<h3 class="text-sm font-semibold text-highlighted mb-2">
+			{{ t('product.pricing.volumePricing') }}
+		</h3>
+		<div class="rounded-xl border border-(--ui-border) overflow-hidden">
+			<table class="w-full text-sm">
+				<thead>
+					<tr class="text-left text-xs uppercase tracking-wide text-muted bg-elevated/60">
+						<th class="py-2.5 px-3 font-medium">
+							{{ t('product.pricing.minQuantity') }}
+						</th>
+						<th class="py-2.5 px-3 text-right font-medium">
+							{{ t('product.pricing.unitPrice') }}
+						</th>
+						<th class="py-2.5 px-3 text-right font-medium max-sm:hidden">
+							{{ t('product.pricing.saving') }}
+						</th>
+					</tr>
+				</thead>
+				<tbody class="divide-y divide-(--ui-border)">
+					<tr
+						v-for="tier in tiers"
+						:key="tier.quantity"
+						:class="isActiveTier(tier.quantity) ? 'bg-primary/5' : ''"
+					>
+						<td class="py-2.5 px-3">
+							<span class="font-medium text-highlighted tabular-nums">
+								{{ t('product.pricing.fromQuantity', { quantity: tier.quantity }) }}
+							</span>
+							<UBadge
+								v-if="isActiveTier(tier.quantity)"
+								color="primary"
+								variant="subtle"
+								size="sm"
+								class="ms-2"
+								:label="t('product.pricing.yourTier')"
+							/>
+						</td>
+						<td class="py-2.5 px-3 text-right font-semibold text-highlighted tabular-nums">
+							{{ formatPrice(tier.unitCents) }}
+						</td>
+						<td class="py-2.5 px-3 text-right tabular-nums max-sm:hidden">
+							<span
+								v-if="saving(tier.unitCents)"
+								class="text-success font-medium"
+							>−{{ saving(tier.unitCents) }} %</span>
+							<span
+								v-else
+								class="text-dimmed"
+							>–</span>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+	</div>
+</template>

package/app/components/product/detail/ProductDetailSaveToList.vue

@@ -0,0 +1,291 @@
+<script setup lang="ts">
+import type { OrderList, OrderListPosition } from "../../../interfaces/account/order-lists";
+
+/**
+ * "Add to order list" on the product detail page: shows on how many
+ * lists the article already sits (info flag with the list names), opens
+ * a dialog that toggles membership per list, offers the last-used list
+ * as a one-click shortcut and creates new lists inline.
+ */
+const props = defineProps<{
+	/** Icon-only trigger for the add-to-cart row (count chip + tooltip). */
+	compact?: boolean;
+	productId: string;
+	sku: string;
+	name: string;
+	image?: string;
+	/** Unit price in EUR. */
+	price: number;
+	taxRate?: number;
+	categorySlug?: string;
+	subcategorySlug?: string;
+}>();
+
+const LAST_USED_STORAGE = "cover-last-order-list";
+
+const { icon } = useIcons();
+const { t } = useI18n();
+const toast = useToast();
+const auth = useAuthStore();
+
+const open = ref(false);
+const busyListId = ref<string | null>(null);
+const newListName = ref("");
+const creating = ref(false);
+const lastUsedId = ref<string | null>(null);
+
+onMounted(() => {
+	lastUsedId.value = localStorage.getItem(LAST_USED_STORAGE);
+});
+
+const { data: lists, refresh } = useFetch<OrderList[]>("/api/account/order-lists", {
+	key: "account-order-lists",
+	server: false,
+	lazy: true,
+	default: () => [],
+});
+
+const signedIn = computed(() => auth.user !== null);
+
+/* ---- smart flag: where does the article already live? ----------------- */
+const listsWithProduct = computed(() =>
+	(lists.value ?? []).filter(list => list.positions.some(p => p.id === props.productId)));
+
+const onListNames = computed(() => listsWithProduct.value.map(list => list.name).join(", "));
+
+const isOwn = (list: OrderList): boolean => list.owner.id === auth.user?.$id;
+
+const lastUsedList = computed(() =>
+	(lists.value ?? []).find(list => list.id === lastUsedId.value && isOwn(list)) ?? null);
+
+const contains = (list: OrderList): boolean =>
+	list.positions.some(p => p.id === props.productId);
+
+/* ---- toggle membership ------------------------------------------------- */
+function buildPosition(): OrderListPosition {
+	return {
+		id: props.productId,
+		sku: props.sku,
+		name: props.name,
+		...(props.image ? { image: props.image } : {}),
+		quantity: 1,
+		price: props.price,
+		...(typeof props.taxRate === "number" ? { taxRate: props.taxRate } : {}),
+		...(props.categorySlug ? { categorySlug: props.categorySlug } : {}),
+		...(props.subcategorySlug ? { subcategorySlug: props.subcategorySlug } : {}),
+	};
+}
+
+async function toggle(list: OrderList): Promise<void> {
+	if (!isOwn(list) || busyListId.value) {
+		return;
+	}
+	busyListId.value = list.id;
+	const removing = contains(list);
+	try {
+		await $fetch(`/api/account/order-lists/${list.id}`, {
+			method: "PUT",
+			body: removing
+				? { positions: list.positions.filter(p => p.id !== props.productId) }
+				: { appendPositions: [buildPosition()] },
+		});
+		await refresh();
+		if (!removing) {
+			lastUsedId.value = list.id;
+			localStorage.setItem(LAST_USED_STORAGE, list.id);
+		}
+		toast.add({
+			title: t(removing ? "orderLists.saveTo.removed" : "orderLists.saveTo.added", { list: list.name }),
+			color: "success",
+			icon: icon("success"),
+			duration: 1500,
+		});
+	}
+	catch {
+		toast.add({ title: t("orderLists.saveTo.error"), color: "error", icon: icon("error") });
+	}
+	finally {
+		busyListId.value = null;
+	}
+}
+
+/* ---- inline create ------------------------------------------------------ */
+async function createAndAdd(): Promise<void> {
+	const name = newListName.value.trim();
+	if (!name) {
+		return;
+	}
+	creating.value = true;
+	try {
+		const created = await $fetch<OrderList>("/api/account/order-lists", {
+			method: "POST",
+			body: { name, kind: "shopping", public: false, positions: [buildPosition()] },
+		});
+		await refresh();
+		lastUsedId.value = created.id;
+		localStorage.setItem(LAST_USED_STORAGE, created.id);
+		newListName.value = "";
+		toast.add({
+			title: t("orderLists.saveTo.added", { list: name }),
+			color: "success",
+			icon: icon("success"),
+			duration: 1500,
+		});
+	}
+	catch {
+		toast.add({ title: t("orderLists.saveTo.error"), color: "error", icon: icon("error") });
+	}
+	finally {
+		creating.value = false;
+	}
+}
+</script>
+
+<template>
+	<div
+		v-if="signedIn"
+		:class="compact ? 'shrink-0' : 'flex flex-wrap items-center gap-2'"
+	>
+		<!-- Compact: icon button with a count chip, lives next to add-to-cart -->
+		<UTooltip
+			v-if="compact"
+			:text="listsWithProduct.length
+				? `${t('orderLists.saveTo.onLists', { count: listsWithProduct.length })}: ${onListNames}`
+				: t('orderLists.saveTo.button')"
+		>
+			<UChip
+				:show="listsWithProduct.length > 0"
+				:text="listsWithProduct.length"
+				color="info"
+				size="3xl"
+			>
+				<UButton
+					color="neutral"
+					variant="outline"
+					size="lg"
+					tabindex="0"
+					:icon="icon('order-list')"
+					:aria-label="t('orderLists.saveTo.button')"
+					@click="open = true"
+				/>
+			</UChip>
+		</UTooltip>
+
+		<template v-else>
+			<UButton
+				color="neutral"
+				variant="soft"
+				tabindex="0"
+				:icon="icon('order-list')"
+				:label="t('orderLists.saveTo.button')"
+				@click="open = true"
+			/>
+			<UTooltip
+				v-if="listsWithProduct.length"
+				:text="onListNames"
+			>
+				<UBadge
+					color="info"
+					variant="subtle"
+					size="sm"
+					:icon="icon('info')"
+					:label="t('orderLists.saveTo.onLists', { count: listsWithProduct.length })"
+				/>
+			</UTooltip>
+		</template>
+
+		<UModal
+			v-model:open="open"
+			:title="t('orderLists.saveTo.title')"
+		>
+			<template #body>
+				<div class="space-y-4">
+					<!-- One click into the last-used list -->
+					<UButton
+						v-if="lastUsedList"
+						color="primary"
+						variant="soft"
+						tabindex="0"
+						class="w-full justify-between"
+						:loading="busyListId === lastUsedList.id"
+						:icon="icon('reset')"
+						:trailing-icon="contains(lastUsedList) ? icon('success') : undefined"
+						@click="toggle(lastUsedList)"
+					>
+						{{ t('orderLists.saveTo.lastUsed') }}: {{ lastUsedList.name }}
+					</UButton>
+
+					<!-- All lists, membership toggles on click -->
+					<div
+						v-if="lists?.length"
+						class="max-h-72 overflow-y-auto space-y-2 -mx-1 px-1"
+					>
+						<button
+							v-for="list in lists"
+							:key="list.id"
+							type="button"
+							tabindex="0"
+							class="w-full text-left p-3 rounded-lg border transition-colors
+							focus:outline-none focus-visible:ring-2 focus-visible:ring-(--ui-primary)"
+							:class="[
+								contains(list)
+									? 'border-(--ui-primary) bg-primary/5'
+									: 'border-(--ui-border)',
+								isOwn(list)
+									? 'cursor-pointer hover:border-(--ui-border-accented)'
+									: 'opacity-60 cursor-not-allowed',
+							]"
+							:disabled="!isOwn(list) || busyListId !== null"
+							:title="isOwn(list) ? undefined : t('orderLists.saveTo.sharedReadOnly')"
+							@click="toggle(list)"
+						>
+							<span class="flex items-center justify-between gap-3">
+								<span class="min-w-0">
+									<span class="block text-sm font-medium text-highlighted truncate">
+										{{ list.name }}
+									</span>
+									<span class="block text-xs text-muted">
+										{{ t('orderLists.columns.positions') }}: {{ list.positions.length }}
+										<template v-if="!isOwn(list)">
+											· {{ list.owner.name }}
+										</template>
+									</span>
+								</span>
+								<UIcon
+									v-if="contains(list)"
+									:name="icon('success')"
+									class="size-5 text-primary shrink-0"
+								/>
+							</span>
+						</button>
+					</div>
+					<p
+						v-else
+						class="text-sm text-muted"
+					>
+						{{ t('orderLists.saveTo.empty') }}
+					</p>
+
+					<!-- Inline create -->
+					<div class="pt-3 border-t border-(--ui-border) flex items-center gap-2">
+						<UInput
+							v-model="newListName"
+							class="flex-1"
+							:placeholder="t('orderLists.namePlaceholder')"
+							@keydown.enter="createAndAdd"
+						/>
+						<UButton
+							color="primary"
+							tabindex="0"
+							:disabled="!newListName.trim()"
+							:loading="creating"
+							:icon="icon('plus')"
+							:label="t('orderLists.saveTo.createAndAdd')"
+							@click="createAndAdd"
+						/>
+					</div>
+				</div>
+			</template>
+		</UModal>
+	</div>
+</template>

package/app/components/product/detail/ProductDetailSpecifications.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+
+import type { ProductDetailAttribute } from "../../../interfaces/product-detail";
+
+defineProps<{
+	attributes: ProductDetailAttribute[];
+}>();
+
+const { t } = useI18n();
+</script>
+
+<template>
+	<div v-if="attributes.length">
+		<h3 class="text-lg font-semibold text-highlighted mb-4">
+			{{ t('product.specifications') }}
+		</h3>
+		<dl class="divide-y divide-(--ui-border) border-y border-(--ui-border)">
+			<div
+				v-for="attr in attributes"
+				:key="attr.id"
+				class="grid grid-cols-2 gap-4 py-2.5 text-sm"
+			>
+				<dt class="text-muted">
+					{{ attr.name }}
+				</dt>
+				<dd class="m-0 text-highlighted">
+					{{ attr.value }}
+				</dd>
+			</div>
+		</dl>
+	</div>
+</template>