feat: extract shop from mp/shop — initial libreshop/shop

Source moved verbatim from mp/shop/ on 2026-04-29; mp was the first concrete adapter consuming the libreshop toolkit. Builds and publishes git.librete.ch/libreshop/shop on every main / v* push via the standard .gitea/workflows/build.yml shared across libreshop components.
2026-04-29 17:48:56 +02:00
commit 44107c0734
134 changed files with 19521 additions and 0 deletions
--- a/pages/checkout/1.vue
+++ b/pages/checkout/1.vue
@@ -0,0 +1,150 @@
+<template>
+	<main class="pt-4 lg:container mx-auto px-4 pb-20">
+		<!-- Error state -->
+		<div v-if="displayState === 'error'" class="py-12">
+			<CheckoutError @retry="cart.retry()" />
+		</div>
+
+		<!-- Loading skeleton -->
+		<div v-else-if="displayState === 'loading'">
+			<Stepper :step="1" />
+			<div class="mt-8 mb-12 max-w-screen-md mx-auto">
+				<div class="h-8 w-3/4 bg-gray-200 rounded mb-8 animate-pulse"></div>
+				<CheckoutSkeleton variant="form" :fields="1" />
+				<div class="flex gap-4 mt-6 animate-pulse">
+					<div class="h-5 w-5 bg-gray-200 rounded"></div>
+					<div class="h-4 w-64 bg-gray-200 rounded"></div>
+				</div>
+				<hr class="my-12" />
+				<div class="h-12 bg-gray-200 rounded-full w-full animate-pulse"></div>
+			</div>
+		</div>
+
+		<!-- Main content -->
+		<div v-else-if="displayState === 'main-content'">
+			<Stepper :step="1" />
+
+			<div class="mt-8 mb-12 flex flex-col gap-8 max-w-screen-md mx-auto">
+				<Heading :level="2" html-tag="h1">Wie lauten deine Kontaktinformationen?</Heading>
+
+				<div v-if="uuid">
+					<form @submit.prevent="submit" class="flex flex-col gap-12">
+						<Input label="E-Mail-Adresse" v-model="emailAddress" :required="true" autocomplete="email" />
+
+						<label class="flex gap-4 text-sm cursor-pointer">
+							<input v-model="acceptedTermsAndConditions" required type="checkbox" class="w-4 cursor-pointer" />
+							<span>
+								Mit der Anmeldung bestätige ich, die
+								<a href="/agb" target="_blank" class="underline" @click="trackEvent('checkout-terms-clicked')">AGB</a>
+								und
+								<a href="/datenschutz" target="_blank" class="underline" @click="trackEvent('checkout-privacy-clicked')">Datenschutzerklärung</a>
+								gelesen und verstanden zu haben und stimme diesen zu.
+							</span>
+						</label>
+
+						<hr />
+
+						<Button type="submit" classes="w-full" :is-pending="formSubmitIsPending">Weiter zur Lieferadresse</Button>
+					</form>
+				</div>
+			</div>
+		</div>
+		<div v-else-if="displayState === 'products-warning'">
+			<div class="bg-yellow-100 border-l-4 border-yellow-500 p-4 mb-8">
+				<p class="text-yellow-700 font-semibold mb-4">Dein Warenkorb ist leer, bitte füge Produkte hinzu, um fortzufahren.</p>
+				<NuxtLink to="/" class="text-yellow-700 hover:underline">Zurück zu unseren Produkten</NuxtLink>
+			</div>
+		</div>
+	</main>
+</template>
+
+<script setup lang="ts">
+import { trackEvent } from "~/utils/trackEvent";
+
+const COOKIE_CONSENT_KEY = "shop:cookie-consent";
+
+const cart = useCart();
+
+const emailAddress = ref("");
+const acceptedTermsAndConditions = ref(false);
+const formSubmitIsPending = ref(false);
+
+const uuid = computed(() => cart.uuid.value);
+
+const displayState = computed(() => {
+	// Error state - show retry option
+	if (cart.hasError.value) {
+		return "error";
+	}
+	// Still initializing - show skeleton
+	if (!cart.isInitialized.value) {
+		return "loading";
+	}
+	// Initialized but no products - show warning
+	if (cart.productsCount.value === 0) {
+		return "products-warning";
+	}
+	// Ready to show form
+	return "main-content";
+});
+
+onMounted(async () => {
+	// Ensure cart is ready before using its values
+	await cart.ensureReady();
+	emailAddress.value = cart.emailAddress.value || "";
+
+	// Track checkout step 1 view
+	trackEvent("checkout-step-1-viewed", {
+		cartValue: cart.total.value,
+		itemCount: cart.productsCount.value
+	});
+});
+
+// Track terms acceptance
+watch(acceptedTermsAndConditions, (accepted) => {
+	if (accepted) {
+		trackEvent("checkout-step-1-terms-accepted");
+	}
+});
+
+async function submit() {
+	if (!uuid.value) {
+		console.error("Cart not found, cannot submit form");
+		return;
+	}
+
+	if (!acceptedTermsAndConditions.value) {
+		console.error("Terms and conditions not accepted, cannot submit form");
+		return;
+	}
+
+	try {
+		formSubmitIsPending.value = true;
+
+		// Use cart.update() to sync local state after API call
+		await cart.update({
+			email: emailAddress.value,
+			acceptedTermsAndConditionsAt: new Date().toISOString()
+		});
+
+		if (import.meta.client) {
+			localStorage.setItem(COOKIE_CONSENT_KEY, new Date().toISOString());
+		}
+
+		trackEvent("checkout-step-1-completed", {
+			cartValue: cart.total.value
+		});
+
+		navigateTo("/checkout/2");
+	} catch (error) {
+		console.error("Error submitting email address", error);
+	} finally {
+		formSubmitIsPending.value = false;
+	}
+}
+
+// SEO
+useSeoMeta({
+	title: "Checkout - E-Mail | MUELLERPRINTS"
+});
+</script>