UI-2629: allow user to switch emergency caller id number from smartpbx

i18n/en-US.json

@@ -936,6 +936,16 @@
 			"labels": {
 				"inbound": "Inbound Notification Email"
 			}
+		},
+
+		"__comment": "UI-2629: add options to customize e911",
+		"__version": "4.0",
+		"updateE911Dialog": {
+			"title": "Account Emergency Caller-ID",
+			"headerNewE911": "You've just turned E911 on one of your main number, please select which number you would like to use for your Account Emergency Caller-ID.",
+			"headerNoE911": "You've disabled E911 on the number that was used for your Emergency Caller-ID, please select a new number to use as this Account Emergency Caller-ID.",
+			"success": "You successfully updated the E911 on the account to be {{ number }}.",
+			"current": "Current one"
 		}
 	},
 

submodules/strategy/strategy.css

@@ -688,4 +688,40 @@
 	width: 170px;
 	padding-top: 4px;
 	padding-bottom: 4px;
+}
+
+/**** CSS For Changing the E911 *****/
+.e911-change-wrapper {
+	padding: 15px;
+	width: 400px;
+}
+
+.e911-change-wrapper .cancel-link {
+	margin-right: 5px;
+}
+
+.e911-change-wrapper .list-choices {
+	margin-bottom: 20px;
+	margin-top: 20px;
+}
+
+.e911-change-wrapper .list-choices .choice {
+	background: #EEE;
+	padding: 20px;
+	border: 1px solid #CCC;
+	margin-bottom: 5px;
+}
+
+.e911-change-wrapper .list-choices .choice:hover {
+	background: #FFF;
+	cursor: pointer;
+}
+
+.e911-change-wrapper .list-choices .choice.active {
+	background: #FFF;
+	border: 1px solid #22a5ff;
+}
+
+.e911-change-wrapper .actions {
+	margin-top: 10px;
 }

submodules/strategy/strategy.js

@@ -328,6 +328,39 @@ define(function(require){
 			});
 		},
 
+		strategyShowE911Choices: function(oldNumber, newNumbers) {
+			var self = this,
+				template = $(monster.template(self, 'strategy-changeE911Popup', { oldNumber: oldNumber, newNumbers: newNumbers })),
+				$options = template.find('.choice');
+
+			$options.on('click', function() {
+				$options.removeClass('active');
+
+				$(this).addClass('active');
+			});
+
+			template.find('.save').on('click', function() {
+				var number = template.find('.active').data('number');
+
+				if (number === oldNumber) {
+					popup.dialog('close');
+				} else {
+					self.strategyChangeEmergencyCallerId(number, function() {
+						toastr.success(monster.template(self, '!'+ self.i18n.active().strategy.updateE911Dialog.success, { number: monster.util.formatPhoneNumber(number) }));
+						popup.dialog('close');
+					});
+				}
+			});
+
+			template.find('.cancel-link').on('click', function() {
+				popup.dialog('close');
+			});
+
+			var popup = monster.ui.dialog(template, {
+				title: self.i18n.active().strategy.updateE911Dialog.title
+			});
+		},
+
 		strategyBindEvents: function(template, strategyData) {
 			var self = this,
 				containers = template.find('.element-container'),
@@ -376,6 +409,42 @@ define(function(require){
 			self.strategyCallsBindEvents(strategyCallsContainer, strategyData);
 		},
 
+		strategyCheckIfUpdateEmergencyCallerID: function(templateNumbers, features, number) {
+			var self = this;
+
+			// Update data we have about features for main numbers
+			_.each(templateNumbers, function(dataLoop, index) {
+				if(dataLoop.number.id === number) {
+					dataLoop.number.features = features;
+				}
+			});
+
+			var e911Numbers = _.map(_.filter(templateNumbers, function(number) {
+				return (number.number.features || []).indexOf('e911') >= 0;
+			}), function(number) {
+				return number.number.id;
+			});
+			
+			var currAcc = monster.apps.auth.currentAccount,
+				hasEmergencyCallerId = currAcc.hasOwnProperty('caller_id') && currAcc.caller_id.hasOwnProperty('emergency') && currAcc.caller_id.emergency.hasOwnProperty('number') && currAcc.caller_id.emergency.number !== '',
+				hasE911Feature = (features || []).indexOf('e911') >= 0;
+
+			if (hasE911Feature) {
+				if (hasEmergencyCallerId) {
+					if (currAcc.caller_id.emergency.number !== number) {
+						self.strategyShowE911Choices(currAcc.caller_id.emergency.number, [ number ]);
+					}
+				} else {
+					self.strategyChangeEmergencyCallerId(number);
+				}
+			} else {
+				// If they removed e911 from their current emergency caller id number, then we let them select the new one from the list of numbers with e911 configured
+				if(hasEmergencyCallerId && currAcc.caller_id.emergency.number === number) {
+					self.strategyShowE911Choices(undefined, e911Numbers);
+				}
+			}
+		},
+
 		strategyRefreshTemplate: function(container, strategyData, callback) {
 			var self = this,
 				templateName = container.data('template');
@@ -414,6 +483,8 @@ define(function(require){
 										numberData: data.number,
 										afterUpdate: function(features) {
 											monster.ui.paintNumberFeaturesIcon(features, numberDiv.find('.features'));
+
+											self.strategyCheckIfUpdateEmergencyCallerID(templateData.numbers, features, data.number.id);
 										}
 									};
 
@@ -698,18 +769,34 @@ define(function(require){
 				}
 		},
 
+		strategyChangeEmergencyCallerId: function(number, callback) {
+			var self = this;
+
+			self.strategyGetAccount({
+				success: function(data) {
+					data.caller_id = data.caller_id || {};
+					data.caller_id.emergency = data.caller_id.emergency || {};
+					data.caller_id.emergency.number = number;
+
+					self.strategyUpdateAccount(data, function() {
+						callback && callback(number);
+					});
+				}
+			});
+		},
+
 		strategyNumbersBindEvents: function(container, strategyData) {
 			var self = this,
 				addNumbersToMainCallflow = function(numbers) {
 					if(numbers.length) {
 						var mainCallflow = strategyData.callflows["MainCallflow"];
-						mainCallflow.numbers = mainCallflow.numbers.concat(numbers);
-						self.strategyUpdateCallflow(mainCallflow, function(updatedCallflow) {
-							var parentContainer = container.parents('.element-container');
-							strategyData.callflows["MainCallflow"] = updatedCallflow;
-							refreshNumbersHeader(parentContainer);
-							self.strategyRefreshTemplate(parentContainer, strategyData);
-						});
+							mainCallflow.numbers = mainCallflow.numbers.concat(numbers);
+							self.strategyUpdateCallflow(mainCallflow, function(updatedCallflow) {
+								var parentContainer = container.parents('.element-container');
+								strategyData.callflows["MainCallflow"] = updatedCallflow;
+								refreshNumbersHeader(parentContainer);
+								self.strategyRefreshTemplate(parentContainer, strategyData);
+							});
 					}
 				},
 				refreshNumbersHeader = function(parentContainer) {
@@ -3483,6 +3570,21 @@ define(function(require){
 			});
 		},
 
+		strategyUpdateAccount: function(data, callback) {
+			var self = this;
+
+			self.callApi({
+				resource: 'account.update',
+				data: {
+					accountId: data.id,
+					data: data
+				},
+				success: function(data, status) {
+					callback && callback(data.data);
+				}
+			});
+		},
+
 		strategyGetAccount: function(args) {
 			var self = this;
 

views/strategy-changeE911Popup.html

@@ -0,0 +1,26 @@
+<div class="e911-change-wrapper">
+	<div class="header">
+		{{#if oldNumber}}
+			{{ i18n.strategy.updateE911Dialog.headerNewE911 }}
+		{{else}}
+			{{ i18n.strategy.updateE911Dialog.headerNoE911 }}
+		{{/if}}
+	</div>
+
+	<div class="list-choices">
+		{{#if oldNumber}}
+			<div class="choice" data-number="{{oldNumber}}">{{ formatPhoneNumber oldNumber }} <span class="current">({{ i18n.strategy.updateE911Dialog.current }})</span></div>
+		{{/if}}
+
+		{{#each newNumbers}} 
+			<div class="choice"" data-number="{{this}}">{{ formatPhoneNumber this }}</div>
+		{{/each}}
+	</div>
+
+	<div class="actions clearfix">
+		<div class="pull-right">
+			<a class="cancel-link monster-link blue" href="javascript:void(0);">{{ i18n.cancel }}</a>
+			<button type="button" class="monster-button monster-button-success save">{{ i18n.save }}</button>
+		</div>
+	</div>
+</div>