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;
 	}