@revenexx/cover 0.1.0

package/app/components/category/view/GridView.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import type { ProductList } from "../../../interfaces/product-list";
+
+const props = defineProps<{
+	product: ProductList;
+}>();
+
+const { t } = useI18n();
+const { url, getImage } = useProductCard(() => props.product);
+const { isOutOfStock, hasPrice, addToCart } = useProductCardActions(() => props.product);
+</script>
+
+<template>
+	<UCard
+		class="flex flex-col overflow-hidden"
+		:ui="{ body: 'flex-1' }"
+	>
+		<template #header>
+			<NuxtLink
+				:to="url"
+				:aria-label="`View ${product.name}`"
+				tabindex="0"
+				class="block focus-visible:outline-none focus-visible:ring-2
+				focus-visible:ring-(--ui-primary)"
+			>
+				<div class="h-50 flex items-center justify-center">
+					<img
+						:src="getImage(product.image)"
+						:alt="product.name"
+						class="max-h-full max-w-full object-contain"
+					>
+				</div>
+			</NuxtLink>
+		</template>
+		<div class="flex flex-col gap-2">
+			<NuxtLink
+				:to="url"
+				tabindex="0"
+				class="text-m font-medium text-highlighted leading-snug
+				hover:text-(--ui-primary) transition-colors"
+			>
+				{{ product.name }}
+			</NuxtLink>
+			<CategoryInfoCategorySku :product="product" />
+			<CategoryInfoCategoryStock
+				:product="product"
+				:is-out-of-stock="isOutOfStock"
+			/>
+			<CategoryInfoCategoryPrice :product="product" />
+		</div>
+		<template #footer>
+			<div class="flex gap-2">
+				<UButton
+					:label="t('product.actions.info')"
+					color="primary"
+					variant="soft"
+					class="flex-1 justify-center cursor-pointer focus-visible:outline-none
+					focus-visible:ring-2 focus-visible:ring-(--ui-primary)"
+					tabindex="0"
+					:to="url"
+				/>
+				<UButton
+					:label="t('product.actions.order')"
+					variant="solid"
+					:color="isOutOfStock || !hasPrice ? 'neutral' : 'primary'"
+					:disabled="isOutOfStock || !hasPrice"
+					:class="isOutOfStock || !hasPrice
+						? '!bg-gray-200 !text-gray-500 !border-gray-200 hover:!bg-gray-200 cursor-not-allowed'
+						: ''"
+					class="flex-1 justify-center cursor-pointer focus-visible:outline-none
+					focus-visible:ring-2 focus-visible:ring-(--ui-primary)"
+					tabindex="0"
+					@click="addToCart"
+				/>
+			</div>
+		</template>
+	</UCard>
+</template>

package/app/components/category/view/ListView.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import type { ProductList } from "../../../interfaces/product-list";
+
+const props = defineProps<{
+	product: ProductList;
+}>();
+
+const { t } = useI18n();
+const { url, getImage } = useProductCard(() => props.product);
+const { isOutOfStock, hasPrice, addToCart } = useProductCardActions(() => props.product);
+</script>
+
+<template>
+	<UCard
+		class="overflow-hidden"
+		:ui="{ body: 'p-0 sm:p-0' }"
+	>
+		<div class="flex flex-row items-center gap-4 p-4">
+			<NuxtLink
+				:to="url"
+				:aria-label="`View ${product.name}`"
+				tabindex="0"
+				class="shrink-0 focus-visible:outline-none focus-visible:ring-2
+				focus-visible:ring-(--ui-primary) rounded"
+			>
+				<div class="w-15 h-15 sm:w-15 sm:h-15 flex items-center justify-center">
+					<img
+						:src="getImage(product.image)"
+						:alt="product.name"
+						class="max-h-full max-w-full object-contain"
+					>
+				</div>
+			</NuxtLink>
+			<div class="flex-1 min-w-0 flex flex-col gap-1">
+				<NuxtLink
+					:to="url"
+					tabindex="0"
+					class="text-base font-medium text-highlighted leading-snug
+					hover:text-(--ui-primary) transition-colors truncate"
+				>
+					{{ product.name }}
+				</NuxtLink>
+				<CategoryInfoCategorySku :product="product" />
+				<CategoryInfoCategoryStock
+					:product="product"
+					:is-out-of-stock="isOutOfStock"
+				/>
+			</div>
+			<div class="shrink-0 flex flex-col items-end gap-2">
+				<CategoryInfoCategoryPrice :product="product" />
+				<div class="flex gap-2">
+					<UButton
+						:label="t('product.actions.info')"
+						color="primary"
+						variant="soft"
+						size="sm"
+						class="cursor-pointer focus-visible:outline-none focus-visible:ring-2
+						focus-visible:ring-(--ui-primary)"
+						tabindex="0"
+						:to="url"
+					/>
+					<UButton
+						:label="t('product.actions.order')"
+						variant="solid"
+						size="sm"
+						:color="isOutOfStock || !hasPrice ? 'neutral' : 'primary'"
+						:disabled="isOutOfStock || !hasPrice"
+						:class="isOutOfStock || !hasPrice
+							? '!bg-gray-200 !text-gray-500 !border-gray-200 hover:!bg-gray-200 cursor-not-allowed'
+							: ''"
+						class="cursor-pointer focus-visible:outline-none focus-visible:ring-2
+						focus-visible:ring-(--ui-primary)"
+						tabindex="0"
+						@click="addToCart"
+					/>
+				</div>
+			</div>
+		</div>
+	</UCard>
+</template>

package/app/components/checkout/confirmation/CheckoutConfirmationView.vue

@@ -0,0 +1,289 @@
+<script setup lang="ts">
+import type { AccountOrder } from "../../../interfaces/account/order-list";
+import type { Requisition } from "../../../interfaces/b2b";
+
+/**
+ * The thank-you page after checkout: hero with the order number, the
+ * "what happens next" steps, and — for signed-in customers — the full
+ * order recap (positions, addresses, payment, total). Covers all three
+ * outcomes: plain order, order awaiting approval, requisition.
+ */
+export type ConfirmationType = "order" | "approval" | "requisition";
+
+const props = defineProps<{
+	recordId: string;
+	type: ConfirmationType;
+	approvers: string[];
+}>();
+
+const { icon } = useIcons();
+const { t, tm, rt } = useI18n();
+const localePath = useLocalePath();
+const { to } = useAppUrl();
+const checkout = useCheckoutOnePage();
+const { getImage } = useProductImage();
+const { formatCurrency } = useCartSummaryFormatting();
+// Forwards the auth cookie during SSR — plain $fetch would lose it.
+const requestFetch = useRequestFetch();
+
+/* ---- recap data (signed-in customers only; guests get the hero) ------- */
+interface ConfirmationLine {
+	id: number;
+	name: string;
+	image?: string;
+	sku: string;
+	quantity: number;
+	unitPrice: number;
+	lineTotal: number;
+}
+
+interface ConfirmationRecap {
+	lines: ConfirmationLine[];
+	total: number;
+	deliveryLines: string[];
+	billingLines: string[];
+	paymentMethod?: string;
+}
+
+const { data: recap } = await useAsyncData<ConfirmationRecap | null>(
+	`checkout-confirmation:${props.recordId}`,
+	async () => {
+		try {
+			if (props.type === "requisition") {
+				const requisition = await requestFetch<Requisition>(`/api/account/requisitions/${props.recordId}`);
+				const address = requisition.deliveryAddress;
+				return {
+					lines: requisition.items.map(item => ({
+						id: item.id,
+						name: item.name,
+						...(item.image ? { image: item.image } : {}),
+						sku: item.sku,
+						quantity: item.quantity,
+						unitPrice: item.price,
+						lineTotal: Math.round(item.price * item.quantity * 100) / 100,
+					})),
+					total: requisition.totalValue,
+					deliveryLines: address
+						? [address.company, address.street, `${address.postalCode} ${address.city}`.trim()].filter(Boolean)
+						: [],
+					billingLines: [],
+				};
+			}
+			const order = await requestFetch<AccountOrder>(`/api/account/orders/${props.recordId}`);
+			return {
+				lines: order.positions.map(position => ({
+					id: position.id,
+					name: position.name,
+					...(position.image ? { image: position.image } : {}),
+					sku: position.sku,
+					quantity: position.quantity,
+					unitPrice: position.unitPrice,
+					lineTotal: position.lineTotal,
+				})),
+				total: order.total,
+				deliveryLines: order.deliveryAddress?.split(" · ") ?? [],
+				billingLines: order.billingAddress?.split(" · ") ?? [],
+				...(order.paymentMethod ? { paymentMethod: order.paymentMethod } : {}),
+			};
+		}
+		catch {
+			return null;
+		}
+	},
+);
+
+/* ---- next steps -------------------------------------------------------- */
+interface NextStep { title: string; text: string }
+
+const nextSteps = computed<NextStep[]>(() =>
+	(tm(`confirmation.steps.${props.type}`) as unknown[]).map(step => ({
+		title: rt((step as Record<string, never>).title),
+		text: rt((step as Record<string, never>).text),
+	})));
+
+const stepIcons: Record<ConfirmationType, string[]> = {
+	order: ["mail", "package", "delivery"],
+	approval: ["shield", "package", "delivery"],
+	requisition: ["route", "cart", "eye"],
+};
+
+const detailLink = computed(() =>
+	props.type === "requisition"
+		? localePath(`/account/requisitions/${props.recordId}`)
+		: localePath(`/account/orders/${props.recordId}`));
+
+function continueShopping() {
+	checkout.reset();
+	void navigateTo(to("/"));
+}
+</script>
+
+<template>
+	<div class="py-12 sm:py-16">
+		<!-- Hero -->
+		<div class="max-w-xl">
+			<p class="text-base font-semibold text-primary">
+				{{ t('confirmation.thanks') }}
+			</p>
+			<h1 class="mt-2 text-4xl sm:text-5xl font-bold tracking-tight text-highlighted">
+				{{ t(`confirmation.${type}.title`) }}
+			</h1>
+			<i18n-t
+				:keypath="`confirmation.${type}.received`"
+				tag="p"
+				class="mt-3 text-base text-muted"
+			>
+				<template #id>
+					<span class="font-semibold text-highlighted">{{ recordId }}</span>
+				</template>
+			</i18n-t>
+			<p
+				v-if="type === 'approval' && approvers.length"
+				class="mt-2 text-sm text-warning font-medium"
+			>
+				{{ t('confirmation.approval.approvers', { names: approvers.join(', ') }) }}
+			</p>
+		</div>
+
+		<!-- Next steps -->
+		<section class="mt-12">
+			<h2 class="text-xs font-semibold uppercase tracking-wide text-muted">
+				{{ t('confirmation.nextSteps') }}
+			</h2>
+			<ol class="mt-4 grid grid-cols-1 sm:grid-cols-3 border border-(--ui-border) rounded-xl overflow-hidden">
+				<li
+					v-for="(step, index) in nextSteps"
+					:key="step.title"
+					class="relative p-4 sm:p-5 border-(--ui-border)
+					max-sm:not-first:border-t sm:not-first:border-l"
+				>
+					<span class="flex items-center gap-2.5">
+						<span
+							class="flex size-8 shrink-0 items-center justify-center rounded-full
+							bg-primary/10"
+						>
+							<UIcon
+								:name="icon(stepIcons[type][index] ?? 'check')"
+								class="size-4 text-primary"
+							/>
+						</span>
+						<span class="text-sm font-semibold text-highlighted">{{ step.title }}</span>
+					</span>
+					<p class="mt-2.5 text-sm text-muted">
+						{{ step.text }}
+					</p>
+				</li>
+			</ol>
+		</section>
+
+		<!-- Recap (signed-in customers) -->
+		<section
+			v-if="recap?.lines.length"
+			class="mt-12"
+		>
+			<h2 class="text-xs font-semibold uppercase tracking-wide text-muted">
+				{{ t('confirmation.summaryTitle') }}
+			</h2>
+			<div class="mt-4 border border-(--ui-border) rounded-xl overflow-hidden">
+				<ul class="divide-y divide-(--ui-border) px-4 sm:px-5">
+					<li
+						v-for="line in recap.lines"
+						:key="line.id"
+						class="flex items-center gap-4 py-4"
+					>
+						<span
+							class="size-16 shrink-0 flex items-center justify-center rounded-lg
+							bg-elevated/60 ring-1 ring-(--ui-border) p-1.5"
+						>
+							<img
+								v-if="line.image"
+								:src="getImage(line.image)"
+								:alt="line.name"
+								class="max-h-full max-w-full object-contain"
+							>
+						</span>
+						<div class="min-w-0 flex-1">
+							<p class="text-sm font-medium text-highlighted truncate">
+								{{ line.name }}
+							</p>
+							<p class="text-xs text-muted">
+								{{ line.sku }} · {{ line.quantity }}× {{ formatCurrency(line.unitPrice) }}
+							</p>
+						</div>
+						<span class="text-sm tabular-nums text-highlighted shrink-0">
+							{{ formatCurrency(line.lineTotal) }}
+						</span>
+					</li>
+				</ul>
+
+				<dl
+					v-if="recap.deliveryLines.length || recap.billingLines.length || recap.paymentMethod"
+					class="grid grid-cols-1 sm:grid-cols-3 gap-x-6 gap-y-5 px-4 sm:px-5 py-5
+					border-t border-(--ui-border) text-sm"
+				>
+					<div v-if="recap.deliveryLines.length">
+						<dt class="font-medium text-highlighted">
+							{{ t('orders.deliveryAddress') }}
+						</dt>
+						<dd class="mt-2 text-muted">
+							<span
+								v-for="line in recap.deliveryLines"
+								:key="line"
+								class="block"
+							>{{ line }}</span>
+						</dd>
+					</div>
+					<div v-if="recap.billingLines.length">
+						<dt class="font-medium text-highlighted">
+							{{ t('orders.detail.billingAddress') }}
+						</dt>
+						<dd class="mt-2 text-muted">
+							<span
+								v-for="line in recap.billingLines"
+								:key="line"
+								class="block"
+							>{{ line }}</span>
+						</dd>
+					</div>
+					<div v-if="recap.paymentMethod">
+						<dt class="font-medium text-highlighted">
+							{{ t('orders.detail.paymentMethodLabel') }}
+						</dt>
+						<dd class="mt-2 text-muted">
+							{{ t(`paymentMethods.${recap.paymentMethod}`) }}
+						</dd>
+					</div>
+				</dl>
+
+				<div
+					class="flex justify-between px-4 sm:px-5 py-4 border-t border-(--ui-border)
+					text-sm font-semibold text-highlighted"
+				>
+					<span>{{ t('orders.card.total') }}</span>
+					<span class="tabular-nums">{{ formatCurrency(recap.total) }}</span>
+				</div>
+			</div>
+		</section>
+
+		<!-- Actions -->
+		<div class="mt-10 flex flex-wrap items-center gap-3">
+			<UButton
+				color="primary"
+				size="lg"
+				tabindex="0"
+				:label="t('confirmation.continueShopping')"
+				:trailing-icon="icon('arrow-right')"
+				@click="continueShopping"
+			/>
+			<UButton
+				v-if="recap"
+				color="neutral"
+				variant="outline"
+				size="lg"
+				tabindex="0"
+				:label="type === 'requisition' ? t('confirmation.viewRequisition') : t('confirmation.viewOrder')"
+				:to="detailLink"
+			/>
+		</div>
+	</div>
+</template>

package/app/components/checkout/form/CheckoutSchemaForm.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import type { FormKitSchemaDefinition } from "@formkit/core";
+
+import { getNode } from "@formkit/core";
+
+const { icon } = useIcons();
+
+/**
+ * Renders a BFF-served FormKit schema inside a headless FormKit form.
+ * Used standalone (e.g. in modals via the exposed submit()), such as in
+ * the one-page checkout's address picker modal.
+ */
+const props = defineProps<{
+	/** BFF schema key, fetched via /api/checkout/schema/{key} */
+	schemaKey: string;
+	initialValues?: Record<string, unknown>;
+}>();
+
+const { fetchSchemaByKey } = useCheckoutSchema();
+const { locale } = useI18n();
+
+const formId = useId();
+
+const { data: schema, pending } = await useAsyncData(
+	() => `checkout-schema-${props.schemaKey}-${locale.value}`,
+	() => fetchSchemaByKey(props.schemaKey) as Promise<FormKitSchemaDefinition>,
+	{ watch: [() => props.schemaKey, locale] },
+);
+
+/**
+ * Validates and returns the form values, or null when invalid.
+ * Invalid submits surface the field messages exactly like a native submit.
+ */
+async function submit(): Promise<Record<string, unknown> | null> {
+	const node = getNode(formId);
+	if (!node) {
+		return null;
+	}
+	await node.settled;
+	if (!node.context?.state.valid) {
+		// Trigger a submit attempt so all validation messages become visible.
+		node.submit();
+		return null;
+	}
+	return node.value as Record<string, unknown>;
+}
+
+defineExpose({ submit });
+</script>
+
+<template>
+	<div
+		v-if="pending"
+		class="flex justify-center py-8"
+	>
+		<UIcon
+			:name="icon('loading')"
+			class="w-5 h-5 animate-spin text-muted"
+		/>
+	</div>
+
+	<FormKit
+		v-else-if="schema"
+		:id="formId"
+		type="form"
+		:value="initialValues"
+		:actions="false"
+		:incomplete-message="false"
+	>
+		<FormKitSchema :schema="schema" />
+	</FormKit>
+</template>