diff --git a/src/lib-components/BlockForm.vue b/src/lib-components/BlockForm.vue index 2cf94cdb0..ff3775b77 100644 --- a/src/lib-components/BlockForm.vue +++ b/src/lib-components/BlockForm.vue @@ -10,6 +10,11 @@ const blockFormData = inject('blockFormData') const registrationType = inject('registrationType') const libcalWaitlist = inject('libcalWaitlist') const libcalEndpoint = inject('libcalEndpoint') +console.log('BlockForm eventId', eventId.value) +console.log('BlockForm blockFormData', blockFormData.value) +console.log('BlockForm registrationType', registrationType.value) +console.log('BlockForm libcalWaitlist', libcalWaitlist.value) +console.log('BlockForm libcalEndpoint', libcalEndpoint) const errors = ref([]) const firstName = ref('') @@ -25,16 +30,13 @@ const showForm = ref(false) const registrationTypeInput = ref('') const parseQuestions = computed(() => { - // console.log( - // `what is the value :${JSON.stringify(blockFormData)}` - // ) - if (!blockFormData.questions) + if (!blockFormData.value.questions) return [] - return blockFormData.questions.map((obj) => { + return blockFormData.value.questions.map((obj) => { if ( obj.type === 'string' - || obj.type === 'radio' - || obj.type === 'dropdown' + || obj.type === 'radio' + || obj.type === 'dropdown' ) formQuestions.value[obj.id] = '' else @@ -48,21 +50,8 @@ const parseQuestions = computed(() => { }) }) -function showBlockEvent() { - showForm.value = true -} - -function closeBlockForm() { - showForm.value = false -} - -function removeNotification() { - clearTimeout(countdown.value) - hasNotifications.value = false - showForm.value = false -} - function handleSubmit() { + console.log('registrationTypeInput', registrationTypeInput.value, registrationType.value && registrationType === 'both') const data = { form: { first_name: firstName.value, @@ -72,32 +61,34 @@ function handleSubmit() { }, registration_type: registrationType - && registrationType !== 'both' - && registrationType !== '' - ? registrationType - : registrationType - && registrationType === 'both' + && registrationType.value !== 'both' + && registrationType.value !== '' + ? registrationType.value + : registrationType.value + && registrationType.value === 'both' ? registrationTypeInput.value : '', is_waitlist: - libcalWaitlist && libcalWaitlist !== '' ? libcalWaitlist : '0', + libcalWaitlist.value && libcalWaitlist.value !== '' ? libcalWaitlist.value : '0', } - data.form.questions = blockFormData.questions.map((obj) => { + data.form.questions = blockFormData.value.questions.map((obj) => { return { id: obj.id, answer: formQuestions.value[obj.id], } }) + console.log('data submitting', JSON.stringify(data)) let url = '' + console.log('eventId', eventId) if (libcalEndpoint) { - url = `${libcalEndpoint}api/1.1/events/${eventId}/register` + url = `${libcalEndpoint}api/1.1/events/${eventId.value}/register` } else { url - = `${process.env.VUE_APP_CALENDAR_LIBRARY_URL - }${eventId}/register` + = `${process.env.VUE_APP_CALENDAR_LIBRARY_URL + }${eventId}/register` } fetch(url, { @@ -133,20 +124,20 @@ function checkForm() { fullNameValid = true if ( - blockFormData.emailMethod.status === 'required' - && email.value + blockFormData.value.emailMethod.status === 'required' + && email.value ) emailValid = true if ( registrationType - && registrationType === 'both' - && registrationTypeInput.value === '' + && registrationType.value === 'both' + && registrationTypeInput.value === '' ) registrationTypeValid = false else if ( registrationType - && registrationType !== 'both' + && registrationType.value !== 'both' ) registrationTypeValid = true else @@ -162,21 +153,21 @@ function checkForm() { if (!registrationTypeValid) errors.value.push('Registration Type 3 required.') - for (const question of blockFormData.questions) { + for (const question of blockFormData.value.questions) { if ( questionsRequired.value[question.id] - && !formQuestions.value[question.id] + && !formQuestions.value[question.id] ) { question.type === 'string' ? errors.value.push( - `${blockFormData.questions.label} 4a required.` + `${blockFormData.value.questions.label} 4a required.` ) : errors.value.push(`${question.label} 4b required.`) } else if ( questionsRequired.value[question.id] - && question.type === 'checkbox' - && formQuestions.value[question.id].length === 0 + && question.type === 'checkbox' + && formQuestions.value[question.id].length === 0 ) { errors.value.push(`${question.label} 4c required.`) } @@ -188,6 +179,20 @@ function checkForm() { window.scrollTo(0, 0) } +function showBlockEvent() { + showForm.value = true +} + +function closeBlockForm() { + showForm.value = false +} + +function removeNotification() { + clearTimeout(countdown.value) + hasNotifications.value = false + showForm.value = false +} + watch(status, () => { hasNotifications.value = true countdown.value = setTimeout(removeNotification, 113000) @@ -211,7 +216,10 @@ watch(status, () => { 'form-success': hasNotifications, }" > -
+

Registration complete

Please check your email to view your booking.

@@ -223,18 +231,29 @@ watch(status, () => {
-
+

Registration

-
-
+

Please complete the required fields to complete registration

@@ -295,7 +314,10 @@ watch(status, () => {
-
+
- +
{ :class="question.required ? 'questionRequired' : ''" > {{ question.label }} - + (required) -
+