+ // scripts
+ async _out => {
+ //script(src="/js/api_call.js") {}
+
+ script {
+ //let api_contact_get_draft = async (...arguments) => api_call(
+ // '/api/contact/get_draft.json',
+ // ...arguments
+ //)
+ let api_contact_set_draft = async (...arguments) => api_call(
+ '/api/contact/set_draft.json',
+ ...arguments
+ )
+ let api_contact_send_enquiry = async (...arguments) => api_call(
+ '/api/contact/send_enquiry.json',
+ ...arguments
+ )
+
+ let draft_timeout_running = false
+ let draft_timeout_handler = async () => {
+ draft_timeout_running = false
+ await api_contact_set_draft(
+ {
+ given_names: document.getElementById('given-names').value.slice(0, 256),
+ family_name: document.getElementById('family-name').value.slice(0, 256),
+ company: document.getElementById('company').value.slice(0, 256),
+ email: document.getElementById('email').value.slice(0, 256).toLowerCase(),
+ message: document.getElementById('message').value.slice(0, 65536)
+ }
+ )
+ //console.log('draft', await api_contact_get_draft())
+ }
+ let draft_change_handler = () => {
+ if (!draft_timeout_running) {
+ draft_timeout_running = true
+ setTimeout(draft_timeout_handler, 5000)
+ }
+ }
+
+ let details
+ let step_1 = async () => {
+ if (
+ !document.getElementById('given-names').reportValidity() ||
+ !document.getElementById('family-name').reportValidity() ||
+ !document.getElementById('company').reportValidity() ||
+ !document.getElementById('email').reportValidity() ||
+ !document.getElementById('message').reportValidity()
+ ) {
+ $('#step-1-tick').hide()
+ $('#step-1-cross').show()
+ //$('#step-1-spinner').hide()
+ return false
+ }
+ $('#step-1-tick').show()
+ $('#step-1-cross').hide()
+ //$('#step-1-spinner').hide()
+
+ details = {
+ given_names: document.getElementById('given-names').value.slice(0, 256),
+ family_name: document.getElementById('family-name').value.slice(0, 256),
+ company: document.getElementById('company').value.slice(0, 256),
+ email: document.getElementById('email').value.slice(0, 256).toLowerCase(),
+ message: document.getElementById('message').value.slice(0, 65536)
+ }
+ return true
+ }
+
+ let step_2 = async () => {
+ $('#step-2-tick').hide()
+ $('#step-2-cross').hide()
+ $('#step-2-spinner').show()
+ document.getElementById('step-2').scrollIntoView()
+
+ try {
+ await api_contact_send_enquiry(details)
+ }
+ catch (error) {
+ let problem =
+ error instanceof Problem ?
+ error :
+ new Problem(
+ // title
+ 'Bad request',
+ // detail
+ (error.stack || error.message).toString()
+ // status
+ 400
+ )
+
+ $('#step-2-tick').hide()
+ $('#step-2-cross').show()
+ $('#step-2-spinner').hide()
+
+ document.getElementById('step-2-message').textContent = problem.detail
+ $('#step-2-collapse').collapse('show')
+ return false
+ }
+ $('#step-2-tick').show()
+ $('#step-2-cross').hide()
+ $('#step-2-spinner').hide()
+
+ document.getElementById('step-2-message').textContent = 'We have received your enquiry. We will be in touch as soon as possible.'
+ return true
+ }
+
+ document.addEventListener(
+ 'DOMContentLoaded',
+ () => {
+ document.getElementById('given-names').addEventListener(
+ 'change',
+ draft_change_handler
+ )
+ document.getElementById('family-name').addEventListener(
+ 'change',
+ draft_change_handler
+ )
+ document.getElementById('company').addEventListener(
+ 'change',
+ draft_change_handler
+ )
+ document.getElementById('email').addEventListener(
+ 'change',
+ draft_change_handler
+ )
+ document.getElementById('message').addEventListener(
+ 'change',
+ draft_change_handler
+ )
+
+ document.getElementById('step-1-continue').addEventListener(
+ 'click',
+ async () => {
+ if (await step_1() && await step_2())
+ $('#step-2-collapse').collapse('show')
+ }
+ )
+
+ document.getElementById('step-2-back').addEventListener(
+ 'click',
+ () => {$('#step-1-collapse').collapse('show')}
+ )
+
+ document.getElementById('step-2-resend-enquiry').addEventListener(
+ 'click',
+ async () => {
+ if (await step_2())
+ $('#step-2-collapse').collapse('show')
+ }
+ )
+ }
+ )
+ }
+ }