Repository: cal-itp/benefits

Issue:
Update Help Pages for better User Experience
Based on feedback from MST staff, changes to help pages to improve user experience

Todo:

- [ ] Review draft help page with staff (Olivia, MST)
- [x] Update Help page content with new sections / paragraphs, using existing `core/help.html` template
- [x] Make new sub-sections anchor links e.g. `#payment-options`
- [x] Remove/ delete any links to `core:payment_options`
- [x] on Footer, remove link to "Payment Options"
- [ ] on Eligibility Start page, change link "How do I know if I have a contactless card" to /help
- [ ] on Eligibility Start page, change link "what if I don't have a bank card" to /help
- [x] on Enrollment Start page, change link "What if I don't have a bank card" /help
- [x] update UI tests for Help page, incorporate UI tests for removed Payment Options

Resources

 - ~[Large_SupportingPage_Help V2](https://www.figma.com/file/5IabSdY0xDzwL4gyXhbQ9G/Benefits-(Courtesy-Cards)?node-id=2004%3A6408)~
- [Desktop Help](https://www.figma.com/file/5IabSdY0xDzwL4gyXhbQ9G/Benefits-(Courtesy-Cards)?node-id=2148%3A10895)


Discussion:
Co-opting this issue for part of #363 since we need a new Help page and it hits most of these marks. Adding a few extra items to the list.

Here's the Figma mock of the new consolidated help page: https://www.figma.com/file/5IabSdY0xDzwL4gyXhbQ9G/Benefits-(Courtesy-Cards)?node-id=2148%3A10895

Resolving patch:
diff --git a/benefits/core/urls.py b/benefits/core/urls.py
--- a/benefits/core/urls.py
+++ b/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"),
 ]
diff --git a/benefits/core/views.py b/benefits/core/views.py
--- a/benefits/core/views.py
+++ b/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."""
diff --git a/benefits/enrollment/views.py b/benefits/enrollment/views.py
--- a/benefits/enrollment/views.py
+++ b/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"
             ),
         ],
     )


Test patch:
diff --git a/tests/cypress/specs/ui/help.spec.js b/tests/cypress/specs/ui/help.spec.js
--- a/tests/cypress/specs/ui/help.spec.js
+++ b/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?");
+  });
 });
diff --git a/tests/cypress/specs/ui/index.spec.js b/tests/cypress/specs/ui/index.spec.js
--- a/tests/cypress/specs/ui/index.spec.js
+++ b/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");
   });
diff --git a/tests/cypress/specs/ui/payment-options.spec.js b/tests/cypress/specs/ui/payment-options.spec.js
deleted file mode 100644
--- a/tests/cypress/specs/ui/payment-options.spec.js
+++ /dev/null
@@ -1,22 +0,0 @@
-describe("Payment Options page spec", () => {
-  beforeEach(() => {
-    cy.visit("/");
-    cy.contains("Payment Options").click();
-  });
-
-  it("Clicking on Payment Options takes user to Payment Options", () => {
-    cy.location("pathname").should("eq", "/payment-options");
-  });
-
-  it("Contains a back link", () => {
-    cy.contains("Go back").then(($e) => {
-      expect($e).attr("href").eql("/");
-    });
-  });
-
-  it("Allows user to go back", () => {
-    cy.contains("Go back").click();
-
-    cy.location("pathname").should("eq", "/");
-  });
-});