UI-1774: Added a TTS greeting feature to the main conference in SmartPBX

i18n/en-US.json

@@ -855,6 +855,14 @@
 		"faxing": {
 			"nameExtension": "'s Main Faxbox",
 			"headerExtension": " Fax Printer"
+		},
+		"__comment": "UI-1774: Adding custom greetings to conference",
+		"__version": "3.22",
+		"customConferenceGreeting": {
+			"title": "Custom Conference Greeting",
+			"link": "Custom Greeting",
+			"info": "Customize your conference greeting message using our Text-to-Speech feature. Simply type your greeting message in the input field below.",
+			"mainConfMissing": "Your Main Conference could not be found."
 		}
 	},
 

submodules/strategy/strategy.css

@@ -17,6 +17,7 @@
 	background: #f3f3f3;
 	margin: 5px;
 	cursor: pointer;
+	position: relative;
 }
 
 #strategy_container .element-container.open .element-header-outer {
@@ -497,6 +498,32 @@
 	font-size: 28px;
 	color: #44cc44;
 }
+#strategy_container .element-container.strategy-confnum .greeting-link {
+	margin-right: 30px !important;
+	position: relative;
+}
+#strategy_container .element-container.strategy-confnum .greeting-link:after {
+	content: "";
+	position: absolute;
+	width: 0px;
+	height: 50px;
+	border-right: solid 1px #c0c0c9;
+	top: -15px;
+	right: -15px;
+}
+
+#strategy_custom_conference_greeting textarea {
+	width: 100%;
+	box-sizing: border-box;
+}
+#strategy_custom_conference_greeting .actions button:not(:first-child) {
+	margin-left: 10px;
+}
+#strategy_container .element-container.strategy-confnum .custom-greeting-icon {
+	position: absolute;
+	right: 45px;
+	top: 23px;
+}
 
 /************ Strategy Faxbox *************/
 

submodules/strategy/strategy.js

@@ -192,6 +192,7 @@ define(function(require){
 					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],
+						customConfGreeting: results.callflows.MainConference && ('welcome_prompt' in results.callflows.MainConference.flow.data) ? true : false,
 						faxingNumbers: hasFaxingNumber ? results.callflows["MainFaxing"].numbers : [self.i18n.active().strategy.noNumberTitle]
 					}
 					template = $(monster.template(self, 'strategy-layout', templateData));
@@ -961,6 +962,101 @@ define(function(require){
 				monster.pub('common.numbers.dialogSpare', args);
 			});
 
+			container.on('click', '.action-links .greeting-link', function(e) {
+				e.preventDefault();
+				var confCallflow = strategyData.callflows.MainConference;
+				if(confCallflow) {
+					self.getMainConferenceGreetingMedia(function(greetingMedia) {
+						var greetingTemplate = $(monster.template(self, 'strategy-customConferenceGreeting', {
+								enabled: ('welcome_prompt' in confCallflow.flow.data),
+								greeting: greetingMedia && greetingMedia.tts ? greetingMedia.tts.text : ''
+							})),
+							greetingPopup = monster.ui.dialog(greetingTemplate, {
+								title: self.i18n.active().strategy.customConferenceGreeting.title,
+								position: ['center', 20]
+							});
+
+						greetingTemplate.find('.switch-state').on('change', function() {
+							$(this).prop('checked') ? greetingTemplate.find('.content').slideDown() : greetingTemplate.find('.content').slideUp();
+						});
+
+						greetingTemplate.find('.cancel').on('click', function() {
+							greetingPopup.dialog('close').remove();
+						});
+
+						greetingTemplate.find('.save').on('click', function() {
+							if(greetingTemplate.find('.switch-state').prop('checked')) {
+								var updateMedia = function(callback) {
+										if(greetingMedia) {
+											greetingMedia.description = "<Text to Speech>";
+											greetingMedia.media_source = "tts";
+											greetingMedia.tts = {
+												text: greetingTemplate.find('.custom-greeting-text').val(),
+												voice: "female/en-US"
+											}
+											self.callApi({
+												resource: 'media.update',
+												data: {
+													accountId: self.accountId,
+													mediaId: greetingMedia.id,
+													data: greetingMedia
+												},
+												success: function(data, status) {
+													callback && callback(data.data);
+												}
+											});
+										} else {
+											self.callApi({
+												resource: 'media.create',
+												data: {
+													accountId: self.accountId,
+													data: {
+														description: '<Text to Speech>',
+														media_source: 'tts',
+														name: 'MainConferenceGreeting',
+														streamable: true,
+														type: 'mainConfGreeting',
+														tts: {
+															text: greetingTemplate.find('.custom-greeting-text').val(),
+															voice: "female/en-US"
+														}
+													}
+												},
+												success: function(data, status) {
+													callback && callback(data.data);
+												}
+											});
+										}
+									};
+
+								updateMedia(function(updatedGreeting) {
+									confCallflow.flow.data.welcome_prompt = {
+										media_id: updatedGreeting.id
+									};
+									self.strategyUpdateCallflow(confCallflow, function() {
+										greetingPopup.dialog('close').remove();
+										$('#strategy_container .custom-greeting-icon').show();
+									});
+								});
+							} else {
+								if('welcome_prompt' in confCallflow.flow.data) {
+									delete confCallflow.flow.data.welcome_prompt;
+									self.strategyUpdateCallflow(confCallflow, function() {
+										greetingPopup.dialog('close').remove();
+										$('#strategy_container .custom-greeting-icon').hide();
+									});
+								} else {
+									greetingPopup.dialog('close').remove();
+								}
+							}
+						});
+					});
+					
+				} else {
+					monster.ui.alert('error', self.i18n.active().strategy.customConferenceGreeting.mainConfMissing)
+				}
+			});
+
 			container.on('click', '.action-links .buy-link', function(e) {
 				e.preventDefault();
 				monster.pub('common.buyNumbers', {
@@ -979,9 +1075,8 @@ define(function(require){
 
 			container.on('click', '.number-element .remove-number', function(e) {
 				e.preventDefault();
-				var numberToRemove = $(this).data('number'),
+				var numberToRemove = $(this).data('number').toString(),
 					indexToRemove = strategyData.callflows["MainConference"].numbers.indexOf(numberToRemove);
-
 				if(indexToRemove >= 0) {
 					strategyData.callflows["MainConference"].numbers.splice(indexToRemove, 1);
 					if(strategyData.callflows["MainConference"].numbers.length === 0) {
@@ -998,6 +1093,41 @@ define(function(require){
 			});
 		},
 
+		getMainConferenceGreetingMedia: function(callback) {
+			var self = this;
+			self.callApi({
+				resource: 'media.list',
+				data: {
+					accountId: self.accountId,
+					filters: {
+						'filter_type': 'mainConfGreeting'
+					}
+				},
+				success: function(data, status) {
+					if(data.data && data.data.length > 0) {
+						self.callApi({
+							resource: 'media.get',
+							data: {
+								accountId: self.accountId,
+								mediaId: data.data[0].id
+							},
+							success: function(data, status) {
+								callback && callback(data.data);
+							},
+							error: function(data, status) {
+								callback && callback(null);
+							}
+						});
+					} else {
+						callback && callback(null);
+					}
+				},
+				error: function(data, status) {
+					callback && callback(null);
+				}
+			});
+		},
+
 		strategyFaxingNumBindEvents: function(container, strategyData) {
 			var self = this,
 				addNumbersToMainFaxing = function(numbers) {

views/strategy-confnum.html

@@ -15,6 +15,7 @@
 <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="greeting-link monster-link pull-left"><i class="fa fa-volume-up fa-lg"></i>{{ i18n.strategy.customConferenceGreeting.link }}</a>
 		<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">

views/strategy-customConferenceGreeting.html

@@ -0,0 +1,27 @@
+<div id="strategy_custom_conference_greeting" class="feature-popup-container">
+	<div class="feature-popup-title">
+		<div class="feature-fa-wrapper">
+			<i class="fa fa-volume-up"></i>
+		</div>
+		{{ i18n.strategy.customConferenceGreeting.title }}
+		<div class="switch">
+		{{#monsterSwitch}}
+			<input class="switch-state" type="checkbox" name="enabled" id="checkbox_hotdesk" data-on="{{i18n.enabled}}" data-off="{{i18n.disabled}}"{{#if enabled}} checked="checked"{{/if}}></input>
+		{{/monsterSwitch}}
+		</div>
+	</div>
+
+	<div class="content{{#unless enabled}} disabled{{/unless}}">
+		{{#monsterText}}
+			{{ i18n.strategy.customConferenceGreeting.info }}
+		{{/monsterText}}
+		<textarea class="custom-greeting-text">{{greeting}}</textarea>
+	</div>
+
+	<div class="actions clearfix">
+		<div class="pull-right">
+			<button type="button" class="monster-button cancel">{{ i18n.cancel }}</button>
+			<button type="button" class="monster-button-success save">{{ i18n.save }}</button>
+		</div>
+	</div>
+</div>

views/strategy-layout.html

@@ -92,6 +92,7 @@
 					</span>
 					<i class="fa fa-play"></i>
 				</div>
+				<i class="fa fa-volume-up monster-blue custom-greeting-icon" {{#unless customConfGreeting}}style="display:none"{{/unless}}></i>
 			</div>
 		</div>
 		<div class="element-content"></div>