@revenexx/cover 0.1.0

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

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import CartRecommendCard from "./CartRecommendCard.vue";
+import { accountApi } from "../../../api/account";
+
+import type { AccountOrderListResponse } from "../../../interfaces/account/order-list";
+
+/**
+ * "Recently ordered" strip on the cart page: the fastest path to a B2B
+ * reorder. Flattens the order history into unique articles not yet in
+ * the cart; one click adds them. Renders nothing for guests or buyers
+ * without history.
+ */
+const { icon } = useIcons();
+const { t } = useI18n();
+const toast = useToast();
+const cart = useCartStore();
+
+const { data } = useFetch<AccountOrderListResponse>(accountApi.orders(), {
+	key: "account-orders",
+	server: false,
+	lazy: true,
+	default: () => ({ orders: [] }),
+});
+
+const suggestions = computed(() => {
+	const inCart = new Set(cart.items.map(item => item.id));
+	const seen = new Set<string>();
+	const result: {
+		id: string;
+		name: string;
+		image?: string;
+		sku: string;
+		price: number;
+		categorySlug?: string;
+		subcategorySlug?: string;
+	}[] = [];
+	for (const order of data.value.orders) {
+		if (order.status === "cancelled") {
+			continue;
+		}
+		for (const position of order.positions) {
+			if (seen.has(position.id) || inCart.has(position.id)) {
+				continue;
+			}
+			seen.add(position.id);
+			result.push({
+				id: position.id,
+				name: position.name,
+				...(position.image ? { image: position.image } : {}),
+				sku: position.sku,
+				price: position.unitPrice,
+				...(position.categorySlug ? { categorySlug: position.categorySlug } : {}),
+				...(position.subcategorySlug ? { subcategorySlug: position.subcategorySlug } : {}),
+			});
+			if (result.length >= 8) {
+				return result;
+			}
+		}
+	}
+	return result;
+});
+
+function add(suggestion: (typeof suggestions.value)[number]): void {
+	const ok = cart.addItem({
+		id: suggestion.id,
+		name: suggestion.name,
+		image: suggestion.image ?? "",
+		sku: suggestion.sku,
+		price: suggestion.price,
+		categorySlug: suggestion.categorySlug,
+		subcategorySlug: suggestion.subcategorySlug,
+	}, { chooseTarget: true });
+	if (ok) {
+		toast.add({
+			title: t("product.actions.addedToCart", { quantity: 1, name: suggestion.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('reset')"
+				class="size-4 text-primary"
+			/>
+			{{ t('cart.boost.reorderTitle') }}
+		</h2>
+		<div class="flex gap-3 overflow-x-auto pb-2 -mx-1 px-1">
+			<CartRecommendCard
+				v-for="suggestion in suggestions"
+				:key="suggestion.id"
+				:name="suggestion.name"
+				:image="suggestion.image"
+				:sku="suggestion.sku"
+				:price="suggestion.price"
+				@add="add(suggestion)"
+			/>
+		</div>
+	</section>
+</template>

package/app/components/cart/requisition/CartRequisitionGroup.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import CartPositionList from "../view/CartPositionList.vue";
+import type { CalculatedCartLine } from "../../../interfaces/cart-calculation";
+import type { CartItem } from "../../../interfaces/cart-item";
+import type { CartRequisitionMeta } from "../../../interfaces/persisted-cart";
+
+/**
+ * Frame around the positions of one loaded requisition: collapsible, shows
+ * requester, request date and workflow name, and offers unloading the
+ * requisition from the cart (spec: Bestellanforderung im Warenkorb).
+ */
+const props = defineProps<{
+	requisition: CartRequisitionMeta;
+	items: CartItem[];
+	linesByKey: Map<string, CalculatedCartLine>;
+	readonly?: boolean;
+}>();
+
+const { icon } = useIcons();
+const { t, d } = useI18n();
+const cart = useCartStore();
+
+const open = ref(true);
+
+const requestedAt = computed(() => d(new Date(props.requisition.requestedAt), {
+	dateStyle: "medium",
+	timeStyle: "short",
+}));
+</script>
+
+<template>
+	<section class="border border-(--ui-primary)/40 rounded-lg overflow-hidden">
+		<header class="flex items-center gap-3 bg-primary/5 px-3 py-2.5">
+			<UButton
+				:icon="icon(open ? 'chevron-up' : 'chevron-down')"
+				color="neutral"
+				variant="ghost"
+				size="xs"
+				tabindex="0"
+				:aria-label="t(open ? 'cart.requisition.collapse' : 'cart.requisition.expand')"
+				@click="open = !open"
+			/>
+			<div class="flex flex-col min-w-0 flex-1">
+				<span class="text-sm font-medium text-highlighted truncate">
+					{{ t('cart.requisition.title') }} · {{ requisition.workflowName }}
+				</span>
+				<span class="text-xs text-muted">
+					{{ t('cart.requisition.meta', { name: requisition.requestedBy.name, date: requestedAt }) }}
+				</span>
+			</div>
+			<UButton
+				v-if="!readonly"
+				:icon="icon('logout')"
+				color="neutral"
+				variant="ghost"
+				size="xs"
+				tabindex="0"
+				:label="t('cart.requisition.unload')"
+				@click="cart.removeRequisition(requisition.id)"
+			/>
+		</header>
+		<div
+			v-show="open"
+			class="px-3"
+		>
+			<CartPositionList
+				:items="items"
+				:lines-by-key="linesByKey"
+				:scope="requisition.id"
+				:readonly="readonly"
+			/>
+		</div>
+	</section>
+</template>

package/app/components/cart/skeleton/CartSkeleton.vue

@@ -0,0 +1,18 @@
+<template>
+	<ul class="divide-y divide-(--ui-border)">
+		<li
+			v-for="i in 3"
+			:key="i"
+			class="flex items-center gap-3 py-3"
+		>
+			<USkeleton class="w-14 h-14 shrink-0 rounded-md" />
+			<div class="flex flex-col gap-1.5 flex-1">
+				<USkeleton class="h-4 w-3/4" />
+				<USkeleton class="h-3 w-1/4" />
+				<USkeleton class="h-3 w-1/3" />
+				<USkeleton class="h-7 w-28 mt-1 rounded-md" />
+			</div>
+			<USkeleton class="w-6 h-6 self-start shrink-0 rounded-md" />
+		</li>
+	</ul>
+</template>

package/app/components/cart/summary/CartSummary.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+const { t } = useI18n();
+const cart = useCartStore();
+const { to } = useAppUrl();
+
+async function checkout() {
+	cart.closeCart();
+	await navigateTo(to("/cart"));
+}
+</script>
+
+<template>
+	<div class="flex flex-col gap-3 w-full">
+		<CartSummaryBreakdown />
+		<div class="flex justify-end">
+			<UButton
+				color="primary"
+				variant="solid"
+				:label="t('cart.actions.proceedToCart')"
+				tabindex="0"
+				@click="checkout"
+			/>
+		</div>
+	</div>
+</template>

package/app/components/cart/summary/CartSummaryBreakdown.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+const { t } = useI18n();
+const { subtotalDisplay, visibleTaxRows, total } = storeToRefs(useCartStore());
+const { formatCurrency, taxRateLabel } = useCartSummaryFormatting();
+</script>
+
+<template>
+	<dl class="flex flex-col gap-3 m-0">
+		<div class="flex justify-between text-sm text-muted">
+			<dt>{{ t('summary.subtotal') }}</dt>
+			<dd class="m-0">
+				{{ formatCurrency(subtotalDisplay) }}
+			</dd>
+		</div>
+		<div
+			v-for="taxRow in visibleTaxRows"
+			:key="taxRow.rate"
+			class="flex justify-between text-sm text-muted"
+		>
+			<dt>{{ taxRateLabel(taxRow.rate) }}</dt>
+			<dd class="m-0">
+				{{ formatCurrency(taxRow.amount) }}
+			</dd>
+		</div>
+		<div
+			class="flex justify-between text-sm font-semibold text-highlighted
+			border-t border-(--ui-border) pt-3"
+		>
+			<dt>{{ t('summary.total') }}</dt>
+			<dd class="m-0">
+				{{ formatCurrency(total) }}
+			</dd>
+		</div>
+	</dl>
+</template>

package/app/components/cart/switcher/CartSwitcher.vue

@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import CartNameModal from "../manage/CartNameModal.vue";
+import type { DropdownMenuItem } from "@nuxt/ui";
+
+/**
+ * Cart switcher for the cart page (multiple-carts feature): pick the
+ * active cart, create a new one, rename or delete the current one.
+ * Renders nothing while the org flag is off.
+ */
+const { icon } = useIcons();
+const { t } = useI18n();
+const toast = useToast();
+const cart = useCartStore();
+const { settings } = useB2BContext();
+
+const enabled = computed(() => settings.value?.cart.multipleCarts === true);
+
+const createOpen = ref(false);
+const renameOpen = ref(false);
+const deleteOpen = ref(false);
+
+const menuItems = computed<DropdownMenuItem[][]>(() => [
+	cart.cartSummaries.map(summary => ({
+		label: summary.name,
+		...(summary.active ? { icon: icon("success") } : {}),
+		suffix: `${summary.positions} · ${summary.itemCount}×`,
+		onSelect: () => {
+			if (!summary.active) {
+				cart.switchCart(summary.id);
+				toast.add({
+					title: t("cart.multi.switched", { name: summary.name }),
+					color: "primary",
+					icon: icon("cart"),
+					duration: 1500,
+				});
+			}
+		},
+	})),
+	[
+		{
+			label: t("cart.multi.newCart"),
+			icon: icon("plus"),
+			onSelect: () => {
+				createOpen.value = true;
+			},
+		},
+		{
+			label: t("cart.multi.rename"),
+			icon: icon("edit"),
+			onSelect: () => {
+				renameOpen.value = true;
+			},
+		},
+		{
+			label: t("cart.multi.delete"),
+			icon: icon("delete"),
+			color: "error",
+			onSelect: () => {
+				deleteOpen.value = true;
+			},
+		},
+	],
+]);
+
+function onCreate(name: string): void {
+	cart.createCart(name);
+	toast.add({
+		title: t("cart.multi.created", { name }),
+		color: "success",
+		icon: icon("success"),
+		duration: 1500,
+	});
+}
+
+function onRename(name: string): void {
+	cart.renameCart(cart.activeCartId, name);
+}
+
+function onDelete(): void {
+	cart.deleteCart(cart.activeCartId);
+	deleteOpen.value = false;
+	toast.add({
+		title: t("cart.multi.deleted"),
+		color: "success",
+		icon: icon("success"),
+		duration: 1500,
+	});
+}
+</script>
+
+<template>
+	<div v-if="enabled">
+		<UDropdownMenu :items="menuItems">
+			<UButton
+				color="neutral"
+				variant="outline"
+				size="sm"
+				tabindex="0"
+				:icon="icon('cart')"
+				:trailing-icon="icon('chevron-down')"
+				:label="cart.activeCartName"
+				:aria-label="t('cart.multi.switcher')"
+			/>
+		</UDropdownMenu>
+
+		<CartNameModal
+			v-model:open="createOpen"
+			mode="create"
+			@save="onCreate"
+		/>
+		<CartNameModal
+			v-model:open="renameOpen"
+			mode="rename"
+			:initial-name="cart.activeCartName"
+			@save="onRename"
+		/>
+
+		<UModal
+			v-model:open="deleteOpen"
+			:title="t('cart.multi.deleteTitle')"
+		>
+			<template #body>
+				<p class="text-sm text-muted">
+					{{ t('cart.multi.deleteDescription', {
+						name: cart.activeCartName,
+						count: cart.items.length,
+					}) }}
+				</p>
+			</template>
+			<template #footer>
+				<UButton
+					color="neutral"
+					variant="ghost"
+					tabindex="0"
+					:label="t('cart.item.cancel')"
+					@click="deleteOpen = false"
+				/>
+				<UButton
+					color="error"
+					tabindex="0"
+					:label="t('cart.multi.delete')"
+					@click="onDelete"
+				/>
+			</template>
+		</UModal>
+	</div>
+</template>

package/app/components/cart/target/CartTargetModal.vue

@@ -0,0 +1,129 @@
+<script setup lang="ts">
+/**
+ * Target-cart dialog for the multiple-carts feature: after a single add
+ * the buyer picks which cart the item should live in (default: the
+ * active one). The "always use the active cart" option persists as a
+ * preference and suppresses the dialog — editable under Account →
+ * Ordering settings. This component also wires the org feature flag to
+ * the cart store's add interception.
+ */
+const { icon } = useIcons();
+const { t } = useI18n();
+const toast = useToast();
+const cart = useCartStore();
+const { settings } = useB2BContext();
+
+const multiCartEnabled = computed(() => settings.value?.cart.multipleCarts === true);
+
+// The store intercepts single adds only while the flag is on and the
+// buyer has not opted into "always active cart".
+watchEffect(() => {
+	cart.interceptAdds = multiCartEnabled.value && !cart.alwaysActiveCart;
+});
+
+const open = computed({
+	get: () => cart.pendingAdd !== null,
+	set: (value: boolean) => {
+		if (!value) {
+			cart.pendingAdd = null;
+		}
+	},
+});
+
+const selectedCartId = ref("");
+const alwaysActive = ref(false);
+
+watch(() => cart.pendingAdd, (pending) => {
+	if (pending) {
+		selectedCartId.value = cart.activeCartId;
+		alwaysActive.value = false;
+	}
+});
+
+function confirm(): void {
+	const pending = cart.pendingAdd;
+	if (!pending) {
+		return;
+	}
+	if (selectedCartId.value !== cart.activeCartId) {
+		const target = cart.cartSummaries.find(summary => summary.id === selectedCartId.value);
+		cart.moveLineToCart(pending.lineKey, selectedCartId.value);
+		toast.add({
+			title: t("cart.multi.modal.moved", { name: target?.name ?? "" }),
+			color: "success",
+			icon: icon("success"),
+			duration: 2000,
+		});
+	}
+	if (alwaysActive.value) {
+		cart.setAlwaysActiveCart(true);
+	}
+	cart.pendingAdd = null;
+}
+</script>
+
+<template>
+	<UModal
+		v-model:open="open"
+		:title="t('cart.multi.modal.title')"
+	>
+		<template #body>
+			<div class="space-y-4">
+				<p class="text-sm text-muted">
+					{{ t('cart.multi.modal.description', { name: cart.pendingAdd?.name ?? '' }) }}
+				</p>
+
+				<div class="space-y-2">
+					<button
+						v-for="summary in cart.cartSummaries"
+						:key="summary.id"
+						type="button"
+						tabindex="0"
+						class="w-full text-left p-3 rounded-lg border transition-colors cursor-pointer
+						focus:outline-none focus-visible:ring-2 focus-visible:ring-(--ui-primary)"
+						:class="selectedCartId === summary.id
+							? 'border-(--ui-primary) bg-primary/5 ring-1 ring-(--ui-primary)'
+							: 'border-(--ui-border) hover:border-(--ui-border-accented)'"
+						:aria-pressed="selectedCartId === summary.id"
+						@click="selectedCartId = summary.id"
+					>
+						<span class="flex items-center justify-between gap-3">
+							<span class="flex items-center gap-2 min-w-0">
+								<UIcon
+									:name="icon('cart')"
+									class="size-4 shrink-0"
+									:class="selectedCartId === summary.id ? 'text-primary' : 'text-dimmed'"
+								/>
+								<span class="text-sm font-medium text-highlighted truncate">{{ summary.name }}</span>
+								<UBadge
+									v-if="summary.active"
+									color="primary"
+									variant="subtle"
+									size="sm"
+									:label="t('cart.multi.activeBadge')"
+								/>
+							</span>
+							<span class="text-xs text-muted tabular-nums shrink-0">
+								{{ summary.positions }} · {{ summary.itemCount }}×
+							</span>
+						</span>
+					</button>
+				</div>
+
+				<UCheckbox
+					v-model="alwaysActive"
+					:label="t('cart.multi.modal.alwaysActive')"
+					:description="t('cart.multi.modal.alwaysActiveHint')"
+				/>
+			</div>
+		</template>
+		<template #footer>
+			<UButton
+				color="primary"
+				tabindex="0"
+				:label="t('cart.multi.modal.confirm')"
+				@click="confirm"
+			/>
+		</template>
+	</UModal>
+</template>

package/app/components/cart/view/CartApprovalsPanel.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import type { ApprovalLimitEvaluation } from "../../../interfaces/b2b";
+
+/**
+ * Approval limits evaluated against the current cart, rendered above the
+ * CTA. Budget-style limits show their utilization; exceeded limits explain
+ * the approval consequence (approver, escalation time frame).
+ */
+defineProps<{
+	limits: ApprovalLimitEvaluation[];
+}>();
+
+const { icon } = useIcons();
+const { t } = useI18n();
+const { formatCurrency } = useCartSummaryFormatting();
+
+function progress(limit: ApprovalLimitEvaluation): number | null {
+	if (limit.threshold === undefined || limit.actual === undefined || limit.threshold <= 0) {
+		return null;
+	}
+	return Math.min(100, Math.round((limit.actual / limit.threshold) * 100));
+}
+</script>
+
+<template>
+	<div
+		v-if="limits.length"
+		class="space-y-2.5"
+	>
+		<h3 class="text-xs font-semibold uppercase tracking-wide text-muted">
+			{{ t('cart.approvals.title') }}
+		</h3>
+		<div
+			v-for="limit in limits"
+			:key="limit.limitId"
+			class="rounded-lg border p-2.5 space-y-1.5"
+			:class="limit.status === 'exceeded'
+				? 'border-warning/40 bg-warning/5'
+				: 'border-default'"
+		>
+			<div class="flex items-center justify-between gap-2">
+				<span class="text-xs font-medium text-highlighted">{{ limit.label }}</span>
+				<UBadge
+					v-if="limit.status === 'exceeded'"
+					color="warning"
+					variant="subtle"
+					size="sm"
+					:label="t('cart.approvals.exceeded')"
+				/>
+				<UIcon
+					v-else
+					:name="icon('success')"
+					class="size-4 text-success"
+				/>
+			</div>
+
+			<template v-if="progress(limit) !== null">
+				<div class="h-1.5 rounded-full bg-elevated overflow-hidden">
+					<div
+						class="h-full rounded-full transition-all"
+						:class="limit.status === 'exceeded' ? 'bg-warning' : 'bg-primary'"
+						:style="{ width: `${progress(limit)}%` }"
+					/>
+				</div>
+				<p class="text-[0.6875rem] text-muted">
+					{{ t('cart.approvals.usage', {
+						actual: formatCurrency(limit.actual ?? 0),
+						threshold: formatCurrency(limit.threshold ?? 0),
+					}) }}
+					<template v-if="limit.exceededBy">
+						· {{ t('cart.approvals.exceededBy', { amount: formatCurrency(limit.exceededBy) }) }}
+					</template>
+				</p>
+			</template>
+
+			<p
+				v-if="limit.status === 'exceeded'"
+				class="text-[0.6875rem] text-muted"
+			>
+				{{ limit.approval.required
+					? t('cart.approvals.approvalRequired', {
+						approver: limit.approval.approverName ?? t('cart.approvals.unknownApprover'),
+						hours: limit.approval.timeLimitHours ?? 48,
+					})
+					: t('cart.approvals.infoOnly') }}
+			</p>
+		</div>
+	</div>
+</template>