@revenexx/cover 0.1.0

package/app/components/cart/position/CartPosition.vue

@@ -0,0 +1,369 @@
+<script setup lang="ts">
+import { slugify } from "../../../composables/useProducts";
+import type { CalculatedCartLine } from "../../../interfaces/cart-calculation";
+import type { CartItem } from "../../../interfaces/cart-item";
+import { CART_MAX_QUANTITY } from "../../../interfaces/cart-item";
+
+/**
+ * Full cart position (Cart 2.0): selector, drag handle, article identity,
+ * cost center, position texts, quantity, availability, calculated pricing
+ * and the position function bar. The compact variant for the mini-cart
+ * drawer remains in cart/item/CartItem.vue.
+ */
+const props = defineProps<{
+	item: CartItem;
+	line: CalculatedCartLine | null;
+	/** Hide selector/drag/functions (read-only display, e.g. checkout). */
+	readonly?: boolean;
+}>();
+
+const { icon } = useIcons();
+const { t } = useI18n();
+const { getImage } = useProductImage();
+const localePath = useLocalePath();
+const cart = useCartStore();
+const selection = useCartSelection();
+const actions = useCartActions();
+const { settings, costCenterById, role } = useB2BContext();
+const { formatCurrency } = useCartSummaryFormatting();
+
+const lineKey = computed(() => cart.keyOf(props.item));
+
+const detailUrl = computed(() => {
+	if (!props.item.categorySlug || !props.item.subcategorySlug) {
+		return null;
+	}
+	return localePath(
+		`/category/${props.item.categorySlug}/${props.item.subcategorySlug}/product/${slugify(props.item)}`,
+	);
+});
+
+const showCostCenter = computed(() =>
+	Boolean(role.value) && settings.value?.costCenters.enabled,
+);
+const costCenterLabel = computed(() => {
+	const cc = props.item.costCenterId
+		? costCenterById.value.get(props.item.costCenterId)
+		: undefined;
+	return cc ? `${cc.code} · ${cc.label}` : "–";
+});
+
+const availability = computed(() => props.line?.availability ?? null);
+const availabilityColor = computed(() => {
+	switch (availability.value?.state) {
+		case "in-stock": return "bg-success";
+		case "partial": return "bg-warning";
+		default: return "bg-error";
+	}
+});
+
+/* ---- quantity ---------------------------------------------------- */
+const inputValue = ref(String(props.item.quantity));
+watch(() => props.item.quantity, (val) => {
+	inputValue.value = String(val);
+});
+
+function applyQuantity(next: number): void {
+	const clamped = Math.min(Math.max(next, 1), props.item.maxOrderQuantity ?? CART_MAX_QUANTITY);
+	cart.updateQuantityByKey(lineKey.value, clamped);
+	inputValue.value = String(clamped);
+}
+
+function onQuantityInput(event: Event): void {
+	const input = event.target as HTMLInputElement;
+	inputValue.value = input.value.replace(/[^0-9]/g, "").slice(0, 6);
+}
+
+function commitInput(): void {
+	const parsed = parseInt(inputValue.value, 10);
+	if (!parsed || parsed < 1) {
+		inputValue.value = String(props.item.quantity);
+		return;
+	}
+	applyQuantity(parsed);
+}
+
+const hintColor = (type: string) =>
+	type === "missing-cost-center" ? "warning" as const : "info" as const;
+</script>
+
+<template>
+	<div
+		class="py-4"
+		:class="selection.isSelected(lineKey) && !readonly ? 'bg-primary/5 -mx-3 px-3 rounded-lg' : ''"
+	>
+		<!-- Position hints -->
+		<div
+			v-if="line?.hints.length"
+			class="mb-3 space-y-1.5"
+		>
+			<UAlert
+				v-for="hint in line.hints"
+				:key="hint.type"
+				:color="hintColor(hint.type)"
+				variant="soft"
+				:icon="icon(hint.type === 'missing-cost-center' ? 'warning' : 'info')"
+				:title="t(hint.messageKey, hint.params ?? {})"
+				:ui="{ root: 'py-2', title: 'text-xs' }"
+			/>
+		</div>
+
+		<div class="flex items-start gap-3">
+			<!-- Selector + drag handle -->
+			<div
+				v-if="!readonly"
+				class="flex flex-col items-center gap-2 pt-1"
+			>
+				<UCheckbox
+					:model-value="selection.isSelected(lineKey)"
+					:aria-label="t('cart.selection.selectPosition', { name: item.name })"
+					tabindex="0"
+					@update:model-value="selection.toggle(lineKey)"
+				/>
+				<span
+					class="drag-handle cursor-grab text-dimmed hover:text-muted touch-none"
+					:title="t('cart.position.reorder')"
+				>
+					<UIcon
+						:name="icon('drag')"
+						class="size-4"
+					/>
+				</span>
+			</div>
+
+			<!-- Image -->
+			<NuxtLink
+				:to="detailUrl ?? undefined"
+				class="w-20 h-20 shrink-0 flex items-center justify-center rounded-lg
+				bg-elevated/60 ring-1 ring-(--ui-border) p-1.5"
+				:aria-label="item.name"
+				:tabindex="detailUrl ? 0 : -1"
+			>
+				<img
+					:src="getImage(item.image)"
+					:alt="item.name"
+					class="max-h-full max-w-full object-contain"
+				>
+			</NuxtLink>
+
+			<!-- Identity -->
+			<div class="flex flex-col gap-0.5 flex-1 min-w-0">
+				<div class="flex flex-wrap items-center gap-x-2 text-xs text-muted">
+					<span>{{ item.sku }}</span>
+					<span
+						v-if="role && item.customSku"
+						class="text-dimmed"
+					>{{ t('cart.position.customSku') }}: {{ item.customSku }}</span>
+				</div>
+				<NuxtLink
+					v-if="detailUrl"
+					:to="detailUrl"
+					class="text-sm font-medium text-highlighted leading-snug hover:underline w-fit"
+				>
+					{{ item.name }}
+				</NuxtLink>
+				<span
+					v-else
+					class="text-sm font-medium text-highlighted leading-snug"
+				>{{ item.name }}</span>
+				<span
+					v-if="item.name2"
+					class="text-xs text-muted"
+				>{{ item.name2 }}</span>
+
+				<!-- Cost center: shown and edited right at the position -->
+				<button
+					v-if="showCostCenter && !readonly"
+					type="button"
+					tabindex="0"
+					class="group/cc mt-1.5 w-fit text-xs text-muted hover:text-highlighted cursor-pointer
+					inline-flex items-center gap-1.5 rounded-md border border-(--ui-border)
+					hover:border-(--ui-border-accented) px-2 py-1 transition-colors"
+					:aria-label="t('cart.position.editCostCenter')"
+					@click="actions.open('cost-center', [lineKey])"
+				>
+					<UIcon
+						:name="icon('hash')"
+						class="size-3.5 text-primary"
+					/>
+					{{ t('cart.position.costCenter') }}: {{ costCenterLabel }}
+					<UIcon
+						:name="icon('edit')"
+						class="size-3 text-dimmed group-hover/cc:text-muted"
+					/>
+				</button>
+				<span
+					v-else-if="showCostCenter"
+					class="mt-1 text-xs text-muted inline-flex items-center gap-1"
+				>
+					<UIcon
+						:name="icon('hash')"
+						class="size-3.5"
+					/>
+					{{ t('cart.position.costCenter') }}: {{ costCenterLabel }}
+				</span>
+
+				<!-- Position texts: shown and edited right at the position -->
+				<button
+					v-if="!readonly && item.positionTexts?.length"
+					type="button"
+					tabindex="0"
+					class="group/texts mt-1 w-fit text-left cursor-pointer"
+					:aria-label="t('cart.position.editTexts')"
+					@click="actions.open('texts', [lineKey])"
+				>
+					<span
+						v-for="(text, index) in item.positionTexts"
+						:key="index"
+						class="block text-xs text-muted italic group-hover/texts:text-highlighted"
+					>
+						{{ text }}
+						<UIcon
+							v-if="index === (item.positionTexts?.length ?? 0) - 1"
+							:name="icon('edit')"
+							class="size-3 inline-block ms-1 text-dimmed group-hover/texts:text-muted"
+						/>
+					</span>
+				</button>
+				<ul
+					v-else-if="item.positionTexts?.length"
+					class="mt-1 space-y-0.5"
+				>
+					<li
+						v-for="(text, index) in item.positionTexts"
+						:key="index"
+						class="text-xs text-muted italic"
+					>
+						{{ text }}
+					</li>
+				</ul>
+				<button
+					v-else-if="!readonly"
+					type="button"
+					tabindex="0"
+					class="mt-1 w-fit text-xs text-dimmed hover:text-muted cursor-pointer
+					inline-flex items-center gap-1 transition-colors"
+					@click="actions.open('texts', [lineKey])"
+				>
+					<UIcon
+						:name="icon('plus')"
+						class="size-3"
+					/>
+					{{ t('cart.position.addTexts') }}
+				</button>
+			</div>
+
+			<!-- Quantity + availability -->
+			<div class="flex flex-col items-end gap-1.5 shrink-0">
+				<div
+					v-if="!readonly"
+					class="flex items-center gap-1"
+				>
+					<UButton
+						:icon="icon('minus')"
+						color="primary"
+						variant="soft"
+						size="xs"
+						tabindex="0"
+						:disabled="item.quantity <= 1"
+						:aria-label="t('cart.item.ariaDecreaseQuantity', { name: item.name })"
+						@click="applyQuantity(item.quantity - 1)"
+					/>
+					<input
+						v-model="inputValue"
+						type="text"
+						inputmode="numeric"
+						:aria-label="t('cart.item.ariaInputQuantity', { name: item.name })"
+						class="w-14 text-center text-sm border border-(--ui-border) rounded px-1 py-0.5
+						bg-transparent focus:outline-none focus:ring-1 focus:ring-(--ui-primary)"
+						@input="onQuantityInput"
+						@keydown.enter.prevent="commitInput"
+						@blur="commitInput"
+					>
+					<UButton
+						:icon="icon('plus')"
+						color="primary"
+						variant="soft"
+						size="xs"
+						tabindex="0"
+						:aria-label="t('cart.item.ariaIncreaseQuantity', { name: item.name })"
+						@click="applyQuantity(item.quantity + 1)"
+					/>
+				</div>
+				<span
+					v-else
+					class="text-sm text-highlighted"
+				>{{ line?.adjustedQuantity ?? item.quantity }}</span>
+				<span class="text-xs text-muted">{{ item.unit ?? t('cart.position.defaultUnit') }}</span>
+				<span
+					v-if="availability"
+					class="inline-flex items-center gap-1.5 text-xs text-muted"
+				>
+					<span
+						class="size-2 rounded-full"
+						:class="availabilityColor"
+					/>
+					{{ t(`cart.availability.${availability.state}`, { count: availability.availableQuantity, days: availability.deliveryDays ?? 0 }) }}
+				</span>
+			</div>
+
+			<!-- Price block -->
+			<div class="flex flex-col items-end gap-0.5 w-32 shrink-0">
+				<template v-if="line?.priceLabel">
+					<UBadge
+						color="neutral"
+						variant="subtle"
+						:label="line.priceLabel.label"
+					/>
+				</template>
+				<template v-else>
+					<span class="text-sm font-semibold text-highlighted">
+						{{ formatCurrency(line?.lineTotal ?? item.price * item.quantity) }}
+					</span>
+					<span class="text-xs text-muted">
+						{{ t('cart.position.perUnit', { price: formatCurrency(line?.unitPrice ?? item.price) }) }}
+					</span>
+					<span
+						v-for="surcharge in line?.surcharges ?? []"
+						:key="surcharge.name"
+						class="text-xs text-dimmed"
+					>
+						+ {{ surcharge.name }} {{ formatCurrency(surcharge.amountPerUnit) }}
+					</span>
+				</template>
+			</div>
+
+			<!-- Function bar -->
+			<div
+				v-if="!readonly"
+				class="flex flex-col gap-0.5 shrink-0"
+			>
+				<UTooltip
+					v-if="role"
+					:text="t('cart.bulk.saveToList')"
+				>
+					<UButton
+						:icon="icon('bookmark')"
+						color="neutral"
+						variant="ghost"
+						size="xs"
+						tabindex="0"
+						:aria-label="t('cart.bulk.saveToList')"
+						@click="actions.open('save', [lineKey])"
+					/>
+				</UTooltip>
+				<UTooltip :text="t('cart.item.remove')">
+					<UButton
+						:icon="icon('delete')"
+						color="neutral"
+						variant="ghost"
+						size="xs"
+						tabindex="0"
+						:aria-label="t('cart.item.ariaRemoveFromCart', { name: item.name })"
+						@click="cart.removeByKeys([lineKey])"
+					/>
+				</UTooltip>
+			</div>
+		</div>
+	</div>
+</template>

package/app/components/cart/quickadd/CartQuickAdd.vue

@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import { productsApi } from "../../../api/products";
+import { getBaseUnitPrice, getPriceTiers, type Product } from "../../../composables/useProducts";
+
+/**
+ * Cart quick entry (spec: Warenkorb-Schnellerfassung): add positions by
+ * article number with quantity, embedded on the empty cart and available
+ * as a modal on the filled cart.
+ */
+const { icon } = useIcons();
+const { t } = useI18n();
+const toast = useToast();
+const cart = useCartStore();
+const { locale } = useI18n();
+
+const sku = ref("");
+const quantity = ref("1");
+const adding = ref(false);
+
+const { data: products } = useFetch<Product[]>(productsApi.list(), {
+	key: "quick-add-products",
+	headers: computed(() => ({ "x-locale": locale.value })),
+	server: false,
+	lazy: true,
+	default: () => [],
+});
+
+const matches = computed(() => {
+	const q = sku.value.trim().toLowerCase();
+	if (q.length < 2) {
+		return [];
+	}
+	return (products.value ?? [])
+		.filter(p => p.sku.toLowerCase().includes(q) || p.name.toLowerCase().includes(q))
+		.slice(0, 5);
+});
+
+function buildTiers(prices: { [key: string]: number }[]) {
+	return getPriceTiers(prices).map(tier => ({
+		minQuantity: tier.quantity,
+		unitPrice: tier.unitCents / 100,
+	}));
+}
+
+function addProduct(product: Product): void {
+	const qty = Math.max(1, parseInt(quantity.value, 10) || 1);
+	const price = getBaseUnitPrice(product.prices);
+	if (price === null) {
+		return;
+	}
+	adding.value = true;
+	const added = cart.addItem({
+		id: product.id,
+		name: product.name,
+		image: product.image,
+		sku: product.sku,
+		price,
+		taxRate: product.tax.rate,
+		priceTiers: buildTiers(product.prices),
+		categorySlug: product.categorySlug,
+		subcategorySlug: product.subcategorySlug,
+		...(typeof product.maxOrderQuantity === "number"
+			? { maxOrderQuantity: product.maxOrderQuantity }
+			: {}),
+	}, { chooseTarget: true });
+	if (added && qty > 1) {
+		const item = cart.items.find(i => i.id === product.id && !i.requisitionId);
+		if (item) {
+			cart.updateQuantityByKey(cart.keyOf(item), item.quantity + qty - 1);
+		}
+	}
+	toast.add({
+		title: t("cart.quickAdd.added", { quantity: qty, name: product.name }),
+		color: "success",
+		icon: icon("success"),
+		duration: 1500,
+	});
+	sku.value = "";
+	quantity.value = "1";
+	adding.value = false;
+}
+
+function onSubmit(): void {
+	const exact = matches.value.find(p => p.sku.toLowerCase() === sku.value.trim().toLowerCase());
+	const target = exact ?? matches.value[0];
+	if (target) {
+		addProduct(target);
+	}
+}
+</script>
+
+<template>
+	<div class="space-y-2">
+		<div class="flex items-end gap-2">
+			<UFormField
+				:label="t('cart.quickAdd.skuLabel')"
+				class="flex-1"
+			>
+				<UInput
+					v-model="sku"
+					class="w-full"
+					:placeholder="t('cart.quickAdd.skuPlaceholder')"
+					@keydown.enter.prevent="onSubmit"
+				/>
+			</UFormField>
+			<UFormField :label="t('cart.quickAdd.quantityLabel')">
+				<UInput
+					v-model="quantity"
+					type="text"
+					inputmode="numeric"
+					class="w-20"
+					@keydown.enter.prevent="onSubmit"
+				/>
+			</UFormField>
+			<UButton
+				color="primary"
+				tabindex="0"
+				:loading="adding"
+				:disabled="matches.length === 0"
+				:label="t('cart.quickAdd.add')"
+				@click="onSubmit"
+			/>
+		</div>
+		<ul
+			v-if="matches.length"
+			class="border border-(--ui-border) rounded-lg divide-y divide-(--ui-border) overflow-hidden"
+		>
+			<li
+				v-for="product in matches"
+				:key="product.id"
+			>
+				<button
+					type="button"
+					tabindex="0"
+					class="w-full flex items-center justify-between gap-3 px-3 py-2 text-left
+					hover:bg-elevated transition-colors cursor-pointer"
+					@click="addProduct(product)"
+				>
+					<span class="text-sm text-highlighted truncate">{{ product.name }}</span>
+					<span class="text-xs text-muted shrink-0">{{ product.sku }}</span>
+				</button>
+			</li>
+		</ul>
+	</div>
+</template>

package/app/components/cart/recommend/CartCrossSell.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import CartRecommendCard from "./CartRecommendCard.vue";
+import { searchApi } from "../../../api/search";
+import { getBaseUnitPrice, getPriceTiers } from "../../../composables/useProducts";
+
+import type { ProductList } from "../../../interfaces/product-list";
+
+/**
+ * Cross-sell strip on the cart page: products from the same category as
+ * the cart content (or catalog-wide when `popular` — the empty-cart
+ * variant), excluding what's already in the cart.
+ */
+const props = defineProps<{
+	/** Catalog-wide suggestions instead of cart-category matches. */
+	popular?: boolean;
+}>();
+
+const { icon } = useIcons();
+const { t } = useI18n();
+const toast = useToast();
+const cart = useCartStore();
+
+const categorySlug = computed(() =>
+	props.popular ? null : cart.items.find(item => item.categorySlug)?.categorySlug ?? null);
+
+const requestBody = computed(() => ({
+	q: "*",
+	...(categorySlug.value ? { filters: { categorySlug: [categorySlug.value] } } : {}),
+	perPage: 12,
+}));
+
+const { data } = useFetch<{ products: ProductList[] }>(searchApi.search(), {
+	key: `cart-cross-sell:${props.popular ? "popular" : "category"}`,
+	method: "POST",
+	body: requestBody,
+	server: false,
+	lazy: true,
+	default: () => ({ products: [] }),
+});
+
+const suggestions = computed(() => {
+	const inCart = new Set(cart.items.map(item => item.id));
+	return (data.value.products ?? [])
+		.filter(product => !inCart.has(product.id) && !product.isOutOfStock)
+		.slice(0, 8);
+});
+
+function add(product: ProductList): void {
+	const price = getBaseUnitPrice(product.prices);
+	if (price === null) {
+		return;
+	}
+	const ok = cart.addItem({
+		id: product.id,
+		name: product.name,
+		image: product.image,
+		sku: product.sku,
+		price,
+		taxRate: product.tax.rate,
+		priceTiers: getPriceTiers(product.prices).map(tier => ({
+			minQuantity: tier.quantity,
+			unitPrice: tier.unitCents / 100,
+		})),
+		categorySlug: product.categorySlug,
+		subcategorySlug: product.subcategorySlug,
+	}, { chooseTarget: true });
+	if (ok) {
+		toast.add({
+			title: t("product.actions.addedToCart", { quantity: 1, name: product.name }),
+			color: "primary",
+			icon: icon("check"),
+			duration: 1000,
+		});
+	}
+}
+</script>
+
+<template>
+	<section
+		v-if="suggestions.length"
+		class="print:hidden"
+	>
+		<h2 class="flex items-center gap-2 text-sm font-semibold text-highlighted mb-3">
+			<UIcon
+				:name="icon(popular ? 'star' : 'plus')"
+				class="size-4 text-primary"
+			/>
+			{{ popular ? t('cart.boost.popularTitle') : t('cart.boost.crossSellTitle') }}
+		</h2>
+		<div class="flex gap-3 overflow-x-auto pb-2 -mx-1 px-1">
+			<CartRecommendCard
+				v-for="product in suggestions"
+				:key="product.id"
+				:name="product.name"
+				:image="product.image"
+				:sku="product.sku"
+				:price="getBaseUnitPrice(product.prices)"
+				@add="add(product)"
+			/>
+		</div>
+	</section>
+</template>

package/app/components/cart/recommend/CartRecommendCard.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+/** Compact product card for the cart recommendation strips. */
+defineProps<{
+	name: string;
+	image?: string;
+	sku: string;
+	price: number | null;
+}>();
+
+const emit = defineEmits<{
+	(e: "add"): void;
+}>();
+
+const { icon } = useIcons();
+const { t } = useI18n();
+const { getImage } = useProductImage();
+const { formatCurrency } = useCartSummaryFormatting();
+</script>
+
+<template>
+	<div
+		class="flex flex-col w-44 shrink-0 rounded-xl border border-(--ui-border) p-3
+		hover:border-(--ui-border-accented) transition-colors"
+	>
+		<span
+			class="h-24 flex items-center justify-center rounded-lg bg-elevated/60 p-2 mb-2"
+		>
+			<img
+				v-if="image"
+				:src="getImage(image)"
+				:alt="name"
+				class="max-h-full max-w-full object-contain"
+				loading="lazy"
+			>
+		</span>
+		<p class="text-xs font-medium text-highlighted line-clamp-2 min-h-8">
+			{{ name }}
+		</p>
+		<p class="text-xs text-muted truncate mt-0.5">
+			{{ sku }}
+		</p>
+		<div class="flex items-center justify-between gap-2 mt-2">
+			<span class="text-sm font-semibold text-highlighted tabular-nums">
+				{{ price !== null ? formatCurrency(price) : '' }}
+			</span>
+			<UTooltip :text="t('cart.boost.add')">
+				<UButton
+					color="primary"
+					variant="soft"
+					size="xs"
+					tabindex="0"
+					:icon="icon('plus')"
+					:aria-label="t('cart.boost.add')"
+					@click="emit('add')"
+				/>
+			</UTooltip>
+		</div>
+	</div>
+</template>