1 let XDate = require('xdate')
4 let breadcrumbs = await _require('/_lib/breadcrumbs.jst')
5 let icon_cross = await env.site.get_min_svg('/_svg/icon_cross.svg')
6 let icon_tick = await env.site.get_min_svg('/_svg/icon_tick.svg')
7 let navbar = await _require('/_lib/navbar.jst')
8 let get_session = await _require('/_lib/get_session.jst')
10 // preload draft details if any
11 let transaction = await env.site.database.Transaction(), draft_details
13 // initialize env.session_key, set cookie in env.response
14 let session = await get_session(env, transaction)
16 let contact_draft = await session.get('contact_draft')
18 contact_draft !== undefined &&
19 XDate.now() < await contact_draft.get_json('expires') ?
21 email: await contact_draft.get_json('email'),
22 given_names: await contact_draft.get_json('given_names'),
23 family_name: await contact_draft.get_json('family_name'),
24 company: await contact_draft.get_json('company'),
25 email: await contact_draft.get_json('email'),
26 message: await contact_draft.get_json('message')
30 await transaction.commit()
33 transaction.rollback()
36 console.log('draft_details', JSON.stringify(draft_details))
44 await breadcrumbs(env, _out)
46 p {'Do you require more information, or assistance with integrating the projects on this site? We’d love to hear from you.'}
48 div.accordion#accordion.mb-5(role="tablist" aria-multiselectable="true") {
50 div.card-header#step-1-heading(role="tab") {
51 span#step-1-tick(style="display: none;") {
52 span.icon-color.pr-3 {_out.push(icon_tick)}
54 span#step-1-cross(style="display: none;") {
55 span.icon-color.pr-3 {_out.push(icon_cross)}
57 //span#step-1-spinner(style="display: none;") {
58 // span.icon-color.pr-3 {
59 // div.spinner-border(role="status") {
60 // span.sr-only {'Loading...'}
64 a.h5(data-toggle="collapse" data-parent="#accordion" href="#step-1-collapse" aria-expanded="true" aria-controls="step-1-collapse") {
68 div#step-1-collapse.collapse.show(role="tabpanel" aria-labelledby="step-1-heading" data-parent="#accordion") {
73 label.form-label(for="given-names") {'Given names *'}
74 input.form-control#given-names(type="text" value=draft_details ? draft_details.given_names : '' placeholder="Your given names" required="required" maxlength=256) {}
79 label.form-label(for="family-name") {'Family name'}
80 input.form-control#family-name(type="text" value=draft_details ? draft_details.family_name : '' placeholder="Your family name" maxlength=256) {}
87 label.form-label(for="company") {'Company'}
88 input.form-control#company(type="company" value=draft_details ? draft_details.company : '' placeholder="Your company" maxlength=256) {}
93 label.form-label(for="email") {'Email *'}
94 input.form-control#email(type="email" value=draft_details ? draft_details.email : '' placeholder="Your email address" required="required" maxlength=256) {}
101 label.form-label(for="message") {'Message *'}
102 textarea.form-control#message(placeholder="Your message" required="required" rows=6 maxlength=65536) {
104 `${draft_details.message}`
110 button.btn.btn-success#step-1-continue(type="button") {'Continue'}
111 p.'mt-3'.mb-0 {'* These fields are required.'}
116 div.card-header#step-2-heading(role="tab") {
117 span#step-2-tick(style="display: none;") {
118 span.icon-color.pr-3 {_out.push(icon_tick)}
120 span#step-2-cross(style="display: none;") {
121 span.icon-color.pr-3 {_out.push(icon_cross)}
123 span#step-2-spinner(style="display: none;") {
124 span.icon-color.pr-3 {
125 div.spinner-border(role="status") {
126 span.sr-only {'Loading...'}
130 a.h5.collapsed(data-toggle="collapse" data-parent="#accordion" href="#step-2-collapse" aria-expanded="false" aria-controls="step-2-collapse") {
134 div#step-2-collapse.collapse(role="tabpanel" aria-labelledby="step-2-heading" data-parent="#accordion") {
136 p#step-2-message {'Please enter enquiry details first.'}
138 button.btn.btn-outline-secondary#step-2-back(type="button") {'Back'}
139 button.btn.btn-outline-secondary.ml-3#step-2-resend-enquiry(type="button") {'Re-send enquiry'}
147 //script(src="/js/api_call.js") {}
150 //let api_contact_get_draft = async (...args) => api_call(
151 // '/api/contact/get_draft.json',
154 let api_contact_set_draft = async (...args) => api_call(
155 '/api/contact/set_draft.json',
158 let api_contact_send_enquiry = async (...args) => api_call(
159 '/api/contact/send_enquiry.json',
163 let draft_timeout_running = false
164 let draft_timeout_handler = async () => {
165 draft_timeout_running = false
166 await api_contact_set_draft(
168 given_names: document.getElementById('given-names').value.slice(0, 256),
169 family_name: document.getElementById('family-name').value.slice(0, 256),
170 company: document.getElementById('company').value.slice(0, 256),
171 email: document.getElementById('email').value.slice(0, 256).toLowerCase(),
172 message: document.getElementById('message').value.slice(0, 65536)
175 //console.log('draft', await api_contact_get_draft())
177 let draft_change_handler = () => {
178 if (!draft_timeout_running) {
179 draft_timeout_running = true
180 setTimeout(draft_timeout_handler, 5000)
185 let step_1 = async () => {
187 !document.getElementById('given-names').reportValidity() ||
188 !document.getElementById('family-name').reportValidity() ||
189 !document.getElementById('company').reportValidity() ||
190 !document.getElementById('email').reportValidity() ||
191 !document.getElementById('message').reportValidity()
193 $('#step-1-tick').hide()
194 $('#step-1-cross').show()
195 //$('#step-1-spinner').hide()
198 $('#step-1-tick').show()
199 $('#step-1-cross').hide()
200 //$('#step-1-spinner').hide()
203 given_names: document.getElementById('given-names').value.slice(0, 256),
204 family_name: document.getElementById('family-name').value.slice(0, 256),
205 company: document.getElementById('company').value.slice(0, 256),
206 email: document.getElementById('email').value.slice(0, 256).toLowerCase(),
207 message: document.getElementById('message').value.slice(0, 65536)
212 let step_2 = async () => {
213 $('#step-2-tick').hide()
214 $('#step-2-cross').hide()
215 $('#step-2-spinner').show()
216 document.getElementById('step-2').scrollIntoView()
219 await api_contact_send_enquiry(details)
223 error instanceof Problem ?
229 (error.stack || error.message).toString()
234 $('#step-2-tick').hide()
235 $('#step-2-cross').show()
236 $('#step-2-spinner').hide()
238 document.getElementById('step-2-message').textContent = problem.detail
239 $('#step-2-collapse').collapse('show')
242 $('#step-2-tick').show()
243 $('#step-2-cross').hide()
244 $('#step-2-spinner').hide()
246 document.getElementById('step-2-message').textContent = 'We have received your enquiry. We will be in touch as soon as possible.'
250 document.addEventListener(
253 document.getElementById('given-names').addEventListener(
257 document.getElementById('family-name').addEventListener(
261 document.getElementById('company').addEventListener(
265 document.getElementById('email').addEventListener(
269 document.getElementById('message').addEventListener(
274 document.getElementById('step-1-continue').addEventListener(
277 if (await step_1() && await step_2())
278 $('#step-2-collapse').collapse('show')
282 document.getElementById('step-2-back').addEventListener(
284 () => {$('#step-1-collapse').collapse('show')}
287 document.getElementById('step-2-resend-enquiry').addEventListener(
291 $('#step-2-collapse').collapse('show')