From f6e88469b374880c0ecf20f56b709be942805c69 Mon Sep 17 00:00:00 2001 From: Dominik Milacher Date: Wed, 15 Oct 2025 10:04:43 +0200 Subject: [PATCH] Update contact form --- apps/panoramablick-saalbach.at/app.config.ts | 64 ++++++++++++++++--- apps/panoramablick-saalbach.at/app.vue | 1 - .../pages/[locale]/[variant]/contact.vue | 49 ++++++-------- .../layers/content/utils/content-types.ts | 17 ++--- 4 files changed, 84 insertions(+), 47 deletions(-) diff --git a/apps/panoramablick-saalbach.at/app.config.ts b/apps/panoramablick-saalbach.at/app.config.ts index da1c822..48282fe 100644 --- a/apps/panoramablick-saalbach.at/app.config.ts +++ b/apps/panoramablick-saalbach.at/app.config.ts @@ -22,6 +22,7 @@ const matrix: ContentMatrix = { } const business: BusinessInfo = { + uid: 'panoramablick-saalbach.at', name: { de: 'Landhaus Panoramablick', en: 'Guesthouse Panoramablick' @@ -485,7 +486,6 @@ export default defineAppConfig({ contact: { title: { de: 'Kontakt aufnehmen', - 'de@winter': 'Winterkontakt', en: 'Contact us' }, description: { @@ -508,24 +508,68 @@ export default defineAppConfig({ }, form: { name: { - de: 'Ihr Name', - en: 'Your name' + prompt: { + de: 'Ihr Name', + en: 'Your name' + }, + invalid: { + de: 'Name zu kurz', + en: 'Name too short' + } }, email: { - de: 'Ihre E-Mail', - en: 'Your email address' + prompt: { + de: 'Ihre E-Mail', + en: 'Your email address' + }, + invalid: { + de: 'E-Mail Adresse nicht gültig', + en: 'Email address not valid' + } }, subject: { - de: 'Betreff', - en: 'Subject' + prompt: { + de: 'Betreff', + en: 'Subject' + }, + invalid: { + de: 'Betreff zu kurz', + en: 'Subject too short' + } }, message: { - de: 'Ihre Anfrage', - en: 'Your inquiry' + prompt: { + de: 'Ihre Anfrage', + en: 'Your inquiry' + }, + invalid: { + de: 'Nachricht zu kurz', + en: 'Message too short' + } }, send: { de: 'Senden', en: 'Send' + }, + sent: { + title: { + de: 'Nachricht gesendet', + en: 'Message sent' + }, + description: { + de: 'Vielen Dank - wir melden uns bald.', + en: 'Thank you - we\'ll be in touch soon.' + } + }, + error: { + title: { + de: 'Fehler', + en: 'Error' + }, + description: { + de: 'Die Nachricht konnte nicht versendet werden - bitte versuchen Sie es erneut.', + en: 'The message could not be sent - please try again.' + } } }, heroes: { @@ -545,7 +589,7 @@ export default defineAppConfig({ }, image: '/family/sabrina-daniel.webp' } - } + }, }, apartments: { 'highlight': { diff --git a/apps/panoramablick-saalbach.at/app.vue b/apps/panoramablick-saalbach.at/app.vue index 840a41f..c5667b4 100644 --- a/apps/panoramablick-saalbach.at/app.vue +++ b/apps/panoramablick-saalbach.at/app.vue @@ -10,7 +10,6 @@ const { add } = useToast() const shown = useCookie('cookie-toast-shown', { maxAge: 60 * 60 * 24 * 7 }) onMounted(() => { - console.log("MIAU", c.value) if (!shown.value) { add({ title: c.value.cookies.title, diff --git a/apps/panoramablick-saalbach.at/pages/[locale]/[variant]/contact.vue b/apps/panoramablick-saalbach.at/pages/[locale]/[variant]/contact.vue index 0e00d91..2c8f19d 100644 --- a/apps/panoramablick-saalbach.at/pages/[locale]/[variant]/contact.vue +++ b/apps/panoramablick-saalbach.at/pages/[locale]/[variant]/contact.vue @@ -45,23 +45,23 @@

- + - + + :placeholder="c.contact.form.email.prompt"/> - + + :placeholder="c.contact.form.message.prompt"/> @@ -103,16 +103,16 @@ import * as v from 'valibot' import type {FormSubmitEvent} from '@nuxt/ui' /* ───── validation schema ───── */ -const schema = v.object({ - name: v.pipe(v.string(), v.minLength(2, 'Bitte Namen eingeben')), - email: v.pipe(v.string(), v.email('Ungültige E-Mail')), - subject: v.pipe(v.string(), v.minLength(3, 'Betreff fehlt')), - message: v.pipe(v.string(), v.minLength(10, 'Nachricht ist zu kurz')) -}) -type Schema = v.InferOutput +const schema = computed(() => v.object({ + name: v.pipe(v.string(), v.minLength(2, c.value.contact.form.name.invalid)), + email: v.pipe(v.string(), v.email(c.value.contact.form.email.invalid)), + subject: v.pipe(v.string(), v.minLength(3, c.value.contact.form.subject.invalid)), + message: v.pipe(v.string(), v.minLength(10, c.value.contact.form.message.invalid)) +})) +//type Schema = v.InferOutput /* ───── reactive form state ───── */ -const state = reactive({ +const state = reactive({ name: '', email: '', subject: '', message: '' }) @@ -120,17 +120,8 @@ const toast = useToast() /* ───── submit handler ───── */ async function onSubmit(event: FormSubmitEvent) { - const config = useRuntimeConfig() - const hotelId = config.public.hotelId - - if (!hotelId) { - toast.add({ - title: 'Fehler', - description: 'Hotel-ID ist nicht konfiguriert!', - color: 'primary' - }) - throw new Error('Hotel ID not configured') - } + const config = useAppConfig() + const hotelId = config.content.business.uid ?? '' try { await $fetch('https://api.dominikmilacher.com/contact', { @@ -143,17 +134,19 @@ async function onSubmit(event: FormSubmitEvent) { }) toast.add({ - title: 'Nachricht gesendet', - description: 'Vielen Dank – wir melden uns bald.', + title: c.value.contact.form.sent.title, + description: c.value.contact.form.sent.description, color: 'primary' }) /* reset fields */ Object.assign(state, {name: '', email: '', subject: '', message: ''}) } catch (err: any) { + //console.log(err?.data?.detail) + //console.log(err?.message) toast.add({ - title: 'Fehler', - description: err?.data?.detail ?? err?.message ?? 'Nachricht konnte nicht gesendet werden.', + title: c.value.contact.form.error.title, + description: c.value.contact.form.error.description, color: 'primary' }) } diff --git a/packages/layers/content/utils/content-types.ts b/packages/layers/content/utils/content-types.ts index 60d2acd..8aa7217 100644 --- a/packages/layers/content/utils/content-types.ts +++ b/packages/layers/content/utils/content-types.ts @@ -30,13 +30,14 @@ export interface ContentMatrix { } export interface BusinessInfo { - name: Translations, - operator: Translations, - address: Translations, - phone: Translations, - email: Translations, - vat: Translations, - authority: Translations, - membership: Translations, + uid: string + name: Translations + operator: Translations + address: Translations + phone: Translations + email: Translations + vat: Translations + authority: Translations + membership: Translations regulation: Translations }