Merge pull request #4016 from JDonadio/fix/countdown-paypro-02

Fix remaining time paypro

public/views/modals/txp-details.html

@@ -54,7 +54,7 @@
       <div class="large-6 medium-6 small-6 columns text-right" ng-show="canSign">
         <button class="button primary round expand" ng-click="sign(tx)"
                                                     ng-style="{'background-color':color}"
-                                                    ng-disabled="loading || (paymentExpired && usePaypro)">
+                                                    ng-disabled="loading || paymentExpired">
           <i class="fi-check"></i>
           <span translate>Accept</span>
         </button>
@@ -149,7 +149,7 @@
       <li class="line-b p10" ng-if="!paymentExpired">
         <span class="text-gray" translate>Expires</span>
         <span class="right">
-          <time>{{expires * 1000 | amTimeAgo }}</time>
+          <time>{{expires}}</time>
         </span>
       </li>
       <li class="line-b p10">

public/views/walletHome.html

@@ -279,13 +279,13 @@
           <a class="text-gray size-12"
              ng-show="index.historyShowMore"
              ng-click="index.showMore()">
-            <span translate>Show more</span> 
+            <span translate>Show more</span>
             <span ng-if="!index.isSearching">
               ({{index.completeHistory.length - index.txHistory.length}})
-            </span> 
+            </span>
             <span ng-if="index.isSearching">
               ({{index.result.length - index.txHistorySearchResults.length}})
-            </span> 
+            </span>
             <i class="icon-arrow-down4"></i>
           </a>
         </div>
@@ -394,7 +394,7 @@
           </a>
           <div ng-show="!home.paymentExpired && home._paypro">
             <span translate>Payment expires</span>
-            <time> {{home.timeToExpire * 1000 | amTimeAgo}}</time>
+            <time> {{home.remainingTimeStr}}</time>
           </div>
         </h4>
         <div class="camera-icon" ng-show="index.isComplete">

src/js/controllers/walletHome.js

@@ -336,23 +336,26 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
           }, function(err, paypro) {
             if (err) return;
             tx.paypro = paypro;
-            $scope.paymentExpired = tx.paypro.expires <= now;
-            if (!$scope.paymentExpired)
-              paymentTimeControl(tx.paypro.expires);
-            $scope.$apply();
+            paymentTimeControl(tx.paypro.expires);
           });
         }
       };
 
-      function paymentTimeControl(timeToExpire) {
-        $scope.expires = timeToExpire;
-        var countDown = $interval(function() {
-          if ($scope.expires <= now) {
-            $scope.paymentExpired = true;
-            $interval.cancel(countDown);
-          }
-          $scope.expires--;
+      function paymentTimeControl(expirationTime) {
+        $scope.paymentExpired = false;
+        var countDown;
+        setExpirationTime();
+        countDown = $interval(function() {
+          setExpirationTime();
         }, 1000);
+
+        function setExpirationTime() {
+          if (moment().isAfter(expirationTime * 1000)) {
+            $scope.paymentExpired = true;
+            if (countDown) $interval.cancel(countDown);
+          }
+          $scope.expires = moment(expirationTime * 1000).fromNow();
+        };
       };
 
       lodash.each(['TxProposalRejectedBy', 'TxProposalAcceptedBy', 'transactionProposalRemoved', 'TxProposalRemoved', 'NewOutgoingTx', 'UpdateTx'], function(eventName) {
@@ -1107,26 +1110,25 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
     }, 1);
   };
 
-  function _paymentTimeControl(timeToExpire) {
-    var now = Math.floor(Date.now() / 1000);
-
-    if (timeToExpire <= now) {
-      setExpiredPaymentValues();
-      return;
-    }
-
-    self.timeToExpire = timeToExpire;
-    var countDown = $interval(function() {
-      if (self.timeToExpire <= now) {
-        setExpiredPaymentValues();
-        $interval.cancel(countDown);
-      }
-      self.timeToExpire--;
+  function _paymentTimeControl(expirationTime) {
+    self.paymentExpired = false;
+    var countDown;
+    setExpirationTime();
+    countDown = $interval(function() {
+      setExpirationTime();
     }, 1000);
 
+    function setExpirationTime() {
+      if (moment().isAfter(expirationTime * 1000)) {
+        setExpiredPaymentValues();
+        if (countDown) $interval.cancel(countDown);
+      }
+      self.remainingTimeStr = moment(expirationTime * 1000).fromNow();
+    };
+
     function setExpiredPaymentValues() {
       self.paymentExpired = true;
-      self.timeToExpire = null;
+      self.remainingTimeStr = null;
       self._paypro = null;
       self.error = gettext('Cannot sign: The payment request has expired');
     };