Merge pull request #892 from GSA/800-combine-and-style-quota-displays

800 - combine and style quota displays

app/templates/main_nav.html

@@ -29,8 +29,4 @@
   {% endif %}
   </ul>
 </nav>
-<div>
-    <p class="usa--body bold ">Messages Left Across Services</p>
-    <p>{{ daily_global_messages_remaining }}</p>
-</div>
 {% endif %}

app/templates/views/dashboard/_usage.html

@@ -2,22 +2,34 @@
 
 <div class='grid-row grid-gap ajax-block-container'>
   <div class='grid-col-12'>
-    <div class="keyline-block">
-      {% if sms_cost %}
-        {{ big_number(
-          sms_cost,
-          'spent on text messages',
-          currency="$",
-          smaller=True
-        ) }}
-      {% else %}
-        {{ big_number(sms_allowance_remaining, 'free text messages left', smaller=True) }}
-      {% endif %}
-    </div>
+
+    <table class="usa-table usa-table--borderless margin-top-1 margin-bottom-5">
+      <caption class="usa-sr-only">
+        Daily
+      </caption>
+      <thead>
+        <tr>
+          <th scope="col">Usage</th>
+          <th scope="col">Remaining</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>{{ big_number(40000 - sms_allowance_remaining, smaller=True) }}</td>
+          <td>
+            {% if sms_cost %}
+            {{ big_number(
+              sms_cost,
+              'spent on text messages',
+              currency="$",
+              smaller=True
+            ) }}
+            {% else %}
+              {{ big_number(sms_allowance_remaining, smaller=True) }}
+            {% endif %}
+          </td>
+        </tr>
+      </tbody>
+    </table>
   </div>
-  <!-- <div class='grid-col-6 pilot-disabled'>
-    <div class="keyline-block">
-      {{ big_number("0", 'email disabled during SMS pilot', smaller=True) }}
-    </div>
-  </div> -->
 </div>

app/templates/views/dashboard/dashboard.html

@@ -19,9 +19,10 @@
 
     {{ ajax_block(partials, updates_url, 'upcoming') }}
 
-    <h2 class="font-body-lg margin-top-0 margin-bottom-1">
-      In the last seven days
+    <h2 class="font-body-xl margin-0">
+      Messages sent
     </h2>
+    <p class="margin-top-0">In the last seven days</p>
 
     {{ ajax_block(partials, updates_url, 'inbox') }}
 
@@ -29,15 +30,37 @@
 
     {{ ajax_block(partials, updates_url, 'template-statistics') }}
 
+    <h2 class="margin-top-4 margin-bottom-1">Usage</h2>
+    <h3 class="margin-bottom-0">Daily</h3>
+    <p class="margin-0">Across all services</p>
+    <table class="usa-table usa-table--borderless margin-top-1 margin-bottom-5">
+      <caption class="usa-sr-only">
+        Daily
+      </caption>
+      <thead>
+        <tr>
+          <th scope="col">Usage</th>
+          <th scope="col">Remaining</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>{{ 5000 - daily_global_messages_remaining }}</td>
+          <td>
+            {{ daily_global_messages_remaining }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
     {% if current_user.has_permissions('manage_service') %}
-      <h2 class='font-body-lg margin-bottom-0'>This year</h2>
+      <h3 class='margin-bottom-0'>2023</h3>
       {{ ajax_block(partials, updates_url, 'usage') }}
       {{ show_more(
         url_for(".usage", service_id=current_service['id']),
-        'See usage'
+        'See all usage'
       ) }}
     {% endif %}
-
   </div>
 
 {% endblock %}

app/templates/views/usage.html

@@ -21,7 +21,10 @@
       <div class='grid-row'>
         
         <div class='grid-col-12'>
-          <h2 class='heading-small'>Text messages</h2>
+          <h2 class="heading-small margin-bottom-1">Daily messages across all services</h2>
+          <p class="margin-0">You have sent {{ 5000 - daily_global_messages_remaining }} of your 5000 daily messages allowance.</p>
+          <p class="margin-0"></p>You have {{ daily_global_messages_remaining }} messages remaining.</p>
+          <h2 class='heading-small margin-bottom-1'>Text messages</h2>
           <div class="keyline-block">
             You have sent
             {{ big_number(sms_sent, 'messages of your', smaller=True) }}

package.json

@@ -31,7 +31,7 @@
     "morphdom": "2.6.1",
     "python": "^0.0.4",
     "query-command-supported": "1.0.0",
-    "sass-embedded": "^1.66.1",
+    "sass-embedded": "^1.69.5",
     "textarea-caret": "3.1.0",
     "timeago": "1.6.7"
   },

tests/app/main/views/test_dashboard.py

@@ -471,7 +471,7 @@ def test_should_show_recent_templates_on_dashboard(
     headers = [
         header.text.strip() for header in page.find_all("h2") + page.find_all("h1")
     ]
-    assert "In the last seven days" in headers
+    assert "Messages sent" in headers
 
     table_rows = page.find_all("tbody")[0].find_all("tr")
 
@@ -1530,6 +1530,8 @@ def test_service_dashboard_shows_usage(
     page = client_request.get("main.service_dashboard", service_id=SERVICE_ONE_ID)
 
     assert normalize_spaces(page.select_one("[data-key=usage]").text) == (
+        "Daily Usage Remaining "
+        "40,000 "
         "$29.85 "
         "spent on text messages"
         # Disabled for pilot
@@ -1564,4 +1566,4 @@ def test_service_dashboard_shows_free_allowance(
 
     usage_text = normalize_spaces(page.select_one("[data-key=usage]").text)
     assert "spent on text messages" not in usage_text
-    assert "249,000 free text messages left" in usage_text
+    assert "Daily Usage Remaining -209,000 249,000" in usage_text