Update to top navigation active state(s) (#538)

* Updated top navigation active states
* Updated pricing page
This commit is contained in:
Jonathan Bobel
2023-06-09 10:59:01 -04:00
committed by GitHub
parent e0d2d74067
commit d98a8ceada
7 changed files with 206 additions and 181 deletions
+1 -1
View File
@@ -11,7 +11,7 @@ from app.main.views.sub_navigation_dictionaries import using_notify_nav
CURRENT_SMS_RATE = '1.72' CURRENT_SMS_RATE = '1.72'
@main.route('/pricing') @main.route('/using-notify/pricing')
def pricing(): def pricing():
return render_template( return render_template(
'views/pricing/index.html', 'views/pricing/index.html',
@@ -8,10 +8,10 @@ def features_nav():
# "name": "Emails", # "name": "Emails",
# "link": "main.features_email", # "link": "main.features_email",
# }, # },
{ # {
"name": "Text messages", # "name": "Text messages",
"link": "main.features_sms", # "link": "main.features_sms",
}, # },
] ]
}, },
{ {
@@ -35,14 +35,14 @@ def using_notify_nav():
"name": "Get started", "name": "Get started",
"link": "main.get_started", "link": "main.get_started",
}, },
{
"name": "Pricing",
"link": "main.pricing",
},
{ {
"name": "Trial mode", "name": "Trial mode",
"link": "main.trial_mode_new", "link": "main.trial_mode_new",
}, },
{
"name": "Pricing",
"link": "main.pricing",
},
{ {
"name": "Delivery status", "name": "Delivery status",
"link": "main.message_status", "link": "main.message_status",
+7 -3
View File
@@ -48,15 +48,19 @@ class HeaderNavigation(Navigation):
'features', 'features',
'features_email', 'features_email',
'features_sms', 'features_sms',
'message_status',
'roadmap', 'roadmap',
'security', 'security',
'terms', 'terms',
'trial_mode_new', },
'using_notify': {
'get_started',
'using_notify', 'using_notify',
'pricing',
'trial_mode_new',
'message_status',
'guidance_index',
}, },
'pricing': { 'pricing': {
'pricing',
'how_to_pay', 'how_to_pay',
'billing_details', 'billing_details',
}, },
+22 -12
View File
@@ -46,11 +46,6 @@
{% if current_user.is_authenticated %} {% if current_user.is_authenticated %}
{% if current_user.platform_admin %} {% if current_user.platform_admin %}
{% set navigation = [ {% set navigation = [
{
"href": url_for('main.support'),
"text": "Support",
"active": header_navigation.is_selected('support')
},
{ {
"href": url_for('main.user_profile'), "href": url_for('main.user_profile'),
"text": current_user.name, "text": current_user.name,
@@ -64,13 +59,28 @@
{ {
"href": url_for('main.sign_out'), "href": url_for('main.sign_out'),
"text": "Sign out" "text": "Sign out"
},
{
"href": url_for('main.support'),
"text": "Contact us",
"active": header_navigation.is_selected('support')
} }
] %} ] %}
{% else %} {% else %}
{% set navigation = [ {% set navigation = [
{
"href": url_for('main.get_started'),
"text": "Using notify",
"active": header_navigation.is_selected('using_notify')
},
{
"href": url_for('main.features'),
"text": "Features",
"active": header_navigation.is_selected('features')
},
{ {
"href": url_for('main.support'), "href": url_for('main.support'),
"text": "Support", "text": "Contact us",
"active": header_navigation.is_selected('support') "active": header_navigation.is_selected('support')
}, },
{ {
@@ -87,9 +97,9 @@
{% else %} {% else %}
{% set navigation = [ {% set navigation = [
{ {
"href": url_for('main.support'), "href": url_for('main.get_started'),
"text": "Support", "text": "Using notify",
"active": header_navigation.is_selected('support') "active": header_navigation.is_selected('using_notify')
}, },
{ {
"href": url_for('main.features'), "href": url_for('main.features'),
@@ -97,9 +107,9 @@
"active": header_navigation.is_selected('features') "active": header_navigation.is_selected('features')
}, },
{ {
"href": url_for('main.pricing'), "href": url_for('main.support'),
"text": "Pricing", "text": "Contact us",
"active": header_navigation.is_selected('pricing') "active": header_navigation.is_selected('support')
}, },
{ {
"href": url_for('main.sign_in'), "href": url_for('main.sign_in'),
+1 -1
View File
@@ -16,7 +16,7 @@
</div> </div>
<div class="tablet:grid-col-10 padding-left-4 sub-content"> <div class="tablet:grid-col-10 padding-left-4 sub-content">
{% else %} {% else %}
<div class="tablet:grid-col-12"> <div class="tablet:grid-col-10">
{% endif %} {% endif %}
{% block content_column_content %} {% block content_column_content %}
+165 -154
View File
@@ -6,51 +6,60 @@
{% extends "content_template.html" %} {% extends "content_template.html" %}
{% block per_page_title %} {% block per_page_title %}
Pricing Pricing
{% endblock %} {% endblock %}
{% block content_column_content %} {% block content_column_content %}
<h1 class="font-body-2xl margin-bottom-3">Pricing</h1> <h1 class="font-body-2xl margin-bottom-3">Pricing</h1>
{{ content_metadata( {{ content_metadata(
data={ data={
"Last updated": "Feb 27, 2023" "Last updated": "Feb 27, 2023"
} }
) }} ) }}
<p>U.S. Notify is free to use unless you:</p> <p>U.S. Notify is free to use unless you:</p>
<ul class="list list-bullet"> <ul class="list list-bullet">
<li>exceed your <a class="govuk-link govuk-link--no-visited-state" href="#text-messages">free text message allowance</a></li> <li>exceed your <a class="usa-link" href="#text-messages">free text message
</ul> allowance</a></li>
</ul>
<p>Youll only pay for the additional text messages that you send. Theres no monthly charge, no setup fee and no procurement cost.</p> <p>Youll only pay for the additional text messages that you send. Theres no monthly charge, no setup fee and no
procurement cost.</p>
<p> <p>
{% if not current_user.is_authenticated %} {% if not current_user.is_authenticated %}
<a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('main.register') }}">Create an account,</a> then add your unique service(s).</p> <a class="usa-link" href="{{ url_for('main.register') }}">Create an account,</a> then
{% else %} add your unique service(s).
Additional unique services may be added, although moving each service out of trial mode is subject to approval by the U.S. Notify team. </p>
{% endif %} {% else %}
</p> Additional unique services may be added, although moving each service out of trial mode is subject to approval by the
U.S. Notify team.
{% endif %}
</p>
<p>When you add a new service it will start in <a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('main.trial_mode_new') }}">trial mode</a>.</p> <p>When you add a new service it will start in <a class="usa-link"
href="{{ url_for('main.trial_mode_new') }}">trial mode</a>.</p>
<!-- <h2 class="font-body-lg" id="emails">Emails</h2> <!-- <h2 class="font-body-lg" id="emails">Emails</h2>
<p>Its free to send emails through Notify.</p> --> <p>Its free to send emails through Notify.</p> -->
<h2 class="font-body-lg" id="text-messages">Text messages</h2> <h2 class="font-body-lg" id="text-messages">Text messages</h2>
<p>During pilot phase, each service has an annual allowance of 250,000 free text messages. Once this allowance is met, the application will stop delivering messages.</p> <p>During pilot phase, each service has an annual allowance of 250,000 free text messages. Once this allowance is met,
<!-- <p>When a service has used its annual allowance, it costs {{ sms_rate }} pence (plus VAT) for each text message you send.</p> --> the application will stop delivering messages.</p>
<p>Youll use more messages towards the allowance, if you send <a class="govuk-link govuk-link--no-visited-state" href="#long-text-messages">text messages longer than 160 characters</a>.</p> <!-- <p>When a service has used its annual allowance, it costs {{ sms_rate }} pence (plus VAT) for each text message you send.</p> -->
<p>You may also use more messages if you:</p> <p>Youll use more messages towards the allowance, if you send <a class="usa-link"
<ul class="list list-bullet"> href="#long-text-messages">text messages longer than 160 characters</a>.</p>
<li>use certain <a class="govuk-link govuk-link--no-visited-state" href="#symbols">signs and symbols</a></li> <p>You may also use more messages if you:</p>
<li>use <a class="govuk-link govuk-link--no-visited-state" href="#accents">accents and accented letters</a></li> <ul class="list list-bullet">
<li>send text messages to <a class="govuk-link govuk-link--no-visited-state" href="#international-numbers">international numbers</a></li> <li>use certain <a class="usa-link" href="#symbols">signs and symbols</a></li>
</ul> <li>use <a class="usa-link" href="#accents">accents and accented letters</a></li>
<li>send text messages to <a class="usa-link"
href="#international-numbers">international numbers</a></li>
</ul>
<!-- <p>See <a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('main.how_to_pay') }}">how to pay</a>. <!-- <p>See <a class="usa-link" href="{{ url_for('main.how_to_pay') }}">how to pay</a>.
<h3 class="font-body-lg" id="free-text-message-allowance">Free text message allowance</h3> <h3 class="font-body-lg" id="free-text-message-allowance">Free text message allowance</h3>
@@ -62,136 +71,138 @@
</ul> </ul>
<p>Each unique service you add has a separate allowance.</p> --> <p>Each unique service you add has a separate allowance.</p> -->
<h3 class="font-body-lg" id="long-text-messages">Long text messages</h3> <h3 class="font-body-lg" id="long-text-messages">Long text messages</h3>
<p>If a text message is longer than 160 characters (including spaces), it counts as more than one message.</p> <p>If a text message is longer than 160 characters (including spaces), it counts as more than one message.</p>
<div class="bottom-gutter-3-2"> <div class="bottom-gutter-3-2">
{% call mapping_table( {% call mapping_table(
caption='Text message pricing', caption='Text message pricing',
field_headings=['Message length', 'Charge'], field_headings=['Message length', 'Charge'],
field_headings_visible=True, field_headings_visible=True,
caption_visible=False caption_visible=False
) %} ) %}
{% for message_length, charge in [ {% for message_length, charge in [
('Up to 160 characters', '1 text message'), ('Up to 160 characters', '1 text message'),
('Up to 306 characters', '2 text messages'), ('Up to 306 characters', '2 text messages'),
('Up to 459 characters', '3 text messages'), ('Up to 459 characters', '3 text messages'),
('Up to 612 characters', '4 text messages'), ('Up to 612 characters', '4 text messages'),
('Up to 765 characters', '5 text messages'), ('Up to 765 characters', '5 text messages'),
('Up to 918 characters', '6 text messages'), ('Up to 918 characters', '6 text messages'),
] %} ] %}
{% call row() %} {% call row() %}
{{ text_field(message_length) }} {{ text_field(message_length) }}
{{ text_field(charge) }} {{ text_field(charge) }}
{% endcall %} {% endcall %}
{% endfor %} {% endfor %}
{% endcall %} {% endcall %}
</div> </div>
<h3 class="font-body-lg" id="symbols">Signs and symbols</h3> <h3 class="font-body-lg" id="symbols">Signs and symbols</h3>
<p> <p>
The following signs and symbols count as 2 characters each:<br /> The following signs and symbols count as 2 characters each:<br />
<span class="extended-gsm-characters">[]{}^\|~$</span> <span class="extended-gsm-characters">[]{}^\|~$</span>
</p> </p>
<p>Using them can increase the cost of sending text messages.</p> <p>Using them can increase the cost of sending text messages.</p>
<h3 class="font-body-lg" id="accents">Accents and accented characters</h3> <h3 class="font-body-lg" id="accents">Accents and accented characters</h3>
<p>Some languages use accented characters.</p> <p>Some languages use accented characters.</p>
<p>The following accented characters do not affect the cost of sending text messages: Ä, É, Ö, Ü, à, ä, é, è, ì, ò, ö, ù, ü.</p> <p>The following accented characters do not affect the cost of sending text messages: Ä, É, Ö, Ü, à, ä, é, è, ì, ò, ö,
<p>Using other accented characters can increase the cost of sending text messages.<p> ù, ü.</p>
<p>Using other accented characters can increase the cost of sending text messages.
<p>
{% set accentedChars %} {% set accentedChars %}
<div class="bottom-gutter-3-2"> <div class="bottom-gutter-3-2">
{% call mapping_table( {% call mapping_table(
caption='Accented characters that affect text message charges', caption='Accented characters that affect text message charges',
field_headings=['Character', 'Description'], field_headings=['Character', 'Description'],
field_headings_visible=True, field_headings_visible=True,
caption_visible=False caption_visible=False
) %} ) %}
{% for letter, description in [ {% for letter, description in [
('Â', 'Capital letter A with circumflex'), ('Â', 'Capital letter A with circumflex'),
('Á', 'Capital letter A with acute'), ('Á', 'Capital letter A with acute'),
('À', 'Capital letter A with grave'), ('À', 'Capital letter A with grave'),
('Ê', 'Capital letter E with circumflex'), ('Ê', 'Capital letter E with circumflex'),
('È', 'Capital letter E with grave'), ('È', 'Capital letter E with grave'),
('Ë', 'Capital letter E with dieresis'), ('Ë', 'Capital letter E with dieresis'),
('Î', 'Capital letter I with circumflex'), ('Î', 'Capital letter I with circumflex'),
('Í', 'Capital letter I with acute'), ('Í', 'Capital letter I with acute'),
('Ì', 'Capital letter I with grave'), ('Ì', 'Capital letter I with grave'),
('Ï', 'Capital letter I with dieresis'), ('Ï', 'Capital letter I with dieresis'),
('Ô', 'Capital letter O with circumflex'), ('Ô', 'Capital letter O with circumflex'),
('Ó', 'Capital letter O with acute'), ('Ó', 'Capital letter O with acute'),
('Ò', 'Capital letter O with grave'), ('Ò', 'Capital letter O with grave'),
('Û', 'Capital letter U with circumflex'), ('Û', 'Capital letter U with circumflex'),
('Ú', 'Capital letter U with acute'), ('Ú', 'Capital letter U with acute'),
('Ù', 'Capital letter U with grave'), ('Ù', 'Capital letter U with grave'),
('Ŵ', 'Capital letter W with circumflex'), ('Ŵ', 'Capital letter W with circumflex'),
('Ẃ', 'Capital letter W with acute'), ('Ẃ', 'Capital letter W with acute'),
('Ẁ', 'Capital letter W with grave'), ('Ẁ', 'Capital letter W with grave'),
('Ẅ', 'Capital letter W with dieresis'), ('Ẅ', 'Capital letter W with dieresis'),
('Ŷ', 'Capital letter Y with circumflex'), ('Ŷ', 'Capital letter Y with circumflex'),
('Ý', 'Capital letter Y with acute'), ('Ý', 'Capital letter Y with acute'),
('Ỳ', 'Capital letter Y with grave'), ('Ỳ', 'Capital letter Y with grave'),
('Ÿ', 'Capital letter Y with dieresis'), ('Ÿ', 'Capital letter Y with dieresis'),
('â', 'Lower case letter a with circumflex'), ('â', 'Lower case letter a with circumflex'),
('á', 'Lower case letter a with acute'), ('á', 'Lower case letter a with acute'),
('ê', 'Lower case letter e with circumflex'), ('ê', 'Lower case letter e with circumflex'),
('ë', 'Lower case letter e with dieresis'), ('ë', 'Lower case letter e with dieresis'),
('î', 'Lower case letter i with circumflex'), ('î', 'Lower case letter i with circumflex'),
('í', 'Lower case letter i with acute'), ('í', 'Lower case letter i with acute'),
('ï', 'Lower case letter i with dieresis'), ('ï', 'Lower case letter i with dieresis'),
('ô', 'Lower case letter o with circumflex'), ('ô', 'Lower case letter o with circumflex'),
('ó', 'Lower case letter o with acute'), ('ó', 'Lower case letter o with acute'),
('û', 'Lower case letter u with circumflex'), ('û', 'Lower case letter u with circumflex'),
('ú', 'Lower case letter u with acute'), ('ú', 'Lower case letter u with acute'),
('ŵ', 'Lower case letter w with circumflex'), ('ŵ', 'Lower case letter w with circumflex'),
('ẃ', 'Lower case letter w with acute'), ('ẃ', 'Lower case letter w with acute'),
('ẁ', 'Lower case letter w with grave'), ('ẁ', 'Lower case letter w with grave'),
('ẅ', 'Lower case letter w with dieresis'), ('ẅ', 'Lower case letter w with dieresis'),
('ŷ', 'Lower case letter y with circumflex'), ('ŷ', 'Lower case letter y with circumflex'),
('ý', 'Lower case letter y with acute'), ('ý', 'Lower case letter y with acute'),
('ỳ', 'Lower case letter y with grave'), ('ỳ', 'Lower case letter y with grave'),
('ÿ', 'Lower case letter y with dieresis'), ('ÿ', 'Lower case letter y with dieresis'),
] %} ] %}
{% call row() %} {% call row() %}
{{ text_field(letter) }} {{ text_field(letter) }}
{{ text_field(description) }} {{ text_field(description) }}
{% endcall %} {% endcall %}
{% endfor %} {% endfor %}
{% endcall %} {% endcall %}
</div> </div>
{% endset %} {% endset %}
{{ govukDetails({ {{ govukDetails({
"summaryText": "Accented characters that affect text message charges", "summaryText": "Accented characters that affect text message charges",
"html": accentedChars "html": accentedChars
}) }} }) }}
<div class="bottom-gutter-3-2"> <div class="bottom-gutter-3-2">
{% call mapping_table( {% call mapping_table(
caption='Pricing for text messages containing accented characters that affect the charges', caption='Pricing for text messages containing accented characters that affect the charges',
field_headings=['Message length', 'Charge'], field_headings=['Message length', 'Charge'],
field_headings_visible=True, field_headings_visible=True,
caption_visible=False caption_visible=False
) %} ) %}
{% for message_length, charge in [ {% for message_length, charge in [
('Up to 70 characters', '1 text message'), ('Up to 70 characters', '1 text message'),
('Up to 134 characters', '2 text messages'), ('Up to 134 characters', '2 text messages'),
('Up to 201 characters', '3 text messages'), ('Up to 201 characters', '3 text messages'),
('Up to 268 characters', '4 text messages'), ('Up to 268 characters', '4 text messages'),
('Each additional 67 characters', '1 additional text message'), ('Each additional 67 characters', '1 additional text message'),
] %} ] %}
{% call row() %} {% call row() %}
{{ text_field(message_length) }} {{ text_field(message_length) }}
{{ text_field(charge) }} {{ text_field(charge) }}
{% endcall %} {% endcall %}
{% endfor %} {% endfor %}
{% endcall %} {% endcall %}
</div> </div>
<h3 class="font-body-lg" id="international-numbers">Sending text messages to international numbers</h3> <h3 class="font-body-lg" id="international-numbers">Sending text messages to international numbers</h3>
<p>It might cost more to send text messages to international numbers than U.S. ones, depending on the country.</p> <p>It might cost more to send text messages to international numbers than U.S. ones, depending on the country.</p>
<!-- {% set smsIntRates %} <!-- {% set smsIntRates %}
{{ live_search(target_selector='#international-pricing .table-row', show=True, form=search_form, label='Search by country name or code') }} {{ live_search(target_selector='#international-pricing .table-row', show=True, form=search_form, label='Search by country name or code') }}
<div id="international-pricing" class="bottom-gutter-3-2"> <div id="international-pricing" class="bottom-gutter-3-2">
+1 -1
View File
@@ -382,7 +382,7 @@ def test_a_page_should_nave_selected_navigation_item(
@pytest.mark.parametrize('endpoint, selected_nav_item', [ @pytest.mark.parametrize('endpoint, selected_nav_item', [
# ('main.documentation', 'Documentation'), # ('main.documentation', 'Documentation'),
('main.support', 'Support'), ('main.support', 'Contact us'),
]) ])
def test_a_page_should_nave_selected_header_navigation_item( def test_a_page_should_nave_selected_header_navigation_item(
client_request, client_request,