UI-1354: Change wording of 'Email to Fax' and add helper so the user understands better

i18n/en-US.json

@@ -521,15 +521,21 @@
 			"__version": "v3.20_s4",
 			"faxToEmail": {
 				"title": "Fax to Email",
-				"text1": "Faxes to",
-				"text2": "will be converted to email and sent to"
+				"text1": "Faxes sent to",
+				"text2": "will be converted to emails and sent to"
 			},
 			"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 -"
+				"text1": "Emails sent to ",
+				"text2": " with a PDF (or TIFF) attachment will fax the attachment to ",
+				"text3": "The email must come from ",
+				"default": "{ destination number }",
+				"help": {
+					"showHelp": "Show help",
+					"hideHelp": "Hide help",
+					"question": "What number do you want to fax to?",
+					"placeholder": "destination number"
+				}
 			},
 
 			"googlePrinter": {

i18n/fr-FR.json

@@ -497,7 +497,13 @@
 				"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 -"
+				"default": "{ numéro de destination }",
+				"help": {
+					"showHelp": "Montrer l'aide",
+					"hideHelp": "Cacher l'aider",
+					"question": "À quel numéro voulez-vous envoyer le fax ?",
+					"placeholder": "numéro de destination"
+				}
 			},
 
 			"googlePrinter": {

submodules/users/users.css

@@ -770,10 +770,10 @@
 }
 
 .feature-popup-container[data-feature='faxing'] #faxbox_form p {
-	line-height: 40px;
+	line-height: 30px;
 }
 
-.feature-popup-container[data-feature='faxing'] #faxbox_form strong {
+.feature-popup-container[data-feature='faxing'] #faxbox_form .monster-primary-color {
 	color: #22a5ff;
 }
 
@@ -782,6 +782,10 @@
 	margin: 0 10px;
 }
 
+.feature-popup-container[data-feature='faxing'] #faxbox_form #helper_content {
+	margin-top: 10px;
+}
+
 /* Change Password Popup */
 .smart-edit-popup {
 	width: 430px;

submodules/users/users.js

@@ -1601,27 +1601,36 @@ define(function(require){
 				monster.ui.alert('error', self.i18n.active().users.errorNumberFaxing);
 			}
 
+			switchFeature.on('change', function() {
+				$(this).prop('checked') ? featureTemplate.find('.content').slideDown() : featureTemplate.find('.content').slideUp();
+			});
+
 			monster.pub('common.numberSelector.render', {
 				container: featureTemplate.find('.number-select'),
 				inputName: 'caller_id',
-				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);
+				number: data.hasOwnProperty('faxbox') ? data.faxbox.caller_id : undefined
+			});
+
+			featureTemplate.find('#destination_number').on('keyup', function() {
+				if ($(this).val() === '') {
+					featureTemplate.find('.number-mirror').text(self.i18n.active().users.faxing.emailToFax.default);
+				}
+				else {
+					featureTemplate.find('.number-mirror').text($(this).val());
 				}
 			});
 
-			featureTemplate.find('.cancel-link').on('click', function() {
-				popup.dialog('close').remove();
+			featureTemplate.find('#helper_content').on('shown', function() {
+				$(this).siblings('a').find('.text').text(self.i18n.active().users.faxing.emailToFax.help.hideHelp);
+				$(this).find('#destination_number').focus();
 			});
 
-			switchFeature.on('change', function() {
-				$(this).prop('checked') ? featureTemplate.find('.content').slideDown() : featureTemplate.find('.content').slideUp();
+			featureTemplate.find('#helper_content').on('hidden', function() {
+				$(this).siblings('a').find('.text').text(self.i18n.active().users.faxing.emailToFax.help.showHelp);
+			});
+
+			featureTemplate.find('.cancel-link').on('click', function() {
+				popup.dialog('close').remove();
 			});
 
 			featureTemplate.find('.save').on('click', function() {

views/users-feature-faxing.html

@@ -18,15 +18,53 @@
 				<p>
 					{{i18n.users.faxing.faxToEmail.text1}}
 					<span class="number-select"></span>
-					{{i18n.users.faxing.faxToEmail.text2}} <strong>{{user.email}}</strong>.
+					{{i18n.users.faxing.faxToEmail.text2}} <strong class="monster-primary-color">{{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}}
+					{{i18n.users.faxing.emailToFax.text1}}
+					<strong>
+						<em>
+							<span class="number-mirror">
+							{{#if faxbox.caller_id}}
+								{{faxbox.caller_id}}
+							{{else}}
+								{{i18n.users.faxing.emailToFax.default}}
+							{{/if}}
+							</span>
+						</em>
+					</strong>
+					<strong class="monster-primary-color">@{{account.realm}}</strong>
+					{{i18n.users.faxing.emailToFax.text2}}
+					<strong>
+						<em>
+							<span class="number-mirror">
+							{{#if faxbox.caller_id}}
+								{{faxbox.caller_id}}
+							{{else}}
+								{{i18n.users.faxing.emailToFax.default}}
+							{{/if}}
+							</span>
+						</em>
+					</strong>.
+					<br>
+					{{i18n.users.faxing.emailToFax.text3}}
+					<strong class="monster-primary-color">{{user.email}}</strong>.
 				</p>
+				<div class="helper">
+					<a href="javascript:void(0);" id="helper_link" data-toggle="collapse" data-target="#helper_content">
+						<span class="text">{{i18n.users.faxing.emailToFax.help.showHelp}}</span>
+					</a>
+					<div id="helper_content" class="collapse">
+						<div class="control-group">
+							<label for="destination_number" class="control-label">{{i18n.users.faxing.emailToFax.help.question}}</label>
+							<div class="controls">
+								<input type="text" id="destination_number" maxlength="16" placeholder="{{i18n.users.faxing.emailToFax.help.placeholder}}">
+							</div>
+						</div>
+					</div>
 			</fieldset>
 			<fieldset>
 			{{#compare faxbox.cloud_state '===' 'registered'}}