darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-08-23 07:46:23 -04:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' into 1210-create-confirmation-status-page-the-last-page-in-the-preview-send-flow

Browse Source
This commit is contained in:
Beverly Nguyen
2024-03-14 15:07:20 -07:00
parent 335b01279b 18be5861d5
commit 02ee1a81d1
69 changed files with 1613 additions and 533 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
app/templates/admin_template.html
View File

@@ -21,7 +21,7 @@
{% endblock %}
{% block meta %}
<meta property="og:site_name" content="Notify.gov">
<meta property="og:image" content="{{ asset_url('images/usa-opengraph-image.png') }}">
<meta property="og:image" content="{{ asset_url('images/notify-og-image.png') }}">
{% endblock %}
<script type="text/javascript" src="{{ asset_url('js/gtm_head.js') }}"></script>
{% endblock %}
@@ -175,11 +175,13 @@
{% endblock %}
{% block footer %}
<!-- lines 179 - 251 can all be deleted and replaced with {% include "new/components/footer/footer.html" %} -->
{% if current_service and current_service.research_mode %}
{% set meta_suffix = 'Built by the <a href="https://www.gsa.gov/about-us/organization/federal-acquisition-service/technology-transformation-services/tts-solutions" class="usa-link">Technology Transformation Services</a><span id="research-mode" class="research-mode">research mode</span>' %}
{% else %}
{% set meta_suffix = 'Built by the <a href="https://www.gsa.gov/about-us/organization/federal-acquisition-service/technology-transformation-services/tts-solutions" class="usa-link">Technology Transformation Services</a>' %}
{% set commit_hash = ", Latest version: " + config['COMMIT_HASH'] %}
{% set long_link = '<a href="https://www.gsa.gov/about-us/organization/federal-acquisition-service/technology-transformation-services/tts-solutions" class="usa-link">Technology Transformation Services</a>' %}
{% set meta_suffix = "Built by the " + long_link + commit_hash %}
{% endif %}
{{ usaFooter({
@@ -201,10 +203,6 @@
"href": url_for("main.security"),
"text": "Security"
},
{
"href": url_for("main.terms"),
"text": "Terms of use"
},
]
},
{
@@ -244,7 +242,7 @@
{
"href": url_for('main.support'),
"text": "Contact us"
},
}
]
},
],
@@ -253,7 +251,7 @@
"html": meta_suffix
}
}) }}
<!-- {% include "new/components/footer/footer.html" %} -->
{% if current_user.is_authenticated %}
{% block sessionUserWarning %}
<dialog class="usa-modal" id="sessionTimer" aria-labelledby="sessionTimerHeading" aria-describedby="timerWarning">

111
app/templates/components/components/header/template.njk
View File

@@ -44,61 +44,62 @@
<!-- usa header -->
<header class="usa-header usa-header--extended">
<div class="usa-navbar">
<div class="usa-logo display-flex flex-align-center" id="-logo">
{# <div class="logo-img display-flex">
<span class="usa-sr-only">US Notify Logo</span>
<image src="{{ params.assetsPath | default('/static/images') }}/us-notify-color.png" alt="US Notify logo" xlink:href=""
class="usa-flag-logo margin-right-1" width="40" height="35"></image>
</div> #}
<em class="logo-text usa-logo__text">
<a href="/" title="notify.gov">notify.gov</a>
</em>
</div>
{% if current_user.is_authenticated %}
<button type="button" class="usa-menu-btn">Menu</button>
{% endif %}
</div>
<nav aria-label="Primary navigation" class="usa-nav">
<div class="usa-nav__inner">
<button type="button" class="usa-nav__close">
<img src="/static/images/usa-icons/close.svg" role="img" alt="Close" />
</button>
<ul class="usa-nav__primary usa-accordion margin-right-1">
{% for item in params.navigation %}
{% if item.href and item.text %}
<li class="usa-nav__primary-item{{ ' is-current' if item.active }}">
<a class="usa-nav__link {{ ' usa-current' if item.active }}" href="{{ item.href }}" {% for attribute, value in
item.attributes %} {{attribute}}="{{value}}" {% endfor %}>
<span>{{ item.text }}</span>
</a>
</li>
{% endif %}
{% endfor %}
</ul>
<div class="usa-nav__secondary margin-bottom-2">
<ul class="usa-nav__secondary-links">
{% for item in params.secondaryNavigation %}
{% if item.href and item.text %}
<li class="usa-nav__secondary-item{{ ' is-current' if item.active }}">
<a class="usa-nav__link {{ ' usa-current' if item.active }}" href="{{ item.href }}" {% for attribute, value in
item.attributes %} {{attribute}}="{{value}}" {% endfor %}>
<span>{{ item.text }}</span>
</a>
</li>
{% endif %}
{% endfor %}
</ul>
<!-- <section aria-label="Search component">
<form class="usa-search usa-search--small margin-bottom-2" role="search">
<label class="usa-sr-only" for="search-field">Search</label>
<input class="usa-input" id="search-field" type="search" name="search" />
<button class="usa-button" type="submit">
<img src="/static/images/usa-icons-bg/search--white.svg" class="usa-search__submit-icon" alt="Search" />
</button>
</form>
</section> -->
<div class="usa-nav-container">
<div class="usa-navbar">
<div class="usa-logo display-flex flex-align-center flex-justify" id="-logo">
<div class="logo-img display-flex">
<a href="/">
<span class="usa-sr-only">Notify.gov logo</span>
<image src="{{ params.assetsPath | default('/static/images') }}/notify-logo.png" alt="Notify.gov logo" xlink:href=""
class="usa-flag-logo margin-right-1"></image>
</a>
</div>
{% if params.navigation %}
<button type="button" class="usa-menu-btn">Menu</button>
{% endif %}
</div>
</div>
</nav>
<nav aria-label="Primary navigation" class="usa-nav">
<div class="usa-nav__inner">
<button type="button" class="usa-nav__close">
<img src="/static/images/usa-icons/close.svg" role="img" alt="Close" />
</button>
<ul class="usa-nav__primary usa-accordion margin-right-1">
{% for item in params.navigation %}
{% if item.href and item.text %}
<li class="usa-nav__primary-item{{ ' is-current' if item.active }}">
<a class="usa-nav__link {{ ' usa-current' if item.active }}" href="{{ item.href }}" {% for attribute, value in
item.attributes %} {{attribute}}="{{value}}" {% endfor %}>
<span>{{ item.text }}</span>
</a>
</li>
{% endif %}
{% endfor %}
</ul>
<div class="usa-nav__secondary margin-bottom-6">
<ul class="usa-nav__secondary-links">
{% for item in params.secondaryNavigation %}
{% if item.href and item.text %}
<li class="usa-nav__secondary-item{{ ' is-current' if item.active }}">
<a class="usa-nav__link {{ ' usa-current' if item.active }}" href="{{ item.href }}" {% for attribute, value in
item.attributes %} {{attribute}}="{{value}}" {% endfor %}>
<span>{{ item.text }}</span>
</a>
</li>
{% endif %}
{% endfor %}
</ul>
<!-- <section aria-label="Search component">
<form class="usa-search usa-search--small margin-bottom-2" role="search">
<label class="usa-sr-only" for="search-field">Search</label>
<input class="usa-input" id="search-field" type="search" name="search" />
<button class="usa-button" type="submit">
<img src="/static/images/usa-icons-bg/search--white.svg" class="usa-search__submit-icon" alt="Search" />
</button>
</form>
</section> -->
</div>
</div>
</nav>
</div>
</header>

4
app/templates/content_template.html
View File

@@ -11,10 +11,10 @@
<div class="grid-row">
{% if navigation_links %}
<div class="tablet:grid-col-2">
<div class="tablet:grid-col-2 margin-bottom-4">
{{ sub_navigation(navigation_links) }}
</div>
<div class="tablet:grid-col-10 padding-left-4 usa-prose site-prose">
<div class="tablet:grid-col-10 tablet:padding-left-4 usa-prose site-prose">
{% else %}
<div class="tablet:grid-col-10">
{% endif %}

2
app/templates/main_nav.html
View File

@@ -1,7 +1,7 @@
{% if help %}
{% include 'partials/tour.html' %}
{% else %}
<nav class="nav">
<nav class="nav margin-bottom-4">
<a class="usa-button margin-top-1 margin-bottom-5 width-full"
href="{{ url_for('.choose_template', service_id=current_service.id) }}">Send messages</a>
<ul class="usa-sidenav">

13
app/templates/main_template.html
View File

@@ -19,17 +19,22 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
{% block headIcons %}
<link rel="shortcut icon" sizes="16x16 32x32 48x48" href="{{ assetPath | default('/assets') }}/images/favicon.ico" type="image/x-icon" />
<link rel="mask-icon" href="{{ assetPath | default('/assets') }}/images/usa-mask-icon.svg" color="{{ themeColor | default('#F0F0F0') }}">
<link rel="shortcut icon" href="{{ assetPath | default('/assets') }}/images/favicon.ico" />
<link rel="icon" type="image/png" sizes="32x32"href="{{ assetPath | default('/assets') }}/images/favicon-32x32.png"/>
<link rel="icon" type="image/png" sizes="16x16" href="{{ assetPath | default('/assets') }}/images/favicon-16x16.png" />
<link rel="mask-icon" href="{{ assetPath | default('/assets') }}/images/safari-pinned-tab.svg" color="#5bbad5">
<link rel="apple-touch-icon" sizes="180x180" href="{{ assetPath | default('/assets') }}/images/apple-touch-icon.png">
<link rel="apple-touch-icon" href="{{ assetPath | default('/assets') }}/images/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="msapplication-TileColor" content="#da532c">
<link href="{{ assetPath | default('/assets') }}/images/notify-dark-favicon.png" rel="icon" media="(prefers-color-scheme: dark)">
<meta name="theme-color" content="#ffffff">
{% endblock %}
{% block head %}{% endblock %}
{# The default og:image is added below head so that scrapers see any custom metatags first, and this is just a fallback #}
{% block meta %}
<meta property="og:site_name" content="Notify.gov">
<meta property="og:image" content="{{ asset_url('images/usa-opengraph-image.png') }}">
<meta property="og:image" content="{{ asset_url('images/notify-og-image.png') }}">
{% endblock %}
</head>
<body class="usa-template__body {{ bodyClasses }}">

372
app/templates/new/base.html Normal file
View File

@@ -0,0 +1,372 @@
{% from "../components/banner.html" import banner %}
{% from "../components/components/skip-link/macro.njk" import usaSkipLink -%}
{% from "../components/components/header/macro.njk" import usaHeader -%}
{% from "../components/components/footer/macro.njk" import usaFooter -%}
<!DOCTYPE html>
<html lang="{{ htmlLang | default('en') }}" class="{{ htmlClasses }}">
<head>
<meta charset="utf-8" />
<title>
{% block pageTitle %}
{% block per_page_title %} {% endblock %}Notify.gov
<!-- on templates that were using content_template.html, we might need to use the {{ content_page_title }} variable for the per_page_title -->
{% endblock %}
</title>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="theme-color" media="(prefers-color-scheme: light)" content="f0f0f0" />
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="1b1b1b" />
{% if config['NR_MONITOR_ON'] %}
{% include "partials/newrelic.html" -%}
{% endif %}
{# Ensure that older IE versions always render with the correct rendering engine #}
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
{% block headIcons %}
<link rel="shortcut icon" sizes="16x16 32x32 48x48" href="{{ asset_url('images/favicon.ico') }}" type="image/x-icon" />
<link rel="mask-icon" href="{{ asset_url('images/usa-mask-icon.svg') }}" color="{{ themeColor | default('#F0F0F0') }}">
<link rel="apple-touch-icon" sizes="180x180" href="{{ asset_url('images/apple-touch-icon.png') }}">
<link rel="apple-touch-icon" href="{{ asset_url('images/apple-touch-icon.png') }}">
{% endblock %}
{% block head %}
<link rel="stylesheet" media="screen" href="{{ asset_url('css/styles.css') }}" />
{% block extra_stylesheets %}
{% endblock %}
{% if g.hide_from_search_engines %}
<meta name="robots" content="noindex" />
{% endif %}
<meta name="google-site-verification" content="niWnSqImOWz6mVQTYqNb5tFK8HaKSB4b3ED4Z9gtUQ0" />
{# The default og:image is added below head so that scrapers see any custom metatags first, and this is just a fallback #}
{% block meta_format_detection %}
<meta name="format-detection" content="telephone=no">
{% endblock %}
{% block meta %}
<meta property="og:site_name" content="Notify.gov">
<meta property="og:image" content="{{ asset_url('images/usa-opengraph-image.png') }}">
{% endblock %}
<script type="text/javascript" src="{{ asset_url('js/gtm_head.js') }}"></script>
{% endblock %}
</head>
<body class="usa-template__body {{ bodyClasses }}">
<script nonce="{{ csp_nonce() }}">document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');</script>
{% block bodyStart %}
{% block extra_javascripts_before_body %}
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WX5NGWF"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
{% endblock %}
{% endblock %}
{% block skipLink %}
{{ usaSkipLink({
"href": '#main-content',
"text": 'Skip to main content'
}) }}
{% endblock %}
<!-- \\#region header -->
{% block header %}
{% if current_user.is_authenticated %}
{% if current_user.platform_admin %}
{% set navigation = [
{
"href": url_for("main.show_accounts_or_dashboard"),
"text": "Current service",
"active": header_navigation.is_selected('accounts-or-dashboard')
},
{
"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.platform_admin_splash_page'),
"text": "Platform admin",
"active": header_navigation.is_selected('platform-admin')
},
{
"href": url_for('main.support'),
"text": "Contact us",
"active": header_navigation.is_selected('support')
}
] %}
{% if current_service %}
{% set secondaryNavigation = [
{
"href": url_for('main.service_settings', service_id=current_service.id),
"text": "Settings",
"active": secondary_navigation.is_selected('settings')
},
{
"href": url_for('main.sign_out'),
"text": "Sign out"
}
] %}
{% else %}
{% set secondaryNavigation = [
{
"href": url_for('main.sign_out'),
"text": "Sign out"
}
] %}
{% endif %}
{% else %}
{% set navigation = [
{
"href": url_for("main.show_accounts_or_dashboard"),
"text": "Current service",
"active": header_navigation.is_selected('accounts-or-dashboard')
},
{
"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": "Contact us",
"active": header_navigation.is_selected('support')
},
{
"href": url_for('main.user_profile'),
"text": "User profile",
"active": header_navigation.is_selected('user-profile')
}
] %}
{% if current_service %}
{% set secondaryNavigation = [
{
"href": url_for('main.service_settings', service_id=current_service.id),
"text": "Settings",
"active": secondary_navigation.is_selected('settings')
},
{
"href": url_for('main.sign_out'),
"text": "Sign out"
}
] %}
{% else %}
{% set secondaryNavigation = [
{
"href": url_for('main.sign_out'),
"text": "Sign out"
}
] %}
{% endif %}
{% endif %}
{% else %}
<!-- Add navigation back after pilot -->
{# {% 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": "Contact us",
"active": header_navigation.is_selected('support')
},
{
"href": url_for('main.sign_in'),
"text": "Sign in",
"active": header_navigation.is_selected('sign-in')
}
] %} #}
{% endif %}
{{ usaHeader({
"homepageUrl": url_for('main.show_accounts_or_dashboard'),
"productName": "Notify",
"navigation": navigation,
"navigationClasses": "govuk-header__navigation--end",
"secondaryNavigation": secondaryNavigation,
"assetsPath": asset_path + "images"
}) }}
{% endblock %}
<!-- \\#endregion -->
<!-- \\#region block main -->
{% block main %}
<div class="grid-container">
{% block beforeContent %}
{% block backLink %}{% endblock %}
{% endblock %}
{% block mainClasses %}
<!-- notes set mainClasses = "margin-top-5 padding-bottom-5" where withoutnav_template was used and maybe templates that are using content_template -->
<main class="{{ mainClasses }}" id="main-content" role="main">
{% endblock %}
{% block content %}
{% block flash_messages %}
<!-- flash_message.html was from the withoutnav_template and is only included on child templates that was using withoutnav_template. Now, we can add in flash_message blocks and include 'flash_messages.html' to child templates that was using withoutnav_template. This will help to eliminate the use of a whole other parent template. -->
{% endblock %}
{% block maincolumn_content %}
{% block fromContentTemplatetwoColumnGrid %}
<div class="grid-row">
{% if navigation_links %}
<div class="tablet:grid-col-2">
{{ sub_navigation(navigation_links) }}
</div>
<div class="tablet:grid-col-10 padding-left-4 usa-prose site-prose">
{% else %}
<div class="tablet:grid-col-10">
{% endif %}
{% block content_column_content %}{% endblock %}
</div>
</div>
<!-- content_column_content block is from the content_template.html. We do not need this template. We can consolidate and move it to the base.html template. We can call on this block where child templates were using the content_template.html -->
{% endblock %}
{% endblock %}
{% endblock %}
</main>
</div>
{% endblock %}
<!-- \\#endregion -->
<!-- \\#region block footer -->
{% block footer %}
{% if current_service and current_service.research_mode %}
{% set meta_suffix = 'Built by the <a href="https://www.gsa.gov/about-us/organization/federal-acquisition-service/technology-transformation-services/tts-solutions" class="usa-link">Technology Transformation Services</a><span id="research-mode" class="research-mode">research mode</span>' %}
{% else %}
{% set meta_suffix = 'Built by the <a href="https://www.gsa.gov/about-us/organization/federal-acquisition-service/technology-transformation-services/tts-solutions" class="usa-link">Technology Transformation Services</a>' %}
{% endif %}
{{ usaFooter({
"classes": "js-footer",
"navigation": [
{
"title": "About Notify",
"columns": 1,
"items": [
{
"href": url_for("main.features"),
"text": "Features"
},
{
"href": url_for("main.roadmap"),
"text": "Roadmap"
},
{
"href": url_for("main.security"),
"text": "Security"
},
{
"href": url_for("main.terms"),
"text": "Terms of use"
},
]
},
{
"title": "Using Notify",
"columns": 1,
"items": [
{
"href": url_for("main.get_started"),
"text": "Get started"
},
{
"href": url_for("main.pricing"),
"text": "Pricing"
},
{
"href": url_for("main.trial_mode_new"),
"text": "Trial mode"
},
{
"href": url_for("main.message_status"),
"text": "Delivery status"
},
{
"href": url_for("main.guidance_index"),
"text": "Guidance"
},
{
"href": url_for("main.documentation"),
"text": "API documentation"
}
]
},
{
"title": "Support",
"columns": 1,
"items": [
{
"href": url_for('main.support'),
"text": "Contact us"
},
]
},
],
"meta": {
"items": meta_items,
"html": meta_suffix
}
}) }}
{% if current_user.is_authenticated %}
{% block sessionUserWarning %}
<dialog class="usa-modal" id="sessionTimer" aria-labelledby="sessionTimerHeading" aria-describedby="timerWarning">
<div class="usa-modal__content">
<div class="usa-modal__main">
<h2 class="usa-modal__heading" id="sessionTimerHeading">
Your session will end soon.
<span class="usa-sr-only">Please choose to extend your session or sign out. Your session will expire in 5 minutes or less.</span>
</h2>
<div class="usa-prose">
<p>You have been inactive for too long.
Your session will expire in <span id="timeLeft" role="timer"></span>.
</p>
</div>
<div class="usa-modal__footer">
<ul class="usa-button-group">
<li class="usa-button-group__item">
<button type="button" class="usa-button" id="extendSessionTimer" data-close-modal>
Extend Session
</button>
</li>
<li class="usa-button-group__item">
<button type="button" class="usa-button usa-button--unstyled padding-105 text-center" id="logOutTimer"
data-close-modal>
Sign out
</button>
</li>
</ul>
</div>
</div>
</div>
</dialog>
{% endblock %}
{% endif %}
{% endblock %}
<!-- \\#endregion -->
{% block bodyEnd %}
{% block extra_javascripts %}
{% endblock %}
<!--[if gt IE 8]><!-->
<script type="text/javascript" src="{{ asset_url('javascripts/all.js') }}"></script>
<script type="text/javascript" src="{{ asset_url('js/uswds.min.js') }}"></script>
<!--<![endif]-->
{% endblock %}
</body>
</html>

106
app/templates/new/components/footer/footer.html Normal file
View File

@@ -0,0 +1,106 @@
<footer class="usa-footer usa-footer--big">
{# <div class="grid-container usa-footer__return-to-top">
<a href="#">Return to top</a>
</div> #}
<div class="usa-footer__primary-section">
<div class="grid-container">
<div class="grid-row">
<div class="grid-col">
{# {% if params.navigation %}
<nav class="usa-footer__nav" aria-label="Footer navigation,,">
<div class="grid-row grid-gap-2">
{% for nav in params.navigation %}
<div class="mobile-lg:grid-col-6 desktop:grid-col-4">
<section class="
usa-footer__primary-content
usa-footer__primary-content--collapsible
">
<h4 class="usa-footer__primary-link">{{ nav.title }}</h4>
<ul class="usa-list usa-list--unstyled">
{% for item in nav.items %}
{% if item.href and item.text %}
<li class="usa-footer__secondary-link">
<a href="{{ item.href }}" {% for attribute, value in item.attributes %}
{{attribute}}="{{value}}" {% endfor %}>
{{ item.text }}
</a>
</li>
{% endif %}
{% endfor %}
</ul>
</section>
</div>
{% endfor %}
</div>
</nav>
{% endif %} #}
</div>
</div>
<div class="padding-y-1">
<h2 class="usa-sr-only">{{ params.meta.visuallyHiddenTitle | default("Support links") }}</h2>
<div>
{% if current_service and current_service.research_mode %}
Built by the <a href="https://www.gsa.gov/about-us/organization/federal-acquisition-service/technology-transformation-services/tts-solutions" class="usa-link">Technology Transformation Services</a><span id="research-mode" class="research-mode">research mode</span>
{% else %}
Built by the <a href="https://www.gsa.gov/about-us/organization/federal-acquisition-service/technology-transformation-services/tts-solutions" class="usa-link">Technology Transformation Services</a>
{% endif %}
</div>
</div>
</div>
</div>
<div class="usa-identifier site-identifier">
<section class="usa-identifier__section usa-identifier__section--masthead" aria-label="Agency identifier,,,,,,">
<div class="usa-identifier__container">
<div class="usa-identifier__logos"><a href="javascript:void(0);" class="usa-identifier__logo">
<img class="usa-identifier__logo-img" src="{{ params.assetsPath | default('/static/images') }}/gsa-logo.svg" alt="GSA Logo" role="img" width="48"
height="48">
</a></div>
<section class="usa-identifier__identity" aria-label="Agency description">
<p class="usa-identifier__identity-domain">beta.notify.gov</p>
<p class="usa-identifier__identity-disclaimer">An official website of the <a href="https://gsa.gov">General Services Administration</a></p>
</section>
</div>
</section>
<nav class="usa-identifier__section usa-identifier__section--required-links" aria-label="Important links">
<div class="usa-identifier__container">
<ul class="usa-identifier__required-links-list">
<li class="usa-identifier__required-links-item">
<a href="https://www.gsa.gov/about-us" class="usa-identifier__required-link">About GSA</a>
</li>
<li class="usa-identifier__required-links-item">
<a href="https://www.gsa.gov/website-information/accessibility-aids"
class="usa-identifier__required-link">Accessibility support</a>
</li>
<li class="usa-identifier__required-links-item">
<a href="https://www.gsa.gov/reference/freedom-of-information-act-foia"
class="usa-identifier__required-link">FOIA requests</a>
</li>
<li class="usa-identifier__required-links-item">
<a href="https://www.gsa.gov/reference/civil-rights-programs/notification-and-federal-employee-antidiscrimination-and-retaliation-act-of-2002"
class="usa-identifier__required-link">No FEAR Act data</a>
</li>
<li class="usa-identifier__required-links-item">
<a href="https://www.gsaig.gov/" class="usa-identifier__required-link">Office of the Inspector General</a>
</li>
<li class="usa-identifier__required-links-item">
<a href="https://www.gsa.gov/reference/reports/budget-performance"
class="usa-identifier__required-link">Performance reports</a>
</li>
<li class="usa-identifier__required-links-item">
<a href="https://www.gsa.gov/website-information/website-policies"
class="usa-identifier__required-link">Privacy policy</a>
</li>
</ul>
</div>
</nav>
<section class="usa-identifier__section usa-identifier__section--usagov"
aria-label="Government information and services">
<div class="usa-identifier__container">
<div class="usa-identifier__usagov-description">
Looking for U.S. government information and services?
</div>
<a href="https://www.usa.gov/" class="usa-link">Visit USA.gov</a>
</div>
</section>
</div>
</footer>

35
app/templates/new/layouts/org_template.html Normal file
View File

@@ -0,0 +1,35 @@
{% extends "base.html" %}
{% block per_page_title %}
{% block org_page_title %}{% endblock %} – {{ current_org.name }}
{% endblock %}
{% block main %}
<div class="grid-container">
<div class="navigation-service usa-breadcrumb">
{% if current_user.platform_admin %}
<a href="{{ url_for('.organizations') }}" class="usa-link navigation-organization-link">Organizations</a>
{% endif %}
<div class="navigation-service">
{{ current_org.name }}
</div>
<a href="{{ url_for('main.choose_account') }}" class="usa-link navigation-service">Switch service</a>
</div>
<div class="grid-row">
<div class="grid-col-3">
{% include "org_nav.html" %}
</div>
<div class="grid-col-9">
{% block beforeContent %}
{% block backLink %}{% endblock %}
{% endblock %}
<main class="main" id="main-content" role="main" >
{% block content %}
{% include 'flash_messages.html' %}
{% block maincolumn_content %}{% endblock %}
{% endblock %}
</main>
</div>
</div>
</div>
{% endblock %}

41
app/templates/new/layouts/withnav_template.html Normal file
View File

@@ -0,0 +1,41 @@
{% extends "base.html" %}
{% block per_page_title %}
{% block service_page_title %}{% endblock %} – {{ current_service.name }}
{% endblock %}
{% block main %}
<div class="grid-container">
{% block serviceNavigation %}
{% include "service_navigation.html" %}
{% endblock %}
<!-- The withnav_template can be used to replace the settings_template. when it comes to setting_template and withnav_template, this service_navigation.html is only used in withnav_template and in settings_template, it was not used. That is one out of the two differences between settings template and withnav template. Child templates that extends settings_template, include the block serviceNavigation but leave it empty. Within the app, the only pages settings_template.html is used: manage-users.html, service-settings.html, and user-profile.html -->
<div class="grid-row margin-top-5">
{% if help %}
<div class="grid-col-3">
{% else %}
<div class="grid-col-3">
{% endif %}
{% block sideNavigation %}
{% include "main_nav.html" %}
<!-- include settings_nav.html for child templates that used settings_template -->
{% endblock %}
</div>
{% if help %}
<div class="grid-col-8">
{% else %}
<div class="grid-col-9 padding-left-4">
{% endif %}
{% block beforeContent %}
{% block backLink %}{% endblock %}
{% endblock %}
<main id="main-content" role="main" class="usa-prose site-prose margin-bottom-10">
{% block content %}
{% include 'flash_messages.html' %}
{% block maincolumn_content %}{% endblock %}
{% endblock %}
</main>
</div>
</div>
</div>
{% endblock %}

37
app/templates/new/templates_glossary.md Normal file
View File

@@ -0,0 +1,37 @@
# New Templates Glossary
This document serves as a glossary for the templates directory structure of the project.
## Directory Structure
- `/templates`
- `base.html`: The main base template from which all other templates inherit. This template is a combination of `main_template`, `admin_template`, `withoutnav_template` and `content_template`.
- **/layouts**: Contains base templates and shared layouts used across the site. Simply put, it defines the overall structure or skeleton of the application (less frequently revised).
- `withnav_template.html`: A variation of the base layout that includes a sidebar.
- `org_template.html`: A variaton of the withnav_template
- **/components**: Houses reusable UI components that can be included in multiple templates and can be tailored with different content or links depending on the context.(more frequently revised or customized)
- `header.html`: Template for the site's header, included in `base.html`.
- `footer.html`: Template for the site's footer, included in `base.html`.
- **/views** (or **/pages**): Individual page templates that use the base layouts, components, and partials to present content.
### Best Practices
- Use **inheritance** (`{% extends %}`) to build on base layouts.
- Employ **components** (`{% include %}`) for reusable UI elements to keep the code DRY and facilitate easier updates.
### Observation Notes
- The macro-options.json files in the header and footer component act as structural guides. They aren't directly used as data passed to the usaFooter function/macro. Instead, these files outline the expected properties and provide a description of their purpose. The `usaFooter` macro component is currently only invoked in the `admin_template`, which will eventually serve as the `base.html` template. This will simplify the approach when we change the footer macros to componenets by eliminating the need to dynamically pass this data from the base.html template.
### Old Layout Templates We Don't Need
- withoutnav_template.html Delete
- main_template.html Delete
- settings_templates.html `withnav_template` can be used to replace `settings_template`.
- settings_nav.html (move to /new/navigation directory)
- main_nav.html (move to /new/navigation directory)
- service_navigation.html (move to /new/navigation directory)
- org_template, could be under it's own directory called /layout/organization
- org_nav.html (move to /new/navigation directory)
- content_template.html Delete

4
app/templates/partials/jobs/notifications.html
View File

@@ -28,14 +28,14 @@
<p class="bottom-gutter hint">
Report is {{ "{:.0f}%".format(job.percentage_complete * 0.99) }} complete…
</p>
{% elif notifications %}
{% elif notifications and time_left != "Data no longer available" %}
<p class="bottom-gutter">
<a href="{{ download_link }}" download class="usa-link heading-small">Download this report (<abbr title="Comma separated values">CSV</abbr>)</a>
&emsp;
<span id="time-left">{{ time_left }}</span>
</p>
{% endif %}
{% call(item, row_number) list_table(
notifications,
caption=uploaded_file_name,

2
app/templates/partials/notifications/notifications.html
View File

@@ -1,7 +1,7 @@
{% from "components/table.html" import list_table, field, right_aligned_field_heading, row_heading, notification_status_field %}
{% from "components/page-footer.html" import page_footer %}
<div class="ajax-block-container" aria-labelledby='pill-selected-item'>
<div class="ajax-block-container table-wrapper" aria-labelledby='pill-selected-item'>
<div class="dashboard-table bottom-gutter-3-2">
{% call(item, row_number) list_table(

8
app/templates/settings_template.html
View File

@@ -8,16 +8,16 @@
<div class="grid-container">
<div class="grid-row margin-top-5">
{% if help %}
<div class="grid-col-3">
<div class="tablet:grid-col-3">
{% else %}
<div class="grid-col-3">
<div class="tablet:grid-col-3 margin-bottom-4">
{% endif %}
{% include "settings_nav.html" %}
</div>
{% if help %}
<div class="grid-col-8">
<div class="tablet:grid-col-8">
{% else %}
<div class="grid-col-9 padding-left-4">
<div class="tablet:grid-col-9 tablet:padding-left-4">
{% endif %}
{% block beforeContent %}
{% block backLink %}{% endblock %}

2
app/templates/views/activity/notifications.html
View File

@@ -5,6 +5,7 @@
<div class="ajax-block-container" id='pill-selected-item'>
{% if notifications %}
<div class="table-wrapper">
<div class='dashboard-table'>
{% endif %}
{% call(item, row_number) list_table(
@@ -29,6 +30,7 @@
{% endcall %}
{% if notifications %}
</div>
</div>
{% endif %}
{% if show_pagination %}

38
app/templates/views/api/callbacks.html
View File

@@ -14,24 +14,26 @@
{% block maincolumn_content %}
{{ page_header('Callbacks') }}
<div class="bottom-gutter-3-2 dashboard-table body-copy-table">
{% call mapping_table(
caption='General',
field_headings=['Label', 'Value', 'Action'],
field_headings_visible=False,
caption_visible=False
) %}
{% call row() %}
{{ text_field('Delivery receipts') }}
{{ optional_text_field(delivery_status_callback, truncate=true) }}
{{ edit_field('Change', url_for('.delivery_status_callback', service_id=current_service.id)) }}
{% endcall %}
<div class="table-wrapper">
<div class="bottom-gutter-3-2 dashboard-table body-copy-table">
{% call mapping_table(
caption='General',
field_headings=['Label', 'Value', 'Action'],
field_headings_visible=False,
caption_visible=False
) %}
{% call row() %}
{{ text_field('Delivery receipts') }}
{{ optional_text_field(delivery_status_callback, truncate=true) }}
{{ edit_field('Change', url_for('.delivery_status_callback', service_id=current_service.id)) }}
{% endcall %}
{% call row() %}
{{ text_field('Received text messages') }}
{{ optional_text_field(received_text_messages_callback, truncate=true) }}
{{ edit_field('Change', url_for('.received_text_messages_callback', service_id=current_service.id)) }}
{% endcall %}
{% endcall %}
{% call row() %}
{{ text_field('Received text messages') }}
{{ optional_text_field(received_text_messages_callback, truncate=true) }}
{{ edit_field('Change', url_for('.received_text_messages_callback', service_id=current_service.id)) }}
{% endcall %}
{% endcall %}
</div>
</div>
{% endblock %}

53
app/templates/views/check/ok.html
View File

@@ -1,6 +1,5 @@
{% extends "withnav_template.html" %}
{% from "components/banner.html" import banner_wrapper %}
{% from "components/table.html" import list_table, field, text_field, index_field, hidden_field_heading %}
{% from "components/page-header.html" import page_header %}
{% from "components/components/button/macro.njk" import usaButton %}
{% from "components/components/skip-link/macro.njk" import usaSkipLink %}
@@ -9,7 +8,7 @@
{% set file_contents_header_id = 'file-preview' %}
{% block service_page_title %}
{{ "Preview of {}".format(template.name) }}
{{ "Select delivery time" }}
{% endblock %}
@@ -19,11 +18,11 @@
{% block maincolumn_content %}
{{ page_header('Preview of {}'.format(template.name)) }}
{{ page_header('Select delivery time') }}
{{ template|string }}
<div class="bottom-gutter-3-2">
<form method="post" enctype="multipart/form-data" action="{{url_for('main.start_job', service_id=current_service.id, upload_id=upload_id)}}" class='page-footer'>
<form method="post" enctype="multipart/form-data" action="{{url_for('main.preview_job', service_id=current_service.id, template_id=template_id, upload_id=upload_id)}}" class='page-footer'>
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
{% if choose_time_form %}
{{ choose_time_form.scheduled_for(param_extensions={
@@ -37,55 +36,11 @@
{% endif %}
{% set button_text %}
Send {{ count_of_recipients|message_count(template.template_type) }}
Preview
{% endset %}
{{ usaButton({ "text": button_text }) }}
</form>
</div>
{% if not request.args.from_test %}
<h2 class="font-body-lg" id="{{ file_contents_header_id }}">{{ original_file_name }}</h2>
<div class="fullscreen-content" data-module="fullscreen-table">
{% call(item, row_number) list_table(
recipients.displayed_rows,
caption=original_file_name,
caption_visible=False,
field_headings=[
'<span class="usa-sr-only">Row in file</span><span aria-hidden="true">1</span>'|safe
] + recipients.column_headers
) %}
{% call index_field() %}
<span>
{% if (item.index + 2) == preview_row %}
{{ item.index + 2 }}
{% else %}
<a class="usa-link" href="{{ url_for('.check_messages', service_id=current_service.id, template_id=template.id, upload_id=upload_id, row_index=(item.index + 2), original_file_name=original_file_name) }}">{{ item.index + 2 }}</a>
{% endif %}
</span>
{% endcall %}
{% for column in recipients.column_headers %}
{% if item[column].ignore %}
{{ text_field(item[column].data or '', status='default') }}
{% else %}
{{ text_field(item[column].data or '') }}
{% endif %}
{% endfor %}
{% if item[None].data %}
{% for column in item[None].data %}
{{ text_field(column, status='default') }}
{% endfor %}
{% endif %}
{% endcall %}
</div>
{% endif %}
{% if count_of_displayed_recipients < count_of_recipients %}
<p class="table-show-more-link">
Only showing the first {{ count_of_displayed_recipients }} rows
</p>
{% endif %}
{% endblock %}

77
app/templates/views/check/preview.html Normal file
View File

@@ -0,0 +1,77 @@
{% extends "withnav_template.html" %}
{% from "components/banner.html" import banner_wrapper %}
{% from "components/table.html" import list_table, field, text_field, hidden_field_heading %}
{% from "components/page-header.html" import page_header %}
{% from "components/components/button/macro.njk" import usaButton %}
{% from "components/components/skip-link/macro.njk" import usaSkipLink %}
{% from "components/components/back-link/macro.njk" import usaBackLink %}
{% set file_contents_header_id = 'file-preview' %}
{% block service_page_title %}
{{ "Preview of {}".format(template.name) }}
{% endblock %}
{% block backLink %}
{{ usaBackLink({ "href": back_link_from_preview }) }}
{% endblock %}
{% block maincolumn_content %}
{{ page_header('Preview') }}
<div>
<p class="sms-message-scheduler">Scheduled: {{ scheduled_for if scheduled_for else 'Now'}}</p>
<p class="sms-message-file-name">File: {{original_file_name}}</p>
<p class="sms-message-template">Template: {{template.name}}</p>
<p class="sms-message-sender" >From: {{ template.sender }}</p>
</div>
<h2 id="{{ file_contents_header_id }}">Message</h2>
<div class="preview-message"> {{ simplifed_template|string }}</div>
{% if not request.args.from_test %}
<h2>Recipients list</h2>
<div>
<ul class="usa-icon-list">
<li class="usa-icon-list__item">
<img src="{{ url_for('static', filename='img/material-icons/description.svg') }}" alt="Description Icon">
<div class="usa-icon-list__content">
<h3>{{ original_file_name }}</h3>
</div>
</li>
</ul>
</div>
<div class="usa-table-container--scrollable" tabindex="0">
{% call(item, row_number) list_table(
recipients.displayed_rows,
caption="Note: Only the first 5 rows are displayed here.",
caption_visible=True,
field_headings=recipients.column_headers
) %}
{% for column in recipients.column_headers %}
{% if item[column].ignore %}
{{ text_field(item[column].data or '', status='default') }}
{% else %}
{{ text_field(item[column].data or '') }}
{% endif %}
{% endfor %}
{% if item[None].data %}
{% for column in item[None].data %}
{{ text_field(column, status='default') }}
{% endfor %}
{% endif %}
{% endcall %}
</div>
{% endif %}
<!-- <div class="bottom-gutter-3-2">
<p>This is a placeholder: This message will be delivered to <b>400 phone numbers</b> and will use a total of <b>800 message parts</b>, leaving Washington DSHS with <b>249,200 message parts remaining</b>.</p>
</div> -->
<form method="post" enctype="multipart/form-data" action="{{url_for('main.start_job', service_id=current_service.id, upload_id=upload_id)}}" class='page-footer'>
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
<h3>Does everything look good?</h3>
{% set button_text %}
{{ "Schedule" if scheduled_for else 'Send'}}
{% endset %}
{{ usaButton({ "text": button_text }) }}
</form>
{% endblock %}

206
app/templates/views/dashboard/_jobs.html
View File

@@ -1,115 +1,117 @@
{% from "components/table.html" import list_table, field, right_aligned_field_heading, row_heading %}
<div class='dashboard-table ajax-block-container'>
{% call(item, row_number) list_table(
jobs,
caption="Recent files uploaded",
caption_visible=False,
empty_message=(
'You have not uploaded any files yet.'
),
field_headings=[
'File',
'Status'
],
field_headings_visible=False
) %}
{% call row_heading() %}
<div class="file-list">
<a class="file-list-filename-large usa-link" href="{{ url_for('.view_job', service_id=current_service.id, job_id=item.id) }}">{{ item.original_file_name }}</a>
{% if item.scheduled %}
<span class="file-list-hint-large">
Sending {{
item.scheduled_for|format_datetime_relative
}}
</span>
{% else %}
<span class="file-list-hint-large">
Sent {{
(item.scheduled_for or item.created_at)|format_datetime_relative
}}
</span>
{% endif %}
</div>
{% endcall %}
{% call field() %}
{% if item.scheduled %}
{% if link %}
<a class="usa-link display-flex" href="{{ link }}">
{% endif %}
<span class="big-number-smallest">
<span class="big-number-number">
{% if item.notification_count is number %}
{% if currency %}
{{ "{}{:,.2f}".format(currency, item.notification_count) }}
{% else %}
{{ "{:,}".format(item.notification_count) }}
{% endif %}
{% else %}
{{ item.notification_count }}
{% endif %}
</span>
{% if item.notification_count %}
<span class="big-number-label">{{ item.notification_count|message_count_label(item.template_type,suffix='waiting to send') }}</span>
{% endif %}
<div class="table-wrapper">
<div class='dashboard-table ajax-block-container'>
{% call(item, row_number) list_table(
jobs,
caption="Recent files uploaded",
caption_visible=False,
empty_message=(
'You have not uploaded any files yet.'
),
field_headings=[
'File',
'Status'
],
field_headings_visible=False
) %}
{% call row_heading() %}
<div class="file-list">
<a class="file-list-filename-large usa-link" href="{{ url_for('.view_job', service_id=current_service.id, job_id=item.id) }}">{{ item.original_file_name }}</a>
{% if item.scheduled %}
<span class="file-list-hint-large">
Sending {{
item.scheduled_for|format_datetime_relative
}}
</span>
{% if link %}
</a>
{% endif %}
{% else %}
<div class="grid-row">
<div class="grid-col-4">
{% if link %}
<a class="usa-link display-flex" href="{{ link }}">
{% endif %}
{% else %}
<span class="file-list-hint-large">
Sent {{
(item.scheduled_for or item.created_at)|format_datetime_relative
}}
</span>
{% endif %}
</div>
{% endcall %}
{% call field() %}
{% if item.scheduled %}
{% if link %}
<a class="usa-link display-flex" href="{{ link }}">
{% endif %}
<span class="big-number-smallest">
<span class="big-number-number">
{{ "{:,}".format(item.notifications_sending) }}
</span>
<span class="big-number-label">pending</span>
</span>
{% if link %}
</a>
{% endif %}
</div>
<div class="grid-col-4">
<span class="big-number-smallest">
<span class="big-number-number">
{% if item.notifications_delivered is number %}
{{ "{:,}".format(item.notifications_delivered) }}
{% else %}
{{ item.notifications_delivered }}
{% endif %}
</span>
<span class="big-number-label">delivered</span>
</span>
</div>
<div class="grid-col-4">
{% if link %}
<a class="usa-link display-flex" href="{{ link }}">
{% endif %}
<span class="big-number-smallest">
<span class="big-number-number">
{% if item.notifications_failed is number %}
{% if currency %}
{{ "{}{:,.2f}".format(currency, item.notifications_failed) }}
{% if item.notification_count is number %}
{% if currency %}
{{ "{}{:,.2f}".format(currency, item.notification_count) }}
{% else %}
{{ "{:,}".format(item.notification_count) }}
{% endif %}
{% else %}
{{ "{:,}".format(item.notifications_failed) }}
{{ item.notification_count }}
{% endif %}
{% else %}
{{ item.notifications_failed }}
</span>
{% if item.notification_count %}
<span class="big-number-label">{{ item.notification_count|message_count_label(item.template_type,suffix='waiting to send') }}</span>
{% endif %}
</span>
<span class="big-number-label">failed</span>
{% if link %}
</a>
{% endif %}
{% else %}
<div class="grid-row">
<div class="grid-col-4">
{% if link %}
<a class="usa-link display-flex" href="{{ link }}">
{% endif %}
<span class="big-number-smallest">
<span class="big-number-number">
{{ "{:,}".format(item.notifications_sending) }}
</span>
<span class="big-number-label">pending</span>
</span>
{% if link %}
</a>
{% endif %}
</div>
<div class="grid-col-4">
<span class="big-number-smallest">
<span class="big-number-number">
{% if item.notifications_delivered is number %}
{{ "{:,}".format(item.notifications_delivered) }}
{% else %}
{{ item.notifications_delivered }}
{% endif %}
</span>
<span class="big-number-label">delivered</span>
</span>
{% if link %}
</a>
</div>
<div class="grid-col-4">
{% if link %}
<a class="usa-link display-flex" href="{{ link }}">
{% endif %}
<span class="big-number-smallest">
<span class="big-number-number">
{% if item.notifications_failed is number %}
{% if currency %}
{{ "{}{:,.2f}".format(currency, item.notifications_failed) }}
{% else %}
{{ "{:,}".format(item.notifications_failed) }}
{% endif %}
{% else %}
{{ item.notifications_failed }}
{% endif %}
</span>
<span class="big-number-label">failed</span>
</span>
{% if link %}
</a>
{% endif %}
</div></div>
{% endif %}
</div></div>
{% endif %}
{% endcall %}
{% endcall %}
{% endcall %}
</div>
</div>

2
app/templates/views/dashboard/dashboard.html
View File

@@ -29,7 +29,7 @@
{{ ajax_block(partials, updates_url, 'template-statistics') }}
<h2 class="margin-top-4 margin-bottom-1">Recent Batches</h2>
<div>
<div class="table-wrapper">
<table class="usa-table usa-table--borderless job-table">
<thead class="table-field-headings">
<tr>

13
app/templates/views/guidance/index.html
View File

@@ -41,7 +41,7 @@
<h3>To create and format your message</h3>
<ol class="list">
<li>All messages start from a template</li>
<li>Click “<a href={{ url_for('.choose_template', service_id=current_service.id) }}>Send Messages</a>”. You’ll see existing templates.</li>
<li>Click "<a href={{ url_for('.choose_template', service_id=current_service.id) }}>Send Messages</a>". You'll see existing templates.</li>
<li>Add a new template or choose an existing template and select Edit.</li>
</ol>
@@ -69,7 +69,7 @@
<h2 class="padding-top-1" id="personalize-content">Personalize your content</h2>
<p>Personalizing your content can increase response rates and help the recipient know the text is legitimate.</p>
<ul class="list list-bullet">
<li>Including a person’s first name increases response rates.</li>
<li>Including a person's first name increases response rates.</li>
<li>Specific details such as time and location of an appointment or where suspected fraud use occurred encourages action.</li>
</ul>
@@ -82,7 +82,10 @@
<h4>Example</h4>
<p>To personalize with the recipient's first name and include a reference number:</p>
<p class="padding-2 bg-base-lightest">State WIC: Hello ((first name)), your reference is ((ref number)). Please provide this number when you call 123-123-1234 to make an appointment.</p>
<p class="padding-2 bg-base-lightest">State WIC: Hello ((first name)), your reference is ((ref number)). Please provide this number when you call 555-123-1234 to make an appointment.</p>
<p>Note that variations in the length of personalized content can impact the length of specific messages, and may affect
the number of parts used.</p>
{# Add conditional content #}
<h2 class="padding-top-1" id="conditional-content">Add conditional content</h2>
@@ -106,7 +109,7 @@
<li>
If you want to make people who are homebound aware of the option of virtual visits (but not other message recipients):
</br>
<p class="padding-2 bg-base-lightest">State Medicaid: Please call 123-123-1234 to schedule an appointment. ((homebound??Virtual visits are available.))</p>
<p class="padding-2 bg-base-lightest">State Medicaid: Please call 555-123-1234 to schedule an appointment. ((homebound??Virtual visits are available.))</p>
</li>
<li>
If you want to send a messages in different languages to different recipients:
@@ -231,7 +234,7 @@
</li>
<li>Auto-response text:
</br>
<p class="padding-2 bg-base-lightest">State Agency: This number is unmonitored. To contact us, call us at 123-123-1234. We will never ask for personal details
<p class="padding-2 bg-base-lightest">State Agency: This number is unmonitored. To contact us, call us at 555-123-1234. We will never ask for personal details
in a text. If you have questions about how to protect your privacy, see statename.gov/privacy.</p>
</li>
</ol>

13
app/templates/views/notifications/check.html
View File

@@ -5,7 +5,7 @@
{% from "components/components/button/macro.njk" import usaButton %}
{% block service_page_title %}
{{ "Error" if error else "Preview of ‘{}’".format(template.name) }}
{{ "Error" if error else "Select delivery time" }}
{% endblock %}
{% block backLink %}
@@ -40,17 +40,16 @@
{% endcall %}
</div>
{% else %}
{{ page_header('Preview of ‘{}’'.format(template.name)) }}
{{ page_header('Select delivery time') }}
{% endif %}
{{ template|string }}
<div class="js-stick-at-bottom-when-scrolling">
<form method="post" enctype="multipart/form-data" action="{{url_for(
'main.send_notification',
'main.preview_notification',
service_id=current_service.id,
template_id=template.id,
help='3' if help else 0
template_id=template.id
)}}" class='page-footer'>
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
{% if not error %}
@@ -64,7 +63,9 @@
}
}) }}
{% endif %}
{% set button_text %}Send 1 {{ 1|message_count_label(template.template_type, suffix='') }}{% endset %}
{% set button_text %}
Preview
{% endset %}
{{ usaButton({ "text": button_text }) }}
{% endif %}
</form>

74
app/templates/views/notifications/preview.html Normal file
View File

@@ -0,0 +1,74 @@
{% extends "withnav_template.html" %}
{% from "components/banner.html" import banner_wrapper %}
{% from "components/page-header.html" import page_header %}
{% from "components/components/back-link/macro.njk" import usaBackLink %}
{% from "components/components/button/macro.njk" import usaButton %}
{% block service_page_title %}
{{ "Error" if error else "Preview" }}
{% endblock %}
{% block backLink %}
{{ usaBackLink({ "href": back_link_from_preview }) }}
{% endblock %}
{% block maincolumn_content %}
{% if error == 'not-allowed-to-send-to' %}
<div class="bottom-gutter">
{% call banner_wrapper(type='dangerous') %}
{% with
count_of_recipients=1,
template_type_label=(
'phone number' if template.template_type == 'sms' else 'email address'
)
%}
{% include "partials/check/not-allowed-to-send-to.html" %}
{% endwith %}
{% endcall %}
</div>
{% elif error == 'too-many-messages' %}
<div class="bottom-gutter">
{% call banner_wrapper(type='dangerous') %}
{% include "partials/check/too-many-messages.html" %}
{% endcall %}
</div>
{% elif error == 'message-too-long' %}
{# the only row_errors we can get when sending one off messages is that the message is too long #}
<div class="bottom-gutter">
{% call banner_wrapper(type='dangerous') %}
{% include "partials/check/message-too-long.html" %}
{% endcall %}
</div>
{% else %}
{{ page_header('Preview') }}
{% endif %}
<div>
<p class="sms-message-scheduler">Scheduled: {{ scheduled_for if scheduled_for else 'Now'}}</p>
<p class="sms-message-template">Template: {{template.name}}</p>
<p class="sms-message-sender" >From: {{ template.sender }}</p>
<p class="sms-message-sender" >To: {{ recipient }}</p>
</div>
<h2 id="{{ file_contents_header_id }}">Message</h2>
<div class="preview-message"> {{ simplifed_template|string }}</div>
<div class="js-stick-at-bottom-when-scrolling">
<form method="post" enctype="multipart/form-data" action="{{url_for(
'main.send_notification',
service_id=current_service.id,
template_id=template.id,
help='3' if help else 0
)}}" class='page-footer'>
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
<!-- <p>Placeholder: This message will be delivered to <b>400 phone numbers</b> and will use a total of <b>800 message parts</b>, leaving Washington DSHS with <b>249,200 message parts remaining</b>.</p> -->
<h3>Does everything look good?</h3>
{% if not error %}
{% set button_text %}
{{ "Schedule" if scheduled_for else 'Send'}}
{% endset %}
{{ usaButton({ "text": button_text }) }}
{% endif %}
</form>
</div>
{% endblock %}

124
app/templates/views/performance.html
View File

@@ -44,31 +44,33 @@
</div>
</div>
<div class="dashboard-table">
{% call(item, row_number) list_table(
notifications_by_type|reverse,
caption='Messages sent since May 2023',
caption_visible=False,
field_headings=[
'Date',
99|message_count_noun('email')|capitalize,
99|message_count_noun('sms')|capitalize,
],
empty_message='No data to show'
) %}
{% call field() %}
{{ item.date | format_date_normal }}
<div class="table-wrapper">
<div class="dashboard-table">
{% call(item, row_number) list_table(
notifications_by_type|reverse,
caption='Messages sent since May 2023',
caption_visible=False,
field_headings=[
'Date',
99|message_count_noun('email')|capitalize,
99|message_count_noun('sms')|capitalize,
],
empty_message='No data to show'
) %}
{% call field() %}
{{ item.date | format_date_normal }}
{% endcall %}
{% call field() %}
{{ item.emails|format_thousands }}
{% endcall %}
{% call field() %}
{{ item.sms|format_thousands }}
{% endcall %}
{% endcall %}
{% call field() %}
{{ item.emails|format_thousands }}
{% endcall %}
{% call field() %}
{{ item.sms|format_thousands }}
{% endcall %}
{% endcall %}
<p class="table-show-more-link">
Only showing the last {{ notifications_by_type|length }} days
</p>
<p class="table-show-more-link">
Only showing the last {{ notifications_by_type|length }} days
</p>
</div>
</div>
<h2 class="govuk-heading-m">
@@ -82,26 +84,28 @@
) }}
</div>
</div>
<div class="dashboard-table">
{% call(item, row_number) list_table(
processing_time | reverse,
caption='Messages sent within 10 seconds',
caption_visible=False,
field_headings=[
'Date', 'Percentage'
],
empty_message='No data to show'
) %}
{% call field() %}
{{ item.date | format_date_normal }}
<div class="table-wrapper">
<div class="dashboard-table">
{% call(item, row_number) list_table(
processing_time | reverse,
caption='Messages sent within 10 seconds',
caption_visible=False,
field_headings=[
'Date', 'Percentage'
],
empty_message='No data to show'
) %}
{% call field() %}
{{ item.date | format_date_normal }}
{% endcall %}
{% call field() %}
{{ '{:.2f}%'.format(item.percentage_under_10_seconds) }}
{% endcall %}
{% endcall %}
{% call field() %}
{{ '{:.2f}%'.format(item.percentage_under_10_seconds) }}
{% endcall %}
{% endcall %}
<p class="table-show-more-link">
Only showing the last {{ processing_time|length }} days
</p>
<p class="table-show-more-link">
Only showing the last {{ processing_time|length }} days
</p>
</div>
</div>
<h2 class="govuk-heading-m">
@@ -120,23 +124,25 @@
<span class="usa-sr-only">using Notify.</span>
</div>
</div>
<div class="dashboard-table">
{% call(item, row_number) list_table(
organizations_using_notify,
caption='Organizations using Notify',
caption_visible=False,
field_headings=[
'Organization', 'Number of live services'
],
empty_message='No data to show'
) %}
{% call field() %}
{{ item.organization_name }}
<div class="table-wrapper">
<div class="dashboard-table">
{% call(item, row_number) list_table(
organizations_using_notify,
caption='Organizations using Notify',
caption_visible=False,
field_headings=[
'Organization', 'Number of live services'
],
empty_message='No data to show'
) %}
{% call field() %}
{{ item.organization_name }}
{% endcall %}
{% call field() %}
{{ item.count_of_live_services }}
{% endcall %}
{% endcall %}
{% call field() %}
{{ item.count_of_live_services }}
{% endcall %}
{% endcall %}
</div>
</div>
{% endblock %}

21
app/templates/views/pricing/index.html
View File

@@ -6,16 +6,16 @@
{% extends "content_template.html" %}
{% block per_page_title %}
Pricing
Message parts
{% endblock %}
{% block content_column_content %}
<h1 class="font-body-2xl margin-bottom-3">Pricing</h1>
<h1 class="font-body-2xl margin-bottom-3">Message parts</h1>
{{ content_metadata(
data={
"Last updated": "January 25, 2024"
"Last updated": "February 5, 2024"
}
) }}
@@ -30,7 +30,8 @@ more parts towards the allowance if you:</p>
</ul>
<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 part.</p>
<p>If a text message is longer than 160 characters (including spaces and service name), it counts as more than one message
part.</p>
<div class="bottom-gutter-3-2">
{% call mapping_table(
@@ -55,6 +56,13 @@ more parts towards the allowance if you:</p>
{% endcall %}
</div>
<h3 class="font-body-lg" id="Personalization">Personalization</h3>
<p>Personalization can change the length of messages. For example, if you are personalizing with a first name, Fred is
significantly shorter than Alexander. When you are evaluating how long a message is, you need to consider variations in
message length based on personalization.</p>
<p>Before you send messages, Notify will let you know how many messages you are sending, the number of parts you are using,
and the number of parts you’ll have left.</p>
<h3 class="font-body-lg" id="symbols">Signs and symbols</h3>
<p>
@@ -158,9 +166,4 @@ more parts towards the allowance if you:</p>
{% endcall %}
</div>
<h3 class="font-body-lg" id="international-numbers">Trial mode</h3>
<p>When a new service is added, it will start in <a href="/using-notify/trial-mode">trial mode</a>. Moving a service out of trial mode is subject to approval by
the Notify.gov team. Additional unique services may be added, although moving each service out of trial mode is subject
to approval by the Notify.gov team.</p>
{% endblock %}

41
app/templates/views/signin.html
View File

@@ -12,9 +12,20 @@
{% block maincolumn_content %}
{% if login_gov_enabled %}
<div class="grid-row">
<div class="tablet:grid-col-12">
<div id="countdown-container" class="usa-alert usa-alert--warning width-full margin-bottom-4">
<div class="usa-alert__body">
<h4 class="usa-alert__heading">Login.gov is required by April 16, 2024</h4>
<p class="usa-alert__text">
You have <span id="countdown"></span> left to use Login.gov to sign in
</p>
</div>
</div>
</div>
{% endif %}
<div class="grid-row margin-bottom-4">
<div class="tablet:grid-col-5">
{% if again %}
<h1 class="font-body-2xl margin-bottom-3">You need to sign in again</h1>
{% if other_device %}
@@ -29,9 +40,9 @@
{% else %}
<h1 class="font-body-2xl margin-bottom-3">Sign in</h1>
{% if login_gov_enabled %}
<a class="usa-link" href="{{ initial_signin_url }}">Sign in with Login.gov</a>
</p>
<h4 class="margin-bottom-3">Or:</h4>
<p>You can access your account by signing in with one of the options below:</p>
<a class="usa-link usa-button usa-button--outline" href="{{ initial_signin_url }}">Sign in with Login.gov</a>
<p class="margin-y-3"><strong>Or:</strong></p>
{% endif %}
{% endif %}
@@ -41,6 +52,24 @@
{{ page_footer("Continue", secondary_link=password_reset_url, secondary_link_text="Forgot your password?") }}
{% endcall %}
</div>
</div>
{% if login_gov_enabled %}
<div class="tablet:grid-col-6 tablet:grid-offset-1 margin-top-2 padding-y-2 padding-x-4 bg-base-lightest">
<h2 class="font-body-lg">Notify.gov is changing the sign-in experience to Login.gov effective<br>April 16, 2024</h2>
<p>Why are we doing this?</p>
<ul class="usa-list">
<li><strong>Enhanced security:</strong> Login.gov is really secure and trustworthy</li>
<li><strong>One single source for signing in:</strong> You can use Login.gov for other services within the federal government</li>
<li><strong>2FA flexibility:</strong> Login.gov supports multiple methods for users to verify their identity.</li>
</ul>
<p>What do I need to do?</p>
<ul class="usa-list">
<li>If you have a Login.gov account, start using it to sign in to Notify today.</li>
<li>If you don’t have a Login.gov account, you must create one by April 16, 2024 to continue to access Notify.</li>
</ul>
<div class="border-bottom border-base-lighter margin-y-4"></div>
<a class="usa-link usa-button margin-bottom-3" href="{{ create_login_account_url }}">Create Login.gov account</a>
</div>
</div>
{% endif %}
{% endblock %}

2
app/templates/views/usage.html
View File

@@ -73,6 +73,7 @@
</div> #}
{% if months %}
<div class="table-wrapper">
<div class="dashboard-table usage-table body-copy-table margin-top-4">
{% call(item, row_index) list_table(
months,
@@ -129,6 +130,7 @@
{% endcall %}
</div>
</div>
{% endif %}
</div>

6
app/templates/withnav_template.html
View File

@@ -9,16 +9,16 @@
{% include "service_navigation.html" %}
<div class="grid-row margin-top-5">
{% if help %}
<div class="grid-col-3">
<div class="tablet:grid-col-3">
{% else %}
<div class="grid-col-3">
<div class="tablet:grid-col-3">
{% endif %}
{% include "main_nav.html" %}
</div>
{% if help %}
<div class="grid-col-8">
{% else %}
<div class="grid-col-9 padding-left-4">
<div class="tablet:grid-col-9 tablet:padding-left-4">
{% endif %}
{% block beforeContent %}
{% block backLink %}{% endblock %}