standalone enquiry forms

Author: samuelcolvin

index.html

@@ -24,6 +24,8 @@
     </main>
   </body>
   <script>
-    socket('f8d88b6562b3434ba4ef')
+    socket('f8d88b6562b3434ba4ef', {
+      mode: 'enquiry',
+    })
   </script>
 </html>

src/components/con-modal.vue

@@ -78,6 +78,9 @@ export default {
       }
     }
   },
+  created: function () {
+    this.$root.get_enquiry()
+  },
 }
 </script>
 
@@ -103,6 +106,7 @@ export default {
 }
 
 .tcs-content {
+  flex-grow: 1;
   padding-right: 10px;
   color: #444;
   margin-right: 5px;

src/components/enquiry.vue

@@ -2,9 +2,10 @@
   <div>
     <div class="tcs-submitted" v-if="submitted" v-html="$root.get_text('enquiry_submitted_thanks', {}, true)"></div>
     <div v-else>
-      <p class="tcs">
-        {{ $root.get_text('contractor_enquiry_message', {contractor_name: contractor.name}) }}
-      </p>
+      <div v-if="contractor" class="tcs-centre" v-html="$root.get_text('contractor_enquiry_message', {contractor_name: contractor.name}, true)">
+      </div>
+      <div v-else class="tcs-centre" v-html="$root.get_text('enquiry_message', {}, true)">
+      </div>
       <form class="tcs" @submit.prevent="submit">
         <div v-for="field in visible_fields">
           <tcs-input :field="field"></tcs-input>
@@ -26,7 +27,12 @@
 import input from './input.vue'
 
 export default {
-  props: ['contractor'],
+  props: {
+    contractor: {
+      type: Object,
+      default: null,
+    },
+  },
   components: {
     'tcs-input': input
   },
@@ -50,6 +56,9 @@ export default {
       this.submitted = true
     }
   },
+  created: function () {
+    this.$root.get_enquiry()
+  },
 }
 </script>
 
@@ -61,8 +70,9 @@ form.tcs {
   max-width: 450px;
 }
 
-p.tcs {
+.tcs-centre {
   margin: 0 0 10px;
+  text-align: center;
 }
 
 .tcs-submitted {
@@ -77,7 +87,7 @@ p.tcs {
     font-size: 17px;
     padding: 10px 12px;
     border: none;
-    border-radius: 4px;
+    border-radius: 5px;
 
     background-color: $button-colour;
     color: white;

src/components/modal.vue

@@ -43,7 +43,6 @@ export default {
     title: String,
   },
   created: function () {
-    this.$root.get_enquiry()
     // TODO could do something less ugly here like hide the scroll bar at all times
     this.body_overflow_before = document.body.style.overflow
     document.body.style.overflow = 'hidden'

src/main.js

@@ -3,6 +3,7 @@ import RavenVue from 'raven-js/plugins/vue'
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import app from './app'
+import enquiry from './components/enquiry'
 import grid from './components/grid'
 import con_modal from './components/con-modal'
 import {to_markdown, clean} from './utils'
@@ -12,37 +13,61 @@ Raven.config(dsn, {release: process.env.RELEASE}).addPlugin(RavenVue, Vue).insta
 
 Vue.use(VueRouter)
 
-const ConfiguredVueRouter = config => new VueRouter({
-  mode: config.router_mode,
-  routes: [
-    {
-      path: config.url_root,
-      name: 'index',
-      component: grid,
-      children: [
-        {
-          path: config.url_root + ':link',
-          name: 'modal',
-          component: con_modal,
-        }
-      ]
-    },
-  ]
-})
+const ConfiguredVueRouter = config => {
+  let routes
+  if (config.mode === 'grid') {
+    routes = [
+      {
+        path: config.url_root,
+        name: 'index',
+        component: grid,
+        children: [
+          {
+            path: config.url_root + ':link',
+            name: 'modal',
+            component: con_modal,
+          }
+        ]
+      },
+    ]
+  } else if (config.mode === 'enquiry') {
+    routes = [
+      {
+        path: config.url_root,
+        name: 'index',
+        component: enquiry,
+      },
+    ]
+  }
+  return new VueRouter({
+    mode: config.router_mode,
+    routes: routes
+  })
+}
 
 const STRINGS = {
   skills_label: 'Skills',
   contractor_enquiry_message: 'Please enter your details below to enquire about tutoring with {contractor_name}.',
+  enquiry_message: 'Please enter your details below and we will get in touch with you directly.',
   contractor_enquiry_button: 'Contact {contractor_name}',
   contractor_details_button: 'Show Profile',
   submit_enquiry: 'Submit Enquiry',
   enquiry_submitted_thanks: 'Enquiry submitted, thank you.\n\nYou can now close this window.'
 }
 
+const MODES = ['grid', 'enquiry']
+
 module.exports = function (public_key, config) {
   config = config || {}
   let error = null
 
+  if (config.mode === undefined) {
+    config.mode = 'grid'
+  } else if (!MODES.includes(config.mode)) {
+    error = `invalid mode "${config.mode}", options are: ${MODES.join(', ')}`
+    config.mode = 'grid'
+  }
+
   if (config.api_root === undefined) {
     config.api_root = process.env.SOCKET_API_URL
   }
@@ -82,7 +107,7 @@ module.exports = function (public_key, config) {
       config: config,
       error: null,
       public_key: public_key,
-      enquiry_form_info: null,
+      enquiry_form_info: {},
       enquiry_data: {},
     },
     components: {
@@ -150,7 +175,7 @@ response text:   "${xhr.responseText}"`)
         return true
       },
       get_enquiry: function () {
-        if (this.enquiry_form_info !== null) {
+        if (Object.keys(this.enquiry_form_info).length !== 0) {
           return
         }
         let xhr = new window.XMLHttpRequest()
@@ -160,22 +185,11 @@ response text:   "${xhr.responseText}"`)
           if (xhr.status !== 200) {
             throw new Error(`bad response ${xhr.status} at "${url}"`)
           } else {
-            this.enquiry_form_info = JSON.parse(xhr.responseText)
+            this.enquiry_form_info = Object.assign({}, this.enquiry_form_info, JSON.parse(xhr.responseText))
           }
         }
         xhr.send()
       },
-      get_text: function (name, replacements, is_markdown) {
-        let s = this.config[name]
-        for (let [k, v] of Object.entries(replacements || {})) {
-          s = s.replace('{' + k + '}', v)
-        }
-        if (is_markdown === true) {
-          return to_markdown(s)
-        } else {
-          return s
-        }
-      },
       submit_enquiry: function (callback) {
         let data = JSON.stringify(clean(this.enquiry_data))
         let xhr = new window.XMLHttpRequest()
@@ -195,6 +209,17 @@ response text:   "${xhr.responseText}"`)
         }
         xhr.send(data)
       },
+      get_text: function (name, replacements, is_markdown) {
+        let s = this.config[name]
+        for (let [k, v] of Object.entries(replacements || {})) {
+          s = s.replace('{' + k + '}', v)
+        }
+        if (is_markdown === true) {
+          return to_markdown(s)
+        } else {
+          return s
+        }
+      },
     }
   })
 }