From 9aaf61e658f19e4b21ed09a7cc3afc714c6944fa Mon Sep 17 00:00:00 2001
From: Pete Matsyburka <pete@docuseal.com>
Date: Fri, 17 Jan 2025 21:08:13 +0200
Subject: [PATCH] add number currency format

---
 app/javascript/submission_form/area.vue           | 10 ++++++++++
 app/javascript/template_builder/area.vue          |  6 ++++++
 .../template_builder/field_settings.vue           |  9 +++++++++
 app/views/submissions/show.html.erb               |  2 ++
 lib/number_utils.rb                               | 15 +++++++++++++--
 5 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/app/javascript/submission_form/area.vue b/app/javascript/submission_form/area.vue
index 1c705228..62181fc5 100644
--- a/app/javascript/submission_form/area.vue
+++ b/app/javascript/submission_form/area.vue
@@ -450,8 +450,18 @@ export default {
       }
     },
     formatNumber (number, format) {
+      if (!number && number !== 0) {
+        return ''
+      }
+
       if (format === 'comma') {
         return new Intl.NumberFormat('en-US').format(number)
+      } else if (format === 'usd') {
+        return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(number)
+      } else if (format === 'gbp') {
+        return new Intl.NumberFormat('en-GB', { style: 'currency', currency: 'GBP', minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(number)
+      } else if (format === 'eur') {
+        return new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR', minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(number)
       } else if (format === 'dot') {
         return new Intl.NumberFormat('de-DE').format(number)
       } else if (format === 'space') {
diff --git a/app/javascript/template_builder/area.vue b/app/javascript/template_builder/area.vue
index fb968221..ccb62ab9 100644
--- a/app/javascript/template_builder/area.vue
+++ b/app/javascript/template_builder/area.vue
@@ -521,6 +521,12 @@ export default {
     formatNumber (number, format) {
       if (format === 'comma') {
         return new Intl.NumberFormat('en-US').format(number)
+      } else if (format === 'usd') {
+        return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(number)
+      } else if (format === 'gbp') {
+        return new Intl.NumberFormat('en-GB', { style: 'currency', currency: 'GBP', minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(number)
+      } else if (format === 'eur') {
+        return new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR', minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(number)
       } else if (format === 'dot') {
         return new Intl.NumberFormat('de-DE').format(number)
       } else if (format === 'space') {
diff --git a/app/javascript/template_builder/field_settings.vue b/app/javascript/template_builder/field_settings.vue
index c5956a7d..0916f383 100644
--- a/app/javascript/template_builder/field_settings.vue
+++ b/app/javascript/template_builder/field_settings.vue
@@ -461,6 +461,9 @@ export default {
     numberFormats () {
       return [
         'none',
+        'usd',
+        'eur',
+        'gbp',
         'comma',
         'dot',
         'space'
@@ -541,6 +544,12 @@ export default {
     formatNumber (number, format) {
       if (format === 'comma') {
         return new Intl.NumberFormat('en-US').format(number)
+      } else if (format === 'usd') {
+        return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(number)
+      } else if (format === 'gbp') {
+        return new Intl.NumberFormat('en-GB', { style: 'currency', currency: 'GBP', minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(number)
+      } else if (format === 'eur') {
+        return new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR', minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(number)
       } else if (format === 'dot') {
         return new Intl.NumberFormat('de-DE').format(number)
       } else if (format === 'space') {
diff --git a/app/views/submissions/show.html.erb b/app/views/submissions/show.html.erb
index 336181ea..083651cd 100644
--- a/app/views/submissions/show.html.erb
+++ b/app/views/submissions/show.html.erb
@@ -222,6 +222,8 @@
                   </div>
                 <% elsif field['type'] == 'checkbox' %>
                   <%= svg_icon('check', class: 'w-6 h-6') %>
+                <% elsif field['type'] == 'number' %>
+                  <%= NumberUtils.format_number(value, field.dig('preferences', 'format')) %>
                 <% elsif field['type'] == 'date' %>
                   <%= TimeUtils.format_date_string(value, field.dig('preferences', 'format'), @submission.account.locale) %>
                 <% else %>
diff --git a/lib/number_utils.rb b/lib/number_utils.rb
index d0ab673c..4cfa3879 100644
--- a/lib/number_utils.rb
+++ b/lib/number_utils.rb
@@ -4,7 +4,16 @@ module NumberUtils
   FORMAT_LOCALES = {
     'dot' => 'de',
     'space' => 'fr',
-    'comma' => 'en'
+    'comma' => 'en',
+    'usd' => 'en',
+    'eur' => 'fr',
+    'gbp' => 'en'
+  }.freeze
+
+  CURRENCY_SYMBOLS = {
+    'usd' => '$',
+    'eur' => '€',
+    'gbp' => '£'
   }.freeze
 
   module_function
@@ -12,7 +21,9 @@ module NumberUtils
   def format_number(number, format)
     locale = FORMAT_LOCALES[format]
 
-    if locale
+    if CURRENCY_SYMBOLS[format]
+      ApplicationController.helpers.number_to_currency(number, locale:, precision: 2, unit: CURRENCY_SYMBOLS[format])
+    elsif locale
       ApplicationController.helpers.number_with_delimiter(number, locale:)
     else
       number