diff --git a/app/assets/stylesheets/components/placeholder.scss b/app/assets/stylesheets/components/placeholder.scss new file mode 100644 index 000000000..3eed3e1e5 --- /dev/null +++ b/app/assets/stylesheets/components/placeholder.scss @@ -0,0 +1,7 @@ +.placeholder { + display: inline; + background: $light-blue; + color: $white; + padding: 0 5px; + box-shadow: inset 0 0 0 2px $panel-colour; +} diff --git a/app/assets/stylesheets/components/sms-message.scss b/app/assets/stylesheets/components/sms-message.scss new file mode 100644 index 000000000..0132c290c --- /dev/null +++ b/app/assets/stylesheets/components/sms-message.scss @@ -0,0 +1,41 @@ +.sms-message { + + position: relative; + margin: 0 0 $gutter 0; + + &:before { + content: ''; + position: absolute; + z-index: 10; + bottom: -12px; + right: 5px; + width: 20px; + height: 25px; + border-radius: 100%; + background: $panel-colour; + } + + &:after { + content: ''; + position: absolute; + z-index: 20; + bottom: -15px; + right: -5px; + border-radius: 100%; + width: 20px; + height: 20px; + background: $white; + } + + &-wrapper { + box-sizing: border-box; + position: relative; + z-index: 30; + width: 100%; + height: 100%; + padding: $gutter/2; + background: $panel-colour; + border-radius: 5px; + } + +} diff --git a/app/main/views/index.py b/app/main/views/index.py index 506cc66df..cf40f02b8 100644 --- a/app/main/views/index.py +++ b/app/main/views/index.py @@ -43,12 +43,37 @@ def addservice(): @main.route("/send-sms") def sendsms(): - return render_template('views/send-sms.html') + return render_template( + 'views/send-sms.html', + message_templates=[ + { + 'name': 'Reminder', + 'body': """ + Vehicle tax: Your vehicle tax for ((registration number)) expires on ((date)). + Tax your vehicle at www.gov.uk/vehicle-tax + """ + }, + { + 'name': 'Warning', + 'body': """ + Vehicle tax: Your vehicle tax for ((registration number)) has expired. + Tax your vehicle at www.gov.uk/vehicle-tax + """ + }, + ] + ) @main.route("/check-sms") def checksms(): - return render_template('views/check-sms.html') + return render_template( + 'views/check-sms.html', + recipient_count=159, + message_template=""" + Vehicle tax: Your vehicle tax for ((registration number)) expires on ((date)). + Tax your vehicle at www.gov.uk/vehicle-tax + """ + ) @main.route("/email-not-received") diff --git a/app/templates/views/check-sms.html b/app/templates/views/check-sms.html index 22fe983ee..cb917da1d 100644 --- a/app/templates/views/check-sms.html +++ b/app/templates/views/check-sms.html @@ -1,4 +1,5 @@ {% extends "admin_template.html" %} +{% from "components/sms-message.html" import sms_message %} {% block page_title %} GOV.UK Notify | Send text messages @@ -10,10 +11,10 @@ GOV.UK Notify | Send text messages
This page will be where we check the text messages we're about to send
+ {{ sms_message(message_template) }}- Send text messages + Send {{recipient_count}} text messages
+ Add recipients by uploading a CSV +
++ Format the cells as ‘text’ in your spreadsheet app – this stores the mobile + numbers correctly +
++ You can also download an example +
++ +
+