add job status

app/assets/sass/uswds/_legacy-styles.scss

@@ -62,6 +62,10 @@
   margin: -20px units(1) 20px units(1);
 }
 
+h2.sms-message-header {
+  margin-bottom: 0.5rem;
+}
+
 .sms-message-status-outbound {
   text-align: right;
 }
@@ -131,7 +135,7 @@
   &-label,
   &-button-label {
     font-weight: bold;
-    font-size: 19px; 
+    font-size: 19px;
     display: block;
     margin: 0 0 10px 0;
   }

app/formatters.py

@@ -99,8 +99,9 @@ def format_datetime_short(date):
 
 
 def format_datetime_short_12h(date):
+    # example: February 20, 2024 at 07:00 PM US/Eastern
     return "{} at {} {}".format(
-        format_date_short(date), format_time_12h(date), get_user_preferred_timezone()
+        format_date_normal(date), format_time_12h(date), get_user_preferred_timezone()
     )
 
 
@@ -192,7 +193,7 @@ def format_date(date):
 
 def format_date_normal(date):
     date = parse_naive_dt(date)
-    return date.strftime("%d %B %Y").lstrip("0")
+    return date.strftime("%B %d, %Y").lstrip("0")
 
 
 def format_date_short(date):

app/main/views/jobs.py

@@ -10,6 +10,7 @@ from flask import (
     redirect,
     render_template,
     request,
+    session,
     stream_with_context,
     url_for,
 )
@@ -369,6 +370,9 @@ def get_job_partials(job):
         job.template_type
     )
 
+    session['came_from_preview_page'] = 'check' in request.referrer
+    came_from_preview_page_url = session.get('came_from_preview_page', False)
+
     return {
         "counts": counts,
         "notifications": render_template(
@@ -392,6 +396,7 @@ def get_job_partials(job):
         "status": render_template(
             "partials/jobs/status.html",
             job=job,
+            came_from_preview_page_url=came_from_preview_page_url
         ),
     }
 

app/templates/partials/jobs/status.html

@@ -1,34 +1,49 @@
 <div class="ajax-block-container">
   <p class='bottom-gutter'>
-    {% if job.scheduled_for %}
+    {% set display_message_status %}
-      {% if job.processing_started %}
+      {% if job.template.content %}
-      <div class="usa-alert usa-alert--success">
+        <h2 class="sms-message-header">Message</h2>
-        <div class="usa-alert__body">
+        <div class="sms-message-wrapper">{{ current_service.name }}: {{job.template.content}}</div>
-          <h4 class="usa-alert__heading">{{ job.template_name }} - {{ current_service.name }}</h4>
+      {% endif %}
-          <p class="usa-alert__text">
+      {% if job.original_file_name %}
-            Was sent on {{ job.created_at|format_datetime_short_12h }} by {{ job.created_by.name }}
+        <h2>Recipients list</h2>
-          </p>
+        <div>
+          <ul class="usa-icon-list">
+            <li class="usa-icon-list__item">
+              <img src="{{ url_for('static', filename='img/material-icons/description.svg') }}" alt="Description Icon">
+              <div class="usa-icon-list__content">
+                <h3>{{ job.original_file_name }}</h3>
+              </div>
+            </li>
+          </ul>
         </div>
-      </div>
+      {% endif %}
-      {% else %}
+      <h2>SMS Status</h2>
+    {% endset %}
+    {% if job.scheduled_for %}
+      {% if came_from_preview_page_url %}
         <div class="usa-alert usa-alert--info">
           <div class="usa-alert__body">
-            <h4 class="usa-alert__heading">{{ job.template_name }} - {{ current_service.name }}</h4>
+            <h4 class="usa-alert__heading">Your text has been scheduled</h4>
             <p class="usa-alert__text">
-              Was scheduled on {{ job.scheduled_for|format_datetime_short_12h }} by {{ job.created_by.name }}
+              {{ job.template_name }} - {{ current_service.name }} was scheduled on {{ job.scheduled_for|format_datetime_short_12h }} by {{ job.created_by.name }}
             </p>
           </div>
         </div>
+        {{display_message_status}}
       {% endif %}
-   {% else %}
+    {% else %}
-      <div class="usa-alert usa-alert--success">
+      {% if came_from_preview_page_url %}
-        <div class="usa-alert__body">
+        <div class="usa-alert usa-alert--success">
-          <h4 class="usa-alert__heading">{{ job.template_name }} - {{ current_service.name }}</h4>
+          <div class="usa-alert__body">
-          <p class="usa-alert__text">
+            <h4 class="usa-alert__heading">Your text has been sent</h4>
-            Was sent on {{ job.created_at|format_datetime_short_12h }} by {{ job.created_by.name }}
+            <p class="usa-alert__text">
-          </p>
+              {{ job.template_name }} - {{ current_service.name }} was sent on {{ job.created_at|format_datetime_short_12h }} by {{ job.created_by.name }}
+            </p>
+          </div>
         </div>
-      </div>
+        {{display_message_status}}
+      {% endif %}
     {% endif %}
   </p>
   {% if job.status == 'sending limits exceeded'%}

app/templates/views/jobs/job.html

@@ -5,26 +5,13 @@
 {% from "components/components/back-link/macro.njk" import usaBackLink %}
 
 {% block service_page_title %}
-  {{ job.original_file_name }}
+  {{ "Message status" }}
 {% endblock %}
 
 {% block maincolumn_content %}
 
-    {{ page_header(job.original_file_name) }}
+    {{ page_header("Message status") }}
-
+    {{ partials['status']|safe }}
-    {% if not job.processing_finished %}
-      <div
-        data-module="update-content"
-        data-resource="{{ updates_url }}"
-        data-key="status"
-        data-form=""
-      >
-    {% endif %}
-      {{ partials['status']|safe }}
-    {% if not job.processing_finished %}
-      </div>
-    {% endif %}
-
     {% if not finished %}
       <div
         data-module="update-content"