Enrollment Success: Redesign with new illustration, new copy (#1508)

benefits/core/migrations/0001_initial.py

@@ -60,9 +60,6 @@ class Migration(migrations.Migration):
                 ("form_name_max_length", models.PositiveSmallIntegerField(null=True)),
                 ("unverified_title", models.TextField()),
                 ("unverified_blurb", models.TextField()),
-                ("enrollment_success_confirm_item_details", models.TextField()),
-                ("enrollment_success_expiry_item_heading", models.TextField(null=True)),
-                ("enrollment_success_expiry_item_details", models.TextField(null=True)),
                 (
                     "auth_provider",
                     models.ForeignKey(null=True, on_delete=django.db.models.deletion.PROTECT, to="core.authprovider"),

benefits/core/migrations/0002_data.py

@@ -155,9 +155,6 @@ def load_data(app, *args, **kwargs):
         start_template="eligibility/start__login_gov.html",
         unverified_title=_("eligibility.pages.unverified.title"),
         unverified_blurb=_("eligibility.pages.unverified.p[0]"),
-        enrollment_success_confirm_item_details=_("enrollment.pages.success.login_gov.confirm_item.details"),
-        enrollment_success_expiry_item_heading=None,
-        enrollment_success_expiry_item_details=None,
     )
 
     mst_veteran_verifier = EligibilityVerifier.objects.create(
@@ -168,9 +165,6 @@ def load_data(app, *args, **kwargs):
         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"),
-        enrollment_success_expiry_item_heading=None,
-        enrollment_success_expiry_item_details=None,
     )
 
     mst_courtesy_card_verifier = EligibilityVerifier.objects.create(
@@ -201,9 +195,6 @@ def load_data(app, *args, **kwargs):
         form_name_max_length=255,
         unverified_title=_("eligibility.pages.unverified.mst_cc.title"),
         unverified_blurb=_("eligibility.pages.unverified.mst_cc.p[0]"),
-        enrollment_success_confirm_item_details=_("enrollment.pages.success.mst_cc.confirm_item.details"),
-        enrollment_success_expiry_item_heading=_("enrollment.pages.success.mst_cc.expiry_item.heading"),
-        enrollment_success_expiry_item_details=_("enrollment.pages.success.mst_cc.expiry_item.details"),
     )
 
     sacrt_oauth_claims_verifier = EligibilityVerifier.objects.create(
@@ -214,9 +205,6 @@ def load_data(app, *args, **kwargs):
         start_template="eligibility/start__login_gov.html",
         unverified_title=_("eligibility.pages.unverified.title"),
         unverified_blurb=_("eligibility.pages.unverified.p[0]"),
-        enrollment_success_confirm_item_details=_("enrollment.pages.success.login_gov.confirm_item.details"),
-        enrollment_success_expiry_item_heading=None,
-        enrollment_success_expiry_item_details=None,
     )
 
     PaymentProcessor = app.get_model("core", "PaymentProcessor")

benefits/core/models.py

@@ -121,10 +121,6 @@ class EligibilityVerifier(models.Model):
     form_name_max_length = models.PositiveSmallIntegerField(null=True)
     unverified_title = models.TextField()
     unverified_blurb = models.TextField()
-    # Fields for the dynamic enrollment success message
-    enrollment_success_confirm_item_details = models.TextField()
-    enrollment_success_expiry_item_heading = models.TextField(null=True)
-    enrollment_success_expiry_item_details = models.TextField(null=True)
 
     def __str__(self):
         return self.name

benefits/eligibility/templates/eligibility/start__login_gov.html

@@ -25,6 +25,6 @@ <h1>{% translate "eligibility.pages.start.login_gov.headline" %}</h1>
   {% url "oauth:login" as button_url %}
   {% translate "eligibility.buttons.senior.signin" as button_text %}
   <a href="{{ button_url }}" class="btn btn-lg btn-primary" id="login">
-    {{ button_text }} <span class="fallback-text">Login.gov</span>
+    {{ button_text }} <span class="fallback-text white-logo">Login.gov</span>
   </a>
 {% endblock call-to-action-button %}

benefits/enrollment/templates/enrollment/success.html

@@ -7,26 +7,45 @@
   {{ block.super |add:" enrollment-success" }}
 {% endblock classes %}
 
+{% block page_title %}
+  {% translate "enrollment.pages.success.title" %} | 
+{% endblock page_title %}
+
 {% block headline %}
-  <div class="col-lg-10">
-    <h1 class="pb-lg-8 pb-4">{{ page.headline }}</h1>
+  <div class="col-lg-8">
+    <h1 class="pb-lg-5 pb-4">{% translate "enrollment.pages.success.headline" %}</h1>
   </div>
 {% endblock headline %}
 
 {% block inner-content %}
-  <div class="col-12 col-sm-12 col-lg-10">{% include "core/includes/media-list.html" with media=media %}</div>
+  <div class="col-12 col-sm-12 col-lg-9">
+    <div class="row flex-column-reverse flex-lg-row">
+      <div class="col-12 col-lg-6">
+        <p class="pt-lg-4 mt-lg-3">{% translate "enrollment.pages.success.confirm_item.details" %}</p>
+        <p class="pt-4">{% translate "enrollment.pages.success.thankyou" %}</p>
+      </div>
+      <div class="col-12 offset-lg-1 col-lg-5">
+        <img width="180"
+             height="155.1"
+             class="illo d-block mx-auto mb-4 mb-lg-0"
+             src="{% get_static_prefix %}img/enrollment-success-illustration.png"
+             alt="" />
+      </div>
+    </div>
+  </div>
 {% endblock inner-content %}
 
 {% block call-to-action %}
   {% if page.buttons|length == 1 %}
-    <div class="row d-flex justify-content-lg-center flex-lg-row">
-      <div class="col-9 col-lg-10 d-flex justify-content-end logout-paragraph">
+    <div class="row d-flex justify-content-start justify-content-lg-center">
+      <div class="col-12 col-lg-8 pt-lg-5 mt-lg-0 pt-4 mt-2">
         <p>
-          <span>{% translate "enrollment.pages.success.logout[0]" %}</span>
+          {% translate "enrollment.pages.success.logout[0]" %}
           {% for b in page.buttons %}
-            <a id="{{ b.id }}" class="{{ b.classes | join:" " }}" href="{{ b.url }}" role="button">
-              <span class="fallback-text">{{ b.fallback_text }}</span>
+            <a id="{{ b.id }}" class="d-inline-block p-0 {{ b.classes | join:" " }}" href="{{ b.url }}" role="button">
+              <span class="fallback-text color-logo">{{ b.fallback_text }}</span>
             </a>
+            .
           {% endfor %}
         </p>
       </div>

benefits/enrollment/views.py

@@ -6,13 +6,12 @@
 from django.http import JsonResponse
 from django.template.response import TemplateResponse
 from django.urls import reverse
-from django.utils.html import format_html
 from django.utils.decorators import decorator_from_middleware
 from django.utils.translation import pgettext, gettext as _
 
 from benefits.core import models, session, viewmodels
 from benefits.core.middleware import EligibleSessionRequired, VerifierSessionRequired, pageview_decorator
-from benefits.core.views import ROUTE_HELP, ROUTE_LOGGED_OUT
+from benefits.core.views import ROUTE_LOGGED_OUT
 from . import analytics, api, forms
 
 
@@ -127,38 +126,12 @@ def success(request):
 
     verifier = session.verifier(request)
 
-    page = viewmodels.Page(title=_("enrollment.pages.success.title"), headline=_("enrollment.pages.success.headline"))
+    page = viewmodels.Page()
 
     if verifier.supports_sign_out and session.logged_in(request):
         # overwrite origin for a logged in user
         # if they click the logout button, they are taken to the new route
         session.update(request, origin=reverse(ROUTE_LOGGED_OUT))
         page.buttons = [viewmodels.Button.logout()]
 
-    success_item = viewmodels.MediaItem(
-        icon=viewmodels.Icon("happybus", pgettext("image alt text", "core.icons.happybus")),
-        details=[
-            _(verifier.enrollment_success_confirm_item_details),
-            format_html(_("enrollment.pages.success.helplink%(link)s") % {"link": f"{reverse(ROUTE_HELP)}"}),
-        ],
-    )
-    media = [success_item]
-
-    if verifier.enrollment_success_expiry_item_heading or verifier.enrollment_success_expiry_item_details:
-        heading = (
-            _(verifier.enrollment_success_expiry_item_heading) if verifier.enrollment_success_expiry_item_heading else None
-        )
-        details = (
-            _(verifier.enrollment_success_expiry_item_details) if verifier.enrollment_success_expiry_item_details else None
-        )
-        expiry_item = viewmodels.MediaItem(
-            icon=viewmodels.Icon("calendarcheck", pgettext("image alt text", "core.icons.calendarcheck")),
-            heading=heading,
-            details=details,
-        )
-        media.insert(0, expiry_item)
-
-    context = {"media": media}
-    context.update(page.context_dict())
-
-    return TemplateResponse(request, TEMPLATE_SUCCESS, context)
+    return TemplateResponse(request, TEMPLATE_SUCCESS, page.context_dict())

benefits/locale/en/LC_MESSAGES/django.po

@@ -24,20 +24,6 @@ msgstr ""
 "That’s okay! You may still be eligible for our program. Please reach out to "
 "your local transit provider for assistance."
 
-msgid "enrollment.pages.success.login_gov.confirm_item.details"
-msgstr ""
-"You were not charged anything today. When boarding transit, pay with this "
-"same physical card and you will automatically receive your new reduced fare. "
-"You will need to reapply if you choose to change the bank card you use to "
-"pay for transit service."
-
-msgid "enrollment.pages.success.veteran.confirm_item.details"
-msgstr ""
-"You were not charged anything today. When boarding transit, pay with this "
-"same physical card and you will automatically receive your new reduced fare. "
-"You will need to reapply if you choose to change the bank card you use to "
-"pay for transit service."
-
 msgid "eligibility.pages.confirm.mst_cc.title"
 msgstr "Confirm your Courtesy Card"
 
@@ -69,20 +55,6 @@ msgstr ""
 "That’s okay! You may still be eligible for our program. Please reach out to "
 "Monterey-Salinas Transit for assistance."
 
-msgid "enrollment.pages.success.mst_cc.confirm_item.details"
-msgstr ""
-"You were not charged anything today. When boarding transit, pay with this "
-"same physical card and you will automatically receive your new reduced fare."
-
-msgid "enrollment.pages.success.mst_cc.expiry_item.heading"
-msgstr "You may need to reapply for transit benefits at a later date"
-
-msgid "enrollment.pages.success.mst_cc.expiry_item.details"
-msgstr ""
-"In the future, you may need to re-register for Benefits to continue using "
-"contactless payment cards. You will also need to reapply if you choose to "
-"change the bank card you use to pay for transit service."
-
 msgid "eligibility.pages.index.p[0].mst"
 msgstr ""
 "You can tap your credit or debit card when you board an MST bus, and your "
@@ -600,9 +572,25 @@ msgstr "Please wait..."
 msgid "enrollment.buttons.payment_partner"
 msgstr "Connect your Card"
 
+msgid "enrollment.pages.success.title"
+msgstr "Success"
+
+msgid "enrollment.pages.success.headline"
+msgstr "Success! Your transit benefit is now connected to your card."
+
+msgid "enrollment.pages.success.confirm_item.details"
+msgstr ""
+"You were not charged anything today. When boarding a [short-name] "
+"[transportaton-type], [card-functionality] and you will be charged a reduced "
+"fare. You will need to re-enroll if you choose to change the card you use to "
+"pay for transit service."
+
+msgid "enrollment.pages.success.thankyou"
+msgstr "Thank you for using Cal-ITP Benefits!"
+
 msgid "enrollment.pages.success.logout[0]"
 msgstr ""
-"If you are on a public or shared computer, don't forget to sign out of "
+"If you are on a public or shared computer, don’t forget to sign out of "
 
 msgid "enrollment.pages.retry.title"
 msgstr "We couldn’t connect your bank card"
@@ -617,19 +605,3 @@ msgstr ""
 
 msgid "core.buttons.retry"
 msgstr "Try again"
-
-msgid "enrollment.pages.success.title"
-msgstr "Success"
-
-msgid "enrollment.pages.success.headline"
-msgstr "Success! Your discount is now linked to your bank card."
-
-#, python-format
-msgid "enrollment.pages.success.helplink%(link)s"
-msgstr ""
-"Thank you for using Cal-ITP Benefits! For more information check out our <a "
-"href=\"%(link)s\" rel=\"noopener noreferrer\">Help Page</a>."
-
-msgctxt "image alt text"
-msgid "core.icons.calendarcheck"
-msgstr "A calendar page icon with a check mark"

benefits/locale/es/LC_MESSAGES/django.po

@@ -24,20 +24,6 @@ msgstr ""
 "¡Esta bien! Aún puede ser elegible para nuestro programa. Comuníquese con su "
 "proveedor de tránsito local para obtener asistencia."
 
-msgid "enrollment.pages.success.login_gov.confirm_item.details"
-msgstr ""
-"No se le ha cobrado nada hoy. Al abordar al el tránsito, pague con esta "
-"misma tarjeta física y automáticamente recibirá su nueva tarifa reducida. "
-"Deberá volver a presenter la solicitud si elige cambiar la tarjeta bancaria "
-"que utiliza para pagar el servicio de transito."
-
-msgid "enrollment.pages.success.veteran.confirm_item.details"
-msgstr ""
-"No se le ha cobrado nada hoy. Al abordar al el tránsito, pague con esta "
-"misma tarjeta física y automáticamente recibirá su nueva tarifa reducida. "
-"Deberá volver a presenter la solicitud si elige cambiar la tarjeta bancaria "
-"que utiliza para pagar el servicio de transito."
-
 msgid "eligibility.pages.confirm.mst_cc.title"
 msgstr "Confirmar su eligibilidad"
 
@@ -69,23 +55,6 @@ msgstr ""
 "¡Esta bien! Aún puede ser elegible para nuestro programa. Comuníquese con "
 "Monterey-Salinas Transit para obtener asistencia."
 
-msgid "enrollment.pages.success.mst_cc.confirm_item.details"
-msgstr ""
-"No te cobraron nada hoy. Al abordar el tránsito, pague con esta misma "
-"tarjeta física y automáticamente recibirá su nueva tarifa reducida."
-
-msgid "enrollment.pages.success.mst_cc.expiry_item.heading"
-msgstr ""
-"Es posible que deba volver a solicitar los beneficios de tránsito en una "
-"fecha posterior"
-
-msgid "enrollment.pages.success.mst_cc.expiry_item.details"
-msgstr ""
-"En el futuro, es posible que tenga que volver a registrarse para Beneficios "
-"para continuar usando las tarjetas de pago sin contacto. También tendrá que "
-"volver a presenter una solicitud si elige cambiar la tarjeta bancaria que "
-"usa para pagar el servicio de tránsito."
-
 msgid "eligibility.pages.index.p[0].mst"
 msgstr ""
 "Puede acercar su tarjeta de crédito o débito cuando aborde un autobús de MST "
@@ -615,10 +584,25 @@ msgstr "Espere por favor..."
 msgid "enrollment.buttons.payment_partner"
 msgstr "Conecta tu tarjeta"
 
+msgid "enrollment.pages.success.title"
+msgstr "Éxito"
+
+msgid "enrollment.pages.success.headline"
+msgstr "¡Éxito! Su beneficio de tránsito ahora está conectado a su tarjeta."
+
+msgid "enrollment.pages.success.confirm_item.details"
+msgstr ""
+"No se le cobró nada hoy. Al abordar un [transportaton-type] de [short-name], "
+"[card-functionality] y se le cobrará una tarifa reducida. Deberá volver a "
+"inscribirse si elige cambiar la tarjeta que usa para pagar el servicio de "
+"tránsito."
+
+msgid "enrollment.pages.success.thankyou"
+msgstr "Gracias por usar los Beneficios de Cal-ITP."
+
 msgid "enrollment.pages.success.logout[0]"
 msgstr ""
-"Si estás en una computadora pública o compartida, no olvides hacer clic aquí "
-"para cerrar la sesión de"
+"Si está en una computadora pública o compartida, no olvide cerrar sesión en "
 
 msgid "enrollment.pages.retry.title"
 msgstr "No pudimos conectar tú tarjeta bancaria"
@@ -635,20 +619,3 @@ msgstr ""
 
 msgid "core.buttons.retry"
 msgstr "Intentar otra vez"
-
-msgid "enrollment.pages.success.title"
-msgstr "Éxito"
-
-msgid "enrollment.pages.success.headline"
-msgstr "¡Felicidades! Su descuento ahora está vinculado a su tarjeta bancaria."
-
-#, python-format
-msgid "enrollment.pages.success.helplink%(link)s"
-msgstr ""
-"Gracias por usar los Beneficios de Cal-ITP. Para más información, consulte "
-"nuestro our <a href=\"%(link)s\" rel=\"noopener noreferrer\">Página de "
-"Ayuda</a>."
-
-msgctxt "image alt text"
-msgid "core.icons.calendarcheck"
-msgstr "Icono de página de calendario con una marca de verificación"