@revenexx/cover 0.1.0

package/app/composables/useCartSummaryFormatting.ts

@@ -0,0 +1,28 @@
+export const useCartSummaryFormatting = () => {
+	const { t } = useI18n();
+	const { public: { locale, currency, taxIncludedPrices } } = useRuntimeConfig();
+
+	const taxLabelKey = computed(() => taxIncludedPrices ? "summary.tax.incl" : "summary.tax.excl");
+
+	function formatPercent(rate: number): string {
+		return `${Math.round(rate * 100)}%`;
+	}
+
+	function taxRateLabel(rate: number): string {
+		return t("summary.tax.rateLabel", {
+			label: t(taxLabelKey.value),
+			percent: formatPercent(rate),
+		});
+	}
+
+	function formatCurrency(value: number): string {
+		return (value).toLocaleString(locale as string, { style: "currency", currency: currency as string });
+	}
+
+	return {
+		taxLabelKey,
+		formatPercent,
+		taxRateLabel,
+		formatCurrency,
+	};
+};

package/app/composables/useCategories.ts

@@ -0,0 +1,29 @@
+import type { NavigationMenuItem } from "@nuxt/ui";
+
+import { categoriesApi } from "../api/categories";
+import type { ProductCategory } from "../config/navigation";
+
+export const useCategories = () => {
+	const localePath = useLocalePath();
+	const { icon } = useIcons();
+	const { locale } = useI18n();
+	const { data: categories, status, error } = useFetch<ProductCategory[]>(categoriesApi.list(), {
+		headers: computed(() => ({ "x-locale": locale.value })),
+		default: () => [] as ProductCategory[],
+	});
+
+	const categoryNavItems = computed<NavigationMenuItem[]>(() =>
+		(categories.value ?? []).map((cat: ProductCategory) => ({
+			label: cat.label,
+			icon: icon(cat.icon),
+			to: localePath(`/category/${cat.slug}`),
+			children: cat.subcategories.map((sub: ProductCategory["subcategories"][number]) => ({
+				label: sub.label,
+				icon: icon(sub.icon),
+				to: localePath(`/category/${cat.slug}/${sub.slug}`),
+			})),
+		})),
+	);
+
+	return { categories, categoryNavItems, status, error };
+};

package/app/composables/useCheckoutOnePage.ts

@@ -0,0 +1,438 @@
+import { checkoutApi } from "../api/checkout";
+import type { CheckoutOnePageForm, CheckoutProfile } from "../interfaces/checkout";
+
+/**
+ * Who is checking out:
+ * - `account`        — signed-in user with address book and B2B context
+ * - `guest-business` — guest business customer (company data required)
+ * - `guest-private`  — guest private customer (no company data)
+ */
+export type CheckoutCustomerType = "account" | "guest-business" | "guest-private";
+
+export interface CheckoutGuestAddress {
+	companyName: string;
+	firstName: string;
+	lastName: string;
+	street: string;
+	postalCode: string;
+	city: string;
+	country: string;
+}
+
+const EMPTY_GUEST_ADDRESS: CheckoutGuestAddress = {
+	companyName: "",
+	firstName: "",
+	lastName: "",
+	street: "",
+	postalCode: "",
+	city: "",
+	country: "DE",
+};
+
+const EMPTY_FORM: CheckoutOnePageForm = {
+	shippingAddressId: "",
+	billingSameAsShipping: true,
+	billingAddressId: "",
+	deliveryMethod: "standard",
+	requestedDate: "",
+	deliveryNote: "",
+	partialDelivery: false,
+	paymentMethod: "invoice",
+	poNumber: "",
+	costCenterId: "",
+	orderNumber: "",
+	quoteNumber: "",
+	noOrderConfirmation: false,
+	orderNote: "",
+	promoCode: "",
+	acceptedTerms: false,
+};
+
+/** Latest acceptable requested date: 100 calendar days ahead. */
+const REQUESTED_DATE_MAX_DAYS = 100;
+
+export function useCheckoutOnePage() {
+	const { t } = useI18n();
+	const cart = useCartStore();
+	const { settings } = useB2BContext();
+	const { data: profile, refresh: refreshProfile } = useCheckoutProfileSource();
+	const profileLoading = computed(() => profile.value === null);
+
+	const customerType = useState<CheckoutCustomerType>("checkout-customer-type", () => "account");
+	const isGuest = computed(() => customerType.value !== "account");
+
+	const form = useState<CheckoutOnePageForm>("checkout-one-page-form", () => ({ ...EMPTY_FORM }));
+	const guestContact = useState("checkout-guest-contact", () => ({ email: "", phone: "" }));
+	const guestShipping = useState<CheckoutGuestAddress>("checkout-guest-shipping", () => ({ ...EMPTY_GUEST_ADDRESS }));
+	const guestBilling = useState<CheckoutGuestAddress>("checkout-guest-billing", () => ({ ...EMPTY_GUEST_ADDRESS }));
+	const fieldErrors = useState<Record<string, string | undefined>>("checkout-one-page-field-errors", () => ({}));
+	const submitError = useState<string | null>("checkout-one-page-submit-error", () => null);
+	const submitting = useState<boolean>("checkout-one-page-submitting", () => false);
+	const sessionToken = useState<string | null>("checkout-one-page-session-token", () => null);
+
+	const orderNumberRequired = computed(() =>
+		settings.value?.checkout.orderNumberRequired ?? false,
+	);
+
+	const guestAddressValid = (address: CheckoutGuestAddress): boolean => {
+		const base = Boolean(address.firstName && address.lastName && address.street
+			&& address.postalCode && address.city && address.country);
+		return customerType.value === "guest-business"
+			? base && Boolean(address.companyName)
+			: base;
+	};
+
+	const requestedDateError = (value: string): string | null => {
+		if (!value) {
+			return null;
+		}
+		const date = new Date(value);
+		if (isNaN(date.getTime())) {
+			return t("onepage.errors.requestedDateInvalid");
+		}
+		const today = new Date();
+		today.setHours(0, 0, 0, 0);
+		if (date < today) {
+			return t("onepage.errors.requestedDatePast");
+		}
+		const max = new Date(today);
+		max.setDate(max.getDate() + REQUESTED_DATE_MAX_DAYS);
+		if (date > max) {
+			return t("onepage.errors.requestedDateTooFar", { days: REQUESTED_DATE_MAX_DAYS });
+		}
+		const weekday = date.getDay();
+		if (weekday === 0 || weekday === 6) {
+			return t("onepage.errors.requestedDateWeekend");
+		}
+		return null;
+	};
+
+	const isValid = computed(() => {
+		const f = form.value;
+		if (isGuest.value) {
+			if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(guestContact.value.email)) {
+				return false;
+			}
+			if (!guestAddressValid(guestShipping.value)) {
+				return false;
+			}
+			if (!f.billingSameAsShipping && !guestAddressValid(guestBilling.value)) {
+				return false;
+			}
+		}
+		else {
+			if (!f.shippingAddressId) {
+				return false;
+			}
+			if (!f.billingSameAsShipping && !f.billingAddressId) {
+				return false;
+			}
+		}
+		if (!f.paymentMethod) {
+			return false;
+		}
+		if (orderNumberRequired.value && !f.orderNumber.trim()) {
+			return false;
+		}
+		if (requestedDateError(f.requestedDate)) {
+			return false;
+		}
+		return true;
+	});
+
+	const canSubmit = computed(() => isValid.value && form.value.acceptedTerms && !submitting.value);
+
+	function initFromProfile(p: CheckoutProfile) {
+		form.value = {
+			...EMPTY_FORM,
+			shippingAddressId: p.defaultShippingAddressId,
+			billingAddressId: p.defaultBillingAddressId,
+			deliveryMethod: p.defaultDeliveryMethod,
+			paymentMethod: p.defaultPaymentMethod,
+		};
+		fieldErrors.value = {};
+		submitError.value = null;
+	}
+
+	async function fetchSessionToken() {
+		const session = await $fetch(checkoutApi.session(), { method: "POST" }) as { checkoutSessionToken: string };
+		sessionToken.value = session.checkoutSessionToken;
+	}
+
+	function validateField(name: keyof CheckoutOnePageForm | "guestEmail") {
+		const f = form.value;
+		const errors = { ...fieldErrors.value };
+
+		switch (name) {
+			case "shippingAddressId":
+				errors.shippingAddressId = !isGuest.value && !f.shippingAddressId
+					? t("onepage.errors.shippingAddressRequired")
+					: undefined;
+				break;
+			case "billingAddressId":
+				errors.billingAddressId = !isGuest.value && !f.billingSameAsShipping && !f.billingAddressId
+					? t("onepage.errors.billingAddressRequired")
+					: undefined;
+				break;
+			case "paymentMethod":
+				errors.paymentMethod = f.paymentMethod
+					? undefined
+					: t("onepage.errors.paymentMethodRequired");
+				break;
+			case "orderNumber":
+				errors.orderNumber = orderNumberRequired.value && !f.orderNumber.trim()
+					? t("onepage.errors.orderNumberRequired")
+					: undefined;
+				break;
+			case "requestedDate":
+				errors.requestedDate = requestedDateError(f.requestedDate) ?? undefined;
+				break;
+			case "guestEmail":
+				errors.guestEmail = /^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(guestContact.value.email)
+					? undefined
+					: t("onepage.errors.guestEmailInvalid");
+				break;
+			case "acceptedTerms":
+				errors.acceptedTerms = f.acceptedTerms
+					? undefined
+					: t("onepage.errors.termsRequired");
+				break;
+		}
+
+		fieldErrors.value = errors;
+	}
+
+	function validateAll(): boolean {
+		const fields: Array<keyof CheckoutOnePageForm | "guestEmail"> = [
+			"shippingAddressId", "billingAddressId", "paymentMethod",
+			"orderNumber", "requestedDate", "acceptedTerms",
+		];
+		if (isGuest.value) {
+			fields.push("guestEmail");
+		}
+		fields.forEach(f => validateField(f));
+		return Object.values(fieldErrors.value).every(v => !v) && isValid.value;
+	}
+
+	function guestAddressPayload(address: CheckoutGuestAddress, includeCompany: boolean) {
+		return {
+			...(includeCompany && address.companyName ? { companyName: address.companyName } : {}),
+			contactName: `${address.firstName} ${address.lastName}`.trim(),
+			street: address.street,
+			postalCode: address.postalCode,
+			city: address.city,
+			country: address.country,
+		};
+	}
+
+	function buildShippingAddress(): Record<string, unknown> {
+		const f = form.value;
+		if (isGuest.value) {
+			const includeCompany = customerType.value === "guest-business";
+			return {
+				...guestAddressPayload(guestShipping.value, includeCompany),
+				billingAddressSameAsShipping: f.billingSameAsShipping,
+				...(f.billingSameAsShipping
+					? {}
+					: { billing: guestAddressPayload(guestBilling.value, includeCompany) }),
+			};
+		}
+
+		const p = profile.value;
+		if (!p) {
+			throw new Error("Checkout profile not available");
+		}
+		const shippingAddr = p.addresses.find(a => a.id === f.shippingAddressId);
+		const billingAddr = f.billingSameAsShipping
+			? undefined
+			: p.addresses.find(a => a.id === f.billingAddressId);
+		return {
+			...shippingAddr,
+			billingAddressSameAsShipping: f.billingSameAsShipping,
+			...(billingAddr
+				? {
+						billing: {
+							street: billingAddr.street,
+							city: billingAddr.city,
+							postalCode: billingAddr.postalCode,
+							country: billingAddr.country,
+						},
+					}
+				: {}),
+		};
+	}
+
+	function buildOrderPayload() {
+		const f = form.value;
+		const costCenter = profile.value?.costCenters.find(c => c.id === f.costCenterId);
+
+		const payment: Record<string, unknown> = { method: f.paymentMethod };
+		if (f.paymentMethod === "po_number" && f.poNumber) {
+			payment.poNumber = f.poNumber;
+		}
+		if (f.paymentMethod === "cost_center" && costCenter) {
+			payment.costCenter = costCenter.code;
+		}
+
+		return {
+			checkoutSessionToken: sessionToken.value ?? "",
+			customerType: customerType.value === "guest-private" ? "private" : "business",
+			address: buildShippingAddress(),
+			payment,
+			// Full cart lines: the BFF re-runs the calculation at order time
+			// (approval limits, quantity rules) against the same data.
+			items: cart.items,
+			...(isGuest.value ? { contactEmail: guestContact.value.email } : {}),
+			...(f.deliveryMethod ? { deliveryMethod: f.deliveryMethod } : {}),
+			...(f.requestedDate ? { requestedDate: f.requestedDate } : {}),
+			...(f.deliveryNote ? { deliveryNote: f.deliveryNote } : {}),
+			...(f.partialDelivery ? { partialDelivery: true } : {}),
+			...(f.orderNumber ? { orderNumber: f.orderNumber } : {}),
+			...(f.quoteNumber ? { quoteNumber: f.quoteNumber } : {}),
+			...(f.noOrderConfirmation ? { noOrderConfirmation: true } : {}),
+			...(f.orderNote ? { orderNote: f.orderNote } : {}),
+			...(f.promoCode ? { promoCode: f.promoCode } : {}),
+		};
+	}
+
+	interface SubmitResult {
+		orderId: string;
+		approvalRequired: boolean;
+		approvers: string[];
+	}
+
+	async function submitOrder(): Promise<SubmitResult | null> {
+		if (submitting.value) {
+			return null;
+		}
+		if (!validateAll()) {
+			return null;
+		}
+
+		submitting.value = true;
+		submitError.value = null;
+
+		try {
+			await fetchSessionToken();
+
+			const order = await $fetch(checkoutApi.orders(), {
+				method: "POST",
+				body: buildOrderPayload(),
+			}) as { orderId: string; approvalRequired?: boolean; approvers?: string[] };
+
+			cart.clearCart();
+			return {
+				orderId: order.orderId,
+				approvalRequired: order.approvalRequired ?? false,
+				approvers: order.approvers ?? [],
+			};
+		}
+		catch (err) {
+			submitError.value = err instanceof Error
+				? err.message
+				: t("onepage.errors.submitError");
+			return null;
+		}
+		finally {
+			submitting.value = false;
+		}
+	}
+
+	/**
+	 * Requester checkout outcome: a requisition entering its workflow
+	 * instead of an order.
+	 */
+	async function submitRequisition(workflowId: string): Promise<string | null> {
+		if (submitting.value) {
+			return null;
+		}
+		submitting.value = true;
+		submitError.value = null;
+
+		try {
+			const shipping = profile.value?.addresses.find(a => a.id === form.value.shippingAddressId);
+			const result = await $fetch("/api/requisitions", {
+				method: "POST",
+				body: {
+					workflowId,
+					items: cart.items.map(i => ({
+						id: i.id,
+						sku: i.sku,
+						name: i.name,
+						...(i.name2 ? { name2: i.name2 } : {}),
+						...(i.image ? { image: i.image } : {}),
+						quantity: i.quantity,
+						...(i.unit ? { unit: i.unit } : {}),
+						price: i.price,
+						taxRate: i.taxRate ?? 19,
+						...(i.costCenterId ? { costCenterId: i.costCenterId } : {}),
+						...(i.positionTexts ? { positionTexts: i.positionTexts } : {}),
+						...(i.customSku ? { customSku: i.customSku } : {}),
+					})),
+					...(shipping
+						? {
+								deliveryAddress: {
+									company: shipping.companyName,
+									street: shipping.street,
+									postalCode: shipping.postalCode,
+									city: shipping.city,
+									country: shipping.country,
+								},
+							}
+						: {}),
+					...(form.value.orderNote ? { note: form.value.orderNote } : {}),
+				},
+			}) as { requisitionId: string };
+
+			cart.clearCart();
+			return result.requisitionId;
+		}
+		catch (err) {
+			submitError.value = err instanceof Error
+				? err.message
+				: t("onepage.errors.submitError");
+			return null;
+		}
+		finally {
+			submitting.value = false;
+		}
+	}
+
+	function reset() {
+		form.value = { ...EMPTY_FORM };
+		guestContact.value = { email: "", phone: "" };
+		guestShipping.value = { ...EMPTY_GUEST_ADDRESS };
+		guestBilling.value = { ...EMPTY_GUEST_ADDRESS };
+		customerType.value = "account";
+		fieldErrors.value = {};
+		submitError.value = null;
+		submitting.value = false;
+		sessionToken.value = null;
+	}
+
+	return {
+		form,
+		profile,
+		profileLoading,
+		refreshProfile,
+		customerType,
+		isGuest,
+		guestContact,
+		guestShipping,
+		guestBilling,
+		orderNumberRequired,
+		fieldErrors,
+		submitError,
+		submitting,
+		isValid,
+		canSubmit,
+		initFromProfile,
+		fetchSessionToken,
+		validateField,
+		validateAll,
+		buildOrderPayload,
+		submitOrder,
+		submitRequisition,
+		reset,
+	};
+}

package/app/composables/useCheckoutProfileSource.ts

@@ -0,0 +1,8 @@
+import { checkoutApi } from "../api/checkout";
+import type { CheckoutProfile } from "../interfaces/checkout";
+
+export function useCheckoutProfileSource() {
+	return useFetch<CheckoutProfile>(checkoutApi.profile(), {
+		key: "checkout-profile",
+	});
+}

package/app/composables/useCheckoutSchema.ts

@@ -0,0 +1,28 @@
+import { checkoutApi } from "../api/checkout";
+
+type SchemaObject = Record<string, unknown>;
+
+const schemaCache = new Map<string, SchemaObject>();
+
+export const useCheckoutSchema = () => {
+	const { locale } = useI18n();
+
+	async function fetchSchemaByKey(key: string): Promise<SchemaObject> {
+		const cacheKey = `schema:${key}:${locale.value}`;
+		const cached = schemaCache.get(cacheKey);
+		if (cached) {
+			return cached;
+		}
+		const data = await $fetch<SchemaObject>(checkoutApi.schema(key), {
+			headers: { "x-locale": locale.value },
+		});
+		schemaCache.set(cacheKey, data);
+		return data;
+	}
+
+	function clearCache() {
+		schemaCache.clear();
+	}
+
+	return { fetchSchemaByKey, clearCache };
+};

package/app/composables/useDataTable.ts

@@ -0,0 +1,14 @@
+/**
+ * Shared visual baseline for data tables (datatable-ux skill): tinted,
+ * uppercase header row that never reads as a data row, light separators
+ * and roomy data rows. Spread into UTable's `:ui` prop.
+ */
+export function useDataTable() {
+	const tableUi = {
+		thead: "bg-elevated/60",
+		th: "py-3 text-xs font-semibold uppercase tracking-wide text-muted",
+		td: "py-3.5 text-sm",
+	};
+
+	return { tableUi };
+}

package/app/composables/useFormValidation.ts

@@ -0,0 +1,29 @@
+import type { FormError } from "@nuxt/ui";
+
+import type { FormKey } from "../interfaces/validation";
+import { formValidationConfig } from "../validations/formValidationConfig";
+
+export function useFormValidation<TState extends object>(formKey: FormKey) {
+	const { t } = useI18n();
+	const config = formValidationConfig[formKey];
+
+	function validate(state: TState): FormError[] {
+		const errors: FormError[] = [];
+		const stateRecord = state as Record<string, unknown>;
+		for (const fieldConfig of config) {
+			const value = stateRecord[fieldConfig.field];
+			for (const rule of fieldConfig.rules) {
+				const key = rule.kind === "cross"
+					? rule.fn(value, stateRecord, rule.options)
+					: rule.fn(value, rule.options);
+				if (key !== null) {
+					errors.push({ name: fieldConfig.field, message: t(key, rule.options ?? {}) });
+					break;
+				}
+			}
+		}
+		return errors;
+	}
+
+	return { validate };
+}

package/app/composables/useIcons.ts

@@ -0,0 +1,17 @@
+import { solarIcon } from "../config/icons";
+
+/**
+ * Resolves cover icon tokens (or raw Solar basenames) to Iconify names in
+ * the active theme's icon weight. Reactive — switching the theme or the
+ * weight override re-renders every resolved icon.
+ *
+ * ```ts
+ * const { icon } = useIcons();
+ * icon("cart"); // "i-solar-cart-3-linear"
+ * ```
+ */
+export function useIcons() {
+	const themeStore = useThemeStore();
+	const icon = (name: string) => solarIcon(name, themeStore.iconWeight);
+	return { icon, iconWeight: computed(() => themeStore.iconWeight) };
+}

package/app/composables/useLocalePreferences.ts

@@ -0,0 +1,45 @@
+import type { Ref } from "vue";
+
+import type { ShopMarket } from "../interfaces/market";
+
+/**
+ * Market-driven locale preferences: the shop's markets (markets app) carry
+ * region, currency and the offered locales — the selector picks a market,
+ * language stays an independent choice within the market's locales
+ * (Smashing Magazine, "Designing A Better Language Selector"). Persisted
+ * as a cookie so SSR renders the same selection.
+ */
+
+const CURRENCY_SYMBOLS: Record<string, string> = {
+	EUR: "€",
+	CHF: "CHF",
+	USD: "$",
+	GBP: "£",
+};
+
+export function useLocalePreferences(markets: Ref<ShopMarket[]>) {
+	const marketCode = useCookie<string>("cover-market", {
+		default: () => "",
+		watch: true,
+	});
+
+	const market = computed<ShopMarket | null>(() => {
+		if (!markets.value.length) {
+			return null;
+		}
+		return markets.value.find(m => m.code === marketCode.value)
+			?? markets.value.find(m => m.isDefault)
+			?? markets.value[0]
+			?? null;
+	});
+
+	const setMarket = (code: string): void => {
+		marketCode.value = code;
+	};
+
+	const region = computed(() => market.value?.name ?? "");
+	const currency = computed(() => market.value?.currency ?? "EUR");
+	const currencySymbol = computed(() => CURRENCY_SYMBOLS[currency.value] ?? currency.value);
+
+	return { market, setMarket, region, currency, currencySymbol };
+}

package/app/composables/useMarkets.ts

@@ -0,0 +1,15 @@
+import { marketsApi } from "../api/markets";
+import type { ShopMarket } from "../interfaces/market";
+
+/**
+ * Markets from the BFF (markets app live, bundled JSON in mock mode).
+ * SSR-fetched once and shared — the locale selector and price/tax surfaces
+ * derive region, currency and offered languages from the selected market.
+ */
+export function useMarkets() {
+	const { data: markets, status, error, refresh } = useFetch<ShopMarket[]>(marketsApi.list(), {
+		key: "shop-markets",
+		default: () => [] as ShopMarket[],
+	});
+	return { markets, status, error, refresh };
+}