@revenexx/cover 0.1.0

package/app/components/checkout/onepage/CheckoutSummarySection.vue

@@ -0,0 +1,211 @@
+<script setup lang="ts">
+import CartApprovalsPanel from "../../cart/view/CartApprovalsPanel.vue";
+
+const { icon } = useIcons();
+
+const { t } = useI18n();
+const checkout = useCheckoutOnePage();
+const {
+	form, fieldErrors, canSubmit, submitting, submitError,
+	validateField, submitOrder, submitRequisition,
+} = checkout;
+const { role, workflows } = useB2BContext();
+
+const isRequester = computed(() => role.value === "requester");
+const selectedWorkflowId = useState<string | null>("cart-selected-workflow", () => null);
+const { to } = useAppUrl();
+const cart = useCartStore();
+const { formatCurrency } = useCartSummaryFormatting();
+
+// The checkout shows the same server-calculated document as the cart,
+// recalculated when the delivery method changes (spec: shipping can flip
+// limits). The cart itself is read-only inside the checkout.
+const deliveryMethod = computed(() => form.value.deliveryMethod);
+const { calculation, pending: calculating } = useCartCalculation({
+	orchestrate: true,
+	deliveryMethod,
+});
+
+const totals = computed(() =>
+	(calculation.value?.totals ?? []).filter(row => row.alwaysVisible || row.amount !== 0),
+);
+
+async function handlePlaceOrder() {
+	// Requesters submit a requisition into their workflow — the CTA stays
+	// active without the order terms (the orderer accepts them later).
+	if (isRequester.value) {
+		const workflowId = selectedWorkflowId.value ?? workflows.value[0]?.id;
+		if (!workflowId) {
+			return;
+		}
+		const requisitionId = await submitRequisition(workflowId);
+		if (requisitionId) {
+			await navigateTo(to("/checkout/confirmation", { id: requisitionId, type: "requisition" }));
+		}
+		return;
+	}
+
+	validateField("acceptedTerms");
+	const result = await submitOrder();
+	if (result) {
+		await navigateTo(to("/checkout/confirmation", {
+			id: result.orderId,
+			...(result.approvalRequired
+				? { type: "approval", approvers: result.approvers.join(",") }
+				: {}),
+		}));
+	}
+}
+</script>
+
+<template>
+	<div class="bg-(--ui-bg) border border-(--ui-border) rounded-xl p-6 space-y-5">
+		<h2 class="text-lg font-semibold text-highlighted">
+			{{ t('onepage.sections.summary') }}
+		</h2>
+		<USeparator />
+
+		<!-- Submit error -->
+		<UAlert
+			v-if="submitError"
+			color="error"
+			variant="soft"
+			:description="submitError"
+			:icon="icon('alert')"
+		/>
+
+		<!-- Read-only cart (spec: Warenkorb im Checkout) -->
+		<ul class="space-y-4 divide-y divide-(--ui-border)">
+			<li
+				v-for="(item, index) in cart.items"
+				:key="cart.keyOf(item)"
+				class="flex items-start gap-3 pt-4 first:pt-0"
+			>
+				<img
+					v-if="item.image"
+					:src="item.image"
+					:alt="item.name"
+					class="w-12 h-12 object-cover rounded-md shrink-0 border border-(--ui-border)"
+				>
+				<div class="flex-1 min-w-0 space-y-0.5">
+					<p class="text-sm font-medium text-highlighted truncate">
+						{{ item.name }}
+					</p>
+					<p class="text-xs text-muted">
+						{{ item.sku }}
+						<template v-if="item.customSku">
+							· {{ item.customSku }}
+						</template>
+					</p>
+					<p
+						v-if="item.positionTexts?.length"
+						class="text-xs text-muted italic truncate"
+					>
+						{{ item.positionTexts.join(' · ') }}
+					</p>
+					<div class="flex items-center justify-between gap-2 pt-0.5">
+						<span class="text-sm text-muted">
+							{{ calculation?.lines[index]?.adjustedQuantity ?? item.quantity }}×
+						</span>
+						<template v-if="calculation?.lines[index]?.priceLabel">
+							<UBadge
+								color="neutral"
+								variant="subtle"
+								size="sm"
+								:label="calculation.lines[index]!.priceLabel!.label"
+							/>
+						</template>
+						<p
+							v-else
+							class="text-sm font-medium text-highlighted shrink-0"
+						>
+							{{ formatCurrency(calculation?.lines[index]?.lineTotal
+								?? cart.getEffectivePrice(item.id) * item.quantity) }}
+						</p>
+					</div>
+				</div>
+			</li>
+		</ul>
+
+		<div
+			class="border-t border-(--ui-border) pt-4 space-y-2"
+			:class="calculating ? 'opacity-60' : ''"
+		>
+			<div
+				v-for="(row, index) in totals"
+				:key="`${row.key}-${index}`"
+				class="flex justify-between text-sm"
+				:class="row.key === 'total'
+					? 'text-base font-semibold border-t border-(--ui-border) pt-2 mt-2 text-highlighted'
+					: ''"
+			>
+				<span :class="row.key === 'total' ? 'text-highlighted' : 'text-muted'">{{ row.label }}</span>
+				<span class="text-highlighted tabular-nums">{{ formatCurrency(row.amount) }}</span>
+			</div>
+		</div>
+
+		<!-- Approval limits in the checkout summary -->
+		<CartApprovalsPanel :limits="calculation?.approvalLimits ?? []" />
+
+		<!-- Promo code -->
+		<div class="flex gap-2">
+			<UInput
+				v-model="form.promoCode"
+				:placeholder="t('onepage.summary.promoCodePlaceholder')"
+				class="flex-1"
+			/>
+			<UButton variant="outline">
+				{{ t('onepage.summary.applyPromo') }}
+			</UButton>
+		</div>
+
+		<div class="border-t border-(--ui-border) pt-4 space-y-4">
+			<!-- Terms checkbox (orders only — requisitions are accepted by the orderer) -->
+			<div v-if="!isRequester">
+				<UCheckbox
+					:model-value="form.acceptedTerms"
+					@update:model-value="form.acceptedTerms = $event as boolean;
+						validateField('acceptedTerms')"
+				>
+					<template #label>
+						<i18n-t keypath="onepage.summary.termsText">
+							<template #link>
+								<a
+									href="#"
+									class="underline hover:no-underline"
+								>{{ t('onepage.summary.termsLink') }}</a>
+							</template>
+						</i18n-t>
+					</template>
+				</UCheckbox>
+				<p
+					v-if="fieldErrors.acceptedTerms"
+					class="text-sm text-error-500 mt-1 ml-6"
+				>
+					{{ fieldErrors.acceptedTerms }}
+				</p>
+			</div>
+
+			<!-- Place order / submit requisition -->
+			<UButton
+				block
+				:disabled="isRequester ? submitting : !canSubmit"
+				:loading="submitting"
+				@click="handlePlaceOrder"
+			>
+				{{ isRequester ? t('onepage.summary.submitRequisition') : t('onepage.summary.placeOrder') }}
+			</UButton>
+
+			<!-- Back to cart -->
+			<UButton
+				block
+				variant="ghost"
+				color="neutral"
+				:to="to('/cart')"
+				:icon="icon('arrow-left')"
+			>
+				{{ t('onepage.summary.backToCart') }}
+			</UButton>
+		</div>
+	</div>
+</template>

package/app/components/checkout/onepage/CheckoutWorkflowPanel.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+/**
+ * Requester checkout: shows which workflow the requisition enters and who
+ * acts next (all users of the following workflow step).
+ */
+const props = defineProps<{
+	workflowId: string | null;
+}>();
+
+const { icon } = useIcons();
+const { t } = useI18n();
+const { workflows } = useB2BContext();
+
+const workflow = computed(() =>
+	workflows.value.find(wf => wf.id === props.workflowId) ?? workflows.value[0] ?? null,
+);
+
+const nextActors = computed(() => {
+	// The requisition starts in step 1 — the next actors are step 2's users
+	// (or the orderers when the workflow has a single request step).
+	const steps = workflow.value?.steps ?? [];
+	const next = steps[1] ?? steps[steps.length - 1];
+	return next?.users.map(u => u.name) ?? [];
+});
+</script>
+
+<template>
+	<UAlert
+		v-if="workflow"
+		color="info"
+		variant="soft"
+		:icon="icon('route')"
+		:title="t('onepage.workflow.title', { name: workflow.name })"
+		:description="nextActors.length
+			? t('onepage.workflow.nextActors', { names: nextActors.join(', ') })
+			: undefined"
+	/>
+</template>

package/app/components/layout/AppLogo.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+const { appName, localizeAppName, logo } = useAppConfig();
+const { t } = useI18n();
+const { to: appUrl } = useAppUrl();
+
+const displayName = computed(() => localizeAppName ? t("common.appName") : appName);
+</script>
+
+<template>
+	<NuxtLink
+		:to="appUrl('/')"
+		tabindex="0"
+		:aria-label="t('nav.homeAriaLabel')"
+	>
+		<img
+			:src="logo"
+			:alt="displayName"
+			class="w-auto h-6"
+		>
+	</NuxtLink>
+</template>

package/app/components/layout/footer/Footer.vue

@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import { footerLinks, legalLinks, shopContact } from "../../../config/navigation";
+
+const { icon } = useIcons();
+
+const { t } = useI18n();
+const year = new Date().getFullYear();
+</script>
+
+<template>
+	<footer class="bg-(--ui-color-primary-50) dark:bg-(--ui-color-primary-500)">
+		<!-- Main body: logo/tagline + link columns -->
+		<div class="max-w-(--ui-container) mx-auto w-full px-4 sm:px-6 lg:px-8 py-16">
+			<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-x-8 gap-y-12">
+				<!-- Logo + tagline + contact -->
+				<div class="flex flex-col gap-3">
+					<LayoutAppLogo />
+					<p class="text-sm/6 text-muted dark:text-white/90">
+						{{ t('footer.tagline') }}
+					</p>
+					<address class="not-italic flex flex-col gap-2.5 text-sm">
+						<span class="flex items-start gap-2">
+							<UIcon
+								:name="icon('location')"
+								class="size-4 mt-0.5 shrink-0 text-(--ui-primary)"
+							/>
+							<span class="text-muted dark:text-white/90">{{ shopContact.address }}</span>
+						</span>
+						<a
+							:href="`tel:${shopContact.phone.replace(/\s/g, '')}`"
+							class="flex items-center gap-2 text-sm text-muted dark:text-white/90
+							hover:text-default dark:hover:text-white transition-colors"
+						>
+							<UIcon
+								:name="icon('phone')"
+								class="size-4 shrink-0 text-(--ui-primary)"
+							/>
+							{{ shopContact.phone }}
+						</a>
+						<a
+							:href="`mailto:${shopContact.email}`"
+							class="flex items-center gap-2 text-sm text-muted dark:text-white/90
+							hover:text-default dark:hover:text-white transition-colors"
+						>
+							<UIcon
+								:name="icon('mail')"
+								class="size-4 shrink-0 text-(--ui-primary)"
+							/>
+							{{ shopContact.email }}
+						</a>
+					</address>
+				</div>
+
+				<!-- Link columns -->
+				<div
+					v-for="group in footerLinks"
+					:key="group.heading"
+				>
+					<h3
+						class="text-xs font-semibold uppercase tracking-wider
+						text-dimmed dark:text-white/70 mb-4"
+					>
+						{{ group.heading }}
+					</h3>
+					<ul
+					role="list"
+					class="flex flex-col gap-2.5"
+				>
+						<li
+							v-for="link in group.links"
+							:key="link.to"
+						>
+							<NuxtLink
+								:to="link.to"
+								tabindex="0"
+								class="text-sm text-muted dark:text-white/90
+									hover:text-default dark:hover:text-white transition-colors"
+							>
+								{{ link.label }}
+							</NuxtLink>
+						</li>
+					</ul>
+				</div>
+			</div>
+		</div>
+
+		<!-- Bottom bar -->
+		<div class="border-t border-(--ui-border) dark:border-white/20">
+			<div
+				class="max-w-(--ui-container) mx-auto w-full px-4 sm:px-6 lg:px-8 py-5
+				flex flex-col md:flex-row items-start md:items-center justify-between gap-4"
+			>
+				<!-- Copyright + locale selector (discoverable in header AND footer) -->
+				<div class="flex flex-col sm:flex-row sm:items-center gap-x-6 gap-y-2">
+					<p class="text-xs text-dimmed dark:text-white/70">
+						{{ t('footer.copyright', { year }) }}
+					</p>
+					<LayoutHeaderLocaleSwitcher
+						class="text-xs text-dimmed dark:text-white/70 hover:text-default dark:hover:text-white"
+					/>
+				</div>
+
+				<!-- Legal links -->
+				<nav
+					class="flex flex-wrap gap-x-5 gap-y-2"
+					aria-label="Legal"
+				>
+					<NuxtLink
+						v-for="link in legalLinks"
+						:key="link.to"
+						:to="link.to"
+						tabindex="0"
+						class="text-xs text-dimmed dark:text-white/70
+							hover:text-default dark:hover:text-white transition-colors"
+					>
+						{{ link.label }}
+					</NuxtLink>
+				</nav>
+
+				<!-- Social icons -->
+				<div class="flex items-center gap-1">
+					<UButton
+						to="https://linkedin.com"
+						target="_blank"
+						icon="i-simple-icons-linkedin"
+						aria-label="LinkedIn"
+						color="primary"
+						variant="ghost"
+						size="sm"
+						tabindex="0"
+						class="dark:text-white/90 dark:hover:text-white"
+					/>
+					<UButton
+						to="https://x.com"
+						target="_blank"
+						icon="i-simple-icons-x"
+						aria-label="X / Twitter"
+						color="primary"
+						variant="ghost"
+						size="sm"
+						tabindex="0"
+						class="dark:text-white/90 dark:hover:text-white"
+					/>
+				</div>
+			</div>
+		</div>
+	</footer>
+</template>

package/app/components/layout/header/AppBar.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+const { icon } = useIcons();
+
+const { t } = useI18n();
+const localePath = useLocalePath();
+const isMenuOpen = ref(false);
+
+// Symmetric grid: flexible side columns keep the wide search column truly
+// centered in the header, independent of logo/action widths.
+const headerUi = {
+	container: [
+		"grid grid-cols-[1fr_minmax(0,46rem)_1fr] items-center gap-4 lg:gap-6",
+		"h-(--ui-header-height)",
+		"px-4 sm:px-6 lg:px-8",
+		"max-w-(--ui-container) mx-auto w-full",
+	].join(" "),
+	left: "flex items-center gap-2 justify-self-start",
+	center: "w-full min-w-0 flex items-center",
+	// -mr-2.5 cancels the action items' own px-2.5 hover padding so the last
+	// item's text ends flush with the topbar/main-nav edge below and above.
+	right: "flex items-center justify-end gap-1.5 -mr-2.5",
+};
+
+let mq: MediaQueryList | null = null;
+const closeMenu = (e: MediaQueryListEvent) => {
+	if (e.matches) {
+		isMenuOpen.value = false;
+	}
+};
+
+onMounted(() => {
+	mq = window.matchMedia("(min-width: 768px)");
+	mq.addEventListener("change", closeMenu);
+});
+
+onUnmounted(() => mq?.removeEventListener("change", closeMenu));
+
+const { navigateToSearch } = useSearch();
+</script>
+
+<template>
+	<UHeader
+		v-model:open="isMenuOpen"
+		:toggle="{ color: 'primary', class: 'md:hidden' }"
+		:ui="headerUi"
+	>
+		<template #left>
+			<LayoutAppLogo class="shrink-0" />
+		</template>
+
+		<template #default>
+			<div class="hidden md:flex w-full">
+				<UiFormsSearchInput
+					class="w-full"
+					@search="navigateToSearch"
+				/>
+			</div>
+		</template>
+
+		<template #right>
+			<LayoutHeaderActionItem
+				:icon="icon('direct-order')"
+				:label="t('topbar.directOrder')"
+				:to="localePath('/account/direct-order')"
+				class="hidden md:flex"
+			/>
+			<AccountMenu />
+			<CartButton />
+		</template>
+
+		<template #body>
+			<LayoutHeaderMobileMenu />
+		</template>
+	</UHeader>
+</template>

package/app/components/layout/header/CategoryNav.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+const { categoryNavItems } = useCategories();
+const navEl = ref<HTMLElement | null>(null);
+
+let blockedTrigger: HTMLElement | null = null;
+
+function blockMoveCapture(e: PointerEvent) {
+	if (e.pointerType === "mouse") {
+		e.stopImmediatePropagation();
+	}
+}
+
+function clearBlock() {
+	if (!blockedTrigger) {
+		return;
+	}
+	blockedTrigger.removeEventListener("pointermove", blockMoveCapture, true);
+	blockedTrigger.dispatchEvent(
+		new PointerEvent("pointerleave", { bubbles: false, pointerType: "mouse" }),
+	);
+	blockedTrigger = null;
+	document.removeEventListener("mousemove", unblockIfLeft);
+}
+
+function unblockIfLeft(e: MouseEvent) {
+	if (!blockedTrigger) {
+		return;
+	}
+	const rect = blockedTrigger.getBoundingClientRect();
+	const outside = e.clientX < rect.left || e.clientX > rect.right
+		|| e.clientY < rect.top || e.clientY > rect.bottom;
+	if (outside) {
+		clearBlock();
+	}
+}
+
+function onPointerDownCapture(e: PointerEvent) {
+	if (e.pointerType !== "mouse") {
+		return;
+	}
+	const trigger = (e.target as Element)
+		.closest("[data-navigation-menu-trigger]") as HTMLElement | null;
+	if (!trigger || trigger.getAttribute("data-state") !== "open") {
+		return;
+	}
+	if (blockedTrigger && blockedTrigger !== trigger) {
+		clearBlock();
+	}
+	if (blockedTrigger === trigger) {
+		return;
+	}
+	blockedTrigger = trigger;
+	trigger.addEventListener("pointermove", blockMoveCapture, true);
+	trigger.dispatchEvent(
+		new PointerEvent("pointerleave", { bubbles: false, pointerType: "mouse" }),
+	);
+	document.addEventListener("mousemove", unblockIfLeft);
+}
+
+// Trailing icon clicks must never trigger link navigation regardless of menu state.
+function onTrailingClickCapture(e: MouseEvent) {
+	const trailing = (e.target as Element).closest("[data-slot='linkTrailing']");
+	if (trailing) {
+		e.preventDefault();
+	}
+}
+
+onMounted(() => {
+	navEl.value?.addEventListener("pointerdown", onPointerDownCapture, true);
+	navEl.value?.addEventListener("click", onTrailingClickCapture, true);
+});
+onUnmounted(() => {
+	navEl.value?.removeEventListener("pointerdown", onPointerDownCapture, true);
+	navEl.value?.removeEventListener("click", onTrailingClickCapture, true);
+	clearBlock();
+});
+</script>
+
+<template>
+	<div class="border-b border-(--ui-border) hidden md:block">
+		<div
+			ref="navEl"
+			class="px-4 sm:px-6 lg:px-8 xl:max-w-screen-xl xl:mx-auto"
+		>
+			<UNavigationMenu
+				:items="categoryNavItems"
+				orientation="horizontal"
+				aria-label="Product categories"
+				:ui="{ linkLeadingIcon: 'text-(--ui-primary)', childLinkIcon: 'text-(--ui-primary)' }"
+			/>
+		</div>
+	</div>
+</template>

package/app/components/layout/header/HeaderActionItem.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+/**
+ * Two-line header action (icon + title + subline), as introduced by the
+ * relation prototype header. Renders as a link when `to` is set, otherwise
+ * as a button (e.g. the cart trigger). Pass a custom icon via the #icon
+ * slot or a cover icon token via the `icon` prop. The text collapses on
+ * small screens, leaving the icon.
+ */
+const props = defineProps<{
+	icon?: string;
+	label: string;
+	sublabel?: string;
+	to?: string;
+}>();
+
+defineEmits<{ click: [] }>();
+
+defineSlots<{ icon?(): unknown; trailing?(): unknown }>();
+
+const { icon: resolveIcon } = useIcons();
+const resolvedIcon = computed(() => (props.icon ? resolveIcon(props.icon) : undefined));
+
+const itemClasses = `group flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-left cursor-pointer
+focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ui-primary)`;
+</script>
+
+<template>
+	<NuxtLink
+		v-if="to"
+		:to="to"
+		tabindex="0"
+		:class="itemClasses"
+	>
+		<span class="flex items-center shrink-0 text-primary">
+			<slot name="icon">
+				<UIcon
+					v-if="resolvedIcon"
+					:name="resolvedIcon"
+					class="size-6"
+				/>
+			</slot>
+		</span>
+		<span class="hidden xl:flex items-center gap-1.5 text-sm/5 whitespace-nowrap">
+			<span class="flex flex-col">
+				<span class="text-highlighted group-hover:underline underline-offset-4 decoration-2">{{ label }}</span>
+				<span
+					v-if="sublabel"
+					class="text-muted"
+				>{{ sublabel }}</span>
+			</span>
+			<slot name="trailing" />
+		</span>
+	</NuxtLink>
+	<button
+		v-else
+		type="button"
+		tabindex="0"
+		:class="itemClasses"
+		@click="$emit('click')"
+	>
+		<span class="flex items-center shrink-0 text-primary">
+			<slot name="icon">
+				<UIcon
+					v-if="resolvedIcon"
+					:name="resolvedIcon"
+					class="size-6"
+				/>
+			</slot>
+		</span>
+		<span class="hidden xl:flex items-center gap-1.5 text-sm/5 whitespace-nowrap">
+			<span class="flex flex-col">
+				<span class="text-highlighted group-hover:underline underline-offset-4 decoration-2">{{ label }}</span>
+				<span
+					v-if="sublabel"
+					class="text-muted"
+				>{{ sublabel }}</span>
+			</span>
+			<slot name="trailing" />
+		</span>
+	</button>
+</template>