cal-itp · machikoyasuda · Jul 12, 2023 · Jul 11, 2023 · Jul 11, 2023 · Jul 11, 2023
@@ -0,0 +1,16 @@
+<!-- Modal -->
+{% with id|add:"-modal-label" as aria_labelledby_id %}
+    <div class="modal fade" id="{{ id }}" tabindex="-1" aria-labelledby="{{ aria_labelledby_id }}" aria-hidden="true">
+        <div class="modal-dialog {{ size }} modal-dialog-centered modal-dialog-scrollable">
+            <div class="modal-content">
+                <div class="modal-header border-0 p-2">
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body pt-0 mt-0 p-4 m-2">
+                    {% block modal-content %}
+                    {% endblock modal-content %}
+                </div>
+            </div>
+        </div>
+    </div>
+{% endwith %}
@@ -1,2 +1,2 @@
 <!-- Button to trigger modal -->
-<button type="button" class="btn btn-lg btn-primary" data-bs-toggle="modal" data-bs-target="#{{ id }}">{{ text }}</button>
+<button type="button" class="{{ classes }}" data-bs-toggle="modal" data-bs-target="#{{ id }}">{{ text }}</button>
@@ -4,6 +4,6 @@
 
 {% block call-to-action %}
     {% translate "core.pages.index.button" as trigger_text %}
-    {% include "core/includes/modal-trigger.html" with id="agency-selector" text=trigger_text %}
+    {% include "core/includes/modal-trigger.html" with id="agency-selector" classes="btn btn-lg btn-primary" text=trigger_text %}
     {% include "core/includes/modal--agency-selector.html" with id="agency-selector" agencies=agencies %}
 {% endblock call-to-action %}
@@ -13,9 +13,13 @@
 {% block body %}
     <div class="media-body--details">
         <p>
-            {% translate "enrollment.pages.index.link_card_item.p[0]s[0]" %} <a href="#">Littlepay</a>.
+            {% translate "enrollment.pages.index.link_card_item.p[0]s[0]" %}
+            {% include "core/includes/modal-trigger.html" with id="littlepay-modal" classes="modal-trigger--link" text="Littlepay" %}
+            .
             {% translate "enrollment.pages.index.link_card_item.p[0]s[1]" %}
         </p>
         <p>{% translate "enrollment.pages.index.link_card_item.p[1]s[0]" %}</p>
     </div>
+
+    {% include "enrollment/includes/modal--littlepay.html" with id="littlepay-modal" size="modal-md" %}
 {% endblock body %}
@@ -0,0 +1,11 @@
+{% extends "core/includes/modal-info.html" %}
+{% load i18n %}
+{% load static %}
+
+{% block modal-content %}
+    <h2 id="littlepay-modal">{% translate "enrollment.pages.index.modal.title" %}</h2>
+    <div class="row">
+        <p class="pt-3">{% translate "enrollment.pages.index.modal.p[0]" %}</p>
+        <p class="pt-4">{% translate "enrollment.pages.index.modal.p[1]" %}</p>
+    </div>
+{% endblock modal-content %}
@@ -6,7 +6,7 @@
 msgid ""
 msgstr ""
 "Report-Msgid-Bugs-To: https://github.com/cal-itp/benefits/issues \n"
-"POT-Creation-Date: 2023-07-10 22:55+0000\n"
+"POT-Creation-Date: 2023-07-11 17:23+0000\n"
 "Language: English\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
@@ -274,16 +274,16 @@ msgstr ""
 msgid "core.pages.help.foss.link"
 msgstr "GitHub"
 
+msgid "core.buttons.previous_page"
+msgstr "Previous Page"
+
 msgid "core.pages.index.agency_selector.headline"
 msgstr "Please choose your transit provider:"
 
 #, python-format
 msgid "core.pages.index.agency_selector%(agency_short_name)s"
 msgstr "%(agency_short_name)s logo"
 
-msgid "core.buttons.previous_page"
-msgstr "Previous Page"
-
 msgid "core.includes.nocookies.brand"
 msgstr "Cookies are disabled"
 
@@ -330,6 +330,9 @@ msgstr ""
 "resources/verifying-your-identity-on-vagov/' target=\"_blank\" rel="
 "\"noopener noreferrer\">verify your identity through VA.gov</a>"
 
+msgid "core.pages.index.button"
+msgstr "Choose your Provider"
+
 msgid "core.pages.landing.h2"
 msgstr ""
 "Cal-ITP Benefits connects your transit benefit to your contactless card"
@@ -389,9 +392,6 @@ msgstr "Choose Provider"
 msgid "core.pages.index.headline"
 msgstr "Get reduced fare on public transportation when you tap to ride"
 
-msgid "core.pages.index.button"
-msgstr "Choose your Provider"
-
 msgid "core.pages.index.continue"
 msgstr "Get Started"
 
@@ -573,15 +573,30 @@ msgstr "We don’t store your information, and you won’t be charged."
 msgid "enrollment.pages.index.link_card_item.p[1]s[0]"
 msgstr "Please use a debit or credit card by Visa or Mastercard."
 
-msgid "core.buttons.wait"
-msgstr "Please wait..."
+msgid "enrollment.pages.index.modal.title"
+msgstr "Learn more about LittlePay"
+
+msgid "enrollment.pages.index.modal.p[0]"
+msgstr ""
+"Our payment partner, Littlepay, is a secure, end-to-end payment processing "
+"platform that allows us to connect your transit benefit to the contactless "
+"card of your choice."
+
+msgid "enrollment.pages.index.modal.p[1]"
+msgstr ""
+"For more information on Littlepay, please visit the <a href='https://"
+"littlepay.com' target=\"_blank\" rel=\"noopener noreferrer\">Littlepay "
+"website</a>."
 
 msgid "enrollment.pages.index.title"
 msgstr "Connect your card"
 
 msgid "enrollment.pages.index.headline"
 msgstr "Your eligibility is confirmed! You’re nearly there."
 
+msgid "core.buttons.wait"
+msgstr "Please wait..."
+
 msgid "enrollment.buttons.payment_partner"
 msgstr "Connect your Card"
 

@@ -6,7 +6,7 @@
 msgid ""
 msgstr ""
 "Report-Msgid-Bugs-To: https://github.com/cal-itp/benefits/issues \n"
-"POT-Creation-Date: 2023-07-10 22:55+0000\n"
+"POT-Creation-Date: 2023-07-11 17:23+0000\n"
 "Language: Español\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
@@ -285,16 +285,16 @@ msgstr ""
 msgid "core.pages.help.foss.link"
 msgstr "GitHub"
 
+msgid "core.buttons.previous_page"
+msgstr "Página Anterior"
+
 msgid "core.pages.index.agency_selector.headline"
 msgstr "Por favor, elija su proveedor de transporte:"
 
 #, python-format
 msgid "core.pages.index.agency_selector%(agency_short_name)s"
 msgstr "%(agency_short_name)s logo"
 
-msgid "core.buttons.previous_page"
-msgstr "Página Anterior"
-
 msgid "core.includes.nocookies.brand"
 msgstr "Cookies están inactivos"
 
@@ -341,6 +341,9 @@ msgstr ""
 "gov/resources/verifying-your-identity-on-vagov/' target=\"_blank\" rel="
 "\"noopener noreferrer\">verify your identity through VA.gov</a>"
 
+msgid "core.pages.index.button"
+msgstr "Elija su Proveedor"
+
 msgid "core.pages.landing.h2"
 msgstr "Su beneficio se aplicará cada vez que acerque su tarjeta para viajar"
 
@@ -400,9 +403,6 @@ msgid "core.pages.index.headline"
 msgstr ""
 "Obtenga una tarifa reducida en el transporte público cuando toque para viajar"
 
-msgid "core.pages.index.button"
-msgstr "Elija su Proveedor"
-
 msgid "core.pages.index.continue"
 msgstr "Empezar"
 
@@ -588,15 +588,30 @@ msgstr "No almacenamos su información y no se le cobrará."
 msgid "enrollment.pages.index.link_card_item.p[1]s[0]"
 msgstr "Utilice una tarjeta de débito o crédito de Visa o Mastercard."
 
-msgid "core.buttons.wait"
-msgstr "Espere por favor..."
+msgid "enrollment.pages.index.modal.title"
+msgstr "Más información sobre Littlepay"
+
+msgid "enrollment.pages.index.modal.p[0]"
+msgstr ""
+"Littlepay, nuestro socio de pagos, es una plataforma de procesamiento de "
+"pagos segura e integral que nos permite conectar su beneficio de tránsito a "
+"la tarjeta sin contacto de su elección."
+
+msgid "enrollment.pages.index.modal.p[1]"
+msgstr ""
+"Para obtener más información sobre Littlepay, visite el <a href='https://"
+"littlepay.com' target=\"_blank\" rel=\"noopener noreferrer\">sitio web de "
+"Littlepay</a>."
 
 msgid "enrollment.pages.index.title"
 msgstr "Conecte su tarjeta"
 
 msgid "enrollment.pages.index.headline"
 msgstr "¡Su elegibilidad está confirmada! Ya falta poco."
 
+msgid "core.buttons.wait"
+msgstr "Espere por favor..."
+
 msgid "enrollment.buttons.payment_partner"
 msgstr "Conecta tu tarjeta"
 

@@ -132,7 +132,8 @@ a:not(.btn) {
   font-weight: var(--bold-font-weight);
 }
 
-a:hover:not(.btn) {
+a:hover:not(.btn),
+.modal-trigger--link:hover {
   color: var(--hover-color);
   text-decoration: underline;
 }
@@ -636,6 +637,14 @@ a.card:focus-visible {
   }
 }
 
+.btn-close {
+  width: 20px;
+  height: 20px;
+  opacity: 1;
+  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23323A45'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e")
+    center/1em auto no-repeat;
+}
+
 .modal-dialog {
   width: auto;
   height: auto;
@@ -662,6 +671,39 @@ a.card:focus-visible {
   font-size: var(--modal-title-font-size);
 }
 
+.modal-trigger--link {
+  background: transparent;
+  border: none;
+  color: var(--primary-color);
+  font-family: var(--bs-body-font-family);
+  font-weight: var(--bold-font-weight);
+  letter-spacing: var(--body-letter-spacing);
+  padding: 0;
+  margin-right: -5px;
+  text-decoration: underline;
+  text-decoration-style: solid;
+}
+
+.modal-trigger--link::after {
+  content: " ";
+  background-image: url("/static/img/modal-trigger.svg");
+  background-size: contain;
+  display: inline-block;
+  position: relative;
+  width: 24px;
+  height: 24px;
+  margin-left: 2px;
+  vertical-align: text-bottom;
+}
+
+.modal-trigger--link:hover::after {
+  background-image: url("/static/img/modal-trigger--hover.svg");
+}
+
+.modal-trigger--link:visited::after {
+  background-image: url("/static/img/modal-trigger--selected.svg");
+}
+
 /* Enrollment Success */
 /* Custom in-line log out button for Enrollment Success, in paragraph */