Refactor: reCAPTCHA copy + redesign

benefits/core/templates/core/base.html

@@ -1,4 +1,3 @@
-
 {% load i18n %}
 {% load static %}
 {% get_current_language as LANGUAGE_CODE %}
@@ -70,22 +69,16 @@
         {% endblock nav-buttons %}
         <div class="container main-row">
           <div class="row justify-content-center">
-            {% block headline %}
-            {% endblock headline %}
-          </div>
-          {% block explanatory-text-wrapper %}
-            <div class="col-lg-8">
-              {% block explanatory-text %}
-              {% endblock explanatory-text %}
+            <div class="col-lg-6">
+              {% block headline %}
+              {% endblock headline %}
+              {% block inner-content %}
+              {% endblock inner-content %}
             </div>
-          {% endblock explanatory-text-wrapper %}
-          <div class="row justify-content-center">
-            {% block inner-content %}
-            {% endblock inner-content %}
           </div>
           {% block call-to-action %}
-            <div class="row d-flex justify-content-lg-end pt-8">
-              <div class="col-lg-3 offset-2 offset-sm-2 offset-lg-0 col-sm-8 col-8">
+            <div class="row justify-content-center pt-8">
+              <div class="col-lg-6">
                 {% block call-to-action-button %}
                 {% endblock call-to-action-button %}
               </div>

benefits/core/templates/core/help.html

@@ -9,13 +9,8 @@
 {% block main-content %}
   <div class="container">
     <div class="row justify-content-center">
-      <div class="col-md-8 col-10">
+      <div class="col-lg-8">
         <h1 class="text-center">{% translate "Help" %}</h1>
-      </div>
-    </div>
-
-    <div class="row justify-content-center">
-      <div class="col-md-8 col-10">
         <h2 class="h2-sm pt-4 pt-lg-8" id="what-is-cal-itp">{% translate "What is Cal-ITP Benefits?" %}</h2>
         <p class="pt-2 pt-lg-4">
           {% blocktranslate trimmed %}
@@ -137,11 +132,7 @@ <h2 class="h2-sm pt-4 pt-lg-8" id="questions">{% translate "Questions?" %}</h2>
             provider.
           {% endblocktranslate %}
         </p>
-      </div>
-    </div>
 
-    <div class="row justify-content-center">
-      <div class="col-md-8 col-10">
         {% if agency %}
           {% include "core/includes/agency-links.html" %}
         {% else %}
@@ -152,8 +143,8 @@ <h2 class="h2-sm pt-4 pt-lg-8" id="questions">{% translate "Questions?" %}</h2>
       </div>
     </div>
 
-    <div class="row pt-4 pt-lg-8">
-      <div class="col-lg-2 offset-lg-10 col-8 offset-2">
+    <div class="row justify-content-center pt-4 pt-lg-8">
+      <div class="col-12 col-lg-6">
         {% translate "Go Back" as button_text %}
         {% include "core/includes/button--origin.html" with button_text=button_text %}
       </div>

benefits/core/templates/core/includes/eligibility-item.html

@@ -0,0 +1,8 @@
+<li>
+    <h2 class="h3 pb-1">
+        {% block heading %}
+        {% endblock heading %}
+    </h2>
+    {% block body %}
+    {% endblock body %}
+</li>

benefits/core/templates/core/includes/form.html

@@ -3,41 +3,35 @@
 
   {% url form.action_url as form_action %}
 
-  <form id="{{ form.id }}" action="{{ form_action }}" method="{{ form.method | default:"post" | upper }}" role="form">
+  <form id="{{ form.id }}" action="{{ form_action }}" method="{{ form.method | default:"post" | upper }}">
     {% csrf_token %}
 
-    <div class="row form-container justify-content-center">
-      <div class="{{ form.classes }}">
-        {% for field in form %}
-          <div class="row form-group mb-0">
-            <div class="col-12">
-              {# djlint:off #}
-              {% if field.label %}
-              <label for="{{ field.id_for_label }}" class="form-control-label">{{ field.label }}{% if field.field.required %}<span class="required-label text-body">*</span>{% endif %}
-              </label>
-              {% endif %}
-              {# djlint:on #}
-
-              {{ field }}
-
-              {% if field.help_text %}<small class="d-block mt-2 pt-1 form-text text-body">{{ field.help_text }}</small>{% endif %}
-            </div>
-          </div>
-        {% endfor %}
-      </div>
+    <div class="form-field-container {{ form.classes }}">
+      {% for field in form %}
+        <div class="form-group mb-0">
+          {# djlint:off #}
+          {% if field.label %}
+          <label for="{{ field.id_for_label }}" class="form-control-label">{{ field.label }}{% if field.field.required %}<span class="required-label text-body">*</span>{% endif %}
+          </label>
+          {% endif %}
+          {# djlint:on #}
+
+          {{ field }}
+
+          {% if field.help_text %}<small class="d-block mt-2 pt-1 form-text text-body">{{ field.help_text }}</small>{% endif %}
+        </div>
+      {% endfor %}
     </div>
 
     {% if form.submit_value %}
-      <div class="row d-flex justify-content-lg-end pt-8">
-        <div class="col-lg-3 offset-2 offset-sm-2 offset-lg-0 col-sm-8 col-8">
-          <button class="btn btn-lg btn-primary spinner-hidden d-flex justify-content-center align-items-center"
-                  data-action="submit"
-                  type="submit"
-                  form="{{ form.id }}">
-            <span class="btn-text">{{ form.submit_value }}</span>
-            <span class="spinner-border spinner-border-sm"></span>
-          </button>
-        </div>
+      <div class="pt-8">
+        <button class="btn btn-lg btn-primary spinner-hidden d-flex justify-content-center align-items-center"
+                data-action="submit"
+                type="submit"
+                form="{{ form.id }}">
+          <span class="btn-text">{{ form.submit_value }}</span>
+          <span class="spinner-border spinner-border-sm"></span>
+        </button>
       </div>
     {% endif %}
 
@@ -94,6 +88,8 @@
       {% endcomment %}
       <input type="hidden" name="{{ request.recaptcha.data_field }}" value="">
 
+      <div class="pt-8">{% include "core/includes/recaptcha-text.html" %}</div>
+
       <script nonce="{{ request.csp_nonce }}">
         function recaptchaSubmit($event) {
           // checks the validity of the form. Return if invalid; HTML5 validation errors should display
@@ -121,6 +117,5 @@
         $("button[type=submit]", "#{{ form.id }}").on("click", recaptchaSubmit);
       </script>
     {% endif %}
-
   </form>
 {% endif %}

benefits/core/templates/core/includes/recaptcha-text.html

@@ -0,0 +1,7 @@
+{% load i18n %}
+
+<p class="form-text text-body mt-0">
+  {% blocktranslate trimmed %}
+    This site is protected by reCAPTCHA and the Google <a href="https://policies.google.com/privacy" target="_blank" rel="noopener noreferrer">Privacy Policy</a> and <a href="https://policies.google.com/terms" target="_blank" rel="noopener noreferrer">Terms of Service</a> apply.
+  {% endblocktranslate %}
+</p>

benefits/core/templates/core/agency-index.html → benefits/core/templates/core/index--agency-base.html

@@ -1,4 +1,4 @@
-{% extends "core/landing.html" %}
+{% extends "core/index-base.html" %}
 {% load i18n %}
 
 {% block title %}

benefits/core/templates/core/index--cst.html

@@ -1,4 +1,4 @@
-{% extends "core/agency-index.html" %}
+{% extends "core/index--agency-base.html" %}
 {% load i18n %}
 
 {% block headline %}

benefits/core/templates/core/index--mst.html

@@ -1,4 +1,4 @@
-{% extends "core/agency-index.html" %}
+{% extends "core/index--agency-base.html" %}
 {% load i18n %}
 
 {% block headline %}

benefits/core/templates/core/index--nevco.html

@@ -1,4 +1,4 @@
-{% extends "core/agency-index.html" %}
+{% extends "core/index--agency-base.html" %}
 {% load i18n %}
 
 {% block headline %}

benefits/core/templates/core/index--sacrt.html

@@ -1,4 +1,4 @@
-{% extends "core/agency-index.html" %}
+{% extends "core/index--agency-base.html" %}
 {% load i18n %}
 
 {% block headline %}

benefits/core/templates/core/index--sbmtd.html

@@ -1,5 +1,4 @@
-{% extends "core/agency-index.html" %}
-
+{% extends "core/index--agency-base.html" %}
 {% load i18n %}
 
 {% block headline %}

benefits/core/templates/core/index.html

@@ -1,4 +1,4 @@
-{% extends "core/landing.html" %}
+{% extends "core/index-base.html" %}
 {% load i18n %}
 
 {% block title %}

benefits/core/templates/core/logged-out.html

@@ -5,15 +5,7 @@
   {% translate "Logged out" %}
 {% endblock page-title %}
 
-{% block main-content %}
-  <div class="container">
-    <div class="row justify-content-lg-center">
-      <div class="col-md-6">
-        <h1 class="h2 text-center">
-          <span class="d-block pb-lg-8 pb-5">{% include "core/includes/icon.html" with name="happybus" %}</span>
-          {% translate "You have successfully logged out. Thank you for using Cal-ITP Benefits!" %}
-        </h1>
-      </div>
-    </div>
-  </div>
-{% endblock main-content %}
+{% block inner-content %}
+  <div class="py-4 mt-5 text-center">{% include "core/includes/icon.html" with name="happybus" %}</div>
+  <h1 class="h2 pt-0">{% translate "You have successfully logged out. Thank you for using Cal-ITP Benefits!" %}</h1>
+{% endblock inner-content %}

benefits/core/templates/core/widgets/flow-radio-select.html

@@ -2,9 +2,9 @@
 
 {% with id=widget.attrs.id %}
 
-  <label for="{{ id }}" class="pb-4 h2">{% translate "Which transit benefit would you like to enroll in?" %}</label>
+  <label for="{{ id }}" class="h2">{% translate "Which transit benefit would you like to enroll in?" %}</label>
 
-  <div {% if id %}id="{{ id }}"{% endif %} class="ps-3 ps-md-0 ps-lg-0 offset-md-1 offset-lg-1 radio-container">
+  <div {% if id %}id="{{ id }}"{% endif %}>
     {% for group, options, index in widget.optgroups %}
       {% if group %}
         <div>
@@ -13,7 +13,7 @@
           {% endif %}
 
           {% for option in options %}
-            <div class="radio-input-group d-flex">{% include option.template_name with widget=option %}</div>
+            <div class="gap-4 gap-md-3 d-flex pt-4">{% include option.template_name with widget=option %}</div>
           {% endfor %}
 
           {% if group %}

benefits/core/views.py

@@ -12,7 +12,7 @@
 from .middleware import pageview_decorator, index_or_agencyindex_origin_decorator, user_error
 
 TEMPLATE_INDEX = "core/index.html"
-TEMPLATE_AGENCY = "core/agency-index.html"
+TEMPLATE_AGENCY = "core/index--agency-base.html"
 TEMPLATE_HELP = "core/help.html"
 TEMPLATE_LOGGED_OUT = "core/logged-out.html"
 

benefits/eligibility/forms.py

@@ -28,7 +28,6 @@ def __init__(self, agency: models.TransitAgency, *args, **kwargs):
         super().__init__(*args, **kwargs)
         flows = agency.enrollment_flows.filter(supported_enrollment_methods__contains=models.EnrollmentMethods.DIGITAL)
 
-        self.classes = "col-lg-8"
         # second element is not used since we render the whole label using selection_label_template,
         # therefore set to None
         flow_field = self.fields["flow"]
@@ -109,8 +108,8 @@ def __init__(
         self.title = title
         self.headline = headline
         self.blurb = blurb
+        self.classes = "eligibility-verification-form"
 
-        self.classes = "col-lg-6"
         sub_widget = widgets.FormControlTextInput(placeholder=sub_placeholder)
         if sub_pattern:
             sub_widget.attrs.update({"pattern": sub_pattern})

benefits/eligibility/templates/eligibility/confirm.html

@@ -10,23 +10,14 @@
 {% endblock nav-buttons %}
 
 {% block headline %}
-  <div class="col-lg-6">
-    <h1>{{ form.headline }}</h1>
-  </div>
+  <h1>{{ form.headline }}</h1>
 {% endblock headline %}
 
-{% block explanatory-text-wrapper %}
-  <div class="row justify-content-center">
-    <div class="col-lg-6">
-      {% block explanatory-text %}
-        <p class="pt-4 pb-4">{{ form.blurb }}</p>
-      {% endblock explanatory-text %}
-    </div>
-  </div>
-{% endblock explanatory-text-wrapper %}
-
 {% block inner-content %}
-  <div class="container">
-    <div class="row">{% include "core/includes/form.html" with form=form %}</div>
-  </div>
+  <p class="pt-4 pb-4">{{ form.blurb }}</p>
+  {% include "core/includes/form.html" with form=form %}
 {% endblock inner-content %}
+
+{% comment %} Override with empty block to prevent rendering empty divs {% endcomment %}
+{% block call-to-action %}
+{% endblock call-to-action %}

benefits/eligibility/templates/eligibility/includes/eligibility-item--contactless-card--start.html

@@ -0,0 +1,16 @@
+{% extends "core/includes/eligibility-item.html" %}
+{% load i18n %}
+
+{% block heading %}
+    {% translate "Your contactless card details" %}
+{% endblock heading %}
+
+{% block body %}
+    <p>
+        {% translate "Your contactless card must be a debit or credit card by Visa or Mastercard." %}
+        {% translate "Learn more about contactless cards" as text %}
+        {% include "core/includes/modal-trigger.html" with modal="modal--contactless" text=text period=True %}
+    </p>
+
+    {% include "eligibility/includes/modal--contactless.html" with id="modal--contactless" size="modal-lg" header="p-md-2 p-3" body="pb-md-3 mb-md-3 mx-md-3 py-0 pt-0 absolute-top" %}
+{% endblock body %}

benefits/eligibility/templates/eligibility/includes/eligibility-item--identification--start--cst-agency-card.html

@@ -0,0 +1,11 @@
+{% extends "core/includes/eligibility-item.html" %}
+
+{% load i18n %}
+
+{% block heading %}
+  {% translate "Your current Agency Card number" %}
+{% endblock heading %}
+
+{% block body %}
+  <p>{% translate "You do not need to have your physical CST Agency Card, but you will need to know the number." %}</p>
+{% endblock body %}

benefits/eligibility/templates/eligibility/includes/eligibility-item--identification--start--login-gov.html

@@ -0,0 +1,23 @@
+{% extends "core/includes/eligibility-item.html" %}
+
+{% load i18n %}
+
+{% block heading %}
+  {% translate "A Login.gov account with identity verification" %}
+{% endblock heading %}
+
+{% block body %}
+  <p>
+    {% translate "You will be able to create an account using your email address if you do not already have one. We use your Login.gov account to verify your identity." %}
+    {% translate "Learn more about identity verification" as text %}
+    {% include "core/includes/modal-trigger.html" with modal="modal--identity-verification" text=text period=True %}
+  </p>
+  <p>{% translate "For this process you will need:" %}</p>
+  <ul class="list-disc ms-lg-5 ms-0">
+    <li>{% translate "Your state-issued ID card" %}</li>
+    <li>{% translate "Your Social Security number" %}</li>
+    <li>{% translate "A phone number with a phone plan associated with your name" %}</li>
+  </ul>
+
+  {% include "eligibility/includes/modal--login-gov-start-help.html" with size="modal-lg" id="modal--identity-verification" header="p-md-2 p-3" body="pb-md-3 mb-md-3 mx-md-3 py-0 pt-0 absolute-top" %}
+{% endblock body %}

benefits/eligibility/templates/eligibility/includes/eligibility-item--identification--start--medicare.html

@@ -0,0 +1,13 @@
+{% extends "core/includes/eligibility-item.html" %}
+
+{% load i18n %}
+
+{% block heading %}
+  {% translate "An online account with Medicare.gov" %}
+{% endblock heading %}
+
+{% block body %}
+  <p>
+    {% translate "If you do not have an account you will be able to create one using your red, white, and blue Medicare card. We use your Medicare.gov account to verify you qualify." %}
+  </p>
+{% endblock body %}