feat(eligibility-start): first pass at contactless modal

cal-itp · Jul 12, 2023 · cf5f86c · cf5f86c
1 parent 54a4c1f
commit cf5f86c
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 3 deletions.
diff --git a/benefits/eligibility/templates/eligibility/includes/media_item__bankcardcheck__start.html b/benefits/eligibility/templates/eligibility/includes/media_item__bankcardcheck__start.html
@@ -12,6 +12,11 @@
 
 {% block body %}
     <div class="media-body--details">
-        <p>{% translate "eligibility.pages.start.bankcard.text" %}</p>
+        <p>
+            {% translate "eligibility.pages.start.bankcard.text" %}
+            {% include "core/includes/modal-trigger.html" with id="contactless-modal" classes="modal-trigger--link" text="Learn more about contactless cards" %}
+        </p>
     </div>
+
+    {% include "eligibility/includes/modal--contactless.html" with id="contactless-modal" size="modal-lg" %}
 {% endblock body %}
diff --git a/benefits/eligibility/templates/eligibility/includes/modal--contactless.html b/benefits/eligibility/templates/eligibility/includes/modal--contactless.html
@@ -0,0 +1,20 @@
+{% extends "core/includes/modal-info.html" %}
+{% load i18n %}
+{% load static %}
+
+{% block modal-content %}
+    <h2 id="contactless-modal">{% translate "eligibility.pages.start.modal.title" %}</h2>
+    <div class="row">
+        <p class="pt-3">{% translate "eligibility.pages.start.modal.p[0]" %}</p>
+        <p class="pt-4">{% translate "eligibility.pages.start.modal.p[1]" %}</p>
+        <p class="contactless-symbol pt-3">
+            <img class="icon mx-auto d-block"
+                 width="30"
+                 height="37.5"
+                 src="{% static 'img/icon/contactless.svg' %}"
+                 alt="{% translate "core.icons.contactless" context "image alt text" %}" />
+        </p>
+        <p class="pt-4">{% translate "eligibility.pages.start.modal.p[3]" %}</p>
+        <p class="pt-4">{% translate "eligibility.pages.start.modal.p[4]" %}</p>
+    </div>
+{% endblock modal-content %}
diff --git a/benefits/locale/en/LC_MESSAGES/django.po b/benefits/locale/en/LC_MESSAGES/django.po
@@ -6,7 +6,7 @@
 msgid ""
 msgstr ""
 "Report-Msgid-Bugs-To: https://github.com/cal-itp/benefits/issues \n"
-"POT-Creation-Date: 2023-07-11 17:23+0000\n"
+"POT-Creation-Date: 2023-07-12 03:15+0000\n"
 "Language: English\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
@@ -496,6 +496,31 @@ msgstr ""
 "If you do not have an account with any of these services, you will need to "
 "create one. We recommend using Login.gov."
 
+msgid "eligibility.pages.start.modal.title"
+msgstr "Learn more about contactless cards"
+
+msgid "eligibility.pages.start.modal.p[0]"
+msgstr ""
+"Benefits only works with contactless debit or credit cards. We do not "
+"currently support mobile wallets or digital cards, such as Apple Pay, Google "
+"Wallet, or Samsung Wallet."
+
+msgid "eligibility.pages.start.modal.p[1]"
+msgstr "The contactless symbol is four curved lines, like this:"
+
+msgid "eligibility.pages.start.modal.p[3]"
+msgstr ""
+"Don’t have access to a contactless card? You can request a contactless card "
+"from your bank, or one of the companies that offer free contactless prepaid "
+"debit cards, such as the Cash App Visa debit card or the Venmo Mastercard "
+"debit card."
+
+msgid "eligibility.pages.start.modal.p[4]"
+msgstr ""
+"You can still get your transit benefit by going through your [agency]'s "
+"application process. For updates on additional options, please check back on "
+"this website, or contact [short name]."
+
 msgid "eligibility.pages.start.sub_headline"
 msgstr "You will need a few items to connect your benefit:"
 

diff --git a/benefits/locale/es/LC_MESSAGES/django.po b/benefits/locale/es/LC_MESSAGES/django.po
@@ -6,7 +6,7 @@
 msgid ""
 msgstr ""
 "Report-Msgid-Bugs-To: https://github.com/cal-itp/benefits/issues \n"
-"POT-Creation-Date: 2023-07-11 17:23+0000\n"
+"POT-Creation-Date: 2023-07-12 03:15+0000\n"
 "Language: Español\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
@@ -509,6 +509,31 @@ msgstr ""
 "TODO: If you do not have an account with any of these services, you will "
 "need to create one. We recommend using Login.gov."
 
+msgid "eligibility.pages.start.modal.title"
+msgstr "TODO: Learn more about contactless cards"
+
+msgid "eligibility.pages.start.modal.p[0]"
+msgstr ""
+"TODO: Benefits only works with contactless debit or credit cards. We do not "
+"currently support mobile wallets or digital cards, such as Apple Pay, Google "
+"Wallet, or Samsung Wallet."
+
+msgid "eligibility.pages.start.modal.p[1]"
+msgstr "TODO: The contactless symbol is four curved lines, like this:"
+
+msgid "eligibility.pages.start.modal.p[3]"
+msgstr ""
+"TODO: Don’t have access to a contactless card? You can request a contactless "
+"card from your bank, or one of the companies that offer free contactless "
+"prepaid debit cards, such as the Cash App Visa debit card or the Venmo "
+"Mastercard debit card."
+
+msgid "eligibility.pages.start.modal.p[4]"
+msgstr ""
+"TODO: You can still get your transit benefit by going through your "
+"[agency]'s application process. For updates on additional options, please "
+"check back on this website, or contact [short name]."
+
 msgid "eligibility.pages.start.sub_headline"
 msgstr "Necesitará algunos artículos para conectar su beneficio:"