Feat: CalFresh enrollment index (#1968)

benefits/core/migrations/0007_eligibilitytype_enrollment_index_template.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.0.3 on 2024-03-25 22:50
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("core", "0006_alter_allow_blank"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="eligibilitytype",
+            name="enrollment_index_template",
+            field=models.TextField(default="enrollment/index.html"),
+        ),
+    ]

benefits/core/models.py

@@ -113,6 +113,7 @@ class EligibilityType(models.Model):
     supports_expiration = models.BooleanField(default=False)
     expiration_days = models.PositiveSmallIntegerField(null=True, blank=True)
     expiration_reenrollment_days = models.PositiveSmallIntegerField(null=True, blank=True)
+    enrollment_index_template = models.TextField(default="enrollment/index.html")
 
     def __str__(self):
         return self.label

benefits/core/templates/core/base.html

@@ -44,7 +44,9 @@
     {% endif %}
     <header role="banner" id="header">
       <a id="skip-to-content"  href="#main-content" class="d-block w-100">
-        <div class="container"><span>{% translate "Skip to main content" %}</span></div>
+        <div class="container">
+          <span>{% translate "Skip to main content" %}</span>
+        </div>
       </a>
       {% if messages %}
         {% for message in messages %}
@@ -87,7 +89,7 @@
             {% endblock inner-content %}
           </div>
           {% block call-to-action %}
-            <div class="row d-flex justify-content-lg-end">
+            <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">
                 {% block call-to-action-button %}
                 {% endblock call-to-action-button %}

benefits/core/templates/core/includes/alert-box.html

@@ -0,0 +1,12 @@
+{% block alert-wrapper %}
+    <div class="alert-box border-start p-3 text-body {{ alert_class }}">
+        {% block alert-heading-wrapper %}
+            <{{ heading_tag|default:"h3" }} class="alert-box--heading lh-base ls-base mb-1">
+            {% block alert-heading %}
+            {% endblock alert-heading %}
+            </{{ heading_tag|default:"h3" }}>
+        {% endblock alert-heading-wrapper %}
+        {% block alert-body %}
+        {% endblock alert-body %}
+    </div>
+{% endblock alert-wrapper %}

benefits/enrollment/templates/enrollment/includes/alert-box--warning--calfresh.html

@@ -0,0 +1,19 @@
+{% extends "core/includes/alert-box.html" %}
+{% load i18n %}
+
+{% block alert-wrapper %}
+    {% with alert_class="alert-box--warning media-list-icon-left-margin" %}{{ block.super }}{% endwith %}
+{% endblock alert-wrapper %}
+
+{% block alert-heading %}
+    {% translate "Do not enter information from your EBT card." %}
+{% endblock alert-heading %}
+
+{% block alert-body %}
+    {% translate "Read our guidance on the CalFresh benefit" as calfresh_modal_link %}
+    <p>
+        {% translate "You can’t pay for transit using the CalFresh funds on your Golden State Advantage card. Please provide details from your contactless debit or credit card issued by Visa or Mastercard and use that card to pay for transit." %}
+        {% include "core/includes/modal-trigger.html" with modal="modal--calfresh" text=calfresh_modal_link period=True %}
+    </p>
+    {% include "eligibility/includes/modal--calfresh.html" with id="modal--calfresh" 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 alert-body %}

benefits/enrollment/templates/enrollment/includes/media-item--bankcardcheck--index--calfresh.html

@@ -0,0 +1,22 @@
+{% extends "core/includes/media-item.html" %}
+{% load i18n %}
+
+{% block icon %}
+    {% include "core/includes/icon.html" with name="bankcardcheck" %}
+{% endblock icon %}
+
+{% block heading %}
+    {% translate "The next step is to connect your contactless card to your transit benefit" %}
+{% endblock heading %}
+
+{% block body %}
+    <div class="media-body--details">
+        <p>
+            {% translate "You will be directed to our payment partner, " %}
+            {% include "core/includes/modal-trigger.html" with modal="modal--littlepay" text="Littlepay" period=True %}
+            {% translate "We don’t store your information, and you won’t be charged." %}
+        </p>
+    </div>
+
+    {% include "enrollment/includes/modal--littlepay.html" with id="modal--littlepay" size="modal-md" 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/enrollment/templates/enrollment/index--calfresh.html

@@ -0,0 +1,14 @@
+{% extends "enrollment/index.html" %}
+{% load i18n %}
+
+{% block media-items %}
+  <div class="col-12 col-sm-12 col-lg-8">
+    <ul class="media-list mb-5 mx-0 px-0 d-flex justify-content-center flex-column">
+      {% include "enrollment/includes/media-item--bankcardcheck--index--calfresh.html" %}
+    </ul>
+  </div>
+{% endblock media-items %}
+
+{% block additional-info %}
+  <div class="col-12 col-sm-12 col-lg-8">{% include "enrollment/includes/alert-box--warning--calfresh.html" %}</div>
+{% endblock additional-info %}

benefits/enrollment/templates/enrollment/index.html

@@ -20,11 +20,15 @@ <h1 class="pb-lg-8 pb-4">
 {% endblock headline %}
 
 {% block inner-content %}
-  <div class="col-12 col-sm-12 col-lg-8">
-    <ul class="media-list mx-0 px-0 d-flex justify-content-center flex-column">
-      {% include "enrollment/includes/media-item--bankcardcheck--index.html" %}
-    </ul>
-  </div>
+  {% block media-items %}
+    <div class="col-12 col-sm-12 col-lg-8">
+      <ul class="media-list mx-0 px-0 d-flex justify-content-center flex-column">
+        {% include "enrollment/includes/media-item--bankcardcheck--index.html" %}
+      </ul>
+    </div>
+  {% endblock media-items %}
+  {% block additional-info %}
+  {% endblock additional-info %}
   {% comment %}
     This Javascript code is partially generated by this template and so it must
     come before the forms, which are rendered at just before the {% endblock inner-content %}
@@ -38,7 +42,10 @@ <h1 class="pb-lg-8 pb-4">
           .done(function() {
           $.get("{{ access_token_url }}", function(data) {
               $(".loading").remove();
-              $(".invisible").removeClass("invisible");
+              // remove invisible and add back visible, so we aren't left with
+              // a div with an empty class attribute
+              // (this is purely for clarity when reviewing the HTML, no UX impact)
+              $(".invisible").removeClass("invisible").addClass("visible");
 
               $("#{{ cta_button }}").on("click", function() {
                   amplitude.getInstance().logEvent(startedEvent, {

benefits/enrollment/views.py

@@ -11,7 +11,7 @@
 from littlepay.api.client import Client
 from requests.exceptions import HTTPError
 
-from benefits.core import models, session
+from benefits.core import session
 from benefits.core.middleware import (
     EligibleSessionRequired,
     VerifierSessionRequired,
@@ -26,7 +26,6 @@
 ROUTE_SUCCESS = "enrollment:success"
 ROUTE_TOKEN = "enrollment:token"
 
-TEMPLATE_INDEX = "enrollment/index.html"
 TEMPLATE_RETRY = "enrollment/retry.html"
 TEMPLATE_SUCCESS = "enrollment/success.html"
 
@@ -61,6 +60,7 @@ def index(request):
     session.update(request, origin=reverse(ROUTE_INDEX))
 
     agency = session.agency(request)
+    eligibility = session.eligibility(request)
     payment_processor = agency.payment_processor
 
     # POST back after payment processor form, process card token
@@ -69,9 +69,6 @@ def index(request):
         if not form.is_valid():
             raise Exception("Invalid card token form")
 
-        eligibility = session.eligibility(request)
-        logger.debug(f"Session contains an {models.EligibilityType.__name__}")
-
         logger.debug("Read tokenized card")
         card_token = form.cleaned_data.get("card_token")
 
@@ -122,7 +119,7 @@ def index(request):
 
         logger.debug(f'card_tokenize_url: {context["card_tokenize_url"]}')
 
-        return TemplateResponse(request, TEMPLATE_INDEX, context)
+        return TemplateResponse(request, eligibility.enrollment_index_template, context)
 
 
 @decorator_from_middleware(EligibleSessionRequired)

benefits/locale/en/LC_MESSAGES/django.po

@@ -6,7 +6,7 @@
 msgid ""
 msgstr ""
 "Report-Msgid-Bugs-To: https://github.com/cal-itp/benefits/issues \n"
-"POT-Creation-Date: 2024-03-20 18:12+0000\n"
+"POT-Creation-Date: 2024-03-22 21:01+0000\n"
 "Language: English\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
@@ -183,6 +183,42 @@ msgstr ""
 msgid "Previous Page"
 msgstr ""
 
+msgid ""
+"How do I know if I'm eligible for the transit benefit for CalFresh "
+"Cardholders?"
+msgstr ""
+
+msgid ""
+"We verify your eligibility as a CalFresh Cardholder by confirming you have "
+"received funds in your CalFresh account at any point in the last three "
+"months. This means you are eligible for a transit benefit even if you did "
+"not receive funds in your CalFresh account this month or last month."
+msgstr ""
+
+msgid "Will this transit benefit change my CalFresh account?"
+msgstr ""
+
+msgid "No. Your monthly CalFresh allotment will not change."
+msgstr ""
+
+msgid "Do I need my Golden State Advantage card to enroll?"
+msgstr ""
+
+msgid ""
+"No, you do not need your physical EBT card to enroll. We use information "
+"from Login.gov and the California Department of Social Services to enroll "
+"you in the benefit."
+msgstr ""
+
+msgid "Can I use my Golden State Advantage card to pay for transit rides?"
+msgstr ""
+
+msgid ""
+"No. You can not use your EBT or P-EBT card to pay for public transportation. "
+"When you tap to ride, use your personal contactless debit or credit card to "
+"pay for public transportation."
+msgstr ""
+
 msgid "What is a Courtesy Card?"
 msgstr ""
 
@@ -329,22 +365,6 @@ msgstr ""
 msgid "Learn more about contactless cards"
 msgstr ""
 
-msgid "Your current Courtesy Card number"
-msgstr ""
-
-msgid ""
-"You do not need to have your physical card, but you will need to know the "
-"number. The number starts with a number sign (#) followed by five digits."
-msgstr ""
-
-msgid "Your current Reduced Fare Mobility ID number"
-msgstr ""
-
-msgid ""
-"You do not need to have your physical card, but you will need your 4-digit "
-"Reduced Fare Mobility ID number on the back of the card."
-msgstr ""
-
 msgid "A Login.gov account with identity verification"
 msgstr ""
 
@@ -368,43 +388,23 @@ msgstr ""
 msgid "A phone number with a phone plan associated with your name"
 msgstr ""
 
-msgid "Learn more about the transit benefit for CalFresh Cardholders"
-msgstr ""
-
-msgid ""
-"How do I know if I'm eligible for the transit benefit for CalFresh "
-"Cardholders?"
+msgid "Your current Courtesy Card number"
 msgstr ""
 
 msgid ""
-"We verify your eligibility as a CalFresh Cardholder by confirming you have "
-"received funds in your CalFresh account at any point in the last three "
-"months. This means you are eligible for a transit benefit even if you did "
-"not receive funds in your CalFresh account this month or last month."
-msgstr ""
-
-msgid "Will this transit benefit change my CalFresh account?"
-msgstr ""
-
-msgid "No. Your monthly CalFresh allotment will not change."
+"You do not need to have your physical card, but you will need to know the "
+"number. The number starts with a number sign (#) followed by five digits."
 msgstr ""
 
-msgid "Do I need my Golden State Advantage card to enroll?"
+msgid "Your current Reduced Fare Mobility ID number"
 msgstr ""
 
 msgid ""
-"No, you do not need your physical EBT card to enroll. We use information "
-"from Login.gov and the California Department of Social Services to enroll "
-"you in the benefit."
-msgstr ""
-
-msgid "Can I use my Golden State Advantage card to pay for transit rides?"
+"You do not need to have your physical card, but you will need your 4-digit "
+"Reduced Fare Mobility ID number on the back of the card."
 msgstr ""
 
-msgid ""
-"No. You can not use your EBT or P-EBT card to pay for public transportation. "
-"When you tap to ride, use your personal contactless debit or credit card to "
-"pay for public transportation."
+msgid "Learn more about the transit benefit for CalFresh Cardholders"
 msgstr ""
 
 msgid "Go back"
@@ -493,6 +493,15 @@ msgstr ""
 msgid "Choose the transit benefit you would like to enroll in"
 msgstr ""
 
+msgid "CalFresh benefit overview"
+msgstr ""
+
+msgid "You selected a CalFresh Cardholder transit benefit."
+msgstr ""
+
+msgid "Get started with"
+msgstr ""
+
 msgid "Agency card overview"
 msgstr ""
 
@@ -511,9 +520,6 @@ msgstr ""
 msgid "You selected an Older Adult transit benefit."
 msgstr ""
 
-msgid "Get started with"
-msgstr ""
-
 msgid "Veterans benefit overview"
 msgstr ""
 
@@ -536,6 +542,18 @@ msgstr ""
 msgid "Please reach out to %(short_name)s for assistance."
 msgstr ""
 
+msgid "Do not enter information from your EBT card."
+msgstr ""
+
+msgid "Read our guidance on the CalFresh benefit"
+msgstr ""
+
+msgid ""
+"You can’t pay for transit using the CalFresh funds on your Golden State "
+"Advantage card. Please provide details from your contactless debit or credit "
+"card issued by Visa or Mastercard and use that card to pay for transit."
+msgstr ""
+
 msgid ""
 "The next step is to connect your contactless card to your transit benefit"
 msgstr ""