{"version":3,"file":"D5L1orYF.js","sources":["../../../../components/organisms/VContactForm/VContactForm.vue","../../../../pages/contact/index.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { FetchError } from 'ofetch'\nimport VInput from '~/components/atoms/VInput/VInput.vue'\nimport type { Agency, ConstraintViolationList } from '~/types/api'\nimport VAgencySelect from '~/components/molecules/VAgencySelect/VAgencySelect.vue'\n\ninterface ContactFormProps {\n    agency?: Agency\n    defaultMessage?: string\n}\n\nconst route = useRoute()\nconst { t } = useI18n()\nconst { $apiFetch } = useNuxtApp()\nconst props = defineProps<ContactFormProps>()\n\nconst pending = ref(false)\nconst sent = ref(false)\nconst errorMessage = ref<string | null>(null)\n\nconst agencyValueField = 'mrcAgencyCode'\n\nconst getQueryValue = (key: string) => {\n    const query = route.query[key]\n    const value = Array.isArray(query) ? query[0] : query\n    return value?.toLowerCase()\n}\n\nconst contactForm = ref<ContactForm>({\n    email: '',\n    firstName: '',\n    lastName: '',\n    agency: props.agency?.[agencyValueField] || getQueryValue(agencyValueField),\n    telephone: '',\n    message: props.defaultMessage || '',\n    gdprConsent: false,\n})\n\nconst contactFormErrors = ref({\n    email: undefined,\n    firstName: undefined,\n    lastName: undefined,\n    agency: undefined,\n    telephone: undefined,\n    message: undefined,\n    gdprConsent: undefined,\n})\n\nconst { loadRecaptcha } = useRecaptchaLoaded()\n\nconst onSubmit = async (event: Event) => {\n    event.preventDefault()\n    pending.value = true\n    resetErrors()\n\n    try {\n        const token = await loadRecaptcha('contact_form')\n        await $apiFetch('/contact_forms', {\n            method: 'POST',\n            body: JSON.stringify(contactForm.value),\n            query: {\n                'g-recaptcha-response': token,\n            },\n        })\n        pending.value = false\n        sent.value = true\n    }\n    catch (error: unknown) {\n        pending.value = false\n        if ((error as FetchError).status === 429) {\n            // User not found, redirect to sign in page\n            errorMessage.value = t('too_many_form_submit_attempt')\n        }\n        else if ((error as FetchError).status === 422) {\n            const violations = (error as FetchError).data as ConstraintViolationList\n            if (violations['@type'] === 'ConstraintViolationList') {\n                for (const violation of violations.violations) {\n                    if (violation.propertyPath === 'g-recaptcha-response') {\n                        errorMessage.value = violation.message\n                        continue\n                    }\n                    if (!violation.propertyPath) {\n                        errorMessage.value = violation.message\n                        continue\n                    }\n                    contactFormErrors.value[violation.propertyPath as string] = violation.message\n                }\n            }\n        }\n    }\n}\n\nconst resetErrors = () => {\n    errorMessage.value = null\n    contactFormErrors.value = {\n        email: undefined,\n        firstName: undefined,\n        lastName: undefined,\n        agency: undefined,\n        telephone: undefined,\n        message: undefined,\n        gdprConsent: undefined,\n    }\n}\n\nconst hasErrors = computed(() => {\n    if (errorMessage.value) {\n        return true\n    }\n\n    for (const error of Object.values(contactFormErrors.value)) {\n        if (error) {\n            return true\n        }\n    }\n\n    return false\n})\n</script>\n\n<template>\n    <form\n        v-if=\"!sent\"\n        :class=\"[$style.form, hasErrors && $style['form-has-errors']]\"\n        class=\"narrow-content\"\n        @submit=\"onSubmit\"\n    >\n        <p\n            v-if=\"errorMessage\"\n            :class=\"$style['error-message']\"\n        >\n            {{ errorMessage }}\n        </p>\n        <div class=\"horizontal-input-group\">\n            <VInput\n                id=\"form_firstname\"\n                v-model=\"contactForm.firstName\"\n                :label=\"t('firstName')\"\n                :error=\"contactFormErrors.firstName\"\n                type=\"text\"\n                autocomplete=\"given-name\"\n                required\n                :disabled=\"pending\"\n            />\n            <VInput\n                id=\"form_lastname\"\n                v-model=\"contactForm.lastName\"\n                :label=\"t('lastName')\"\n                :error=\"contactFormErrors.lastName\"\n                type=\"text\"\n                autocomplete=\"family-name\"\n                required\n                :disabled=\"pending\"\n            />\n        </div>\n        <VInput\n            id=\"form_email\"\n            v-model=\"contactForm.email\"\n            :label=\"t('email_address')\"\n            :error=\"contactFormErrors.email\"\n            type=\"email\"\n            autocomplete=\"email\"\n            required\n            :disabled=\"pending\"\n        />\n\n        <VInput\n            id=\"form_telephone\"\n            v-model=\"contactForm.telephone\"\n            :label=\"t('telephone')\"\n            :error=\"contactFormErrors.telephone\"\n            type=\"tel\"\n            required\n            autocomplete=\"tel\"\n            :disabled=\"pending\"\n        />\n        <VAgencySelect\n            id=\"agency\"\n            v-model=\"contactForm.agency\"\n            :error=\"contactFormErrors.agency\"\n            :value-field=\"agencyValueField\"\n            :label=\"t('agency')\"\n        />\n        <VInput\n            id=\"form_message\"\n            v-model=\"contactForm.message\"\n            :label=\"t('message')\"\n            :error=\"contactFormErrors.message\"\n            type=\"textarea\"\n            required\n            :disabled=\"pending\"\n        />\n\n        <VInput\n            id=\"form_gdpr_consent\"\n            v-model=\"contactForm.gdprConsent\"\n            horizontal\n            :label=\"t('contact_form.gdpr_consent')\"\n            :error=\"contactFormErrors.gdprConsent\"\n            required\n            type=\"checkbox\"\n            :disabled=\"pending\"\n            separator\n        />\n\n        <VButton\n            :class=\"$style.submit\"\n            size=\"xl\"\n            filled\n            :loading=\"pending\"\n            theme=\"yellow\"\n            type=\"submit\"\n            :label=\"$t('form.button.label')\"\n        />\n    </form>\n\n    <div v-else>\n        <h2>{{ $t('pages.contact.index.thank_you') }}</h2>\n    </div>\n</template>\n\n<style lang=\"scss\" module>\n.form {\n    display: flex;\n    flex-direction: column;\n    gap: var(--spacing-2-xs);\n\n    @include media('>=lg') {\n        max-width: var(--form-max-width);\n    }\n}\n\n.has-errors {\n    border: 1px solid color(error);\n\n    label {\n        color: color(error);\n    }\n}\n\n.error-message {\n    color: color(error);\n}\n\n.submit {\n    width: min-content;\n    margin-top: rem(30);\n}\n</style>\n","<script lang=\"ts\" setup>\nimport { InternalRouteName } from '~/constants/internal-route-name'\n\ndefinePageMeta({\n    layout: false,\n    name: InternalRouteName.CONTACT_INDEX,\n})\n\n/*\n * Find existing CMS page to complete the form\n */\nconst { webPage } = await useAsyncWebPageData('contact', false)\n\nconst { t } = useI18n()\nconst pageTitle = computed(() => {\n    return webPage.value?.title || t('pages.contact.index.title')\n})\n\nconst pageText = computed(() => {\n    return webPage.value?.text || t('pages.contact.text')\n})\n\nconst { metaClient, metaServer } = usePageSeoMeta(webPage, { title: t('pages.contact.index.title') })\n\nuseSeoMeta(metaClient)\nuseServerSeoMeta(metaServer)\nuseCacheControl({\n    maxAge: 60 * 5, // 5 minutes\n    sMaxAge: 60 * 15, // 15 minutes\n    staleWhileRevalidate: 60 * 15,\n    public: true,\n})\n</script>\n\n<template>\n    <NuxtLayout name=\"default\">\n        <template #header>\n            <VWebPageHeader\n                :web-page=\"webPage\"\n                :title=\"pageTitle\"\n                img-src=\"/contact-banner.jpg\"\n                :class=\"$style.header\"\n            />\n        </template>\n        <template #default>\n            <VPageStructuredData\n                :web-page=\"webPage\"\n                :title=\"pageTitle\"\n                type=\"ContactPage\"\n            />\n            <VColumnedContent class=\"main-content-width--mobile-wider offset-top-sm\">\n                <template #aside>\n                    <VAsideHead />\n                    <VMarkdown :content=\"pageText\" />\n                </template>\n                <template #default>\n                    <VContactForm />\n                </template>\n            </VColumnedContent>\n        </template>\n    </NuxtLayout>\n</template>\n\n<style lang=\"scss\" module>\n.header {\n    --v-header-body-padding-bottom: calc(var(--v-content-offset-top) * -1 + #{rem(48)});\n}\n</style>\n"],"names":["agencyValueField","route","useRoute","t","useI18n","$apiFetch","useNuxtApp","props","__props","pending","ref","sent","errorMessage","getQueryValue","key","query","value","contactForm","_a","contactFormErrors","loadRecaptcha","useRecaptchaLoaded","onSubmit","event","resetErrors","token","error","violations","violation","hasErrors","computed","webPage","__temp","__restore","_withAsyncContext","useAsyncWebPageData","pageTitle","pageText","metaClient","metaServer","usePageSeoMeta","useSeoMeta"],"mappings":"+qBAoBMA,EAAmB,+FATzB,MAAMC,EAAQC,IACR,CAAE,EAAAC,GAAMC,IACR,CAAE,UAAAC,GAAcC,IAChBC,EAAQC,EAERC,EAAUC,EAAI,EAAK,EACnBC,EAAOD,EAAI,EAAK,EAChBE,EAAeF,EAAmB,IAAI,EAItCG,EAAiBC,GAAgB,CAC7B,MAAAC,EAAQd,EAAM,MAAMa,CAAG,EACvBE,EAAQ,MAAM,QAAQD,CAAK,EAAIA,EAAM,CAAC,EAAIA,EAChD,OAAOC,GAAA,YAAAA,EAAO,aAAY,EAGxBC,EAAcP,EAAiB,CACjC,MAAO,GACP,UAAW,GACX,SAAU,GACV,SAAQQ,EAAAX,EAAM,SAAN,YAAAW,EAAelB,KAAqBa,EAAcb,CAAgB,EAC1E,UAAW,GACX,QAASO,EAAM,gBAAkB,GACjC,YAAa,EAAA,CAChB,EAEKY,EAAoBT,EAAI,CAC1B,MAAO,OACP,UAAW,OACX,SAAU,OACV,OAAQ,OACR,UAAW,OACX,QAAS,OACT,YAAa,MAAA,CAChB,EAEK,CAAE,cAAAU,GAAkBC,IAEpBC,EAAW,MAAOC,GAAiB,CACrCA,EAAM,eAAe,EACrBd,EAAQ,MAAQ,GACJe,IAER,GAAA,CACM,MAAAC,EAAQ,MAAML,EAAc,cAAc,EAChD,MAAMf,EAAU,iBAAkB,CAC9B,OAAQ,OACR,KAAM,KAAK,UAAUY,EAAY,KAAK,EACtC,MAAO,CACH,uBAAwBQ,CAC5B,CAAA,CACH,EACDhB,EAAQ,MAAQ,GAChBE,EAAK,MAAQ,SAEVe,EAAgB,CAEd,GADLjB,EAAQ,MAAQ,GACXiB,EAAqB,SAAW,IAEpBd,EAAA,MAAQT,EAAE,8BAA8B,UAE/CuB,EAAqB,SAAW,IAAK,CAC3C,MAAMC,EAAcD,EAAqB,KACrC,GAAAC,EAAW,OAAO,IAAM,0BACb,UAAAC,KAAaD,EAAW,WAAY,CACvC,GAAAC,EAAU,eAAiB,uBAAwB,CACnDhB,EAAa,MAAQgB,EAAU,QAC/B,QACJ,CACI,GAAA,CAACA,EAAU,aAAc,CACzBhB,EAAa,MAAQgB,EAAU,QAC/B,QACJ,CACAT,EAAkB,MAAMS,EAAU,YAAsB,EAAIA,EAAU,OAC1E,CAER,CACJ,CAAA,EAGEJ,EAAc,IAAM,CACtBZ,EAAa,MAAQ,KACrBO,EAAkB,MAAQ,CACtB,MAAO,OACP,UAAW,OACX,SAAU,OACV,OAAQ,OACR,UAAW,OACX,QAAS,OACT,YAAa,MAAA,CACjB,EAGEU,EAAYC,EAAS,IAAM,CAC7B,GAAIlB,EAAa,MACN,MAAA,GAGX,UAAWc,KAAS,OAAO,OAAOP,EAAkB,KAAK,EACrD,GAAIO,EACO,MAAA,GAIR,MAAA,EAAA,CACV,26EC1GD,KAAM,CAAE,QAAAK,CAAQ,GAAI,CAAAC,EAAAC,CAAA,EAAAC,EAAA,IAAMC,EAAoB,UAAW,EAAK,CAAA,mBAExD,CAAE,EAAAhC,GAAMC,IACRgC,EAAYN,EAAS,IAAM,OAC7B,QAAOZ,EAAAa,EAAQ,QAAR,YAAAb,EAAe,QAASf,EAAE,2BAA2B,CAAA,CAC/D,EAEKkC,EAAWP,EAAS,IAAM,OAC5B,QAAOZ,EAAAa,EAAQ,QAAR,YAAAb,EAAe,OAAQf,EAAE,oBAAoB,CAAA,CACvD,EAEK,CAAE,WAAAmC,EAAY,WAAAC,CAAe,EAAAC,EAAeT,EAAS,CAAE,MAAO5B,EAAE,2BAA2B,CAAA,CAAG,EAEpG,OAAAsC,EAAWH,CAAU"}