Merge pull request #5037 from gabrielbazan7/feat/icons-feedback

adding icon to feedback flow

src/js/controllers/feedback/rateApp.js

@@ -1,6 +1,6 @@
 'use strict';
 
-angular.module('copayApp.controllers').controller('rateAppController', function($scope, $state, $stateParams, externalLinkService, configService, gettextCatalog, platformInfo) {
+angular.module('copayApp.controllers').controller('rateAppController', function($scope, $state, $stateParams, lodash, externalLinkService, configService, gettextCatalog, platformInfo, feedbackService, ongoingProcess) {
   $scope.score = parseInt($stateParams.score);
   var isAndroid = platformInfo.isAndroid;
   var isIOS = platformInfo.isIOS;
@@ -8,9 +8,24 @@ angular.module('copayApp.controllers').controller('rateAppController', function(
   var config = configService.getSync();
 
   $scope.skip = function() {
-    $state.go('feedback.complete', {
+
-      score: $scope.score,
+    var dataSrc = {
-      skipped: true
+      "Email": lodash.values(config.emailFor)[0] || ' ',
+      "Feedback": ' ',
+      "Score": $stateParams.score
+    };
+
+    ongoingProcess.set('sendingFeedback', true);
+    feedbackService.send(dataSrc, function(err) {
+      ongoingProcess.set('sendingFeedback', false);
+      if (err) {
+        popupService.showAlert(gettextCatalog.getString('Error'), gettextCatalog.getString('Could not send feedback'));
+        return;
+      }
+      $state.go('feedback.complete', {
+        score: $stateParams.score,
+        skipped: true
+      });
     });
   };
 

src/js/controllers/feedback/rateCard.js

@@ -3,6 +3,7 @@
 angular.module('copayApp.controllers').controller('rateCardController', function($scope, $state, $timeout, gettextCatalog, platformInfo, storageService) {
 
   $scope.isCordova = platformInfo.isCordova;
+  $scope.score = 0;
 
   $scope.goFeedbackFlow = function() {
     if ($scope.isModal) {
@@ -52,12 +53,14 @@ angular.module('copayApp.controllers').controller('rateCardController', function
       storageService.getFeedbackInfo(function(error, info) {
         var feedbackInfo = JSON.parse(info);
         feedbackInfo.sent = true;
-        storageService.setFeedbackInfo(JSON.stringify(feedbackInfo), function() {});
+        storageService.setFeedbackInfo(JSON.stringify(feedbackInfo), function() {
+          $scope.showRateCard.value = false;
+        });
       });
     }
     $timeout(function() {
       $scope.$apply();
-    })
+    }, 100);
   }
 
 });

src/sass/views/feedback/complete.scss

@@ -19,10 +19,22 @@
   }
   .subtitle {
     padding: 10px 30px 20px 40px;
-    .image {
+  }
-      text-align: center;
+  .icon-svg > img {
-      padding: 30px;
+    height: 16rem;
-    }
+    width: 16rem;
+    margin: 10px;
+  }
+  .socialsharing-icon {
+    display: inline-block;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+  }
+  .addressbook-icon-svg {
+    display: inline-block;
+    width: 50px;
+    height: 50px;
   }
   .share-buttons {
     bottom: 0;

src/sass/views/feedback/rateApp.scss

@@ -4,11 +4,16 @@
     margin: 10px;
     color: #667;
   }
+  .icon-svg > img {
+    width: 80px;
+    height: 80px;
+    margin-top: 15px;
+  }
   .title {
     font-size: 20px;
     font-weight: bold;
     color: $dark-gray;
-    margin: 40px 10px;
+    margin: 40px 50px 10px;
     text-align: center;
   }
   .subtitle {

src/sass/views/feedback/rateCard.scss

@@ -1,20 +1,12 @@
 #rate-card {
-  .stars {
+  .row {
-    display: flex;
+    border: none;
-    border-bottom: none;
+  }
-    .button {
+  .row.row-margin{
-      background-color: #fff;
+    margin: 20px 0px 20px 0px;
-      outline: none;
+  }
-      border: none;
+  .item-icon-right {
-      height:10px;
+    margin: 0;
-      width:10px;
-    }
-    .gold {
-      color: #ffd700;
-    }
-    .subtle-gray {
-      color: $subtle-gray;
-    }
   }
   .feedback-flow-button {
     padding: 20px;

src/sass/views/feedback/send.scss

@@ -1,5 +1,8 @@
 #send-feedback {
   background-color: #ffffff;
+  .row {
+    border: none;
+  }
   .skip {
     margin: 20px 20px 10px;
     color: #667;
@@ -11,18 +14,6 @@
     font-weight: bold;
     color: $dark-gray;
   }
-  .star {
-    a {
-      font-size: 25px;
-      padding: 20px;
-      .gold {
-        color: #ffd700;
-      }
-      .subtle-gray {
-        color: $subtle-gray;
-      }
-    }
-  }
   .comment {
     padding: 20px;
     font-size: 1rem;

www/views/feedback/complete.html

@@ -4,14 +4,32 @@
       <a ui-sref="tabs.home"><i class="icon ion-ios-close-empty close-home-tip"></i></a>
     </div>
     <div ng-show="skipped && isCordova">
-      <div class="title" translate>Invite friends to BitPay Wallet!</div>
+      <div ng-show="score > 3">
-      <div>
+        <div class="title" translate>Invite friends to BitPay Wallet!</div>
-        <i class="icon zero-state-icon">
+        <div class="text-center">
-          <img src="img/address-book-add.svg"/>
+          <i class="icon addressbook-icon-svg">
-        </i>
+            <img src="img/address-book-add.svg"/>
+          </i>
+        </div>
+        <div class="text-center">
+          <span translate>Share the love by inviting your friends.</span>
+        </div>
       </div>
-      <div class="text-center">
+      <div ng-show="score <= 3">
-        <span translate>Share the love by inviting your friends.</span>
+        <div class="title" translate>Thank you!</div>
+        <div class="subtitle">
+          <span translate>A member of the team will review your feedback as soon as possible.</span>
+        </div>
+        <div class="subtitle" ng-if="score <= 3 || !isCordova">
+          <span translate>If you have additional feedback, please let us know by tapping the "Send feedback" option in the Settings tab.</span>
+        </div>
+        <div ng-if="score <= 3 || !isCordova">
+          <div class="text-center">
+            <i class="icon icon-svg">
+              <img src="img/illustration-send-feedback.png"/>
+            </i>
+          </div>
+        </div>
       </div>
     </div>
     <div ng-show="!skipped || !isCordova">
@@ -21,9 +39,11 @@
       </div>
       <div class="subtitle" ng-if="score <= 3 || !isCordova">
         <span translate>If you have additional feedback, please let us know by tapping the "Send feedback" option in the Settings tab.</span>
-        <div class="image">
+      </div>
-          <i class="icon zero-state-icon">
+      <div ng-if="score <= 3 || !isCordova">
-            <img src="img/address-book-add.svg"/>
+        <div class="text-center">
+          <i class="icon icon-svg">
+            <img src="img/illustration-send-feedback.png"/>
           </i>
         </div>
       </div>
@@ -35,40 +55,40 @@
       <div class="ng-hide" ng-show="socialsharing" ng-if="score >= 4">
         <div class="row">
           <div class="ng-hide" ng-show="facebook" ng-click="shareFacebook()">
-            <i class="icon zero-state-icon">
+            <i class="icon socialsharing-icon">
-              <img src="img/address-book-add.svg"/>
+              <img src="img/social-icons/ico-social-facebook.svg"/>
             </i>
             <span>Facebook</span>
           </div>
           <div class="ng-hide" ng-show="twitter" ng-click="shareTwitter()">
-            <i class="icon zero-state-icon">
+            <i class="icon socialsharing-icon">
-              <img src="img/address-book-add.svg"/>
+              <img src="img/social-icons/ico-social-twitter.svg"/>
             </i>
             <span>Twitter</span>
           </div>
           <div class="ng-hide" ng-show="googleplus" ng-click="shareGooglePlus()">
-            <i class="icon zero-state-icon">
+            <i class="icon socialsharing-icon">
-              <img src="img/address-book-add.svg"/>
+              <img src="img/social-icons/ico-social-googleplus.svg"/>
             </i>
             <span>Google+</span>
           </div>
         </div>
         <div class="row">
           <div class="ng-hide" ng-show="email" ng-click="shareEmail()">
-            <i class="icon zero-state-icon">
+            <i class="icon socialsharing-icon">
-              <img src="img/address-book-add.svg"/>
+              <img src="img/social-icons/ico-social-email.svg"/>
             </i>
             <span>Email</span>
           </div>
           <div class="ng-hide" ng-show="whatsapp" ng-click="shareWhatsapp()">
-            <i class="icon zero-state-icon">
+            <i class="icon socialsharing-icon">
-              <img src="img/address-book-add.svg"/>
+              <img src="img/social-icons/ico-social-whatsapp.svg"/>
             </i>
             <span>Whatsapp</span>
           </div>
           <div ng-click="shareMessage()">
-            <i class="icon zero-state-icon">
+            <i class="icon socialsharing-icon">
-              <img src="img/address-book-add.svg"/>
+              <img src="img/social-icons/ico-social-message.svg"/>
             </i>
             <span>Message</span>
           </div>

www/views/feedback/rateApp.html

@@ -4,15 +4,15 @@
     <div class="title">
       <span translate>Thank you!</span>
       <div>
-        <i class="icon zero-state-icon">
+        <i class="icon icon-svg">
-          <img src="img/address-book-add.svg"/>
+          <img src="img/ico-positive-feedback.svg" class="bg"/>
         </i>
       </div>
     </div>
-    <div class="subtitle">
+    <div class="subtitle text-center">
         <span translate>5-star ratings help us get BitPay Wallet into more hands, and more users means more resoucers can be committed to the app!</span>
     </div>
-    <div class="subtitle">
+    <div class="subtitle text-center">
       <span class="text-bold" translate>Would you be willing to rate BitPay Wallet in the app store?</span>
     </div>
     <div class="buttons">

www/views/feedback/rateCard.html

@@ -3,12 +3,37 @@
     <span translate>How do you like BitPay Wallet?</span>
     <a ng-click="hideCard()" ><i class="icon ion-ios-close-empty close-home-tip"></i></a>
   </div>
-  <div class="stars item item-sub">
+  <div class="row item item-sub" ng-class="{'row-margin': isModal}">
-    <button class="button icon ion-android-star" ng-click="setScore(1)" ng-class="{'gold': 1 <= score, 'subtle-gray': 1 > score}"></button>
+    <div class="col col-20">
-    <button class="button icon ion-android-star" ng-click="setScore(2)" ng-class="{'gold': 2 <= score, 'subtle-gray': 2 > score}"></button>
+      <i class="icon icon-svg" ng-click="setScore(1)">
-    <button class="button icon ion-android-star" ng-click="setScore(3)" ng-class="{'gold': 3 <= score, 'subtle-gray': 3 > score}"></button>
+        <img ng-if="1 <= score" src="img/ico-star-filled.svg"/>
-    <button class="button icon ion-android-star" ng-click="setScore(4)" ng-class="{'gold': 4 <= score, 'subtle-gray': 4 > score}"></button>
+        <img ng-if="1 > score" src="img/ico-star.svg"/>
-    <button class="button icon ion-android-star" ng-click="setScore(5)" ng-class="{'gold': 5 ==  score, 'subtle-gray': 5 > score}"></button>
+      </i>
+    </div>
+    <div class="col col-20">
+      <i class="icon icon-svg" ng-click="setScore(2)">
+        <img ng-if="2 <= score" src="img/ico-star-filled.svg"/>
+        <img ng-if="2 > score" src="img/ico-star.svg"/>
+      </i>
+    </div>
+    <div class="col col-20">
+      <i class="icon icon-svg" ng-click="setScore(3)">
+        <img ng-if="3 <= score" src="img/ico-star-filled.svg"/>
+        <img ng-if="3 > score" src="img/ico-star.svg"/>
+      </i>
+    </div>
+    <div class="col col-20">
+      <i class="icon icon-svg" ng-click="setScore(4)">
+        <img ng-if="4 <= score" src="img/ico-star-filled.svg"/>
+        <img ng-if="4 > score" src="img/ico-star.svg"/>
+      </i>
+    </div>
+    <div class="col col-20">
+      <i class="icon icon-svg" ng-click="setScore(5)">
+        <img ng-if="5 ==  score" src="img/ico-star-filled.svg"/>
+        <img ng-if="5 > score" src="img/ico-star.svg"/>
+      </i>
+    </div>
   </div>
   <div class="feedback-flow-button" ng-if="button_title">
     <button type="submit" class="button button-standard button-primary" ng-click="goFeedbackFlow()">

www/views/feedback/send.html

@@ -4,12 +4,37 @@
     <div class="title">
       <span>{{reaction}}</span>
     </div>
-    <div class="star">
+    <div class="row item item-sub">
-      <a><i ng-class="{'gold': 1 <= score, 'subtle-gray': 1 > score}" class="icon ion-android-star"></i></a>
+      <div class="col col-10">
-      <a><i ng-class="{'gold': 2 <= score, 'subtle-gray': 2 > score}" class="icon ion-android-star"></i></a>
+        <i class="icon icon-svg" ng-click="setScore(1)">
-      <a><i ng-class="{'gold': 3 <= score, 'subtle-gray': 3 > score}" class="icon ion-android-star"></i></a>
+          <img ng-if="1 <= score" src="img/ico-star-filled.svg"/>
-      <a><i ng-class="{'gold': 4 <= score, 'subtle-gray': 4 > score}" class="icon ion-android-star"></i></a>
+          <img ng-if="1 > score" src="img/ico-star.svg"/>
-      <a><i ng-class="{'gold': 5 == score, 'subtle-gray': 5 > score}" class="icon ion-android-star"></i></a>
+        </i>
+      </div>
+      <div class="col col-10">
+        <i class="icon icon-svg" ng-click="setScore(2)">
+          <img ng-if="2 <= score" src="img/ico-star-filled.svg"/>
+          <img ng-if="2 > score" src="img/ico-star.svg"/>
+        </i>
+      </div>
+      <div class="col col-10">
+        <i class="icon icon-svg" ng-click="setScore(3)">
+          <img ng-if="3 <= score" src="img/ico-star-filled.svg"/>
+          <img ng-if="3 > score" src="img/ico-star.svg"/>
+        </i>
+      </div>
+      <div class="col col-10">
+        <i class="icon icon-svg" ng-click="setScore(4)">
+          <img ng-if="4 <= score" src="img/ico-star-filled.svg"/>
+          <img ng-if="4 > score" src="img/ico-star.svg"/>
+        </i>
+      </div>
+      <div class="col col-10">
+        <i class="icon icon-svg" ng-click="setScore(5)">
+          <img ng-if="5 ==  score" src="img/ico-star-filled.svg"/>
+          <img ng-if="5 > score" src="img/ico-star.svg"/>
+        </i>
+      </div>
     </div>
     <div class="comment">
       <span translate>{{comment}}</span>