MSPB-98: Expose e911 email address configuration for account caller ID (#202)

* Refactor dialog structure/style for content to scroll

* Expose e911 email addresses for account caller ID

i18n/en-US.json

@@ -1142,13 +1142,15 @@
 			"numberHelp": "This number will appear as your Caller ID when you make outbound calls. Needs to be shorter than 15 characters (including spaces).",
 			"nameLabel": "Company Caller ID name",
 			"nameHelp": "This name will appear as your Caller ID when you make outbound calls.",
-			"emergencyLabel": "Company Emergency (E911) Address",
+			"emergencyLabel": "Company Emergency (E911) Information",
 			"emergencyZipcode": "Zip Code",
 			"emergencyAddress1": "Address Line 1",
 			"emergencyAddress2": "Address Line 2",
 			"emergencyCity": "City",
 			"emergencyState": "State",
-			"emergencyHelp1": "This address will appear as your Caller ID address when you make outbound emergency call to a government agency (e.g. 911 in the US).",
+			"emergencyEmail": "Email Address(es)",
+			"emergencyEmailError": "Invalid space separated address(es)",
+			"emergencyHelp1": "This information will appear as your Caller ID information when you make outbound emergency call to a government agency (e.g. 911 in the US).",
 			"emergencyHelp2": "Note: You can set this feature on users' numbers too if they do not share the same location as above.",
 			"mandatoryE911Alert": "You must specify e911 information for your company caller ID number."
 		},

submodules/myOffice/myOffice.js

@@ -898,14 +898,21 @@ define(function(require) {
 					submodule: 'myOffice'
 				})),
 				popup = monster.ui.dialog(popupTemplate, {
+					autoScroll: false,
 					title: self.i18n.active().myOffice.callerId.title,
 					position: ['center', 20]
 				});
 
 			if (monster.util.isNumberFeatureEnabled('e911')) {
-				var e911Form = popupTemplate.find('.emergency-form > form');
+				var e911Form = popupTemplate.find('#emergency_form');
 
 				monster.ui.validate(e911Form, {
+					rules: {
+						notification_contact_emails: {
+							normalizer: _.trim,
+							regex: /^(?:([\w+-.%]+@[\w-.]+\.[A-Za-z]{2,4})(?: ?))*$/
+						}
+					},
 					messages: {
 						'postal_code': {
 							required: '*'
@@ -918,6 +925,9 @@ define(function(require) {
 						},
 						'region': {
 							required: '*'
+						},
+						notification_contact_emails: {
+							regex: self.i18n.active().myOffice.callerId.emergencyEmailError
 						}
 					}
 				});
@@ -946,6 +956,7 @@ define(function(require) {
 				emergencyAddress2Input = popupTemplate.find('.caller-id-emergency-address2'),
 				emergencyCityInput = popupTemplate.find('.caller-id-emergency-city'),
 				emergencyStateInput = popupTemplate.find('.caller-id-emergency-state'),
+				emergencyEmailInput = popupTemplate.find('.caller-id-emergency-email'),
 				editableFeatures = [ 'e911', 'cnam' ],
 				loadNumberDetails = function(number, popupTemplate) {
 					monster.waterfall([
@@ -984,12 +995,19 @@ define(function(require) {
 									emergencyAddress2Input.val(numberData.e911.extended_address);
 									emergencyCityInput.val(numberData.e911.locality);
 									emergencyStateInput.val(numberData.e911.region);
+									emergencyEmailInput.val(_
+										.chain(numberData.e911)
+										.get('notification_contact_emails', [])
+										.join(' ')
+										.value()
+									);
 								} else {
 									emergencyZipcodeInput.val('');
 									emergencyAddress1Input.val('');
 									emergencyAddress2Input.val('');
 									emergencyCityInput.val('');
 									emergencyStateInput.val('');
+									emergencyEmailInput.val('');
 								}
 							}
 
@@ -1081,8 +1099,18 @@ define(function(require) {
 							}
 
 							if (setE911) {
-								$.extend(true, numberData, {
-									e911: e911Data
+								_.assign(numberData, {
+									e911: _.assign({}, e911Data, {
+										notification_contact_emails: _
+											.chain(e911Data)
+											.get('notification_contact_emails', '')
+											.trim()
+											.toLower()
+											.split(' ')
+											.reject(_.isEmpty)
+											.uniq()
+											.value()
+									})
 								});
 							} else {
 								delete numberData.e911;
@@ -1096,7 +1124,7 @@ define(function(require) {
 					e911Form;
 
 				if (monster.util.isNumberFeatureEnabled('e911')) {
-					e911Form = popupTemplate.find('.emergency-form > form');
+					e911Form = popupTemplate.find('#emergency_form');
 				}
 
 				if (callerIdNumber) {

submodules/myOffice/myOffice.scss

@@ -1,5 +1,7 @@
 @import '../../../../css/partials/base';
 
+@import './partials/callerIdPopup';
+
 /********** Header **********/
 #myoffice_container .dashboard-header {
 	height: 62px;
@@ -444,33 +446,6 @@
 	width: 120px;
 }
 
-/********** Caller ID Popup **********/
-#my_office_caller_id_popup .emergency-form {
-	margin-top: 15px;
-}
-#my_office_caller_id_popup .emergency-form form {
-	margin: 0px;
-}
-#my_office_caller_id_popup .emergency-form label {
-	margin: 0;
-}
-#my_office_caller_id_popup .emergency-form label.monster-invalid {
-	margin: 12px 0 0 5px;
-	display: inline-block !important;
-	font-size: 30px;
-}
-#my_office_caller_id_popup .emergency-form-label {
-	display: inline-block;
-	width: 120px;
-}
-#my_office_caller_id_popup .caller-id-name {
-	margin-top: 5px;
-}
-
-#my_office_caller_id_popup .number-feature {
-	display: none;
-}
-
 #myoffice_container .warning-pulse-box {
 	-webkit-animation: "warning-pulse-box" 1s ease-in-out 0 infinite alternate;
 

submodules/myOffice/partials/_callerIdPopup.scss

@@ -0,0 +1,54 @@
+#my_office_caller_id_popup {
+	display: flex;
+	flex-direction: column;
+	max-height: inherit;
+
+	.content-wrapper {
+		flex: 1;
+		overflow-y: auto;
+
+		.number-feature {
+			display: none;
+
+			.caller-id-name {
+				margin-top: 5px;
+			}
+		}
+
+		#emergency_form {
+			margin: 15px 0 0;
+
+			form {
+				margin: 0px;
+			}
+			label {
+				display: flex;
+				align-items: center;
+				margin: 0;
+
+				.emergency-form-label {
+					display: inline-block;
+					width: 120px;
+				}
+
+				.horizontal-error-container {
+					position: relative;
+				}
+			}
+			textarea {
+				margin-left: 10px;
+			}
+			label.monster-invalid {
+				position: relative;
+				margin-left: 5px;
+				font-size: 30px;
+
+				&#notification_contact_emails-error {
+					position: absolute;
+					margin: -10px 0 0 10px;
+					font-size: 12px;
+				}
+			}
+		}
+	}
+}

submodules/myOffice/views/callerIdPopup.html

@@ -1,74 +1,72 @@
 <div id="my_office_caller_id_popup" class="monster-feature-popup-container">
-	<!-- <div class="feature-popup-title">
-		<div class="feature-fa-wrapper">
-			<i class="fa fa-user"></i>
-		</div>
-		{{ i18n.myOffice.callerId.headline }}
-	</div> -->
+	<div class="content-wrapper">
+		<div class="content">
+			<div>
+				{{ i18n.myOffice.callerId.numberLabel }}
+				<select class="caller-id-select">
+					<option{{#compare selectedMainNumber "===" "none"}} selected{{/compare}} value="">None</option>
+					{{#each mainNumbers}}
+						<option{{#compare ../selectedMainNumber "===" this.number}} selected{{/compare}} value="{{this.number}}">{{formatPhoneNumber this.number}}</option>
+					{{/each}}
+				</select>
+			</div>
 
-	<div class="content">
-		<div>
-			{{ i18n.myOffice.callerId.numberLabel }}
-			<select class="caller-id-select">
-				<option{{#compare selectedMainNumber "===" "none"}} selected{{/compare}} value="">None</option>
-				{{#each mainNumbers}}
-					<option{{#compare ../selectedMainNumber "===" this.number}} selected{{/compare}} value="{{this.number}}">{{formatPhoneNumber this.number}}</option>
-				{{/each}}
-			</select>
+			{{#monsterText}}
+				{{ i18n.myOffice.callerId.numberHelp }}
+			{{/monsterText}}
 		</div>
 
-		{{#monsterText}}
-			{{ i18n.myOffice.callerId.numberHelp }}
-		{{/monsterText}}
-	</div>
+		<div class="content number-feature" data-feature="cnam">
+			<div>
+				{{ i18n.myOffice.callerId.nameLabel }}
+				<input type="text" class="caller-id-name">
+			</div>
 
-	<div class="content number-feature" data-feature="cnam">
-		<div>
-			{{ i18n.myOffice.callerId.nameLabel }}
-			<input type="text" class="caller-id-name">
+			{{#monsterText}}
+				{{ i18n.myOffice.callerId.nameHelp }}
+			{{/monsterText}}
 		</div>
 
-		{{#monsterText}}
-			{{ i18n.myOffice.callerId.nameHelp }}
-		{{/monsterText}}
-	</div>
-
-	{{#if isE911Enabled}}
-	<div class="content number-feature" data-feature="e911">
-		<div>
+		{{#if isE911Enabled}}
+		<div class="content number-feature" data-feature="e911">
 			<div>{{ i18n.myOffice.callerId.emergencyLabel }}</div>
-			<div class="emergency-form">
-				<form>
-					<label>
-						<span class="emergency-form-label">{{ i18n.myOffice.callerId.emergencyZipcode }}</span>
-						<input required name="postal_code" type="text" class="caller-id-emergency-zipcode">
-					</label>
-					<label>
-						<span class="emergency-form-label">{{ i18n.myOffice.callerId.emergencyAddress1 }}</span>
-						<input required name="street_address" type="text" class="caller-id-emergency-address1">
-					</label>
-					<label>
-						<span class="emergency-form-label">{{ i18n.myOffice.callerId.emergencyAddress2 }}</span>
-						<input name="extended_address" type="text" class="caller-id-emergency-address2">
-					</label>
-					<label>
-						<span class="emergency-form-label">{{ i18n.myOffice.callerId.emergencyCity }}</span>
-						<input required name="locality" type="text" class="caller-id-emergency-city">
-					</label>
-					<label>
-						<span class="emergency-form-label">{{ i18n.myOffice.callerId.emergencyState }}</span>
-						<input required name="region" type="text" class="caller-id-emergency-state">
-					</label>
-				</form>
-			</div>
-		</div>
 
-		{{#monsterText}}
-			<p>{{ i18n.myOffice.callerId.emergencyHelp1 }}</p>
-			<p>{{ i18n.myOffice.callerId.emergencyHelp2 }}</p>
-		{{/monsterText}}
+			<form id="emergency_form">
+				<label>
+					<span class="emergency-form-label">{{ i18n.myOffice.callerId.emergencyZipcode }}</span>
+					<input required name="postal_code" type="text" class="caller-id-emergency-zipcode">
+				</label>
+				<label>
+					<span class="emergency-form-label">{{ i18n.myOffice.callerId.emergencyAddress1 }}</span>
+					<input required name="street_address" type="text" class="caller-id-emergency-address1">
+				</label>
+				<label>
+					<span class="emergency-form-label">{{ i18n.myOffice.callerId.emergencyAddress2 }}</span>
+					<input name="extended_address" type="text" class="caller-id-emergency-address2">
+				</label>
+				<label>
+					<span class="emergency-form-label">{{ i18n.myOffice.callerId.emergencyCity }}</span>
+					<input required name="locality" type="text" class="caller-id-emergency-city">
+				</label>
+				<label>
+					<span class="emergency-form-label">{{ i18n.myOffice.callerId.emergencyState }}</span>
+					<input required name="region" type="text" class="caller-id-emergency-state">
+				</label>
+				<label>
+					<span class="emergency-form-label">{{ i18n.myOffice.callerId.emergencyEmail }}</span>
+					<div class="horizontal-error-container">
+						<textarea name="notification_contact_emails" class="caller-id-emergency-email"></textarea>
+					</div>
+				</label>
+			</form>
+
+			{{#monsterText}}
+				<p>{{ i18n.myOffice.callerId.emergencyHelp1 }}</p>
+				<p>{{ i18n.myOffice.callerId.emergencyHelp2 }}</p>
+			{{/monsterText}}
+		</div>
+		{{/if}}
 	</div>
-	{{/if}}
 
 	<div class="actions clearfix">
 		<div class="pull-right">