{"version":3,"file":"Contact.vue.bundle.js","sources":["../../../Frontend/vue/components/Form/TextAreaInput.vue","../../../Frontend/vue/services/ContactService.ts","../../../Frontend/vue/views/Contact/Contact.vue","../../../Frontend/vue/views/Contact/index.ts"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport {computed, onMounted, ref, watch} from 'vue'\r\nimport {IValidation} from '../../view-models/IFormData'\r\nimport ErrorMessage from './ErrorMessage.vue'\r\n\r\nconst props = defineProps<{\r\n  label?: string;\r\n  info?: string;\r\n  customModel: string | number | string[] | undefined;\r\n  id: string;\r\n  validation?: IValidation;\r\n  placeholder?: string;\r\n  optional?: boolean;\r\n  required?: boolean;\r\n  disabled?: boolean;\r\n  uppercase?: boolean;\r\n}>()\r\n\r\nconst emit = defineEmits<{\r\n    (e: 'model-update', id: string | number | string[] | undefined): void;\r\n    (e: 'on-blur', id: string | number | string[] | undefined): void;\r\n}>()\r\n\r\nconst model = ref('' as string | number | string[] | undefined)\r\nconst isValid = ref(false);\r\n\r\nconst onBlur = (model: string | number | string[] | undefined) => {\r\n  \r\n    isValid.value = !props.validation?.model && isValidValue(model);\r\n    emit('on-blur', model);\r\n}\r\n\r\nconst isInvalid = computed(() => {\r\n  return !!(props.validation?.model && props.validation?.submitted);\r\n})\r\n\r\nwatch(\r\n    () => props.customModel,\r\n    () => {\r\n      model.value = props.customModel\r\n    }\r\n)\r\n\r\nconst isValidValue = (model: string | number | string[] | undefined): boolean => {\r\n  if (model !== undefined && model !== null) {\r\n    if (typeof model === 'string' || Array.isArray(model)) {\r\n      return model.length > 0;\r\n    } else if (typeof model === 'number') {\r\n      return model > 0;\r\n    }\r\n  }\r\n  return false;\r\n}\r\n\r\nonMounted(() => {\r\n  model.value = props.customModel\r\n})\r\n</script>\r\n\r\n<template>\r\n  <div class=\"form-element\" :class=\"{'is-invalid': isInvalid}\">\r\n    <label :for=\"id\"><b>{{ label }}</b>\r\n      <span v-if=\"optional\">&nbsp;(optioneel)</span>\r\n    </label>\r\n    <textarea\r\n        v-model=\"model\"\r\n        :id=\"id\"\r\n        :placeholder=\"placeholder\"\r\n        :disabled=\"disabled\"\r\n        rows=\"6\"\r\n        @input=\"emit('model-update', model)\"\r\n        @blur=\"onBlur(model)\"\r\n        :class=\"{'is-valid': isValid}\"\r\n    />\r\n    <span class=\"error\" v-if=\"isInvalid\">{{ validation?.message }}</span>\r\n  </div>\r\n</template>","import axios, {AxiosResponse} from \"axios\";\r\nimport {IFormResponse} from \"@/view-models/IFormResponse\";\r\n\r\nconst contactInstance = axios.create({\r\n    baseURL: '/umbraco/api/contact/submit',\r\n});\r\n\r\ninterface IContactRequest {\r\n    pageId: number;\r\n    message: string;\r\n    firstName: string;\r\n    lastName: string;\r\n    email: string;\r\n    phone: string;\r\n    generalTerms?: boolean;\r\n    optIn?: boolean;\r\n    captchaToken: string;\r\n}\r\n\r\nexport class ContactService {\r\n    Submit(params: IContactRequest): Promise<AxiosResponse<IFormResponse>> {\r\n        return contactInstance.get('', {params})\r\n    }\r\n}\r\n\r\nexport default new ContactService();","<script setup lang=\"ts\">\r\n\r\nimport {nextTick, onMounted, reactive, ref} from \"vue\";\r\nimport {email, helpers, not, required, sameAs, } from \"@vuelidate/validators\";\r\nimport useVuelidate from \"@vuelidate/core\";\r\nimport TextAreaInput from \"@/components/Form/TextAreaInput.vue\";\r\nimport TextInput from \"@/components/Form/TextInput.vue\";\r\nimport SingleCheckInput from \"@/components/Form/SingleCheckInput.vue\";\r\nimport CmsDataProvider, {ContactCmsData} from \"@/providers/CmsDataProvider\";\r\nimport ContactService from \"@/services/ContactService\";\r\nimport Loader from \"@/components/loader.vue\";\r\nimport {ScriptHelper} from \"@/helpers/ScriptHelper\";\r\nimport FormMessages from \"@/components/formMessages.vue\";\r\nimport {IFormResponse} from \"@/view-models/IFormResponse\";\r\n\r\n// Variables\r\nconst cmsData = CmsDataProvider.get<ContactCmsData>(\"ContactCmsData\");\r\nconst isLoading = ref(false);\r\nconst formIsValid = ref(false);\r\nconst formSubmitted = ref(false); // state.submitted is for field validation, formSubmitted is for BE validation.\r\nconst errorMessage = ref(cmsData.errorMessage); // state.submitted is for field validation, formSubmitted is for BE validation.\r\n\r\nconst state = reactive({\r\n    message: '',\r\n    firstName: '',\r\n    lastName: '',\r\n    email: '',\r\n    phone: '',\r\n    generalTermsChecked: false,\r\n    optInChecked: false,\r\n    submitted: false\r\n});\r\n\r\nconst isPhoneNumber = (value) => !helpers.req(value) || (value.length >= 10 && value.length <= 12 && /^\\d+$/.test(value));\r\n\r\nconst rules: any = {\r\n    message: {\r\n        required\r\n    },\r\n    firstName: {\r\n        required,\r\n    },\r\n    lastName: {\r\n        required\r\n    },\r\n    email: {\r\n        required,\r\n        email\r\n    },\r\n    phone: {\r\n        isPhoneNumber\r\n    }\r\n}\r\n\r\nif (!!cmsData.generalTermsInputLabel) {\r\n  rules.generalTermsChecked = {\r\n    required,\r\n    notFalse: not(sameAs(false))\r\n  }\r\n}\r\n\r\nconst v$ = useVuelidate(rules, state)\r\n\r\nconst updateModel = (value: unknown, model: string) => {\r\n    state[model] = value;\r\n}\r\n\r\nconst submit = async () => {\r\n    const isFormCorrect = await v$.value.$validate();\r\n\r\n    if (isFormCorrect) {\r\n        isLoading.value = true;\r\n\r\n        window.grecaptcha.ready(function () {\r\n            window.grecaptcha.execute(cmsData.captchaSiteKey, {action: 'submit'}).then(async function (captchaToken) {\r\n                await ContactService.Submit({\r\n                    pageId: cmsData.pageId,\r\n                    message: state.message,\r\n                    firstName: state.firstName,\r\n                    lastName: state.lastName,\r\n                    email: state.email,\r\n                    phone: state.phone,\r\n                    generalTerms: !!cmsData.generalTermsInputLabel ? state.generalTermsChecked : undefined,\r\n                    optIn: !!cmsData.optInInputLabel ? state.optInChecked : undefined,\r\n                    captchaToken: captchaToken\r\n                }).then((data) => {\r\n                    handleFormSubmit(data.data);\r\n                }).catch((_) => {\r\n                    formIsValid.value = false;\r\n                }).finally(() => {\r\n                    isLoading.value = false;\r\n                    formSubmitted.value = true;\r\n                });\r\n            });\r\n        });\r\n    } else {\r\n        formIsValid.value = false;\r\n        state.submitted = true;\r\n\r\n        await nextTick(() => {\r\n            document.querySelector('.is-invalid')?.scrollIntoView({block: \"center\", behavior: \"smooth\"})\r\n        })\r\n    }\r\n}\r\n\r\nconst handleFormSubmit = (response: IFormResponse) => {\r\n    if (response.success) {\r\n        formIsValid.value = true;\r\n    } else {\r\n        errorMessage.value = response.message;\r\n        formIsValid.value = false;\r\n    }\r\n}\r\n\r\nonMounted(() => {\r\n    ScriptHelper.AddCaptchaScript(cmsData.captchaSiteKey);\r\n});\r\n\r\n</script>\r\n\r\n<template>\r\n    <loader v-if=\"isLoading\"></loader>\r\n    <div class=\"row justify-content-between\">\r\n        <div class=\"col-lg-7 description\">\r\n            <h2>{{ cmsData.title }}</h2>\r\n            <p>{{ cmsData.introText }}</p>\r\n        </div>\r\n        <div class=\"col-lg-15 gray-background-rectangle\">\r\n            <form class=\"form-wrapper\" @submit.prevent=\"submit\">\r\n                <text-area-input\r\n                        :custom-model=\"state.message\"\r\n                        id=\"form-message\"\r\n                        :label=\"cmsData.messageLabel\"\r\n                        class=\"form-row\"\r\n                        :submitted=\"state.submitted\"\r\n                        :required=\"true\"\r\n                        :validation=\"{\r\n                            model: v$.message.$invalid,\r\n                            message: cmsData.requiredFieldMessage,\r\n                            submitted: state.submitted,\r\n                        }\"\r\n                        @model-update=\"updateModel($event, 'message')\"\r\n                />\r\n                <text-input\r\n                        :custom-model=\"state.firstName\"\r\n                        id=\"form-firstname\"\r\n                        :label=\"cmsData.firstNameLabel\"\r\n                        class=\"form-row\"\r\n                        :required=\"true\"\r\n                        :submitted=\"state.submitted\"\r\n                        :validation=\"{\r\n                            model: v$.firstName.$invalid,\r\n                            message: cmsData.requiredFieldMessage,\r\n                            submitted: state.submitted,\r\n                        }\"\r\n                        @model-update=\"updateModel($event, 'firstName')\"\r\n                />\r\n                <text-input\r\n                        :custom-model=\"state.lastName\"\r\n                        id=\"form-lastname\"\r\n                        :label=\"cmsData.lastNameLabel\"\r\n                        class=\"form-row\"\r\n                        :required=\"true\"\r\n                        :submitted=\"state.submitted\"\r\n                        :validation=\"{\r\n                            model: v$.lastName.$invalid,\r\n                            message: cmsData.requiredFieldMessage,\r\n                            submitted: state.submitted,\r\n                        }\"\r\n                        @model-update=\"updateModel($event, 'lastName')\"\r\n                />\r\n                <text-input\r\n                        :custom-model=\"state.email\"\r\n                        id=\"form-email\"\r\n                        :label=\"cmsData.emailLabel\"\r\n                        class=\"form-row\"\r\n                        :required=\"true\"\r\n                        :submitted=\"state.submitted\"\r\n                        :validation=\"{\r\n                            model: v$.email.$invalid,\r\n                            message: cmsData.invalidEmailMessage,\r\n                            submitted: state.submitted,\r\n                        }\"\r\n                        @model-update=\"updateModel($event, 'email')\"\r\n                />\r\n                <text-input\r\n                        :custom-model=\"state.phone\"\r\n                        id=\"form-phone\"\r\n                        :label=\"cmsData.phoneLabel\"\r\n                        class=\"form-row\"\r\n                        :optional=\"true\"\r\n                        :submitted=\"state.submitted\"\r\n                        :validation=\"{\r\n                            model: v$.phone.$invalid,\r\n                            message: cmsData.requiredFieldMessage,\r\n                            submitted: state.submitted,\r\n                        }\"\r\n                        @model-update=\"updateModel($event, 'phone')\"\r\n                />\r\n                <single-check-input\r\n                        v-if=\"!!cmsData.generalTermsInputLabel\"\r\n                        :custom-model=\"state.generalTermsChecked\"\r\n                        id=\"form-general-terms-check\"\r\n                        :label=\"cmsData.generalTermsInputLabel\"\r\n                        :validation=\"{\r\n                            model: v$.generalTermsChecked.required.$invalid || v$.generalTermsChecked.notFalse.$invalid,\r\n                            message: cmsData.requiredFieldMessage,\r\n                            submitted: state.submitted,\r\n                        }\"\r\n                        @model-update=\"updateModel($event, 'generalTermsChecked')\"\r\n                />\r\n                <single-check-input \r\n                        v-if=\"!!cmsData.optInInputLabel\"\r\n                        :custom-model=\"state.optInChecked\"\r\n                        id=\"form-get-in-contact-check\"\r\n                        :label=\"cmsData.optInInputLabel\"\r\n                        @model-update=\"updateModel($event, 'optInChecked')\"\r\n                />\r\n                <button class=\"btn btn-primary\" type=\"submit\">\r\n                    {{ cmsData.sendButtonText }}\r\n                    <svg class=\"icon icon-ArrowRight\">\r\n                        <use xlink:href=\"#icon-ArrowRight\"></use>\r\n                    </svg>\r\n                </button>\r\n                <form-messages\r\n                        :form-is-valid=\"formIsValid\"\r\n                        :form-submitted=\"formSubmitted\"\r\n                        :error-message=\"errorMessage\"\r\n                        :success-message=\"cmsData.successMessage\">\r\n                </form-messages>\r\n            </form>\r\n        </div>\r\n    </div>\r\n</template>\r\n","import { createApp } from 'vue';\r\nimport Contact from \"@/views/Contact/Contact.vue\";\r\nconst app = createApp(Contact)\r\napp.mount('#contact')\r\n"],"names":["model","helpers","ContactService","Contact"],"mappings":"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"}