mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-09-05 23:48:26 -04:00
Make the tour interactive
_The code for this is quite hacky and light on tests. But I’d really like to get it in the app for the research tomorrow to see how well the feature works._ This commit changes the tour from being a set of static screens to some help which guides you through the process of sending your first test message. The theory behind this is that what users are really struggling with is the concept of a variable, rather than the relationship between the placeholders and the column headers. And like learning to program, the best way to learn is by taking an example and modifying it to your own needs. This means that when someone adds their first service we set them up an example email template and an example text message template. Then there is a guided, three step process where _all_ the user can do is send a test message to themselves. Once the message is sent, the user still has the example templates which they can edit, rather than having to remember what they’re supposed to be doing.
This commit is contained in:
Chris Hill-Scott
@@ -122,6 +122,7 @@
|
||||
{% else %}
|
||||
<form method="post" enctype="multipart/form-data" action="{{url_for('main.start_job', service_id=current_service.id, upload_id=upload_id)}}" class='page-footer'>
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
|
||||
<input type="hidden" name="help" value="{{ '3' if request.args['help'] else 0 }}" />
|
||||
<input type="submit" class="button" value="{{ send_button_text }}" />
|
||||
<a href="{{ back_link }}" class="page-footer-back-link">Back</a>
|
||||
</form>
|
||||
|
||||
@@ -27,9 +27,9 @@
|
||||
) }}
|
||||
</div>
|
||||
<div class="column-one-third">
|
||||
<label for='template_content' class='placeholder-hint banner-mode' data-module='placeholder-hint' data-textboxes-selector='#template_content,#subject' data-target-textbox-selector="#template_content">
|
||||
<label for='template_content' class='placeholder-hint banner-mode' data-textboxes-selector='#template_content,#subject' data-target-textbox-selector="#template_content">
|
||||
<div class="" id="placeholder-hint" aria-live="polite">
|
||||
<p>Add fields to the subject or message content using ((double brackets))</p>
|
||||
<p>Anything in ((double brackets)) gets replaced when you send this message</p>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
@@ -26,9 +26,9 @@
|
||||
) }}
|
||||
</div>
|
||||
<div class="column-one-third">
|
||||
<label for='template_content' class='placeholder-hint banner-mode' data-module='placeholder-hint' data-textboxes-selector='#template_content' data-target-textbox-selector="#template_content">
|
||||
<label for='template_content' class='placeholder-hint banner-mode' data-textboxes-selector='#template_content' data-target-textbox-selector="#template_content">
|
||||
<div class="" id="placeholder-hint" aria-live="polite">
|
||||
<p>Add fields using ((double brackets))</p>
|
||||
<p>Anything in ((double brackets)) gets replaced when you send this message</p>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
@@ -11,8 +11,11 @@
|
||||
|
||||
{% block maincolumn_content %}
|
||||
|
||||
|
||||
<h1 class="heading-large">Send a test</h1>
|
||||
{% if request.args['help'] %}
|
||||
<h1 class="heading-large">Example text message</h1>
|
||||
{% else %}
|
||||
<h1 class="heading-large">Send a test</h1>
|
||||
{% endif %}
|
||||
|
||||
{% if 'sms' == template.template_type %}
|
||||
<div class="grid-row">
|
||||
@@ -36,7 +39,7 @@
|
||||
<form method="post">
|
||||
{% call(item, row_number) list_table(
|
||||
example,
|
||||
caption="Fill in your {}".format('field' if template.placeholders|length == 1 else 'fields'),
|
||||
caption="Fill in the {}".format('field' if template.placeholders|length == 1 else 'fields'),
|
||||
field_headings=[
|
||||
'<span class="placeholder">{}</span>'.format(recipient_column)|safe
|
||||
] + template.placeholders_as_markup|list
|
||||
@@ -53,7 +56,9 @@
|
||||
{% endfor %}
|
||||
{% endcall %}
|
||||
|
||||
{{ page_footer("Check and confirm", back_link=url_for('.send_messages', service_id=current_service.id, template_id=template.id)) }}
|
||||
{{ page_footer("Check and confirm", back_link=(
|
||||
url_for('.send_messages', service_id=current_service.id, template_id=template.id)) if not request.args['help'] else None
|
||||
) }}
|
||||
</form>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
@@ -1,25 +0,0 @@
|
||||
{% extends "withoutnav_template.html" %}
|
||||
{% from "components/textbox.html" import textbox %}
|
||||
{% from "components/page-footer.html" import page_footer %}
|
||||
{% from "components/banner.html" import banner_wrapper %}
|
||||
|
||||
{% block page_title %}
|
||||
{{heading}} – GOV.UK Notify
|
||||
{% endblock %}
|
||||
|
||||
{% block maincolumn_content %}
|
||||
|
||||
{% call banner_wrapper(type='tour') %}
|
||||
<h2 class="heading-large">{{ heading }}</h2>
|
||||
<p>
|
||||
To start off with, you can only send messages to yourself.
|
||||
</p>
|
||||
<p>
|
||||
We can remove these restrictions when you’re ready.
|
||||
</p>
|
||||
<a href='{{ url_for('.tour', page=next_page) }}'>
|
||||
Next
|
||||
</a>
|
||||
{% endcall %}
|
||||
|
||||
{% endblock %}
|
||||
@@ -1,37 +0,0 @@
|
||||
{% extends "withoutnav_template.html" %}
|
||||
{% from "components/textbox.html" import textbox %}
|
||||
{% from "components/page-footer.html" import page_footer %}
|
||||
{% from "components/banner.html" import banner_wrapper %}
|
||||
|
||||
{% block page_title %}
|
||||
{{heading}} – GOV.UK Notify
|
||||
{% endblock %}
|
||||
|
||||
{% block maincolumn_content %}
|
||||
|
||||
{% call banner_wrapper(type='tour') %}
|
||||
<h2 class="heading-large">{{ heading }}</h2>
|
||||
<p>
|
||||
Set up a template like this:
|
||||
</p>
|
||||
<p>
|
||||
<picture>
|
||||
<source
|
||||
type="image/svg+xml"
|
||||
srcset="/static/images/tour/{{ current_page }}.svg"
|
||||
alt="A template for a text message with placeholders for the recipients name, document and date"
|
||||
width="554" height="97"
|
||||
>
|
||||
<img
|
||||
src="/static/images/tour/{{ current_page }}.png"
|
||||
width="554" height="97"
|
||||
alt="A screenshot of a spreadsheet containing data about three people"
|
||||
>
|
||||
</picture>
|
||||
</p>
|
||||
<a href='{{ url_for('.tour', page=next_page) }}'>
|
||||
Next
|
||||
</a>
|
||||
{% endcall %}
|
||||
|
||||
{% endblock %}
|
||||
@@ -1,40 +0,0 @@
|
||||
{% extends "withoutnav_template.html" %}
|
||||
{% from "components/textbox.html" import textbox %}
|
||||
{% from "components/page-footer.html" import page_footer %}
|
||||
{% from "components/banner.html" import banner_wrapper %}
|
||||
|
||||
{% block page_title %}
|
||||
{{heading}} – GOV.UK Notify
|
||||
{% endblock %}
|
||||
|
||||
{% block maincolumn_content %}
|
||||
|
||||
{% call banner_wrapper(type='tour') %}
|
||||
<h2 class="heading-large">{{ heading }}</h2>
|
||||
<p>
|
||||
Add recipients by uploading a .csv spreadsheet:
|
||||
</p>
|
||||
<p>
|
||||
<picture>
|
||||
<source
|
||||
type="image/svg+xml"
|
||||
srcset="/static/images/tour/{{ current_page }}.svg"
|
||||
alt="A screenshot of a spreadsheet containing data about three people"
|
||||
width="554" height="118"
|
||||
>
|
||||
<img
|
||||
src="/static/images/tour/{{ current_page }}.png"
|
||||
width="554" height="118"
|
||||
alt="A screenshot of a spreadsheet containing data about three people"
|
||||
>
|
||||
</picture>
|
||||
</p>
|
||||
<p>
|
||||
Developers, you can add data automatically using an API
|
||||
</p>
|
||||
<a href='{{ url_for('.tour', page=next_page) }}'>
|
||||
Next
|
||||
</a>
|
||||
{% endcall %}
|
||||
|
||||
{% endblock %}
|
||||
@@ -1,36 +0,0 @@
|
||||
{% extends "withoutnav_template.html" %}
|
||||
{% from "components/textbox.html" import textbox %}
|
||||
{% from "components/page-footer.html" import page_footer %}
|
||||
{% from "components/banner.html" import banner_wrapper %}
|
||||
|
||||
{% block page_title %}
|
||||
{{ heading }} – GOV.UK Notify
|
||||
{% endblock %}
|
||||
|
||||
{% block maincolumn_content %}
|
||||
|
||||
{% call banner_wrapper(type='tour') %}
|
||||
<h2 class="heading-large">{{ heading }}</h2>
|
||||
<p>
|
||||
Notify merges your data with the template and sends the messages
|
||||
</p>
|
||||
<a href="{{ url_for('.show_all_services_or_dashboard') }}">
|
||||
Next
|
||||
</a>
|
||||
<picture class="banner-tour-image-flush-bottom">
|
||||
<source
|
||||
type="image/svg+xml"
|
||||
srcset="/static/images/tour/{{ current_page }}.svg"
|
||||
alt="Three mobiles phones, each showing a text message personalised with data about the recipient"
|
||||
width="840" height="290"
|
||||
>
|
||||
<img
|
||||
src="/static/images/tour/{{ current_page }}.png"
|
||||
class="banner-tour-image-flush-bottom"
|
||||
width="840" height="290"
|
||||
alt="Three mobiles phones, each showing a text message personalised with data about the recipient"
|
||||
>
|
||||
</picture>
|
||||
{% endcall %}
|
||||
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user