Add a template to show letter usage if the service has the letter permission

app/main/views/dashboard.py

@@ -137,8 +137,12 @@ def usage(service_id):
     free_sms_allowance = billing_api_client.get_free_sms_fragment_limit_for_year(service_id, year)
     units = billing_api_client.get_billable_units(service_id, year)
     yearly_usage = billing_api_client.get_service_usage(service_id, year)
+
+    usage_template = 'views/usage.html'
+    if 'letter' in current_service['permissions']:
+        usage_template = 'views/usage-with-letters.html'
     return render_template(
-        'views/usage.html',
+        usage_template,
         months=list(get_free_paid_breakdown_for_billable_units(
             year,
             free_sms_allowance,

app/templates/views/usage-with-letters.html

@@ -0,0 +1,141 @@
+{% from "components/big-number.html" import big_number %}
+{% from "components/table.html" import list_table, field, hidden_field_heading, row_heading, text_field %}
+{% from "components/pill.html" import pill %}
+
+{% extends "withnav_template.html" %}
+
+{% block service_page_title %}
+  Usage
+{% endblock %}
+
+{% block maincolumn_content %}
+
+    <h1 class='heading-large'>Usage</h1>
+
+    <div class="bottom-gutter">
+      {{ pill(years, selected_year, big_number_args={'smallest': True}) }}
+    </div>
+    <div id='pill-selected-item'>
+      <div class='grid-row'>
+        <div class='column-one-third'>
+          <h2 class='heading-small'>Emails</h2>
+          <div class="keyline-block">
+            {{ big_number(emails_sent, 'sent', smaller=True) }}
+            {{ big_number("Unlimited", 'free allowance', smaller=True) }}
+          </div>
+        </div>
+        <div class='column-one-third'>
+          <h2 class='heading-small'>Text messages</h2>
+          <div class="keyline-block">
+            {{ big_number(sms_sent, 'sent', smaller=True) }}
+            {{ big_number(sms_free_allowance, 'free allowance', smaller=True) }}
+            {{ big_number(sms_allowance_remaining, 'free allowance remaining', smaller=True) }}
+            {% if sms_chargeable %}
+              {{ big_number(
+                sms_chargeable,
+                'at {:.2f} pence per message'.format(sms_rate * 100),
+                smaller=True
+              ) }}
+            {% endif %}
+          </div>
+        </div>
+        <div class='column-one-third'>
+          <h2 class='heading-small'>Letters</h2>
+          <div class="keyline-block">
+            {{ big_number(letter_sent, 'sent', smaller=True) }}
+          </div>
+        </div>
+      </div>
+
+      <div class='grid-row'>
+        <div class='column-one-third'>
+          <div class="keyline-block">
+            &nbsp;
+          </div>
+        </div>
+        <div class='column-one-third'>
+          <div class="keyline-block">
+            {{ big_number(
+              (sms_chargeable * sms_rate),
+              'spent',
+              currency="£",
+              smaller=True
+            ) }}
+          </div>
+        </div>
+        <div class='column-one-third'>
+          <div class="keyline-block">
+            {{ big_number(
+                letter_cost,
+                'spent',
+                currency="£",
+                smaller=True
+              ) }}
+          </div>
+        </div>
+
+      </div>
+
+      {% if months %}
+        <div class="dashboard-table body-copy-table">
+          {% call(month, row_index) list_table(
+            months,
+            caption="Total spend",
+            caption_visible=False,
+            empty_message='',
+            field_headings=[
+              'By month',
+              hidden_field_heading('Cost'),
+            ],
+            field_headings_visible=True
+          ) %}
+            {% call row_heading() %}
+              {{ month.name }}
+            {% endcall %}
+            {% call field(align='left') %}
+              {{ big_number(
+                (sms_rate * month.paid) + month.letter_total,
+                currency="£",
+                smallest=True
+              ) }}
+          <ul>
+              {% if month.free %}
+                <li class="tabular-numbers">{{ "{:,}".format(month.free) }} free text messages</li>
+              {% endif %}
+              {% if month.paid %}
+                <li class="tabular-numbers">{{ "{:,}".format(month.paid) }} text messages at
+                {{- ' {:.2f}p'.format(sms_rate * 100) }}</li>
+              {% endif %}
+              {% if not (month.free or month.paid) %}
+                <li aria-hidden="true">–</li>
+              {% endif %}
+              </ul>
+             <ul>
+              {% for letter in month.letters%}
+                {% if letter[0] %}
+                <li class="tabular-numbers">{{ "{:,}".format(letter[0])}} letters at {{ '{:.0f}p'.format(letter[1] * 100) }}
+                </li>
+                {% endif %}
+              {% endfor %}
+            </ul>
+            {% endcall %}
+          {% endcall %}
+        </div>
+      {% endif %}
+    </div>
+
+    <div class="grid-row">
+      <div class="column-half">
+        <p class="align-with-heading-copy">
+          Financial year ends 31 March.
+        </p>
+      </div>
+      <div class="column-half">
+        <p class="align-with-heading-copy">
+          What counts as 1 text message?<br />
+          See <a href="{{ url_for('.pricing') }}">pricing</a>.
+        </p>
+      </div>
+    </div>
+
+{% endblock %}

app/templates/views/usage.html

@@ -17,14 +17,14 @@
     </div>
     <div id='pill-selected-item'>
       <div class='grid-row'>
-        <div class='column-one-third'>
+        <div class='column-half'>
           <h2 class='heading-small'>Emails</h2>
           <div class="keyline-block">
             {{ big_number(emails_sent, 'sent', smaller=True) }}
             {{ big_number("Unlimited", 'free allowance', smaller=True) }}
           </div>
         </div>
-        <div class='column-one-third'>
+        <div class='column-half'>
           <h2 class='heading-small'>Text messages</h2>
           <div class="keyline-block">
             {{ big_number(sms_sent, 'sent', smaller=True) }}
@@ -39,21 +39,15 @@
             {% endif %}
           </div>
         </div>
-        <div class='column-one-third'>
-          <h2 class='heading-small'>Letters</h2>
-          <div class="keyline-block">
-            {{ big_number(letter_sent, 'sent', smaller=True) }}
-          </div>
-        </div>
       </div>
 
       <div class='grid-row'>
-        <div class='column-one-third'>
+        <div class='column-half'>
           <div class="keyline-block">
             &nbsp;
           </div>
         </div>
-        <div class='column-one-third'>
+        <div class='column-half'>
           <div class="keyline-block">
             {{ big_number(
               (sms_chargeable * sms_rate),
@@ -63,17 +57,6 @@
             ) }}
           </div>
         </div>
-        <div class='column-one-third'>
-          <div class="keyline-block">
-            {{ big_number(
-                letter_cost,
-                'spent',
-                currency="£",
-                smaller=True
-              ) }}
-          </div>
-        </div>
-
       </div>
 
       {% if months %}
@@ -94,11 +77,11 @@
             {% endcall %}
             {% call field(align='left') %}
               {{ big_number(
-                (sms_rate * month.paid) + month.letter_total,
+                sms_rate * month.paid,
                 currency="£",
                 smallest=True
               ) }}
-          <ul>
+              <ul>
               {% if month.free %}
                 <li class="tabular-numbers">{{ "{:,}".format(month.free) }} free text messages</li>
               {% endif %}
@@ -110,14 +93,6 @@
                 <li aria-hidden="true">–</li>
               {% endif %}
               </ul>
-             <ul>
-              {% for letter in month.letters%}
-                {% if letter[0] %}
-                <li class="tabular-numbers">{{ "{:,}".format(letter[0])}} letters at {{ '{:.0f}p'.format(letter[1] * 100) }}
-                </li>
-                {% endif %}
-              {% endfor %}
-            </ul>
             {% endcall %}
           {% endcall %}
         </div>
@@ -138,4 +113,4 @@
       </div>
     </div>
 
-{% endblock %}
+{% endblock %}