@revenexx/cover 0.1.0

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

@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import CheckoutSectionTitle from "./CheckoutSectionTitle.vue";
+import type { CheckoutGuestAddress } from "../../../composables/useCheckoutOnePage";
+
+/**
+ * Guest checkout details: contact data and the delivery address, with an
+ * optional separate billing address. Business guests enter company data;
+ * private guests order without it.
+ */
+const { t } = useI18n();
+const {
+	form, customerType, guestContact, guestShipping, guestBilling, fieldErrors, validateField,
+} = useCheckoutOnePage();
+
+const isBusiness = computed(() => customerType.value === "guest-business");
+
+const COUNTRIES = ["DE", "AT", "CH"] as const;
+
+const countryItems = computed(() => COUNTRIES.map(code => ({
+	value: code,
+	label: t(`onepage.guest.countries.${code}`),
+})));
+
+interface AddressFieldRow {
+	key: keyof CheckoutGuestAddress;
+	labelKey: string;
+	half?: boolean;
+	businessOnly?: boolean;
+}
+
+const addressFields: AddressFieldRow[] = [
+	{ key: "companyName", labelKey: "onepage.guest.companyName", businessOnly: true },
+	{ key: "firstName", labelKey: "onepage.guest.firstName", half: true },
+	{ key: "lastName", labelKey: "onepage.guest.lastName", half: true },
+	{ key: "street", labelKey: "onepage.guest.street" },
+	{ key: "postalCode", labelKey: "onepage.guest.postalCode", half: true },
+	{ key: "city", labelKey: "onepage.guest.city", half: true },
+];
+</script>
+
+<template>
+	<div class="bg-(--ui-bg) border border-(--ui-border) rounded-xl p-6 space-y-6">
+		<div class="flex items-center justify-between gap-3">
+			<CheckoutSectionTitle
+				:step="1"
+				:title="t('onepage.sections.guestDetails')"
+			/>
+			<UBadge
+				color="neutral"
+				variant="subtle"
+				:label="isBusiness ? t('onepage.gate.guestBusiness') : t('onepage.gate.guestPrivate')"
+			/>
+		</div>
+
+		<!-- Contact -->
+		<div class="grid sm:grid-cols-2 gap-4">
+			<UFormField
+				:label="t('onepage.guest.email')"
+				required
+				:error="fieldErrors.guestEmail"
+			>
+				<UInput
+					v-model="guestContact.email"
+					type="email"
+					autocomplete="email"
+					class="w-full"
+					@blur="validateField('guestEmail')"
+				/>
+			</UFormField>
+			<UFormField :label="t('onepage.guest.phone')">
+				<UInput
+					v-model="guestContact.phone"
+					type="tel"
+					autocomplete="tel"
+					class="w-full"
+				/>
+			</UFormField>
+		</div>
+
+		<!-- Delivery address -->
+		<div class="space-y-3">
+			<p class="text-sm font-medium text-muted">
+				{{ t('onepage.address.shipping') }}
+			</p>
+			<div class="grid sm:grid-cols-2 gap-4">
+				<template
+					v-for="field in addressFields"
+					:key="field.key"
+				>
+					<UFormField
+						v-if="!field.businessOnly || isBusiness"
+						:label="t(field.labelKey)"
+						required
+						:class="field.half ? '' : 'sm:col-span-2'"
+					>
+						<UInput
+							v-model="guestShipping[field.key]"
+							class="w-full"
+						/>
+					</UFormField>
+				</template>
+				<UFormField
+					:label="t('onepage.guest.country')"
+					required
+				>
+					<USelect
+						v-model="guestShipping.country"
+						:items="countryItems"
+						class="w-full"
+					/>
+				</UFormField>
+			</div>
+		</div>
+
+		<!-- Billing address -->
+		<div class="space-y-3">
+			<UCheckbox
+				v-model="form.billingSameAsShipping"
+				:label="t('onepage.address.sameAsShipping')"
+			/>
+			<div
+				v-if="!form.billingSameAsShipping"
+				class="grid sm:grid-cols-2 gap-4"
+			>
+				<template
+					v-for="field in addressFields"
+					:key="`billing-${field.key}`"
+				>
+					<UFormField
+						v-if="!field.businessOnly || isBusiness"
+						:label="t(field.labelKey)"
+						required
+						:class="field.half ? '' : 'sm:col-span-2'"
+					>
+						<UInput
+							v-model="guestBilling[field.key]"
+							class="w-full"
+						/>
+					</UFormField>
+				</template>
+				<UFormField
+					:label="t('onepage.guest.country')"
+					required
+				>
+					<USelect
+						v-model="guestBilling.country"
+						:items="countryItems"
+						class="w-full"
+					/>
+				</UFormField>
+			</div>
+		</div>
+	</div>
+</template>

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

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import CheckoutSectionTitle from "./CheckoutSectionTitle.vue";
+/**
+ * Order information on the document head: customer order number (mandatory
+ * per organization flag), quote reference, remarks and the option to skip
+ * the order confirmation e-mail (signed-in customers only).
+ */
+const { t } = useI18n();
+const { form, isGuest, orderNumberRequired, fieldErrors, validateField } = useCheckoutOnePage();
+</script>
+
+<template>
+	<div class="bg-(--ui-bg) border border-(--ui-border) rounded-xl p-6 space-y-4">
+		<CheckoutSectionTitle
+			:step="4"
+			:title="t('onepage.sections.orderInfo')"
+		/>
+
+		<div class="grid sm:grid-cols-2 gap-4">
+			<UFormField
+				:label="t('onepage.orderInfo.orderNumber')"
+				:required="orderNumberRequired"
+				:error="fieldErrors.orderNumber"
+			>
+				<UInput
+					v-model="form.orderNumber"
+					maxlength="20"
+					class="w-full"
+					:placeholder="t('onepage.orderInfo.orderNumberPlaceholder')"
+					@blur="validateField('orderNumber')"
+				/>
+			</UFormField>
+			<UFormField
+				v-if="!isGuest"
+				:label="t('onepage.orderInfo.quoteNumber')"
+			>
+				<UInput
+					v-model="form.quoteNumber"
+					maxlength="20"
+					class="w-full"
+					:placeholder="t('onepage.orderInfo.quoteNumberPlaceholder')"
+				/>
+			</UFormField>
+		</div>
+
+		<UFormField :label="t('onepage.notes.orderNote')">
+			<UTextarea
+				v-model="form.orderNote"
+				:placeholder="t('onepage.notes.orderNotePlaceholder')"
+				:rows="3"
+				class="w-full"
+			/>
+		</UFormField>
+
+		<UCheckbox
+			v-if="!isGuest"
+			v-model="form.noOrderConfirmation"
+			:label="t('onepage.orderInfo.noConfirmation')"
+			:description="t('onepage.orderInfo.noConfirmationHint')"
+		/>
+	</div>
+</template>

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

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import CheckoutAddressSection from "../../../components/checkout/onepage/CheckoutAddressSection.vue";
+import CheckoutDeliverySection from "../../../components/checkout/onepage/CheckoutDeliverySection.vue";
+import CheckoutGate from "../../../components/checkout/onepage/CheckoutGate.vue";
+import CheckoutGuestDetailsSection from "../../../components/checkout/onepage/CheckoutGuestDetailsSection.vue";
+import CheckoutNotesSection from "../../../components/checkout/onepage/CheckoutNotesSection.vue";
+import CheckoutPaymentSection from "../../../components/checkout/onepage/CheckoutPaymentSection.vue";
+import CheckoutSummarySection from "../../../components/checkout/onepage/CheckoutSummarySection.vue";
+import CheckoutWorkflowPanel from "../../../components/checkout/onepage/CheckoutWorkflowPanel.vue";
+
+const { t } = useI18n();
+const checkout = useCheckoutOnePage();
+const { isGuest, customerType } = checkout;
+const { role } = useB2BContext();
+
+// Signed-out visitors pass the gate first: sign in, or continue as a
+// business/private guest (per organization flags). The role comes from
+// the SSR-capable B2B context, so signed-in users get the checkout
+// server-rendered without a gate flash.
+const needsGate = computed(() => !role.value && !isGuest.value);
+
+const isRequester = computed(() => role.value === "requester");
+const selectedWorkflowId = useState<string | null>("cart-selected-workflow", () => null);
+
+watch(
+	() => checkout.profile.value,
+	(p) => {
+		if (p) {
+			checkout.initFromProfile(p);
+		}
+	},
+	{ immediate: true },
+);
+
+async function onSignedIn(): Promise<void> {
+	customerType.value = "account";
+	await refreshNuxtData(["checkout-profile", "b2b-context"]);
+}
+</script>
+
+<template>
+	<CheckoutGate
+		v-if="needsGate"
+		@signed-in="onSignedIn"
+	/>
+
+	<div
+		v-else
+		class="pb-10"
+	>
+		<div class="pt-10 mb-8">
+			<h1 class="text-3xl font-semibold text-highlighted">
+				{{ t('onepage.title') }}
+			</h1>
+		</div>
+
+		<div class="grid lg:grid-cols-[1fr_360px] xl:grid-cols-[1fr_420px] gap-8 items-start">
+			<!-- Left: form sections -->
+			<div class="space-y-6">
+				<CheckoutGuestDetailsSection v-if="isGuest" />
+				<CheckoutAddressSection v-else />
+				<CheckoutDeliverySection />
+				<CheckoutPaymentSection />
+				<CheckoutNotesSection />
+			</div>
+
+			<!-- Right: summary (sticky on desktop) -->
+			<div class="lg:sticky lg:top-6 space-y-4">
+				<CheckoutWorkflowPanel
+					v-if="isRequester"
+					:workflow-id="selectedWorkflowId"
+				/>
+				<CheckoutSummarySection />
+			</div>
+		</div>
+	</div>
+</template>

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

@@ -0,0 +1,181 @@
+<script setup lang="ts">
+import CheckoutSectionTitle from "./CheckoutSectionTitle.vue";
+
+import type { PaymentMethod, PaymentOption } from "../../../interfaces/payment";
+
+const { icon } = useIcons();
+const { t, locale } = useI18n();
+const { form, profile, profileLoading, fieldErrors, validateField } = useCheckoutOnePage();
+const cartStore = useCartStore();
+
+// "What can THIS buyer pay with?" — the BFF resolves it (live: payments
+// app incl. fees/restrictions; mock: the demo profile). Reactive on the
+// order value and the billing country.
+const billingCountry = computed(() => {
+	const addressId = form.value.billingSameAsShipping ? form.value.shippingAddressId : form.value.billingAddressId;
+	return profile.value?.addresses.find(a => a.id === addressId)?.country ?? "DE";
+});
+
+const { data: eligible } = useFetch<{
+	managed: boolean;
+	methods: PaymentOption[];
+	defaultMethod: string | null;
+}>("/api/payment/methods", {
+	method: "POST",
+	body: computed(() => ({
+		amount: cartStore.total,
+		country: billingCountry.value,
+	})),
+	headers: computed(() => ({ "x-locale": locale.value })),
+	default: () => null,
+});
+
+const paymentOptions = computed<PaymentOption[]>(() =>
+	eligible.value?.methods ?? profile.value?.availablePaymentMethods ?? []);
+
+// A method that became ineligible (country switch, order value) resets
+// the selection to the first available one.
+watch(paymentOptions, (options) => {
+	if (options.length && !options.some(o => o.method === form.value.paymentMethod)) {
+		form.value.paymentMethod = eligible.value?.defaultMethod ?? options[0]!.method;
+	}
+});
+
+const formatFee = (option: PaymentOption): string | null => {
+	if (!option.fee || option.fee <= 0) {
+		return null;
+	}
+	return t("onepage.payment.fee", { fee: option.fee.toFixed(2).replace(".", ",") });
+};
+
+const costCenterOptions = computed(() =>
+	profile.value?.costCenters.map(cc => ({
+		label: `${cc.code} – ${cc.label}`,
+		value: cc.id,
+	})) ?? [],
+);
+
+function selectMethod(method: PaymentMethod) {
+	form.value.paymentMethod = method;
+	if (method !== "po_number") {
+		form.value.poNumber = "";
+	}
+	if (method !== "cost_center") {
+		form.value.costCenterId = "";
+	}
+	validateField("paymentMethod");
+}
+
+const showPoNumber = computed(() => form.value.paymentMethod === "po_number");
+const showCostCenter = computed(() =>
+	form.value.paymentMethod === "cost_center"
+	&& (profile.value?.costCenters.length ?? 0) > 0);
+</script>
+
+<template>
+	<div class="bg-(--ui-bg) border border-(--ui-border) rounded-xl p-6 space-y-6">
+		<CheckoutSectionTitle
+			:step="3"
+			:title="t('onepage.sections.payment')"
+		/>
+
+		<fieldset class="space-y-2">
+			<legend class="text-sm font-medium text-muted">
+				{{ t('onepage.payment.method') }}
+			</legend>
+
+			<!-- Loading skeleton -->
+			<div
+				v-if="profileLoading"
+				class="grid grid-cols-1 sm:grid-cols-3 gap-3"
+			>
+				<div
+					v-for="index in 3"
+					:key="index"
+					class="p-4 rounded-lg border border-(--ui-border) space-y-1.5"
+				>
+					<div class="h-4 w-24 rounded bg-(--ui-border) animate-pulse" />
+					<div class="h-3 w-32 rounded bg-(--ui-border) animate-pulse" />
+				</div>
+			</div>
+
+			<div
+				v-else
+				class="grid grid-cols-1 sm:grid-cols-3 gap-3"
+			>
+				<button
+					v-for="option in paymentOptions"
+					: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.paymentMethod === option.method
+						? 'border-(--ui-primary) bg-primary/5 ring-1 ring-(--ui-primary)'
+						: 'border-(--ui-border) hover:border-(--ui-border-accented)'"
+					:aria-pressed="form.paymentMethod === option.method"
+					@click="selectMethod(option.method)"
+				>
+					<div class="flex items-start justify-between gap-3">
+						<p class="text-sm font-semibold text-highlighted">
+							{{ option.label }}
+						</p>
+						<UIcon
+							v-if="form.paymentMethod === option.method"
+							:name="icon('success')"
+							class="size-5 text-primary shrink-0"
+						/>
+					</div>
+					<p
+						v-if="option.description"
+						class="text-xs text-muted mt-1"
+					>
+						{{ option.description }}
+					</p>
+					<p
+						v-if="formatFee(option)"
+						class="text-xs text-warning-600 mt-1"
+					>
+						{{ formatFee(option) }}
+					</p>
+				</button>
+			</div>
+
+			<p
+				v-if="fieldErrors.paymentMethod"
+				class="text-sm text-error-500"
+			>
+				{{ fieldErrors.paymentMethod }}
+			</p>
+		</fieldset>
+
+		<!-- Method-specific fields -->
+		<div
+			v-if="showPoNumber"
+			class="space-y-1.5"
+		>
+			<label class="block text-sm font-medium text-muted">
+				{{ t('onepage.payment.poNumber') }}
+			</label>
+			<UInput
+				v-model="form.poNumber"
+				class="w-full sm:max-w-sm"
+				:placeholder="t('onepage.payment.poNumberPlaceholder')"
+			/>
+		</div>
+
+		<div
+			v-else-if="showCostCenter"
+			class="space-y-1.5"
+		>
+			<label class="block text-sm font-medium text-muted">
+				{{ t('onepage.payment.costCenter') }}
+			</label>
+			<USelect
+				v-model="form.costCenterId"
+				class="w-full sm:max-w-sm"
+				:items="costCenterOptions"
+			/>
+		</div>
+	</div>
+</template>

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

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+/** Numbered section header of the one-page checkout. */
+defineProps<{
+	step: number;
+	title: string;
+}>();
+</script>
+
+<template>
+	<h2 class="flex items-center gap-3 text-lg font-semibold text-highlighted">
+		<span
+			class="flex size-7 shrink-0 items-center justify-center rounded-full
+			bg-primary/10 text-(--ui-primary) text-sm font-semibold tabular-nums"
+			aria-hidden="true"
+		>{{ step }}</span>
+		{{ title }}
+	</h2>
+</template>