Add option to use existing media for virtual receptionist greeting (#45)

i18n/en-US.json

@@ -835,6 +835,8 @@
 			"ttsGreetingTitle": "Text to Speech",
 			"ttsGreetingPlaceholder": "Please enter your greeting message here.",
 			"uploadGreetingTitle": "Upload your own file",
+			"chooseExistingGreetingTitle": "Choose from existing recordings",
+			"noExistingGreetings": "You don't have any greetings recorded yet. Upload some first.",
 			"recordGreetingTitle": "Record it over the phone",
 			"recordGreetingInfo": "Record the greeting message yourself over the phone, by following the steps below:",
 			"recordGreetingLines": {

submodules/strategy/strategy.js

@@ -2313,35 +2313,51 @@ define(function(require) {
 				label = params.label,
 				template, menu, greeting,
 				showPopup = function() {
-					template = $(monster.template(self, 'strategy-menuPopup', { menu: menu, greeting: greeting }));
+					self.callApi({
+						resource: 'media.list',
+						data: {
+							accountId: self.accountId
+						},
+						success: function(response) {
+							var greetingFiles,
+								noGreetingFiles;
+							if(response.data.length > 0) {
+								greetingFiles = response.data;
+							} else {
+								noGreetingFiles = true;
+							}
 
-					var popup = monster.ui.dialog(template, {
-						title: self.i18n.active().strategy.popup.title + ' - ' + label,
-						dialogClass: 'overflow-visible'
-					});
+							template = $(monster.template(self, 'strategy-menuPopup', { menu: menu, greeting: greeting, greetingFiles: greetingFiles, noGreetingFiles: noGreetingFiles }));
 
-					var menuLineContainer = template.find('.menu-block .left .content'),
-						popupCallEntities = $.extend(true, {}, strategyData.callEntities, { voicemail: strategyData.voicemails }, { directory: strategyData.directories }),
-						dropdownCallEntities = self.strategyGetCallEntitiesDropdownData(popupCallEntities);
+							var popup = monster.ui.dialog(template, {
+								title: self.i18n.active().strategy.popup.title + ' - ' + label,
+								dialogClass: 'overflow-visible'
+							});
 
-					_.each(strategyData.callflows[name].flow.children, function(val, key) {
-						menuLineContainer.append(monster.template(self, 'strategy-menuLine', {
-							number: key,
-							callEntities: dropdownCallEntities,
-							selectedId: val.data.id || val.data.endpoints[0].id
-						}));
-					});
+							var menuLineContainer = template.find('.menu-block .left .content'),
+								popupCallEntities = $.extend(true, {}, strategyData.callEntities, { voicemail: strategyData.voicemails }, { directory: strategyData.directories }),
+								dropdownCallEntities = self.strategyGetCallEntitiesDropdownData(popupCallEntities);
 
-					$.each(menuLineContainer.find('.target-input'), function() {
-						var $this = $(this),
-							icon = $this.find('.target-select option:selected').parents('optgroup').data('icon');
-						$this.find('.target-icon').addClass(icon);
-					});
+							_.each(strategyData.callflows[name].flow.children, function(val, key) {
+								menuLineContainer.append(monster.template(self, 'strategy-menuLine', {
+									number: key,
+									callEntities: dropdownCallEntities,
+									selectedId: val.data.id || val.data.endpoints[0].id
+								}));
+							});
+
+							$.each(menuLineContainer.find('.target-input'), function() {
+								var $this = $(this),
+									icon = $this.find('.target-select option:selected').parents('optgroup').data('icon');
+								$this.find('.target-icon').addClass(icon);
+							});
 
-					self.strategyBindMenuPopupEvents(popup, $.extend({
-						menu: menu,
-						greeting: greeting
-					}, params));
+							self.strategyBindMenuPopupEvents(popup, $.extend({
+								menu: menu,
+								greeting: greeting
+							}, params));
+						}
+					});
 				};
 
 			if (name in strategyData.callflows) {
@@ -2439,6 +2455,7 @@ define(function(require) {
 				container = popup.find('#strategy_menu_popup'),
 				ttsGreeting = container.find('#strategy_menu_popup_tts_greeting'),
 				uploadGreeting = container.find('#strategy_menu_popup_upload_greeting'),
+				chooseExisting = container.find('#strategy_menu_popup_choose_existing'),
 				mediaToUpload;
 
 			container.find('.target-select').chosen({ search_contains: true, width: '150px' });
@@ -2631,7 +2648,28 @@ define(function(require) {
 				}
 			});
 
-			container.find('.cancel-greeting').on('click', function(e) {
+			chooseExisting.find('.update-greeting').on('click', function(ev) {
+				ev.preventDefault();
+
+				var greetingId = chooseExisting.find('.choose-input').find(':selected').val();
+				menu.media.greeting = greetingId;
+				self.callApi({
+					resource: 'menu.update',
+					data: {
+						accountId: self.accountId,
+						menuId: menu.id,
+						data: menu
+					},
+					success: function(data, status) {
+						menu = data.data;
+						container.find('.greeting-option').removeClass('active');
+						chooseExisting.parents('.greeting-option').addClass('active');
+						chooseExisting.collapse('hide');
+					}
+				});
+			});
+
+			container.find('.cancel-greeting').on('click', function() {
 				$(this).parents('.collapse').collapse('hide');
 			});
 

views/strategy-menuPopup.html

@@ -57,6 +57,35 @@
 							</div>
 						</div>
 					</div>
+					<div class="greeting-option accordion-group {{#compare greeting.media_source '===' 'existing'}}active{{/compare}}">
+						<div class="greeting-option-header" data-toggle="collapse"
+							data-parent="#strategy_menu_popup_accordion"
+							data-target="#strategy_menu_popup_choose_existing">
+							<div class="pull-right"><i class="fa fa-file-audio-o"></i></div>
+							<div>{{i18n.strategy.popup.chooseExistingGreetingTitle}}</div>
+						</div>
+						<div class="collapse" id="strategy_menu_popup_choose_existing">
+							<div class="greeting-option-content">
+								{{#monsterText}}
+									{{i18n.strategy.popup.greetingsHelp}}
+								{{/monsterText}}
+								{{#if greetingFiles}}
+								<select class="choose-input">
+									{{#each greetingFiles}}
+										<option class="media-file-option" value="{{this.id}}">{{this.name}}</option>
+									{{/each}}
+								</select>
+								<div class="greeting-option-actions clearfix">
+									<button class="update-greeting pull-right monster-button-mini monster-button-primary">{{i18n.update}}</button>
+									<button class="cancel-greeting pull-right monster-button-mini">{{i18n.cancel}}</button>
+								</div>
+								{{/if}}
+								{{#if noGreetingFiles}}
+									{{i18n.strategy.popup.noExistingGreetings}}
+								{{/if}}
+							</div>
+						</div>
+					</div>
 					<div class="greeting-option accordion-group {{#compare greeting.media_source '===' 'recording'}}active{{/compare}}">
 						<div class="greeting-option-header" data-toggle="collapse" 
 							 data-parent="#strategy_menu_popup_accordion" 
@@ -86,4 +115,4 @@
 		<button class="save-button monster-button monster-button-success pull-right">{{i18n.save}}</button>
 		<a href="#" class="monster-link blue cancel-link pull-right">{{i18n.cancel}}</a>
 	</div>
-</div>
+</div>