{"version":3,"file":"BlokContactForm.2cd13994.js","sources":["../../../../storyblok/Blok/BlokContactForm.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nconst runtimeConfig = useRuntimeConfig()\n\nconst contactFirstName = ref('')\nconst contactLastName = ref('')\nconst contactEmail = ref('')\nconst contactSubject = ref('')\nconst contactMessage = ref('')\nconst formSubmitted = ref(false)\nconst formError = ref(false)\nconst submittingForm = ref(false)\n\nconst isValidFirstName = computed(() => contactFirstName.value.length > 0)\nconst isValidLastName = computed(() => contactLastName.value.length > 0)\nconst isValidSubject = computed(() => contactSubject.value.length > 0)\nconst isValidMessage = computed(() => contactMessage.value.length > 0)\nconst isValidEmail = computed(() => {\n  const text = contactEmail.value.toString()\n  const regex = /.+@.+..+/\n  return regex.test(text)\n})\n\nconst isValidForm = computed(\n  () =>\n    isValidFirstName.value &&\n    isValidLastName.value &&\n    isValidEmail.value &&\n    isValidSubject.value &&\n    isValidMessage.value\n)\n\nconst submitForm = () => {\n  formError.value = false\n  submittingForm.value = true\n\n  fetch(runtimeConfig.public.FORMSPARK.ACTION_URL, {\n    method: 'POST',\n    headers: {\n      'Content-Type': 'application/json',\n      Accept: 'application/json',\n    },\n    body: JSON.stringify({\n      firstName: contactFirstName.value,\n      lastName: contactLastName.value,\n      email: contactEmail.value,\n      subject: contactSubject.value,\n      message: contactMessage.value,\n    }),\n  }).then((res) => {\n    if (res.status === 200) {\n      formSubmitted.value = true\n    } else {\n      formError.value = true\n    }\n\n    submittingForm.value = false\n  })\n}\n</script>\n\n<template lang=\"pug\">\ndiv(class=\"flex justify-center\")\n  TransitionGroup\n    section(\n      v-if=\"!formSubmitted\"\n      class=\"max-w-640 w-full mt-18 md:mt-0\"\n      key=\"form-entry\"\n    )\n      form(@submit.prevent=\"submitForm\")\n        div(class=\"form-field flex flex-col mb-18\")\n          input(\n            type=\"text\"\n            name=\"firstName\"\n            v-model=\"contactFirstName\"\n            :class=\"{ 'is-valid': isValidFirstName }\"\n            placeholder=\"Enter your first name\"\n            required\n          )\n          label First Name\n        div(class=\"form-field flex flex-col mb-18\")\n          input(\n            type=\"text\"\n            name=\"lastName\"\n            v-model=\"contactLastName\"\n            :class=\"{ 'is-valid': isValidLastName }\"\n            placeholder=\"Enter your last name\"\n            required\n          )\n          label Last Name\n        div(class=\"form-field flex flex-col mb-18\")\n          input(\n            type=\"email\"\n            name=\"email\"\n            v-model=\"contactEmail\"\n            :class=\"{ 'is-valid': isValidEmail }\"\n            placeholder=\"Enter your email\"\n            required\n          )\n          label Email address\n        div(class=\"form-field flex flex-col mb-18\")\n          input(\n            type=\"text\"\n            name=\"message\"\n            v-model=\"contactSubject\"\n            :class=\"{ 'is-valid': isValidSubject }\"\n            placeholder=\"Please enter a subject\"\n            required\n          )\n          label Subject\n        div(class=\"form-field flex flex-col mb-9\")\n          textarea(\n            rows=\"6\"\n            name=\"message\"\n            v-model=\"contactMessage\"\n            :class=\"{ 'is-valid': isValidMessage }\"\n            placeholder=\"Please enter a message\"\n            required\n          )\n          label Message\n        div(class=\"form-submit text-right\")\n          button(\n            type=\"submit\"\n            class=\"button button--md button--blue\"\n            :disabled=\"!isValidForm || submittingForm\"\n          )\n            span(v-if=\"!submittingForm\") Send\n            span(v-else) Sending...\n            MaterialSymbol(v-if=\"!submittingForm\") arrow_forward\n        div(v-show=\"formError\")\n          label An error occurred - please try again later.\n    section(\n      v-else\n      key=\"form-success\"\n      class=\"w-full max-w-640\"\n    )\n      div(class=\"mt-18 md:mt-0 w-full\")\n        h3 Thanks for your message, {{ contactFirstName }}.\n        p We'll be in touch as soon as possible.\n</template>\n\n<style lang=\"pcss\">\ninput:-webkit-autofill,\ninput:-webkit-autofill:hover,\ninput:-webkit-autofill:focus,\ntextarea:-webkit-autofill,\ntextarea:-webkit-autofill:hover,\ntextarea:-webkit-autofill:focus,\nselect:-webkit-autofill,\nselect:-webkit-autofill:hover,\nselect:-webkit-autofill:focus {\n  @apply bg-highlight text-blue-dark;\n  -webkit-text-fill-color: theme('colors.blue.dark');\n  -webkit-box-shadow: none;\n  transition: background-color 5000s ease-in-out 0s;\n}\n\nform {\n  label {\n    @apply flex items-center justify-between text-base font-medium px-12 py-3 -order-1;\n  }\n  input[type=\"text\"],\n  input[type=\"email\"],\n  textarea {\n    @apply shadow-sm appearance-none w-full text-md px-12 py-9 md:py-12 rounded text-blue border-2 border-transparent placeholder:text-grey-400 placeholder:transition-transform placeholder:duration-700 placeholder:ease-in-out focus:placeholder:text-grey-500 focus:placeholder:translate-x-9 focus:border-2 focus:border-highlight outline-none;\n\n    &.is-valid {\n      @apply bg-highlight text-blue-dark placeholder:text-blue;\n\n      & + label {\n        &::after {\n          content:'check_circle';\n          @apply font-icon text-lg leading-none;\n        }\n      }\n    }\n  }\n}\n</style>\n"],"names":["runtimeConfig","useRuntimeConfig","contactFirstName","ref","contactLastName","contactEmail","contactSubject","contactMessage","formSubmitted","formError","submittingForm","isValidFirstName","computed","isValidLastName","isValidSubject","isValidMessage","isValidEmail","text","isValidForm","submitForm","res"],"mappings":"oiCACA,MAAAA,EAAAC,IAEAC,EAAAC,EAAA,EAAA,EACAC,EAAAD,EAAA,EAAA,EACAE,EAAAF,EAAA,EAAA,EACAG,EAAAH,EAAA,EAAA,EACAI,EAAAJ,EAAA,EAAA,EACAK,EAAAL,EAAA,EAAA,EACAM,EAAAN,EAAA,EAAA,EACAO,EAAAP,EAAA,EAAA,EAEAQ,EAAAC,EAAA,IAAAV,EAAA,MAAA,OAAA,CAAA,EACAW,EAAAD,EAAA,IAAAR,EAAA,MAAA,OAAA,CAAA,EACAU,EAAAF,EAAA,IAAAN,EAAA,MAAA,OAAA,CAAA,EACAS,EAAAH,EAAA,IAAAL,EAAA,MAAA,OAAA,CAAA,EACAS,EAAAJ,EAAA,IAAA,CACE,MAAAK,EAAAZ,EAAA,MAAA,SAAA,EAEA,MADA,WACA,KAAAY,CAAA,CAAsB,CAAA,EAGxBC,EAAAN,EAAoB,IAAAD,EAAA,OAAAE,EAAA,OAAAG,EAAA,OAAAF,EAAA,OAAAC,EAAA,KAMD,EAGnBI,EAAA,IAAA,CACEV,EAAA,MAAA,GACAC,EAAA,MAAA,GAEA,MAAAV,EAAA,OAAA,UAAA,WAAA,CAAiD,OAAA,OACvC,QAAA,CACC,eAAA,mBACS,OAAA,kBACR,EACV,KAAA,KAAA,UAAA,CACqB,UAAAE,EAAA,MACS,SAAAE,EAAA,MACF,MAAAC,EAAA,MACN,QAAAC,EAAA,MACI,QAAAC,EAAA,KACA,CAAA,CACzB,CAAA,EAAA,KAAAa,GAAA,CAEDA,EAAA,SAAA,IACEZ,EAAA,MAAA,GAEAC,EAAA,MAAA,GAGFC,EAAA,MAAA,EAAuB,CAAA,CACxB"}