contact/index.html.jst

   1 let XDate = require('xdate')
   2
   3 return async env => {
   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')
   9
  10   // preload draft details if any
  11   let transaction = await env.site.database.Transaction()
  12   let draft_details
  13   try {
  14     let root = await transaction.get({})
  15     let session = await get_session(env, root)
  16
  17     let contact_draft = await session.get('contact_draft')
  18     draft_details =
  19       contact_draft !== undefined &&
  20         XDate.now() < await contact_draft.get_json('expires') ?
  21         {
  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')
  28         } :
  29         null
  30   }
  31   finally {
  32     transaction.rollback()
  33   }
  34   console.log('draft_details', JSON.stringify(draft_details))
  35
  36   await navbar(
  37     env,
  38     // head
  39     async _out => {},
  40     // body
  41     async _out => {
  42       await breadcrumbs(env, _out)
  43
  44       p {'Do you require more information, or assistance with integrating the projects on this site? We’d love to hear from you.'}
  45
  46       div.accordion#accordion.mb-5(role="tablist" aria-multiselectable="true") {
  47         div.card#step-1 {
  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)}
  51             }
  52             span#step-1-cross(style="display: none;") {
  53               span.icon-color.pr-3 {_out.push(icon_cross)}
  54             }
  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...'}
  59             //    }
  60             //  }
  61             //}
  62             a.h5(data-toggle="collapse" data-parent="#accordion" href="#step-1-collapse" aria-expanded="true" aria-controls="step-1-collapse") {
  63               'Enquiry details'
  64             }
  65           }
  66           div#step-1-collapse.collapse.show(role="tabpanel" aria-labelledby="step-1-heading" data-parent="#accordion") {
  67             div.card-body {
  68               div.row {
  69                 div.col-md-6 {
  70                   div.form-group {
  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) {}
  73                   }
  74                 }
  75                 div.col-md-6 {
  76                   div.form-group {
  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) {}
  79                   }
  80                 }
  81               }
  82               div.row {
  83                 div.col-md-6 {
  84                   div.form-group {
  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) {}
  87                   }
  88                 }
  89                 div.col-md-6 {
  90                   div.form-group {
  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) {}
  93                   }
  94                 }
  95               }
  96               div.row {
  97                 div.col-md-12 {
  98                   div.form-group {
  99                     label.form-label(for="message") {'Message *'}
 100                     textarea.form-control#message(placeholder="Your message" required="required" rows=6 maxlength=65536) {
 101                       if (draft_details)
 102                         `${draft_details.message}`
 103                     }
 104                   }
 105                 }
 106               }
 107
 108               button.btn.btn-success#step-1-continue(type="button") {'Continue'}
 109               p.'mt-3'.mb-0 {'* These fields are required.'}
 110             }
 111           }
 112         }
 113         div.card#step-2 {
 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)}
 117             }
 118             span#step-2-cross(style="display: none;") {
 119               span.icon-color.pr-3 {_out.push(icon_cross)}
 120             }
 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...'}
 125                 }
 126               }
 127             }
 128             a.h5.collapsed(data-toggle="collapse" data-parent="#accordion" href="#step-2-collapse" aria-expanded="false" aria-controls="step-2-collapse") {
 129               'Send enquiry'
 130             }
 131           }
 132           div#step-2-collapse.collapse(role="tabpanel" aria-labelledby="step-2-heading" data-parent="#accordion") {
 133             div.card-body {
 134               p#step-2-message {'Please enter enquiry details first.'}
 135
 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'}
 138             }
 139           }
 140         }
 141       }
 142     },
 143     // scripts
 144     async _out => {
 145       //script(src="/js/utils.js") {}
 146
 147       script {
 148         let draft_timeout_running = false
 149         let draft_timeout_handler = async () => {
 150           draft_timeout_running = false
 151           await api_call(
 152             '/api/contact/set_draft.json',
 153             {
 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)
 159             }
 160           )
 161           //console.log('draft', await api_call('/api/contact/get_draft.json'))
 162         }
 163         let draft_change_handler = () => {
 164           if (!draft_timeout_running) {
 165             draft_timeout_running = true
 166             setTimeout(draft_timeout_handler, 5000)
 167           }
 168         }
 169
 170         let details
 171         let step_1 = async () => {
 172           if (
 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()
 178           ) {
 179             $('#step-1-tick').hide()
 180             $('#step-1-cross').show()
 181             //$('#step-1-spinner').hide()
 182             return false
 183           }
 184           $('#step-1-tick').show()
 185           $('#step-1-cross').hide()
 186           //$('#step-1-spinner').hide()
 187
 188           details = {
 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)
 194           }
 195           return true
 196         }
 197
 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()
 203
 204           try {
 205             await api_call(
 206               '/api/contact/send_enquiry.json',
 207               details
 208             )
 209           }
 210           catch (error) {
 211             let problem = Problem.from(error)
 212
 213             $('#step-2-tick').hide()
 214             $('#step-2-cross').show()
 215             $('#step-2-spinner').hide()
 216
 217             document.getElementById('step-2-message').textContent = problem.detail
 218             $('#step-2-collapse').collapse('show')
 219             return false
 220           }
 221           $('#step-2-tick').show()
 222           $('#step-2-cross').hide()
 223           $('#step-2-spinner').hide()
 224
 225           document.getElementById('step-2-message').textContent = 'We have received your enquiry. We will be in touch as soon as possible.'
 226           return true
 227         }
 228
 229         document.addEventListener(
 230           'DOMContentLoaded',
 231           () => {
 232             document.getElementById('given-names').addEventListener(
 233               'change',
 234               draft_change_handler
 235             )
 236             document.getElementById('family-name').addEventListener(
 237               'change',
 238               draft_change_handler
 239             )
 240             document.getElementById('company').addEventListener(
 241               'change',
 242               draft_change_handler
 243             )
 244             document.getElementById('email').addEventListener(
 245               'change',
 246               draft_change_handler
 247             )
 248             document.getElementById('message').addEventListener(
 249               'change',
 250               draft_change_handler
 251             )
 252
 253             document.getElementById('step-1-continue').addEventListener(
 254               'click',
 255               async () => {
 256                 if (await step_1() && await step_2())
 257                   $('#step-2-collapse').collapse('show')
 258               }
 259             )
 260
 261             document.getElementById('step-2-back').addEventListener(
 262               'click',
 263               () => {$('#step-1-collapse').collapse('show')}
 264             )
 265
 266             document.getElementById('step-2-resend-enquiry').addEventListener(
 267               'click',
 268               async () => {
 269                 if (await step_2())
 270                   $('#step-2-collapse').collapse('show')
 271               }
 272             )
 273           }
 274         )
 275       }
 276     }
 277   )
 278 }