Use format mask to stringify dollar amount

js/components/forms/details_of_use.js

@@ -1,3 +1,6 @@
+import createNumberMask from 'text-mask-addons/dist/createNumberMask'
+import { conformToMask } from 'vue-text-mask'
+
 import textinput from '../text_input'
 import optionsinput from '../options_input'
 
@@ -39,6 +42,9 @@ export default {
       const monthlySpend = this.estimated_monthly_spend || 0
       return monthlySpend * 12
     },
+    annualSpendStr: function () {
+      return this.formatDollars(this.annualSpend)
+    },
     jediMigrationOptionSelected: function () {
       return this.jedi_migration !== ''
     },
@@ -51,6 +57,10 @@ export default {
   },
 
   methods: {
+    formatDollars: function (intValue) {
+      const mask = createNumberMask({ prefix: '$', allowDecimal: true })
+      return conformToMask(intValue.toString(), mask).conformedValue
+    },
     handleFieldChange: function (event) {
       const { value, name } = event
       if (typeof this[name] !== undefined) {

templates/requests/screen-1.html

@@ -48,7 +48,7 @@
 
     <h2>Financial Usage</h2>
     {{ TextInput(f.estimated_monthly_spend, validation='dollars') }}
-    <p>So this means you are spending approximately <b>$!{ annualSpend }</b> annually</p>
+    <p>So this means you are spending approximately <b>!{ annualSpendStr }</b> annually</p>
     {{ TextInput(f.dollar_value, validation='dollars') }}
     {{ TextInput(f.number_user_sessions, validation='integer') }}
     {{ TextInput(f.average_daily_traffic, placeholder='Gigabytes per day', validation='gigabytes') }}