Merge branch '1928-develop-new-page-templates-in-code-to-sit-behind-the-log-in' of https://github.com/GSA/notifications-admin into 1928-develop-new-page-templates-in-code-to-sit-behind-the-log-in

This commit is contained in:
alexjanousekGSA
2024-10-25 10:57:40 -04:00
23 changed files with 97 additions and 98 deletions

View File

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 26 KiB

View File

@@ -676,28 +676,28 @@ details form {
margin-top: 0;
}
ol.guidance-list {
ol.best-practices-list {
counter-reset: item;
list-style-type: none;
padding-left: 0;
}
ol.guidance-list.set-two {
ol.best-practices-list.set-two {
counter-reset: item 6;
}
ol.guidance-list.set-three {
ol.best-practices-list.set-three {
counter-reset: item 10;
}
ol.guidance-list li {
ol.best-practices-list li {
counter-increment: item;
margin-bottom: 15px;
position: relative;
padding-left: 40px;
}
ol.guidance-list li::before {
ol.best-practices-list li::before {
content: counter(item);
background-color: #005ea2;
color: white;
@@ -713,11 +713,11 @@ ol.guidance-list li::before {
top: 0;
}
li.guidance {
li.best-practices {
padding-bottom: 50px;
}
div.guidance {
div.best-practices {
height: 400px
}
@@ -820,7 +820,7 @@ $do-dont-top-bar-width: 1;
}
@media (max-width: 758px) {
.guidance-flex-container {
.best-practices-flex-container {
flex-direction: column;
}
}
@@ -838,18 +838,18 @@ li.linked-card:hover > div:first-child:hover {
li.linked-card:hover h4,
li.linked-card:hover p,
li.linked-card:hover svg,
.guidance_card_img:hover{
.best-practices_card_img:hover{
color: #005ea2;
}
.guidance_card_img {
.best-practices_card_img {
display: block;
width: 50%;
height: auto;
margin: 0 auto;
}
.guidance_link {
.best-practices_link {
text-decoration: none;
}

View File

@@ -87,7 +87,7 @@ class Config(object):
"tts-benefits-studio@gsa.gov",
],
}
FEATURE_GUIDANCE_ENABLED = getenv("FEATURE_GUIDANCE_ENABLED", "false")
FEATURE_BEST_PRACTICES_ENABLED = getenv("FEATURE_BEST_PRACTICES_ENABLED", "false")
def _s3_credentials_from_env(bucket_prefix):

View File

@@ -10,22 +10,22 @@ from app.formatters import apply_html_class, convert_markdown_template
from app.main import main
from app.main.views.pricing import CURRENT_SMS_RATE
from app.main.views.sub_navigation_dictionaries import (
best_practices_nav,
features_nav,
guidance_nav,
using_notify_nav,
)
from app.utils.user import user_is_logged_in
from notifications_utils.url_safe_token import generate_token
feature_guidance_enabled = (
os.getenv("FEATURE_GUIDANCE_ENABLED", "false").lower() == "true"
feature_best_practices_enabled = (
os.getenv("FEATURE_BEST_PRACTICES_ENABLED", "false").lower() == "true"
)
# Hook to check for guidance routes
@main.before_request
def check_guidance_feature():
if request.path.startswith("/guidance") and not feature_guidance_enabled:
if request.path.startswith("/best_practices") and not feature_best_practices_enabled:
abort(404)
@@ -204,66 +204,66 @@ def trial_mode_new():
)
@main.route("/guidance")
@main.route("/best-practices")
@user_is_logged_in
def guidance():
def best_practices():
return render_template(
"views/guidance/guidance.html",
navigation_links=guidance_nav(),
"views/best-practices/best-practices.html",
navigation_links=best_practices_nav(),
)
@main.route("/guidance/clear-goals")
@main.route("/best-practices/clear-goals")
@user_is_logged_in
def clear_goals():
return render_template(
"views/guidance/clear-goals.html",
navigation_links=guidance_nav(),
"views/best-practices/clear-goals.html",
navigation_links=best_practices_nav(),
)
@main.route("/guidance/rules-and-regulations")
@main.route("/best-practices/rules-and-regulations")
@user_is_logged_in
def rules_and_regulations():
return render_template(
"views/guidance/rules-and-regulations.html",
navigation_links=guidance_nav(),
"views/best-practices/rules-and-regulations.html",
navigation_links=best_practices_nav(),
)
@main.route("/guidance/establish-trust")
@main.route("/best-practices/establish-trust")
@user_is_logged_in
def establish_trust():
return render_template(
"views/guidance/establish-trust.html",
navigation_links=guidance_nav(),
"views/best-practices/establish-trust.html",
navigation_links=best_practices_nav(),
)
@main.route("/guidance/write-for-action")
@main.route("/best-practices/write-for-action")
@user_is_logged_in
def write_for_action():
return render_template(
"views/guidance/write-for-action.html",
navigation_links=guidance_nav(),
"views/best-practices/write-for-action.html",
navigation_links=best_practices_nav(),
)
@main.route("/guidance/multiple-languages")
@main.route("/best-practices/multiple-languages")
@user_is_logged_in
def multiple_languages():
return render_template(
"views/guidance/multiple-languages.html",
navigation_links=guidance_nav(),
"views/best-practices/multiple-languages.html",
navigation_links=best_practices_nav(),
)
@main.route("/guidance/benchmark-performance")
@main.route("/best-practices/benchmark-performance")
@user_is_logged_in
def benchmark_performance():
return render_template(
"views/guidance/benchmark-performance.html",
navigation_links=guidance_nav(),
"views/best-practices/benchmark-performance.html",
navigation_links=best_practices_nav(),
)

View File

@@ -60,11 +60,11 @@ def using_notify_nav():
]
def guidance_nav():
def best_practices_nav():
return [
{
"name": "Guidance",
"link": "main.guidance",
"name": "Best Practices",
"link": "main.best_practices",
},
{
"name": "Clear goals",

View File

@@ -24,12 +24,12 @@
{% if item.svg_src or item.image_src%}
<div class="usa-card__media usa-card__media--inset">
{% if item.svg_src %}
<svg aria-hidden="true" focusable="false" role="img" class="guidance_card_img">
<use xlink:href="{{asset_url('images/guidance-card-sprite.svg')}}#{{item.svg_src}}"></use>
<svg aria-hidden="true" focusable="false" role="img" class="best-practices_card_img">
<use xlink:href="{{asset_url('images/best-practices-card-sprite.svg')}}#{{item.svg_src}}"></use>
</svg>
{% endif %}
{% if item.image_src %}
<img class="guidance_card_img" src="{{item.image_src}}" alt="{{item.card_heading}} image" />
<img class="best-practices_card_img" src="{{item.image_src}}" alt="{{item.card_heading}} image" />
{% endif %}
</div>
{% endif %}

View File

@@ -1,8 +1,8 @@
<nav class="navigation-service usa-breadcrumb padding-top-0">
<ol class="usa-breadcrumb__list">
<li class="usa-breadcrumb__list-item">
<span class="usa-breadcrumb__label"><a href="{{ url_for('.guidance') }}"
class="usa-link navigation-organization-link">Guidance</a></span>
<span class="usa-breadcrumb__label"><a href="{{ url_for('.best_practices') }}"
class="usa-link navigation-organization-link">Best Practices</a></span>
</li>
{% if title %}
<li class="usa-breadcrumb__list-item">

View File

@@ -7,7 +7,7 @@
{% endblock %}
{% block content_column_content %}
{% with title=page_title %}{% include "components/guidance/nav_breadcrumb.html" %}{% endwith %}
{% with title=page_title %}{% include "components/best-practices/nav_breadcrumb.html" %}{% endwith %}
<section class="usa-prose">
<h1>{{page_title}}</h1>
<p class="font-sans-lg text-base">Learn how effective your texting program can be.</p>

View File

@@ -1,13 +1,13 @@
{% extends "base.html" %}
{% block per_page_title %}
Guidance
Best Practices
{% endblock %}
{% block content_column_content %}
<section class="usa-prose">
<h1>Guidance</h1>
<h1>Best Practices</h1>
<p class="font-sans-lg text-base">For texting the public</p>
<p>Effectively reaching your audience and supporting your programs goals starts with strategically planning out what
text messages can help you achieve and how to approach a thoughtful rollout.
@@ -21,41 +21,41 @@ Guidance
"svg_src": "goal",
"card_heading": "Establish clear goals",
"p_text": "Start with a singular purpose. Make explicit what you want to achieve.",
"link": "/guidance/clear-goals"
"link": "/best-practices/clear-goals"
},
{
"svg_src": "compliant",
"card_heading": "Follow rules & regulations",
"p_text": "Understand what is required when texting the public.",
"link": "/guidance/rules-and-regulations"
"link": "/best-practices/rules-and-regulations"
},
{
"svg_src": "trust",
"card_heading": "Establish trust",
"p_text": "Help your audience anticipate and welcome your texts.",
"link": "/guidance/establish-trust"
"link": "/best-practices/establish-trust"
},
{
"svg_src": "runner",
"card_heading": "Write texts that provoke action",
"p_text": "Help your audience know what to do with the information you send.",
"link": "/guidance/write-for-action"
"link": "/best-practices/write-for-action"
},
{
"svg_src": "language",
"card_heading": "Send texts in multiple languages",
"p_text": "What to know as you plan translated texts.",
"link": "/guidance/multiple-languages"
"link": "/best-practices/multiple-languages"
},
{
"svg_src": "chart",
"card_heading": "Measure performance with benchmarking",
"p_text": "Learn how effective your texting program can be.",
"link": "/guidance/benchmark-performance"
"link": "/best-practices/benchmark-performance"
}
] %}
{% with card_header=card_header, card_contents=card_contents %}{% include "components/guidance/cards.html" %}{%
{% with card_header=card_header, card_contents=card_contents %}{% include "components/best-practices/cards.html" %}{%
endwith %}
</section>

View File

@@ -7,7 +7,7 @@
{% endblock %}
{% block content_column_content %}
{% with title=page_title %}{% include "components/guidance/nav_breadcrumb.html" %}{% endwith %}
{% with title=page_title %}{% include "components/best-practices/nav_breadcrumb.html" %}{% endwith %}
<section class="usa-prose">
<h1>{{page_title}}</h1>
<p class="font-sans-lg text-base">Start with a singular purpose. Make explicit what you want to achieve.</p>
@@ -160,7 +160,8 @@
</div>
<p>
Review your drafted hypothesis with your team to make sure everyone is aligned on your desired goals. A clear and
concise hypothesis can help you decide how to <a href="../guidance/write-for-action">write text message content
concise hypothesis can help you decide how to <a href="../best-practices/write-for-action">write text message
content
that provokes action</a>.
</p>
<h2>Begin with a small test</h2>

View File

@@ -1,5 +1,5 @@
{% extends "base.html" %}
{% from "components/guidance/circle_number.html" import circle_number %}
{% from "components/best-practices/circle_number.html" import circle_number %}
{% set page_title = "Establish trust" %}
@@ -8,7 +8,7 @@
{% endblock %}
{% block content_column_content %}
{% with title=page_title %}{% include "components/guidance/nav_breadcrumb.html" %}{% endwith %}
{% with title=page_title %}{% include "components/best-practices/nav_breadcrumb.html" %}{% endwith %}
<section class="usa-prose">
<h1>{{page_title}}</h1>
<p class="font-sans-lg text-base">Help your audience anticipate and welcome your texts.</p>
@@ -38,7 +38,7 @@
<li class="flex-1 width-full height-full padding-bottom-2">
<div class="usa-card__container border-0">
<p>To reinforce legitimacy, include these key messages in your outreach:</p>
<ol class="guidance-list">
<ol class="best-practices-list">
<li><b>Introduce yourself</b> Give people time to get to know your texting communications before you need
direct action from them</li>
<li><b>Phone number</b> Note the sending phone number your texts will come from</li>
@@ -79,7 +79,7 @@
<ul class="usa-card-group flex-1 flex-wrap padding-top-2">
<li class="flex-1 width-full height-full padding-bottom-2">
<div class="usa-card__container border-0">
<ol start="7" class="guidance-list set-two">
<ol start="7" class="best-practices-list set-two">
<li>Identify yourself in the text message. Use a consistent and familiar <b>program name</b> to precede each
text you send.</li>
<li>Personalize with <b>first name</b>. Through A/B testing, Code for America saw an increase in
@@ -114,14 +114,14 @@
<p>If you're sending one-way notifications, phone carriers allow a single auto-response message that will be
generated if a recipient tries to text a response to your message. Use the auto-response to reaffirm your key
messages around legitimacy and communicate to recipients that texts are coming from an automated system.</p>
<ol class="guidance-list set-three">
<ol class="best-practices-list set-three">
<li>Provide <b>a way to contact a human</b> in any auto-response text</li>
<li>Provide <b>information on how to opt out</b> and opt back in</li>
</ol>
</div>
</li>
<li class="usa-card flex-1 usa-card--media-right width-full padding-top-3">
<div class="usa-card__container border-0 width-full overflow-hidden guidance">
<div class="usa-card__container border-0 width-full overflow-hidden best-practices">
<img class="width-full" src="{{ asset_url('images/phone_grey.svg') }}" role="img" alt="Phone" />
<div class="position-absolute flex text-center padding-5 padding-top-15">
<p class="sms-message-wrapper text-left">
@@ -164,7 +164,7 @@
},
] %}
{% with card_header=card_header, card_contents=card_contents %}{% include "components/guidance/cards.html" %}{%
{% with card_header=card_header, card_contents=card_contents %}{% include "components/best-practices/cards.html" %}{%
endwith %}
{% set card_header = "Prepare your team" %}
@@ -184,7 +184,7 @@
within case management notes.",
},
] %}
{% with card_header=card_header, card_contents=card_contents %}{% include "components/guidance/cards.html" %}{%
{% with card_header=card_header, card_contents=card_contents %}{% include "components/best-practices/cards.html" %}{%
endwith %}
</section>
{% endblock %}

View File

@@ -7,7 +7,7 @@
{% endblock %}
{% block content_column_content %}
{% with title=page_title %}{% include "components/guidance/nav_breadcrumb.html" %}{% endwith %}
{% with title=page_title %}{% include "components/best-practices/nav_breadcrumb.html" %}{% endwith %}
<section class="usa-prose">
<h1>{{page_title}}</h1>
<p class="font-sans-lg text-base"> What to know as you plan translated texts.</p>
@@ -19,14 +19,12 @@
<p>
To send translated messages using Notify.gov you will need two things: a record of your recipients preferred
language
and translation/s of the message template. Notify.gov does not provide translation services.
language and translation/s of the message template. Notify.gov does not provide translation services.
</p>
<p>
As with messages in English, we strongly recommend user testing the translations with people who speak the language
to
ensure the messages are understandable.
to ensure the messages are understandable.
</p>
</section>
{% endblock %}

View File

@@ -7,7 +7,7 @@
{% endblock %}
{% block content_column_content %}
{% with title=page_title %}{% include "components/guidance/nav_breadcrumb.html" %}{% endwith %}
{% with title=page_title %}{% include "components/best-practices/nav_breadcrumb.html" %}{% endwith %}
<section class="usa-prose">
<h1>{{page_title}}</h1>
<p class="font-sans-lg text-base">Understand what is required when texting the public.</p>
@@ -20,7 +20,7 @@
If you do need expressed consent, consider including a pre-checked plain language opt-in (i.e. “Its OK to text
me.”) on
digital forms. Be sure to ask for an up-to-date phone number and include a question about the recipients preferred
language for text messages if you expect to <a href="../guidance/multiple-languages">translate your text
language for text messages if you expect to <a href="../best-practices/multiple-languages">translate your text
messages</a> in
languages other than English.
</p>
@@ -34,7 +34,7 @@
},
{
"p_text": 'The <a class="use-link usa-link--external"
href="https://www.fcc.gov/document/fcc-provides-guidance-enable-critical-health-care-coverage-calls"
href="https://www.fcc.gov/document/fcc-provides-best-practices-enable-critical-health-care-coverage-calls"
target="_blank">FCC has ruled</a> that <b>Federal</b> and <b>State</b> programs are exempt from the TCPA and can
send
text messages to the public without consent if conducting official business. Without explicit mention in the ruling,
@@ -79,7 +79,7 @@
<h3>Opting out</h3>
<p>
There is no policy requirement for senders to communicate opt-out options, but <a
href="../guidance/establish-trust#as-people-receive-texts"> including instructions in introductory and/or
href="../best-practices/establish-trust#as-people-receive-texts"> including instructions in introductory and/or
auto-response texts </a> on how to opt out and opt back in are effective ways to establish trust with your
audience.
</p>

View File

@@ -1,5 +1,5 @@
{% extends "base.html" %}
{% from "components/guidance/circle_number.html" import circle_number %}
{% from "components/best-practices/circle_number.html" import circle_number %}
{% set page_title = "Write texts that provoke action" %}
@@ -8,7 +8,7 @@
{% endblock %}
{% block content_column_content %}
{% with title=page_title %}{% include "components/guidance/nav_breadcrumb.html" %}{% endwith %}
{% with title=page_title %}{% include "components/best-practices/nav_breadcrumb.html" %}{% endwith %}
<section class="usa-prose">
<h1>{{page_title}}</h1>
<p class="font-sans-lg text-base"> Help your audience know what to do with the information you send.</p>
@@ -41,11 +41,11 @@
<li>Use a neutral, direct, and professional tone. This works better than a friendly or overly casual tone.</li>
</ul>
<h2>Build conditions for action</h2>
<ul class="usa-card-group flex-1 flex-wrap padding-top-2 guidance-flex-container">
<ul class="usa-card-group flex-1 flex-wrap padding-top-2 best-practices-flex-container">
<li class="flex-1 width-full height-full padding-bottom-2">
<div class="usa-card__container border-0">
<p>For example, getting a person to update their mailing address:</p>
<ol class="guidance-list">
<ol class="best-practices-list">
<li>Clearly state the information and the response you want the recipient to take.</li>
<li>Point directly to where the action can be completed, not to more information.</li>
<li>Make sure the action can be completed via mobile phone, like calling a person or going to a
@@ -100,7 +100,7 @@
internet services <b>that belong to you</b>.",
},
] %}
{% with card_contents=card_contents, text_align='left' %}{% include "components/guidance/cards.html" %}{%
{% with card_contents=card_contents, text_align='left' %}{% include "components/best-practices/cards.html" %}{%
endwith %}
</section>
{% endblock %}

View File

@@ -7,4 +7,4 @@ cloud_dot_gov_route: notify-demo.app.cloud.gov
redis_enabled: 1
nr_agent_id: '1134302465'
nr_app_id: '1083160688'
FEATURE_GUIDANCE_ENABLED: true
FEATURE_BEST_PRACTICES_ENABLED: true

View File

@@ -7,4 +7,4 @@ cloud_dot_gov_route: notify.app.cloud.gov
redis_enabled: 1
nr_agent_id: '1050708682'
nr_app_id: '1050708682'
FEATURE_GUIDANCE_ENABLED: false
FEATURE_BEST_PRACTICES_ENABLED: false

View File

@@ -12,4 +12,4 @@ SECRET_KEY: sandbox-notify-secret-key
nr_agent_id: ''
nr_app_id: ''
NR_BROWSER_KEY: ''
FEATURE_GUIDANCE_ENABLED: true
FEATURE_BEST_PRACTICES_ENABLED: true

View File

@@ -7,4 +7,4 @@ cloud_dot_gov_route: notify-staging.app.cloud.gov
redis_enabled: 1
nr_agent_id: '1134291385'
nr_app_id: '1031640326'
FEATURE_GUIDANCE_ENABLED: false
FEATURE_BEST_PRACTICES_ENABLED: false

View File

@@ -34,7 +34,7 @@ cf set-env <APP_NAME> <ENV_VAR_NAME> <VALUE>
#### Example:
```
cf set-env notify-admin-sandbox FEATURE_GUIDANCE_ENABLED true
cf set-env notify-admin-sandbox FEATURE_BEST_PRACTICES_ENABLED true
```
### 4. Restage the Application

View File

@@ -62,4 +62,4 @@ applications:
LOGIN_DOT_GOV_CERTS_URL: ((LOGIN_DOT_GOV_CERTS_URL))
# feature flagging
FEATURE_GUIDANCE_ENABLED: ((FEATURE_GUIDANCE_ENABLED))
FEATURE_BEST_PRACTICES_ENABLED: ((FEATURE_BEST_PRACTICES_ENABLED))

View File

@@ -70,7 +70,7 @@ def test_robots(client_request):
"roadmap",
"features",
"documentation",
"guidance",
"best_practices",
"clear_goals",
"rules_and_regulations",
"establish_trust",
@@ -94,11 +94,11 @@ def test_static_pages(client_request, mock_get_organization_by_domain, view, moc
# Function to check if a view is feature-flagged and should return 404 when disabled
def is_feature_flagged(view):
feature_guidance_enabled = (
os.getenv("FEATURE_GUIDANCE_ENABLED", "false").lower() == "true"
feature_best_practices_enabled = (
os.getenv("FEATURE_BEST_PRACTICES_ENABLED", "false").lower() == "true"
)
feature_flagged_views = [
"guidance",
"best_practices",
"clear_goals",
"rules_and_regulations",
"establish_trust",
@@ -106,7 +106,7 @@ def test_static_pages(client_request, mock_get_organization_by_domain, view, moc
"multiple_languages",
"benchmark_performance",
]
return not feature_guidance_enabled and view in feature_flagged_views
return not feature_best_practices_enabled and view in feature_flagged_views
request = partial(client_request.get, "main.{}".format(view))

14
urls.js
View File

@@ -13,13 +13,13 @@ const sublinks = [
{ label: 'Roadmap', path: '/features/roadmap' },
{ label: 'Security', path: '/features/security' },
{ label: 'Support', path: '/support' },
{ label: 'Guidance', path: '/guidance' },
{ label: 'Clear Goals', path: '/guidance/clear-goals' },
{ label: 'Rules And Regulations', path: '/guidance/rules-and-regulations' },
{ label: 'Establish Trust', path: '/guidance/establish-trust' },
{ label: 'Write For Action', path: '/guidance/write-for-action' },
{ label: 'Multiple Languages', path: '/guidance/multiple-languages' },
{ label: 'Benchmark Performance', path: '/guidance/benchmark-performance' },
{ label: 'Best Practices', path: '/best-practices' },
{ label: 'Clear Goals', path: '/best-practices/clear-goals' },
{ label: 'Rules And Regulations', path: '/best-practices/rules-and-regulations' },
{ label: 'Establish Trust', path: '/best-practices/establish-trust' },
{ label: 'Write For Action', path: '/best-practices/write-for-action' },
{ label: 'Multiple Languages', path: '/best-practices/multiple-languages' },
{ label: 'Benchmark Performance', path: '/best-practices/benchmark-performance' },
// Add more links here as needed
];