UI-228: Updated the faxbox feature to use the numberSelector common control

submodules/users/users.js

@@ -1580,6 +1580,12 @@ define(function(require){
 				monster.ui.alert('error', self.i18n.active().users.errorNumberFaxing);
 			}
 
+			monster.pub('common.numberSelector.render', {
+				container: featureTemplate.find('.number-select'),
+				inputName: 'caller_id',
+				number: data.hasOwnProperty('faxbox') ? data.faxbox.caller_id : undefined
+			});
+
 			featureTemplate.find('.cancel-link').on('click', function() {
 				popup.dialog('close').remove();
 			});
@@ -1589,7 +1595,7 @@ define(function(require){
 			});
 
 			featureTemplate.find('.save').on('click', function() {
-				var newNumber = featureTemplate.find('#caller_id').val(),
+				var newNumber = featureTemplate.find('input[name="caller_id"]').val(),
 					args = {
 						openedTab: 'features',
 						callback: function() {
@@ -1597,7 +1603,7 @@ define(function(require){
 						}
 					};
 
-				if ( switchFeature.prop('checked') ) {
+				if ( switchFeature.prop('checked') && newNumber ) {
 					self.usersUpdateFaxing(data, newNumber, function(results) {
 						args.userId = results.callflow.owner_id;
 

views/users-feature-faxing.html

@@ -1,9 +1,9 @@
 <div class="feature-popup-container" data-feature="faxing">
 	<div class="feature-popup-title">
-        <div class="feature-icon-wrapper">
-            <i class="{{user.extra.mapFeatures.faxing.icon}}"></i>
-        </div>
-        {{ i18n.users.faxing.headline }}
+		<div class="feature-icon-wrapper">
+			<i class="{{user.extra.mapFeatures.faxing.icon}}"></i>
+		</div>
+		{{ i18n.users.faxing.headline }}
 		<div class="switch">
 		{{#monsterSwitch}}
 			<input class="switch-state" type="checkbox" id="checkbox_caller_id" data-on="{{i18n.enabled}}" data-off="{{i18n.disabled}}"{{#if user.extra.mapFeatures.faxing.active}} checked="checked"{{/if}}></input>
@@ -20,13 +20,7 @@
 		<form class="form-horizontal" id="faxbox_form">
 			<div class="control-group">
 				<label for="caller_id" class="control-label">{{ i18n.users.faxing.form.label.callerId }}</label>
-				<div class="controls">
-					<select name="caller_id" id="caller_id">
-					{{#each extra.listNumbers}}
-						<option value="{{@key}}"{{#compare @key '===' ../faxbox.caller_id }} selected="true"{{/compare}}>{{formatPhoneNumber @key}}</option>
-					{{/each}}
-					</select>
-				</div>
+				<div class="controls number-select"></div>
 			</div>
 		{{#compare faxbox.cloud_state '===' 'registered'}}
 			<div class="control-group">
@@ -56,9 +50,9 @@
 	</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="btn btn-success save">{{ i18n.saveChanges }}</button>
-        </div>
-    </div>
+		<div class="pull-right">
+			<a class="cancel-link monster-link blue" href="javascript:void(0);">{{ i18n.cancel }}</a>
+			<button type="button" class="btn btn-success save">{{ i18n.saveChanges }}</button>
+		</div>
+	</div>
 </div>