libretech
8931afc670
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
71 lines
1.6 KiB
Vue
71 lines
1.6 KiB
Vue
<template>
|
|
<label
|
|
class="focus-within:ring-4 focus-within:ring-offset-2 ring-gray-500 relative w-full border border-gray-500 rounded-md cursor-text h-12 overflow-hidden"
|
|
>
|
|
<span :class="spanClasses" class="absolute left-2 top-0 transition-all select-none">{{ label }}</span>
|
|
<input
|
|
:value="modelValue"
|
|
:type="type"
|
|
@input="update(($event.target as HTMLInputElement).value)"
|
|
:required="required"
|
|
class="outline-none w-full h-full rounded-sm pt-4 p-2 border-transparent"
|
|
placeholder=""
|
|
:autocomplete="autocomplete"
|
|
:aria-label="label"
|
|
@focus="inputFocused = true"
|
|
@blur="inputFocused = false"
|
|
/>
|
|
</label>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
type Autocomplete =
|
|
| "given-name"
|
|
| "family-name"
|
|
| "email"
|
|
| "tel"
|
|
| "street-address"
|
|
| "postal-code"
|
|
| "country-name"
|
|
| "off"
|
|
| "on"
|
|
| "name"
|
|
| "address-level2"
|
|
| "country";
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
modelValue?: string;
|
|
label?: string;
|
|
required?: boolean;
|
|
labelClass?: string;
|
|
inputClass?: string;
|
|
autocomplete?: Autocomplete;
|
|
type?: "text" | "email";
|
|
}>(),
|
|
{
|
|
autocomplete: "off",
|
|
type: "text"
|
|
}
|
|
);
|
|
|
|
const emit = defineEmits<{
|
|
"update:modelValue": [value: string];
|
|
}>();
|
|
|
|
const inputFocused = ref(false);
|
|
|
|
const spanClasses = computed(() => ({
|
|
"text-md pt-3": !inputFocused.value && !props.modelValue,
|
|
"text-xs pt-[3px]": inputFocused.value || props.modelValue,
|
|
"text-gray-500": !inputFocused.value && !props.modelValue,
|
|
"text-gray-400": inputFocused.value || props.modelValue
|
|
}));
|
|
|
|
function update(newValue?: string) {
|
|
if (newValue !== undefined) {
|
|
emit("update:modelValue", newValue);
|
|
}
|
|
}
|
|
</script>
|