From b4f8e6e4acc3acbdda627328ded3c5ae7c6395af Mon Sep 17 00:00:00 2001
From: karlchillmaid <karl.chillmaid@digital.cabinet-office.gov.uk>
Date: Thu, 5 Nov 2020 14:38:05 +0000
Subject: [PATCH 1/4] Add content about the extended character set

---
 app/templates/views/pricing/index.html | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/app/templates/views/pricing/index.html b/app/templates/views/pricing/index.html
index 9fda8ec48..42faa3531 100644
--- a/app/templates/views/pricing/index.html
+++ b/app/templates/views/pricing/index.html
@@ -66,6 +66,10 @@
       {% endfor %}
     {% endcall %}
   </div>
+  <h3 class="heading-small" id="accents">DRAFT Other characters - heading TBC</h3>
+  <p class="govuk-body">DRAFT Some characters count as 2 characters.</p>
+  <p class="govuk-body">DRAFT The following characters are charged as 2 characters each: [ ] { } ^ \ | ~ €</p>
+
   <h3 class="heading-small" id="accents">Accents and accented characters</h3>
   <p class="govuk-body">Some languages, such as Welsh, use accented characters.</p>
   <p class="govuk-body">Text messages containing the following accented characters are charged at the normal rate: Ä, É, Ö, Ü, à, ä, é, è, ì, ò, ö, ù, ü.</p>

From b4c21280e3d612b9519d3a0595d70351e1ca3884 Mon Sep 17 00:00:00 2001
From: karlchillmaid <karl.chillmaid@digital.cabinet-office.gov.uk>
Date: Thu, 5 Nov 2020 14:43:22 +0000
Subject: [PATCH 2/4] Update draft content

---
 app/templates/views/pricing/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/templates/views/pricing/index.html b/app/templates/views/pricing/index.html
index 42faa3531..cd43f4f73 100644
--- a/app/templates/views/pricing/index.html
+++ b/app/templates/views/pricing/index.html
@@ -67,7 +67,7 @@
     {% endcall %}
   </div>
   <h3 class="heading-small" id="accents">DRAFT Other characters - heading TBC</h3>
-  <p class="govuk-body">DRAFT Some characters count as 2 characters.</p>
+  <p class="govuk-body">DRAFT Some characters count as 2 of the 160 characters of a text messages.</p>
   <p class="govuk-body">DRAFT The following characters are charged as 2 characters each: [ ] { } ^ \ | ~ €</p>
 
   <h3 class="heading-small" id="accents">Accents and accented characters</h3>

From c1151c5e8eca67317e71332422345732a0f821d3 Mon Sep 17 00:00:00 2001
From: karlchillmaid <karl.chillmaid@digital.cabinet-office.gov.uk>
Date: Mon, 9 Nov 2020 16:21:10 +0000
Subject: [PATCH 3/4] Update content
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The _Long text messages_ section of the page is probably the most relevant place to talk about this – so users are aware of the double-characters before they see the table of message lengths.
---
 app/templates/views/pricing/index.html | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/app/templates/views/pricing/index.html b/app/templates/views/pricing/index.html
index cd43f4f73..81e7709e3 100644
--- a/app/templates/views/pricing/index.html
+++ b/app/templates/views/pricing/index.html
@@ -43,7 +43,9 @@
   <p class="govuk-body">See <a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('main.how_to_pay') }}">how to pay</a>.
 
   <h3 class="heading-small" id="long-text-messages">Long text messages</h3>
-  <p class="govuk-body">If a text message is longer than 160 characters (including spaces), it’ll be charged as more than one message:</p>
+  <p class="govuk-body">If a text message is longer than 160 characters (including spaces), it’ll be charged as more than one message.</p>
+  <p class="govuk-body">The following characters are charged as 2 characters each: [ ] { } ^ \ | ~ €</p>
+
   <div class="bottom-gutter-3-2">
     {% call mapping_table(
       caption='Text message pricing',
@@ -66,10 +68,6 @@
       {% endfor %}
     {% endcall %}
   </div>
-  <h3 class="heading-small" id="accents">DRAFT Other characters - heading TBC</h3>
-  <p class="govuk-body">DRAFT Some characters count as 2 of the 160 characters of a text messages.</p>
-  <p class="govuk-body">DRAFT The following characters are charged as 2 characters each: [ ] { } ^ \ | ~ €</p>
-
   <h3 class="heading-small" id="accents">Accents and accented characters</h3>
   <p class="govuk-body">Some languages, such as Welsh, use accented characters.</p>
   <p class="govuk-body">Text messages containing the following accented characters are charged at the normal rate: Ä, É, Ö, Ü, à, ä, é, è, ì, ò, ö, ù, ü.</p>

From 070ed818cf0941afa4d53721b23f57c4f7c1c666 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Fri, 13 Nov 2020 22:31:28 +0000
Subject: [PATCH 4/4] Add HTML and CSS for extended GSM characters

Based on feedback from this pull request:

https://github.com/alphagov/notifications-admin/pull/3711
---
 app/assets/stylesheets/local/_typography.scss | 6 ++++++
 app/templates/views/pricing/index.html        | 5 ++++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/local/_typography.scss b/app/assets/stylesheets/local/_typography.scss
index 401562515..2e85bf969 100644
--- a/app/assets/stylesheets/local/_typography.scss
+++ b/app/assets/stylesheets/local/_typography.scss
@@ -60,3 +60,9 @@
 .destructive-link--no-visited-state {
   @include destructive-link-style-no-visited-state;
 }
+
+// Font override classes
+.extended-gsm-characters {
+  font-family: $govuk-font-family-tabular;
+  letter-spacing: 0.5em;
+}
diff --git a/app/templates/views/pricing/index.html b/app/templates/views/pricing/index.html
index 81e7709e3..08cb6ce8e 100644
--- a/app/templates/views/pricing/index.html
+++ b/app/templates/views/pricing/index.html
@@ -44,7 +44,10 @@
 
   <h3 class="heading-small" id="long-text-messages">Long text messages</h3>
   <p class="govuk-body">If a text message is longer than 160 characters (including spaces), it’ll be charged as more than one message.</p>
-  <p class="govuk-body">The following characters are charged as 2 characters each: [ ] { } ^ \ | ~ €</p>
+  <p class="govuk-body">
+    The following characters are charged as 2 characters each:<br />
+    <span class="extended-gsm-characters">[]{}^\|~€</span>
+  </p>
 
   <div class="bottom-gutter-3-2">
     {% call mapping_table(