Refactor: Eligibility start page

benefits/core/context_processors.py

@@ -26,7 +26,6 @@ def authentication(request):
 
         if verifier.is_auth_required:
             auth_provider = verifier.auth_provider
-            data["sign_in_button_label"] = auth_provider.sign_in_button_label
             data["sign_out_button_label"] = auth_provider.sign_out_button_label
 
         return {"authentication": data}

benefits/core/migrations/0001_initial.py

@@ -1,4 +1,4 @@
-# Generated by Django 4.2.2 on 2023-07-06 23:24
+# Generated by Django 4.2.3 on 2023-07-06 23:24
 
 from django.db import migrations, models
 import django.db.models.deletion
@@ -14,7 +14,6 @@ class Migration(migrations.Migration):
             name="AuthProvider",
             fields=[
                 ("id", models.AutoField(primary_key=True, serialize=False)),
-                ("sign_in_button_label", models.TextField()),
                 ("sign_out_button_label", models.TextField(null=True)),
                 ("client_name", models.TextField()),
                 ("client_id", models.TextField()),
@@ -37,7 +36,6 @@ class Migration(migrations.Migration):
             name="EligibilityVerifier",
             fields=[
                 ("id", models.AutoField(primary_key=True, serialize=False)),
-                ("bullets", models.JSONField(null=True)),
                 ("name", models.TextField()),
                 ("api_url", models.TextField(null=True)),
                 ("api_auth_header", models.TextField(null=True)),
@@ -46,12 +44,7 @@ class Migration(migrations.Migration):
                 ("jwe_encryption_alg", models.TextField(null=True)),
                 ("jws_signing_alg", models.TextField(null=True)),
                 ("selection_label_template", models.TextField()),
-                ("start_title", models.TextField()),
-                ("start_headline", models.TextField()),
-                ("start_item_heading", models.TextField()),
-                ("start_item_details", models.TextField()),
-                ("start_item_secondary_details", models.TextField()),
-                ("start_help_anchor", models.TextField()),
+                ("start_template", models.TextField(null=True)),
                 ("form_title", models.TextField(null=True)),
                 ("form_headline", models.TextField(null=True)),
                 ("form_blurb", models.TextField(null=True)),

benefits/core/migrations/0002_data.py

@@ -127,7 +127,6 @@ def load_data(app, *args, **kwargs):
     AuthProvider = app.get_model("core", "AuthProvider")
 
     senior_auth_provider = AuthProvider.objects.create(
-        sign_in_button_label=_("eligibility.buttons.senior.signin"),
         sign_out_button_label=_("eligibility.buttons.senior.signout"),
         client_name=os.environ.get("SENIOR_AUTH_PROVIDER_CLIENT_NAME", "senior-benefits-oauth-client-name"),
         client_id=os.environ.get("AUTH_PROVIDER_CLIENT_ID", "benefits-oauth-client-id"),
@@ -138,8 +137,6 @@ def load_data(app, *args, **kwargs):
     )
 
     veteran_auth_provider = AuthProvider.objects.create(
-        sign_in_button_label=_("eligibility.buttons.veteran.signin"),
-        sign_out_button_label=None,
         client_name=os.environ.get("VETERAN_AUTH_PROVIDER_CLIENT_NAME", "veteran-benefits-oauth-client-name"),
         client_id=os.environ.get("AUTH_PROVIDER_CLIENT_ID", "benefits-oauth-client-id"),
         authority=os.environ.get("AUTH_PROVIDER_AUTHORITY", "https://example.com"),
@@ -152,19 +149,10 @@ def load_data(app, *args, **kwargs):
 
     mst_oauth_claims_verifier = EligibilityVerifier.objects.create(
         name=os.environ.get("MST_OAUTH_VERIFIER_NAME", "OAuth claims via Login.gov (MST)"),
-        bullets=[
-            "eligibility.pages.start.login_gov.required_items[0]",
-            "eligibility.pages.start.login_gov.required_items[1]",
-            "eligibility.pages.start.login_gov.required_items[2]",
-        ],
         eligibility_type=mst_senior_type,
         auth_provider=senior_auth_provider,
         selection_label_template="core/includes/selection_label__login_gov.html",
-        start_title=_("eligibility.pages.start.login_gov.title"),
-        start_headline=_("eligibility.pages.start.login_gov.headline"),
-        start_item_heading=_("eligibility.pages.start.login_gov.start_item.heading"),
-        start_item_details=_("eligibility.pages.start.login_gov.start_item.details"),
-        start_help_anchor="login-gov",
+        start_template="eligibility/start__login_gov.html",
         unverified_title=_("eligibility.pages.unverified.title"),
         unverified_blurb=_("eligibility.pages.unverified.p[0]"),
         eligibility_confirmed_item_heading=_("enrollment.pages.index.login_gov.eligibility_confirmed_item.heading"),
@@ -178,20 +166,10 @@ def load_data(app, *args, **kwargs):
 
     mst_veteran_verifier = EligibilityVerifier.objects.create(
         name=os.environ.get("MST_VETERAN_VERIFIER_NAME", "VA.gov - Veteran (MST)"),
-        bullets=[
-            "eligibility.pages.start.veteran.required_items[0]",
-            "eligibility.pages.start.veteran.required_items[1]",
-            "eligibility.pages.start.veteran.required_items[2]",
-            "eligibility.pages.start.veteran.required_items[3]",
-        ],
         eligibility_type=mst_veteran_type,
         auth_provider=veteran_auth_provider,
         selection_label_template="core/includes/selection_label__mst_veteran.html",
-        start_title=_("eligibility.pages.start.veteran.title"),
-        start_headline=_("eligibility.pages.start.veteran.headline"),
-        start_item_heading=_("eligibility.pages.start.veteran.start_item.heading"),
-        start_item_details=_("eligibility.pages.start.veteran.start_item.details"),
-        start_item_secondary_details=_("eligibility.pages.start.veteran.start_item.secondary_details"),
+        start_template="eligibility/start__veteran.html",
         unverified_title=_("eligibility.pages.unverified.title"),
         unverified_blurb=_("eligibility.pages.unverified.p[0]"),
         enrollment_success_confirm_item_details=_("enrollment.pages.success.veteran.confirm_item.details"),
@@ -211,11 +189,7 @@ def load_data(app, *args, **kwargs):
         jws_signing_alg=os.environ.get("COURTESY_CARD_VERIFIER_JWS_SIGNING_ALG", "RS256"),
         auth_provider=None,
         selection_label_template="core/includes/selection_label__mst_courtesy_card.html",
-        start_title=_("eligibility.pages.start.mst_cc.title"),
-        start_headline=_("eligibility.pages.start.mst_cc.headline"),
-        start_item_heading=_("eligibility.pages.start.mst_cc.start_item.heading"),
-        start_item_details=_("eligibility.pages.start.mst_cc.start_item.details"),
-        start_help_anchor="mst-courtesy-card",
+        start_template="eligibility/start__mst_courtesy_card.html",
         form_title=_("eligibility.pages.confirm.mst_cc.title"),
         form_headline=_("eligibility.pages.confirm.mst_cc.headline"),
         form_blurb=_("eligibility.pages.confirm.mst_cc.p[0]"),
@@ -240,19 +214,10 @@ def load_data(app, *args, **kwargs):
 
     sacrt_oauth_claims_verifier = EligibilityVerifier.objects.create(
         name=os.environ.get("SACRT_OAUTH_VERIFIER_NAME", "OAuth claims via Login.gov (SacRT)"),
-        bullets=[
-            "eligibility.pages.start.login_gov.required_items[0]",
-            "eligibility.pages.start.login_gov.required_items[1]",
-            "eligibility.pages.start.login_gov.required_items[2]",
-        ],
         eligibility_type=sacrt_senior_type,
         auth_provider=senior_auth_provider,
         selection_label_template="core/includes/selection_label__login_gov.html",
-        start_title=_("eligibility.pages.start.login_gov.title"),
-        start_headline=_("eligibility.pages.start.login_gov.headline"),
-        start_item_heading=_("eligibility.pages.start.login_gov.start_item.heading"),
-        start_item_details=_("eligibility.pages.start.login_gov.start_item.details"),
-        start_help_anchor="login-gov",
+        start_template="eligibility/start__login_gov.html",
         unverified_title=_("eligibility.pages.unverified.title"),
         unverified_blurb=_("eligibility.pages.unverified.p[0]"),
         eligibility_confirmed_item_heading=_("enrollment.pages.index.login_gov.eligibility_confirmed_item.heading"),

benefits/core/models.py

@@ -42,7 +42,6 @@ class AuthProvider(models.Model):
     """An entity that provides authentication for eligibility verifiers."""
 
     id = models.AutoField(primary_key=True)
-    sign_in_button_label = models.TextField()
     sign_out_button_label = models.TextField(null=True)
     client_name = models.TextField()
     client_id = models.TextField()
@@ -87,7 +86,6 @@ class EligibilityVerifier(models.Model):
     """An entity that verifies eligibility."""
 
     id = models.AutoField(primary_key=True)
-    bullets = models.JSONField(null=True)
     name = models.TextField()
     api_url = models.TextField(null=True)
     api_auth_header = models.TextField(null=True)
@@ -103,12 +101,7 @@ class EligibilityVerifier(models.Model):
     jws_signing_alg = models.TextField(null=True)
     auth_provider = models.ForeignKey(AuthProvider, on_delete=models.PROTECT, null=True)
     selection_label_template = models.TextField()
-    start_title = models.TextField()
-    start_headline = models.TextField()
-    start_item_heading = models.TextField()
-    start_item_details = models.TextField()
-    start_item_secondary_details = models.TextField()
-    start_help_anchor = models.TextField()
+    start_template = models.TextField(null=True)
     form_title = models.TextField(null=True)
     form_headline = models.TextField(null=True)
     form_blurb = models.TextField(null=True)

benefits/core/templates/core/includes/button__previous_page.html

@@ -0,0 +1,14 @@
+{% load i18n %}
+
+<div class="container">
+  <div class="row nav-button-row position-absolute">
+    <div class="d-flex align-items-center">
+      <a href="{{ url }}" id="previous-page-button" class="btn btn-lg btn-outline-dark">
+        <svg width="18" height="18" viewBox="0 0 18 18" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+          <path d="M14.25 8.24999H5.355L8.0775 4.97999C8.2048 4.82683 8.26605 4.62937 8.24777 4.43105C8.22948 4.23273 8.13316 4.0498 7.98 3.92249C7.82684 3.79519 7.62938 3.73394 7.43106 3.75223C7.23274 3.77051 7.0498 3.86683 6.9225 4.01999L3.1725 8.51999C3.14727 8.55579 3.12471 8.59339 3.105 8.63249C3.105 8.66999 3.105 8.69249 3.0525 8.72999C3.01851 8.81599 3.00071 8.90753 3 8.99999C3.00071 9.09246 3.01851 9.184 3.0525 9.26999C3.0525 9.30749 3.0525 9.32999 3.105 9.36749C3.12471 9.4066 3.14727 9.4442 3.1725 9.47999L6.9225 13.98C6.99302 14.0647 7.08132 14.1327 7.18113 14.1794C7.28095 14.2261 7.38982 14.2502 7.5 14.25C7.67524 14.2503 7.84507 14.1893 7.98 14.0775C8.05594 14.0145 8.11872 13.9372 8.16473 13.8499C8.21075 13.7627 8.2391 13.6672 8.24815 13.569C8.25721 13.4707 8.2468 13.3717 8.21751 13.2775C8.18823 13.1833 8.14065 13.0958 8.0775 13.02L5.355 9.74999H14.25C14.4489 9.74999 14.6397 9.67097 14.7803 9.53032C14.921 9.38967 15 9.1989 15 8.99999C15 8.80108 14.921 8.61031 14.7803 8.46966C14.6397 8.32901 14.4489 8.24999 14.25 8.24999Z" />
+        </svg>
+        {% translate "core.buttons.previous_page" %}
+      </a>
+    </div>
+  </div>
+</div>

benefits/core/templates/core/includes/icon__direct_args.html

@@ -0,0 +1,13 @@
+
+{% if not name %}
+  <p class="bg-grey-lightest color-standout">
+    Missing <strong><code>name</code></strong> argument
+  </p>
+{% elif not alt %}
+  <p class="bg-grey-lightest color-standout">
+    Missing <strong><code>alt</code></strong> argument
+  </p>
+{% else %}
+  {% load static %}
+  <img class="icon" width="150" height="150" src="{% get_static_prefix %}img/icon/{{ name }}.svg" alt="{{ alt }}" />
+{% endif %}

benefits/core/templates/core/includes/media-list.html

@@ -7,16 +7,8 @@
                 {% if item.details|length %}
                     <div class="media-body--details">
                         {% for d in item.details %}<p>{{ d }}</p>{% endfor %}
-                        {% if item.bullets|length %}
-                            <div class="media-body--items">
-                                <ul>
-                                    {% for l in item.bullets %}<li>{{ l }}</li>{% endfor %}
-                                </ul>
-                            </div>
-                        {% endif %}
                     </div>
                 {% endif %}
-                {% if item.secondary_details %}<p class="pt-1">{{ item.secondary_details }}</p>{% endif %}
             </div>
         </li>
     {% endfor %}

benefits/core/templates/core/includes/media_item.html

@@ -0,0 +1,14 @@
+<li class="media d-flex align-items-stretch w-auto">
+    <div class="media-line">
+        {% block icon %}
+        {% endblock icon %}
+    </div>
+    <div class="media-body">
+        <h3 class="media-body--heading">
+            {% block heading %}
+            {% endblock heading %}
+        </h3>
+        {% block body %}
+        {% endblock body %}
+    </div>
+</li>

benefits/core/viewmodels.py

@@ -77,12 +77,6 @@ def outline_primary(**kwargs):
         classes.insert(0, "btn-outline-primary")
         return Button(classes=classes, **kwargs)
 
-    @staticmethod
-    def login(**kwargs):
-        """Create a login.gov button, with a login.gov logo and fallback text"""
-        btn = Button.primary(fallback_text="Login.gov", id="login", **kwargs)
-        return btn
-
     @staticmethod
     def logout(**kwargs):
         """Create a button that logs user out, with a login.gov button, with a login.gov logo and fallback text"""
@@ -107,12 +101,10 @@ class MediaItem:
     Represents a media item in a list of items:
     * icon: core.viewmodels.Icon
     * details: str, str[]
-    * secondary_details: str
     * heading: str
-    * bullets: str, str[]
     """
 
-    def __init__(self, icon: Icon, details, secondary_details=None, heading=None, bullets=None):
+    def __init__(self, icon: Icon, details, heading=None):
         self.icon = icon
         if isinstance(details, str):
             self.details = [details]
@@ -121,11 +113,6 @@ def __init__(self, icon: Icon, details, secondary_details=None, heading=None, bu
         else:
             self.details = [str(details)]
         self.heading = heading
-        self.secondary_details = secondary_details
-        if isinstance(bullets, str):
-            self.bullets = [bullets]
-        elif isinstance(bullets, list):
-            self.bullets = bullets
 
 
 class Modal:

benefits/eligibility/templates/eligibility/includes/media_item__bankcardcheck__start.html

@@ -0,0 +1,17 @@
+{% extends "core/includes/media_item.html" %}
+{% load i18n %}
+
+{% block icon %}
+    {% translate "core.icons.bankcardcheck" context "image alt text" as icon_alt %}
+    {% include "core/includes/icon__direct_args.html" with name="bankcardcheck" alt=icon_alt %}
+{% endblock icon %}
+
+{% block heading %}
+    {% translate "eligibility.pages.start.bankcard.title" %}
+{% endblock heading %}
+
+{% block body %}
+    <div class="media-body--details">
+        <p>{% translate "eligibility.pages.start.bankcard.text" %}</p>
+    </div>
+{% endblock body %}

benefits/eligibility/templates/eligibility/includes/media_item__idcardcheck.html

@@ -0,0 +1,8 @@
+{% extends "core/includes/media_item.html" %}
+
+{% load i18n %}
+
+{% block icon %}
+    {% translate "core.icons.idcardcheck" context "image alt text" as icon_alt %}
+    {% include "core/includes/icon__direct_args.html" with name="idcardcheck" alt=icon_alt %}
+{% endblock icon %}

benefits/eligibility/templates/eligibility/includes/media_item__idcardcheck__start__login_gov.html

@@ -0,0 +1,20 @@
+{% extends "eligibility/includes/media_item__idcardcheck.html" %}
+
+{% load i18n %}
+
+{% block heading %}
+    {% translate "eligibility.pages.start.login_gov.start_item.heading" %}
+{% endblock heading %}
+
+{% block body %}
+    <div class="media-body--details">
+        <p>{% translate "eligibility.pages.start.login_gov.start_item.details" %}</p>
+        <div class="media-body--items">
+            <ul>
+                <li>{% translate "eligibility.pages.start.login_gov.required_items[0]" %}</li>
+                <li>{% translate "eligibility.pages.start.login_gov.required_items[1]" %}</li>
+                <li>{% translate "eligibility.pages.start.login_gov.required_items[2]" %}</li>
+            </ul>
+        </div>
+    </div>
+{% endblock body %}

benefits/eligibility/templates/eligibility/includes/media_item__idcardcheck__start__mst_courtesy_card.html

@@ -0,0 +1,13 @@
+{% extends "eligibility/includes/media_item__idcardcheck.html" %}
+
+{% load i18n %}
+
+{% block heading %}
+    {% translate "eligibility.pages.start.mst_cc.start_item.heading" %}
+{% endblock heading %}
+
+{% block body %}
+    <div class="media-body--details">
+        <p>{% translate "eligibility.pages.start.mst_cc.start_item.details" %}</p>
+    </div>
+{% endblock body %}

benefits/eligibility/templates/eligibility/includes/media_item__idcardcheck__start__veteran.html

@@ -0,0 +1,22 @@
+{% extends "eligibility/includes/media_item__idcardcheck.html" %}
+
+{% load i18n %}
+
+{% block heading %}
+    {% translate "eligibility.pages.start.veteran.start_item.heading" %}
+{% endblock heading %}
+
+{% block body %}
+    <div class="media-body--details">
+        <p>{% translate "eligibility.pages.start.veteran.start_item.details" %}</p>
+        <div class="media-body--items">
+            <ul>
+                <li>{% translate "eligibility.pages.start.veteran.required_items[0]" %}</li>
+                <li>{% translate "eligibility.pages.start.veteran.required_items[1]" %}</li>
+                <li>{% translate "eligibility.pages.start.veteran.required_items[2]" %}</li>
+                <li>{% translate "eligibility.pages.start.veteran.required_items[3]" %}</li>
+            </ul>
+            <p class="pt-1">{% translate "eligibility.pages.start.veteran.start_item.secondary_details" %}</p>
+        </div>
+    </div>
+{% endblock body %}

benefits/eligibility/templates/eligibility/start.html

@@ -1,28 +1,32 @@
 {% extends "core/base.html" %}
 {% load i18n %}
+
 {% block classes %}
-  {{ block.super |add:" eligibility-start" }}
+  {{ block.super | add:" eligibility-start" }}
 {% endblock classes %}
 
 {% block nav-buttons %}
-  {% include "core/includes/previous-page-link.html" %}
+  {% url "eligibility:index" as url %}
+  {% include "core/includes/button__previous_page.html" with url=url %}
 {% endblock nav-buttons %}
 
 {% block inner-content %}
   <div class="col-12 col-sm-12 col-lg-10">
-    <h2 class="media-title p-sm">{{ start_sub_headline }}</h2>
-    {% include "core/includes/media-list.html" with media=media %}
+    <h2 class="media-title p-sm">{% translate "eligibility.pages.start.sub_headline" %}</h2>
+    <ul class="media-list mx-0 px-0 d-flex justify-content-center flex-column">
+      {% block media-item %}
+      {% endblock media-item %}
+      {% include "eligibility/includes/media_item__bankcardcheck__start.html" %}
+    </ul>
   </div>
 {% endblock inner-content %}
 
 {% block call-to-action-text %}
   <p class="pt-4 pt-lg-0">
-    {% blocktranslate with help_link=help_link%}eligibility.pages.start.help_text{{ help_link }}{% endblocktranslate %}
+    {% block help-link %}
+    {% endblock help-link %}
   </p>
 {% endblock call-to-action-text %}
 
 {% block call-to-action-button %}
-  {% for b in page.buttons %}
-    {% include "core/includes/button.html" with button=b %}
-  {% endfor %}
 {% endblock call-to-action-button %}