backup needed modal

public/views/includes/backupNeededPopup.html

@@ -0,0 +1,27 @@
+<div id="backup-needed-modal" class="popup-modal">
+  <div class="popup-modal-header popup-modal-header-warning">
+    <div class="popup-modal-header-img-warning popup-modal-header-img"></div>
+  </div>
+  <div class="popup-modal-content popup-modal-content-warning">
+    <div class="text-center">
+      <h5 translate>Backup Needed</h5>
+      <p translate>Now is a good time to backup your wallet. If this device is lost, it is impossible to access your funds without a backup.</p>
+      <div class="row">
+        <div class="col">
+          <button
+            class="button button-clear expand"
+            ng-click="closeBackupNeededModal()"
+            translate>Not now
+          </button>
+        </div>
+        <div class="col">
+          <button
+            class="button button-clear expand"
+            ng-click="goToBackupFlow()"
+            translate>Backup wallet now
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

public/views/tab-receive.html

@@ -31,7 +31,12 @@
         </div>
       </article>
       <article ng-if="wallet.isComplete()">
-        <div class="row">
+        <div class="row backup" ng-click="openBackupNeededPopup()">
+          <div class="m15t text-center col center-block">
+            <i class="icon ion-alert"></i><span translate>Wallet not backed up</span><i class="icon ion-ios-arrow-thin-right"></i>
+          </div>
+        </div>
+        <div class="row qr">
           <div class="m15t text-center col center-block" copy-to-clipboard="addr">
             <qrcode ng-if="addr" size="220" data="bitcoin:{{addr}}"></qrcode>
             <div ng-if="!addr" style="height:220px; width:220px; margin:auto; background: white; padding-top: 20%;">

src/js/controllers/backup.js

@@ -49,15 +49,6 @@ angular.module('copayApp.controllers').controller('backupController',
       }, 10);
     };
 
-    $scope.goBack = function() {
-      if ($scope.step == 1) {
-        if ($stateParams.fromOnboarding) $state.go('onboarding.backupRequest');
-        else $state.go('wallet.preferences');
-      } else {
-        $scope.goToStep($scope.step - 1);
-      }
-    };
-
     var backupError = function(err) {
       ongoingProcess.set('validatingWords', false);
       $log.debug('Failed to verify backup: ', err);
@@ -198,6 +189,7 @@ angular.module('copayApp.controllers').controller('backupController',
         walletId: $stateParams.walletId,
         fromOnboarding: true
       });
+      else if ($stateParams.fromReceive) $state.go('tabs.receive');
       else $state.go('tabs.preferences', {
         walletId: $stateParams.walletId
       });

src/js/controllers/tab-receive.js

@@ -71,4 +71,28 @@ angular.module('copayApp.controllers').controller('tabReceiveController', functi
     }, 100);
   };
 
+  $scope.openBackupNeededPopup = function() {
+    $ionicModal.fromTemplateUrl('views/includes/backupNeededPopup.html', {
+      scope: $scope,
+      backdropClickToClose: false,
+      hardwareBackButtonClose: false
+    }).then(function(modal) {
+      $scope.BackupNeededPopup = modal;
+      $scope.BackupNeededPopup.show();
+    });
+  };
+
+  $scope.closeBackupNeededModal = function() {
+    $scope.BackupNeededPopup.hide();
+    $scope.BackupNeededPopup.remove();
+  };
+
+  $scope.goToBackupFlow = function() {
+    $scope.BackupNeededPopup.hide();
+    $scope.BackupNeededPopup.remove();
+    $state.go('tabs.receive.backup', {
+      fromReceive: true,
+      walletId: $scope.wallet.credentials.walletId
+    });
+  };
 });

src/js/routes.js

@@ -236,7 +236,7 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr
      *
      */
 
-      .state('tabs.send.amount', {
+    .state('tabs.send.amount', {
         url: '/amount/:isWallet/:toAddress/:toName/:toEmail',
         views: {
           'tab-send@tabs': {
@@ -551,7 +551,7 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr
 
     /*
      *
-     *TO DO
+     * Copayers
      *
      */
 
@@ -565,6 +565,22 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr
       }
     })
 
+    /*
+     *
+     * Back flow from receive
+     *
+     */
+
+    .state('tabs.receive.backup', {
+      url: '/backup/:fromReceive/:walletId',
+      views: {
+        'tab-receive@tabs': {
+          controller: 'backupController',
+          templateUrl: 'views/backup.html'
+        }
+      }
+    })
+
     /*
      *
      * Onboarding

src/sass/views/includes/modals/modals.scss

@@ -9,7 +9,12 @@
   transform: translate(-50%, -50%);
   border-radius: .25rem;
   &-header {
-    background: rgb(1, 209, 162);
+    &-success {
+      background: rgb(1, 209, 162);
+    }
+    &-warning {
+      background: orange;
+    }
     padding: 1rem;
     border-radius: .25rem .25rem 0 0;
     min-height: 120px;
@@ -26,6 +31,12 @@
       background-size: contain;
       margin-top: .3rem;
     }
+    &-img-warning {
+      background-image: url('../img/onboarding-success.svg');
+      height: 6rem;
+      background-size: contain;
+      margin-top: .3rem;
+    }
   }
   &-content {
     padding: .5rem .8rem;
@@ -42,11 +53,16 @@
       font-weight: 200;
     }
   }
-  &-content-success{
+  &-content-success {
     button{
       color:rgb(23, 174, 140) !important;
     }
   }
+  &-content-warning {
+    button{
+      color: orange !important;
+    }
+  }
 }
 
 .modal-backdrop.active {

src/sass/views/tab-receive.scss

@@ -43,6 +43,16 @@
       }
       &-gen-address {}
     }
+    .qr {
+      padding: 30px;
+    }
+    .backup {
+      background-color: orange;
+      color: #fff;
+      i {
+        padding: 10px;
+      }
+    }
   }
   #wallets {
     position: relative;