Merge pull request #226 from timekit-io/VS-52235

VS-52233 fix for multi select

package.json

@@ -1,5 +1,5 @@
 {
-	"version": "2.7.3",
+	"version": "2.7.4",
 	"name": "timekit-booking",
 	"description": "Make a beautiful embeddable booking widget in minutes",
 	"main": "dist/booking.min.js",

src/render.js

@@ -489,27 +489,41 @@ function InitRender(deps) {
 		return message;
 	};
 
+	var parseHtmlTags = function (field) {
+		if (field.format === 'label') {
+			field.title = field.title.replace(/\(\((.*?)\)\)/g, function(match, token) {
+				var linkTag = token.split(',');
+				return '<a target="_blank" href="' + linkTag[1].trim() + '">' + linkTag[0].trim() + '</a>';
+			});
+		}
+		return field;
+	};
+
 	// Render customer fields
 	var renderCustomerFields = function () {
 		var textTemplate = require('./templates/fields/text.html');
-		var textareaTemplate = require('./templates/fields/textarea.html');
+		var labelTemplate = require('./templates/fields/label.html');
 		var selectTemplate = require('./templates/fields/select.html');
+		var textareaTemplate = require('./templates/fields/textarea.html');
 		var checkboxTemplate = require('./templates/fields/checkbox.html');
+		var multiCheckboxTemplate = require('./templates/fields/multi-checkbox.html');
 
 		var fieldsTarget = [];
 		$.each(getConfig().customer_fields, function (key, field) {
 			var tmpl = textTemplate;
-			if (field.format === 'textarea') tmpl = textareaTemplate;
+			if (field.format === 'label') tmpl = labelTemplate;
 			if (field.format === 'select') tmpl = selectTemplate;
+			if (field.format === 'textarea') tmpl = textareaTemplate;
 			if (field.format === 'checkbox') tmpl = checkboxTemplate;
+			if (field.format === 'checkbox' && field.enum) tmpl = multiCheckboxTemplate;
 			if (!field.format) field.format = 'text';
 			if (key === 'email') field.format = 'email';
 			var data = $.extend(
 				{
 					key: key,
 					arrowDownIcon: require('!svg-inline-loader!./assets/arrow-down-icon.svg'),
 				},
-				field
+				parseHtmlTags(field)
 			);
 			var fieldTarget = $(tmpl.render(data));
 			fieldsTarget.push(fieldTarget);
@@ -581,6 +595,15 @@ function InitRender(deps) {
 			else field.removeClass('bookingjs-form-field--dirty');
 		});
 
+		var requiredCheckboxes = $(form).find('.bookingjs-form-field--checkbox-multi :checkbox[required]');
+		requiredCheckboxes.change(function() {
+			if(requiredCheckboxes.is(':checked')) {
+				requiredCheckboxes.removeAttr('required');
+			} else {
+				requiredCheckboxes.attr('required', 'required');
+			}
+		});
+
 		form.submit(function (e) {
 			submitBookingForm(this, e, eventData);
 		});
@@ -657,11 +680,19 @@ function InitRender(deps) {
 
 		var formData = {};
 		$.each(formElement.serializeArray(), function (i, field) {
-			formData[field.name] = field.value;
+			var fieldKey = field.name;
+			if (!(fieldKey in formData)) {
+				formData[fieldKey] = field.value;
+			} else {
+				if (!Array.isArray(formData[fieldKey])) {
+					formData[fieldKey] = [formData[fieldKey], field.value];
+				} else {
+					formData[fieldKey].push(field.value);
+				}
+			}
 		});
 
 		formElement.addClass('loading');
-
 		utils.doCallback('submitBookingForm', formData);
 
 		// Call create event endpoint
@@ -762,13 +793,19 @@ function InitRender(deps) {
 		// Save custom fields in meta object
 		$.each(getConfig().customer_fields, function (key, field) {
 			if ($.inArray(key, nativeFields) >= 0) return;
-			if (field.format === 'checkbox') formData[key] = !!formData[key];
-			args.customer[key] = formData[key];
-			args.description +=
-				(getConfig().customer_fields[key].title || key) +
-				': ' +
-				formData[key] +
-				'\n';
+			if (field.format === 'checkbox') {
+				if (!Array.isArray(formData[key])) {
+					formData[key] = !!formData[key];
+				}
+			};
+			if (field.format !== 'label') {
+				args.customer[key] = formData[key];
+				args.description +=
+					(getConfig().customer_fields[key].title || key) +
+					': ' +
+					formData[key] +
+					'\n';
+			}
 		});
 
 		if (

src/styles/main.scss

@@ -431,28 +431,41 @@
 
     &-label--checkbox {
       display: block;
+      padding: 10px;
       font-size: 1em;
-      margin-left: 35px;
+      margin-left: 28px;
       color: $textLightColor;
       font-family: $fontFamily;
       border-bottom: 1px solid $borderColor;
 
       &:disabled {
         cursor: not-allowed;
         font-style: italic;
-
         &:focus {
           box-shadow: inset 0px 0px 1px 1px #D8D8D8;
         }
       }
+
+      input[type=checkbox] {
+        position: absolute;
+        left: 3px;
+        top: 9px;
+      }
     }
 
-    &-input--checkbox[type=checkbox] {
-      position: absolute;
-      top: 10px;
-      left: 10px;
-      width: auto;
-      margin: 0;
+    &-field--checkbox-multi {
+      margin-bottom: 5px;
+      label {
+        position: relative;
+        margin-left: 0;
+        padding: 2px 0;
+        border: 0;
+
+        input[type=checkbox] {
+          position: initial;
+          margin-right: 10px;
+        }
+      }
     }
 
     // Textarea field
@@ -485,7 +498,7 @@
 
     &-input-arrow--select {
       position: absolute;
-      top: 45px;
+      top: 34px;
       right: 25px;
       width: 12px;
       height: 7.42px;

src/templates/fields/checkbox.html

@@ -1,17 +1,17 @@
-<div class="bookingjs-form-field bookingjs-form-field--checkbox">
-  <input
-    id="input-{{ key }}"
-    class="bookingjs-form-input--checkbox input-{{ key }}"
-    type="checkbox"
-    name="{{ key }}"
-    value="true"
-    {{# prefilled }} checked {{/ prefilled }}
-    {{# readonly }} disabled {{/ readonly }}
-    {{# required }} required {{/ required }}
-  />
+<div class="bookingjs-form-field bookingjs-form-field--checkbox">  
   <label
     for="input-{{ key }}"
     class="bookingjs-form-label--checkbox label-{{ key }}">
     {{ title }}
+    <input
+      id="input-{{ key }}"
+      class="bookingjs-form-input--checkbox input-{{ key }}"
+      type="checkbox"
+      name="{{ key }}"
+      value="true"
+      {{# prefilled }} checked {{/ prefilled }}
+      {{# readonly }} disabled {{/ readonly }}
+      {{# required }} required {{/ required }}
+  />
   </label>
 </div>

src/templates/fields/label.html

@@ -0,0 +1,7 @@
+<div class="bookingjs-form-field {{# prefilled }}bookingjs-form-field--dirty{{/ prefilled }}">
+  <p
+    for="input-{{ key }}"
+    class="bookingjs-form-text label-{{ key }}">
+    {{& title }}
+  </p>
+</div>

src/templates/fields/multi-checkbox.html

@@ -0,0 +1,20 @@
+<div class="bookingjs-form-field bookingjs-form-field--checkbox-multi">
+  <legend class="bookingjs-form-label">{{ title }}</legend>
+  {{# enum }}
+  <label
+    for="input-{{ key }}-{{ . }}"
+    class="bookingjs-form-label--checkbox label-{{ key }}">    
+    <input
+      type="checkbox"
+      value="{{ . }}"
+      name="{{ key }}"
+      id="input-{{ key }}-{{ . }}"
+      {{# prefilled }} checked {{/ prefilled }}
+      {{# readonly }} disabled {{/ readonly }}
+      {{# required }} required {{/ required }}
+      class="bookingjs-form-input--checkbox input-{{ key }}"
+    />
+    {{ . }}
+  </label>
+  {{/ enum }}
+</div>