From 5d0eb7d211c2c34ec79b11cfdef1eeed8931b0d4 Mon Sep 17 00:00:00 2001 From: Jonathan Bobel Date: Tue, 10 Oct 2023 11:07:08 -0400 Subject: [PATCH] 819 - Make template help more prominent --- .../components/inset-text/template.njk | 2 +- .../templates/guidance-character-count.html | 22 +++++--- .../partials/templates/guidance-links.html | 20 +++++--- .../templates/guidance-optional-content.html | 36 +++++++------ .../templates/guidance-personalisation.html | 12 ----- .../templates/guidance-personalization.html | 17 +++++++ app/templates/views/edit-email-template.html | 2 +- app/templates/views/edit-sms-template.html | 50 ++++++++++++------- 8 files changed, 97 insertions(+), 64 deletions(-) delete mode 100644 app/templates/partials/templates/guidance-personalisation.html create mode 100644 app/templates/partials/templates/guidance-personalization.html diff --git a/app/templates/components/components/inset-text/template.njk b/app/templates/components/components/inset-text/template.njk index ade008fed..9e0e6fcdf 100644 --- a/app/templates/components/components/inset-text/template.njk +++ b/app/templates/components/components/inset-text/template.njk @@ -1,4 +1,4 @@ -
{{ params.html | safe if params.html else params.text }}
diff --git a/app/templates/partials/templates/guidance-character-count.html b/app/templates/partials/templates/guidance-character-count.html index d99cc087a..4cf377621 100644 --- a/app/templates/partials/templates/guidance-character-count.html +++ b/app/templates/partials/templates/guidance-character-count.html @@ -1,8 +1,14 @@ -

Message length

-

- If your message is long then it will - cost more. -

-

- See pricing for details. -

+

+ +

+
+

+ If your message is long then it will + cost more. +

+

+ See pricing for details. +

+
diff --git a/app/templates/partials/templates/guidance-links.html b/app/templates/partials/templates/guidance-links.html index 6ed7a2d68..231902d22 100644 --- a/app/templates/partials/templates/guidance-links.html +++ b/app/templates/partials/templates/guidance-links.html @@ -1,9 +1,15 @@ {% from "components/components/inset-text/macro.njk" import usaInsetText %} -

Links and URLs

-

- Always use full URLs, starting with https://. For example: -{{ usaInsetText({ - "text": "Apply now at https://www.usa.gov/example", - "classes": "usa-body"}) -}} +

+ +

+
+

+ Always use full URLs, starting with https://. For example: + {{ usaInsetText({ + "text": "Apply now at https://www.usa.gov/example", + "classes": "usa-body"}) + }} +

\ No newline at end of file diff --git a/app/templates/partials/templates/guidance-optional-content.html b/app/templates/partials/templates/guidance-optional-content.html index 8c97be5b3..d3bc0dba5 100644 --- a/app/templates/partials/templates/guidance-optional-content.html +++ b/app/templates/partials/templates/guidance-optional-content.html @@ -1,21 +1,25 @@ {% from "components/components/inset-text/macro.njk" import usaInsetText %} -

- Optional content -

-

- Use double brackets and ‘??’ to define optional content. -

-

- For example if you only want to show something to people who are under - 18: -

-{{ usaInsetText({ +

+ +

+
+

+ Use double brackets and ‘??’ to define optional content. +

+

+ For example if you only want to show something to people who are under + 18: +

+ {{ usaInsetText({ "text": "((under18??Please get your application signed by a parent or guardian.))", "classes": "usa-body"}) -}} -

- For each person you send this message to, specify ‘yes’ or ‘no’ to - show or hide this content. -

+ }} +

+ For each person you send this message to, specify ‘yes’ or ‘no’ to + show or hide this content. +

+
diff --git a/app/templates/partials/templates/guidance-personalisation.html b/app/templates/partials/templates/guidance-personalisation.html deleted file mode 100644 index c995e5e5e..000000000 --- a/app/templates/partials/templates/guidance-personalisation.html +++ /dev/null @@ -1,12 +0,0 @@ -{% from "components/components/inset-text/macro.njk" import usaInsetText %} - -

- Personalization -

-

- Use double brackets to personalize your message: -

-{{ usaInsetText({ - "text": "Hello ((first name)), your reference is ((ref number))", - "classes": ""}) -}} diff --git a/app/templates/partials/templates/guidance-personalization.html b/app/templates/partials/templates/guidance-personalization.html new file mode 100644 index 000000000..bc6a358a5 --- /dev/null +++ b/app/templates/partials/templates/guidance-personalization.html @@ -0,0 +1,17 @@ +{% from "components/components/inset-text/macro.njk" import usaInsetText %} + +

+ +

+
+

+ Use double brackets to personalize your message: +

+ {{ usaInsetText({ + "text": "Hello ((first name)), your reference is ((ref number))", + "classes": ""}) + }} +
+ diff --git a/app/templates/views/edit-email-template.html b/app/templates/views/edit-email-template.html index b61c9098c..d658bb6de 100644 --- a/app/templates/views/edit-email-template.html +++ b/app/templates/views/edit-email-template.html @@ -37,7 +37,7 @@
{% include "partials/templates/guidance-formatting.html" %} - {% include "partials/templates/guidance-personalisation.html" %} + {% include "partials/templates/guidance-personalization.html" %} {% include "partials/templates/guidance-optional-content.html" %} {% include "partials/templates/guidance-links.html" %} {% include "partials/templates/guidance-send-a-document.html" %} diff --git a/app/templates/views/edit-sms-template.html b/app/templates/views/edit-sms-template.html index 0c22a8bc5..319fbe37e 100644 --- a/app/templates/views/edit-sms-template.html +++ b/app/templates/views/edit-sms-template.html @@ -20,11 +20,9 @@ {{ page_header('{} text message template'.format(heading_action)) }} - {{ usaAlert({ - "type": "info", - "text": "Don't worry, saving the template will not send", - "classes": "margin-top-2 usa-button--secondary" - }) }} + + How to customize your message + {% if current_service.prefix_sms %} {% set content_hint = 'Your service name will be added to the start of your message. You can turn this off in Settings.' %} @@ -32,7 +30,7 @@ {% call form_wrapper() %}
-
+
{{ form.name(param_extensions={ "extra_form_group_classes": "margin-bottom-2", "hint": {"text": "Your recipients will not see this"} @@ -50,22 +48,36 @@ {{ form.process_type }} {% endif %}
-
-
-
-   +
+
+
+
+   +
- {{ page_footer('Save') }} -

- After saving, you'll have the option to send 🚀 -

-
- {% include "partials/templates/guidance-personalisation.html" %} - {% include "partials/templates/guidance-optional-content.html" %} - {% include "partials/templates/guidance-links.html" %} - {% include "partials/templates/guidance-character-count.html" %} +
+
+ {{ page_footer('Save') }} +
+
+

+ After saving, you'll have the option to send. +

+
+
+ +
+

How to customize your message

+
+ {% include "partials/templates/guidance-personalization.html" %} + {% include "partials/templates/guidance-optional-content.html" %} + {% include "partials/templates/guidance-links.html" %} + {% include "partials/templates/guidance-character-count.html" %} +
{% endcall %}