Refactor: Help page (#403)

benefits/core/templates/core/base.html

@@ -65,7 +65,6 @@
                 <div class="row">
                     <div class="col-sm-12">
                         <ul class="footer-links">
-                            <li><a href="{% url "core:payment_options" %}">{% translate "core.buttons.payment_options" %}</a></li>
                             <li><a href="{% url "core:help" %}">{% translate "core.buttons.help" %}</a></li>
                             <li><a href="https://www.dmv.ca.gov/portal/privacy-and-security/" target="_blank" rel="noopener noreferrer">{% translate "core.buttons.privacy" %}</a></li>
                         </ul>

benefits/core/templates/core/help.html

@@ -1,9 +1,50 @@
 {% extends "core/page.html" %}
 {% load i18n %}
+{% load static %}
+
+{% block main_content%}
+<div class="container-fluid">
+    <div class="container content help">
 {% block container_content %}
+
+<h1>{{ page.content_title }}</h1>
+
+<h2 id="what-is-cal-itp">{% translate "core.pages.help.about" %}</h2>
+<p>{% translate "core.pages.help.about.p[0]" %}</p>
+<p>{% translate "core.pages.help.about.p[1]" %}</p>
+
+<h2 id="payment-options">{% translate "core.pages.help.payment_options" %}</h2>
+<p>{% translate "core.pages.help.payment_options.p[0]" %}</p>
+
+<p class="contactless-symbol">
+    <img class="icon mx-auto d-block" src="{% static 'img/icon/contactless.svg' %}" alt="{% translate "core.icons.contactless" context "image alt text" %}" />
+</p>
+
+<p>{% translate "core.pages.help.payment_options.p[1]" %}</p>
+<p>{% translate "core.pages.help.payment_options.p[2]" %}</p>
+<p>{% translate "core.pages.help.payment_options.p[3]" %}</p>
+
+<h2 id="login-gov">{% translate "core.pages.help.login_gov" %}</h2>
+<p>{% translate "core.pages.help.login_gov.p[0]" %}</p>
+<p>{% translate "core.pages.help.login_gov.p[1]" %}</p>
+<p>{% blocktranslate with website="https://login.gov"%}core.pages.help.login_gov.p[2]{{ website }}{% endblocktranslate %}</p>
+
+<h2 id="littlepay">{% translate "core.pages.help.littlepay" %}</h2>
+<p>{% translate "core.pages.help.littlepay.p[0]" %}</p>
+<p>{% blocktranslate with website="https://littlepay.com" %}core.pages.help.littlepay.p[1]{{ website }}{% endblocktranslate %}</p>
+
+<h2 id="questions">{% translate "core.pages.help.questions" %}</h2>
+<p>{% translate "core.pages.help.questions.p[0]" %}</p>
+
+{% block buttons %}
 {{ block.super }}
+{% endblock %}
+
 <p class="mt-4">
     {% translate "core.pages.help.foss.text" %}
     <a href="https://www.github.com/cal-itp/benefits" target="_blank" rel="noopener noreferrer">{% translate "core.pages.help.foss.link" %}</a>.
 </p>
+{% endblock %}
+    </div>
+</div>
 {% endblock %}

benefits/core/urls.py

@@ -46,6 +46,5 @@ def to_url(self, agency):
 urlpatterns = [
     path("", views.index, name="index"),
     path("help", views.help, name="help"),
-    path("payment-options", views.payment_options, name="payment_options"),
     path("<agency:agency>", views.agency_index, name="agency_index"),
 ]

benefits/core/views.py

@@ -5,7 +5,7 @@
 from django.template import loader
 from django.template.response import TemplateResponse
 from django.urls import reverse
-from django.utils.translation import pgettext, gettext as _
+from django.utils.translation import gettext as _
 
 from . import middleware, models, session, viewmodels
 
@@ -81,7 +81,6 @@ def help(request):
     page = viewmodels.Page(
         title=_("core.buttons.help"),
         content_title=_("core.buttons.help"),
-        paragraphs=[_("core.pages.help.p[0]"), _("core.pages.help.p[1]")],
         buttons=buttons,
         classes="text-lg-center",
         noimage=True,
@@ -90,20 +89,6 @@ def help(request):
     return TemplateResponse(request, "core/help.html", page.context_dict())
 
 
-@middleware.pageview_decorator
-def payment_options(request):
-    """View handler for the Payment Options page."""
-    page = viewmodels.Page(
-        title=_("core.buttons.payment_options"),
-        icon=viewmodels.Icon("bankcard", pgettext("image alt text", "core.icons.bankcard")),
-        content_title=_("core.buttons.payment_options"),
-        buttons=viewmodels.Button.home(request, text=_("core.buttons.back")),
-        noimage=True,
-    )
-
-    return TemplateResponse(request, "core/payment-options.html", page.context_dict())
-
-
 @middleware.pageview_decorator
 def bad_request(request, exception, template_name="400.html"):
     """View handler for HTTP 400 Bad Request responses."""

benefits/enrollment/views.py

@@ -25,6 +25,7 @@ def _index(request):
     tokenize_retry_form = forms.CardTokenizeFailForm("enrollment:retry")
     tokenize_success_form = forms.CardTokenizeSuccessForm(auto_id=True, label_suffix="")
 
+    help_page = reverse("core:help")
     page = viewmodels.Page(
         title=_("enrollment.pages.index.title"),
         content_title=_("enrollment.pages.index.content_title"),
@@ -37,7 +38,7 @@ def _index(request):
                 text=_("enrollment.buttons.payment_partner"), id=tokenize_button, url=f"#{tokenize_button}"
             ),
             viewmodels.Button.link(
-                classes="btn-sm", text=_("enrollment.buttons.payment_options"), url=reverse("core:payment_options")
+                classes="btn-sm", text=_("enrollment.buttons.payment_options"), url=f"{help_page}#payment-options"
             ),
         ],
     )

benefits/locale/en/LC_MESSAGES/django.po

@@ -13,13 +13,76 @@ msgstr ""
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1);\n"
 
+msgid "core.pages.help.about"
+msgstr "What is Cal-ITP Benefits?"
+
 #: benefits/core/templates/core/base.html:9 benefits/core/views.py:91
-msgid "core.pages.help.p[0]"
+msgid "core.pages.help.about.p[0]"
+msgstr ""
+"The Benefits tool is provided by California Integrated Travel Project "
+"(Cal-ITP), which is a new program from the California Department of "
+"Transportation dedicated to making travel simpler and cost effective for all."
+
+msgid "core.pages.help.about.p[1]"
 msgstr ""
-"Cal-ITP is a new project from the California Department of Transportation. "
-"We partner with the California DMV to confirm age for age-based discounts. "
-"We partner with Littlepay to attach your discount to your bank card so that "
-"when you pay for your transit ride, you get your discount automatically."
+"We partner with the California DMV to confirm age for age-based discounts and "
+"local transporation agencies to confirm specific discount programs. Once verified, "
+"discounts are attached to your bank card through our payment partner, Littlepay so "
+"that when you pay for your transit ride, you get your discount automatically."
+
+msgid "core.pages.help.payment_options"
+msgstr "Payment options"
+
+msgid "core.pages.help.payment_options.p[0]"
+msgstr "In order to activate your discount, you need a bank card that has the "
+"contactless symbol on it. The contactless symbol is four curved lines that looks like this:"
+
+msgid "core.pages.help.payment_options.p[1]"
+msgstr "A contactless bank card can be a credit card or a debit card and must "
+"include a Visa or Mastercard logo."
+
+msgid "core.pages.help.payment_options.p[2]"
+msgstr "We are working to add additional options for people who do not have access "
+"to a bank card. However, you can still get your discount by going through your "
+"local transit provider's application process."
+
+msgid "core.pages.help.payment_options.p[3]"
+msgstr "For updates on additional options, please check back on this website, or "
+"get in touch with your local transit provider."
+
+msgid "core.pages.help.login_gov"
+msgstr "What is Login.gov?"
+
+msgid "core.pages.help.login_gov.p[0]"
+msgstr "Login.gov is a secure way to sign in to participating government agencies. "
+"You can use your Login.gov account to access all of the benefits offered through Cal-ITP."
+
+msgid "core.pages.help.login_gov.p[1]"
+msgstr "Creating an account is simple. You will need an email address and method for "
+"authenticating your account—which will use either a landline, mobile phone, or "
+"backup codes that must be printed or written down."
+
+msgid "core.pages.help.login_gov.p[2]%(website)s"
+msgstr "For more information on Login.gov, check out "
+"<a href=\"%(website)s\" target=\"_blank\" rel=\"noopener noreferrer\">their website</a>."
+
+msgid "core.pages.help.littlepay"
+msgstr "What is Littlepay?"
+
+msgid "core.pages.help.littlepay.p[0]"
+msgstr "Our payment partner, Littlepay is a secure, end-to-end payment processing "
+"platform that allows us to seamlessly attach your transit discount to your bank card."
+
+msgid "core.pages.help.littlepay.p[1]%(website)s"
+msgstr "For more information on Littlepay, check out "
+"<a href=\"%(website)s\" target=\"_blank\" rel=\"noopener noreferrer\">their website</a>."
+
+msgid "core.pages.help.questions"
+msgstr "Questions?"
+
+msgid "core.pages.help.questions.p[0]"
+msgstr "If you need assistance with this website, please reach out to the customer "
+"service team for your local transit provider."
 
 #: benefits/core/templates/core/base.html:24
 msgid "core.buttons.skip"

benefits/locale/es/LC_MESSAGES/django.po

@@ -13,14 +13,76 @@ msgstr ""
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1);\n"
 
+msgid "core.pages.help.about"
+msgstr "TODO: What is Cal-ITP Benefits?"
+
 #: benefits/core/templates/core/base.html:9 benefits/core/views.py:91
-msgid "core.pages.help.p[0]"
+msgid "core.pages.help.about.p[0]"
+msgstr ""
+"TODO: The Benefits tool is provided by California Integrated Travel Project "
+"(Cal-ITP), which is a new program from the California Department of "
+"Transportation dedicated to making travel simpler and cost effective for all."
+
+msgid "core.pages.help.about.p[1]"
 msgstr ""
-"Cal-ITP es un nuevo proyecto del Departamento de Transporte de California. "
-"Nos asociamos con el DMV de California para confirmar la edad para los "
-"descuentos. Nos asociamos con Littlepay para conectar el descuento con su "
-"tarjeta bancaria y así, cuando pague el transporte público, obtenga su "
-"descuento automáticamente."
+"TODO: We partner with the California DMV to confirm age for age-based discounts and "
+"local transporation agencies to confirm specific discount programs. Once verified, "
+"discounts are attached to your bank card through our payment partner, Littlepay so "
+"that when you pay for your transit ride, you get your discount automatically."
+
+msgid "core.pages.help.payment_options"
+msgstr "TODO: Payment options"
+
+msgid "core.pages.help.payment_options.p[0]"
+msgstr "TODO: In order to activate your discount, you need a bank card that has the "
+"contactless symbol on it. The contactless symbol is four curved lines that looks like this:"
+
+msgid "core.pages.help.payment_options.p[1]"
+msgstr "TODO: A contactless bank card can be a credit card or a debit card and must "
+"include a Visa or Mastercard logo."
+
+msgid "core.pages.help.payment_options.p[2]"
+msgstr "TODO: We are working to add additional options for people who do not have access "
+"to a bank card. However, you can still get your discount by going through your "
+"local transit provider's application process."
+
+msgid "core.pages.help.payment_options.p[3]"
+msgstr "TODO: For updates on additional options, please check back on this website, or "
+"get in touch with your local transit provider."
+
+msgid "core.pages.help.login_gov"
+msgstr "TODO: What is Login.gov?"
+
+msgid "core.pages.help.login_gov.p[0]"
+msgstr "TODO: Login.gov is a secure way to sign in to participating government agencies. "
+"You can use your Login.gov account to access all of the benefits offered through Cal-ITP."
+
+msgid "core.pages.help.login_gov.p[1]"
+msgstr "TODO: Creating an account is simple. You will need an email address and method for "
+"authenticating your account—which will use either a landline, mobile phone, or "
+"backup codes that must be printed or written down."
+
+msgid "core.pages.help.login_gov.p[2]%(website)s"
+msgstr "<a href=\"%(website)s\" target=\"_blank\" rel=\"noopener noreferrer\">TODO</a>: "
+"For more information on Login.gov, check out their website."
+
+msgid "core.pages.help.littlepay"
+msgstr "TODO: What is Littlepay?"
+
+msgid "core.pages.help.littlepay.p[0]"
+msgstr "TODO: Our payment partner, Littlepay is a secure, end-to-end payment processing "
+"platform that allows us to seamlessly attach your transit discount to your bank card."
+
+msgid "core.pages.help.littlepay.p[1]%(website)s"
+msgstr "<a href=\"%(website)s\" target=\"_blank\" rel=\"noopener noreferrer\">TODO</a>: "
+"For more information on Littlepay, check out their website."
+
+msgid "core.pages.help.questions"
+msgstr "TODO: Questions?"
+
+msgid "core.pages.help.questions.p[0]"
+msgstr "TODO: If you need assistance with this website, please reach out to the customer "
+"service team for your local transit provider."
 
 #: benefits/core/templates/core/base.html:24
 msgid "core.buttons.skip"

benefits/static/css/styles.css

@@ -259,6 +259,25 @@ footer .footer-links a {
   margin-bottom: 1rem;
 }
 
+.container.content.help {
+  margin-top: 4rem;
+}
+
+.container.content.help h1 {
+  text-align: center;
+  margin-top: 5.5rem;
+  margin-bottom: 4rem;
+}
+
+.container.content.help h2 {
+  margin-bottom: 3rem;
+  margin-top: 3rem;
+}
+
+.container.content.help p {
+  margin-bottom: 2rem;
+}
+
 .container.content h1 ~ p:nth-last-of-type(1) {
   margin-bottom: 2rem;
 }

tests/cypress/specs/ui/help.spec.js

@@ -47,4 +47,22 @@ describe("Help page spec", () => {
     cy.should("not.contain", otherAgency.fields.long_name);
     cy.should("not.contain", otherAgency.fields.phone);
   });
+
+  it("Has headers that all have ids to be used for anchor links", () => {
+    cy.contains("Help").click();
+
+    cy.get("h2").each(($el, index, $list) => {
+      cy.wrap($el[0].attributes).its("id").should("exist");
+    });
+  });
+
+  it("Has the expected headers", () => {
+    cy.contains("Help").click();
+
+    cy.get("h2").contains("What is Cal-ITP Benefits?");
+    cy.get("h2").contains("Payment options");
+    cy.get("h2").contains("What is Login.gov?");
+    cy.get("h2").contains("What is Littlepay?");
+    cy.get("h2").contains("Questions?");
+  });
 });

tests/cypress/specs/ui/index.spec.js

@@ -27,10 +27,6 @@ describe("Index page spec", () => {
     });
   });
 
-  it("Has a payment options page link", () => {
-    cy.contains("Payment Options");
-  });
-
   it("Has a help page link", () => {
     cy.contains("Help");
   });