mod-build 3.6.75-beta.2 → 4.0.0-alpha.2

package/src/scripts/apt-block.js

@@ -1,919 +0,0 @@
-/* global modUtils modForm heap aptBlockTCPA:true */
-/* eslint brace-style: 0 */
-
-(function($) {
-	var apiUrl = modUtils.getApiDomain() + '/v1/',
-		getParams = modUtils.getUrlParamsToObject(),
-		projectId,
-		$aptBlock, $aptBlockMatches, $aptBlockTitle, $aptBlockLoading,
-		$instantAptBlock, $instantAptBlockMatches,
-		servicesProcessingCount = 0,
-		serviceAptSetIndex = 1,
-		instantAptsTimeSlotLimit = 4,
-		instantAptsData = {
-			services: [],
-			index: 0
-		},
-		gaTrackerNames = ['main', 'instantAppts'];
-
-	/**
-	 * Request data from API
-	 * @param {String} type - request type
-	 * @param {String} url - url to request
-	 * @param {Object} data - data to send
-	 * @param {Function} successCallback - success callback
-	 * @param {Function} errorCallback - error callback
-	 */
-	function apiRequestData(type, url, data, successCallback, errorCallback) {
-		var ajaxSettings = {
-			url: url,
-			type: type,
-			data: data,
-			dataType: 'json',
-			crossDomain: true,
-			success: successCallback,
-			error: errorCallback
-		};
-
-		// Modify it for POST request
-		if ('post' === type) {
-			ajaxSettings.data = JSON.stringify(data);
-			ajaxSettings.contentType = 'application/json';
-		}
-
-		// And send
-		$.ajax(ajaxSettings);
-	}
-
-	/**
-	 * Get available services from API
-	 * @param {Function} successCallback - success callback
-	 * @param {Function} errorCallback - error callback
-	 */
-	function apiGetAvailableServices(successCallback, errorCallback) {
-		apiRequestData('get', apiUrl + 'projects/' + projectId + '/available-services', {}, successCallback, errorCallback);
-	}
-
-	/**
-	 * Get available schedule for a service
-	 * @param {String} serviceId - service id
-	 * @param {Function} successCallback - success callback
-	 * @param {Function} errorCallback - error callback
-	 */
-	function apiGetServiceAvailableSchedule(serviceId, successCallback, errorCallback) {
-		apiRequestData('get', apiUrl + 'projects/' + projectId + '/available-services/' + serviceId + '/available-schedule', {}, successCallback, errorCallback);
-	}
-
-	/**
-	 * Post appointment data to API
-	 * @param {Object} data - appointment data
-	 * @param {Function} successCallback - success callback
-	 * @param {Function} errorCallback - error callback
-	 */
-	function apiPostAppointmentData(data, successCallback, errorCallback) {
-		apiRequestData('post', apiUrl + 'appointments', data, successCallback, errorCallback);
-	}
-
-	/**
-	 * Get saved scheduled appointment data
-	 * @param {String} pId - project id
-	 * @returns {Object} data - data
-	 */
-	function getSavedScheduledAppsDataFromCookies(pId) {
-		var scheduledApptsData = modUtils.getCookie('scheduledAppts_' + pId);
-
-		if (scheduledApptsData) {
-			try {
-				return JSON.parse(scheduledApptsData);
-			}
-			catch (e) {
-				return false;
-			}
-		}
-
-		return false;
-	}
-
-	/**
-	 * Save scheduled appointment data
-	 * @param {String} pId - project id
-	 * @param {String} sId - service id
-	 * @param {Object} data - data to save
-	 */
-	function saveScheduledAppsDataInCookies(pId, sId, data) {
-		var scheduledApptsData = getSavedScheduledAppsDataFromCookies(pId);
-
-		if (!scheduledApptsData) {
-			scheduledApptsData = {};
-		}
-
-		if ('undefined' === typeof scheduledApptsData[sId]) {
-			scheduledApptsData[sId] = [];
-		}
-
-		scheduledApptsData[sId].push(data);
-		modUtils.setCookie('scheduledAppts_' + pId, JSON.stringify(scheduledApptsData), 60 * 24 * 7);
-	}
-
-	/**
-	 * Create acronym
-	 * @param {String} name - phrase to convert to acronym
-	 * @param {Integer} maxLength - max lengths
-	 * @returns {String} - acronym
-	 */
-	function createAcronym(name, maxLength) {
-		var abbr = '';
-
-		// Default length
-		if (!maxLength) {
-			maxLength = 2;
-		}
-
-		// Split by spaces or -
-		var words = String(name).split(/[\s|-]/);
-
-		// Go through each word
-		for (var i = 0; i < words.length; i ++) {
-			var firstLetter = words[i].charAt(0);
-
-			// Check if it is uppercase
-			if (/[A-Z]|[\u0080-\u024F]/.test(firstLetter) && firstLetter === firstLetter.toUpperCase()) {
-				abbr += firstLetter;
-			}
-		}
-
-		return abbr.substring(0, maxLength);
-	}
-
-	/**
-	 * Format date to "Wednesday, 11/22"
-	 * @param {String} dateTimeStrUTC - date & time string in UTC
-	 * @param {String} dateStr - date string in yyyy-mm-dd format
-	 * @param {String} timeZone - time zone
-	 * @returns {String} - formatted date
-	 */
-	function formatDate(dateTimeStrUTC, dateStr, timeZone) {
-		var dateArr = dateTimeStrUTC.split(/[\-\+ :T]/),
-			date = new Date(),
-			formatter,
-			formattedDate,
-			months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
-
-		try {
-			formatter = new Intl.DateTimeFormat('en-US', {
-				weekday: 'short',
-				month: 'numeric',
-				day: 'numeric',
-				timeZone: timeZone
-			});
-
-			date.setUTCFullYear(dateArr[0]);
-			date.setUTCMonth(dateArr[1] - 1);
-			date.setUTCDate(dateArr[2]);
-			date.setUTCHours(dateArr[3]);
-			date.setUTCMinutes(dateArr[4]);
-			date.setUTCSeconds(0);
-
-			formattedDate = formatter.format(date);
-		}
-		catch (e) {
-			dateArr = dateStr.split('-');
-
-			formattedDate = months[dateArr[1] - 1] + ' ' + (dateArr[2] * 1);
-		}
-
-		return formattedDate;
-	}
-
-	/**
-	 * Update service's date display
-	 * @param {Object} $service - jQuery DOM object of a service
-	 * @param {String} date - date string
-	 */
-	function updateServiceSelectedDate($service, date) {
-		$service.find('[data-bind="apt-match-schedule-date"]').text(date);
-	}
-
-	/**
-	 * Update service's time display
-	 * @param {Object} $service - jQuery DOM object of a service
-	 * @param {String} time - time string
-	 */
-	function updateServiceSelectedTime($service, time) {
-		$service.find('[data-bind="apt-match-schedule-time"]').text(time);
-	}
-
-	/**
-	 * Update time selector with date's times
-	 * @param {Object} $service - jQuery DOM object of a service block
-	 * @param {Object} $timeSelector - jQuery DOM object of a time selector
-	 * @param {Array} appointmentTimes - array of available times
-	 * @param {String} timeZoneAbbr - timezone abbr
-	 */
-	function updateTimeSelector($service, $timeSelector, appointmentTimes, timeZoneAbbr) {
-		// Empty time selector
-		$timeSelector
-			.empty()
-			.prop('title', false);
-
-		// Check if times are not empty
-		if (appointmentTimes) {
-			$timeSelector.parents('[data-bind="apt-match-schedule-control"]').removeClass('apt-match__schedule-control--date-only');
-			$timeSelector.prop('disabled', false);
-
-			$.each(appointmentTimes, function() {
-				var appointmentTime = this,
-					$option;
-
-				$option = $('<option value="' + appointmentTime.startDateTimeUTC + '">' + appointmentTime.startTime + ' ' + timeZoneAbbr + '</option>');
-
-				$timeSelector.append($option);
-			});
-		}
-		else {
-			$timeSelector.parents('[data-bind="apt-match-schedule-control"]').addClass('apt-match__schedule-control--date-only');
-			$timeSelector
-				.append($('<option>Time</option>'))
-				.prop('disabled', true)
-				.prop('title', 'Please select date first');
-		}
-
-		$timeSelector.on('change', function() {
-			updateServiceSelectedTime($service, $(this).find('option:selected').text().trim());
-		});
-		$timeSelector.trigger('change');
-	}
-
-	/**
-	 * Detect trade from URL
-	 * @returns {String} trade
-	 */
-	function detectTrade() {
-		var url = window.location.href.toLowerCase(),
-			trade;
-
-		if (url.indexOf('window') > -1) {
-			trade = 'windows';
-		}
-		else if (url.indexOf('heating') > -1) {
-			trade = 'hvac';
-		}
-		else if (url.indexOf('solar') > -1) {
-			trade = 'solar';
-		}
-		else if (url.indexOf('roof') > -1) {
-			trade = 'roof';
-		}
-		else {
-			trade = 'other';
-		}
-
-		return trade;
-	}
-
-	/**
-	 * Track event in heap
-	 * @param {String} eventName - event name
-	 * @param {Object} props - props
-	 */
-	function trackEventInHeap(eventName, props) {
-		if (!props) {
-			props = {};
-		}
-
-		props = $.extend({}, props, {
-			trade: detectTrade()
-		});
-
-		if ('undefined' !== typeof heap) {
-			heap.track(eventName, props);
-		}
-	}
-
-	/**
-	 * Track apt view
-	 * @param {String} type - appt type
-	 */
-	function trackAptView(type) {
-		var eventNamePrefix = 'instant' === type ? 'Instant Apt' : 'Apt';
-
-		// Track in GA
-		for (var i = 0; i < gaTrackerNames.length; i ++) {
-			modUtils.gaSend({
-				hitType: 'event',
-				eventCategory: eventNamePrefix,
-				eventAction: eventNamePrefix + ' View',
-				eventLabel: getParams.projectId
-			}, gaTrackerNames[i]);
-		}
-
-		// Track in Heap
-		trackEventInHeap(eventNamePrefix + ' View');
-	}
-
-	/**
-	 * Track apt set
-	 * @param {String} type - appt type
-	 * @param {Object} opts - options
-	 */
-	function trackAptSet(type, opts) {
-		var eventNamePrefix = 'instant' === type ? 'Instant Apt' : 'Apt',
-			eventName,
-			$services;
-
-		if ('instant' === type) {
-			eventName = eventNamePrefix + ' set #' + (instantAptsData.index + 1) + '/' + instantAptsTimeSlotLimit;
-		}
-		else {
-			$services = $aptBlockMatches.find('[data-bind="apt-match"]'),
-			eventName = eventNamePrefix + ' set #' + serviceAptSetIndex + ' ' + ($services.index(opts.$service) + 1) + '/' + $services.length;
-			serviceAptSetIndex ++;
-		}
-
-		// Track in GA
-		for (var i = 0; i < gaTrackerNames.length; i ++) {
-			modUtils.gaSend({
-				hitType: 'event',
-				eventCategory: eventNamePrefix,
-				eventAction: eventName,
-				eventLabel: getParams.projectId
-			}, gaTrackerNames[i]);
-		}
-
-		// Track in Heap
-		trackEventInHeap(eventName);
-	}
-
-	/**
-	 * Switch service block state
-	 * @param {Object} $service - jQuery DOM object of a service
-	 * @param {String} state - state id
-	 */
-	function switchServiceBlockState($service, state) {
-		$service.find('[data-bind="apt-match-step-schedule"]').hide();
-		$service.find('[data-bind="apt-match-step-confirm"]').hide();
-		$service.find('[data-bind="apt-match-step-confirmed"]').hide();
-		$service.find('[data-bind="apt-match-step-' + state + '"]').show();
-	}
-
-	/**
-	 * Switch instant apt block state
-	 * @param {Object} $intantAptForm - jQuery DOM object of a instant apt form
-	 * @param {String} state - state id
-	 */
-	function switchInstantAptBlockState($intantAptForm, state) {
-		$intantAptForm.removeClass('apt-instant-match__form--loading apt-instant-match__form--scheduled');
-
-		if ('' !== state) {
-			$intantAptForm.addClass('apt-instant-match__form--' + state);
-		}
-	}
-
-	/**
-	 * Switch match block to/from loading state
-	 * @param {Object} $service - jQuery DOM object of a service
-	 * @param {Bool} loading - true form loading state, false for normal
-	 */
-	function switchMatchLoadingState($service, loading) {
-		var loadingCls = 'apt-match--loading';
-
-		if (loading) {
-			$service.addClass(loadingCls);
-		}
-		else {
-			$service.removeClass(loadingCls);
-		}
-	}
-
-	/**
-	 * Check if loading state is still needed
-	 */
-	function checkLoadingState() {
-		if (!servicesProcessingCount) {
-			var servicesProcessedCount = $aptBlock.find('[data-bind="apt-match"]').length;
-
-			$aptBlockTitle.text('You’ve got ' + servicesProcessedCount + ' instant match' + (servicesProcessedCount === 1 ? '' : 'es') + ':');
-			$aptBlockLoading.remove();
-
-			// Remove the block if no matching
-			if (!servicesProcessedCount) {
-				$aptBlock.remove();
-			}
-		}
-	}
-
-	/**
-	 * Init service block
-	 * @param {Object} service - service data object
-	 */
-	function initServiceBlock(service) {
-		var template, $service;
-
-		template = [
-			/* eslint-disable indent */
-			'<div data-bind="apt-match" class="apt-match" id="service-' + service.serviceId + '">',
-				'<div class="apt-match__logo' + (!service.contractorLogoUrl ? ' apt-match__logo--placeholder' : '') + '"' + (service.contractorLogoUrl ? ' style="background-image: url(' + service.contractorLogoUrl + ')"' : '') + '>',
-					createAcronym(service.serviceName),
-				'</div>',
-				'<div class="apt-match__content">',
-					'<div class="apt-match__label" data-bind="apt-match-label">',
-						'Match ' + ($aptBlock.find('[data-bind="apt-match"]').length + 1),
-					'</div>',
-					'<div class="apt-match__company">',
-						service.serviceName,
-					'</div>',
-					'<form class="apt-match__form">',
-						'<div data-bind="apt-match-step-schedule">',
-							'<div class="apt-match__form-title">',
-								'Schedule an Appointment:',
-							'</div>',
-							'<div class="parent-error">',
-								'<div data-bind="apt-match-schedule-control" class="apt-match__schedule-control apt-match__schedule-control--date-only">',
-									'<span class="apt-match__schedule-control-controls">',
-										'<div class="form-control-select">',
-											'<select name="date" data-required="nonempty">',
-												'<option value="">- Date -</option>',
-											'</select>',
-										'</div>',
-										'<div class="form-control-select">',
-											'<select name="time" data-required="nonempty" disabled="disabled">',
-												'<option value="">- Time -</option>',
-											'</select>',
-										'</div>',
-									'</span>',
-									'<span class="apt-match__schedule-control-btn">',
-										'<button type="submit" class="btn btn-primary">',
-											'Schedule',
-										'</button>',
-									'</span>',
-								'</div>',
-								'<div class="apt-match__schedule-error" data-bind="apt-match-schedule-error"></div>',
-							'</div>',
-						'</div>',
-						'<div data-bind="apt-match-step-confirm" style="display: none">',
-							'<div class="apt-match__form-title">',
-								'Appointment Confirmation:',
-							'</div>',
-							'<div class="apt-match__schedule-info">',
-								'<div class="apt-match__schedule-info-row">',
-									'<div class="apt-match__schedule-info-col-left">',
-										'<div class="apt-match__schedule-info-date" data-bind="apt-match-schedule-date"> </div>',
-										'<div class="apt-match__schedule-info-time" data-bind="apt-match-schedule-time"> </div>',
-									'</div>',
-									'<div class="apt-match__schedule-info-col-right">',
-										'<button type="button" class="btn btn-link" data-bind="apt-match-schedule-edit-btn">',
-											'Edit',
-										'</button>',
-										'<button type="button" class="btn btn-primary" data-bind="apt-match-schedule-confirm-btn">',
-											'<span>',
-												'Confirm',
-											'</span>',
-											'<span class="spinner"></span>',
-										'</button>',
-									'</div>',
-								'</div>',
-								'<div class="apt-match__tcpa">',
-									aptBlockTCPA,
-								'</div>',
-							'</div>',
-						'</div>',
-						'<div data-bind="apt-match-step-confirmed" style="display: none">',
-							'<div class="apt-match__form-title">',
-								'Appointment Confirmation:',
-							'</div>',
-							'<div class="apt-match__schedule-info">',
-								'<div class="apt-match__schedule-info-row">',
-									'<div class="apt-match__schedule-info-col-left">',
-										'<div class="apt-match__schedule-info-date" data-bind="apt-match-schedule-date"> </div>',
-										'<div class="apt-match__schedule-info-time" data-bind="apt-match-schedule-time"> </div>',
-									'</div>',
-									'<div class="apt-match__schedule-info-col-right">',
-										'<div class="apt-match__success-msg">',
-											'<div class="apt-match__success-msg-title">',
-												'Success',
-											'</div>',
-											'<div class="apt-match__success-msg-text">',
-												'You should be contacted shortly to confirm your&nbsp;reservation.',
-											'</div>',
-										'</div>',
-									'</div>',
-								'</div>',
-							'</div>',
-						'</div>',
-					'</form>',
-				'</div>',
-			'</div>'
-			/* eslint-enable indent */
-		].join('');
-
-		// Convert template to jQuery object
-		$service = $(template);
-
-		// Init schedule form submit
-		$service.find('form').on('submit', function(e) {
-			e.preventDefault();
-
-			if (modForm.isFormValid($(this))) {
-				switchServiceBlockState($service, 'confirm');
-			}
-		});
-
-		// Edit button
-		$service.find('[data-bind="apt-match-schedule-edit-btn"]').on('click', function(e) {
-			e.preventDefault();
-
-			switchServiceBlockState($service, 'schedule');
-		});
-
-		// Confirm button
-		$service.find('[data-bind="apt-match-schedule-confirm-btn"]').on('click', function(e) {
-			e.preventDefault();
-
-			var $timeSelector = $service.find('[name="time"]'),
-				$dateSelector = $service.find('[name="date"]'),
-				appointmentData = {
-					projectId: projectId,
-					serviceId: service.serviceId,
-					startDateTimeUTC: $timeSelector.val()
-				};
-
-			if ($timeSelector.data('serviceCustomData')) {
-				appointmentData.serviceCustomData = $timeSelector.data('serviceCustomData');
-			}
-
-			switchMatchLoadingState($service, true);
-			apiPostAppointmentData(appointmentData, function() {
-				switchMatchLoadingState($service, false);
-				switchServiceBlockState($service, 'confirmed');
-
-				saveScheduledAppsDataInCookies(projectId, service.serviceId, {
-					service: service,
-					date: $dateSelector.val(),
-					time: $timeSelector.find('option:selected').eq(0).text()
-				});
-
-				trackAptSet('direct', {
-					$service: $service
-				});
-			}, function(jqXHR) {
-				switchMatchLoadingState($service, false);
-
-				$service.find('[data-bind="apt-match-schedule-error"]').text(jqXHR.responseJSON.error.message);
-				$service.find('[data-bind="apt-match-schedule-control"]').parent().addClass('has-error');
-				switchServiceBlockState($service, 'schedule');
-			});
-		});
-
-		// Check it was scheduled
-		if (service.scheduledAppt) {
-			$service.find('[data-bind="apt-match-schedule-date"]').text(service.scheduledAppt.date);
-			$service.find('[data-bind="apt-match-schedule-time"]').text(service.scheduledAppt.time);
-			switchServiceBlockState($service, 'confirmed');
-		}
-
-		// Add to the matches block
-		$aptBlockMatches.append($service);
-	}
-
-	/**
-	 * Init instant apt block
-	 */
-	function initInstantAptBlock() {
-		var template = [
-			/* eslint-disable indent */
-			'<div data-bind="apt-instant-match" class="apt-instant-match">',
-				'<div data-bind="apt-instant-match-placeholder" class="apt-instant-match__placeholder"> </div>',
-				'<div class="apt-instant-match__placeholder apt-instant-match__placeholder--loading">',
-					'<span class="apt-block__spinner"></span>',
-					'Loading...',
-				'</div>',
-			'</div>'
-			/* eslint-enable indent */
-		].join('');
-
-		for (var i = 0; i < instantAptsTimeSlotLimit; i ++) {
-			var $template = $(template);
-
-			$template.find('[data-bind="apt-instant-match-placeholder"]').text('Appointment ' + (i + 1));
-			$instantAptBlockMatches.append($template);
-		}
-	}
-
-	/**
-	 * Display service available dates & times
-	 * @param {String} serviceId - service id
-	 * @param {Object} schedule - time data
-	 */
-	function displayServiceAvailableDateTime(serviceId, schedule) {
-		// Stop if no dates
-		if (!schedule.data.appointmentDates || !schedule.data.appointmentDates.length) {
-			return;
-		}
-
-		var $service = $('#service-' + serviceId),
-			$dateSelector = $service.find('[name="date"]'),
-			$timeSelector = $service.find('[name="time"]');
-
-		// Store data
-		$dateSelector.data('timeZoneAbbr', schedule.timeZoneAbbr);
-		if (schedule.data.serviceCustomData) {
-			$timeSelector.data('serviceCustomData', schedule.data.serviceCustomData);
-		}
-
-		// Display date selector
-		$.each(schedule.data.appointmentDates, function() {
-			var appointmentDate = this,
-				$option;
-
-			// Display date only if it has times
-			if (appointmentDate.appointmentTimes && appointmentDate.appointmentTimes.length) {
-				var formattedDate = formatDate(appointmentDate.appointmentTimes[0].startDateTimeUTC, appointmentDate.date, schedule.timeZone);
-
-				$option = $('<option value="' + formattedDate + '">' + formattedDate + '</option>');
-				$option.data('appointmentTimes', appointmentDate.appointmentTimes);
-				$dateSelector.append($option);
-			}
-		});
-
-		$dateSelector.on('change', function() {
-			updateServiceSelectedDate($service, $(this).val());
-			updateTimeSelector($service, $timeSelector, $(this).find('option:selected').data('appointmentTimes'), $(this).data('timeZoneAbbr'));
-		});
-		$dateSelector.trigger('change');
-	}
-
-	/**
-	 * Display available services
-	 * @param {Array} services - array of services
-	 */
-	function processAvailableServices(services) {
-		$.each(services, function() {
-			var service = this;
-
-			// Request available schedule for this contractor
-			apiGetServiceAvailableSchedule(service.serviceId, function(response) {
-				servicesProcessingCount --;
-
-				if ((response.data && response.data.appointmentDates) || service.scheduledAppt) {
-					initServiceBlock(service);
-
-					if (!service.scheduledAppt) {
-						displayServiceAvailableDateTime(service.serviceId, response);
-					}
-				}
-
-				checkLoadingState();
-			}, function() {
-				servicesProcessingCount --;
-				checkLoadingState();
-			});
-
-			servicesProcessingCount ++;
-		});
-	}
-
-	/**
-	 * Init instant apt time slot
-	 * @param {Object} service - service data object
-	 * @param {Object} schedule - time data
-	 * @param {Integer} index - time slot index
-	 */
-	function initInstantAptTimeSlot(service, schedule, index) {
-		var aptTimeSlotBlockId = service.serviceId + '-' + index, $form, template;
-
-		template = [
-			/* eslint-disable indent */
-			'<form data-bind="apt-instant-match-form" class="apt-instant-match__form" id="service-' + aptTimeSlotBlockId + '">',
-				'<div class="apt-instant-match__schedule">',
-					'<div class="parent-error">',
-						'<div data-bind="apt-match-schedule-control" class="apt-match__schedule-control apt-match__schedule-control--date-only">',
-							'<span class="apt-match__schedule-control-controls">',
-								'<div class="form-control-select">',
-									'<select name="date" data-required="nonempty">',
-										'<option value="">- Date -</option>',
-									'</select>',
-								'</div>',
-								'<div class="form-control-select">',
-									'<select name="time" data-required="nonempty" disabled="disabled">',
-										'<option value="">- Time -</option>',
-									'</select>',
-								'</div>',
-							'</span>',
-							'<span class="apt-match__schedule-control-btn">',
-								'<button type="submit" class="btn btn-primary">',
-									'Schedule',
-								'</button>',
-							'</span>',
-						'</div>',
-						'<div class="apt-match__schedule-error" data-bind="apt-match-schedule-error"></div>',
-					'</div>',
-				'</div>',
-				'<div class="apt-instant-match__scheduled">',
-					'<div class="apt-instant-match__scheduled-content">',
-						'<span class="apt-block__spinner"></span>',
-						'<span data-bind="apt-instant-match-scheduled-time" class="apt-instant-match__scheduled-text">',
-							'<span data-bind="apt-match-schedule-date"></span>',
-							' | ',
-							'<span data-bind="apt-match-schedule-time"></span>',
-						'</span>',
-					'</div>',
-				'</div>',
-			'</form>'
-			/* eslint-enable indent */
-		].join('');
-
-		$form = $(template);
-
-		$form.on('submit', function(e) {
-			e.preventDefault();
-
-			if (modForm.isFormValid($form)) {
-				var $timeSelector = $form.find('[name="time"]'),
-					$dateSelector = $form.find('[name="date"]'),
-					appointmentData = {
-						projectId: projectId,
-						serviceId: service.serviceId,
-						startDateTimeUTC: $timeSelector.val()
-					};
-
-				if ($timeSelector.data('serviceCustomData')) {
-					appointmentData.serviceCustomData = $timeSelector.data('serviceCustomData');
-				}
-
-				switchInstantAptBlockState($form, 'loading');
-				apiPostAppointmentData(appointmentData, function() {
-					switchInstantAptBlockState($form, 'scheduled');
-
-					trackAptSet('instant');
-
-					saveScheduledAppsDataInCookies(projectId, service.serviceId, {
-						date: $dateSelector.val(),
-						time: $timeSelector.find('option:selected').eq(0).text()
-					});
-
-					instantAptsData.index ++;
-
-					if (instantAptsData.index < instantAptsTimeSlotLimit) {
-						/* eslint-disable no-use-before-define */
-						processInstantApts();
-						/* eslint-enable no-use-before-define */
-					}
-				}, function(jqXHR) {
-					if ('undefined' !== typeof jqXHR.responseJSON.error && 'undefined' !== typeof jqXHR.responseJSON.error.message) {
-						$form.find('[data-bind="apt-match-schedule-error"]').text(jqXHR.responseJSON.error.message);
-					}
-					$form.find('[data-bind="apt-match-schedule-control"]').parent().addClass('has-error');
-					switchInstantAptBlockState($form, '');
-				});
-			}
-		});
-
-		// Add form to instant apt block slots
-		$instantAptBlockMatches.find('[data-bind="apt-instant-match"]').eq(index)
-			.empty()
-			.append($form);
-
-		// Display available dates & times
-		displayServiceAvailableDateTime(aptTimeSlotBlockId, schedule);
-
-		// Check if there's any info about scheduled appts in cookies
-		var scheduledApptsData = getSavedScheduledAppsDataFromCookies(projectId);
-
-		if (scheduledApptsData && 'undefined' !== typeof scheduledApptsData[service.serviceId] && 'undefined' !== typeof scheduledApptsData[service.serviceId][index]) {
-			var scheduledAppt = scheduledApptsData[service.serviceId][index];
-
-			// Switch this time slot to "scheduled" UI
-			$form.find('[data-bind="apt-match-schedule-date"]').text(scheduledAppt.date);
-			$form.find('[data-bind="apt-match-schedule-time"]').text(scheduledAppt.time);
-			switchInstantAptBlockState($form, 'scheduled');
-
-			instantAptsData.index ++;
-
-			if (instantAptsData.index < instantAptsTimeSlotLimit) {
-				/* eslint-disable no-use-before-define */
-				processInstantApts();
-				/* eslint-enable no-use-before-define */
-			}
-		}
-	}
-
-	/**
-	 * Process instant apts
-	 */
-	function processInstantApts() {
-		if (!instantAptsData.services || !instantAptsData.services.length) {
-			return;
-		}
-
-		var service = instantAptsData.services[0];
-
-		// Request available schedule for instant apt
-		$instantAptBlockMatches.find('[data-bind="apt-instant-match"]').eq(instantAptsData.index).addClass('apt-instant-match--loading');
-		apiGetServiceAvailableSchedule(service.serviceId, function(response) {
-			$instantAptBlockMatches.find('[data-bind="apt-instant-match"]').eq(instantAptsData.index).removeClass('apt-instant-match--loading');
-
-			if (response.data && response.data.appointmentDates) {
-				initInstantAptTimeSlot(service, response, instantAptsData.index);
-			}
-			else {
-				if (0 === instantAptsData.index) {
-					$instantAptBlock.hide();
-				}
-			}
-		}, function() {
-			if (0 === instantAptsData.index) {
-				$instantAptBlock.hide();
-			}
-		});
-	}
-
-	/**
-	 * Init appointment control
-	 */
-	function init() {
-		$aptBlock = $('#apt-block');
-		$aptBlockMatches = $('#apt-block-matches');
-		$aptBlockTitle = $('#apt-block-title');
-		$aptBlockLoading = $('#apt-block-loading');
-		$instantAptBlock = $('#instant-apt-block');
-		$instantAptBlockMatches = $('#apt-block-instant-matches');
-
-		if (!$aptBlock.length || !getParams.projectId) {
-			if ($aptBlock.length) {
-				$aptBlock.remove();
-			}
-
-			return;
-		}
-
-		projectId = getParams.projectId;
-
-		// Empty matches and load them from API
-		$aptBlockMatches.empty();
-		apiGetAvailableServices(function(response) {
-			if (response.data && response.data.services) {
-				// Filter apt services by type
-				var normalApts = [],
-					instantApts = [];
-
-				$.each(response.data.services, function() {
-					var service = this;
-
-					if ('appointment' === service.serviceType) {
-						normalApts.push(service);
-					}
-
-					if ('instant appointment' === service.serviceType) {
-						instantApts.push(service);
-					}
-				});
-
-				// Check if there are any scheduled normal appts in cookies
-				var scheduledApptsInCookies = getSavedScheduledAppsDataFromCookies(projectId);
-
-				if (scheduledApptsInCookies) {
-					$.each(scheduledApptsInCookies, function(sId, sData) {
-						if ('undefined' !== typeof sData[0] && 'undefined' !== typeof sData[0].service) {
-							sData[0].service.scheduledAppt = {
-								date: sData[0].date,
-								time: sData[0].time
-							};
-							normalApts.push(sData[0].service);
-						}
-					});
-				}
-
-				if (instantApts.length) {
-					instantAptsData.services = instantApts;
-					instantAptsData.index = 0;
-
-					$instantAptBlock.show();
-					initInstantAptBlock();
-					processInstantApts();
-
-					trackAptView('instant');
-				}
-				else if (normalApts.length) {
-					$aptBlock.show();
-					processAvailableServices(normalApts);
-
-					trackAptView('direct');
-				}
-			}
-			else {
-				$aptBlock.hide();
-			}
-		}, function() {});
-
-		// Reset error class on date & time change
-		$('body').on('change', 'select', function() {
-			modForm.unmarkFieldAsInvalid($(this));
-			$(this).parents('[data-bind="apt-match"]').find('[data-bind="apt-match-schedule-error"]').text('');
-		});
-	}
-
-	$(document).ready(function() {
-		init();
-	});
-})(jQuery);
-