shop/pages/checkout/1.vue

<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" type="email" :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 />

						<div v-if="errorMessage" class="p-4 lg:p-8 text-center mx-auto rounded-md bg-rose-100" role="alert" data-e2e="checkout-error">
							<span class="text-rose-800">{{ errorMessage }}</span>
						</div>

						<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";
import { checkoutErrorMessageFor } from "~/utils/checkoutError";

const COOKIE_CONSENT_KEY = "shop:cookie-consent";

const cart = useCart();

const emailAddress = ref("");
const acceptedTermsAndConditions = ref(false);
const formSubmitIsPending = ref(false);
const errorMessage = ref("");

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;
		errorMessage.value = "";

		// 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);
		errorMessage.value = checkoutErrorMessageFor(error);
	} finally {
		formSubmitIsPending.value = false;
	}
}

// SEO
useSeoMeta({
	title: "Checkout - E-Mail | MUELLERPRINTS"
});
</script>