SupportKit Email Capture Addon

supportkit-email-capture.coffee

# SupportKit Email Capture Adddon
# Written by @pudgereyem, 2015-09-08
# 
# What it does:
# 1. Check if there is a SupportKit.user registered and if it has an email
# 2. Adds email form if it doesn't have an email attached
# 3. When user submits the form check if his/her email validates
#    and start chat it does.

class SupportKitEmailCapture

	constructor: (@context) ->
		@init()

	init: =>
		console.log('SupportKitEmailCapture init')
		@checkEmail()

	checkEmail: =>
		email = SupportKit.user.get('email');

		if email
			# console.log('SupportKit user with email exist')
		else
			# console.log('SupportKit user with email DOES NOT exist')
			@addEmailForm()

	validateEmail: (email) =>
		emailReg = /^(([^<>()\[\]\\.,;:\s@\"]+(\.[^<>()\[\]\\.,;:\s@\"]+)*)|(\"\.+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
		return emailReg.test(email);

	addEmailForm: =>
		# Create empty variables, email and phone
		email = ''
		phone = ''

		# Create markup, basically introduction text + form
		emailCapture = '
		<div data-region-emailcapture>
			<div id="supportkit-email-capture">
				<div class="emailcapture-wrapper">
					<p style="margin-bottom:5px;">Please provide your email and phone number for further communication.</p>
					<form data-ui-form id="supportkit-email-capture-form">
						<div class="input-group">
							<i class="fa fa-envelope-o before-icon"></i>
							<input id="emailcapture_email" class="input email-input" data-ui-email value="'+email+'" name="email" placeholder="Email" type="email" pattern="^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)+$">
						</div>\
						<div class="input-group">
							<i class="fa fa-phone before-icon"></i>
							<input id="emailcapture_phone" class="input" value="'+phone+'" name="phone" placeholder="Phone number (optional)" type="tel">
						</div>\
						<div class="input-group">
							<button id="start-chatting" type="submit" class="btn btn-sk-primary">Start chatting</button>
						</div>\
					</form>
				</div>
			</div>
		</div>'

		# Add form before main div
		$skMain = jQuery('[data-region-main]')
		$skMain.before(emailCapture)

		# Listen to "submit"-event
		$form = jQuery('#supportkit-email-capture-form')
		$form.submit @onFormSubmit

	onFormSubmit: (e) =>
		e.preventDefault()
		email = jQuery('#emailcapture_email').val()
		phone = jQuery('#emailcapture_phone').val()

		# Check if email provided is valid
		isValid = @validateEmail(email)

		if isValid
			SupportKit.user.set('email', email)

			# And fade out the the div
			jQuery('#supportkit-email-capture').fadeOut()
		else
			console.log('email is not valid, try again')

		# Add additional property "phone"
		if phone
			properties = {
				'phone': phone
			}
			# Update user
			SupportKit.user.set('properties', properties);

		# Save to user
		SupportKit.user.save()

supportkit-email-capture.scss

// SupportKit Email Capture Addon
// Written by @pudgereyem, 2015-09-08

/* Increase the z-index of #sk-settings */
#sk-container #sk-settings {
	z-index: 3 !important;
}

/* Add needed css for font awesome icon "phone" */
#sk-container .fa-phone:before {
	content: "\f095";
}

/* The SupportKit Email Capture Stuff
 * Same style as the SupportKit Settings Tab
*/
#sk-container #supportkit-email-capture {
	position: absolute;
	z-index: 2;
	height: 100%;
	background-color: white;
	border-top: 1px solid rgba(0,0,0,0.1);

	* {
		box-sizing: border-box;
	}

	.emailcapture-wrapper {
		padding: 20px;
	}

	.input-group {
		position: relative;
		width: 100%;

		input {
			width: 100%;
			box-sizing: border-box;
			padding-left: 30px;
		}

		i.before-icon {
			position: absolute;
			top: 16px;
			left: 11px;
			color: #bdbdbd;
		}
	}
}