@revenexx/cover 0.1.0

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

@@ -0,0 +1,260 @@
+<script setup lang="ts">
+import CheckoutSchemaForm from "../form/CheckoutSchemaForm.vue";
+import type { Address } from "../../../interfaces/address";
+
+/**
+ * Address picker for the one-page checkout. Built to scale to large B2B
+ * address books (hundreds to thousands of entries): a prominent search
+ * filters company, contact, street, city and ZIP; only the first slice
+ * renders, with a refine hint beyond that. New addresses persist to the
+ * account address book — the same store /account/addresses manages.
+ */
+const MAX_VISIBLE = 50;
+
+const { icon } = useIcons();
+
+const props = defineProps<{
+	open: boolean;
+	type: "shipping" | "billing";
+}>();
+
+const emit = defineEmits<{
+	"update:open": [value: boolean];
+}>();
+
+const { t } = useI18n();
+const toast = useToast();
+const { form, profile, refreshProfile, validateField } = useCheckoutOnePage();
+
+const showAddForm = ref(false);
+const saving = ref(false);
+const search = ref("");
+const formRenderer = ref<{ submit: () => Promise<Record<string, unknown> | null> } | null>(null);
+
+watch(() => props.open, (value) => {
+	if (value) {
+		search.value = "";
+		showAddForm.value = false;
+	}
+});
+
+const title = computed(() =>
+	props.type === "shipping"
+		? t("onepage.address.shipping")
+		: t("onepage.address.billing"),
+);
+
+const selectedId = computed(() =>
+	props.type === "shipping" ? form.value.shippingAddressId : form.value.billingAddressId,
+);
+
+/* ---- scaling: search + capped list --------------------------------- */
+const allAddresses = computed(() => profile.value?.addresses ?? []);
+
+const filtered = computed(() => {
+	const query = search.value.trim().toLowerCase();
+	if (!query) {
+		return allAddresses.value;
+	}
+	return allAddresses.value.filter(address =>
+		[address.companyName, address.contactName, address.street, address.city, address.postalCode]
+			.some(value => value.toLowerCase().includes(query)),
+	);
+});
+
+const visible = computed(() => filtered.value.slice(0, MAX_VISIBLE));
+const truncated = computed(() => filtered.value.length > MAX_VISIBLE);
+
+function selectAddress(id: string) {
+	if (props.type === "shipping") {
+		form.value.shippingAddressId = id;
+		validateField("shippingAddressId");
+	}
+	else {
+		form.value.billingAddressId = id;
+		validateField("billingAddressId");
+	}
+	emit("update:open", false);
+}
+
+/* ---- create: persists into the account address book ----------------- */
+function resetAddForm() {
+	showAddForm.value = false;
+}
+
+function splitStreet(street: string): { street: string; streetNumber: string } {
+	const match = street.trim().match(/^(.*?)\s+(\S*\d\S*)$/);
+	return match
+		? { street: match[1] ?? street, streetNumber: match[2] ?? "" }
+		: { street: street.trim(), streetNumber: "1" };
+}
+
+async function saveNewAddress() {
+	if (!formRenderer.value) {
+		return;
+	}
+	const values = await formRenderer.value.submit();
+	if (!values) {
+		return;
+	}
+	saving.value = true;
+	try {
+		const contactName = String(values.contactName ?? "").trim();
+		const [firstName, ...rest] = contactName.split(/\s+/);
+		const streetParts = splitStreet(String(values.street ?? ""));
+		const created = await $fetch<{ id: string }>("/api/account/address", {
+			method: "POST",
+			body: {
+				label: String(values.companyName ?? contactName),
+				company: String(values.companyName ?? ""),
+				firstName: firstName ?? contactName,
+				lastName: rest.join(" ") || "—",
+				street: streetParts.street,
+				streetNumber: streetParts.streetNumber,
+				city: String(values.city ?? ""),
+				zip: String(values.postalCode ?? ""),
+				country: String(values.country ?? "DE"),
+				type: props.type,
+			},
+		});
+		await refreshProfile();
+		selectAddress(created.id);
+		resetAddForm();
+	}
+	catch {
+		toast.add({
+			title: t("onepage.address.saveError"),
+			color: "error",
+			icon: icon("error"),
+		});
+	}
+	finally {
+		saving.value = false;
+	}
+}
+
+function handleClose() {
+	resetAddForm();
+	emit("update:open", false);
+}
+
+const addressLine = (address: Address): string =>
+	`${address.street}, ${address.postalCode} ${address.city}`;
+</script>
+
+<template>
+	<UModal
+		:open="open"
+		:title="showAddForm ? t('onepage.address.addNew') : title"
+		@update:open="handleClose"
+	>
+		<template #body>
+			<!-- Address list: search + capped scroll list -->
+			<div
+				v-if="!showAddForm"
+				class="space-y-3"
+			>
+				<UInput
+					v-model="search"
+					:icon="icon('search')"
+					:placeholder="t('onepage.address.searchPlaceholder')"
+					class="w-full"
+					autofocus
+				/>
+				<p class="text-xs text-muted">
+					{{ t('onepage.address.count', { count: filtered.length }) }}
+				</p>
+
+				<div class="max-h-80 overflow-y-auto space-y-2 -mx-1 px-1">
+					<button
+						v-for="addr in visible"
+						:key="addr.id"
+						type="button"
+						tabindex="0"
+						class="w-full text-left p-3 rounded-lg border transition-colors
+						focus:outline-none focus-visible:ring-2 focus-visible:ring-(--ui-primary)"
+						:class="selectedId === addr.id
+							? 'border-(--ui-primary) bg-primary/5 ring-1 ring-(--ui-primary)'
+							: 'border-(--ui-border) hover:border-(--ui-border-accented)'"
+						@click="selectAddress(addr.id)"
+					>
+						<span class="flex items-center justify-between gap-2">
+							<span class="text-sm font-medium text-highlighted truncate">
+								{{ addr.companyName }}
+							</span>
+							<UIcon
+								v-if="selectedId === addr.id"
+								:name="icon('success')"
+								class="size-4 text-primary shrink-0"
+							/>
+						</span>
+						<span class="block text-xs text-muted truncate">
+							{{ addr.contactName }} · {{ addressLine(addr) }}
+						</span>
+					</button>
+
+					<p
+						v-if="!filtered.length"
+						class="py-6 text-sm text-muted text-center"
+					>
+						{{ t('onepage.address.noMatches') }}
+					</p>
+				</div>
+
+				<p
+					v-if="truncated"
+					class="text-xs text-dimmed"
+				>
+					{{ t('onepage.address.showingOf', { shown: MAX_VISIBLE, total: filtered.length }) }}
+				</p>
+
+				<UButton
+					variant="soft"
+					color="primary"
+					size="sm"
+					tabindex="0"
+					:icon="icon('plus')"
+					class="w-full justify-center"
+					@click="showAddForm = true"
+				>
+					{{ t('onepage.address.addNew') }}
+				</UButton>
+			</div>
+
+			<!-- Add new address form (schema-driven via FormKit) -->
+			<CheckoutSchemaForm
+				v-else
+				ref="formRenderer"
+				schema-key="add-address"
+			/>
+		</template>
+
+		<template #footer>
+			<template v-if="showAddForm">
+				<UButton
+					variant="ghost"
+					tabindex="0"
+					@click="resetAddForm"
+				>
+					{{ t('onepage.address.cancel') }}
+				</UButton>
+				<UButton
+					tabindex="0"
+					:loading="saving"
+					@click="saveNewAddress"
+				>
+					{{ t('onepage.address.save') }}
+				</UButton>
+			</template>
+			<template v-else>
+				<UButton
+					variant="ghost"
+					tabindex="0"
+					@click="handleClose"
+				>
+					{{ t('onepage.address.cancel') }}
+				</UButton>
+			</template>
+		</template>
+	</UModal>
+</template>

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

@@ -0,0 +1,186 @@
+<script setup lang="ts">
+import CheckoutSectionTitle from "./CheckoutSectionTitle.vue";
+import CheckoutAddressPickerModal from "../../../components/checkout/onepage/CheckoutAddressPickerModal.vue";
+
+const { t } = useI18n();
+const { form, profile, profileLoading, fieldErrors } = useCheckoutOnePage();
+
+const showShippingPicker = ref(false);
+const showBillingPicker = ref(false);
+
+const selectedShipping = computed(() =>
+	profile.value?.addresses.find(a => a.id === form.value.shippingAddressId),
+);
+
+const selectedBilling = computed(() =>
+	profile.value?.addresses.find(a => a.id === form.value.billingAddressId),
+);
+
+function changeBilling() {
+	if (form.value.billingSameAsShipping) {
+		form.value.billingSameAsShipping = false;
+	}
+	showBillingPicker.value = true;
+}
+</script>
+
+<template>
+	<div class="bg-(--ui-bg) border border-(--ui-border) rounded-xl p-6 space-y-6">
+		<CheckoutSectionTitle
+			:step="1"
+			:title="t('onepage.sections.address')"
+		/>
+
+		<!-- Shipping + billing side by side -->
+		<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+			<!-- Shipping address -->
+			<div class="space-y-2">
+				<p class="text-sm font-medium text-muted">
+					{{ t('onepage.address.shipping') }}
+				</p>
+				<div
+					class="flex items-start justify-between gap-4 p-4 rounded-lg h-full
+					border border-(--ui-border) bg-(--ui-bg-elevated)"
+				>
+					<!-- Loading skeleton -->
+					<div
+						v-if="profileLoading"
+						class="flex-1 space-y-1.5"
+					>
+						<div class="h-4 w-40 rounded bg-(--ui-border) animate-pulse" />
+						<div class="h-3 w-32 rounded bg-(--ui-border) animate-pulse" />
+						<div class="h-3 w-48 rounded bg-(--ui-border) animate-pulse" />
+					</div>
+					<div
+						v-else-if="selectedShipping"
+						class="text-sm space-y-0.5"
+					>
+						<p class="font-medium text-highlighted">
+							{{ selectedShipping.companyName }}
+						</p>
+						<p class="text-muted">
+							{{ selectedShipping.contactName }}
+						</p>
+						<p class="text-muted">
+							{{ selectedShipping.street }},
+							{{ selectedShipping.postalCode }} {{ selectedShipping.city }}
+						</p>
+					</div>
+					<p
+						v-else
+						class="text-sm text-muted italic"
+					>
+						{{ t('onepage.address.noAddress') }}
+					</p>
+					<UButton
+						v-if="!profileLoading"
+						variant="ghost"
+						size="sm"
+						class="shrink-0"
+						tabindex="0"
+						@click="showShippingPicker = true"
+					>
+						{{ t('onepage.address.change') }}
+					</UButton>
+				</div>
+				<p
+					v-if="fieldErrors.shippingAddressId"
+					class="text-sm text-error-500"
+				>
+					{{ fieldErrors.shippingAddressId }}
+				</p>
+			</div>
+
+			<!-- Billing address -->
+			<div class="space-y-2">
+				<p class="text-sm font-medium text-muted">
+					{{ t('onepage.address.billing') }}
+				</p>
+				<div
+					class="flex items-start justify-between gap-4 p-4 rounded-lg h-full
+					border border-(--ui-border) bg-(--ui-bg-elevated)"
+				>
+					<!-- Loading skeleton -->
+					<div
+						v-if="profileLoading"
+						class="flex-1 space-y-1.5"
+					>
+						<div class="h-4 w-40 rounded bg-(--ui-border) animate-pulse" />
+						<div class="h-3 w-32 rounded bg-(--ui-border) animate-pulse" />
+						<div class="h-3 w-48 rounded bg-(--ui-border) animate-pulse" />
+					</div>
+					<div
+						v-else-if="form.billingSameAsShipping"
+						class="text-sm space-y-0.5"
+					>
+						<p class="font-medium text-highlighted">
+							{{ t('onepage.address.sameAsShippingNote') }}
+						</p>
+						<template v-if="selectedShipping">
+							<p class="text-muted">
+								{{ selectedShipping.companyName }}
+							</p>
+							<p class="text-muted">
+								{{ selectedShipping.street }},
+								{{ selectedShipping.postalCode }} {{ selectedShipping.city }}
+							</p>
+						</template>
+					</div>
+					<div
+						v-else-if="selectedBilling"
+						class="text-sm space-y-0.5"
+					>
+						<p class="font-medium text-highlighted">
+							{{ selectedBilling.companyName }}
+						</p>
+						<p class="text-muted">
+							{{ selectedBilling.contactName }}
+						</p>
+						<p class="text-muted">
+							{{ selectedBilling.street }},
+							{{ selectedBilling.postalCode }} {{ selectedBilling.city }}
+						</p>
+					</div>
+					<p
+						v-else
+						class="text-sm text-muted italic"
+					>
+						{{ t('onepage.address.noAddress') }}
+					</p>
+					<UButton
+						v-if="!profileLoading"
+						variant="ghost"
+						size="sm"
+						class="shrink-0"
+						tabindex="0"
+						@click="changeBilling"
+					>
+						{{ t('onepage.address.change') }}
+					</UButton>
+				</div>
+				<p
+					v-if="fieldErrors.billingAddressId"
+					class="text-sm text-error-500"
+				>
+					{{ fieldErrors.billingAddressId }}
+				</p>
+			</div>
+		</div>
+
+		<!-- Billing toggle -->
+		<UCheckbox
+			:model-value="form.billingSameAsShipping"
+			:label="t('onepage.address.billingSameAsShipping')"
+			@update:model-value="form.billingSameAsShipping = $event as boolean"
+		/>
+
+		<CheckoutAddressPickerModal
+			v-model:open="showShippingPicker"
+			type="shipping"
+		/>
+		<CheckoutAddressPickerModal
+			v-model:open="showBillingPicker"
+			type="billing"
+		/>
+	</div>
+</template>

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

@@ -0,0 +1,158 @@
+<script setup lang="ts">
+import CheckoutSectionTitle from "./CheckoutSectionTitle.vue";
+
+import type { DeliveryOption } from "../../../interfaces/delivery";
+
+const { icon } = useIcons();
+const { t, locale } = useI18n();
+const { form, profile, profileLoading, fieldErrors, validateField } = useCheckoutOnePage();
+const { formatCurrency } = useCartSummaryFormatting();
+const cartStore = useCartStore();
+
+// "How can THIS order ship?" — the BFF resolves it (live: shipping app
+// incl. matrix pricing/free-above/country restrictions; mock: the demo
+// profile). Reactive on the order value and the shipping country.
+const shippingCountry = computed(() => {
+	const address = profile.value?.addresses.find(a => a.id === form.value.shippingAddressId);
+	return address?.country ?? "DE";
+});
+
+const { data: rates } = useFetch<{
+	managed: boolean;
+	methods: DeliveryOption[];
+	defaultMethod: string | null;
+}>("/api/shipping/rates", {
+	method: "POST",
+	body: computed(() => ({
+		amount: cartStore.subtotal,
+		country: shippingCountry.value,
+	})),
+	headers: computed(() => ({ "x-locale": locale.value })),
+	default: () => null,
+});
+
+const deliveryOptions = computed<DeliveryOption[]>(() =>
+	rates.value?.methods ?? profile.value?.availableDeliveryMethods ?? []);
+
+// A method that became unavailable (country switch, free-above flip)
+// resets the selection to the first available one.
+watch(deliveryOptions, (options) => {
+	if (options.length && !options.some(o => o.method === form.value.deliveryMethod)) {
+		form.value.deliveryMethod = rates.value?.defaultMethod ?? options[0]!.method;
+	}
+});
+</script>
+
+<template>
+	<div class="bg-(--ui-bg) border border-(--ui-border) rounded-xl p-6 space-y-6">
+		<CheckoutSectionTitle
+			:step="2"
+			:title="t('onepage.sections.delivery')"
+		/>
+
+		<!-- Delivery method cards -->
+		<fieldset class="space-y-2">
+			<legend class="text-sm font-medium text-muted">
+				{{ t('onepage.delivery.method') }}
+			</legend>
+
+			<!-- Loading skeleton -->
+			<div
+				v-if="profileLoading"
+				class="grid grid-cols-1 sm:grid-cols-2 gap-3"
+			>
+				<div
+					v-for="index in 2"
+					:key="index"
+					class="p-4 rounded-lg border border-(--ui-border) space-y-1.5"
+				>
+					<div class="h-4 w-32 rounded bg-(--ui-border) animate-pulse" />
+					<div class="h-3 w-24 rounded bg-(--ui-border) animate-pulse" />
+				</div>
+			</div>
+
+			<div
+				v-else
+				class="grid grid-cols-1 sm:grid-cols-2 gap-3"
+			>
+				<button
+					v-for="option in deliveryOptions"
+					:key="option.method"
+					type="button"
+					tabindex="0"
+					class="text-left p-4 rounded-lg border transition-colors cursor-pointer
+					focus:outline-none focus-visible:ring-2 focus-visible:ring-(--ui-primary)"
+					:class="form.deliveryMethod === option.method
+						? 'border-(--ui-primary) bg-primary/5 ring-1 ring-(--ui-primary)'
+						: 'border-(--ui-border) hover:border-(--ui-border-accented)'"
+					:aria-pressed="form.deliveryMethod === option.method"
+					@click="form.deliveryMethod = option.method"
+				>
+					<div class="flex items-start justify-between gap-3">
+						<div class="min-w-0">
+							<p class="text-sm font-semibold text-highlighted">
+								{{ option.label }}
+							</p>
+							<p class="text-xs text-muted mt-0.5">
+								{{ option.eta }} {{ t('onepage.delivery.businessDays') }}
+							</p>
+						</div>
+						<UIcon
+							v-if="form.deliveryMethod === option.method"
+							:name="icon('success')"
+							class="size-5 text-primary shrink-0"
+						/>
+					</div>
+					<p class="text-sm font-medium text-highlighted tabular-nums mt-2">
+						{{ option.price === 0
+							? t('onepage.delivery.free')
+							: formatCurrency(option.price) }}
+					</p>
+				</button>
+			</div>
+		</fieldset>
+
+		<!-- Requested date + delivery note side by side -->
+		<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+			<div class="space-y-1.5">
+				<label class="block text-sm font-medium text-muted">
+					{{ t('onepage.delivery.requestedDate') }}
+				</label>
+				<!-- FormKit input wrapping UCalendar (see formkit.config.ts) -->
+				<FormKit
+					type="datepicker"
+					:value="form.requestedDate"
+					:min-days="0"
+					:max-days="100"
+					disable-weekends
+					@input="(value: unknown) => { form.requestedDate = String(value ?? ''); validateField('requestedDate'); }"
+				/>
+				<p
+					v-if="fieldErrors.requestedDate"
+					class="text-sm text-error-500"
+				>
+					{{ fieldErrors.requestedDate }}
+				</p>
+			</div>
+
+			<div class="space-y-1.5">
+				<label class="block text-sm font-medium text-muted">
+					{{ t('onepage.delivery.deliveryNote') }}
+				</label>
+				<UTextarea
+					v-model="form.deliveryNote"
+					class="w-full"
+					:placeholder="t('onepage.delivery.deliveryNotePlaceholder')"
+					:rows="2"
+				/>
+			</div>
+		</div>
+
+		<!-- Partial delivery -->
+		<UCheckbox
+			v-model="form.partialDelivery"
+			:label="t('onepage.delivery.partialDelivery')"
+			:description="t('onepage.delivery.partialDeliveryHint')"
+		/>
+	</div>
+</template>

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

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+/**
+ * Checkout entry for signed-out visitors: sign in to use the account
+ * checkout, or continue as a business/private guest — each guest path
+ * individually enabled per organization (settings.checkout.guestOrdering).
+ */
+const emit = defineEmits<{
+	(e: "signedIn"): void;
+}>();
+
+const { icon } = useIcons();
+const { t } = useI18n();
+const { settings } = useB2BContext();
+const { customerType } = useCheckoutOnePage();
+
+const guestB2b = computed(() => settings.value?.checkout.guestOrdering.b2b ?? false);
+const guestB2c = computed(() => settings.value?.checkout.guestOrdering.b2c ?? false);
+</script>
+
+<template>
+	<div class="pb-10">
+		<div class="pt-10 mb-8">
+			<h1 class="text-3xl font-semibold text-highlighted pb-3">
+				{{ t('onepage.gate.title') }}
+			</h1>
+			<p class="text-muted">
+				{{ t('onepage.gate.description') }}
+			</p>
+		</div>
+
+		<div class="grid sm:grid-cols-2 gap-10 max-w-5xl">
+			<AuthLoginPanel @success="emit('signedIn')" />
+
+			<div
+				v-if="guestB2b || guestB2c"
+				class="border border-default py-6 px-8 rounded-lg flex flex-col gap-4"
+			>
+				<h2 class="text-xl font-semibold text-highlighted">
+					{{ t('onepage.gate.guestTitle') }}
+				</h2>
+				<p class="text-sm text-muted flex-1">
+					{{ t('onepage.gate.guestDescription') }}
+				</p>
+				<UButton
+					v-if="guestB2b"
+					color="neutral"
+					variant="outline"
+					block
+					tabindex="0"
+					:icon="icon('company')"
+					:label="t('onepage.gate.guestBusiness')"
+					@click="customerType = 'guest-business'"
+				/>
+				<UButton
+					v-if="guestB2c"
+					color="neutral"
+					variant="outline"
+					block
+					tabindex="0"
+					:icon="icon('user')"
+					:label="t('onepage.gate.guestPrivate')"
+					@click="customerType = 'guest-private'"
+				/>
+			</div>
+		</div>
+	</div>
+</template>