UI-1210: Add UI component to create main faxbox callflows

i18n/en-US.json

@@ -663,7 +663,10 @@
 			"confnum": "Main Conference Number",
 			"hours": "Office Hours Strategy",
 			"holidays": "Office Holidays",
-			"calls": "Incoming Call Handling"
+			"calls": "Incoming Call Handling",
+			"__comment": "UI-1210",
+			"__version": "3.22",
+			"faxingnum": "Main Faxbox Number"
 		},
 		"noNumberTitle": "Add Main Number",
 		"noNumberMessage": "Please add or buy a number from the links below to continue.",
@@ -840,7 +843,10 @@
 					"4": "Create a main Conference Number for your business. Purchase, port or add an existing number and set up a Conference Number seamlessly."
 				}
 			}
-		}
+		},
+		"__comment": "UI-17142: ",
+		"__version": "3.22",
+		"noFaxingNumMessage": "Please add a main faxbox number."
 	},
 
 	"callLogs": {

submodules/strategy/strategy.js

@@ -187,10 +187,12 @@ define(function(require){
 				},
 				function(err, results) {
 					var hasMainNumber = (results.callflows["MainCallflow"].numbers.length > 1),
-						hasConfNumber = (results.callflows["MainConference"].numbers.length > 0 && results.callflows["MainConference"].numbers[0] !== "undefinedconf")
+						hasConfNumber = (results.callflows["MainConference"].numbers.length > 0 && results.callflows["MainConference"].numbers[0] !== "undefinedconf"),
+						hasFaxingNumber = (results.callflows["MainFaxing"].numbers.length > 0 && results.callflows["MainFaxing"].numbers[0] !== "undefinedfaxing"),
 					templateData = {
 						mainNumbers: hasMainNumber ? results.callflows["MainCallflow"].numbers.slice(1) : [self.i18n.active().strategy.noNumberTitle],
-						confNumbers: hasConfNumber ? results.callflows["MainConference"].numbers : [self.i18n.active().strategy.noNumberTitle]
+						confNumbers: hasConfNumber ? results.callflows["MainConference"].numbers : [self.i18n.active().strategy.noNumberTitle],
+						faxingNumbers: hasFaxingNumber ? results.callflows["MainFaxing"].numbers : [self.i18n.active().strategy.noNumberTitle]
 					}
 					template = $(monster.template(self, 'strategy-layout', templateData));
 					self.strategyBindEvents(template, results);
@@ -319,6 +321,7 @@ define(function(require){
 				containers = template.find('.element-container'),
 				strategyNumbersContainer = template.find('.element-container.main-number .element-content'),
 				strategyConfNumContainer = template.find('.element-container.strategy-confnum .element-content'),
+				strategyFaxingNumContainer = template.find('.element-container.strategy-faxingnum .element-content'),
 				strategyHoursContainer = template.find('.element-container.strategy-hours .element-content'),
 				strategyHolidaysContainer = template.find('.element-container.strategy-holidays .element-content'),
 				strategyCallsContainer = template.find('.element-container.strategy-calls .element-content');
@@ -356,6 +359,7 @@ define(function(require){
 
 			self.strategyNumbersBindEvents(strategyNumbersContainer, strategyData);
 			self.strategyConfNumBindEvents(strategyConfNumContainer, strategyData);
+			self.strategyFaxingNumBindEvents(strategyFaxingNumContainer, strategyData);
 			self.strategyHoursBindEvents(strategyHoursContainer, strategyData);
 			self.strategyHolidaysBindEvents(strategyHolidaysContainer, strategyData);
 			self.strategyCallsBindEvents(strategyCallsContainer, strategyData);
@@ -417,6 +421,27 @@ define(function(require){
 							callback && callback();
 						});
 						break;
+					case 'faxingnum':
+						self.strategyListAccountNumbers(function (accountNumbers) {
+							var callflow = strategyData.callflows["MainFaxing"],
+								numbers = callflow.numbers,
+								templateData = {
+									numbers: $.map(numbers, function(val, key) {
+										if(val!=="undefinedfaxing") {
+											return {
+												number: val
+											};
+										}
+									}),
+									spareLinkEnabled: (_.countBy(accountNumbers, function(number) {return number.used_by ? 'assigned' : 'spare';})['spare'] > 0),
+								},
+								template = monster.template(self, 'strategy-'+templateName, templateData);
+
+							container.find('.element-content').empty()
+															  .append(template);
+							callback && callback();
+						});
+						break;
 					case "hours":
 						var is12hMode = monster.apps.auth.currentUser.ui_flags && monster.apps.auth.currentUser.ui_flags.twelve_hours_mode ? true : false,
 							secondsToTime = function(seconds) {
@@ -657,6 +682,7 @@ define(function(require){
 							headerSpan.append(", "+monster.util.formatPhoneNumber(mainCallflow.numbers[2]));
 						}
 						container.parents('#strategy_container').find('.element-container:not(.main-number,.strategy-confnum)').show();
+						container.parents('#strategy_container').find('.element-container:not(.main-number,.strategy-faxingnum)').show();
 						container.parents('#strategy_container').find('.element-container.helper').hide();
 						container.parents('#strategy_container').find('.element-container.main-number').css('margin-top', '0px');
 
@@ -664,6 +690,7 @@ define(function(require){
 					} else {
 						headerSpan.html(self.i18n.active().strategy.noNumberTitle);
 						container.parents('#strategy_container').find('.element-container:not(.main-number,.strategy-confnum)').hide();
+						container.parents('#strategy_container').find('.element-container:not(.main-number,.strategy-faxingnum)').hide();
 						container.parents('#strategy_container').find('.element-container.helper').show();
 						container.parents('#strategy_container').find('.element-container.main-number').css('margin-top', '10px');
 					}
@@ -965,6 +992,93 @@ define(function(require){
 			});
 		},
 
+		strategyFaxingNumBindEvents: function(container, strategyData) {
+			var self = this,
+				addNumbersToMainFaxing = function(numbers) {
+					if(numbers.length) {
+						var mainFaxing = strategyData.callflows["MainFaxing"];
+						if(mainFaxing.numbers.length <= 1
+						&& mainFaxing.numbers[0] === "undefinedfaxing") {
+							mainFaxing.numbers = [];
+						}
+						mainFaxing.numbers = mainFaxing.numbers.concat(numbers);
+						self.strategyUpdateCallflow(mainFaxing, function(updatedCallflow) {
+							var parentContainer = container.parents('.element-container');
+							strategyData.callflows["MainFaxing"] = updatedCallflow;
+							refreshFaxingNumHeader(parentContainer);
+							self.strategyRefreshTemplate(parentContainer, strategyData);
+						});
+					}
+				},
+				refreshFaxingNumHeader = function(parentContainer) {
+					var mainFaxing = strategyData.callflows["MainFaxing"],
+						headerSpan = parentContainer.find('.element-header-inner .summary > span');
+					if(mainFaxing.numbers.length > 0 && mainFaxing.numbers[0] !== "undefinedfaxing") {
+						headerSpan.html(monster.util.formatPhoneNumber(mainFaxing.numbers[0]));
+						if(mainFaxing.numbers.length > 2) {
+							headerSpan.append('<i class="icon-telicon-multiple-items icon-small"></i>')
+						} else if(mainFaxing.numbers.length === 2) {
+							headerSpan.append(", "+monster.util.formatPhoneNumber(mainFaxing.numbers[1]))
+						}
+					} else {
+						headerSpan.html(self.i18n.active().strategy.noNumberTitle);
+					}
+				};
+
+			container.on('click', '.action-links .spare-link:not(.disabled)', function(e) {
+				e.preventDefault();
+
+				var args = {
+					accountName: monster.apps['auth'].currentAccount.name,
+					accountId: self.accountId,
+					callback: function(numberList) {
+						var numbers = $.map(numberList, function(val) {
+							return val.phoneNumber;
+						});
+						addNumbersToMainFaxing(numbers);
+					}
+				}
+
+				monster.pub('common.numbers.dialogSpare', args);
+			});
+
+			container.on('click', '.action-links .buy-link', function(e) {
+				e.preventDefault();
+				monster.pub('common.buyNumbers', {
+					searchType: $(this).data('type'),
+					callbacks: {
+						success: function(numbers) {
+							addNumbersToMainFaxing(Object.keys(numbers));
+							toastr.success(self.i18n.active().strategy.toastrMessages.buyNumbersSuccess);
+						},
+						error: function(error) {
+							toastr.error(self.i18n.active().strategy.toastrMessages.buyNumbersError);
+						}
+					}
+				});
+			});
+
+			container.on('click', '.number-element .remove-number', function(e) {
+				e.preventDefault();
+				var numberToRemove = $(this).data('number'),
+					indexToRemove = strategyData.callflows["MainFaxing"].numbers.indexOf(numberToRemove);
+
+				if(indexToRemove >= 0) {
+					strategyData.callflows["MainFaxing"].numbers.splice(indexToRemove, 1);
+					if(strategyData.callflows["MainFaxing"].numbers.length === 0) {
+						strategyData.callflows["MainFaxing"].numbers = ["undefinedfaxing"];
+					}
+					self.strategyUpdateCallflow(strategyData.callflows["MainFaxing"], function(updatedCallflow) {
+						var parentContainer = container.parents('.element-container');
+						toastr.success(self.i18n.active().strategy.toastrMessages.removeNumberSuccess);
+						strategyData.callflows["MainFaxing"] = updatedCallflow;
+						refreshFaxingNumHeader(parentContainer);
+						self.strategyRefreshTemplate(parentContainer, strategyData);
+					});
+				}
+			});
+		},
+
 		strategyHoursBindEvents: function(container, strategyData) {
 			var self = this;
 
@@ -1952,7 +2066,13 @@ define(function(require){
 
 					_.each(data.data, function(val, key) {
 						if(val.type === "main" || val.type === "conference")
-						var name = val.type === "conference" ? "MainConference" : val.name || val.numbers[0];
+						var name = val.name || val.numbers[0];
+						if (val.type === 'conference') {
+							name = "MainConference"
+						}
+						else if (val.type === "faxing") {
+							name = "MainFaxing";
+						}
 						parallelRequests[name] = function(callback) {
 							self.callApi({
 								resource: 'callflow.get',
@@ -1994,6 +2114,33 @@ define(function(require){
 						}
 					}
 
+					if (!parallelRequests["MainFaxing"]) {
+						parallelRequests["MainFaxing"] = function(callback) {
+							self.callApi({
+								resource: 'callflow.create',
+								data: {
+									accountId: self.accountId,
+									data: {
+										contact_list: {
+											exclude: false
+										},
+										numbers: ["undefinedfaxing"],
+										name: "MainFaxing",
+										type: "faxing",
+										flow: {
+											children: {},
+											data: {},
+											module: "faxing"
+										}
+									}
+								},
+								success: function(data, status) {
+									callback(null, data.data);
+								}
+							});
+						}
+					}
+
 					_.each(self.subCallflowsLabel, function(val) {
 						var menuName = val+'Menu';
 						if(!parallelRequests[menuName]) {

views/strategy-faxingnum.html

@@ -0,0 +1,30 @@
+{{#each numbers}}
+<div class="number-element">
+	<div class="number">
+		<button type="button" class="monster-button monster-button-danger remove-number" data-number="{{this.number}}">
+			{{ ../i18n.unassign }}
+		</button>
+		<span>{{formatPhoneNumber this.number}}</span>
+	</div>
+</div>
+{{else}}
+<div class="number-element">
+	<div class="no-number-error">{{ i18n.strategy.noFaxingNumMessage }}</div>
+</div>
+{{/each}}
+<div class="number-actions">
+	<a href="#" class="monster-link blue cancel-link pull-right">{{ i18n.close }}</a>
+	<div class="action-links nav-bar clearfix">
+		<a href="#" class="spare-link monster-link pull-left{{#unless spareLinkEnabled}} disabled{{/unless}}"><i class="fa fa-file-text-o monster-orange fa-lg"></i>{{ i18n.strategy.numberLinks.spare }}</a>
+		<ul class="nav pull-left">
+			<li class="dropdown">
+				<a href="#" class="dropdown-toggle buy-dropdown monster-link" data-toggle="dropdown" data-target="#"><i class="fa fa-shopping-cart monster-green fa-lg"></i>{{ i18n.strategy.numberLinks.buy.link }}</a>
+				<ul class="dropdown-menu" role="menu">
+					<li><a class="buy-link" data-type="regular" href="#">{{i18n.strategy.numberLinks.buy.regular}}</a></li>
+					<li><a class="buy-link" data-type="tollfree" href="#">{{i18n.strategy.numberLinks.buy.tollfree}}</a></li>
+					<li><a class="buy-link" data-type="vanity" href="#">{{i18n.strategy.numberLinks.buy.vanity}}</a></li>
+				</ul>
+			</li>
+		</ul>
+	</div>
+</div>

views/strategy-layout.html

@@ -96,4 +96,28 @@
 		</div>
 		<div class="element-content"></div>
 	</div>
+	<div class="element-container strategy-faxingnum" data-template="faxingnum">
+		<div class="element-header-outer clearfix">
+			<div class="element-header-inner">
+				<div class="title">
+					<i class="fa fa-comments"></i>
+					<span>{{ i18n.strategy.sectionTitles.faxingnum }}</span>
+				</div>
+				<div class="summary">
+					<span>
+						{{formatPhoneNumber faxingNumbers.[0]}}
+						{{#if faxingNumbers.[1]}}
+							{{#if faxingNumbers.[2]}}
+								<i class="icon-telicon-multiple-items icon-small"></i>
+							{{else}}
+								, {{formatPhoneNumber faxingNumbers.[1]}}
+							{{/if}}
+						{{/if}}
+					</span>
+					<i class="fa fa-play"></i>
+				</div>
+			</div>
+		</div>
+		<div class="element-content"></div>
+	</div>
 </div>