Merge pull request #93 from alphagov/send-sms-page-2

Put message previews on ‘Send SMS’ page

app/assets/javascripts/main.js

@@ -1,3 +1,3 @@
 $(() => GOVUK.modules.start());
 
-$(() => new GOVUK.SelectionButtons('.block-label input'));
+$(() => new GOVUK.SelectionButtons('.block-label input, .sms-message-option input'));

app/assets/stylesheets/components/sms-message.scss

@@ -1,53 +1,63 @@
-.sms-message {
+%sms-message-wrapper,
-
+.sms-message-wrapper {
-  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+  padding: $gutter/2;
+  background: $panel-colour;
+  border: 1px solid $panel-colour;
+  border-radius: 5px;
+  white-space: normal;
   margin: 0 0 $gutter 0;
+}
+
+.sms-message-wrapper-with-radio {
+  @extend %sms-message-wrapper;
+  padding-left: 45px;
+  cursor: pointer;
+}
+
+.sms-message-recipient {
+  @include copy-19;
+  color: $secondary-text-colour;
+  margin: -$gutter-half 0 $gutter 0;
+}
+
+.sms-message-name {
+  @include bold-19;
+  margin: 30px 0 10px 0;
+}
+
+.sms-message-picker {
+  display: block;
+  margin: 7px 0 0 0;
+  position: absolute;
+  left: 15px;
+  top: 50%;
+  z-index: 50;
+}
+
+label.sms-message-option {
+
+  display: block;
+  position: relative;
+
+  &.selected {
+
+    .sms-message-wrapper-with-radio {
+      background: $white;
+      border: 1px solid $text-colour;
+    }
 
-  &:before {
-    content: '';
-    position: absolute;
-    z-index: 10;
-    bottom: -12px;
-    right: 5px;
-    width: 20px;
-    height: 25px;
-    border-radius: 100%;
-    background: $panel-colour;
   }
 
-  &:after {
+  &.focused {
-    content: '';
-    position: absolute;
-    z-index: 20;
-    bottom: -15px;
-    right: -5px;
-    border-radius: 100%;
-    width: 20px;
-    height: 20px;
-    background: $white;
-  }
 
-  &-wrapper {
+    outline: none;
-    width: 100%;
-    display: inline-block;
-    box-sizing: border-box;
-    position: relative;
-    z-index: 30;
-    padding: $gutter/2;
-    background: $panel-colour;
-    border-radius: 5px;
-    white-space: normal;
-  }
 
-  &-recipient {
+    .sms-message-wrapper-with-radio {
-    @include copy-19;
+      box-shadow: 0 0 0 3px $yellow;
-    color: $secondary-text-colour;
+    }
-    margin: -$gutter-half 0 $gutter 0;
-  }
 
-  &-name {
-    @include bold-19;
-    margin: 50px 0 10px 0;
   }
 
 }

app/assets/stylesheets/components/template-picker.scss

@@ -1,33 +0,0 @@
-.template-picker {
-
-  &-name {
-    @include bold-19;
-    padding-left: 5px;
-  }
-
-  &-option {
-
-    white-space: nowrap;
-    clear: both;
-
-    &-radio {
-      padding-right: 10px;
-      box-sizing: border-box;
-      vertical-align: top;
-      width: 33%;
-      display: inline-block;
-    }
-
-    .block-label {
-      display: inline-block;
-    }
-
-    .sms-message {
-      display: inline-block;
-      vertical-align: top;
-      max-width: 66%;
-    }
-
-  }
-
-}

app/assets/stylesheets/main.scss

@@ -32,7 +32,6 @@
 
 // Specific to this application
 @import 'grids';
-@import 'components/template-picker';
 @import 'components/placeholder';
 @import 'components/sms-message';
 @import 'components/page-footer';

app/main/views/_templates.py

@@ -1,39 +1,12 @@
 templates = [
     {
         'type': 'sms',
-        'name': 'Confirmation',
+        'name': 'Confirmation with details Jan 2016',
-        'body': 'Lasting power of attorney: We’ve received your application. Applications take between 8 and 10 weeks to process.'  # noqa
+        'body': '((name)), we’ve received your ((thing)). We’ll contact you again within 1 week.'
     },
     {
         'type': 'sms',
-        'name': 'Reminder',
+        'name': 'Confirmation Jan 2016',
-        'body': 'Vehicle tax: Your vehicle tax for ((registration number)) expires on ((date)). Tax your vehicle at www.gov.uk/vehicle-tax'  # noqa
+        'body': 'We’ve received your payment. We’ll contact you again within 1 week.'
-    },
+    }
-    {
-        'type': 'sms',
-        'name': 'Warning',
-        'body': 'Vehicle tax: Your vehicle tax for ((registration number)) has expired. Tax your vehicle at www.gov.uk/vehicle-tax'  # noqa
-    },
-    {
-        'type': 'email',
-        'name': 'Application alert 06/2016',
-        'subject': 'Your lasting power of attorney application',
-        'body': """Dear ((name)),
-
-When you’ve made your lasting power of attorney (LPA), you need to register it \
-with the Office of the Public Guardian (OPG).
-
-You can apply to register your LPA yourself if you’re able to make your own decisions.
-
-Your attorney can also register it for you. You’ll be told if they do and you can \
-object to the registration.
-
-It takes between 8 and 10 weeks to register an LPA if there are no mistakes in the application.
-        """
-    },
-    {
-        'type': 'sms',
-        'name': 'Air quality alert',
-        'body': 'Air pollution levels will be ((level)) in ((region)) tomorrow.'
-    },
 ]

app/templates/admin_template.html

@@ -55,8 +55,10 @@
             <summary class="dropdown-toggle">
               Service name
             </summary>
-            <a href="#">Switch to A N Other service</a>
+            <div>
-            <a href="{{ url_for('.add_service') }}">Add a new service to GOV.UK Notify</a>
+              <a href="#">Switch to A N Other service</a>
+              <a href="{{ url_for('.add_service') }}">Add a new service to GOV.UK Notify</a>
+            </div>
           </details>
         </div>
         <div class="column-half management-navigation-account">

app/templates/components/sms-message.html

@@ -1,4 +1,9 @@
-{% macro sms_message(body, recipient=None, name=None, edit_link=None) %}
+{% macro sms_message(
+  body, recipient=None, name=None, edit_link=None, input_name=None, input_index=None
+) %}
+  {% if input_name %}
+    <label class="sms-message-option" for="{{ input_name }}-{{ input_index }}">
+  {% endif %}
   {% if name %}
     <h3 class="sms-message-name">
       {% if edit_link %}
@@ -8,14 +13,18 @@
       {% endif %}
     </h3>
   {% endif %}
-  <div class="sms-message">
+  {% if input_name %}
-    <div class="sms-message-wrapper">
+    <input class="sms-message-picker" type="radio" id="{{ input_name }}-{{ input_index }}" name="{{ input_name }}" />
-      {{ body|placeholders }}
+  {% endif %}
-    </div>
+  <div class="sms-message-wrapper{% if input_name %}-with-radio{% endif %}">
+    {{ body|placeholders }}
   </div>
   {% if recipient %}
     <p class="sms-message-recipient">
       {{ recipient }}
     </p>
   {% endif %}
+  {% if input_name %}
+    </label>
+  {% endif %}
 {% endmacro %}

app/templates/views/send-sms.html

@@ -10,35 +10,36 @@
 {% block maincolumn_content %}
   <form method="POST" enctype="multipart/form-data">
 
-    <h1 class="heading-xlarge">Send text messages</h1>
+    <div class="grid-row">
+      <div class="column-three-quarters">
 
-    <fieldset class='form-group'>
+        <h1 class="heading-xlarge">Send text messages</h1>
-      <legend class="heading-medium">1. Choose text message template</legend>
-      {% for template in message_templates %}
-        <label class="block-label" for="template-{{loop.index}}">
-          {{ template.name }}
-          <input type="radio" name="template" id="template-{{loop.index}}" value="{{ template.name }}" />
-        </label>
-      {% endfor %}
-    </fieldset>
 
-    <p>
+        <fieldset class='form-group'>
-      or <a href="{{ url_for('.add_service_template', service_id=service_id) }}">create a new template</a>
+          <legend class="heading-medium">1. Choose text message template</legend>
-    </p>
+          {% for template in message_templates %}
+            {{ sms_message(
+              template.body, name=template.name, input_name='template', input_index=loop.index
+            ) }}
+          {% endfor %}
+        </fieldset>
 
-    <h2 class="heading-medium">2. Add recipients</h2>
+        <h2 class="heading-medium">2. Add recipients</h2>
 
-    <p>
+        <p>
-      Upload a CSV file to add your recipients’ details.
+          Upload a CSV file to add your recipients’ details.
-    </p>
+        </p>
-    <p>
+        <p>
-      You can also <a href="#">download an example CSV</a>.
+          You can also <a href="#">download an example CSV</a>.
-    </p>
+        </p>
-    <p>
+        <p>
-      {{textbox(form.file)}}
+          {{textbox(form.file)}}
-    </p>
+        </p>
 
-    {{ page_footer("Continue") }}
+        {{ page_footer("Continue") }}
+
+      </div>
+    </div>
 
   </form>
 

app/templates/views/styleguide.html

@@ -92,7 +92,7 @@
 
   <h2 class="heading-large">SMS message</h2>
 
-  <p>Used to show or preview an SMS message.</p>
+  <p>Used to show, preview or choose an SMS message.</p>
 
   <div class="grid-row">
     <div class="column-half">
@@ -102,6 +102,12 @@
         "Your vehicle tax for registration number is due on date. Renew online at www.gov.uk/vehicle-tax",
         "+44 7700 900 306"
       ) }}
+      {{ sms_message(
+        "Your vehicle tax for ((registration number)) is due on ((date)). Renew online at www.gov.uk/vehicle-tax",
+        name="Reminder",
+        input_name="template",
+        input_index=1
+      ) }}
     </div>
   </div>