Show annual spend calculated from monthly spend

js/components/forms/details_of_use.js

@@ -17,8 +17,14 @@ export default {
   },
 
   data: function () {
+    const {
+      estimated_monthly_spend = 0,
+      jedi_migration = ''
+    } = this.initialData
+
     return {
-      jedi_migration: this.initialData.jedi_migration
+      estimated_monthly_spend,
+      jedi_migration
     }
   },
 
@@ -27,6 +33,10 @@ export default {
   },
 
   computed: {
+    annualSpend: function () {
+      const monthlySpend = this.estimated_monthly_spend || 0
+      return monthlySpend * 12
+    },
     isJediMigration: function () {
       return this.jedi_migration === 'yes'
     }

templates/requests/screen-1.html

@@ -42,7 +42,7 @@
 
     <h2>Financial Usage</h2>
     {{ TextInput(f.estimated_monthly_spend, validation='dollars') }}
-    <p>So this means you are spending approximately <b>$X</b> annually</p>
+    <p>So this means you are spending approximately <b>$!{ annualSpend }</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') }}