use `Intl.NumberFormat` to format currency

4 files changed, 67 insertions, 22 deletions

diff --git a/client/components/cards/cardCustomFields.js b/client/components/cards/cardCustomFields.js
index 737c5454..45f20762 100644
--- a/client/components/cards/cardCustomFields.js
+++ b/client/components/cards/cardCustomFields.js
@@ -85,11 +85,16 @@ CardCustomField.register('cardCustomField');
   onCreated() {
     super.onCreated();
 
-    this.currencySymbol = this.data().definition.settings.currencySymbol;
+    this.currencyCode = this.data().definition.settings.currencyCode;
   }
 
   formattedValue() {
-    return `${this.currencySymbol}${this.data().value}`;
+    const locale = TAPi18n.getLanguage();
+
+    return new Intl.NumberFormat(locale, {
+      style: 'currency',
+      currency: this.currencyCode,
+    }).format(this.data().value);
   }
 
   events() {
diff --git a/client/components/cards/minicard.js b/client/components/cards/minicard.js
index e40dad5d..2eb6131c 100644
--- a/client/components/cards/minicard.js
+++ b/client/components/cards/minicard.js
@@ -16,7 +16,11 @@ BlazeComponent.extendComponent({
     const customFieldTrueValue =
       customField && customField.trueValue ? customField.trueValue : '';
 
-    return `${definition.settings.currencySymbol}${customFieldTrueValue}`;
+    const locale = TAPi18n.getLanguage();
+    return new Intl.NumberFormat(locale, {
+      style: 'currency',
+      currency: definition.settings.currencyCode,
+    }).format(customFieldTrueValue);
   },
 
   events() {
diff --git a/client/components/sidebar/sidebarCustomFields.jade b/client/components/sidebar/sidebarCustomFields.jade
index 4cff73f4..ffb8d2d1 100644
--- a/client/components/sidebar/sidebarCustomFields.jade
+++ b/client/components/sidebar/sidebarCustomFields.jade
@@ -38,7 +38,7 @@ template(name="createCustomFieldPopup")
             label
                 | {{_ 'custom-field-currency-option'}}
             select.js-field-currency
-              each getCurrencySymbols
+              each getCurrencyCodes
                 if selected
                   option(value=value selected="selected") {{name}}
                 else
diff --git a/client/components/sidebar/sidebarCustomFields.js b/client/components/sidebar/sidebarCustomFields.js
index 41aecea4..bd2ebdef 100644
--- a/client/components/sidebar/sidebarCustomFields.js
+++ b/client/components/sidebar/sidebarCustomFields.js
@@ -18,11 +18,47 @@ BlazeComponent.extendComponent({
 const CreateCustomFieldPopup = BlazeComponent.extendComponent({
   _types: ['text', 'number', 'date', 'dropdown', 'currency'],
 
-  _defaultCurrencySymbols: [
-    { symbol: '$' },
-    { symbol: '€' },
-    { symbol: '￡' },
-    { symbol: '¥' },
+  _currencyList: [
+    {
+      name: 'US Dollar',
+      code: 'USD',
+    },
+    {
+      name: 'Euro',
+      code: 'EUR',
+    },
+    {
+      name: 'Yen',
+      code: 'JPY',
+    },
+    {
+      name: 'Pound Sterling',
+      code: 'GBP',
+    },
+    {
+      name: 'Australian Dollar',
+      code: 'AUD',
+    },
+    {
+      name: 'Canadian Dollar',
+      code: 'CAD',
+    },
+    {
+      name: 'Swiss Franc',
+      code: 'CHF',
+    },
+    {
+      name: 'Yuan Renminbi',
+      code: 'CNY',
+    },
+    {
+      name: 'Hong Kong Dollar',
+      code: 'HKD',
+    },
+    {
+      name: 'New Zealand Dollar',
+      code: 'NZD',
+    },
   ],
 
   onCreated() {
@@ -30,10 +66,10 @@ const CreateCustomFieldPopup = BlazeComponent.extendComponent({
       this.data().type ? this.data().type : this._types[0],
     );
 
-    this.currencySymbol = new ReactiveVar(
-      this.data().settings && this.data().settings.currencySymbol
-        ? this.data().settings.currencySymbol
-        : this._defaultCurrencySymbols[0].symbol,
+    this.currencyCode = new ReactiveVar(
+      this.data().settings && this.data().settings.currencyCode
+        ? this.data().settings.currencyCode
+        : this._currencyList[0].code,
     );
 
     this.dropdownItems = new ReactiveVar(
@@ -58,14 +94,14 @@ const CreateCustomFieldPopup = BlazeComponent.extendComponent({
     return this.type.get() !== type;
   },
 
-  getCurrencySymbols() {
-    const currentSymbol = this.currencySymbol.get();
+  getCurrencyCodes() {
+    const currentCode = this.currencyCode.get();
 
-    return this._defaultCurrencySymbols.map(({ symbol }) => {
+    return this._currencyList.map(({ name, code }) => {
       return {
-        name: symbol,
-        value: symbol,
-        selected: symbol === currentSymbol,
+        name: `${code} - ${name}`,
+        value: code,
+        selected: code === currentCode,
       };
     });
   },
@@ -89,8 +125,8 @@ const CreateCustomFieldPopup = BlazeComponent.extendComponent({
     const settings = {};
     switch (this.type.get()) {
       case 'currency': {
-        const currencySymbol = this.currencySymbol.get();
-        settings.currencySymbol = currencySymbol;
+        const currencyCode = this.currencyCode.get();
+        settings.currencyCode = currencyCode;
         break;
       }
       case 'dropdown': {
@@ -113,7 +149,7 @@ const CreateCustomFieldPopup = BlazeComponent.extendComponent({
         },
         'change .js-field-currency'(evt) {
           const value = evt.target.value;
-          this.currencySymbol.set(value);
+          this.currencyCode.set(value);
         },
         'keydown .js-dropdown-item.last'(evt) {
           if (evt.target.value.trim() && evt.keyCode === 13) {