1 let XDate = require('xdate')
4 let breadcrumbs = await _require('/_lib/breadcrumbs.jst')
5 let get_session = await _require('/_lib/get_session.jst')
6 let icon_cross = await env.site.get_min_svg('/_svg/icon_cross.svg')
7 let icon_tick = await env.site.get_min_svg('/_svg/icon_tick.svg')
8 let navbar = await _require('/_lib/navbar.jst')
10 // preload draft details if any
11 let transaction = await env.site.database.Transaction()
14 let root = await transaction.get({})
15 let session = await get_session(env, root)
17 let contact_draft = await session.get('contact_draft')
19 contact_draft !== undefined &&
20 XDate.now() < await contact_draft.get_json('expires') ?
22 email: await contact_draft.get_json('email'),
23 given_names: await contact_draft.get_json('given_names'),
24 family_name: await contact_draft.get_json('family_name'),
25 company: await contact_draft.get_json('company'),
26 email: await contact_draft.get_json('email'),
27 message: await contact_draft.get_json('message')
32 transaction.rollback()
34 console.log('draft_details', JSON.stringify(draft_details))
42 await breadcrumbs(env, _out)
44 p {'Do you require more information, or assistance with integrating the projects on this site? We’d love to hear from you.'}
46 div.accordion#accordion.mb-5(role="tablist" aria-multiselectable="true") {
48 div.card-header#step-1-heading(role="tab") {
49 span#step-1-tick(style="display: none;") {
50 span.icon-color.pr-3 {_out.push(icon_tick)}
52 span#step-1-cross(style="display: none;") {
53 span.icon-color.pr-3 {_out.push(icon_cross)}
55 //span#step-1-spinner(style="display: none;") {
56 // span.icon-color.pr-3 {
57 // div.spinner-border(role="status") {
58 // span.sr-only {'Loading...'}
62 a.h5(data-toggle="collapse" data-parent="#accordion" href="#step-1-collapse" aria-expanded="true" aria-controls="step-1-collapse") {
66 div#step-1-collapse.collapse.show(role="tabpanel" aria-labelledby="step-1-heading" data-parent="#accordion") {
71 label.form-label(for="given-names") {'Given names *'}
72 input.form-control#given-names(type="text" value=draft_details ? draft_details.given_names : '' placeholder="Your given names" required="required" maxlength=256) {}
77 label.form-label(for="family-name") {'Family name'}
78 input.form-control#family-name(type="text" value=draft_details ? draft_details.family_name : '' placeholder="Your family name" maxlength=256) {}
85 label.form-label(for="company") {'Company'}
86 input.form-control#company(type="company" value=draft_details ? draft_details.company : '' placeholder="Your company" maxlength=256) {}
91 label.form-label(for="email") {'Email *'}
92 input.form-control#email(type="email" value=draft_details ? draft_details.email : '' placeholder="Your email address" required="required" maxlength=256) {}
99 label.form-label(for="message") {'Message *'}
100 textarea.form-control#message(placeholder="Your message" required="required" rows=6 maxlength=65536) {
102 `${draft_details.message}`
108 button.btn.btn-success#step-1-continue(type="button") {'Continue'}
109 p.'mt-3'.mb-0 {'* These fields are required.'}
114 div.card-header#step-2-heading(role="tab") {
115 span#step-2-tick(style="display: none;") {
116 span.icon-color.pr-3 {_out.push(icon_tick)}
118 span#step-2-cross(style="display: none;") {
119 span.icon-color.pr-3 {_out.push(icon_cross)}
121 span#step-2-spinner(style="display: none;") {
122 span.icon-color.pr-3 {
123 div.spinner-border(role="status") {
124 span.sr-only {'Loading...'}
128 a.h5.collapsed(data-toggle="collapse" data-parent="#accordion" href="#step-2-collapse" aria-expanded="false" aria-controls="step-2-collapse") {
132 div#step-2-collapse.collapse(role="tabpanel" aria-labelledby="step-2-heading" data-parent="#accordion") {
134 p#step-2-message {'Please enter enquiry details first.'}
136 button.btn.btn-outline-secondary#step-2-back(type="button") {'Back'}
137 button.btn.btn-outline-secondary.ml-3#step-2-resend-enquiry(type="button") {'Re-send enquiry'}
145 //script(src="/js/api_call.js") {}
148 //let api_contact_get_draft = async (...args) => api_call(
149 // '/api/contact/get_draft.json',
152 let api_contact_set_draft = async (...args) => api_call(
153 '/api/contact/set_draft.json',
156 let api_contact_send_enquiry = async (...args) => api_call(
157 '/api/contact/send_enquiry.json',
161 let draft_timeout_running = false
162 let draft_timeout_handler = async () => {
163 draft_timeout_running = false
164 await api_contact_set_draft(
166 given_names: document.getElementById('given-names').value.slice(0, 256),
167 family_name: document.getElementById('family-name').value.slice(0, 256),
168 company: document.getElementById('company').value.slice(0, 256),
169 email: document.getElementById('email').value.slice(0, 256).toLowerCase(),
170 message: document.getElementById('message').value.slice(0, 65536)
173 //console.log('draft', await api_contact_get_draft())
175 let draft_change_handler = () => {
176 if (!draft_timeout_running) {
177 draft_timeout_running = true
178 setTimeout(draft_timeout_handler, 5000)
183 let step_1 = async () => {
185 !document.getElementById('given-names').reportValidity() ||
186 !document.getElementById('family-name').reportValidity() ||
187 !document.getElementById('company').reportValidity() ||
188 !document.getElementById('email').reportValidity() ||
189 !document.getElementById('message').reportValidity()
191 $('#step-1-tick').hide()
192 $('#step-1-cross').show()
193 //$('#step-1-spinner').hide()
196 $('#step-1-tick').show()
197 $('#step-1-cross').hide()
198 //$('#step-1-spinner').hide()
201 given_names: document.getElementById('given-names').value.slice(0, 256),
202 family_name: document.getElementById('family-name').value.slice(0, 256),
203 company: document.getElementById('company').value.slice(0, 256),
204 email: document.getElementById('email').value.slice(0, 256).toLowerCase(),
205 message: document.getElementById('message').value.slice(0, 65536)
210 let step_2 = async () => {
211 $('#step-2-tick').hide()
212 $('#step-2-cross').hide()
213 $('#step-2-spinner').show()
214 document.getElementById('step-2').scrollIntoView()
217 await api_contact_send_enquiry(details)
221 error instanceof Problem ?
227 (error.stack || error.message).toString()
232 $('#step-2-tick').hide()
233 $('#step-2-cross').show()
234 $('#step-2-spinner').hide()
236 document.getElementById('step-2-message').textContent = problem.detail
237 $('#step-2-collapse').collapse('show')
240 $('#step-2-tick').show()
241 $('#step-2-cross').hide()
242 $('#step-2-spinner').hide()
244 document.getElementById('step-2-message').textContent = 'We have received your enquiry. We will be in touch as soon as possible.'
248 document.addEventListener(
251 document.getElementById('given-names').addEventListener(
255 document.getElementById('family-name').addEventListener(
259 document.getElementById('company').addEventListener(
263 document.getElementById('email').addEventListener(
267 document.getElementById('message').addEventListener(
272 document.getElementById('step-1-continue').addEventListener(
275 if (await step_1() && await step_2())
276 $('#step-2-collapse').collapse('show')
280 document.getElementById('step-2-back').addEventListener(
282 () => {$('#step-1-collapse').collapse('show')}
285 document.getElementById('step-2-resend-enquiry').addEventListener(
289 $('#step-2-collapse').collapse('show')