UI-1354: Add better explanation to faxbox feature

i18n/en-US.json

@@ -513,19 +513,26 @@
 		"faxing": {
 			"title": "Faxbox",
 			"headline": "Faxbox",
-			"text": "This user will receive faxes at {{variable}} as an attachment.",
-			"helpOne": "For users running Windows, here is a link to the ",
-			"helpTwo": "Cloud Printer Installer",
-			"form": {
-				"label": {
-					"callerId": "Faxbox number",
-					"linkToPrinter": "Link to printer",
-					"smtpEmailAddress": "SMTP email address"
-				}
+			"__comment": "UI-1354: Add better explanation to faxbox feature",
+			"__version": "v3.20_s4",
+			"faxToEmail": {
+				"title": "Fax to Email",
+				"text1": "Faxes to",
+				"text2": "will be converted to email and sent to"
 			},
-			"defaultSettings": {
-				"nameExtension": "'s Faxbox",
-				"headerExtension": " Fax Printer"
+			"emailToFax": {
+				"title": "Email to Fax",
+				"text1": "Emails sent from",
+				"text2": "to",
+				"text3": "with a pdf will fax the number in the 'to' address.",
+				"default": "- Select a number -"
+			},
+
+			"googlePrinter": {
+				"title": "Google Printer",
+				"text1": "Click ",
+				"text2": " to activate the Google Cloud Printer. Get the printer installer from ",
+				"link": "here"
 			}
 		},
 		"vm_to_email": {

i18n/fr-FR.json

@@ -483,19 +483,24 @@
 		"faxing": {
 			"title": "Faxbox",
 			"headline": "Faxbox",
-			"text": "Cet utilisateur recevra les fax à l'adresse mail {{variable}} sous la forme d'une pièce jointe.",
-			"helpOne": "Pour les utilisateurs sur Windows, voici un lien pour ",
-			"helpTwo": "l'installeur de l'imprimante en ligne",
-			"form": {
-				"label": {
-					"callerId": "Numéro de Faxbox",
-					"linkToPrinter": "Lien de l'imprimante",
-					"smtpEmailAddress": "Adresse email SMTP"
-				}
+			"faxToEmail": {
+				"title": "Fax to Email",
+				"text1": "Les fax envoyés à",
+				"text2": "seront convertis en email et transférés à l'adresse"
+			},
+			"emailToFax": {
+				"title": "Email to Fax",
+				"text1": "Les emails envoyés depuis",
+				"text2": "à",
+				"text3": " avec un pdf seront faxés au numéro spécifié dans le champ 'destinataire' de l'email.",
+				"default": "- Sélectionner un numéro -"
 			},
-			"defaultSettings": {
-				"nameExtension": "'s Faxbox",
-				"headerExtension": " Fax Printer"
+
+			"googlePrinter": {
+				"title": "Google Imprimante",
+				"text1": "Cliquez ",
+				"text2": " pour activer l'imprimante Google Cloud. Récupérez l'intalleur de l'imprimante ",
+				"link": "ici"
 			}
 		},
 		"vm_to_email": {

submodules/users/users.css

@@ -751,22 +751,35 @@
 	width: 220px;
 }
 
-.feature-popup-container[data-feature="faxing"] {
+/* Faxing Feature Popup */
+.feature-popup-container[data-feature='faxing'] {
 	overflow: hidden;
 }
 
-.feature-popup-container[data-feature="faxing"] #faxbox_form {
+.feature-popup-container[data-feature='faxing'] #faxbox_form {
 	margin-bottom: 0;
 }
 
-.feature-popup-container[data-feature="faxing"] #printer_link,
-.feature-popup-container[data-feature="faxing"] .controls span.text {
-	margin-left: 10px;
-	line-height: 30px;
+.feature-popup-container[data-feature='faxing'] #faxbox_form a {
+	color: #22a5ff;
+	text-decoration: underline;
 }
 
-.feature-popup-container[data-feature="faxing"] #fax_timezone_chosen {
-	margin-left: 10px;
+.feature-popup-container[data-feature='faxing'] #faxbox_form a:hover {
+	text-decoration: none;
+}
+
+.feature-popup-container[data-feature='faxing'] #faxbox_form p {
+	line-height: 40px;
+}
+
+.feature-popup-container[data-feature='faxing'] #faxbox_form strong {
+	color: #22a5ff;
+}
+
+.feature-popup-container[data-feature='faxing'] #faxbox_form .number-selector {
+	display: inline-block;
+	margin: 0 10px;
 }
 
 /* Change Password Popup */

submodules/users/users.js

@@ -1291,6 +1291,17 @@ define(function(require){
 									callback && callback(null, existingCallflow);
 								}
 							});
+						},
+						account: function(callback) {
+							self.callApi({
+								resource: 'account.get',
+								data: {
+									accountId: self.accountId
+								},
+								success: function(data, status) {
+									callback(null, data.data);
+								}
+							});
 						}
 					},
 					function(err, results) {
@@ -1578,6 +1589,7 @@ define(function(require){
 			var self = this,
 				data = self.usersFormatFaxingData(data),
 				featureTemplate = $(monster.template(self, 'users-feature-faxing', data)),
+				numberMirror = featureTemplate.find('.number-mirror'),
 				switchFeature = featureTemplate.find('.switch-state');
 
 			if ( !_.isEmpty(data.extra.listNumbers) ) {
@@ -1592,7 +1604,16 @@ define(function(require){
 			monster.pub('common.numberSelector.render', {
 				container: featureTemplate.find('.number-select'),
 				inputName: 'caller_id',
-				number: data.hasOwnProperty('faxbox') ? data.faxbox.caller_id : undefined
+				number: data.hasOwnProperty('faxbox') ? data.faxbox.caller_id : undefined,
+				removeCallback: function () {
+					numberMirror.text(self.i18n.active().users.faxing.emailToFax.default);
+				},
+				spareCallback: function (number) {
+					numberMirror.text(number);
+				},
+				buyCallback: function (number) {
+					numberMirror.text(number);
+				}
 			});
 
 			featureTemplate.find('.cancel-link').on('click', function() {
@@ -1612,12 +1633,18 @@ define(function(require){
 						}
 					};
 
-				if ( switchFeature.prop('checked') && newNumber ) {
-					self.usersUpdateFaxing(data, newNumber, function(results) {
-						args.userId = results.callflow.owner_id;
+				if ( switchFeature.prop('checked')) {
+					if (newNumber !== '') {
+						console.log('not empty');
+						// self.usersUpdateFaxing(data, newNumber, function(results) {
+						// 	args.userId = results.callflow.owner_id;
 
-						self.usersRender(args);
-					});
+						// 	self.usersRender(args);
+						// });
+					}
+					else {
+						console.log('is empty');
+					}
 				} else {
 					self.usersDeleteFaxing(data.user.id, function() {
 						args.userId = data.user.id;

views/users-feature-faxing.html

@@ -12,37 +12,34 @@
 	</div>
 
 	<div class="content{{#unless user.extra.mapFeatures.faxing.active}} disabled{{/unless}}">
-	{{#if faxbox}}
-		<p>{{replaceVar i18n.users.faxing.text this.faxbox.notifications.inbound.email.send_to}}</p>
-	{{else}}
-		<p>{{replaceVar i18n.users.faxing.text this.user.email }}</p>
-	{{/if}}
 		<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 number-select"></div>
-			</div>
-		{{#compare faxbox.cloud_state '===' 'registered'}}
-			<div class="control-group">
-				<label for="printer_link" class="control-label">{{ i18n.users.faxing.form.label.linkToPrinter }}</label>
-				<div class="controls">
-					<a id="printer_link" href="{{faxbox.cloud_connector_claim_url}}" target="_blank">{{faxbox.cloud_connector_claim_url}}</a>
-				</div>
-			</div>
-		{{/compare}}
-		{{#if faxbox.smtp_email_address}}
-			<div class="control-group">
-				<label for="stmp_email_address" class="control-label">{{ i18n.users.faxing.form.label.smtpEmailAddress }}</label>
-				<div class="controls">
-					<span class="text">{{faxbox.smtp_email_address}}</span>
-				</div>
-			</div>
-		{{/if}}
+			<fieldset>
+				<legend>{{i18n.users.faxing.faxToEmail.title}}</legend>
+				<p>
+					{{i18n.users.faxing.faxToEmail.text1}}
+					<span class="number-select"></span>
+					{{i18n.users.faxing.faxToEmail.text2}} <strong>{{user.email}}</strong>.
+				</p>
+			</fieldset>
+			<fieldset>
+				<legend>{{i18n.users.faxing.emailToFax.title}}</legend>
+				<p>
+					{{i18n.users.faxing.emailToFax.text1}} <strong>{{user.email}}</strong> {{i18n.users.faxing.emailToFax.text2}} 
+					<strong><span class="number-mirror">{{#if faxbox.caller_id}}{{faxbox.caller_id}}{{else}}{{i18n.users.faxing.emailToFax.default}}{{/if}}</span>@{{account.realm}}</strong> {{i18n.users.faxing.emailToFax.text3}}
+				</p>
+			</fieldset>
+			<fieldset>
+			{{#compare faxbox.cloud_state '===' 'registered'}}
+				<legend>{{i18n.users.faxing.googlePrinter.title}}</legend>
+				<p>
+					{{i18n.users.faxing.googlePrinter.text1}}
+					<a href="{{faxbox.caller_id}}" target="_blank">{{i18n.users.faxing.googlePrinter.link}}</a>
+					{{i18n.users.faxing.googlePrinter.text2}}
+					<a href="https://tools.google.com/dlpage/cloudprintdriver" target="_blank">{{i18n.users.faxing.googlePrinter.link}}</a>.
+				</p>
+			{{/compare}}
+			</fieldset>
 		</form>
-
-		{{#monsterText}}
-			<p>{{ i18n.users.faxing.helpOne }}<a href="https://tools.google.com/dlpage/cloudprintdriver" target="_blank">{{ i18n.users.faxing.helpTwo }}</a></p>
-		{{/monsterText}}
 	</div>
 
 	<div class="actions clearfix">