From ac530b38643f11086441bda7994bb3fd0cd98402 Mon Sep 17 00:00:00 2001 From: Kegan Maher Date: Wed, 20 Mar 2024 22:03:36 +0000 Subject: [PATCH 01/11] feat(models): EligibilityType stores its enrollment index template --- ...ligibilitytype_enrollment_index_template.py | 18 ++++++++++++++++++ benefits/core/models.py | 1 + benefits/enrollment/views.py | 9 +++------ tests/pytest/core/test_models.py | 10 ++++++++++ tests/pytest/enrollment/test_views.py | 5 ++--- 5 files changed, 34 insertions(+), 9 deletions(-) create mode 100644 benefits/core/migrations/0007_eligibilitytype_enrollment_index_template.py diff --git a/benefits/core/migrations/0007_eligibilitytype_enrollment_index_template.py b/benefits/core/migrations/0007_eligibilitytype_enrollment_index_template.py new file mode 100644 index 000000000..aa252003b --- /dev/null +++ b/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"), + ), + ] diff --git a/benefits/core/models.py b/benefits/core/models.py index ac29f37cd..1d3cbacff 100644 --- a/benefits/core/models.py +++ b/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 diff --git a/benefits/enrollment/views.py b/benefits/enrollment/views.py index 71ac35e16..9b3eaa76f 100644 --- a/benefits/enrollment/views.py +++ b/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) diff --git a/tests/pytest/core/test_models.py b/tests/pytest/core/test_models.py index aedfdb571..798dfeb8b 100644 --- a/tests/pytest/core/test_models.py +++ b/tests/pytest/core/test_models.py @@ -216,6 +216,16 @@ def test_EligibilityType_supports_expiration(model_EligibilityType_supports_expi model_EligibilityType_supports_expiration.full_clean() +@pytest.mark.django_db +def test_EligibilityType_enrollment_index_template(model_EligibilityType): + assert model_EligibilityType.enrollment_index_template == "enrollment/index.html" + + model_EligibilityType.enrollment_index_template = "test/enrollment.html" + model_EligibilityType.save() + + assert model_EligibilityType.enrollment_index_template == "test/enrollment.html" + + class SampleFormClass: """A class for testing EligibilityVerifier form references.""" diff --git a/tests/pytest/enrollment/test_views.py b/tests/pytest/enrollment/test_views.py index 84799d99f..c2643262c 100644 --- a/tests/pytest/enrollment/test_views.py +++ b/tests/pytest/enrollment/test_views.py @@ -13,7 +13,6 @@ ROUTE_TOKEN, ROUTE_SUCCESS, ROUTE_RETRY, - TEMPLATE_INDEX, TEMPLATE_SUCCESS, TEMPLATE_RETRY, ) @@ -101,12 +100,12 @@ def test_token_valid(mocker, client): @pytest.mark.django_db @pytest.mark.usefixtures("mocked_session_agency", "mocked_session_verifier", "mocked_session_eligibility") -def test_index_eligible_get(client): +def test_index_eligible_get(client, model_EligibilityType): path = reverse(ROUTE_INDEX) response = client.get(path) assert response.status_code == 200 - assert response.template_name == TEMPLATE_INDEX + assert response.template_name == model_EligibilityType.enrollment_index_template assert "forms" in response.context_data assert "cta_button" in response.context_data assert "card_tokenize_env" in response.context_data From ae3630605c8a60a326b9c098320ede9b338ab081 Mon Sep 17 00:00:00 2001 From: Kegan Maher Date: Wed, 20 Mar 2024 17:29:18 -0700 Subject: [PATCH 02/11] refactor(enrollment): define blocks for overriding index template --- ...-item--bankcardcheck--index--calfresh.html | 22 +++++++++++++++++++ .../templates/enrollment/index--calfresh.html | 16 ++++++++++++++ .../templates/enrollment/index.html | 14 +++++++----- 3 files changed, 47 insertions(+), 5 deletions(-) create mode 100644 benefits/enrollment/templates/enrollment/includes/media-item--bankcardcheck--index--calfresh.html create mode 100644 benefits/enrollment/templates/enrollment/index--calfresh.html diff --git a/benefits/enrollment/templates/enrollment/includes/media-item--bankcardcheck--index--calfresh.html b/benefits/enrollment/templates/enrollment/includes/media-item--bankcardcheck--index--calfresh.html new file mode 100644 index 000000000..3fe204c17 --- /dev/null +++ b/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 %} +
+

+ {% 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." %} +

+
+ + {% 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 %} diff --git a/benefits/enrollment/templates/enrollment/index--calfresh.html b/benefits/enrollment/templates/enrollment/index--calfresh.html new file mode 100644 index 000000000..6f6d55183 --- /dev/null +++ b/benefits/enrollment/templates/enrollment/index--calfresh.html @@ -0,0 +1,16 @@ +{% extends "enrollment/index.html" %} +{% load i18n %} + +{% block media-items %} +
+
    + {% include "enrollment/includes/media-item--bankcardcheck--index--calfresh.html" %} +
+
+{% endblock media-items %} + +{% block additional-info %} +
+

Info alert here

+
+{% endblock additional-info %} diff --git a/benefits/enrollment/templates/enrollment/index.html b/benefits/enrollment/templates/enrollment/index.html index b2fdeee0d..091d7a0bc 100644 --- a/benefits/enrollment/templates/enrollment/index.html +++ b/benefits/enrollment/templates/enrollment/index.html @@ -20,11 +20,15 @@

{% endblock headline %} {% block inner-content %} -
-
    - {% include "enrollment/includes/media-item--bankcardcheck--index.html" %} -
-
+ {% block media-items %} +
+
    + {% include "enrollment/includes/media-item--bankcardcheck--index.html" %} +
+
+ {% 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 %} From 703bad7b171d261a28b927e519db32ecb094083c Mon Sep 17 00:00:00 2001 From: Kegan Maher Date: Fri, 22 Mar 2024 20:37:36 +0000 Subject: [PATCH 03/11] feat(templates): reusable alert-box component include basic layout styles that apply to any alert-box --- .../templates/core/includes/alert-box.html | 12 +++++++++ benefits/static/css/styles.css | 27 +++++++++++++++++++ 2 files changed, 39 insertions(+) create mode 100644 benefits/core/templates/core/includes/alert-box.html diff --git a/benefits/core/templates/core/includes/alert-box.html b/benefits/core/templates/core/includes/alert-box.html new file mode 100644 index 000000000..8cb9e4f35 --- /dev/null +++ b/benefits/core/templates/core/includes/alert-box.html @@ -0,0 +1,12 @@ +{% block alert-wrapper %} +
+ {% block alert-heading-wrapper %} + <{{ heading_tag|default:"h3" }} class="alert-box--heading"> + {% block alert-heading %} + {% endblock alert-heading %} + + {% endblock alert-heading-wrapper %} + {% block alert-body %} + {% endblock alert-body %} +
+{% endblock alert-wrapper %} diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css index a3514a9af..b0cbea140 100644 --- a/benefits/static/css/styles.css +++ b/benefits/static/css/styles.css @@ -834,6 +834,33 @@ a.card:focus-visible { background-image: url("/static/img/modal-trigger--selected.svg"); } +:root { + --alert-box-padding: calc(16rem / 16); + --alert-box-border-width: calc(8rem / 16); + --alert-box--heading-margin-bottom: calc(4rem / 16); + --alert-box--heading-line-height: calc(27rem / 16); +} + +.alert-box { + border-left-width: var(--alert-box-border-width); + border-left-style: solid; + padding: var(--alert-box-padding); + color: var(--text-primary-color); +} + +.alert-box a:focus:not(.btn):not(.card):not(.footer-link):not(#skip-to-content), +.alert-box + a:focus-visible:not(.btn):not(.card):not(.footer-link):not(#skip-to-content) { + outline-color: var(--primary-color) !important; +} + +.alert-box--heading { + font-size: var(--font-size-18px); + line-height: var(--alert-box--heading-line-height); + letter-spacing: var(--letter-spacing-5); + margin-bottom: var(--alert-box--heading-margin-bottom); +} + /* Enrollment Success */ /* Custom in-line log out button for Enrollment Success, in paragraph */ From daff1af0d074ff6a79a216ebf0d3a4fe0f9e2883 Mon Sep 17 00:00:00 2001 From: Kegan Maher Date: Fri, 22 Mar 2024 20:38:59 +0000 Subject: [PATCH 04/11] feat(templates): alert-box variant for warnings override background and border colors --- .../core/templates/core/includes/alert-box--warning.html | 5 +++++ benefits/static/css/styles.css | 8 ++++++++ 2 files changed, 13 insertions(+) create mode 100644 benefits/core/templates/core/includes/alert-box--warning.html diff --git a/benefits/core/templates/core/includes/alert-box--warning.html b/benefits/core/templates/core/includes/alert-box--warning.html new file mode 100644 index 000000000..3976eea07 --- /dev/null +++ b/benefits/core/templates/core/includes/alert-box--warning.html @@ -0,0 +1,5 @@ +{% extends "core/includes/alert-box.html" %} + +{% block alert-wrapper %} + {% with alert_class="alert-box--warning" %}{{ block.super }}{% endwith %} +{% endblock alert-wrapper %} diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css index b0cbea140..572cc2475 100644 --- a/benefits/static/css/styles.css +++ b/benefits/static/css/styles.css @@ -4,6 +4,7 @@ --bs-blue: var(--primary-color); --bs-primary: var(--primary-color); --bs-primary-rgb: var(--primary-color-rgb); + --bs-warning: #fff1d0; --text-primary-color: #212121; --bs-body-color: var(--text-primary-color); --bs-body-text-align: left; @@ -839,6 +840,8 @@ a.card:focus-visible { --alert-box-border-width: calc(8rem / 16); --alert-box--heading-margin-bottom: calc(4rem / 16); --alert-box--heading-line-height: calc(27rem / 16); + --alert-box-border-color--warning: #fdb714; + --alert-box-background-color--warning: var(--bs-warning); } .alert-box { @@ -854,6 +857,11 @@ a.card:focus-visible { outline-color: var(--primary-color) !important; } +.alert-box--warning { + background-color: var(--alert-box-background-color--warning); + border-left-color: var(--alert-box-border-color--warning); +} + .alert-box--heading { font-size: var(--font-size-18px); line-height: var(--alert-box--heading-line-height); From 4ba489c5ff25e272708f6b37765678f00654ffc3 Mon Sep 17 00:00:00 2001 From: Kegan Maher Date: Fri, 22 Mar 2024 20:48:54 +0000 Subject: [PATCH 05/11] feat(enrollment): include the alert-box for the CalFresh index update PO files with new English text --- .../alert-box--warning--calfresh.html | 15 +++ .../templates/enrollment/index--calfresh.html | 4 +- benefits/locale/en/LC_MESSAGES/django.po | 112 +++++++++------- benefits/locale/es/LC_MESSAGES/django.po | 124 ++++++++++-------- 4 files changed, 152 insertions(+), 103 deletions(-) create mode 100644 benefits/enrollment/templates/enrollment/includes/alert-box--warning--calfresh.html diff --git a/benefits/enrollment/templates/enrollment/includes/alert-box--warning--calfresh.html b/benefits/enrollment/templates/enrollment/includes/alert-box--warning--calfresh.html new file mode 100644 index 000000000..2b9354400 --- /dev/null +++ b/benefits/enrollment/templates/enrollment/includes/alert-box--warning--calfresh.html @@ -0,0 +1,15 @@ +{% extends "core/includes/alert-box--warning.html" %} +{% load i18n %} + +{% 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 %} +

+ {% 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 %} +

+ {% 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 %} diff --git a/benefits/enrollment/templates/enrollment/index--calfresh.html b/benefits/enrollment/templates/enrollment/index--calfresh.html index 6f6d55183..17214047c 100644 --- a/benefits/enrollment/templates/enrollment/index--calfresh.html +++ b/benefits/enrollment/templates/enrollment/index--calfresh.html @@ -10,7 +10,5 @@ {% endblock media-items %} {% block additional-info %} -
-

Info alert here

-
+
{% include "enrollment/includes/alert-box--warning--calfresh.html" %}
{% endblock additional-info %} diff --git a/benefits/locale/en/LC_MESSAGES/django.po b/benefits/locale/en/LC_MESSAGES/django.po index cf2d22f61..7d0b77211 100644 --- a/benefits/locale/en/LC_MESSAGES/django.po +++ b/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 "" diff --git a/benefits/locale/es/LC_MESSAGES/django.po b/benefits/locale/es/LC_MESSAGES/django.po index f290aa3c4..48ccac104 100644 --- a/benefits/locale/es/LC_MESSAGES/django.po +++ b/benefits/locale/es/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: Español\n" "MIME-Version: 1.0\n" "Content-Type: text/plain; charset=UTF-8\n" @@ -245,6 +245,42 @@ msgstr "Volver al inicio" msgid "Previous Page" msgstr "Página Anterior" +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 "¿Qué es una tarjeta de cortesía?" @@ -422,26 +458,6 @@ msgstr "" msgid "Learn more about contactless cards" msgstr "Más información sobre las tarjetas sin contacto" -msgid "Your current Courtesy Card number" -msgstr "Su número actual de tarjeta de cortesía" - -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 "" -"No necesita tener su tarjeta física, pero necesitará saber el número. El " -"número comienza con un signo de número (#) seguido de cinco dígitos." - -msgid "Your current Reduced Fare Mobility ID number" -msgstr "Su número actual de Reduced Fare Mobility ID" - -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 "" -"No necesita tener su tarjeta física, pero necesitará su número de cuatro " -"dígitos de Reduced Fare Mobility ID en el reverso de la tarjeta." - msgid "A Login.gov account with identity verification" msgstr "Una cuenta de Login.gov con verificación de identidad" @@ -469,43 +485,27 @@ msgid "A phone number with a phone plan associated with your name" msgstr "" "Un número de teléfono en el cual pueda recibir llamadas o mensajes de texto" -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?" -msgstr "" +msgid "Your current Courtesy Card number" +msgstr "Su número actual de tarjeta de cortesía" 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 "" +"No necesita tener su tarjeta física, pero necesitará saber el número. El " +"número comienza con un signo de número (#) seguido de cinco dígitos." -msgid "Do I need my Golden State Advantage card to enroll?" -msgstr "" +msgid "Your current Reduced Fare Mobility ID number" +msgstr "Su número actual de Reduced Fare Mobility ID" 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 "" +"No necesita tener su tarjeta física, pero necesitará su número de cuatro " +"dígitos de Reduced Fare Mobility ID en el reverso de la tarjeta." -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" @@ -609,6 +609,15 @@ msgstr "Elija la opción de beneficio" msgid "Choose the transit benefit you would like to enroll in" msgstr "Elija el beneficio de tránsito al que le gustaría inscribirse" +msgid "CalFresh benefit overview" +msgstr "" + +msgid "You selected a CalFresh Cardholder transit benefit." +msgstr "" + +msgid "Get started with" +msgstr "Comience con" + msgid "Agency card overview" msgstr "Descripción de la tarjeta de agencia" @@ -627,9 +636,6 @@ msgstr "Descripción de beneficios para adultos mayores" msgid "You selected an Older Adult transit benefit." msgstr "Ha seleccionado un beneficio de tránsito para adultos mayores." -msgid "Get started with" -msgstr "Comience con" - msgid "Veterans benefit overview" msgstr "Descripción de beneficios para veteranos" @@ -652,6 +658,18 @@ msgstr "¡Está bien! Usted aún puede ser elegible para nuestro programa." msgid "Please reach out to %(short_name)s for assistance." msgstr "Comuníquese con %(short_name)s para obtener ayuda." +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 "" From 88b4b7bfee838b66ba702724640966c906193b36 Mon Sep 17 00:00:00 2001 From: Kegan Maher Date: Mon, 25 Mar 2024 19:39:53 +0000 Subject: [PATCH 06/11] style: override margin on calfresh enrollment index media-list the default for media-list remains 64px removed an unused style rule for h1 + .media-list, from the old enrollment success template (since refactored to not use media-list) --- benefits/enrollment/templates/enrollment/index--calfresh.html | 2 +- benefits/static/css/styles.css | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/benefits/enrollment/templates/enrollment/index--calfresh.html b/benefits/enrollment/templates/enrollment/index--calfresh.html index 17214047c..59ec63797 100644 --- a/benefits/enrollment/templates/enrollment/index--calfresh.html +++ b/benefits/enrollment/templates/enrollment/index--calfresh.html @@ -3,7 +3,7 @@ {% block media-items %}
-
    +
      {% include "enrollment/includes/media-item--bankcardcheck--index--calfresh.html" %}
diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css index 572cc2475..220a36249 100644 --- a/benefits/static/css/styles.css +++ b/benefits/static/css/styles.css @@ -660,7 +660,6 @@ footer .footer-links li a.footer-link:visited { } } -h1 + .media-list, /* A .media-list immediately following the h1: Enrollment Success, but not Eligibility Start */ .media-body--details p:not(:first-of-type) { /* All the p within .media-body--details, except for the first p - Any media item with more than one p */ padding-top: calc(24rem / 16); From 875736e7173ce852c047470ba2330e8794bc32ee Mon Sep 17 00:00:00 2001 From: Kegan Maher Date: Mon, 25 Mar 2024 19:48:25 +0000 Subject: [PATCH 07/11] style: alert-box uses more Bootstrap utils --- .../core/templates/core/includes/alert-box.html | 4 ++-- benefits/static/css/styles.css | 16 +++------------- 2 files changed, 5 insertions(+), 15 deletions(-) diff --git a/benefits/core/templates/core/includes/alert-box.html b/benefits/core/templates/core/includes/alert-box.html index 8cb9e4f35..ab1b7f58a 100644 --- a/benefits/core/templates/core/includes/alert-box.html +++ b/benefits/core/templates/core/includes/alert-box.html @@ -1,7 +1,7 @@ {% block alert-wrapper %} -
+
{% block alert-heading-wrapper %} - <{{ heading_tag|default:"h3" }} class="alert-box--heading"> + <{{ heading_tag|default:"h3" }} class="alert-box--heading lh-base ls-base mb-1"> {% block alert-heading %} {% endblock alert-heading %} diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css index 220a36249..34c500743 100644 --- a/benefits/static/css/styles.css +++ b/benefits/static/css/styles.css @@ -4,7 +4,6 @@ --bs-blue: var(--primary-color); --bs-primary: var(--primary-color); --bs-primary-rgb: var(--primary-color-rgb); - --bs-warning: #fff1d0; --text-primary-color: #212121; --bs-body-color: var(--text-primary-color); --bs-body-text-align: left; @@ -835,19 +834,13 @@ a.card:focus-visible { } :root { - --alert-box-padding: calc(16rem / 16); --alert-box-border-width: calc(8rem / 16); - --alert-box--heading-margin-bottom: calc(4rem / 16); - --alert-box--heading-line-height: calc(27rem / 16); + --alert-box-background-color--warning: #fff1d0; --alert-box-border-color--warning: #fdb714; - --alert-box-background-color--warning: var(--bs-warning); } .alert-box { - border-left-width: var(--alert-box-border-width); - border-left-style: solid; - padding: var(--alert-box-padding); - color: var(--text-primary-color); + border-left-width: var(--alert-box-border-width) !important; } .alert-box a:focus:not(.btn):not(.card):not(.footer-link):not(#skip-to-content), @@ -858,14 +851,11 @@ a.card:focus-visible { .alert-box--warning { background-color: var(--alert-box-background-color--warning); - border-left-color: var(--alert-box-border-color--warning); + border-left-color: var(--alert-box-border-color--warning) !important; } .alert-box--heading { font-size: var(--font-size-18px); - line-height: var(--alert-box--heading-line-height); - letter-spacing: var(--letter-spacing-5); - margin-bottom: var(--alert-box--heading-margin-bottom); } /* Enrollment Success */ From 8e2311e8ff20f555a6786f88bba3536ba94b7968 Mon Sep 17 00:00:00 2001 From: Kegan Maher Date: Mon, 25 Mar 2024 22:20:42 +0000 Subject: [PATCH 08/11] style: helper for left margin aligned with media-list text calculated based on the width and right margin of media icon --- benefits/static/css/styles.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css index 34c500743..aefc64478 100644 --- a/benefits/static/css/styles.css +++ b/benefits/static/css/styles.css @@ -680,6 +680,12 @@ footer .footer-links li a.footer-link:visited { margin-right: var(--media-item-icon-margin); } +.media-list-icon-left-margin { + margin-left: calc( + var(--media-item-icon-size) + var(--media-item-icon-margin) + ); +} + .media-list .media .media-body--details, .media-list .media .media-body--items li:first-child { padding-top: calc(5rem / 16); From bba6ad94c4b31f04a4159ba444a03bde58533ba6 Mon Sep 17 00:00:00 2001 From: Kegan Maher Date: Mon, 25 Mar 2024 22:22:02 +0000 Subject: [PATCH 09/11] refactor: calfresh alert-box implements overrides * move the warning class override to calfresh alert-box * apply the calfresh specific margin class to align alert-box with preceding media-list text --- .../core/templates/core/includes/alert-box--warning.html | 5 ----- .../enrollment/includes/alert-box--warning--calfresh.html | 6 +++++- 2 files changed, 5 insertions(+), 6 deletions(-) delete mode 100644 benefits/core/templates/core/includes/alert-box--warning.html diff --git a/benefits/core/templates/core/includes/alert-box--warning.html b/benefits/core/templates/core/includes/alert-box--warning.html deleted file mode 100644 index 3976eea07..000000000 --- a/benefits/core/templates/core/includes/alert-box--warning.html +++ /dev/null @@ -1,5 +0,0 @@ -{% extends "core/includes/alert-box.html" %} - -{% block alert-wrapper %} - {% with alert_class="alert-box--warning" %}{{ block.super }}{% endwith %} -{% endblock alert-wrapper %} diff --git a/benefits/enrollment/templates/enrollment/includes/alert-box--warning--calfresh.html b/benefits/enrollment/templates/enrollment/includes/alert-box--warning--calfresh.html index 2b9354400..4b09f735c 100644 --- a/benefits/enrollment/templates/enrollment/includes/alert-box--warning--calfresh.html +++ b/benefits/enrollment/templates/enrollment/includes/alert-box--warning--calfresh.html @@ -1,6 +1,10 @@ -{% extends "core/includes/alert-box--warning.html" %} +{% 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 %} From 9b6aa0bcb36482d04ef9b41ff41fcc9decf961d7 Mon Sep 17 00:00:00 2001 From: Kegan Maher Date: Mon, 25 Mar 2024 22:45:25 +0000 Subject: [PATCH 10/11] style: call-to-action has padding-top --- benefits/core/templates/core/base.html | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/benefits/core/templates/core/base.html b/benefits/core/templates/core/base.html index 31373e292..7003fec5a 100644 --- a/benefits/core/templates/core/base.html +++ b/benefits/core/templates/core/base.html @@ -44,7 +44,9 @@ {% endif %}
{% block call-to-action %} -
+
{% block call-to-action-button %} {% endblock call-to-action-button %} From 1216af6c06a28bf403314fe291571a62b0d15653 Mon Sep 17 00:00:00 2001 From: Kegan Maher Date: Fri, 29 Mar 2024 22:15:44 +0000 Subject: [PATCH 11/11] chore(enrollment): add visible class after removing invisible class this is just for clarity to make reading the HTML a little more sensible rather than seeing a div with an empty class attribute no UX impact --- benefits/enrollment/templates/enrollment/index.html | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/benefits/enrollment/templates/enrollment/index.html b/benefits/enrollment/templates/enrollment/index.html index 091d7a0bc..3a0483396 100644 --- a/benefits/enrollment/templates/enrollment/index.html +++ b/benefits/enrollment/templates/enrollment/index.html @@ -42,7 +42,10 @@

.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, {