feat(checkout): show a German message when a checkout step fails

checkoutErrorMessage (utils/checkoutError.ts) maps the status and body of a
failed request, the shop's answer or a raw CMS (Strapi) error, to one fixed
message for the customer, addressed with "du": an invalid e-mail address
(when data.email is among the rejected fields), other invalid input, an order
already paid, a product no longer available, an order not ready for checkout
(naming the missing steps), a payment that does not fit the order or an order
changed during the payment ("Bitte starte die Zahlung neu"), PayPal not
reachable ("versuche es in ein paar Minuten noch einmal"), a payment PayPal
may have taken that the CMS could not confirm or record ("Bitte bezahle nicht
noch einmal"), and a general fallback. It never shows the server's text.

Steps 1 and 2 show the message above their submit button, in the style of
step 3's payment error, instead of logging the error only. Step 3 shows it
for a failed PayPal order creation or capture. The e-mail input of step 1 is
type="email" (Input.vue takes a type).

Refs libretech/mp#71

pages/checkout/1.vue

@@ -29,7 +29,7 @@
 
 				<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" />
+						<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" />
@@ -44,6 +44,10 @@
 
 						<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>
@@ -60,6 +64,7 @@
 
 <script setup lang="ts">
 import { trackEvent } from "~/utils/trackEvent";
+import { checkoutErrorMessageFor } from "~/utils/checkoutError";
 
 const COOKIE_CONSENT_KEY = "shop:cookie-consent";
 
@@ -68,6 +73,7 @@ const cart = useCart();
 const emailAddress = ref("");
 const acceptedTermsAndConditions = ref(false);
 const formSubmitIsPending = ref(false);
+const errorMessage = ref("");
 
 const uuid = computed(() => cart.uuid.value);
 
@@ -120,6 +126,7 @@ async function submit() {
 
 	try {
 		formSubmitIsPending.value = true;
+		errorMessage.value = "";
 
 		// Use cart.update() to sync local state after API call
 		await cart.update({
@@ -138,6 +145,7 @@ async function submit() {
 		navigateTo("/checkout/2");
 	} catch (error) {
 		console.error("Error submitting email address", error);
+		errorMessage.value = checkoutErrorMessageFor(error);
 	} finally {
 		formSubmitIsPending.value = false;
 	}

pages/checkout/2.vue

@@ -97,6 +97,10 @@
 
 					<hr class="my-12" />
 
+					<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>
+
 					<div class="mt-12">
 						<Button classes="w-full" type="submit" :is-pending="formSubmitIsPending">Weiter zur Zahlung</Button>
 					</div>
@@ -110,6 +114,7 @@
 import type { Address, StructuredAddress } from "~/types";
 import { trackEvent } from "~/utils/trackEvent";
 import { numberFormatter } from "~/utils/numberFormatter";
+import { checkoutErrorMessageFor } from "~/utils/checkoutError";
 
 const cart = useCart();
 const shopApi = useShopApi();
@@ -134,6 +139,7 @@ const displayState = computed(() => {
 });
 const showOptionalDeliveryAddress = ref(false);
 const formSubmitIsPending = ref(false);
+const errorMessage = ref("");
 const deliveryMethods = ref<any[]>([]);
 const selectedDeliveryMethod = ref<number | null>(null);
 
@@ -243,6 +249,7 @@ async function submit() {
 
 	try {
 		formSubmitIsPending.value = true;
+		errorMessage.value = "";
 
 		// Use cart.update() to sync local state after API call
 		await cart.update({
@@ -262,6 +269,7 @@ async function submit() {
 		navigateTo("/checkout/3");
 	} catch (error) {
 		console.error("Error submitting address form:", error);
+		errorMessage.value = checkoutErrorMessageFor(error);
 	} finally {
 		formSubmitIsPending.value = false;
 	}

pages/checkout/3.vue

@@ -64,7 +64,7 @@
 					<div v-else>
 						<div v-if="!hasPaymentError" id="paypal-button-container" class="payment sticky top-4" ref="paymentContainer"></div>
 						<div v-else class="p-4 lg:p-8 text-center mx-auto rounded-md bg-rose-100" data-e2e="payment-error">
-							<span class="text-rose-800">Es ist ein Fehler aufgetreten. Bitte versuche es erneut.</span>
+							<span class="text-rose-800">{{ paymentErrorMessage || "Es ist ein Fehler aufgetreten. Bitte versuche es erneut." }}</span>
 						</div>
 
 						<!-- Trust signals -->
@@ -190,6 +190,7 @@
 <script setup lang="ts">
 import { numberFormatter } from "~/utils/numberFormatter";
 import { trackEvent } from "~/utils/trackEvent";
+import { checkoutErrorMessageFor } from "~/utils/checkoutError";
 import type { Order } from "~/types";
 
 const config = useRuntimeConfig();
@@ -197,6 +198,7 @@ const shopApi = useShopApi();
 const CART_UUID_KEY = "shop:cart";
 
 const hasPaymentError = ref(false);
+const paymentErrorMessage = ref("");
 const hasOrderError = ref(false);
 const hasAuthorisedPayment = ref(false);
 const orderData = ref<Order>({} as Order);
@@ -298,6 +300,7 @@ async function initializePayPalButtons() {
 						return response.id;
 					} catch (error) {
 						console.error("Error creating PayPal order:", error);
+						paymentErrorMessage.value = checkoutErrorMessageFor(error);
 						hasPaymentError.value = true;
 						trackEvent("checkout-payment-error", {
 							stage: "create-order",
@@ -324,6 +327,7 @@ async function initializePayPalButtons() {
 						}
 					} catch (error) {
 						console.error("Error capturing payment:", error);
+						paymentErrorMessage.value = checkoutErrorMessageFor(error);
 						hasPaymentError.value = true;
 						trackEvent("checkout-payment-error", {
 							stage: "capture-exception",