FS-872 Reviewed text content of tour steps

Author: otsakir

src/main/webapp/modules/templates/tour-splash-call-success.html

@@ -5,9 +5,10 @@
                 <button type="button" class="close" ng-click="status='closed'; $hide()">×</button>
             </div>
             <div class="modal-body">
-                <h3 class="modal-title">You are ready!</h3>
+                <h3 class="modal-title">Congratulations !</h3>
                 <div class="happy-guy"></div>
-                <div class="message">Go back to Console and build more exciting Applications!</div>
+                <div class="message">You built your first application. You can now go back to Console and play with the
+                    Visual Designer to build more exciting Applications! Don’t forget to visit our <a href="https://www.restcomm.com/docs/" target="_blank">documentation</a> too!</div>
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-default" ng-click="status='ok'; $hide()">Back to console</button>

src/main/webapp/modules/templates/tour-splash-message-success.html

@@ -5,9 +5,10 @@
                 <button type="button" class="close" ng-click="status='closed'; $hide()">×</button>
             </div>
             <div class="modal-body">
-                <h3 class="modal-title">You are ready!</h3>
+                <h3 class="modal-title">Congratulations !</h3>
                 <div class="happy-guy"></div>
-                <div class="message">Go back to Console and build more exciting Applications!</div>
+                <div class="message">You built your first application. You can now go back to Console and play with the
+                    Visual Designer to build more exciting Applications! Don’t forget to visit our <a href="https://www.restcomm.com/docs/" target="_blank">documentation</a> too!</div>
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-default" ng-click="status='ok'; $hide()">Back to console</button>

src/main/webapp/resources/css/olympus.css

@@ -399,6 +399,9 @@ form[role=login] button:enabled:hover {
 .tour-modal .modal-body {
   text-align: center;
 }
+.tour-modal .modal-body a {
+  color: #23527c;
+}
 .tour-modal .modal-header .close {
   color: var(--takeatour-text-color);
 }

src/main/webapp/resources/js/directives.js

@@ -169,8 +169,8 @@ olyDirectives.directive('tourStep', function($compile, tourManager, $interval, $
     link: function postLink(scope, element,attrs) {
       var stepInfo = tourManager.getStep(attrs.tourStep, attrs.tourName);
       scope.tourStep = stepInfo;
-      console.log('creating tour step', attrs.tourStep );
-      console.log('visibility: ', attrs.tourStep, elementIsVisible(element), element.length);
+      //console.log('creating tour step', attrs.tourStep );
+      //console.log('visibility: ', attrs.tourStep, elementIsVisible(element), element.length);
 
       // start monitoring visibility of step target.Called when tourStep.active turns true
       stepInfo.visible = undefined;
@@ -181,7 +181,7 @@ olyDirectives.directive('tourStep', function($compile, tourManager, $interval, $
       var myPopover;
       var watchesToClear = [];
       function activate() {
-        console.log('will start monitoring visibility for ', attrs.tourStep)
+        //console.log('will start monitoring visibility for ', attrs.tourStep)
         clearIntervalHandle = $interval(function () {
           if (elementIsVisible(element)) {
             if (!stepInfo.visible) {
@@ -191,14 +191,12 @@ olyDirectives.directive('tourStep', function($compile, tourManager, $interval, $
               }
               myPopover.show();
               stepInfo.visible = true;
-              console.log('set visibility to ', stepInfo.visible);
             }
           } else {
             if (myPopover && stepInfo.visible) {
               myPopover.hide();
               myPopover.destroy();
               stepInfo.visible = false;
-              console.log('set visibility to ', stepInfo.visible);
             }
           }
         },500);
@@ -256,7 +254,7 @@ olyDirectives.directive('touring', function($compile, tourManager) {
       scope.tourManager = tourManager;
 
       scope.$watch("tourManager.countActiveSteps()", function (newVal, oldVal) {
-        console.warn('active step count: ', newVal)
+        //console.warn('active step count: ', newVal)
         if (newVal === 0) {
           tourManager.onTourAborted()
         }
@@ -294,7 +292,7 @@ olyDirectives.directive('backdrop', function($interval, backdropService) {
        if (!rectPadding.bottom) rectPadding.bottom = 0;
 
        scope.$watch(attrs.backdrop, function (newVal, oldVal) {
-         console.log((scope.tourStep.name ? (scope.tourStep.name+" "): "") + 'backdrop: ', newVal)
+         //console.log((scope.tourStep.name ? (scope.tourStep.name+" "): "") + 'backdrop: ', newVal)
          if (newVal && !scope.backdropActive) {
            // we need to activate backdrop
            activateBackdrop();

src/main/webapp/resources/js/takeatour.js

@@ -6,7 +6,7 @@ angular.module('mcWebRTC').run(function (tourManager, $rootScope, $location) {
   tourManager.addTour("main");
   tourManager.registerStep("step-enter-creds", {
     name:'step-enter-creds',
-    body:"<p>This is the WebRTC Demo sign page.</p> <p>For Username type the <em>user</em>  part of your account email. For example, for <em><strong>alice</strong>@company.com</em> just type <em><strong>alice</strong></em>.</p> <p>The account password will work as it is.</p>",
+    body:"<p>This is the WebRTC Demo sign page.</p> <p>For <strong>Username</strong>, please enter the <em>user</em>  part of your account email. For example, for <em><strong>alice</strong>@company.com</em> just type <em><strong>alice</strong></em>.</p> <p>For <strong>password</strong>, you can reuse your account password.</p>",
     order: 1,
     placement: 'right',
     customClasses: "popover-medium"
@@ -21,22 +21,22 @@ angular.module('mcWebRTC').run(function (tourManager, $rootScope, $location) {
 
   tourManager.registerStep('step-enter-contact-address', {
     name: 'step-enter-contact-address',
-    body: "<p>Paste your number here and optionally give it a name. Then click 'Add contact'.</p> <p><strong>Hint</strong>: If you don't remember it, your number is {{tourManager.context.phoneNumber}}.</p>",
+    body: "<p>Paste the number you previously mapped your application to and give it a name. Then click <strong>Add contact</strong>.</p> <p><strong>Hint</strong>: If you don't remember it, your number is {{tourManager.context.phoneNumber}}.</p>",
     order: 4,
     placement: 'right'
   }, "main");
 
   tourManager.registerStep('step-make-the-call', {
     name: 'step-make-the-call',
-    body: '<p>Time to call your number and test your application.</p> <p>Click on the phone button bellow to initiate the call.</p>',
+    body: '<p>You can now call your number and test your application by clicking on the phone button below to initiate the call.</p>',
     order: 5,
     placement: 'top-right',
     //done: [{byExpression: "inCall && inCall.intStatus === 'ESTABLISHED'", doNext: 'tourManager.stopTour(); showTourSplash();', delay: 2000}]
   }, "main");
 
   tourManager.registerStep('step-send-the-message', {
     name: 'step-send-the-message',
-    body: '<p>Time to send a message to your application.</p> <p>Type a messsage and click on the button below to send it.</p>',
+    body: '<p>You can now send an SMS to your number and test your application. Type the message and click on the message button below.</p>',
     order: 5,
     placement: 'top-left',
   }, "main");