UI-3094: Manage vmbox and vm-to-email through voicemail user feature (#102)

* Rename view for vm_to_email feature

* Modify feature dialog to display vmbox and vm-to-email functionalities

* Refactor save function for user's vmbox feature

* Change voicemail feature headline and title

* Create function to add main VMBox to user + other helpers

* Improve functions related to get formatted user numbers data

* Complete function to add vmbox to user

* Add function to delete user VMBox

* Remove old usersRenderVMBox code

* Extract form validation from `monster.waterfall`

* Use vmbox data from feature load function

* Get user's VMBox on feature save

* Handle VMBox feature

* Add missing self variable

* Get main user vmbox, match user list with vmboxes, and code refactor

* Code and logic fixes

* Set vm-to-email disabled if vmbox is not created for new user

* Add delete_after_notify to new voicemail box, and related TO-DOs

* Update ID and class related to vm_to_email_enabled option in vmbox view

* Reorganized new functions

* Get full main vmbox for user on feature load, and patch vmbox function

* Add parameters to JSDoc comments for patch functions

* Reduce API requests when adding vmbox to user

* Remove double check at usersGetMainCallflow

* Code fixes

* Remove translations that are no longer needed

i18n/de-DE.json

@@ -687,12 +687,8 @@
 				}
 			}
 		},
-		"vm_to_email": {
-			"deleteAfterNotify": "Nach dem Senden der Benachrichtigung Nachrichten aus Datenbank löschen.",
-			"headline": "Voicemail-zu-E-Mail-Einstellungen",
-			"help": "Wenn Sie das Sendeziel von E-Mail-Benachrichtigungen ändern möchten, bearbeiten Sie die E-Mail-Adresse des Benutzers im Abschnitt „Benutzeradministration“",
-			"label": "Für jede neue Voicemail wird eine E-Mail an {{variable}} gesendet",
-			"title": "Voicemails"
+		"vmbox": {
+			"deleteAfterNotify": "Nach dem Senden der Benachrichtigung Nachrichten aus Datenbank löschen."
 		},
 		"find_me_follow_me": {
 			"title": "Find Me/Follow Me",

i18n/en-US.json

@@ -684,12 +684,13 @@
 				}
 			}
 		},
-		"vm_to_email": {
+		"vmbox": {
 			"deleteAfterNotify": "Delete messages from database after sending the notification.",
-			"headline": "Voicemail-to-Email Settings",
-			"help": "If you want to change where email notifications go to, please edit the user's email address in the User Administration section",
-			"label": "An e-mail will be sent to {{variable}} for every new voicemail",
-			"title": "Voicemails"
+			"headline": "User Voicemail Box",
+			"label": "A voicemail box will be available for this user.",
+			"sendVmToEmail": "Send an e-mail to {{variable}} for every new voicemail.",
+			"title": "Voicemail Box",
+			"vmToEmailHelp": "An e-mail will be sent to {{variable}} for every new voicemail. If you want to change where email notifications go to, please edit the user's email address in the User Administration section."
 		},
 		"find_me_follow_me": {
 			"title": "Find me, Follow me",

i18n/es-ES.json

@@ -569,12 +569,8 @@
 				}
 			}
 		},
-		"vm_to_email": {
-			"deleteAfterNotify": "Eliminar los mensajes de la base de datos después de enviar la notificación.",
-			"headline": "Configuración de correo de voz a correo electrónico",
-			"help": "Si quiere cambiar a donde las notificaciones del correo electrónico van, por favor corrija la dirección de correo electrónico del usuario en la sección de la Administración del Usuario",
-			"label": "Se enviará un mensaje de correo electrónico a {{variable}} para cada nuevo mensaje de correo de voz",
-			"title": "correos de voz"
+		"vmbox": {
+			"deleteAfterNotify": "Eliminar los mensajes de la base de datos después de enviar la notificación."
 		},
 		"find_me_follow_me": {
 			"title": "Búscame, Sígueme ",
@@ -1078,4 +1074,4 @@
 	"__comment": "UI-1153: Show warning icon next to numbers being transfered",
 	"__version": "v3.20_s3",
 	"portIconHelp": "Este número está en proceso de ser portado y serán eliminados si el puerto falla. Sólo aparece para el establecimiento de objetivos y no está configurado para manejar las llamadas"
-}
+}

i18n/fr-FR.json

@@ -543,12 +543,8 @@
 				}
 			}
 		},
-		"vm_to_email": {
-			"deleteAfterNotify": "Supprimer les messages vocaux de la base de données après l'envoi de la notification.",
-			"headline": "Messages vocaux vers Email",
-			"help": "Si vous souhaitez changer l'email qui recevra les notifications, vous pouvez mettre à jour l'adresse e-mail dans les réglages utilisateurs",
-			"label": "Un email sera envoyé à {{variable}} à chaque nouveau message vocal",
-			"title": "Messages vocaux"
+		"vmbox": {
+			"deleteAfterNotify": "Supprimer les messages vocaux de la base de données après l'envoi de la notification."
 		},
 		"find_me_follow_me": {
 			"title": "Ordre d'appel",

i18n/ru-RU.json

@@ -554,12 +554,8 @@
 				}
 			}
 		},
-		"vm_to_email": {
-			"deleteAfterNotify": "Удалите сообщения из базы данных после отправки уведомления.",
-			"headline": "Настройка отправки голосовых сообщений на электроную почту",
-			"help": "Если вы собираетесь изменить адрес электронной почты, куда должны приходить уведомления, пожалуйста отредактируйте адрес электронной почты пользователя в меню администрирования пользователей",
-			"label": "Собщения будут отправлены на адрес  {{variable}} электронной почты для всех новых голосовых сообщений",
-			"title": "Голосовая почта"
+		"vmbox": {
+			"deleteAfterNotify": "Удалите сообщения из базы данных после отправки уведомления."
 		},
 		"find_me_follow_me": {
 			"title": "Найди-меня-Следуй-за-мной",

submodules/users/users.scss

@@ -955,9 +955,11 @@
 		}
 	}
 
-	&[data-feature="vm_to_email"] {
-		#email {
-			margin-top: 8px;
+	&[data-feature="vmbox"] .content {
+		padding-bottom: 0px;
+
+		form {
+			margin-bottom: 0px;
 		}
 
 		.main-line {
@@ -965,5 +967,33 @@
 			line-height: 20px;
 			margin: 10px 0 30px 0;
 		}
+
+		.control-group {
+			&.main{
+				display: flex;
+				flex-direction: row;
+				justify-content: center;
+				align-items: center;
+				padding-bottom: 15px;
+
+				label.title {
+					font-size: 1em;
+					padding-right: 1em;
+					margin-bottom: 0px;
+				}
+			}
+
+			&.extra {
+				margin-bottom: 40px;
+			}
+		}
+
+		.extra-content {
+			padding-bottom: 15px;
+
+			&.disabled {
+				display: none;
+			}
+		}
 	}
 }

submodules/users/views/feature-vm_to_email.html

@@ -1,42 +0,0 @@
-<div class="monster-feature-popup-container" data-feature="vm_to_email">
-	<div class="feature-popup-title">
-		<div class="popup-title">
-			<div class="feature-fa-wrapper">
-				<i class="{{extra.mapFeatures.vm_to_email.icon}}"></i>
-			</div>
-			<div class="feature-title">
-				{{ i18n.users.vm_to_email.headline }}
-			</div>
-		</div>
-		<div class="switch popup-action">
-		{{#monsterSwitch}}
-			<input class="switch-state" type="checkbox" id="checkbox_vm_to_email" data-on="{{i18n.enabled}}" data-off="{{i18n.disabled}}"{{#if extra.mapFeatures.vm_to_email.active}} checked="checked"{{/if}}></input>
-		{{/monsterSwitch}}
-		</div>
-	</div>
-
-	<div class="content{{#unless extra.mapFeatures.vm_to_email.active}} disabled{{/unless}}">
-		<form id="vm_to_email_form">
-			<div class="main-line">
-				{{replaceVar i18n.users.vm_to_email.label email}}
-			</div>
-
-			<label class="fix-left">
-				{{#monsterCheckbox i18n.users.vm_to_email.deleteAfterNotify}}
-					<input type="checkbox" name="delete_after_notify"{{#if extra.deleteAfterNotify}} checked{{/if}}></input>
-				{{/monsterCheckbox}}
-			</label>
-		</form>
-
-		{{#monsterText}}
-			{{i18n.users.vm_to_email.help}}
-		{{/monsterText}}
-	</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.saveChanges }}</button>
-		</div>
-	</div>
-</div>

submodules/users/views/feature-vmbox.html

@@ -0,0 +1,55 @@
+<div class="monster-feature-popup-container" data-feature="vmbox">
+	<div class="feature-popup-title">
+		<div class="popup-title">
+			<div class="feature-fa-wrapper">
+				<i class="{{extra.mapFeatures.vmbox.icon}}"></i>
+			</div>
+			<div class="feature-title">
+				{{ i18n.users.vmbox.headline }}
+			</div>
+		</div>
+		<div class="switch popup-action">
+		{{#monsterSwitch}}
+			<input class="switch-state" type="checkbox" id="checkbox_vmbox" data-on="{{i18n.enabled}}" data-off="{{i18n.disabled}}"{{#if extra.mapFeatures.vmbox.active}} checked="checked"{{/if}}></input>
+		{{/monsterSwitch}}
+		</div>
+	</div>
+
+	<div class="content{{#unless extra.mapFeatures.vmbox.active}} disabled{{/unless}}">
+		<form id="vmbox_form">
+
+			<div class="main-line">
+				{{i18n.users.vmbox.label}}
+			</div>
+
+			<div class="control-group main">
+				<label class="title">Voicemail to e-mail:</label>
+				{{#monsterSwitch}}
+					<input type="checkbox" name="vm_to_email_enabled" id="vm_to_email_enabled" data-on="{{i18n.enabled}}" data-off="{{i18n.disabled}}"{{#if vm_to_email_enabled}} checked="checked"{{/if}}></input>
+				{{/monsterSwitch}}
+			</div>
+
+			<div class="extra-content{{#unless vm_to_email_enabled}} disabled{{/unless}}">
+				<div class="control-group extra">
+					<label class="fix-left">
+						{{#monsterCheckbox i18n.users.vmbox.deleteAfterNotify}}
+							<input type="checkbox" name="delete_after_notify"{{#if extra.deleteAfterNotify}} checked{{/if}}></input>
+						{{/monsterCheckbox}}
+					</label>
+				</div>
+
+				{{#monsterText}}
+					{{replaceVar i18n.users.vmbox.vmToEmailHelp email}}
+				{{/monsterText}}
+			</div>
+
+		</form>
+	</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.saveChanges }}</button>
+		</div>
+	</div>
+</div>