Merge pull request #2112 from GSA/2101-about-notify

About Notify - About pages

.ds.baseline

@@ -161,7 +161,7 @@
         "filename": "app/config.py",
         "hashed_secret": "577a4c667e4af8682ca431857214b3a920883efc",
         "is_verified": false,
-        "line_number": 121,
+        "line_number": 125,
         "is_secret": false
       }
     ],
@@ -684,5 +684,5 @@
       }
     ]
   },
-  "generated_at": "2024-10-29T19:28:03Z"
+  "generated_at": "2024-11-14T15:53:44Z"
 }

app/assets/sass/uswds/_uswds-theme-custom-styles.scss

@@ -897,3 +897,22 @@ li.linked-card:hover svg,
 .usa-sidenav__item a {
    display: block;
 }
+
+.about-icon-list {
+   display: flex;
+   width: 24px;
+   height: 24px;
+   padding: 2px 1px;
+   justify-content: center;
+   align-items: center;
+   margin-right: 4px;
+}
+
+.usa-icon-list__content{
+   padding-left: 0;
+}
+
+.indented-paragraph {
+   margin-left: calc(24px + 4px);
+   margin-top: 4px;
+}

app/config.py

@@ -91,6 +91,10 @@ class Config(object):
         getenv("FEATURE_BEST_PRACTICES_ENABLED", "false") == "true"
     )
 
+    FEATURE_ABOUT_PAGE_ENABLED = (
+        getenv("FEATURE_ABOUT_PAGE_ENABLED", "false") == "true"
+    )
+
 
 def _s3_credentials_from_env(bucket_prefix):
     return {

app/main/views/index.py

@@ -10,6 +10,7 @@ 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 (
+    about_notify_nav,
     best_practices_nav,
     features_nav,
     using_notify_nav,
@@ -18,12 +19,18 @@ from app.utils.user import user_is_logged_in
 from notifications_utils.url_safe_token import generate_token
 
 
-# Hook to check for guidance routes
+# Hook to check for feature flags
 @main.before_request
-def check_guidance_feature():
+def check_feature_flags():
     if (
         request.path.startswith("/guides/best-practices")
-        and not current_app.config["FEATURE_BEST_PRACTICES_ENABLED"]
+        and not current_app.config.get("FEATURE_BEST_PRACTICES_ENABLED", False)
+    ):
+        abort(404)
+
+    if (
+        request.path.startswith("/about")
+        and not current_app.config.get("FEATURE_ABOUT_PAGE_ENABLED", False)
     ):
         abort(404)
 
@@ -280,6 +287,14 @@ def guidance_index():
     )
 
 
+@main.route("/about")
+def about_notify():
+    return render_template(
+        "views/about/about.html",
+        navigation_links=about_notify_nav(),
+    )
+
+
 @main.route("/using-notify/guidance/create-and-send-messages")
 @user_is_logged_in
 def create_and_send_messages():

app/main/views/sub_navigation_dictionaries.py

@@ -105,3 +105,12 @@ def best_practices_nav():
             "link": "main.benchmark_performance",
         },
     ]
+
+
+def about_notify_nav():
+    return [
+        {
+            "name": "About notify",
+            "link": "main.about_notify",
+        },
+    ]

app/templates/views/about/about.html

@@ -0,0 +1,77 @@
+{% extends "base.html" %}
+
+{% set page_title = "About notify" %}
+
+{% block per_page_title %}
+{{page_title}}
+{% endblock %}
+
+{% block content_column_content %}
+<!-- {% with title=page_title %}{% include "components/best-practices/nav_breadcrumb.html" %}{% endwith %} -->
+<section class="usa-prose">
+  <h1>{{page_title}}</h1>
+  <p>Notify.gov is a text messaging service built by and for the government. We help agencies communicate more
+    effectively with the people they serve. With Notify.gov, federal and federally-funded programs can send customized
+    text messages that make it possible to:</p>
+  <ul>
+    <li>Meet people where they are</li>
+    <li>More effectively deliver program outcomes</li>
+    <li>Save administrative costs</li>
+    <li>Implement <a href="https://digital.gov/resources/delivering-digital-first-public-experience/"
+        target="_blank">21st Century IDEA</a> and other directives</li>
+  </ul>
+  <p>Notify.gov is an easy-to-use, web-based platform. It requires no technical expertise or system integration — users
+    can create an account and get started within minutes. We take the security and privacy of messaging data seriously
+    by minimizing data retention and using modern encryption methods.</p>
+  <!-- add youtube video component here -->
+  <h2 class="padding-bottom-3">Product Highlights</h2>
+  {% set product_highlights = [
+  {
+  "svg_src": "#send",
+  "card_heading": "Send customized one-way customized messages",
+  "p_text": "Upload a file with recipient phone numbers and Notify.gov sends customized messages",
+  },
+  {
+  "svg_src": "#translate",
+  "card_heading": "Send in recipients’ preferred language",
+  "p_text": "Notify.gov supports more than 30 character sets to send messages in almost any language",
+  },
+  {
+  "svg_src": "#trending_up",
+  "card_heading": "See how messages perform",
+  "p_text": "Track how many messages you’ve sent and monitor delivery rates",
+  },
+  {
+  "svg_src": "#add",
+  "card_heading": "Create and manage multiple services within a single organization",
+  "p_text": "Set up individual workspaces for different texting services, allowing multiple teams or programs to manage
+  day-to-day texting operations across an organization",
+  },
+  {
+  "svg_src": "#people",
+  "card_heading": "Manage team member and permissions on each service",
+  "p_text": "Administrators can add users and control what they can do in Notify.gov",
+  }
+  ] %}
+  <ul class="usa-icon-list">
+    {% for item in product_highlights %}
+    <li class="usa-icon-list__item">
+      <div class="usa-icon-list__content">
+        <div class="usa-icon-list__icon display-flex flex-align-start">
+          <svg aria-hidden="true" focusable="false" role="img" class="about-icon-list">
+            <use xlink:href="{{ asset_url('img/sprite.svg') }}{{ item.svg_src }}"></use>
+          </svg>
+          <b>{{item.card_heading}}</b>
+        </div>
+        <p class="indented-paragraph">{{item.p_text}}</p>
+      </div>
+    </li>
+    {% endfor %}
+  </ul>
+  <p><a href="/join-notify">See if Notify is right for you</a></p>
+  <p>Notify.gov is a product of the <a href="#" target="_blank">Public Benefits Studio</a>, a product accelerator inside
+    the federal government. </p>
+
+
+</section>
+{% endblock %}

tests/app/test_navigation.py

@@ -17,6 +17,7 @@ EXCLUDED_ENDPOINTS = tuple(
     map(
         Navigation.get_endpoint_with_blueprint,
         {
+            "about_notify",
             "accept_invite",
             "accept_org_invite",
             "accessibility_statement",