refactor(enrollment): define blocks for overriding index template

benefits/enrollment/templates/enrollment/includes/media-item--bankcardcheck--index--calfresh.html

@@ -0,0 +1,22 @@
+{% extends "core/includes/media-item.html" %}
+{% load i18n %}
+
+{% block icon %}
+    {% include "core/includes/icon.html" with name="bankcardcheck" %}
+{% endblock icon %}
+
+{% block heading %}
+    {% translate "The next step is to connect your contactless card to your transit benefit" %}
+{% endblock heading %}
+
+{% block body %}
+    <div class="media-body--details">
+        <p>
+            {% translate "You will be directed to our payment partner, " %}
+            {% include "core/includes/modal-trigger.html" with modal="modal--littlepay" text="Littlepay" period=True %}
+            {% translate "We don’t store your information, and you won’t be charged." %}
+        </p>
+    </div>
+
+    {% include "enrollment/includes/modal--littlepay.html" with id="modal--littlepay" size="modal-md" header="p-md-2 p-3" body="pb-md-3 mb-md-3 mx-md-3 py-0 pt-0 absolute-top" %}
+{% endblock body %}

benefits/enrollment/templates/enrollment/index--calfresh.html

@@ -0,0 +1,16 @@
+{% extends "enrollment/index.html" %}
+{% load i18n %}
+
+{% block media-items %}
+  <div class="col-12 col-sm-12 col-lg-8">
+    <ul class="media-list mx-0 px-0 d-flex justify-content-center flex-column">
+      {% include "enrollment/includes/media-item--bankcardcheck--index--calfresh.html" %}
+    </ul>
+  </div>
+{% endblock media-items %}
+
+{% block additional-info %}
+  <div class="col-12 col-sm-12 col-lg-8">
+    <p>Info alert here</p>
+  </div>
+{% endblock additional-info %}

benefits/enrollment/templates/enrollment/index.html

@@ -20,11 +20,15 @@ <h1 class="pb-lg-8 pb-4">
 {% endblock headline %}
 
 {% block inner-content %}
-  <div class="col-12 col-sm-12 col-lg-8">
-    <ul class="media-list mx-0 px-0 d-flex justify-content-center flex-column">
-      {% include "enrollment/includes/media-item--bankcardcheck--index.html" %}
-    </ul>
-  </div>
+  {% block media-items %}
+    <div class="col-12 col-sm-12 col-lg-8">
+      <ul class="media-list mx-0 px-0 d-flex justify-content-center flex-column">
+        {% include "enrollment/includes/media-item--bankcardcheck--index.html" %}
+      </ul>
+    </div>
+  {% endblock media-items %}
+  {% block additional-info %}
+  {% endblock additional-info %}
   {% comment %}
     This Javascript code is partially generated by this template and so it must
     come before the forms, which are rendered at just before the {% endblock inner-content %}