Merge pull request #370 from alphagov/add-tour

Make first time use clearer
This commit is contained in:
Chris Hill-Scott
2016-04-04 13:40:37 +01:00
30 changed files with 343 additions and 212 deletions

View File

@@ -15,25 +15,6 @@
When people receive notifications, who should they be from?
</h1>
<p>
Be specific to your service. Remember that there might be
other people in your organisation using GOV.UK Notify.
</p>
<p>
Users will see this:
</p>
<ul class="list-bullet bottom-gutter">
<li>
at the start of every text message, eg Vehicle tax: we received your
payment, thank you
</li>
<li>
as your email sender name
</li>
</ul>
<form autocomplete="off" method="post">
{{ textbox(form.name, hint="You can change this later") }}

View File

@@ -22,13 +22,6 @@
developer documentation</a>.
</p>
{{ banner(
'You can only send messages to yourself until you <a href="{}">request to go live</a>'.format(
url_for('.service_request_to_go_live', service_id=service_id)
)|safe,
type='important'
) }}
<h2 class="api-key-name">
Service ID
</h2>

View File

@@ -37,17 +37,6 @@
{% endif %}
</div>
{% if not has_jobs %}
{% if current_user.has_permissions(permissions=['send_texts', 'send_emails', 'send_letters'], any_=True) %}
{{ banner(
"""
Send yourself a test
""",
subhead='Next step:',
type="tip"
)}}
{% endif %}
{% endif %}
<div class="grid-row">
{% for template in templates %}
<div class="column-two-thirds">

View File

@@ -5,26 +5,26 @@
{% endblock %}
{% block maincolumn_content %}
{% if not templates and current_user.has_permissions(['send_texts', 'send_emails', 'send_letters'], any_=True) %}
{% include 'views/dashboard/get-started.html' %}
{% elif service.restricted %}
<div class="dashboard">
{% include 'views/dashboard/trial-mode-banner.html' %}
</div>
{% endif %}
{% if service.restricted %}
{% include 'views/dashboard/trial-mode-banner.html' %}
{% endif %}
{% if not templates and current_user.has_permissions(['send_texts', 'send_emails', 'send_letters'], any_=True) %}
{% include 'views/dashboard/get-started.html' %}
{% endif %}
{% if templates %}
<div
data-module="update-content"
data-resource="{{url_for(".service_dashboard_updates", service_id=service_id)}}"
data-key="today"
data-interval-seconds="10"
>
{% include 'views/dashboard/today.html' %}
</div>
<div
data-module="update-content"
data-resource="{{url_for(".service_dashboard_updates", service_id=service_id)}}"
data-key="today"
data-interval-seconds="10"
>
{% include 'views/dashboard/today.html' %}
</div>
{% include 'views/dashboard/jobs.html' %}
{% endif %}
{% include 'views/dashboard/jobs.html' %}
{% endblock %}

View File

@@ -1,30 +1,23 @@
{% from "components/banner.html" import banner_wrapper %}
<h2 class="heading-medium">Get started</h2>
{% if current_user.has_permissions(['manage_templates']) %}
<p>
You need to set up a template before you can send messages
</p>
<ol class="grid-row">
<li class="column-half">
{% call banner_wrapper(type="tip") %}
<a href='{{ url_for(".add_service_template", service_id=service_id, template_type="sms") }}' style="white-space: nowrap;">
Set up a text message template
</a>
{% endcall %}
</li>
<li class="column-half">
{% call banner_wrapper(type="tip") %}
<a href='{{ url_for(".add_service_template", service_id=service_id, template_type="email") }}'>
Set up an email template
</a>
{% endcall %}
</li>
</ol>
{% call banner_wrapper(type='tour') %}
<h2 class="heading-large">Youre ready to get started</h2>
<p>
<a href='{{ url_for(".add_service_template", service_id=service_id, template_type="sms") }}'>
Set up a text message template
</a>
</p>
<p>
<a href='{{ url_for(".add_service_template", service_id=service_id, template_type="email") }}'>
Set up an email template
</a>
</p>
{% endcall %}
{% else %}
<p>
{% call banner_wrapper(type='mode') %}
<p>
You need to ask your service manager to set up some templates before you can send messages
</p>
</p>
{% endcall %}
{% endif %}

View File

@@ -2,24 +2,12 @@
{% from "components/big-number.html" import big_number %}
{% call banner_wrapper(type="mode") %}
<h2 class="heading-medium">Trial mode</h2>
<div class="grid-row">
<div class="column-one-half">
<p>
Well only deliver messages to you and members of your team
<br>
<a href="{{ url_for(".help", _anchor="trial-mode") }}">Find out more</a>
</p>
Your service is in trial mode
</div>
<div class="column-one-sixth">
&nbsp;
</div>
<div class="column-one-third">
{{ big_number(
service.limit - statistics.get('emails_requested', 0) - statistics.get('sms_requested', 0),
'messages left today'
) }}
<div class="column-one-half">
<a href="{{ url_for(".help", _anchor="trial-mode") }}" class="banner-mode-action">Find out more</a>
</div>
</div>
{% endcall %}

View File

@@ -20,23 +20,20 @@
</div>
<div class="column-two-thirds">
{{ textbox(form.template_content, highlight_tags=True, width='1-1') }}
{{ page_footer(
'Save',
delete_link=url_for('.delete_service_template', service_id=service_id, template_id=template_id) if template_id or None,
delete_link_text='Delete this template'
) }}
</div>
<div class="column-one-third">
<label for='template_content' class='edit-template-placeholder-hint'>
<p>
Add personalisation with double brackets, eg Dear ((name))
</p>
<p>
Youll fill in the real data when you send a message.
</p>
<label for='template_content' class='placeholder-hint'>
<div class="banner-mode" id="placeholder-hint" aria-live="polite">
<p>Add fields using ((double brackets))</p>
</div>
</label>
</div>
</div>
{{ page_footer(
'Save',
delete_link=url_for('.delete_service_template', service_id=service_id, template_id=template_id) if template_id or None,
delete_link_text='Delete this template'
) }}
</form>

View File

@@ -19,23 +19,20 @@
</div>
<div class="column-two-thirds">
{{ textbox(form.template_content, highlight_tags=True, width='1-1') }}
{{ page_footer(
'Save',
delete_link=url_for('.delete_service_template', service_id=service_id, template_id=template_id) if template_id or None,
delete_link_text='Delete this template'
) }}
</div>
<div class="column-one-third">
<label for='template_content' class='edit-template-placeholder-hint'>
<p>
Add personalisation with double brackets, eg Dear ((name))
</p>
<p>
You'll have to add the real data when you send a message.
</p>
<label for='template_content' class='placeholder-hint'>
<div class="banner-mode" id="placeholder-hint" aria-live="polite">
<p>Add fields using ((double brackets))</p>
</div>
</label>
</div>
</div>
{{ page_footer(
'Save',
delete_link=url_for('.delete_service_template', service_id=service_id, template_id=template_id) if template_id or None,
delete_link_text='Delete this template'
) }}
</form>

View File

@@ -36,13 +36,6 @@
{{ banner('Are you sure you want to delete?', 'dangerous', delete_button="Yes, delete this thing")}}
{{ banner(
'<a href="#">Send your first message</a>'|safe,
subhead='Get started',
type='tip'
)}}
{{ banner('You could go to jail', 'important')}}
</div>
</div>

View File

@@ -0,0 +1,25 @@
{% 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">Trial mode</h2>
<p>
To start off with, you can only send messages to yourself.
</p>
<p>
We can remove these restrictions when youre ready.
</p>
<a href='{{ url_for('.tour', service_id=service_id, page=next_page) }}'>
Next
</a>
{% endcall %}
{% endblock %}

View File

@@ -0,0 +1,29 @@
{% 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">Start with templates</h2>
<p>
Set up a template like this:
</p>
<p>
<img
src="/static/images/tour/{{ current_page }}.png"
width="554" height="97"
alt="A template for a text message with placeholders for the recipients name, document and date"
>
</p>
<a href='{{ url_for('.tour', service_id=service_id, page=next_page) }}'>
Next
</a>
{% endcall %}
{% endblock %}

View File

@@ -0,0 +1,32 @@
{% 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">Add recipients</h2>
<p>
Add recipients by uploading a .csv spreadsheet:
</p>
<p>
<img
src="/static/images/tour/{{ current_page }}.png"
width="554" height="118"
alt="A screenshot of a spreadsheet containing data about three people"
>
</p>
<p>
Developers, you can add data automatically using an API
</p>
<a href='{{ url_for('.tour', service_id=service_id, page=next_page) }}'>
Next
</a>
{% endcall %}
{% endblock %}

View File

@@ -0,0 +1,28 @@
{% 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">Send your messages</h2>
<p>
Notify merges your data with the template and sends the messages
</p>
<a href="{{ url_for('.service_dashboard', service_id=service_id) }}">
Next
</a>
<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"
>
{% endcall %}
{% endblock %}