page.remove(), 200);
144 | }
145 | }
146 |
147 | module.exports = BaseTemplate;
--------------------------------------------------------------------------------
/src/booking/helpers/config.js:
--------------------------------------------------------------------------------
1 | const get = require("lodash/get");
2 | const qs = require('querystringify');
3 | const merge = require("lodash/merge");
4 |
5 | class Config {
6 | constructor() {
7 | this.config = {};
8 | this.global = null;
9 | this.defaultConfigs = require('../configs');
10 | }
11 |
12 | all() {
13 | return this.config;
14 | }
15 |
16 | get(key) {
17 | return get(this.config, key);
18 | }
19 |
20 | getGlobal(key) {
21 | return get(this.global, key);
22 | }
23 |
24 | set(configs) {
25 | return (this.config = this.setDefaults(configs));
26 | }
27 |
28 | setGlobal(value) {
29 | this.global = value;
30 | return this;
31 | }
32 |
33 | parseAndUpdate(suppliedConfig) {
34 |
35 | // Extend the default config with supplied settings
36 | let newConfig = this.setDefaults(suppliedConfig);
37 |
38 | // Apply presets
39 | newConfig = this.applyConfigPreset(newConfig, 'timeDateFormat', newConfig.ui.time_date_format)
40 | newConfig = this.applyConfigPreset(newConfig, 'availabilityView', newConfig.ui.availability_view)
41 |
42 | // Set default formats for native fields
43 | newConfig = this.setCustomerFieldsNativeFormats(newConfig);
44 |
45 | // Check for required settings
46 | if (!newConfig.app_key) throw 'A required config setting ("app_key") was missing';
47 |
48 | // Prefill fields based on query string
49 | const urlParams = this.getGlobal("location") && this.getGlobal("location.search");
50 | if (urlParams) newConfig = this.applyPrefillFromUrlGetParams(newConfig, qs.parse(urlParams));
51 |
52 | return this.set(newConfig);
53 | }
54 |
55 | setDefaultsWithoutProject(suppliedConfig) {
56 | return merge({}, this.defaultConfigs.primaryWithoutProject, suppliedConfig);
57 | }
58 |
59 | applyPrefillFromUrlGetParams(suppliedConfig, urlParams) {
60 | const customerFields = suppliedConfig.customer_fields;
61 | const customerFieldsKeys = Object.keys(customerFields);
62 |
63 | for(let i=0; i < customerFieldsKeys.length; i++) {
64 | const key = customerFieldsKeys[i];
65 |
66 | if (!urlParams['customer.' + key]) continue;
67 | suppliedConfig.customer_fields[key].prefilled = urlParams['customer.' + key];
68 | }
69 |
70 | return suppliedConfig;
71 | }
72 |
73 | setCustomerFieldsNativeFormats(config) {
74 | const customerFields = config.customer_fields;
75 | const customerFieldsKeys = Object.keys(customerFields);
76 |
77 | for(let i=0; i < customerFieldsKeys.length; i++) {
78 | const key = customerFieldsKeys[i];
79 | const field = customerFields[customerFieldsKeys[i]];
80 |
81 | if (!this.defaultConfigs.customerFieldsNativeFormats[key]) continue;
82 | config.customer_fields[key] = merge(this.defaultConfigs.customerFieldsNativeFormats[key], field);
83 | }
84 |
85 | return config;
86 | }
87 |
88 | applyConfigPreset(localConfig, propertyName, propertyObject) {
89 | const presetCheck = this.defaultConfigs.presets[propertyName][propertyObject];
90 | if (presetCheck) return merge({}, presetCheck, localConfig);
91 | return localConfig;
92 | }
93 |
94 | setDefaults(suppliedConfig) {
95 | suppliedConfig.sdk = this.prepareSdkConfig(suppliedConfig);
96 | return merge({}, this.defaultConfigs.primary, suppliedConfig);
97 | }
98 |
99 | prepareSdkConfig(suppliedConfig) {
100 | if (typeof suppliedConfig.sdk === 'undefined') {
101 | suppliedConfig.sdk = {};
102 | }
103 | if (suppliedConfig.app_key) {
104 | suppliedConfig.sdk.appKey = suppliedConfig.app_key;
105 | }
106 | if (suppliedConfig.api_base_url) {
107 | suppliedConfig.sdk.apiBaseUrl = suppliedConfig.api_base_url;
108 | }
109 | return merge({}, this.defaultConfigs.primary.sdk, suppliedConfig.sdk);
110 | }
111 | }
112 |
113 | module.exports = Config;
--------------------------------------------------------------------------------
/src/booking/helpers/util.js:
--------------------------------------------------------------------------------
1 | const isEmpty = require("lodash/isEmpty");
2 |
3 | class Util {
4 | constructor(config) {
5 | this.config = config;
6 | }
7 |
8 | isFunction(object) {
9 | return !!(object && object.constructor && object.call && object.apply);
10 | }
11 |
12 | isArray(object) {
13 | return object && object.constructor === Array;
14 | }
15 |
16 | logError(message) {
17 | console.warn('TimekitBooking Error: ', message);
18 | }
19 |
20 | logDeprecated(message) {
21 | console.warn('TimekitBooking Deprecated: ', message);
22 | }
23 |
24 | logDebug(message) {
25 | if (this.config.get('debug')) {
26 | console.log('TimekitBooking Debug: ', message);
27 | }
28 | }
29 |
30 | logDeprecatedfunction(message) {
31 | console.warn('TimekitBooking Deprecated: ', message);
32 | }
33 |
34 | isEmbeddedProject(suppliedConfig) {
35 | return typeof suppliedConfig.project_id !== 'undefined'
36 | }
37 |
38 | isHostedProject(suppliedConfig) {
39 | return typeof suppliedConfig.project_slug !== 'undefined'
40 | }
41 |
42 | isRemoteProject(suppliedConfig) {
43 | return (this.isEmbeddedProject(suppliedConfig) || this.isHostedProject(suppliedConfig))
44 | }
45 |
46 | doesConfigExist(suppliedConfig) {
47 | return (suppliedConfig !== undefined && typeof suppliedConfig === 'object' && !isEmpty(suppliedConfig));
48 | }
49 |
50 | doCallback(hook, arg, deprecated) {
51 | if(this.config.get('callbacks') && this.isFunction(this.config.get('callbacks.' + hook))) {
52 | if (deprecated) {
53 | this.logDeprecated(hook + ' callback has been replaced, please see docs');
54 | }
55 | this.config.get('callbacks.' + hook)(arg);
56 | }
57 | this.logDebug(['Trigger callback "' + hook + '" with arguments:', arg]);
58 | }
59 | }
60 |
61 | module.exports = Util;
--------------------------------------------------------------------------------
/src/booking/index.js:
--------------------------------------------------------------------------------
1 |
2 | 'use strict';
3 |
4 | const BookingWidget = require('./widget');
5 | const globalLibraryConfig = window.timekitBookingConfig;
6 |
7 | // Autoload if config is available on window, else export function
8 | if (window && globalLibraryConfig && globalLibraryConfig.autoload !== false) {
9 | const instance = new BookingWidget();
10 | module.exports = instance.init(globalLibraryConfig);
11 | } else {
12 | module.exports = BookingWidget;
13 | }
--------------------------------------------------------------------------------
/src/booking/pages/reschedule.js:
--------------------------------------------------------------------------------
1 | const moment = require('moment-timezone');
2 | const interpolate = require('sprintf-js');
3 | const BaseTemplate = require('../helpers/base');
4 |
5 | class BookingReschdulePage extends BaseTemplate {
6 | constructor(template) {
7 | super();
8 | this.template = template;
9 | this.utils = template.utils;
10 | this.config = template.config;
11 | this.bookingReschdulePageTarget = null;
12 | }
13 |
14 | initBookingAndRender(eventData) {
15 | const dateFormat = this.config.get('ui.booking_date_format') || moment.localeData().longDateFormat('LL');
16 | const timeFormat = this.config.get('ui.booking_time_format') || moment.localeData().longDateFormat('LT');
17 |
18 | eventData.oldDate = this.formatTimestamp(this.config.get('reschedule.eventStart'), dateFormat);
19 | eventData.oldTime = this.formatTimestamp(this.config.get('reschedule.eventStart'), timeFormat) + ' - ' + this.formatTimestamp(this.config.get('reschedule.eventEnd'), timeFormat);
20 |
21 | return this.render(eventData);
22 | }
23 |
24 | render(eventData) {
25 | this.utils.doCallback('showBookingReschdulePage', eventData);
26 |
27 | const template = require('../templates/reschedule-page.html');
28 | const successMessage = this.config.get('ui.localization.reschedule_success_message');
29 | const dateFormat = this.config.get('ui.booking_date_format') || moment.localeData().longDateFormat('LL');
30 | const timeFormat = this.config.get('ui.booking_time_format') || moment.localeData().longDateFormat('LT');
31 | const allocatedResource = eventData.extendedProps.resources ? eventData.extendedProps.resources[0].name : false;
32 |
33 | this.bookingReschdulePageTarget = this.htmlToElement(
34 | template({
35 | oldTime: eventData.oldTime,
36 | oldDate: eventData.oldDate,
37 | allocatedResource: allocatedResource,
38 | chosenDate: this.formatTimestamp(eventData.startStr, dateFormat),
39 | closeIcon: require('!svg-inline-loader!../assets/close-icon.svg'),
40 | errorIcon: require('!svg-inline-loader!../assets/error-icon.svg'),
41 | submitText: this.config.get('ui.localization.reschedule_submit_button'),
42 | loadingIcon: require('!svg-inline-loader!../assets/loading-spinner.svg'),
43 | checkmarkIcon: require('!svg-inline-loader!../assets/checkmark-icon.svg'),
44 | allocatedResourcePrefix: this.config.get('ui.localization.allocated_resource_prefix'),
45 | chosenTime: this.formatTimestamp(eventData.startStr, timeFormat) + ' - ' + this.formatTimestamp(eventData.endStr, timeFormat),
46 | successMessage: interpolate.sprintf(
47 | successMessage.indexOf('%s') !== -1 ? successMessage : successMessage + ' %s', '
2 |
{{& closeIcon }}
3 |
11 |
25 |
2 |
3 |
4 | {{& errorWarningIcon }}
5 |
6 |
7 | Ouch, we've encountered a problem
8 |
9 |
10 | {{& message }}
11 | {{& context }}
12 |
13 |
14 |
2 |
5 | {{ title }}
6 |
17 |
18 |
--------------------------------------------------------------------------------
/src/booking/templates/fields/label.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/booking/templates/fields/multi-checkbox.html:
--------------------------------------------------------------------------------
1 |
2 | {{ title }}
3 | {{# enum }}
4 |
7 |
19 | {{/ enum }}
20 |
21 |
--------------------------------------------------------------------------------
/src/booking/templates/fields/select.html:
--------------------------------------------------------------------------------
1 |
22 |
--------------------------------------------------------------------------------
/src/booking/templates/fields/tel.html:
--------------------------------------------------------------------------------
1 |
2 | {{^ hidden }}
3 |
6 | {{ title }}
7 |
8 | {{/ hidden }}
9 |
22 |
--------------------------------------------------------------------------------
/src/booking/templates/fields/text.html:
--------------------------------------------------------------------------------
1 |
2 | {{^ hidden }}
3 |
6 | {{ title }}
7 |
8 | {{/ hidden }}
9 |
23 |
--------------------------------------------------------------------------------
/src/booking/templates/fields/textarea.html:
--------------------------------------------------------------------------------
1 |
2 |
5 | {{ title }}
6 |
7 |
15 |
16 |
--------------------------------------------------------------------------------
/src/booking/templates/footer.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/booking/templates/loading.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | {{& loadingIcon }}
4 |
5 |
2 |
{{& closeIcon }}
3 |
16 |
30 |
2 |
3 |
4 |
5 | {{ ribbonText }}
6 |
7 |
8 |
9 |
2 |
3 |
2 | {{ name }}
3 |
4 |
--------------------------------------------------------------------------------
/src/booking/widget.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const merge = require("lodash/merge");
4 | const timekitSdk = require('timekit-sdk');
5 |
6 | const Util = require('./helpers/util');
7 | const Config = require('./helpers/config');
8 | const Template = require('./helpers/template');
9 |
10 | class BookingWidget {
11 | constructor() {
12 | this.config = new Config();
13 | this.utils = new Util(this.config);
14 | this.sdk = timekitSdk.newInstance();
15 | this.template = new Template(this.config, this.utils, this.sdk);
16 | }
17 |
18 | getVersion() {
19 | return VERSION;
20 | }
21 |
22 | getSdk() {
23 | return this.sdk;
24 | }
25 |
26 | getConfig() {
27 | return this.config;
28 | }
29 |
30 | getCalendar() {
31 | return this.template.getCalendar();
32 | }
33 |
34 | destroy() {
35 | this.template.destroy();
36 | }
37 |
38 | timekitCreateBooking(formData, eventData) {
39 | return this.template.bookingPage.timekitCreateBooking(formData, eventData);
40 | }
41 |
42 | render() {
43 | this.utils.doCallback('renderStarted');
44 |
45 | // Setup the Timekit SDK with correct config
46 | this.sdk.configure(this.config.get('sdk'));
47 |
48 | const timezone = this.config.get("ui.timezone");
49 |
50 | // Start by guessing customer timezone
51 | if (timezone) {
52 | this.template.setCustomerTimezone(timezone);
53 | } else {
54 | this.template.guessCustomerTimezone();
55 | }
56 |
57 | // Initialize FullCalendar
58 | this.template.initializeCalendar()
59 | .getAvailability()
60 | .renderAvatarImage()
61 | .renderDisplayName()
62 | .renderFooter();
63 |
64 | this.utils.doCallback('renderCompleted');
65 |
66 | return this;
67 | }
68 |
69 | init(suppliedConfig, global) {
70 |
71 | // Allows mokcing the window object if passed
72 | global = global || window;
73 | this.config.setGlobal(global);
74 |
75 | // Make sure that SDK is ready and debug flag is checked early
76 | this.config.set(suppliedConfig || {});
77 |
78 | this.utils.logDebug(['Version:', this.getVersion()]);
79 | this.utils.logDebug(['Supplied config:', suppliedConfig]);
80 |
81 | try {
82 | this.template.render(suppliedConfig || {});
83 | } catch (e) {
84 | this.utils.logError(e);
85 | return this;
86 | }
87 |
88 | // Check whether a config is supplied
89 | if (!this.utils.doesConfigExist(suppliedConfig)) {
90 | this.template.triggerError('No configuration was supplied. Please supply a config object upon library initialization');
91 | return this;
92 | }
93 |
94 | // Start from local config
95 | if (!this.utils.isRemoteProject(suppliedConfig) || suppliedConfig.disable_remote_load) {
96 | return this.startWithConfig(this.config.setDefaultsWithoutProject(suppliedConfig));
97 | }
98 |
99 | // Load remote embedded config
100 | if (this.utils.isEmbeddedProject(suppliedConfig)) {
101 | this.loadRemoteEmbeddedProject(suppliedConfig);
102 | }
103 |
104 | // Load remote hosted config
105 | if (this.utils.isHostedProject(suppliedConfig)) {
106 | this.loadRemoteHostedProject(suppliedConfig);
107 | }
108 |
109 | return this;
110 | }
111 |
112 | startWithConfig(suppliedConfig) {
113 | try {
114 | // Handle config and defaults
115 | const configs = this.config.parseAndUpdate(suppliedConfig);
116 | this.utils.logDebug(['Final config:', configs]);
117 | this.render();
118 | } catch (e) {
119 | this.template.triggerError(e);
120 | return this;
121 | }
122 | }
123 |
124 | loadRemoteHostedProject(suppliedConfig) {
125 | this.sdk.configure(this.config.get('sdk'));
126 | this.sdk.makeRequest({
127 | method: 'get',
128 | url: '/projects/hosted/' + suppliedConfig.project_slug
129 | })
130 | .then((response) => this.remoteProjectLoaded(response, suppliedConfig))
131 | .catch(e => this.template.triggerError(['The project could not be found, please double-check your "project_slug"', e]));
132 | }
133 |
134 | loadRemoteEmbeddedProject(suppliedConfig) {
135 | // App key is required when fetching an embedded project, bail if not fund
136 | if (!suppliedConfig.app_key) {
137 | this.template.triggerError('Missing "app_key" in conjunction with "project_id", please provide your "app_key" for authentication');
138 | return this;
139 | }
140 |
141 | this.sdk.configure(this.config.get('sdk'));
142 | this.sdk.makeRequest({
143 | method: 'get',
144 | url: '/projects/embed/' + suppliedConfig.project_id
145 | })
146 | .then((response) => this.remoteProjectLoaded(response, suppliedConfig))
147 | .catch(e => this.template.triggerError(['The project could not be found, please double-check your "project_id" and "app_key"', e]));
148 | }
149 |
150 | remoteProjectLoaded(response, suppliedConfig) {
151 | const remoteConfig = response.data;
152 |
153 | if (remoteConfig.id) {
154 | remoteConfig.project_id = remoteConfig.id;
155 | delete remoteConfig.id;
156 | }
157 | if (remoteConfig.slug) {
158 | remoteConfig.project_slug = remoteConfig.slug;
159 | delete remoteConfig.slug;
160 | }
161 |
162 | this.utils.logDebug(['Remote config:', remoteConfig]);
163 | return this.startWithConfig(merge({}, remoteConfig, suppliedConfig));
164 | }
165 | }
166 |
167 | module.exports = BookingWidget;
--------------------------------------------------------------------------------
/src/services/assets/close-icon.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
--------------------------------------------------------------------------------
/src/services/assets/error-warning-icon.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | error-warning-icon
5 | Created with Sketch.
6 |
8 |
9 |
13 |
14 |
--------------------------------------------------------------------------------
/src/services/assets/icon_back.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
--------------------------------------------------------------------------------
/src/services/assets/icon_clear.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
--------------------------------------------------------------------------------
/src/services/assets/icon_close.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
--------------------------------------------------------------------------------
/src/services/assets/icon_geolocation.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/services/assets/icon_search.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
--------------------------------------------------------------------------------
/src/services/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/timekit-io/booking-js/981bc56720c12e235e8051f007aeff4cde03a684/src/services/assets/logo.png
--------------------------------------------------------------------------------
/src/services/classes/base.js:
--------------------------------------------------------------------------------
1 | class BaseTemplate {
2 | constructor(template) {
3 | if (template && template.pageTarget) {
4 | if (template.rootTarget.contains(template.errorTarget)) {
5 | template.rootTarget.removeChild(template.errorTarget);
6 | }
7 | if (template.rootTarget.contains(template.pageTarget)) {
8 | template.rootTarget.removeChild(template.pageTarget);
9 | }
10 | }
11 | }
12 |
13 | htmlToElement(html) {
14 | const template = document.createElement('template');
15 | template.innerHTML = html.trim();
16 | return template.content.firstChild;
17 | }
18 |
19 | renderAndInitActions(pageTarget, isTemplate = false) {
20 | const templateObj = isTemplate ? this : this.template;
21 |
22 | templateObj.rootTarget.append(pageTarget);
23 |
24 | const defaultOpt = this.config.get('stratergy');
25 | const stratergy = this.config.getSession('stratergy');
26 |
27 | const backIcon = pageTarget.querySelector('i.back-icon');
28 | const closeIcon = pageTarget.querySelector('i.close-icon');
29 |
30 | if (defaultOpt === stratergy && this.config.noSessions()) {
31 | pageTarget.classList.add("hide");
32 | }
33 |
34 | if (closeIcon) {
35 | const aTag = closeIcon.closest('a');
36 | aTag && aTag.addEventListener('click', (e) => {
37 | e.preventDefault();
38 | pageTarget.classList.toggle("hide");
39 | });
40 | }
41 |
42 | if (backIcon) {
43 | const aTag = backIcon.closest('a');
44 | if (defaultOpt === stratergy) {
45 | backIcon.classList.remove("show");
46 | }
47 | aTag && aTag.addEventListener('click', (e) => {
48 | e.preventDefault();
49 |
50 | const defaultOpt = this.config.get('stratergy');
51 | const stratergy = this.config.getSession('stratergy');
52 |
53 | if (stratergy === 'service') {
54 | this.config.setSession('stratergy', 'location');
55 | } else if (stratergy === 'location') {
56 | this.config.setSession('stratergy', 'service');
57 | } else if(stratergy === 'calendar') {
58 | this.config
59 | .destroySessions()
60 | .setSession('stratergy', defaultOpt);
61 | }
62 |
63 | templateObj.initPage();
64 | });
65 | }
66 | }
67 | }
68 |
69 | module.exports = BaseTemplate;
--------------------------------------------------------------------------------
/src/services/classes/config.js:
--------------------------------------------------------------------------------
1 | const get = require("lodash/get");
2 | const merge = require("lodash/merge");
3 |
4 | class Config {
5 | constructor() {
6 | this.config = {};
7 | this.session = {};
8 | this.defaultConfigs = require('../configs');
9 | }
10 |
11 | getSession(key, defaultValue) {
12 | return get(this.session, key) || defaultValue;
13 | }
14 |
15 | setSession(key, data) {
16 | this.session[key] = data;
17 | }
18 |
19 | destroySessions() {
20 | this.session = {};
21 | return this;
22 | }
23 |
24 | noSessions() {
25 | return !this.getSession('service') && !this.getSession('location');
26 | }
27 |
28 | all() {
29 | return this.config;
30 | }
31 |
32 | get(key) {
33 | return get(this.config, key);
34 | }
35 |
36 | set(configs) {
37 | return (this.config = this.setDefaults(configs));
38 | }
39 |
40 | parseAndUpdate(configs) {
41 |
42 | // Extend the default config with supplied settings
43 | let newConfig = this.setDefaults(configs);
44 |
45 | // Check for required settings
46 | if (!newConfig.app_key) throw 'A required config setting ("app_key") was missing';
47 |
48 | return this.set(newConfig);
49 | }
50 |
51 | setDefaults(configs) {
52 | configs = this.prepareSessionConfigs(configs);
53 | configs.sdk = this.prepareSdkConfig(configs);
54 | return merge({}, this.defaultConfigs, configs);
55 | }
56 |
57 | prepareSessionConfigs(configs) {
58 | if (configs.stratergy) {
59 | this.setSession("stratergy", configs.stratergy);
60 | }
61 | return configs;
62 | }
63 |
64 | prepareSdkConfig(configs) {
65 | if (typeof configs.sdk === 'undefined') {
66 | configs.sdk = {};
67 | }
68 | if (configs.app_key) {
69 | configs.sdk.appKey = configs.app_key;
70 | }
71 | if (configs.api_base_url) {
72 | configs.sdk.apiBaseUrl = configs.api_base_url;
73 | }
74 | return merge({}, this.defaultConfigs.sdk, configs.sdk);
75 | }
76 | }
77 |
78 | module.exports = Config;
--------------------------------------------------------------------------------
/src/services/classes/template.js:
--------------------------------------------------------------------------------
1 | const BaseTemplate = require('./base');
2 |
3 | const get = require("lodash/get");
4 | const stringify = require('json-stringify-safe');
5 |
6 | const ServicesPage = require('../pages/services');
7 | const LocationsPage = require('../pages/locations');
8 | const CalendarWidgetPage = require('../pages/calendar');
9 |
10 | const LogoIcon = require('!file-loader!../assets/logo.png').default;
11 | const BackIcon = require('!file-loader!../assets/icon_back.svg').default;
12 | const CloseIcon = require('!file-loader!../assets/icon_close.svg').default;
13 |
14 | require('../styles/base.scss');
15 | require('@fontsource/open-sans');
16 |
17 | class Template extends BaseTemplate {
18 | constructor(config, utils, sdk) {
19 | super();
20 |
21 | // config and utils
22 | this.sdk = sdk;
23 | this.utils = utils;
24 | this.config = config;
25 |
26 | // dom nodes
27 | this.rootTarget = null;
28 | this.errorTarget = null;
29 | this.buttonTarget = null;
30 |
31 | // page target
32 | this.pageTarget = null;
33 | }
34 |
35 | destroy() {
36 | this.clearRootElem();
37 | this.rootTarget.remove();
38 | }
39 |
40 | clearRootElem() {
41 | let child = this.rootTarget.lastElementChild;
42 | while (child) {
43 | this.rootTarget.removeChild(child);
44 | child = this.rootTarget.lastElementChild;
45 | }
46 | }
47 |
48 | init(configs) {
49 | const targetElement = configs.el || this.config.get('el');
50 |
51 | this.rootTarget = document.createElement('div');
52 | this.rootTarget.classList.add("tk-appt-window");
53 | this.rootTarget.id = targetElement.replace('#', '');
54 |
55 | document.body.appendChild(this.rootTarget);
56 | this.rootTarget = document.getElementById(targetElement.replace('#', ''));
57 |
58 | if (!this.rootTarget) {
59 | throw this.triggerError(
60 | 'No target DOM element was found (' + targetElement + ')'
61 | );
62 | }
63 |
64 | this.clearRootElem();
65 | }
66 |
67 | initButton() {
68 | const defaultUI = this.config.get('defaultUI');
69 | if (defaultUI) {
70 | const targetElement = this.config.get('elBtn');
71 |
72 | this.buttonTarget = document.createElement('a');
73 | this.buttonTarget.id = targetElement.replace('#', '');
74 | this.buttonTarget.style.backgroundImage = `url(${LogoIcon})`;
75 |
76 | this.buttonTarget.addEventListener('click', (e) => {
77 | e.preventDefault();
78 | this.pageTarget && this.pageTarget.classList.toggle("hide");
79 | });
80 |
81 | this.rootTarget.append(this.buttonTarget);
82 | }
83 | return this;
84 | }
85 |
86 | initPage() {
87 | const defaultUI = this.config.get('defaultUI');
88 | const stratergy = this.config.getSession('stratergy', 'service');
89 |
90 | if (defaultUI) {
91 | if (stratergy === 'service') {
92 | this.initServices();
93 | } else if (stratergy === 'location') {
94 | this.initLocations();
95 | }
96 | }
97 | }
98 |
99 | initServices() {
100 | return new ServicesPage(this).render();
101 | }
102 |
103 | initLocations() {
104 | return new LocationsPage(this).render();
105 | }
106 |
107 | initCalendar(serviceId, locationId) {
108 | return new CalendarWidgetPage(this).render(serviceId, locationId);
109 | }
110 |
111 | triggerError(message) {
112 | // If an error already has been thrown, exit
113 | // If no target DOM element exists, only do the logging
114 | if (this.errorTarget) return message;
115 | if (!this.rootTarget) return message;
116 |
117 | this.utils.logError(message);
118 | this.utils.doCallback('errorTriggered', message);
119 |
120 | let contextProcessed = null;
121 | let messageProcessed = message;
122 |
123 | if (this.utils.isArray(message)) {
124 | messageProcessed = message[0];
125 | if (message[1]?.data) {
126 | contextProcessed = stringify(
127 | message[1].data.errors || message[1].data.error || message[1].data
128 | );
129 | } else {
130 | contextProcessed = stringify(message[1]);
131 | }
132 | }
133 |
134 | const template = require('../templates/error.html');
135 | this.errorTarget = this.htmlToElement(
136 | template({
137 | backIcon: BackIcon,
138 | closeIcon: CloseIcon,
139 | message: messageProcessed,
140 | context: contextProcessed,
141 | })
142 | );
143 |
144 | this.renderAndInitActions(this.errorTarget, true);
145 |
146 | return message;
147 | }
148 | }
149 |
150 | module.exports = Template;
--------------------------------------------------------------------------------
/src/services/classes/util.js:
--------------------------------------------------------------------------------
1 | const isEmpty = require("lodash/isEmpty");
2 |
3 | class Util {
4 | constructor(config) {
5 | this.config = config;
6 | }
7 |
8 | isFunction(object) {
9 | return !!(object && object.constructor && object.call && object.apply);
10 | }
11 |
12 | isArray(object) {
13 | return object && object.constructor === Array;
14 | }
15 |
16 | logError(message) {
17 | console.warn('TimekitBooking Error: ', message);
18 | }
19 |
20 | logDebug(message) {
21 | if (this.config.get('debug')) {
22 | console.log('TimekitBooking Debug: ', message);
23 | }
24 | }
25 |
26 | doesConfigExist(suppliedConfig) {
27 | return (suppliedConfig !== undefined && typeof suppliedConfig === 'object' && !isEmpty(suppliedConfig));
28 | }
29 |
30 | doCallback(hook, arg) {
31 | if(this.config.get('callbacks') && this.isFunction(this.config.get('callbacks.' + hook))) {
32 | this.config.get('callbacks.' + hook)(arg);
33 | }
34 | this.logDebug(['Trigger callback "' + hook + '" with arguments:', arg]);
35 | }
36 | }
37 |
38 | module.exports = Util;
--------------------------------------------------------------------------------
/src/services/configs.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | debug: false,
3 | autoload: true,
4 | defaultUI: true,
5 | elBtn: '#tk-bot-btn',
6 | stratergy: 'location',
7 | el: '#tk-appointments',
8 | sdk: {
9 | headers: {
10 | 'Timekit-Context': 'widget'
11 | }
12 | },
13 | selectorOptions: {
14 | service: {
15 | title: 'Select an Appointment Type',
16 | description: 'Which appointment type would you like?',
17 | },
18 | location: {
19 | title: 'Select a Location',
20 | description: 'Choose a location from the following that you will be visiting for your appointment.',
21 | search_bar: {
22 | enabled: true,
23 | placeholder: 'Search for a city or postal code.'
24 | },
25 | },
26 | booking: {
27 | title: 'Complete Booking Details',
28 | description: 'Please select an appointment time and fill out the booking form.',
29 | }
30 | }
31 | }
--------------------------------------------------------------------------------
/src/services/index.js:
--------------------------------------------------------------------------------
1 |
2 | 'use strict';
3 |
4 | module.exports = require('./widget');
--------------------------------------------------------------------------------
/src/services/pages/calendar.js:
--------------------------------------------------------------------------------
1 | const get = require("lodash/get");
2 |
3 | const BaseTemplate = require('../classes/base');
4 | const BackIcon = require('!file-loader!../assets/icon_back.svg').default;
5 | const CloseIcon = require('!file-loader!../assets/icon_close.svg').default;
6 |
7 | class CalendarWidgetPage extends BaseTemplate {
8 | constructor(template) {
9 | super(template);
10 | this.sdk = template.sdk;
11 | this.template = template;
12 | this.utils = template.utils;
13 | this.config = template.config;
14 | }
15 |
16 | render(serviceId, locationId) {
17 | this.config.setSession('stratergy', 'calendar');
18 | this.sdk.makeRequest({
19 | method: 'get',
20 | url: '/projects?search=locations.uuid:' + locationId + ';services.uuid:' + serviceId
21 | })
22 | .then(({ data: projects }) => {
23 |
24 | const project = get(projects, '0');
25 | const template = require('../templates/calendar.html');
26 |
27 | const service = this.config.getSession('selectedService');
28 | const location = this.config.getSession('selectedLocation');
29 |
30 | this.template.pageTarget = this.htmlToElement(template({
31 | backIcon: BackIcon,
32 | closeIcon: CloseIcon,
33 | serviceName: get(service, 'name'),
34 | locationName: get(location, 'name'),
35 | selectorOptions: this.config.get('selectorOptions.booking')
36 | }));
37 |
38 | this.renderAndInitActions(this.template.pageTarget);
39 |
40 | new TimekitBooking().init({
41 | project_id: project.id,
42 | app_key: this.config.get('sdk.appKey'),
43 | api_base_url: this.config.get('sdk.apiBaseUrl'),
44 | });
45 | })
46 | .catch((response) => {
47 | this.utils.doCallback('initCalendarFailed', response);
48 | this.template.triggerError([
49 | 'For given service and location calendar does not exists',
50 | response,
51 | ]);
52 | });
53 | }
54 | }
55 |
56 | module.exports = CalendarWidgetPage;
--------------------------------------------------------------------------------
/src/services/pages/locations.js:
--------------------------------------------------------------------------------
1 | const get = require("lodash/get");
2 | const find = require("lodash/find");
3 | const filter = require("lodash/filter");
4 |
5 | const BaseTemplate = require('../classes/base');
6 | const BackIcon = require('!file-loader!../assets/icon_back.svg').default;
7 | const CloseIcon = require('!file-loader!../assets/icon_close.svg').default;
8 | const SearchIcon = require('!file-loader!../assets/icon_search.svg').default;
9 |
10 | class LocationsPage extends BaseTemplate {
11 | constructor(template) {
12 | super(template);
13 | this.latitude = 0;
14 | this.longitude = 0;
15 | this.sdk = template.sdk;
16 | this.template = template;
17 | this.utils = template.utils;
18 | this.locationsTarget = null;
19 | this.config = template.config;
20 | }
21 |
22 | getDegreesToRadians(degrees) {
23 | return degrees * Math.PI / 180;
24 | }
25 |
26 | getDistance(project) {
27 | return this.getDistanceInKmBetweenEarthCoordinates(get(project, 'meta.t_latitude') || 0, get(project, 'meta.t_longitude') || 0);
28 | }
29 |
30 | getDistanceInKmBetweenEarthCoordinates(latitude, longitude) {
31 | const earthRadiusKm = 6371;
32 |
33 | let destLatitudeInRadians = this.getDegreesToRadians(this.latitude - latitude);
34 | let destLongitudeInRadians = this.getDegreesToRadians(this.longitude - longitude);
35 |
36 | latitude = this.getDegreesToRadians(latitude);
37 | let latitudeInRadiants = this.getDegreesToRadians(this.latitude);
38 |
39 | let a = Math.sin(destLatitudeInRadians/2) * Math.sin(destLatitudeInRadians/2) + Math.sin(destLongitudeInRadians/2) * Math.sin(destLongitudeInRadians/2) * Math.cos(latitude) * Math.cos(latitudeInRadiants);
40 | let c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
41 |
42 | return parseFloat((earthRadiusKm * c).toFixed(1));
43 | }
44 |
45 | getLocationsTemplate(locations) {
46 | const template = require('../templates/slots/locations.html');
47 | return this.htmlToElement(template({
48 | selectorOptions: this.config.get('selectorOptions.location'),
49 | locations: locations.map((projectData) => ({
50 | ...projectData,
51 | distance: this.getDistance(projectData)
52 | })).sort((prev, next) => prev.distance - next.distance)
53 | }));
54 | }
55 |
56 | initLocationClick(locations) {
57 | const locationLinks = this.template.pageTarget.querySelectorAll('.card-container');
58 | for (let i=0; i < locationLinks.length; i++) {
59 | locationLinks[i].addEventListener("click", (e) => {
60 | e.preventDefault();
61 | const wrapper = e.target.closest(".card-container");
62 | const selectedService = this.config.getSession('selectedService');
63 | if (wrapper.id) {
64 | this.config.setSession('selectedLocation', find(locations, {
65 | id: wrapper.id
66 | }));
67 | if (selectedService && selectedService.id) {
68 | this.template.initCalendar(selectedService.id, wrapper.id);
69 | } else {
70 | this.template.initServices();
71 | }
72 | }
73 | });
74 | }
75 | }
76 |
77 | renderElement(locations) {
78 | this.config.setSession('locations', locations);
79 |
80 | const template = require('../templates/locations.html');
81 | const selectedService = this.config.getSession('selectedService');
82 |
83 | this.template.pageTarget = this.htmlToElement(template({
84 | backIcon: BackIcon,
85 | locations: locations,
86 | closeIcon: CloseIcon,
87 | searchIcon: SearchIcon,
88 | service: selectedService,
89 | selectorOptions: this.config.get('selectorOptions.location'),
90 | }));
91 |
92 | this.locationsTarget = this.getLocationsTemplate(locations);
93 |
94 | const searchInput = this.template.pageTarget.querySelector('#search-bar');
95 | const locationsEle = this.template.pageTarget.querySelector('#location-list');
96 | const searchGeoLocBtn = this.template.pageTarget.querySelector('#geolocation-search');
97 |
98 | locationsEle.append(this.locationsTarget);
99 |
100 | searchInput && searchInput.addEventListener("focus", (e) => {
101 | if (this.config.get('selectorOptions.location.search_bar.enabled')) {
102 | searchGeoLocBtn && searchGeoLocBtn.classList.remove('hide');
103 | }
104 | e.preventDefault();
105 | });
106 |
107 | searchGeoLocBtn && searchGeoLocBtn.addEventListener("focusout", (e) => {
108 | e.target.classList.add('hide');
109 | e.preventDefault();
110 | });
111 |
112 | searchInput && searchInput.addEventListener("input", (e) => {
113 | const filteredLocations = filter(locations, function({ meta }) {
114 | const searchText = e.target.value.toLowerCase();
115 | return meta.t_store_city.toLowerCase().includes(searchText) ||
116 | (meta.t_store_name && meta.t_store_name.toLowerCase().includes(searchText)) ||
117 | (meta.t_store_postal_code && meta.t_store_postal_code.toLowerCase().includes(searchText));
118 | });
119 |
120 | locationsEle.removeChild(this.locationsTarget);
121 | this.locationsTarget = this.getLocationsTemplate(filteredLocations);
122 |
123 | locationsEle.append(this.locationsTarget);
124 | this.initLocationClick(filteredLocations);
125 |
126 | e.preventDefault();
127 | });
128 |
129 | searchGeoLocBtn && searchGeoLocBtn.addEventListener("click", async (e) => {
130 | e.preventDefault();
131 | e.target.classList.add('hide');
132 | return await new Promise(async (resolve) => {
133 | const options = {
134 | timeout: 5000,
135 | enableHighAccuracy: false,
136 | maximumAge: 600000 // Keep cached data for 10 mins
137 | };
138 | return await window.navigator.geolocation.getCurrentPosition((position) => {
139 | this.latitude = position.coords.latitude;
140 | this.longitude = position.coords.longitude;
141 | return resolve({});
142 | }, () => {
143 | this.latitude = 0;
144 | this.longitude = 0;
145 | return resolve({});
146 | }, options);
147 | }).then(() => {
148 |
149 | locationsEle.removeChild(this.locationsTarget);
150 | this.locationsTarget = this.getLocationsTemplate(locations);
151 |
152 | locationsEle.append(this.locationsTarget);
153 | this.initLocationClick(locations);
154 | })
155 | });
156 |
157 | this.initLocationClick(locations);
158 | this.renderAndInitActions(this.template.pageTarget);
159 | }
160 |
161 | render() {
162 | this.config.setSession('stratergy', 'location');
163 |
164 | const selectedService = this.config.getSession('selectedService');
165 | const selectedServiceLocations = get(selectedService, 'locations', []);
166 |
167 | // when service is already selected in step-1
168 | if (selectedService?.id) {
169 | if (selectedServiceLocations.length > 0) {
170 | this.renderElement(selectedServiceLocations);
171 | } else {
172 | this.template.triggerError([
173 | 'No location found for service: ' + selectedService.name,
174 | ]);
175 | }
176 | }
177 |
178 | // when service is not selected and location is step-1
179 | else {
180 | this.sdk.makeRequest({
181 | method: 'get',
182 | url: '/locations?include=services'
183 | })
184 | .then(({ data: locations }) => this.renderElement(locations))
185 | .catch((response) => {
186 | this.utils.doCallback('initLocationsFailed', response);
187 | this.template.triggerError([
188 | 'An error occurred fetching locations',
189 | response,
190 | ]);
191 | });
192 | }
193 |
194 | return this.template;
195 | }
196 | }
197 |
198 | module.exports = LocationsPage;
--------------------------------------------------------------------------------
/src/services/pages/services.js:
--------------------------------------------------------------------------------
1 | const get = require("lodash/get");
2 | const find = require("lodash/find");
3 |
4 | const BaseTemplate = require('../classes/base');
5 | const BackIcon = require('!file-loader!../assets/icon_back.svg').default;
6 | const CloseIcon = require('!file-loader!../assets/icon_close.svg').default;
7 |
8 | class ServicesPage extends BaseTemplate {
9 | constructor(template) {
10 | super(template);
11 | this.sdk = template.sdk;
12 | this.template = template;
13 | this.utils = template.utils;
14 | this.config = template.config;
15 | }
16 |
17 | renderElement(services) {
18 | this.config.setSession('services', services);
19 |
20 | const template = require('../templates/services.html');
21 | const selectedLocation = this.config.getSession('selectedLocation');
22 |
23 | this.template.pageTarget = this.htmlToElement(template({
24 | services,
25 | backIcon: BackIcon,
26 | closeIcon: CloseIcon,
27 | location: selectedLocation,
28 | selectorOptions: this.config.get('selectorOptions.service')
29 | }));
30 |
31 | const serviceLinks = this.template.pageTarget.querySelectorAll('.card-wrapper');
32 |
33 | for (let i=0; i < serviceLinks.length; i++) {
34 | serviceLinks[i].addEventListener("click", (e) => {
35 | e.preventDefault();
36 | const wrapper = e.target.closest(".card-wrapper");
37 | const selectedLocation = this.config.getSession('selectedLocation');
38 | if (wrapper.id) {
39 | this.config.setSession('selectedService', find(services, {
40 | id: wrapper.id
41 | }));
42 | if (selectedLocation && selectedLocation.id) {
43 | this.template.initCalendar(wrapper.id, selectedLocation.id);
44 | } else {
45 | this.template.initLocations();
46 | }
47 | }
48 | });
49 | }
50 |
51 | this.renderAndInitActions(this.template.pageTarget);
52 | }
53 |
54 | render() {
55 | this.config.setSession('stratergy', 'service');
56 |
57 | const selectedLocation = this.config.getSession('selectedLocation');
58 | const selectedLocationServices = get(selectedLocation, 'services', []);
59 |
60 | // when location is already selected in step-1
61 | if (selectedLocation?.id) {
62 | if (selectedLocationServices.length > 0) {
63 | this.renderElement(selectedLocationServices);
64 | } else {
65 | this.template.triggerError([
66 | 'No services found for location: ' + selectedLocation.name,
67 | ]);
68 | }
69 | }
70 |
71 | // when location is not selected and service is step-1
72 | else {
73 | this.sdk.makeRequest({
74 | method: 'get',
75 | url: '/location/services?include=locations'
76 | })
77 | .then(({ data: services }) => this.renderElement(services))
78 | .catch((response) => {
79 | this.utils.doCallback('initServiceFailed', response);
80 | this.template.triggerError([
81 | 'An error occurred fetching services',
82 | response,
83 | ]);
84 | });
85 | }
86 |
87 | return this.template;
88 | }
89 | }
90 |
91 | module.exports = ServicesPage;
--------------------------------------------------------------------------------
/src/services/templates/calendar.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/services/templates/error.html:
--------------------------------------------------------------------------------
1 |
2 |
22 |
23 |
24 |
25 |
26 |
{{& message }}
27 |
{{& context }}
28 |
29 |
30 |
31 |
32 |
2 |
38 |
39 |
40 | {{#services}}
41 |
42 |
43 |
44 |
45 |
46 |
{{ name }}
47 |
{{ description }}
48 |
49 |
50 |
51 | {{/services}}
52 |
53 |
54 |
2 | {{#locations}}
3 |
4 |
5 | {{ name }}
6 | {{#selectorOptions.search_bar.enabled}}
7 |
{{distance}} km
8 | {{/selectorOptions.search_bar.enabled}}
9 |
10 |
{{ meta.t_store_address }}, {{ meta.t_store_city }}
11 |
12 |
13 | {{/locations}}
14 |
Booking.js Hour compatibility fixture
5 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/test/fixtures/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Booking.js main fixture
5 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/test/fixtures/minified.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Booking.js main fixture
5 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/test/groupBookings.spec.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | jasmine.getFixtures().fixturesPath = 'base/test/fixtures';
4 |
5 | var mockAjax = require('./utils/mockAjax');
6 | var createWidget = require('./utils/createWidget');
7 | var interact = require('./utils/commonInteractions');
8 |
9 | describe('Group bookings', function() {
10 |
11 | beforeEach(function(){
12 | loadFixtures('main.html');
13 | jasmine.Ajax.install();
14 | mockAjax.all();
15 | });
16 |
17 | afterEach(function() {
18 | jasmine.Ajax.uninstall();
19 | });
20 |
21 | it('should be able to book a seat', function(done) {
22 |
23 | createWidget({
24 | booking: {
25 | graph: 'group_customer'
26 | }
27 | });
28 |
29 | setTimeout(function() {
30 |
31 | var request = jasmine.Ajax.requests.mostRecent();
32 | expect(request.url).toBe('https://api.timekit.io/v2/bookings/groups');
33 |
34 | interact.clickEvent();
35 | setTimeout(function() {
36 |
37 | interact.fillSubmit();
38 | expect($('.bookingjs-form').hasClass('loading')).toBe(true);
39 |
40 | setTimeout(function() {
41 |
42 | expect($('.bookingjs-form').hasClass('success')).toBe(true);
43 | expect($('.bookingjs-form-success-message')).toBeVisible();
44 |
45 | var request = jasmine.Ajax.requests.mostRecent();
46 | var requestData = JSON.parse(request.params)
47 |
48 | expect(request.url).toBe('https://api.timekit.io/v2/bookings?include=attributes,event,user');
49 | expect(requestData.graph).toBe('group_customer')
50 | expect(requestData.related.owner_booking_id).toBe('87623db3-cb5f-41e8-b85b-23b5efd04e07')
51 |
52 | done();
53 |
54 | }, 200);
55 | }, 500);
56 | }, 500);
57 |
58 | });
59 |
60 | });
61 |
--------------------------------------------------------------------------------
/test/initialization.spec.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | jasmine.getFixtures().fixturesPath = 'base/test/fixtures';
4 |
5 | var mockAjax = require('./utils/mockAjax');
6 | var baseConfig = require('./utils/defaultConfig');
7 |
8 | describe('Initialization regular', function() {
9 |
10 | beforeEach(function(){
11 | loadFixtures('main.html');
12 | jasmine.Ajax.install();
13 | mockAjax.all();
14 | });
15 |
16 | afterEach(function() {
17 | jasmine.Ajax.uninstall();
18 | });
19 |
20 | it('should be able to load the fixture page', function() {
21 | expect(window).toBeDefined();
22 | expect($('#bookingjs')).toBeInDOM();
23 | });
24 |
25 | it('should be able init and display the widget with instance pattern', function() {
26 | var widget = new TimekitBooking();
27 | widget.init(baseConfig);
28 |
29 | expect(widget).toBeDefined();
30 | expect(widget.getConfig().all()).toBeDefined();
31 | expect($('.bookingjs-calendar')).toBeInDOM();
32 | });
33 |
34 | it('should be able init and display the widget with singleton pattern', function() {
35 | new TimekitBooking().init(baseConfig);
36 | expect($('.bookingjs-calendar')).toBeInDOM();
37 | });
38 |
39 | });
40 |
41 | describe('Initialization minified', function() {
42 |
43 | beforeEach(function(){
44 | loadFixtures('minified.html');
45 | jasmine.Ajax.install();
46 | mockAjax.all();
47 | });
48 |
49 | afterEach(function() {
50 | jasmine.Ajax.uninstall();
51 | });
52 |
53 | it('should be able to load the fixture page', function() {
54 | expect(window).toBeDefined();
55 | expect($).toBeDefined();
56 | expect($('#bookingjs')).toBeInDOM();
57 | });
58 |
59 | it('should be able init and display the widget with instance pattern', function() {
60 | var widget = new TimekitBooking();
61 | widget.init(baseConfig);
62 |
63 | expect(widget).toBeDefined();
64 | expect(widget.getConfig().all()).toBeDefined();
65 | expect($('.bookingjs-calendar')).toBeInDOM();
66 | });
67 |
68 | it('should be destroy and cleanup itself', function() {
69 | var widget = new TimekitBooking();
70 | widget.init(baseConfig);
71 |
72 | expect(widget).toBeDefined();
73 | expect(widget.getConfig().all()).toBeDefined();
74 | expect($('.bookingjs-calendar')).toBeInDOM();
75 |
76 | widget.destroy();
77 | expect($('.bookingjs-calendar')).not.toBeInDOM();
78 | });
79 |
80 | });
81 |
--------------------------------------------------------------------------------
/test/mobileResponsive.spec.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | jasmine.getFixtures().fixturesPath = 'base/test/fixtures';
4 |
5 | var mockAjax = require('./utils/mockAjax');
6 | var createWidget = require('./utils/createWidget');
7 | var interact = require('./utils/commonInteractions');
8 |
9 | describe('Mobile & responsive', function() {
10 |
11 | beforeEach(function(){
12 | loadFixtures('main.html');
13 | jasmine.Ajax.install();
14 | mockAjax.all();
15 | viewport.set(360, 740);
16 | });
17 |
18 | afterEach(function() {
19 | jasmine.Ajax.uninstall();
20 | viewport.reset()
21 | });
22 |
23 | it('should be able change day in mobile mode by clicking arrows', function(done) {
24 |
25 | createWidget({
26 | ui: {
27 | display_name: 'John Doe',
28 | availability_view: 'agendaWeek'
29 | }
30 | });
31 |
32 | expect($('.fc-dayGridDay-view')).toBeInDOM()
33 | var currentDay = $('.fc-col-header-cell-cushion')[0].textContent;
34 |
35 | var displayNameRect = $('.bookingjs-displayname')[0].getBoundingClientRect();
36 | var clickableArrowRect = $('.fc-next-button')[0].getBoundingClientRect();
37 |
38 | var overlap = !(displayNameRect.right < clickableArrowRect.left ||
39 | displayNameRect.left > clickableArrowRect.right ||
40 | displayNameRect.bottom < clickableArrowRect.top ||
41 | displayNameRect.top > clickableArrowRect.bottom)
42 | expect(overlap).toBe(false);
43 |
44 | setTimeout(function() {
45 |
46 | interact.clickNextArrow();
47 | setTimeout(function() {
48 |
49 | var nextDay = $('.fc-col-header-cell-cushion')[0].textContent;
50 | expect(currentDay).not.toBe(nextDay);
51 | done();
52 |
53 | }, 100);
54 | }, 200);
55 |
56 | });
57 |
58 | });
59 |
--------------------------------------------------------------------------------
/test/multipleInstances.spec.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | jasmine.getFixtures().fixturesPath = 'base/test/fixtures';
4 |
5 | var baseConfig = require('./utils/defaultConfig');
6 | var mockAjax = require('./utils/mockAjax');
7 |
8 | describe('Multiple instances', function() {
9 |
10 | beforeEach(function(){
11 | loadFixtures('main.html');
12 | jasmine.Ajax.install();
13 | mockAjax.all();
14 | });
15 |
16 | afterEach(function() {
17 | jasmine.Ajax.uninstall();
18 | });
19 |
20 | it('should be able to create load multiple instances with isolated SDK configs', function() {
21 |
22 | var widget1 = new TimekitBooking();
23 | widget1.init({
24 | app_key: '12345'
25 | });
26 |
27 | var widget2 = new TimekitBooking();
28 | widget2.init({
29 | app_key: '67890'
30 | });
31 |
32 | var widget1SdkAppKey = widget1.getSdk().getConfig().appKey;
33 | var widget2SdkAppKey = widget2.getSdk().getConfig().appKey;
34 |
35 | expect(widget1SdkAppKey).not.toEqual(widget2SdkAppKey);
36 |
37 | var widget1ConfigAppKey = widget1.getConfig().get('app_key');
38 | var widget2ConfigAppKey = widget2.getConfig().get('app_key');
39 |
40 | expect(widget1ConfigAppKey).not.toEqual(widget2ConfigAppKey);
41 |
42 | });
43 |
44 | });
45 |
--------------------------------------------------------------------------------
/test/prefillFromUrl.spec.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | jasmine.getFixtures().fixturesPath = 'base/test/fixtures';
4 |
5 | var qs = require('querystringify');
6 | var mockAjax = require('./utils/mockAjax');
7 | var createWidget = require('./utils/createWidget');
8 | var interact = require('./utils/commonInteractions');
9 |
10 | describe('Prefill fields from URL', function() {
11 |
12 | beforeEach(function(){
13 | loadFixtures('main.html');
14 | jasmine.Ajax.install();
15 | mockAjax.all();
16 | });
17 |
18 | afterEach(function() {
19 | jasmine.Ajax.uninstall();
20 | });
21 |
22 | it('should be able to prefill fields from URL query string', function(done) {
23 |
24 | var prefill = {
25 | 'customer.name': 'Marty',
26 | 'customer.email': 'marty.mcfly@timekit.io',
27 | 'customer.phone': '12345',
28 | 'customer.custom': 'foo'
29 | }
30 |
31 | var global = {
32 | location: {
33 | search: qs.stringify(prefill)
34 | }
35 | }
36 |
37 | var config = {
38 | customer_fields: {
39 | name: {
40 | title: 'Your name'
41 | },
42 | email: {
43 | title: 'Your email'
44 | },
45 | phone: {
46 | title: 'Your phone'
47 | }
48 | }
49 | }
50 |
51 | createWidget(config, global);
52 | setTimeout(function() {
53 |
54 | interact.clickEvent();
55 | setTimeout(function() {
56 |
57 | var nameInput = $('.input-name');
58 | expect(nameInput).toBeInDOM();
59 | expect(nameInput).toBeVisible();
60 | expect(nameInput.val()).toBe(prefill['customer.name']);
61 |
62 | var emailInput = $('.input-email');
63 | expect(emailInput).toBeInDOM();
64 | expect(emailInput).toBeVisible();
65 | expect(emailInput.val()).toBe(prefill['customer.email']);
66 |
67 | var phoneInput = $('.input-phone');
68 | expect(phoneInput).toBeInDOM();
69 | expect(phoneInput).toBeVisible();
70 | expect(phoneInput.val()).toBe(prefill['customer.phone']);
71 |
72 | var customInput = $('.input-custom');
73 | expect(customInput.length).toBe(0);
74 |
75 | done();
76 |
77 | }, 500);
78 | }, 500);
79 |
80 | });
81 |
82 | });
83 |
--------------------------------------------------------------------------------
/test/teamAvailability.spec.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | jasmine.getFixtures().fixturesPath = 'base/test/fixtures';
4 |
5 | var createWidget = require('./utils/createWidget');
6 | var teamAvailabilityConfig = require('./utils/teamAvailabilityConfig');
7 | var mockAjax = require('./utils/mockAjax');
8 | var interact = require('./utils/commonInteractions');
9 |
10 | describe('Team availability', function() {
11 |
12 | beforeEach(function(){
13 | loadFixtures('main.html');
14 | jasmine.Ajax.install();
15 | mockAjax.all();
16 | });
17 |
18 | afterEach(function() {
19 | jasmine.Ajax.uninstall();
20 | });
21 |
22 | it('should be able to book a timeslot', function(done) {
23 |
24 | createWidget(teamAvailabilityConfig);
25 | setTimeout(function() {
26 |
27 | interact.clickEvent();
28 | setTimeout(function() {
29 |
30 | interact.fillSubmit();
31 | expect($('.bookingjs-form').hasClass('loading')).toBe(true);
32 |
33 | setTimeout(function() {
34 | expect($('.bookingjs-form').hasClass('success')).toBe(true);
35 | expect($('.bookingjs-form-success-message')).toBeVisible();
36 |
37 | var successMessage = $('.bookingjs-form-success-message').html();
38 | var contains = successMessage.indexOf('We have received your booking and sent a confirmation to') > -1;
39 |
40 | // TODO:
41 | expect(contains).toBe(true);
42 | done();
43 |
44 | }, 200);
45 | }, 500);
46 | }, 500);
47 |
48 | });
49 |
50 | it('should show bookable resource name', function(done) {
51 |
52 | mockAjax.findTimeTeam();
53 | createWidget(teamAvailabilityConfig);
54 |
55 | setTimeout(function() {
56 |
57 | interact.clickEvent();
58 | setTimeout(function() {
59 |
60 | var resourceHeader = $('.bookingjs-bookpage-resource').html();
61 | expect(resourceHeader).toBe(undefined);
62 |
63 | done();
64 |
65 | }, 500);
66 | }, 500);
67 |
68 | });
69 |
70 | });
71 |
--------------------------------------------------------------------------------
/test/utils/commonInteractions.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | // Set of shorthands for common interactions
4 | module.exports = {
5 |
6 | clickNextArrow: function () {
7 | document.querySelector(".fc-next-button").click();
8 | },
9 |
10 | clickEvent: function() {
11 | var calEvent = document.querySelector(".fc-timegrid-event");
12 | calEvent.click();
13 | return calEvent.querySelector(".fc-event-time").innerHTML;
14 | },
15 |
16 | clickListEvent: function() {
17 | var calEvent = document.querySelector('.fc-list-event');
18 | calEvent.click();
19 | return calEvent.querySelector('.fc-list-event-time').innerHTML;
20 | },
21 |
22 | fillSubmit: function() {
23 | const data = {
24 | name: 'Joe Test',
25 | email: 'test@timekit.io',
26 | comment: 'This is a test'
27 | };
28 |
29 | let nameInput = document.getElementById('input-name');
30 | let emailInput = document.getElementById('input-email');
31 | let commentInput = document.getElementById('input-comment');
32 |
33 | nameInput && (nameInput.value = data.name);
34 | emailInput && (emailInput.value = data.email);
35 | commentInput && (commentInput.value = data.comment);
36 |
37 | document.querySelector('.bookingjs-form-button').click();
38 |
39 | return data;
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/test/utils/createWidget.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var baseConfig = require('./defaultConfig.js');
4 |
5 | // Creates a new widget instance with supplied config, inits it and returns it
6 | module.exports = function(config, global) {
7 |
8 | var newConfig = {};
9 | $.extend(true, newConfig, baseConfig, config);
10 |
11 | var widget = new TimekitBooking();
12 | widget.init(newConfig, global);
13 |
14 | return widget;
15 | }
16 |
--------------------------------------------------------------------------------
/test/utils/defaultConfig.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | // Default config used across tests
4 | module.exports = {
5 | app_key: '12345'
6 | }
7 |
--------------------------------------------------------------------------------
/test/utils/teamAvailabilityConfig.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | // Default config used across tests
4 | module.exports = {
5 | app_key: '12345',
6 | availability: {
7 | length: '2 hours',
8 | resources: [
9 | '123',
10 | '456'
11 | ]
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/version:
--------------------------------------------------------------------------------
1 | v3.1.1
--------------------------------------------------------------------------------
/webpack.common.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const webpack = require('webpack');
3 | const packageJson = require('./package.json');
4 | const MiniCssExtractPlugin = require('mini-css-extract-plugin');
5 | // const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
6 |
7 | module.exports = {
8 | entry: {
9 | booking: {
10 | import: './src/booking/index.js',
11 | library: {
12 | type: 'umd',
13 | umdNamedDefine: true,
14 | name: 'TimekitBooking',
15 | },
16 | },
17 | appointments: {
18 | import: './src/services/index.js',
19 | library: {
20 | type: 'umd',
21 | umdNamedDefine: true,
22 | name: 'TimekitAppointments',
23 | },
24 | }
25 | },
26 | resolve: {
27 | extensions: ['.js']
28 | },
29 | output: {
30 | clean: true,
31 | publicPath: '/build/',
32 | filename: '[name].min.js',
33 | path: path.resolve(__dirname, 'public/build'),
34 | },
35 | module: {
36 | rules: [
37 | {
38 | test: /\.(sa|sc|c)ss$/,
39 | use: [
40 | MiniCssExtractPlugin.loader,
41 | "css-loader",
42 | "postcss-loader",
43 | "sass-loader",
44 | ],
45 | },
46 | { test: /\.html$/, loader: 'mustache-loader' },
47 | { test: /\.svg$/, loader: 'svg-inline-loader' },
48 | { test: /\.(png|jpg)$/, loader: 'file-loader' }
49 | ]
50 | },
51 | plugins: [
52 | // new BundleAnalyzerPlugin(),
53 | new webpack.DefinePlugin({
54 | VERSION: JSON.stringify(packageJson.version),
55 | }),
56 | new MiniCssExtractPlugin({
57 | filename: '[name].min.css'
58 | })
59 | ]
60 | };
--------------------------------------------------------------------------------
/webpack.dev.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const { merge } = require('webpack-merge');
3 | const common = require('./webpack.common.js');
4 | const HtmlWebpackPlugin = require('html-webpack-plugin');
5 |
6 | module.exports = merge(common, {
7 | mode: 'development',
8 | devtool: 'inline-source-map',
9 | devServer: {
10 | compress: true,
11 | allowedHosts: 'all',
12 | historyApiFallback: true,
13 | static: {
14 | publicPath: '/',
15 | directory: path.resolve(__dirname, 'public'),
16 | },
17 | historyApiFallback: true,
18 | },
19 | plugins: [
20 | new HtmlWebpackPlugin({
21 | filename: 'index.html',
22 | template: path.resolve(__dirname, 'public/index.html'),
23 | }),
24 | ],
25 | });
--------------------------------------------------------------------------------
/webpack.prod.js:
--------------------------------------------------------------------------------
1 | const { merge } = require('webpack-merge');
2 | const common = require('./webpack.common.js');
3 | const TerserPlugin = require("terser-webpack-plugin");
4 |
5 | module.exports = merge(common, {
6 | mode: 'production',
7 | optimization: {
8 | minimize: true,
9 | minimizer: [new TerserPlugin()]
10 | },
11 | });
--------------------------------------------------------------------------------
18 |