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/utils.js") {}
148 let draft_timeout_running = false
149 let draft_timeout_handler = async () => {
150 draft_timeout_running = false
152 '/api/contact/set_draft.json',
154 given_names: document.getElementById('given-names').value.slice(0, 256),
155 family_name: document.getElementById('family-name').value.slice(0, 256),
156 company: document.getElementById('company').value.slice(0, 256),
157 email: document.getElementById('email').value.slice(0, 256).toLowerCase(),
158 message: document.getElementById('message').value.slice(0, 65536)
161 //console.log('draft', await api_call('/api/contact/get_draft.json'))
163 let draft_change_handler = () => {
164 if (!draft_timeout_running) {
165 draft_timeout_running = true
166 setTimeout(draft_timeout_handler, 5000)
171 let step_1 = async () => {
173 !document.getElementById('given-names').reportValidity() ||
174 !document.getElementById('family-name').reportValidity() ||
175 !document.getElementById('company').reportValidity() ||
176 !document.getElementById('email').reportValidity() ||
177 !document.getElementById('message').reportValidity()
179 $('#step-1-tick').hide()
180 $('#step-1-cross').show()
181 //$('#step-1-spinner').hide()
184 $('#step-1-tick').show()
185 $('#step-1-cross').hide()
186 //$('#step-1-spinner').hide()
189 given_names: document.getElementById('given-names').value.slice(0, 256),
190 family_name: document.getElementById('family-name').value.slice(0, 256),
191 company: document.getElementById('company').value.slice(0, 256),
192 email: document.getElementById('email').value.slice(0, 256).toLowerCase(),
193 message: document.getElementById('message').value.slice(0, 65536)
198 let step_2 = async () => {
199 $('#step-2-tick').hide()
200 $('#step-2-cross').hide()
201 $('#step-2-spinner').show()
202 document.getElementById('step-2').scrollIntoView()
206 '/api/contact/send_enquiry.json',
211 let problem = Problem.from(error)
213 $('#step-2-tick').hide()
214 $('#step-2-cross').show()
215 $('#step-2-spinner').hide()
217 document.getElementById('step-2-message').textContent = problem.detail
218 $('#step-2-collapse').collapse('show')
221 $('#step-2-tick').show()
222 $('#step-2-cross').hide()
223 $('#step-2-spinner').hide()
225 document.getElementById('step-2-message').textContent = 'We have received your enquiry. We will be in touch as soon as possible.'
229 document.addEventListener(
232 document.getElementById('given-names').addEventListener(
236 document.getElementById('family-name').addEventListener(
240 document.getElementById('company').addEventListener(
244 document.getElementById('email').addEventListener(
248 document.getElementById('message').addEventListener(
253 document.getElementById('step-1-continue').addEventListener(
256 if (await step_1() && await step_2())
257 $('#step-2-collapse').collapse('show')
261 document.getElementById('step-2-back').addEventListener(
263 () => {$('#step-1-collapse').collapse('show')}
266 document.getElementById('step-2-resend-enquiry').addEventListener(
270 $('#step-2-collapse').collapse('show')