Repository: cal-itp/benefits

Issue:
Add sign on button on Eligibility Start page
## Background

Build on #374 to work in the template specific to this page. This task is to simply add the button with accurate visual look/feel _when needed_; implementing the functionality is in #375.

### Placement, look, and feel

As a guide to what is covered under this task, see the following visual mock:
 
![image](https://user-images.githubusercontent.com/1783439/160729460-21e79159-20e2-4223-a4ac-06f3234740cd.png)

Note that the exact location and look of this button may change.

## Tasks

* [x] New style for _External action_ button using `#2b6597` as the outline and text color, squared corners; see [CA State Template buttons](https://template.webstandards.ca.gov/sample/buttons.html) for more
* [x] Grab the arrow icon from Figma and save as a local `.svg` to use in the button
* [x] Show the new button if the feature flag in #372 is enabled
* [x] Otherwise a button to forward to the `eligibility:confirm` page as normal




Discussion:

Resolving patch:
diff --git a/benefits/core/viewmodels.py b/benefits/core/viewmodels.py
--- a/benefits/core/viewmodels.py
+++ b/benefits/core/viewmodels.py
@@ -73,6 +73,12 @@ def outline_primary(**kwargs):
         classes.insert(0, "btn-outline-primary")
         return Button(classes=classes, **kwargs)
 
+    @staticmethod
+    def external(**kwargs):
+        btn = Button.outline_primary(**kwargs)
+        btn.classes.insert(0, "btn-external")
+        return btn
+
 
 class Icon:
     """Represents an icon."""
diff --git a/benefits/eligibility/views.py b/benefits/eligibility/views.py
--- a/benefits/eligibility/views.py
+++ b/benefits/eligibility/views.py
@@ -61,6 +61,12 @@ def start(request):
     session.update(request, eligibility_types=[])
     verifier = session.verifier(request)
 
+    if verifier.requires_authentication:
+        auth_provider = verifier.auth_provider
+        button = viewmodels.Button.external(text=_(auth_provider.sign_in_button_label), url="#", id="login")
+    else:
+        button = viewmodels.Button.primary(text=_("eligibility.buttons.continue"), url=reverse("eligibility:confirm"))
+
     page = viewmodels.Page(
         title=_("eligibility.pages.start.title"),
         content_title=_(verifier.start_content_title),
@@ -77,7 +83,7 @@ def start(request):
             ),
         ],
         paragraphs=[_(verifier.start_blurb)],
-        button=viewmodels.Button.primary(text=_("eligibility.buttons.continue"), url=reverse("eligibility:confirm")),
+        button=button,
     )
 
     return TemplateResponse(request, "eligibility/start.html", page.context_dict())


Test patch:
diff --git a/tests/cypress/fixtures/transit-agencies.js b/tests/cypress/fixtures/transit-agencies.js
--- a/tests/cypress/fixtures/transit-agencies.js
+++ b/tests/cypress/fixtures/transit-agencies.js
@@ -1,3 +1,3 @@
-const agencies = require("../../../fixtures/04_transitagency.json");
+const agencies = require("../../../fixtures/05_transitagency.json");
 
 export default agencies;
diff --git a/tests/cypress/specs/ui/eligibility.spec.js b/tests/cypress/specs/ui/eligibility.spec.js
--- a/tests/cypress/specs/ui/eligibility.spec.js
+++ b/tests/cypress/specs/ui/eligibility.spec.js
@@ -15,7 +15,7 @@ describe("Single verifier: Eligibility confirmation page spec", () => {
   });
 });
 
-describe("Multiple Verifier: Verifier selection page spec", () => {
+describe("Multiple Verifier, no AuthProvider: Verifier selection page spec", () => {
   beforeEach(() => {
     cy.visit("/");
     // Selecting ABC will go down the multiple verifier flow
@@ -50,27 +50,27 @@ describe("Multiple Verifier: Verifier selection page spec", () => {
 
   it("User can click a radio button and click Continue", () => {
     cy.get("input:radio:checked").should("have.length", 0);
-    cy.contains("Senior Discount Program").click();
+    cy.get("input:radio").last().click();
     cy.get("input:radio:checked").should("have.length", 1);
     cy.contains("Continue").click();
     cy.url().should("include", eligibility_start_url);
   });
 });
 
-describe("Multiple verifier: Eligibility confirmation form spec", () => {
+describe("Multiple verifier, no AuthProvider: Eligibility confirmation form spec", () => {
   beforeEach(() => {
     cy.visit("/");
     cy.contains(agencies[0].fields.short_name).click();
     cy.contains("Let’s do it!").click();
-    cy.contains("Senior Discount Program").click();
+    cy.get("input:radio").last().click();
     cy.contains("Continue").click();
-    cy.contains("Great, you’ll need two things before we get started...");
+    cy.contains("You’ll need two things before we get started:");
   });
 
-  it("Has a driver’s license or ID number form label and corresponding field", () => {
+  it("Has a Courtesy Card number form label and corresponding field", () => {
     cy.contains("Continue").click();
     cy.get("input:focus").should("have.length", 0);
-    cy.contains("CA driver’s license or ID number *").click();
+    cy.contains("MST Courtesy Card number *").click();
 
     cy.get("input:focus").should("have.length", 1);
     cy.url().should("include", eligibility_confirm_url);
@@ -79,9 +79,24 @@ describe("Multiple verifier: Eligibility confirmation form spec", () => {
   it("Has a last name form label and corresponding form field", () => {
     cy.contains("Continue").click();
     cy.get("input:focus").should("have.length", 0);
-    cy.contains("Last name (as it appears on ID) *").click();
+    cy.contains("Last name (as it appears on Courtesy Card) *").click();
 
     cy.get("input:focus").should("have.length", 1);
     cy.url().should("include", eligibility_confirm_url);
   });
 });
+
+describe("Multiple verifier, with AuthProvider: Eligibility start page spec", () => {
+  beforeEach(() => {
+    cy.visit("/");
+    cy.contains(agencies[0].fields.short_name).click();
+    cy.contains("Let’s do it!").click();
+    cy.get("input:radio").first().click();
+    cy.contains("Continue").click();
+    cy.url().should("include", eligibility_start_url);
+  });
+
+  it.skip("Has a Login.gov button", () => {
+    cy.contains("Continue with Login.gov");
+  });
+});