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

View File

@@ -11,7 +11,7 @@ from app.main.views.sub_navigation_dictionaries import using_notify_nav
CURRENT_SMS_RATE = '1.72'
@main.route('/pricing')
@main.route('/using-notify/pricing')
def pricing():
return render_template(
'views/pricing/index.html',

View File

@@ -8,10 +8,10 @@ def features_nav():
# "name": "Emails",
# "link": "main.features_email",
# },
{
"name": "Text messages",
"link": "main.features_sms",
},
# {
# "name": "Text messages",
# "link": "main.features_sms",
# },
]
},
{
@@ -35,14 +35,14 @@ def using_notify_nav():
"name": "Get started",
"link": "main.get_started",
},
{
"name": "Pricing",
"link": "main.pricing",
},
{
"name": "Trial mode",
"link": "main.trial_mode_new",
},
{
"name": "Pricing",
"link": "main.pricing",
},
{
"name": "Delivery status",
"link": "main.message_status",

View File

@@ -48,15 +48,19 @@ class HeaderNavigation(Navigation):
'features',
'features_email',
'features_sms',
'message_status',
'roadmap',
'security',
'terms',
'trial_mode_new',
},
'using_notify': {
'get_started',
'using_notify',
'pricing',
'trial_mode_new',
'message_status',
'guidance_index',
},
'pricing': {
'pricing',
'how_to_pay',
'billing_details',
},

View File

@@ -46,11 +46,6 @@
{% if current_user.is_authenticated %}
{% if current_user.platform_admin %}
{% set navigation = [
{
"href": url_for('main.support'),
"text": "Support",
"active": header_navigation.is_selected('support')
},
{
"href": url_for('main.user_profile'),
"text": current_user.name,
@@ -64,13 +59,28 @@
{
"href": url_for('main.sign_out'),
"text": "Sign out"
},
{
"href": url_for('main.support'),
"text": "Contact us",
"active": header_navigation.is_selected('support')
}
] %}
{% else %}
{% 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'),
"text": "Support",
"text": "Contact us",
"active": header_navigation.is_selected('support')
},
{
@@ -87,9 +97,9 @@
{% else %}
{% set navigation = [
{
"href": url_for('main.support'),
"text": "Support",
"active": header_navigation.is_selected('support')
"href": url_for('main.get_started'),
"text": "Using notify",
"active": header_navigation.is_selected('using_notify')
},
{
"href": url_for('main.features'),
@@ -97,9 +107,9 @@
"active": header_navigation.is_selected('features')
},
{
"href": url_for('main.pricing'),
"text": "Pricing",
"active": header_navigation.is_selected('pricing')
"href": url_for('main.support'),
"text": "Contact us",
"active": header_navigation.is_selected('support')
},
{
"href": url_for('main.sign_in'),

View File

@@ -16,7 +16,7 @@
</div>
<div class="tablet:grid-col-10 padding-left-4 sub-content">
{% else %}
<div class="tablet:grid-col-12">
<div class="tablet:grid-col-10">
{% endif %}
{% block content_column_content %}

View File

@@ -6,51 +6,60 @@
{% extends "content_template.html" %}
{% block per_page_title %}
Pricing
Pricing
{% endblock %}
{% 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(
data={
"Last updated": "Feb 27, 2023"
}
) }}
{{ content_metadata(
data={
"Last updated": "Feb 27, 2023"
}
) }}
<p>U.S. Notify is free to use unless you:</p>
<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>
</ul>
<p>U.S. Notify is free to use unless you:</p>
<ul class="list list-bullet">
<li>exceed your <a class="usa-link" href="#text-messages">free text message
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>
{% 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>
{% else %}
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>
{% if not current_user.is_authenticated %}
<a class="usa-link" href="{{ url_for('main.register') }}">Create an account,</a> then
add your unique service(s).
</p>
{% else %}
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> -->
<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>When a service has used its annual allowance, it costs {{ sms_rate }} pence (plus VAT) for each text message you send.</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>You may also use more messages if you:</p>
<ul class="list list-bullet">
<li>use certain <a class="govuk-link govuk-link--no-visited-state" href="#symbols">signs and symbols</a></li>
<li>use <a class="govuk-link govuk-link--no-visited-state" href="#accents">accents and accented letters</a></li>
<li>send text messages to <a class="govuk-link govuk-link--no-visited-state" href="#international-numbers">international numbers</a></li>
</ul>
<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>When a service has used its annual allowance, it costs {{ sms_rate }} pence (plus VAT) for each text message you send.</p> -->
<p>Youll use more messages towards the allowance, if you send <a class="usa-link"
href="#long-text-messages">text messages longer than 160 characters</a>.</p>
<p>You may also use more messages if you:</p>
<ul class="list list-bullet">
<li>use certain <a class="usa-link" href="#symbols">signs and symbols</a></li>
<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>
@@ -62,136 +71,138 @@
</ul>
<p>Each unique service you add has a separate allowance.</p> -->
<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>
<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>
<div class="bottom-gutter-3-2">
{% call mapping_table(
caption='Text message pricing',
field_headings=['Message length', 'Charge'],
field_headings_visible=True,
caption_visible=False
) %}
{% for message_length, charge in [
('Up to 160 characters', '1 text message'),
('Up to 306 characters', '2 text messages'),
('Up to 459 characters', '3 text messages'),
('Up to 612 characters', '4 text messages'),
('Up to 765 characters', '5 text messages'),
('Up to 918 characters', '6 text messages'),
] %}
{% call row() %}
{{ text_field(message_length) }}
{{ text_field(charge) }}
{% endcall %}
{% endfor %}
{% endcall %}
</div>
<div class="bottom-gutter-3-2">
{% call mapping_table(
caption='Text message pricing',
field_headings=['Message length', 'Charge'],
field_headings_visible=True,
caption_visible=False
) %}
{% for message_length, charge in [
('Up to 160 characters', '1 text message'),
('Up to 306 characters', '2 text messages'),
('Up to 459 characters', '3 text messages'),
('Up to 612 characters', '4 text messages'),
('Up to 765 characters', '5 text messages'),
('Up to 918 characters', '6 text messages'),
] %}
{% call row() %}
{{ text_field(message_length) }}
{{ text_field(charge) }}
{% endcall %}
{% endfor %}
{% endcall %}
</div>
<h3 class="font-body-lg" id="symbols">Signs and symbols</h3>
<h3 class="font-body-lg" id="symbols">Signs and symbols</h3>
<p>
The following signs and symbols count as 2 characters each:<br />
<span class="extended-gsm-characters">[]{}^\|~$</span>
</p>
<p>
The following signs and symbols count as 2 characters each:<br />
<span class="extended-gsm-characters">[]{}^\|~$</span>
</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>
<p>Some languages use accented characters.</p>
<p>The following accented characters do not affect the cost of sending text messages: Ä, É, Ö, Ü, à, ä, é, è, ì, ò, ö, ù, ü.</p>
<p>Using other accented characters can increase the cost of sending text messages.<p>
<h3 class="font-body-lg" id="accents">Accents and accented characters</h3>
<p>Some languages use accented characters.</p>
<p>The following accented characters do not affect the cost of sending text messages: Ä, É, Ö, Ü, à, ä, é, è, ì, ò, ö,
ù, ü.</p>
<p>Using other accented characters can increase the cost of sending text messages.
<p>
{% set accentedChars %}
<div class="bottom-gutter-3-2">
{% call mapping_table(
caption='Accented characters that affect text message charges',
field_headings=['Character', 'Description'],
field_headings_visible=True,
caption_visible=False
) %}
{% for letter, description in [
('Â', 'Capital letter A with circumflex'),
('Á', 'Capital letter A with acute'),
('À', 'Capital letter A with grave'),
('Ê', 'Capital letter E with circumflex'),
('È', 'Capital letter E with grave'),
('Ë', 'Capital letter E with dieresis'),
('Î', 'Capital letter I with circumflex'),
('Í', 'Capital letter I with acute'),
('Ì', 'Capital letter I with grave'),
('Ï', 'Capital letter I with dieresis'),
('Ô', 'Capital letter O with circumflex'),
('Ó', 'Capital letter O with acute'),
('Ò', 'Capital letter O with grave'),
('Û', 'Capital letter U with circumflex'),
('Ú', 'Capital letter U with acute'),
('Ù', 'Capital letter U with grave'),
('Ŵ', 'Capital letter W with circumflex'),
('Ẃ', 'Capital letter W with acute'),
('Ẁ', 'Capital letter W with grave'),
('Ẅ', 'Capital letter W with dieresis'),
('Ŷ', 'Capital letter Y with circumflex'),
('Ý', 'Capital letter Y with acute'),
('Ỳ', 'Capital letter Y with grave'),
('Ÿ', 'Capital letter Y with dieresis'),
('â', 'Lower case letter a with circumflex'),
('á', 'Lower case letter a with acute'),
('ê', 'Lower case letter e with circumflex'),
('ë', 'Lower case letter e with dieresis'),
('î', 'Lower case letter i with circumflex'),
('í', 'Lower case letter i with acute'),
('ï', 'Lower case letter i with dieresis'),
('ô', 'Lower case letter o with circumflex'),
('ó', 'Lower case letter o with acute'),
('û', 'Lower case letter u with circumflex'),
('ú', 'Lower case letter u with acute'),
('ŵ', 'Lower case letter w with circumflex'),
('ẃ', 'Lower case letter w with acute'),
('ẁ', 'Lower case letter w with grave'),
('ẅ', 'Lower case letter w with dieresis'),
('ŷ', 'Lower case letter y with circumflex'),
('ý', 'Lower case letter y with acute'),
('ỳ', 'Lower case letter y with grave'),
('ÿ', 'Lower case letter y with dieresis'),
] %}
{% call row() %}
{{ text_field(letter) }}
{{ text_field(description) }}
{% endcall %}
{% endfor %}
{% endcall %}
</div>
{% endset %}
{{ govukDetails({
"summaryText": "Accented characters that affect text message charges",
"html": accentedChars
}) }}
<div class="bottom-gutter-3-2">
{% call mapping_table(
caption='Accented characters that affect text message charges',
field_headings=['Character', 'Description'],
field_headings_visible=True,
caption_visible=False
) %}
{% for letter, description in [
('Â', 'Capital letter A with circumflex'),
('Á', 'Capital letter A with acute'),
('À', 'Capital letter A with grave'),
('Ê', 'Capital letter E with circumflex'),
('È', 'Capital letter E with grave'),
('Ë', 'Capital letter E with dieresis'),
('Î', 'Capital letter I with circumflex'),
('Í', 'Capital letter I with acute'),
('Ì', 'Capital letter I with grave'),
('Ï', 'Capital letter I with dieresis'),
('Ô', 'Capital letter O with circumflex'),
('Ó', 'Capital letter O with acute'),
('Ò', 'Capital letter O with grave'),
('Û', 'Capital letter U with circumflex'),
('Ú', 'Capital letter U with acute'),
('Ù', 'Capital letter U with grave'),
('Ŵ', 'Capital letter W with circumflex'),
('Ẃ', 'Capital letter W with acute'),
('Ẁ', 'Capital letter W with grave'),
('Ẅ', 'Capital letter W with dieresis'),
('Ŷ', 'Capital letter Y with circumflex'),
('Ý', 'Capital letter Y with acute'),
('Ỳ', 'Capital letter Y with grave'),
('Ÿ', 'Capital letter Y with dieresis'),
('â', 'Lower case letter a with circumflex'),
('á', 'Lower case letter a with acute'),
('ê', 'Lower case letter e with circumflex'),
('ë', 'Lower case letter e with dieresis'),
('î', 'Lower case letter i with circumflex'),
('í', 'Lower case letter i with acute'),
('ï', 'Lower case letter i with dieresis'),
('ô', 'Lower case letter o with circumflex'),
('ó', 'Lower case letter o with acute'),
('û', 'Lower case letter u with circumflex'),
('ú', 'Lower case letter u with acute'),
('ŵ', 'Lower case letter w with circumflex'),
('ẃ', 'Lower case letter w with acute'),
('ẁ', 'Lower case letter w with grave'),
('ẅ', 'Lower case letter w with dieresis'),
('ŷ', 'Lower case letter y with circumflex'),
('ý', 'Lower case letter y with acute'),
('ỳ', 'Lower case letter y with grave'),
('ÿ', 'Lower case letter y with dieresis'),
] %}
{% call row() %}
{{ text_field(letter) }}
{{ text_field(description) }}
{% endcall %}
{% endfor %}
{% endcall %}
</div>
{% endset %}
{{ govukDetails({
"summaryText": "Accented characters that affect text message charges",
"html": accentedChars
}) }}
<div class="bottom-gutter-3-2">
{% call mapping_table(
caption='Pricing for text messages containing accented characters that affect the charges',
field_headings=['Message length', 'Charge'],
field_headings_visible=True,
caption_visible=False
) %}
{% for message_length, charge in [
('Up to 70 characters', '1 text message'),
('Up to 134 characters', '2 text messages'),
('Up to 201 characters', '3 text messages'),
('Up to 268 characters', '4 text messages'),
('Each additional 67 characters', '1 additional text message'),
] %}
{% call row() %}
{{ text_field(message_length) }}
{{ text_field(charge) }}
{% endcall %}
{% endfor %}
{% endcall %}
</div>
<div class="bottom-gutter-3-2">
{% call mapping_table(
caption='Pricing for text messages containing accented characters that affect the charges',
field_headings=['Message length', 'Charge'],
field_headings_visible=True,
caption_visible=False
) %}
{% for message_length, charge in [
('Up to 70 characters', '1 text message'),
('Up to 134 characters', '2 text messages'),
('Up to 201 characters', '3 text messages'),
('Up to 268 characters', '4 text messages'),
('Each additional 67 characters', '1 additional text message'),
] %}
{% call row() %}
{{ text_field(message_length) }}
{{ text_field(charge) }}
{% endcall %}
{% endfor %}
{% endcall %}
</div>
<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>
<!-- {% set smsIntRates %}
<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>
<!-- {% set smsIntRates %}
{{ 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">
@@ -228,4 +239,4 @@
"html": smsIntRates
}) }} -->
{% endblock %}
{% endblock %}

View File

@@ -382,7 +382,7 @@ def test_a_page_should_nave_selected_navigation_item(
@pytest.mark.parametrize('endpoint, selected_nav_item', [
# ('main.documentation', 'Documentation'),
('main.support', 'Support'),
('main.support', 'Contact us'),
])
def test_a_page_should_nave_selected_header_navigation_item(
client_request,