{"version":3,"file":"SectionContactForm.global.7eee29c7.js","sources":["../../../../components/forms/FormMultipleCheckbox.vue","../../../../components/forms/FormTextarea.vue","../../../../data/optionsHelp.ts","../../../../components/forms/ContactForm.vue","../../../../components/text/AccordionCountries.vue","../../../../components/forms/SectionContactForm.global.vue"],"sourcesContent":["<template>\n  <div>\n    <label v-if=\"label\" :for=\"id\" class=\"font-bold block text-base mb-4\">{{ label }}</label>\n    <div :id=\"id\" class=\"flex flex-wrap gap-4\">\n      <div v-for=\"option in options\" :key=\"option.id\">\n        <FormCheckbox :id=\"option.id\" v-model=\"checked\" :value=\"option.name\" :label=\"option.name\" :name=\"`${name}[]`\" />\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nconst emit = defineEmits(['update:modelValue'])\nconst props = defineProps({\n  id: {\n    type: String,\n    required: true\n  },\n  options: {\n    type: Array,\n    required: true\n  },\n  modelValue: {\n    type: Array,\n    required: true\n  },\n  label: {\n    type: String,\n    required: false\n  },\n  name: {\n    type: String,\n    default: ''\n  }\n})\nconst checked = computed({\n  get: () => props.modelValue,\n  set: value => emit('update:modelValue', value)\n})\n</script>\n","<template>\n  <FormField\n    :id=\"input?.id\"\n    :class=\"classField\"\n    :isError=\"isError\"\n    :errorMessage=\"errorMessage\"\n    class=\"relative before:content-[''] before:h-6 before:absolute before:bg-white before:w-[calc(100%-2px)] before:ml-px before:mt-px before:z-1\"\n  >\n    <textarea\n      v-bind=\"$attrs\"\n      :id=\"id\"\n      :value=\"modelValue\"\n      :disabled=\"isDisabled\"\n      :maxLength=\"maxLength\"\n      :class=\"{\n        isError,\n        isDisabled\n      }\"\n      placeholder=\" \"\n      class=\"peer relative\"\n      rows=\"7\"\n      @input=\"updateValue\"\n    />\n    <label\n      :for=\"id\"\n      class=\"absolute pointer-events-none text-base duration-300 transform -translate-y-4 scale-75 top-5 origin-[0] left-5 font-normal peer-focus:font-normal peer-placeholder-shown:scale-100 peer-placeholder-shown:font-bold peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4 z-2\"\n      >{{ label }}</label\n    >\n  </FormField>\n</template>\n\n<script lang=\"ts\">\nexport default {\n  inheritAttrs: false\n}\n</script>\n\n<script setup lang=\"ts\">\ninterface InputProps {\n  id?: string\n  classField?: string\n  label: string\n  modelValue: string\n  isDisabled?: boolean\n  isError?: boolean\n  errorMessage?: string\n  maxLength?: number\n}\n\nwithDefaults(defineProps<InputProps>(), {\n  modelValue: '',\n  isDisabled: false,\n  isError: false,\n  maxLength: 2000\n})\n\nconst emit = defineEmits(['update:modelValue'])\n\nconst updateValue = (e: Event) => {\n  emit('update:modelValue', (e.target as HTMLInputElement).value)\n}\n\nconst input = ref<null | HTMLElement>(null)\n</script>\n","const helpOpts = [\n  {\n    name: 'Engineering',\n    id: 1\n  },\n  {\n    name: 'Management',\n    id: 2\n  },\n  {\n    name: 'Automation',\n    id: 3\n  },\n  {\n    name: 'Digital',\n    id: 4\n  }\n]\n\nexport default helpOpts\n","<!-- eslint-disable func-call-spacing -->\n<template>\n  <div>\n    <form\n      id=\"contact_form\"\n      :name=\"name\"\n      novalidate=\"true\"\n      class=\"grid grid-cols-12 gap-x-4 gap-y-2 xl:gap-x-8\"\n      data-netlify=\"true\"\n      data-netlify-honeypot=\"bot-field\"\n      method=\"POST\"\n      @submit.prevent=\"submitForm\"\n    >\n      <input type=\"hidden\" name=\"form-name\" :value=\"name\" />\n\n      <FormInput\n        id=\"Name\"\n        v-model=\"state.Name\"\n        name=\"Name\"\n        classField=\"col-span-12 md:col-span-6\"\n        :label=\"$t('form.name.label')\"\n        :isError=\"v$.Name.$error\"\n        :errorMessage=\"$t('form.name.error')\"\n        @change=\"v$.Name.$touch\"\n      />\n      <FormInput\n        id=\"Surname\"\n        v-model=\"state.Surname\"\n        name=\"Surname\"\n        classField=\"col-span-12 md:col-span-6\"\n        :label=\"$t('form.surname.label')\"\n        :isError=\"v$.Surname.$error\"\n        :errorMessage=\"$t('form.surname.error')\"\n        @change=\"v$.Surname.$touch\"\n      />\n      <FormInput\n        id=\"Email\"\n        v-model=\"state.Email\"\n        name=\"Email\"\n        classField=\"col-span-12\"\n        :label=\"$t('form.email.label')\"\n        type=\"email\"\n        :errorMessage=\"$t('form.email.error')\"\n        :isError=\"v$.Email.$error\"\n        @change=\"v$.Email.$touch\"\n      />\n      <FormInput\n        id=\"Company\"\n        v-model=\"state.Company\"\n        name=\"Company\"\n        classField=\"col-span-6\"\n        :label=\"$t('form.companyName.label')\"\n        :isError=\"v$.Company.$error\"\n        @change=\"v$.Company.$touch\"\n      />\n      <div class=\"col-span-6\">\n        <FormField :isError=\"v$.CountryId.$error\">\n          <FormMultiselect\n            id=\"CountryId\"\n            v-model=\"state.CountryId\"\n            :options=\"countries\"\n            label=\"name\"\n            name=\"CountryId\"\n            track-by=\"id\"\n            :placeholder=\"$t('form.country.label')\"\n            selectLabel=\"\"\n            deselectLabel=\"\"\n            selectedLabel=\"\"\n            :allow-empty=\"false\"\n            :searchable=\"true\"\n            :class=\"{ 'multiselect--error': v$.CountryId.$error }\"\n          />\n        </FormField>\n      </div>\n      <FormInput\n        id=\"Telephone\"\n        v-model=\"state.Telephone\"\n        name=\"Telephone\"\n        classField=\"col-span-12\"\n        :label=\"$t('form.telephone.label')\"\n      />\n      <FormMultipleCheckbox\n        v-show=\"!simple\"\n        id=\"Interests\"\n        v-model=\"state.Interests\"\n        name=\"Interests\"\n        :label=\"$t('form.multipleBoxes.label')\"\n        class=\"col-span-12 mb-7\"\n        :options=\"helpOpts\"\n      />\n\n      <div class=\"col-span-12\">\n        <FormTextarea\n          id=\"Message\"\n          v-model=\"state.Message\"\n          name=\"Message\"\n          :label=\"$t('form.message.label')\"\n          :isError=\"v$.Message.$error\"\n          @change=\"v$.Message.$touch\"\n        />\n      </div>\n\n      <div class=\"col-span-12 mb-7\">\n        <FormCheckbox\n          id=\"PrivacyAccepted\"\n          v-model=\"state.PrivacyAccepted\"\n          name=\"PrivacyAccepted\"\n          :label=\"$t('form.privacy.label')\"\n          :isError=\"v$.PrivacyAccepted.$error\"\n          @change=\"v$.PrivacyAccepted.$touch\"\n        />\n      </div>\n\n      <div class=\"col-span-12 mb-7\">\n        <FormCheckbox\n          id=\"MarketingContactAccepted\"\n          v-model=\"state.MarketingContactAccepted\"\n          name=\"MarketingContactAccepted\"\n          :label=\"$t('form.subscribe.label')\"\n        />\n      </div>\n\n      <Transition name=\"fade\">\n        <div\n          v-if=\"v$.$errors.length\"\n          class=\"col-span-12 mb-5 ml-auto flex w-fit items-center gap-2 bg-red-500 p-2 text-sm text-white\"\n        >\n          <Icon name=\"alert\" :color=\"'white'\" />\n          {{ $t('form.errorBox') }}\n        </div>\n      </Transition>\n      <div class=\"col-span-12 text-right\">\n        <Button :loading=\"isLoading\" type=\"submit\" filled theme=\"dark\" size=\"large\">{{\n          $t('submit')\n        }}</Button>\n      </div>\n    </form>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { useVuelidate } from '@vuelidate/core'\nimport { useGtm } from '@gtm-support/vue-gtm'\nimport { required, email, sameAs } from '@vuelidate/validators'\nimport helpOpts from '~/data/optionsHelp'\nimport countries from '~/data/countries.json'\nimport { AppUrl } from '~/types/app'\n\nconst gtm = useGtm()\nconst { t } = useI18n()\nconst route = useRoute()\nconst props = defineProps({\n  name: {\n    type: String,\n    required: true\n  },\n  simple: {\n    type: Boolean,\n    default: false\n  }\n})\n\nconst state = reactive({\n  Name: '',\n  Surname: '',\n  Email: '',\n  Company: '',\n  Telephone: '',\n  Message: '',\n  Interests: [],\n  MarketingContactAccepted: false,\n  PrivacyAccepted: false,\n  CountryId: null\n})\n\nconst rules = {\n  Name: { required },\n  Surname: { required },\n  Email: { required, email },\n  Company: { required },\n  Message: { required },\n  PrivacyAccepted: { sameAs: sameAs(true) },\n  CountryId: { required }\n}\n\nconst v$ = useVuelidate(rules, state)\nconst isLoading = ref(false)\n\n// eslint-disable-next-line func-call-spacing\nconst emit = defineEmits<{ (event: 'submitted'): void }>()\n\nconst URIEncode = (data: any) => {\n  return Object.keys(data)\n    .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`)\n    .join('&')\n}\n\nasync function submitForm() {\n  const isFormInvalid = await v$.value.$validate()\n\n  if (!isFormInvalid) {\n    return\n  }\n\n  const data = {\n    ...state,\n    CountryId: state.CountryId?.id\n  }\n\n  const { data: netlifyData, error } = await useFetch('/.netlify/functions/subscribe', {\n    headers: { 'Content-type': 'application/json' },\n    method: 'POST',\n    body: toRaw(data)\n  })\n\n  if (error.value) {\n    // eslint-disable-next-line no-console\n    console.log('error:', error.value)\n  }\n\n  if (netlifyData.value) {\n    try {\n      isLoading.value = true\n\n      await fetch('/', {\n        method: 'POST',\n        headers: {\n          'Content-Type': 'application/x-www-form-urlencoded'\n        },\n        body: URIEncode({\n          'form-name': props.name,\n          ...data\n        })\n      })\n      emit('submitted')\n\n      gtm?.trackEvent({\n        category: `Section Contact Form - ${AppUrl.LIVE}${route.fullPath}`,\n        action: 'Form Submit',\n        label: `${t('submit')}`\n      })\n\n      window.scrollTo({\n        top: 0,\n        behavior: 'smooth'\n      })\n    } catch (error) {\n      // eslint-disable-next-line no-console\n      console.log(error)\n    } finally {\n      isLoading.value = false\n    }\n  }\n}\n</script>\n","<template>\n  <div>\n    <div\n      v-for=\"(item, index) in data\"\n      :key=\"index\"\n      class=\"mb-3 border-b border-neutral-300 py-5 text-neutral-800 last:mb-0\"\n      :tabindex=\"index\"\n    >\n      <div\n        class=\"flex cursor-pointer items-center justify-between text-xl\"\n        @click=\"expandAccordion(index)\"\n      >\n        <span v-if=\"item\" class=\"font-bold uppercase\">\n          {{ item.name }}\n        </span>\n        <Icon\n          :name=\"getIconName(activeIndex === index)\"\n          class=\"transition-all duration-300\"\n          :class=\"activeIndex === index && 'rotate-180'\"\n          :color=\"activeIndex === index ? theme.colors.teal[500] : theme.colors.neutral[800]\"\n        />\n      </div>\n\n      <div\n        class=\"grid transform-gpu transition-all duration-500\"\n        :class=\"\n          activeIndex === index ? 'opacity-1 mt-1 grid-rows-[1fr]' : 'grid-rows-[0fr] opacity-0'\n        \"\n      >\n        <address class=\"overflow-hidden text-base not-italic lg:text-base\">\n          <div class=\"my-4 flex flex-col\">\n            <span class=\"font-bold\">{{ $t('email') }}&colon;</span>\n            <a class=\"w-fit\" :href=\"`mailto:${item.email}`\" @click=\"$emit('user-action:email-click', item.name, item.email)\">{{ item.email }}</a>\n          </div>\n\n          <div class=\"my-4 flex flex-col\">\n            <span class=\"font-bold\">{{ $t('phone') }}&colon;</span>\n            <a class=\"w-fit\" :href=\"`tel:${item.phone}`\" @click=\"$emit('user-action:phone-click', item.name, item.phone)\">{{ item.phone }}</a>\n          </div>\n\n          <ul class=\"accordion-countries__locations-list my-4\">\n            <li v-for=\"(location, idx) in item.locations\" :key=\"idx\" class=\"inline\">\n              {{ location.city }}\n            </li>\n          </ul>\n        </address>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport type { CountryRecord } from '~/types/generated'\nimport { theme } from '#tailwind-config'\n\ndefineEmits(['user-action:email-click', 'user-action:phone-click'])\n\ndefineProps({\n  data: {\n    type: Array as PropType<CountryRecord[]>,\n    default: () => []\n  }\n})\nconst activeIndex = ref<number | null>(null)\n\nfunction getIconName(isActive: boolean) {\n  return isActive ? 'minus' : 'plus'\n}\n\nfunction expandAccordion(idx: number) {\n  activeIndex.value = activeIndex.value !== idx ? idx : null\n}\n</script>\n\n<style lang=\"postcss\">\n.accordion-countries__locations-list li:not(:last-child)::after {\n  content: ', ';\n}\n</style>\n","<template>\n  <div\n    class=\"contact-form relative min-h-screen text-neutral-800\"\n    :class=\"!data.simple && 'before:bg-neutral-100'\"\n  >\n    <div class=\"grid-default container\">\n      <TransitionGroup name=\"in-fade\">\n        <div\n          v-if=\"!isFormSubmitted\"\n          class=\"col-span-12 mb-10 pt-14 lg:col-span-4 lg:mb-0 lg:pb-52 lg:pt-20\"\n        >\n          <Heading\n            v-if=\"data.title\"\n            :content=\"data.title\"\n            :level=\"2\"\n            class=\"mb-4 font-black italic lg:mb-8\"\n          />\n          <div v-if=\"data.html\" class=\"prose text-lg lg:text-xl\" v-html=\"data.html\" />\n        </div>\n        <div\n          v-if=\"!isFormSubmitted\"\n          class=\"col-span-12 -mx-4 lg:col-span-4 lg:mx-0 lg:min-h-[calc(100vh-110px)] lg:pb-52 lg:pt-20\"\n        >\n          <div class=\"px-4 lg:px-0\">\n            <ContactForm\n              :name=\"simple ? 'Contact form simple' : 'Contact form'\"\n              :simple=\"data.simple\"\n              @submitted=\"isFormSubmitted = true\"\n            />\n          </div>\n          <Image\n            class=\"bottom-0 left-0 -z-1 w-full max-w-5xl lg:absolute\"\n            loading=\"lazy\"\n            :src=\"formBackground\"\n            :width=\"2120\"\n            :height=\"848\"\n            alt=\"Application Form background\"\n          />\n        </div>\n        <div v-if=\"isFormSubmitted\" class=\"col-span-12 lg:col-span-8 lg:min-h-[120vh]\">\n          <ThankYou\n            class=\"lg:max-w-2xl\"\n            :title=\"data.thankYouTitle\"\n            :description=\"data.thankYouSubtitle\"\n          />\n        </div>\n      </TransitionGroup>\n      <div\n        class=\"contact-accordion relative col-span-12 -mx-4 px-4 pb-14 pt-9 lg:col-span-4 lg:mx-0 lg:min-h-[calc(100vh-110px)] lg:pl-16 lg:pr-0 lg:pt-20\"\n        :class=\"data.simple ? 'bg-white' : 'bg-neutral-100'\"\n      >\n        <AccordionCountries\n          v-if=\"data.countries && data.countries.length > 0\"\n          :data=\"data.countries\"\n          @user-action:email-click=\"handleEmailClick\"\n          @user-action:phone-click=\"handlePhoneClick\"\n        />\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { useGtm } from '@gtm-support/vue-gtm'\nimport { AppUrl } from '~/types/app'\nimport formBackground from '~/assets/images/backgrounds/contact-form.webp'\nimport type { SectionContactFormRecord } from '~/types/generated'\n\nconst route = useRoute()\nconst gtm = useGtm()\n\ndefineProps({\n  data: {\n    type: Object as PropType<SectionContactFormRecord>,\n    default: () => {}\n  }\n})\n\nconst isFormSubmitted = ref(false)\n\nfunction handleEmailClick(location: string, email: string) {\n  gtm?.trackEvent({\n    category: `Section Contact Form - ${AppUrl.LIVE}${route.fullPath}`,\n    action: 'Email click',\n    label: `${location}, ${email}`\n  })\n}\n\nfunction handlePhoneClick(location: string, phone: string) {\n  gtm?.trackEvent({\n    category: `Section Contact Form - ${AppUrl.LIVE}${route.fullPath}`,\n    action: 'Phone click',\n    label: `${location}, ${phone}`\n  })\n}\n</script>\n\n<style lang=\"postcss\">\n.contact-form::before {\n  @screen lg {\n    content: '';\n    height: 100%;\n    position: absolute;\n    width: 33%;\n    right: 0;\n  }\n}\n</style>\n"],"names":["emit","__emit","props","__props","checked","computed","value","__default__","updateValue","e","input","ref","helpOpts","gtm","useGtm","t","useI18n","route","useRoute","state","reactive","rules","required","email","sameAs","v$","useVuelidate","isLoading","URIEncode","data","key","submitForm","_a","netlifyData","error","useFetch","toRaw","AppUrl","activeIndex","getIconName","isActive","expandAccordion","idx","isFormSubmitted","handleEmailClick","location","handlePhoneClick","phone"],"mappings":"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"}