Adds support for 0, 2, 3 and 8 decimal places and locale commas and decimals

src/js/directives/amount.js

@@ -1,21 +1,76 @@
 'use strict';
+
+/**
+ * @desc amount directive that can be used to display formatted financial values
+ * @example <amount value="12.49382901" currency="BCH"></amount>
+ */
 angular.module('bitcoincom.directives')
-    .directive('amount', [
-    '$timeout',
-    function($timeout) {
-        return {
-            restrict: 'E',
-            scope: {
-              value: '=',
-              currency: '='
-            },
-            templateUrl: 'views/includes/amount.html',
-            controller: ['$scope', function($scope) {
-                var valueFormatted = parseFloat($scope.value).toFixed(8);
-                $scope.start = valueFormatted.slice(0, -5);
-                $scope.middle = valueFormatted.slice(-5, -2);
-                $scope.end = valueFormatted.substr(valueFormatted.length - 2);
-            }]
+  .directive('amount', [
+  '$timeout',
+  function($timeout) {
+    return {
+      restrict: 'E',
+      scope: {
+        value: '@',
+        currency: '@'
+      },
+      templateUrl: 'views/includes/amount.html',
+      controller: ['$scope', function($scope) {
+        var decimalPlaces = {
+          '0': ['BIF', 'CLP', 'DJF', 'GNF', 'ILS', 'JPY', 'KMF', 'KRW', 'MGA', 'PYG', 'RWF', 'UGX', 'VND', 'VUV', 'XAF', 'XOF', 'XPF'],
+          '3': ['BHD', 'IQD', 'JOD', 'KWD', 'OMR', 'TND'],
+          '8': ['BCH', 'BTC']
         };
-    }
+
+        var numberWithCommas = function(x) {
+          return parseFloat(x).toLocaleString();
+        };
+
+        var buildAmount = function(start, middle, end) {
+          $scope.start = start;
+          $scope.middle = middle;
+          $scope.end = end;
+        };
+
+        var getDecimalPlaces = function(currency) {
+          if (decimalPlaces['0'].indexOf($scope.currency.toUpperCase()) > -1) return '0';
+          if (decimalPlaces['3'].indexOf($scope.currency.toUpperCase()) > -1) return '3';
+          if (decimalPlaces['8'].indexOf($scope.currency.toUpperCase()) > -1) return '8';
+          return '2';
+        };
+
+        switch (getDecimalPlaces($scope.currency)) {
+          case '0':
+            var valueFormatted = numberWithCommas(Math.round(parseFloat($scope.value)));
+            buildAmount(valueFormatted, '', '');
+            break;
+
+          case '2':
+            var valueProcessing = parseFloat(parseFloat($scope.value).toFixed(2));
+            var valueFormatted = numberWithCommas(valueProcessing);
+            buildAmount(valueFormatted, '', '');
+            break;
+
+          case '3':
+            var valueProcessing = parseFloat(parseFloat($scope.value).toFixed(3));
+            var valueFormatted = numberWithCommas(valueProcessing);
+            buildAmount(valueFormatted, '', '');
+            break;
+
+          case '8':
+            var valueFormatted = parseFloat($scope.value).toFixed(8);
+            if (parseFloat($scope.value) == 0) {
+              buildAmount('0', '', '');
+            } else {
+              buildAmount(valueFormatted, '', '');
+              var start = numberWithCommas(valueFormatted.slice(0, -5));
+              var middle = valueFormatted.slice(-5, -2);
+              var end = valueFormatted.substr(valueFormatted.length - 2);
+              buildAmount(start, middle, end);
+            }
+            break;
+        }
+      }]
+    };
+  }
 ]);

src/sass/components/amount.scss

@@ -12,13 +12,16 @@
 
   .middle {
     font-size: 0.7857em;
+    margin-left: 5px;
   }
 
   .end {
     font-size: 0.7857em;
+    margin-left: 5px;
   }
 
   .currency {
     font-size: 1em;
+    margin-left: 5px;
   }
 }

www/css/main.css

@@ -15251,13 +15251,16 @@ ion-content.padded-bottom-cta-with-summary {
   font-size: 1em; }
 
 .amount .middle {
-  font-size: 0.7857em; }
+  font-size: 0.7857em;
+  margin-left: 5px; }
 
 .amount .end {
-  font-size: 0.7857em; }
+  font-size: 0.7857em;
+  margin-left: 5px; }
 
 .amount .currency {
-  font-size: 1em; }
+  font-size: 1em;
+  margin-left: 5px; }
 
 /* This is for rules that don't yet have a home.
  * Our goal is to delete this file. Search the regex: /class=".*CLASS.*?"/

www/views/includes/amount.html

@@ -1,6 +1,3 @@
 <div class="amount">
-  <span class="start">{{start}}</span>
-  <span class="middle">{{middle}}</span>
-  <span class="end">{{end}}</span>
-  <span class="currency">{{currency}}</span>
+  <span ng-if="start.length > 0" class="start">{{start}}</span><span ng-if="middle.length > 0" class="middle">{{middle}}</span><span ng-if="end.length > 0" class="end">{{end}}</span><span ng-if="currency.length > 0" class="currency">{{currency}}</span>
 </div>

www/views/review.html

@@ -69,8 +69,8 @@
     <div class="fee-crypto"
       ng-init="fee = {value: '0.00195823', currency: 'BCH'};">
       <amount
-        value="fee.value"
-        currency="fee.currency"></amount>
+        value="{{fee.value}}"
+        currency="{{fee.currency}}"></amount>
     </div>
   </div>