diff --git a/app/assets/images/tour-next.png b/app/assets/images/tour-next.png new file mode 100644 index 000000000..1cdfc8218 Binary files /dev/null and b/app/assets/images/tour-next.png differ diff --git a/app/assets/images/tour/2.png b/app/assets/images/tour/2.png new file mode 100644 index 000000000..4c4a82dbe Binary files /dev/null and b/app/assets/images/tour/2.png differ diff --git a/app/assets/images/tour/3.png b/app/assets/images/tour/3.png new file mode 100644 index 000000000..74d8342cb Binary files /dev/null and b/app/assets/images/tour/3.png differ diff --git a/app/assets/images/tour/4.png b/app/assets/images/tour/4.png new file mode 100644 index 000000000..07d917187 Binary files /dev/null and b/app/assets/images/tour/4.png differ diff --git a/app/assets/stylesheets/app.scss b/app/assets/stylesheets/app.scss index c5e88e8c9..6fbc015c6 100644 --- a/app/assets/stylesheets/app.scss +++ b/app/assets/stylesheets/app.scss @@ -127,4 +127,4 @@ a[rel="external"] { @include media(tablet) { @include external-link-19; } -} \ No newline at end of file +} diff --git a/app/assets/stylesheets/components/banner.scss b/app/assets/stylesheets/components/banner.scss index 540ce1e38..d92d278c3 100644 --- a/app/assets/stylesheets/components/banner.scss +++ b/app/assets/stylesheets/components/banner.scss @@ -71,7 +71,7 @@ a { &:link, &:visited { - color: $text-colour; + padding: $gutter-half; text-decoration: underline; } } @@ -110,13 +110,54 @@ background: $govuk-blue; color: $white; margin-top: $gutter; + padding: $gutter-half; - .heading-medium { + p { margin: 0 0 10px 0; } + &-action { + text-align: right; + } + +} + +.banner-tour { + + @extend %banner; + background: $govuk-blue; + color: $white; + margin-top: $gutter; + padding: $gutter * 2; + + .heading-large { + margin: 0 0 $gutter 0; + } + + p { + + margin-bottom: $gutter; + + &:last-child { + margin-bottom: 0 + } + + & + p { + margin-top: -$gutter-half; + } + + } + a { + @include bold-24; + display: inline-block; + background-image: file-url('tour-next.png'); + background-size: auto 24px; + padding: 0 23px 0 0; + background-position: right 3px; + background-repeat: no-repeat; + &:link, &:visited { color: $white; @@ -124,19 +165,25 @@ &:hover, &:active { - color: $light-blue-25; + background-color: $link-hover-colour; + outline: 10px solid $link-hover-colour; + } + + &:active, + &:focus { + background-color: $yellow; + outline: 10px solid $yellow; } } - .big-number { - - margin-top: 10px; - - &-label { - padding-bottom: 0; - } + img { + max-width: 100%; + display: block; + } + &-image-flush-bottom { + margin: 40px 0 -60px 0; } } diff --git a/app/main/__init__.py b/app/main/__init__.py index 3a0af5a11..0d4d793ae 100644 --- a/app/main/__init__.py +++ b/app/main/__init__.py @@ -23,5 +23,6 @@ from app.main.views import ( api_keys, manage_users, invites, - all_services + all_services, + tour ) diff --git a/app/main/views/add_service.py b/app/main/views/add_service.py index db9628c78..3ef20c86b 100644 --- a/app/main/views/add_service.py +++ b/app/main/views/add_service.py @@ -44,7 +44,7 @@ def add_service(): user_id=session['user_id'], email_from=email_from) - return redirect(url_for('main.service_dashboard', service_id=service_id)) + return redirect(url_for('main.tour', service_id=service_id, page=1)) else: return render_template( 'views/add-service.html', diff --git a/app/main/views/tour.py b/app/main/views/tour.py new file mode 100644 index 000000000..3615b2a9c --- /dev/null +++ b/app/main/views/tour.py @@ -0,0 +1,15 @@ +from flask import render_template +from flask_login import login_required + +from app.main import main + + +@main.route("/services//tour/") +@login_required +def tour(service_id, page): + return render_template( + 'views/tour/{}.html'.format(page), + service_id=service_id, # TODO: fix when Nick’s PR is merged + current_page=page, + next_page=(page + 1) + ) diff --git a/app/templates/views/dashboard/dashboard.html b/app/templates/views/dashboard/dashboard.html index 4fe589ed5..bb97d9c7b 100644 --- a/app/templates/views/dashboard/dashboard.html +++ b/app/templates/views/dashboard/dashboard.html @@ -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 %} +
+ {% include 'views/dashboard/trial-mode-banner.html' %} +
+ {% 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 %} -
- {% include 'views/dashboard/today.html' %} -
+
+ {% include 'views/dashboard/today.html' %} +
- {% include 'views/dashboard/jobs.html' %} - {% endif %} + {% include 'views/dashboard/jobs.html' %} + {% endblock %} diff --git a/app/templates/views/dashboard/get-started.html b/app/templates/views/dashboard/get-started.html index a2fa514d1..ae91dc2df 100644 --- a/app/templates/views/dashboard/get-started.html +++ b/app/templates/views/dashboard/get-started.html @@ -1,30 +1,23 @@ {% from "components/banner.html" import banner_wrapper %} -

Get started

{% if current_user.has_permissions(['manage_templates']) %} -

- You need to set up a template before you can send messages -

-
    -
  1. - {% call banner_wrapper(type="tip") %} - - Set up a text message template - - {% endcall %} -
    2. -
  2. - {% call banner_wrapper(type="tip") %} - - Set up an email template - - {% endcall %} -
    3. -
+ {% call banner_wrapper(type='tour') %} +

You’re ready to get started

+

+ + Set up a text message template + +

+

+ + Set up an email template + +

+ {% endcall %} {% else %} -

+ {% call banner_wrapper(type='mode') %}

You need to ask your service manager to set up some templates before you can send messages

-

+ {% endcall %} {% endif %} diff --git a/app/templates/views/dashboard/trial-mode-banner.html b/app/templates/views/dashboard/trial-mode-banner.html index 3a3c34829..2265c1d10 100644 --- a/app/templates/views/dashboard/trial-mode-banner.html +++ b/app/templates/views/dashboard/trial-mode-banner.html @@ -2,24 +2,12 @@ {% from "components/big-number.html" import big_number %} {% call banner_wrapper(type="mode") %} - -

Trial mode

-

- We’ll only deliver messages to you and members of your team -
- Find out more -

+ Your service is in trial mode
-
-   -
-
- {{ big_number( - service.limit - statistics.get('emails_requested', 0) - statistics.get('sms_requested', 0), - 'messages left today' - ) }} +
+
{% endcall %} diff --git a/app/templates/views/tour/1.html b/app/templates/views/tour/1.html new file mode 100644 index 000000000..c25116f6a --- /dev/null +++ b/app/templates/views/tour/1.html @@ -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') %} +

Trial mode

+

+ To start off with, you can only send messages to yourself. +

+

+ We can remove these restrictions when you’re ready. +

+ + Next + + {% endcall %} + +{% endblock %} diff --git a/app/templates/views/tour/2.html b/app/templates/views/tour/2.html new file mode 100644 index 000000000..ecad22e6a --- /dev/null +++ b/app/templates/views/tour/2.html @@ -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') %} +

Start with templates

+

+ Set up a template like this: +

+

+ A template for a text message with placeholders for the recipients name, document and date +

+ + Next + + {% endcall %} + +{% endblock %} diff --git a/app/templates/views/tour/3.html b/app/templates/views/tour/3.html new file mode 100644 index 000000000..1cef34c1c --- /dev/null +++ b/app/templates/views/tour/3.html @@ -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') %} +

Add recipients

+

+ Add recipients by uploading a .csv spreadsheet: +

+

+ A screenshot of a spreadsheet containing data about three people +

+

+ Developers, you can add data automatically using an API +

+ + Next + + {% endcall %} + +{% endblock %} diff --git a/app/templates/views/tour/4.html b/app/templates/views/tour/4.html new file mode 100644 index 000000000..f1284d3ef --- /dev/null +++ b/app/templates/views/tour/4.html @@ -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') %} +

Send your messages

+

+ Notify merges your data with the template and sends the messages +

+ + Next + + + {% endcall %} + +{% endblock %} diff --git a/tests/app/main/views/test_add_service.py b/tests/app/main/views/test_add_service.py index 1da5c1ab5..d82fbd673 100644 --- a/tests/app/main/views/test_add_service.py +++ b/tests/app/main/views/test_add_service.py @@ -26,7 +26,7 @@ def test_should_add_service_and_redirect_to_next_page(app_, url_for('main.add_service'), data={'name': 'testing the post'}) assert response.status_code == 302 - assert response.location == url_for('main.service_dashboard', service_id=101, _external=True) + assert response.location == url_for('main.tour', service_id=101, page=1, _external=True) assert mock_get_services.called mock_create_service.asset_called_once_with(service_name='testing the post', active=False, diff --git a/tests/app/main/views/test_tour.py b/tests/app/main/views/test_tour.py new file mode 100644 index 000000000..1fe0a0068 --- /dev/null +++ b/tests/app/main/views/test_tour.py @@ -0,0 +1,19 @@ +import pytest +from flask import url_for + +import app + + +@pytest.mark.parametrize("page", range(1, 5)) +def test_should_render_tour_pages( + app_, + api_user_active, + mocker, + page +): + with app_.test_request_context(): + with app_.test_client() as client: + client.login(api_user_active, mocker) + response = client.get(url_for('main.tour', service_id=101, page=page)) + assert response.status_code == 200 + assert 'Next' in response.get_data(as_text=True)