Update send.html

app/templates/views/send.html

@@ -15,11 +15,51 @@
   {{ usaBackLink(params) }}
 {% endblock %}
 
+{% set phone_numbers = [
+  {
+      "svg_src": "#check_circle",
+      "card_heading": "Label column A (the first column) as Phone number",
+    },
+    {
+      "svg_src": "#check_circle",
+      "card_heading": "Double check it’s the only column with Phone number as its label",
+    },
+    {
+      "svg_src": "#check_circle",
+      "card_heading": "Make sure no duplicate phone numbers are listed in Column A",
+    }
+  ]
+%}
+
+{% set additional_data = [
+  {
+    "svg_src": "#check_circle",
+    "card_heading": "Match column labels one-to-one to the message template placeholders",
+  },
+  {
+    "svg_src": "#check_circle",
+    "card_heading": "Label each additional personalized placeholder separately",
+  },
+  {
+    "svg_src": "#check_circle",
+    "card_heading": "Separate each word in a column label with a space or dash, but no commas",
+  },
+  {
+    "svg_src": "#check_circle",
+    "card_heading": "Fill in each conditional placeholder column with a Yes (Y) or No (N) to “answer” whether the recipient meets its criteria",
+  }
+  ]
+%}
+
 {% block maincolumn_content %}
 
   {{ page_header('Upload a list of {}'.format(999|recipient_count_label(template.template_type))) }}
 
-  <div class="page-footer bottom-gutter">
+  <h2 class="font-body-lg margin-bottom-2">Populate your template</h2>
+  <p>Template: {{ template.name }}</p>
+  {{ template|string }}
+
+  <div class="page-footer bottom-gutter margin-top-3">
     {{file_upload(
       form.file,
       allowed_file_extensions=allowed_file_extensions,
@@ -28,7 +68,7 @@
     )}}
   </div>
 
-  <h2 class="font-body-lg">Your file needs to look like this example</h2>
+  <h2 class="font-body-lg">Use our example file</h2>
 
   <div class="spreadsheet" data-module="fullscreen-table">
     {% call(item, row_number) list_table(
@@ -44,14 +84,51 @@
     {% endcall %}
   </div>
   <p class="hint">
-    Save your spreadsheet as a <abbr title="Comma Separated Values">CSV</abbr> file for bulk messaging. It is the most reliable when uploading your contact list. Start by downloading this example for your message template.
+    Each template saved in Notify is given an example <abbr title="Comma Separated Values">CSV</abbr> formatted spreadsheet like this. It’s the most reliable file format for uploading your contact list. Use it to populate your template with the right data items. Start by downloading this example for your message template. Then save it as a <abbr title="Comma Separated Values">CSV</abbr> file for bulk messaging.
   </p>
   <p class="table-show-more-link">
     <a class="usa-link display-flex margin-top-1" href="{{ url_for('.get_example_csv', service_id=current_service.id, template_id=template.id) }}" download>Download this example (<abbr title="Comma separated values">CSV</abbr>)
       <img class="margin-left-05" src="{{ asset_url('img/material-icons/download.svg') }}" alt="" />
     </a>
   </p>
-  <h2 class="font-body-lg margin-bottom-1">Your file will populate this template:<br><span class="font-body-lg">({{ template.name }})</span></h2>
-  {{ template|string }}
+  <h2 class="font-body-lg">Your bulk-sending spreadsheet checklist</h2>
+  <div class="grid-container margin-top-2 padding-0">
+    <div class="grid-row grid-gap-4">
+      <div class="grid-col-5">
+        <h3>Phone numbers</h3>
+        <ul class="usa-icon-list">
+          {% for item in phone_numbers %}
+          <li class="usa-icon-list__item">
+            <div class="usa-icon-list__icon text-green">
+              <svg aria-hidden="true" focusable="false" role="img" class="usa-icon">
+                <use xlink:href="{{ asset_url('img/sprite.svg') }}{{ item.svg_src }}"></use>
+              </svg>
+            </div>
+            <div class="usa-icon-list__content">
+              {{item.card_heading}}
+            </div>
+          </li>
+          {% endfor %}
+        </ul>
+      </div>
+      <div class="grid-col-5 margin-left-4 padding-x-4 padding-bottom-4">
+        <h3>Additional data</h3>
+        <ul class="usa-icon-list">
+          {% for item in additional_data %}
+          <li class="usa-icon-list__item">
+            <div class="usa-icon-list__icon text-green">
+              <svg aria-hidden="true" focusable="false" role="img" class="usa-icon">
+                <use xlink:href="{{ asset_url('img/sprite.svg') }}{{ item.svg_src }}"></use>
+              </svg>
+            </div>
+            <div class="usa-icon-list__content">
+              {{item.card_heading}}
+            </div>
+          </li>
+          {% endfor %}
+        </ul>
+      </div>
+    </div>
+  </div>
 
 {% endblock %}