From 2953c50b6697b823724547c989b8184114bc3818 Mon Sep 17 00:00:00 2001
From: Angela Tran <angela@compiler.la>
Date: Fri, 15 Mar 2024 20:11:52 +0000
Subject: [PATCH] feat: add eligibility start template for CalFresh verifier

---
 benefits/core/migrations/local_fixtures.json  |  2 +-
 ...ia-item--idcardcheck--start--calfresh.html | 27 ++++++++++++++++++
 .../eligibility/start--calfresh.html          | 28 +++++++++++++++++++
 3 files changed, 56 insertions(+), 1 deletion(-)
 create mode 100644 benefits/eligibility/templates/eligibility/includes/media-item--idcardcheck--start--calfresh.html
 create mode 100644 benefits/eligibility/templates/eligibility/start--calfresh.html

diff --git a/benefits/core/migrations/local_fixtures.json b/benefits/core/migrations/local_fixtures.json
index 078d7f5839..5b9e95a260 100644
--- a/benefits/core/migrations/local_fixtures.json
+++ b/benefits/core/migrations/local_fixtures.json
@@ -269,7 +269,7 @@
       "jws_signing_alg": null,
       "auth_provider": 1,
       "selection_label_template": "eligibility/includes/selection-label--calfresh.html",
-      "start_template": "",
+      "start_template": "eligibility/start--calfresh.html",
       "form_class": null
     }
   },
diff --git a/benefits/eligibility/templates/eligibility/includes/media-item--idcardcheck--start--calfresh.html b/benefits/eligibility/templates/eligibility/includes/media-item--idcardcheck--start--calfresh.html
new file mode 100644
index 0000000000..635c397de9
--- /dev/null
+++ b/benefits/eligibility/templates/eligibility/includes/media-item--idcardcheck--start--calfresh.html
@@ -0,0 +1,27 @@
+{% extends "eligibility/includes/media-item--idcardcheck.html" %}
+
+{% load i18n %}
+
+{% block heading %}
+  {% translate "A Login.gov account with identity verification" %}
+{% endblock heading %}
+
+{% block body %}
+  <div class="media-body--details">
+    <p>
+      {% translate "You will be able to create an account using your email address if you do not already have one. We use your Login.gov account to verify your identity." %}
+      {% translate "Learn more about identity verification" as text %}
+      {% include "core/includes/modal-trigger.html" with modal="modal--identity-verification" text=text period=True %}
+    </p>
+    <div class="media-body--items">
+      <p>{% translate "For this process you will need:" %}</p>
+      <ul>
+        <li>{% translate "Your state-issued ID card" %}</li>
+        <li>{% translate "Your Social Security number" %}</li>
+        <li>{% translate "A phone number with a phone plan associated with your name" %}</li>
+      </ul>
+    </div>
+  </div>
+
+  {% include "eligibility/includes/modal--login-gov-start-help.html" with size="modal-lg" id="modal--identity-verification" 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/eligibility/templates/eligibility/start--calfresh.html b/benefits/eligibility/templates/eligibility/start--calfresh.html
new file mode 100644
index 0000000000..f82468b6ce
--- /dev/null
+++ b/benefits/eligibility/templates/eligibility/start--calfresh.html
@@ -0,0 +1,28 @@
+{% extends "eligibility/start.html" %}
+{% load i18n %}
+
+{% block page-title %}
+  {% translate "CalFresh benefit overview" %}
+{% endblock page-title %}
+
+{% block headline %}
+  <div class="col-lg-8">
+    <h1>{% translate "You selected a CalFresh Cardholder transit benefit." %}</h1>
+  </div>
+{% endblock headline %}
+
+{% block media-item %}
+  {% include "eligibility/includes/media-item--idcardcheck--start--calfresh.html" %}
+{% endblock media-item %}
+
+{% block call-to-action %}
+  <div class="row d-flex justify-content-lg-end">
+    <div class="col-lg-4 offset-2 offset-lg-0 col-sm-8 col-8 d-flex justify-content-lg-end justify-content-center">
+      {% url "oauth:login" as button_url %}
+      {% translate "Get started with" as button_text %}
+      <a href="{{ button_url }}" class="btn btn-lg btn-primary login">
+        {{ button_text }} <span class="fallback-text white-logo">Login.gov</span>
+      </a>
+    </div>
+  </div>
+{% endblock call-to-action %}