@revenexx/cover 0.1.0

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

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+/**
+ * Sticky cart list header: three-state multi-selector and the bulk action
+ * bar (visible from one selected position). The bulk actions mirror the
+ * per-position functions (spec: Mehrfach-Aktionen).
+ */
+const { icon } = useIcons();
+const { t } = useI18n();
+const cart = useCartStore();
+const selection = useCartSelection();
+const actions = useCartActions();
+const { settings, role } = useB2BContext();
+
+const showCostCenter = computed(() =>
+	Boolean(role.value) && settings.value?.costCenters.enabled,
+);
+
+function bulkDelete(): void {
+	cart.removeByKeys(selection.selected.value);
+	selection.clear();
+}
+</script>
+
+<template>
+	<div
+		class="sticky top-(--ui-header-height) z-10 -mx-4 md:-mx-5 px-4 md:px-5 py-2 rounded-t-xl
+		bg-(--ui-bg)/95 backdrop-blur-sm border-b border-(--ui-border)
+		flex flex-wrap items-center gap-2"
+	>
+		<UCheckbox
+			:model-value="selection.someSelected.value ? 'indeterminate' : selection.allSelected.value"
+			:aria-label="t('cart.selection.selectAll')"
+			tabindex="0"
+			@update:model-value="selection.toggleAll()"
+		/>
+		<span class="text-xs text-muted">
+			{{ selection.selected.value.length > 0
+				? t('cart.selection.count', { count: selection.selected.value.length })
+				: t('cart.selection.selectAll') }}
+		</span>
+
+		<div
+			v-if="selection.selected.value.length > 0"
+			class="flex flex-wrap items-center gap-1 ml-auto"
+		>
+			<UButton
+				v-if="showCostCenter"
+				:icon="icon('hash')"
+				color="neutral"
+				variant="ghost"
+				size="xs"
+				tabindex="0"
+				:label="t('cart.bulk.editCostCenter')"
+				@click="actions.open('cost-center', selection.selected.value)"
+			/>
+			<UButton
+				:icon="icon('edit')"
+				color="neutral"
+				variant="ghost"
+				size="xs"
+				tabindex="0"
+				:label="t('cart.bulk.editTexts')"
+				@click="actions.open('texts', selection.selected.value)"
+			/>
+			<UButton
+				v-if="role"
+				:icon="icon('bookmark')"
+				color="neutral"
+				variant="ghost"
+				size="xs"
+				tabindex="0"
+				:label="t('cart.bulk.saveToList')"
+				@click="actions.open('save', selection.selected.value)"
+			/>
+			<UButton
+				:icon="icon('delete')"
+				color="error"
+				variant="ghost"
+				size="xs"
+				tabindex="0"
+				:label="t('cart.bulk.deletePositions')"
+				@click="bulkDelete"
+			/>
+		</div>
+	</div>
+</template>

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

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import CartPosition from "../position/CartPosition.vue";
+import type { CalculatedCartLine } from "../../../interfaces/cart-calculation";
+import type { CartItem } from "../../../interfaces/cart-item";
+
+/**
+ * Sortable list of cart positions within one scope (free items or one
+ * requisition). Native HTML5 drag & drop on the position drag handles;
+ * positions never leave their scope (spec).
+ */
+const props = defineProps<{
+	items: CartItem[];
+	linesByKey: Map<string, CalculatedCartLine>;
+	/** requisitionId, or undefined for free items. */
+	scope?: string;
+	readonly?: boolean;
+}>();
+
+const cart = useCartStore();
+
+const draggingIndex = ref<number | null>(null);
+const dragOverIndex = ref<number | null>(null);
+
+// Drags must start on the position's drag handle: a mousedown there arms
+// the next dragstart; anywhere else the drag is suppressed (keeps text
+// selection and the quantity input usable inside draggable rows).
+const dragArmed = ref(false);
+
+function onMouseDown(event: MouseEvent): void {
+	dragArmed.value = Boolean((event.target as HTMLElement).closest(".drag-handle"));
+}
+
+function onDragStart(event: DragEvent, index: number): void {
+	if (!dragArmed.value) {
+		event.preventDefault();
+		return;
+	}
+	draggingIndex.value = index;
+	event.dataTransfer?.setData("text/plain", String(index));
+	if (event.dataTransfer) {
+		event.dataTransfer.effectAllowed = "move";
+	}
+}
+
+function onDragOver(event: DragEvent, index: number): void {
+	if (draggingIndex.value === null) {
+		return;
+	}
+	event.preventDefault();
+	dragOverIndex.value = index;
+}
+
+function onDrop(index: number): void {
+	if (draggingIndex.value !== null && draggingIndex.value !== index) {
+		cart.moveWithinScope(props.scope, draggingIndex.value, index);
+	}
+	draggingIndex.value = null;
+	dragOverIndex.value = null;
+}
+
+function onDragEnd(): void {
+	draggingIndex.value = null;
+	dragOverIndex.value = null;
+	dragArmed.value = false;
+}
+</script>
+
+<template>
+	<ul class="divide-y divide-(--ui-border) list-none p-0 m-0">
+		<li
+			v-for="(item, index) in items"
+			:key="cart.keyOf(item)"
+			:draggable="!readonly"
+			class="transition-shadow"
+			:class="[
+				dragOverIndex === index && draggingIndex !== index
+					? 'ring-2 ring-(--ui-primary) rounded-lg'
+					: '',
+				draggingIndex === index ? 'opacity-50' : '',
+			]"
+			@mousedown="onMouseDown"
+			@dragstart="onDragStart($event, index)"
+			@dragover="onDragOver($event, index)"
+			@drop="onDrop(index)"
+			@dragend="onDragEnd"
+		>
+			<CartPosition
+				:item="item"
+				:line="linesByKey.get(cart.keyOf(item)) ?? null"
+				:readonly="readonly"
+			/>
+		</li>
+	</ul>
+</template>

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

@@ -0,0 +1,254 @@
+<script setup lang="ts">
+import CartApprovalsPanel from "./CartApprovalsPanel.vue";
+import CartWorkflowPickerModal from "../actions/CartWorkflowPickerModal.vue";
+
+/**
+ * Cart summary 2.0: the calculated totals block in document order, the
+ * limits panel, the role-aware CTA and the secondary cart actions
+ * (export, print, clear). Sticky on desktop.
+ */
+const { icon } = useIcons();
+const { t } = useI18n();
+const { to } = useAppUrl();
+const cart = useCartStore();
+const actions = useCartActions();
+const { calculation, pending } = useCartCalculation();
+const { settings, role, workflows } = useB2BContext();
+const { formatCurrency } = useCartSummaryFormatting();
+
+const totals = computed(() =>
+	(calculation.value?.totals ?? []).filter(row => row.alwaysVisible || row.amount !== 0),
+);
+
+const isRequester = computed(() => role.value === "requester");
+const orderable = computed(() => calculation.value?.orderable ?? true);
+
+/* ---- CTA (spec 5 / 5a) -------------------------------------------- */
+const workflowModalOpen = ref(false);
+const noWorkflowModalOpen = ref(false);
+
+async function onCheckout(): Promise<void> {
+	if (!isRequester.value) {
+		await navigateTo(to("/checkout"));
+		return;
+	}
+	// Requesters continue into a requisition, never a direct order.
+	if (workflows.value.length === 0) {
+		noWorkflowModalOpen.value = true;
+		return;
+	}
+	if (workflows.value.length === 1) {
+		await continueWithWorkflow(workflows.value[0]!.id);
+		return;
+	}
+	workflowModalOpen.value = true;
+}
+
+const selectedWorkflowId = useState<string | null>("cart-selected-workflow", () => null);
+
+async function continueWithWorkflow(workflowId: string): Promise<void> {
+	selectedWorkflowId.value = workflowId;
+	workflowModalOpen.value = false;
+	await navigateTo(to("/checkout"));
+}
+
+function printCart(): void {
+	window.print();
+}
+
+/* ---- spend incentives (revenue nudges) ------------------------------- */
+const subtotalAmount = computed(() =>
+	calculation.value?.totals.find(row => row.key === "subtotal")?.amount ?? 0);
+
+const openIncentive = computed(() =>
+	(calculation.value?.incentives ?? []).find(incentive => !incentive.reached) ?? null);
+
+const reachedIncentives = computed(() =>
+	(calculation.value?.incentives ?? []).filter(incentive => incentive.reached));
+
+const incentiveProgress = computed(() => {
+	if (!openIncentive.value) {
+		return 0;
+	}
+	return Math.min(100, Math.round((subtotalAmount.value / openIncentive.value.threshold) * 100));
+});
+
+const TRUST_ITEMS = [
+	{ token: "delivery", key: "cart.trust.delivery" },
+	{ token: "payment", key: "cart.trust.invoice" },
+	{ token: "phone", key: "cart.trust.support" },
+] as const;
+</script>
+
+<template>
+	<div class="space-y-4">
+		<div class="border border-(--ui-border) rounded-xl p-4 md:p-5 space-y-4">
+			<h2 class="text-lg font-semibold text-highlighted">
+				{{ t('cart.page.summaryTitle') }}
+			</h2>
+
+			<!-- Spend incentives: progress to the next threshold -->
+			<div
+				v-if="openIncentive || reachedIncentives.length"
+				class="space-y-2 print:hidden"
+			>
+				<div
+					v-for="incentive in reachedIncentives"
+					:key="incentive.key"
+					class="flex items-center gap-1.5 text-xs text-success"
+				>
+					<UIcon
+						:name="icon('success')"
+						class="size-4 shrink-0"
+					/>
+					{{ t('cart.boost.reached', { label: incentive.label }) }}
+				</div>
+				<template v-if="openIncentive">
+					<p class="text-xs text-muted">
+						{{ t('cart.boost.missing', {
+							amount: formatCurrency(openIncentive.missing),
+							label: openIncentive.label,
+						}) }}
+					</p>
+					<div class="h-1.5 rounded-full bg-elevated overflow-hidden">
+						<div
+							class="h-full rounded-full bg-primary w-(--incentive-progress) transition-all"
+							:style="{ '--incentive-progress': `${incentiveProgress}%` }"
+						/>
+					</div>
+				</template>
+			</div>
+
+			<dl
+				v-if="totals.length"
+				class="flex flex-col gap-2.5 m-0"
+				:class="pending ? 'opacity-60' : ''"
+			>
+				<div
+					v-for="(row, index) in totals"
+					:key="`${row.key}-${index}`"
+					class="flex justify-between gap-3 text-sm"
+					:class="row.key === 'total'
+						? 'font-semibold text-highlighted border-t border-(--ui-border) pt-2.5'
+						: 'text-muted'"
+				>
+					<dt class="flex items-center gap-1.5">
+						{{ row.label }}
+						<UTooltip
+							v-if="row.key === 'min-order-value' && row.meta?.threshold"
+							:text="t('cart.summary.minOrderHint', { threshold: formatCurrency(row.meta.threshold) })"
+						>
+							<UIcon
+								:name="icon('info')"
+								class="size-3.5 text-dimmed"
+							/>
+						</UTooltip>
+					</dt>
+					<dd class="m-0 tabular-nums">
+						{{ formatCurrency(row.amount) }}
+					</dd>
+				</div>
+			</dl>
+			<USkeleton
+				v-else
+				class="h-24 w-full"
+			/>
+
+			<CartApprovalsPanel :limits="calculation?.approvalLimits ?? []" />
+
+			<UButton
+				color="primary"
+				variant="solid"
+				size="lg"
+				class="w-full justify-center mt-2"
+				:disabled="!orderable"
+				:loading="pending"
+				:label="isRequester ? t('cart.cta.requisition') : t('cart.cta.checkout')"
+				tabindex="0"
+				@click="onCheckout"
+			/>
+			<p
+				v-if="!orderable"
+				class="text-xs text-muted text-center"
+			>
+				{{ t('cart.cta.notOrderable') }}
+			</p>
+
+			<!-- Trust: the promises that close B2B orders -->
+			<ul
+				role="list"
+				class="space-y-1.5 pt-1 border-t border-(--ui-border) print:hidden"
+			>
+				<li
+					v-for="item in TRUST_ITEMS"
+					:key="item.token"
+					class="flex items-start gap-2 text-xs text-muted pt-1"
+				>
+					<UIcon
+						:name="icon(item.token)"
+						class="size-4 shrink-0 text-primary"
+					/>
+					{{ t(item.key) }}
+				</li>
+			</ul>
+		</div>
+
+		<!-- Secondary actions -->
+		<div class="flex flex-wrap items-center justify-center gap-1 print:hidden">
+			<UButton
+				v-if="settings?.cart.exportEnabled"
+				:icon="icon('upload')"
+				color="neutral"
+				variant="ghost"
+				size="xs"
+				tabindex="0"
+				:label="t('cart.export.action')"
+				@click="actions.open('export', [])"
+			/>
+			<UButton
+				v-if="settings?.cart.exportEnabled"
+				:icon="icon('file')"
+				color="neutral"
+				variant="ghost"
+				size="xs"
+				tabindex="0"
+				:label="t('cart.actions.print')"
+				@click="printCart"
+			/>
+			<UButton
+				:icon="icon('delete')"
+				color="neutral"
+				variant="ghost"
+				size="xs"
+				tabindex="0"
+				:label="t('cart.actions.clear')"
+				@click="cart.clearCart()"
+			/>
+		</div>
+
+		<CartWorkflowPickerModal
+			v-model:open="workflowModalOpen"
+			:workflows="workflows"
+			@select="continueWithWorkflow"
+		/>
+
+		<UModal
+			v-model:open="noWorkflowModalOpen"
+			:title="t('cart.workflow.noneTitle')"
+		>
+			<template #body>
+				<p class="text-sm text-muted">
+					{{ t('cart.workflow.noneDescription') }}
+				</p>
+			</template>
+			<template #footer>
+				<UButton
+					color="primary"
+					tabindex="0"
+					:label="t('cart.workflow.noneConfirm')"
+					@click="noWorkflowModalOpen = false"
+				/>
+			</template>
+		</UModal>
+	</div>
+</template>