From 1f39a0fe6151a47440c02550efe50a519379ec1d Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Thu, 10 Dec 2015 16:48:07 +0000
Subject: [PATCH] Hard code some data in the Python

This commit adds some stubbed data for the pages. The structure of the data
is just a proposal, but it gives the templates something to work with for now.
---
 .../stylesheets/components/placeholder.scss   |  7 ++++
 .../stylesheets/components/sms-message.scss   | 41 +++++++++++++++++++
 app/main/views/index.py                       | 29 ++++++++++++-
 app/templates/views/check-sms.html            |  5 ++-
 app/templates/views/send-sms.html             | 28 ++++++++++---
 5 files changed, 101 insertions(+), 9 deletions(-)
 create mode 100644 app/assets/stylesheets/components/placeholder.scss
 create mode 100644 app/assets/stylesheets/components/sms-message.scss

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
 	<div class="column-two-thirds">
 		<h1 class="heading-xlarge">Send text messages</h1>
 
-		<p>This page will be where we check the text messages we're about to send</p>
+		{{ sms_message(message_template) }}
 
   	<p>
-  	<a class="button" href="dashboard" role="button">Send text messages</a>
+	  	<a class="button" href="/check-sms" role="button">Send {{recipient_count}} text messages</a>
   	</p>
 	</div>
 </div>
diff --git a/app/templates/views/send-sms.html b/app/templates/views/send-sms.html
index 14e2c1894..0da918adf 100644
--- a/app/templates/views/send-sms.html
+++ b/app/templates/views/send-sms.html
@@ -12,13 +12,31 @@
 
 		<h1 class="heading-xlarge">Send text messages</h1>
 
-		{{ sms_message("
-			Vehicle tax: Your vehicle tax for ((registration number)) expires on
-			((date)). Tax your vehicle at www.gov.uk/vehicle-tax
-		") }}
+		<h2 class="heading-medium">1. Choose text message template</h2>
+		{% for template in message_templates %}
+			{{ template.name }}
+			{{ sms_message(template.body) }}
+		{% endfor %}
+
+		<h2 class="heading-medium">2. Add recipients</h2>
+
+		<p>
+			Add recipients by uploading a CSV
+		</p>
+		<p>
+			Format the cells as ‘text’ in your spreadsheet app – this stores the mobile
+			numbers correctly
+		</p>
+		<p>
+			You can also <a href="#">download an example</a>
+		</p>
+		<p>
+			<input type="file" />
+		</p>
+
 
   	<p>
-	  	<a class="button" href="check-sms" role="button">Continue</a>
+	  	<a class="button" href="/check-sms" role="button">Continue</a>
   	</p>
 	</div>
 </div>