Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Eligibility Start: Contactless Pay Modal #1523

Merged
merged 18 commits into from
Jul 21, 2023
Merged

Eligibility Start: Contactless Pay Modal #1523

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
6d9ef1e
feat(eligibility-start): first pass at contactless modal
machikoyasuda Jul 19, 2023
146d286
fix(eligibility-start): modal - use msgid for trigger text
machikoyasuda Jul 12, 2023
25d27dc
chore: rebase dev fix
machikoyasuda Jul 19, 2023
72bbe44
fix(copy): fix duplicate copy
machikoyasuda Jul 18, 2023
6503e20
fix(modal-contactless): add the contact info line
machikoyasuda Jul 19, 2023
958008a
fix(elig-start): remove extra white space
machikoyasuda Jul 19, 2023
b51cbf6
fix(elig-start): undo the underline span
machikoyasuda Jul 19, 2023
955ce44
fix(modal-trigger): create Modal Trigger Link for inline-link modals
machikoyasuda Jul 19, 2023
9e10616
refactor(enrollment-index): use Modal Trigger Link for LittlePay modal
machikoyasuda Jul 19, 2023
d12b83e
refactor(css): unnecessary declaration
machikoyasuda Jul 19, 2023
4226bbe
fix(modals): add Go back link on modals on mobile
machikoyasuda Jul 19, 2023
24843f1
fix(modal): add Go back to littlepay modal on mobile too
machikoyasuda Jul 19, 2023
00fa20f
refactor: remove unnecessary css
machikoyasuda Jul 20, 2023
3bc0e20
refactor(modal): add Go back modal link text to Django.po files
machikoyasuda Jul 20, 2023
f9ddec6
fix(eligibility-start): use bootstrap classes to remove button defaul…
machikoyasuda Jul 20, 2023
04bb644
refactor(css): refactor modal trigger link css selector to better ref…
machikoyasuda Jul 20, 2023
0ff5504
fix(css): p-0 not padding-0
machikoyasuda Jul 20, 2023
9aa49b0
chore: add back gh issue link
machikoyasuda Jul 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions benefits/core/templates/core/includes/modal-trigger-link.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
<!-- Inline link to trigger modal -->
<a href="#{{ id }}" class="{{ classes }}" data-bs-toggle="modal" data-bs-target="#{{ id }}">{{ text }}</a>
thekaveman marked this conversation as resolved.
Show resolved Hide resolved
8 changes: 7 additions & 1 deletion benefits/eligibility/templates/eligibility/includes/media-item--bankcardcheck--start.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,12 @@

{% block body %}
<div class="media-body--details">
<p>{% translate "eligibility.pages.start.bankcard.text" %}</p>
<p>
{% translate "eligibility.pages.start.bankcard.text" %}
{% translate "eligibility.pages.start.modal.title" as trigger_text %}
{% include "core/includes/modal-trigger-link.html" with id="contactless-modal" text=trigger_text %}
</p>
</div>

{% include "eligibility/includes/modal--contactless.html" with id="contactless-modal" size="modal-lg" %}
{% endblock body %}
6 changes: 2 additions & 4 deletions ...ts/eligibility/templates/eligibility/includes/media-item--idcardcheck--start--senior.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,8 @@
<div class="media-body--details">
<p>
{% translate "eligibility.pages.start.senior.start_item.details" %}
<!-- Button to trigger modal -->
<button type="button" class="modal-trigger--link" data-bs-toggle="modal" data-bs-target="#identity-verification-help">
{% translate "eligibility.pages.start.senior.help.link_text" %}
</button>
{% translate "eligibility.pages.start.senior.help.link_text" as trigger_text %}
{% include "core/includes/modal-trigger-link.html" with id="identity-verification-help" text=trigger_text %}
</p>
<div class="media-body--items">
<p>{% translate "eligibility.pages.start.senior.start_item.secondary_details" %}</p>
Expand Down
27 changes: 27 additions & 0 deletions benefits/eligibility/templates/eligibility/includes/modal--contactless.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
{% 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 pb-2">
{% blocktranslate with agency_short_name=agency.short_name %}eligibility.pages.start.modal.p[4.1]{{agency_short_name}}{% endblocktranslate %}
{% blocktranslate with agency_info_url=agency.info_url %}eligibility.pages.start.modal.p[4.2]{{agency_info_url}}{% endblocktranslate %}
{% blocktranslate with agency_short_name=agency.short_name %}eligibility.pages.start.modal.p[4.3]{{agency_short_name}}{% endblocktranslate %}
</p>
<p class="pt-4 d-block d-sm-none">
<a href="#" data-bs-dismiss="modal" aria-label="Close">{% translate "core.modals.back" %}</a>
</p>
</div>
{% endblock modal-content %}
4 changes: 4 additions & 0 deletions benefits/eligibility/templates/eligibility/includes/modal--senior-help.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,4 +14,8 @@ <h3 class="pt-4 pt-lg-3 px-lg-3">{% translate "eligibility.pages.index.senior.he
<p class="pt-1 pt-lg-3 px-lg-3">{% translate "eligibility.pages.index.senior.help.p[1]" %}</p>

<p class="py-4 py-lg-3 px-lg-3">{% translate "eligibility.pages.index.senior.help.p[2]" %}</p>

<p class="d-block d-sm-none">
<a href="#" data-bs-dismiss="modal" aria-label="Close">{% translate "core.modals.back" %}</a>
</p>
{% endblock modal-content %}
3 changes: 3 additions & 0 deletions benefits/eligibility/templates/eligibility/includes/modal--senior-start-help.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,4 +12,7 @@ <h2 class="px-lg-3">
<p class="py-4 py-lg-3 px-lg-3">{% translate "eligibility.pages.start.senior.help.p[2]" %}</p>
<p class="py-4 py-lg-3 px-lg-3">{% translate "eligibility.pages.start.senior.help.p[3]" %}</p>
<p class="py-4 py-lg-3 px-lg-3">{% translate "eligibility.pages.start.senior.help.p[4]" %}</p>
<p class="pt-4 d-block d-sm-none">
<a href="#" data-bs-dismiss="modal" aria-label="Close">{% translate "core.modals.back" %}</a>
</p>
{% endblock modal-content %}
2 changes: 1 addition & 1 deletion benefits/eligibility/templates/eligibility/includes/selection-label--senior.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
{% translate "eligibility.pages.index.senior.description" %}

<!-- Button to trigger modal -->
<button id="login" type="button" class="modal-trigger--link" data-bs-toggle="modal" data-bs-target="#login-gov-help">
<button id="login" type="button" class="border-0 bg-transparent p-0" data-bs-toggle="modal" data-bs-target="#login-gov-help">
<span class="fallback-text color-logo">Login.gov</span>
</button>

Expand Down
2 changes: 1 addition & 1 deletion benefits/enrollment/templates/enrollment/includes/media-item--bankcardcheck--index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
<div class="media-body--details">
<p>
{% 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" %}
{% include "core/includes/modal-trigger-link.html" with id="littlepay-modal" text="Littlepay" %}
.
{% translate "enrollment.pages.index.link_card_item.p[0]s[1]" %}
</p>
Expand Down
3 changes: 3 additions & 0 deletions benefits/enrollment/templates/enrollment/includes/modal--littlepay.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,8 @@ <h2 id="littlepay-modal">{% translate "enrollment.pages.index.modal.title" %}</h
<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>
<p class="pt-4 d-block d-sm-none">
<a href="#" data-bs-dismiss="modal" aria-label="Close">{% translate "core.modals.back" %}</a>
</p>
</div>
{% endblock modal-content %}
57 changes: 48 additions & 9 deletions benefits/locale/en/LC_MESSAGES/django.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
msgid ""
msgstr ""
"Report-Msgid-Bugs-To: https://github.com/cal-itp/benefits/issues \n"
"POT-Creation-Date: 2023-07-16 22:50+0000\n"
"POT-Creation-Date: 2023-07-20 18:48+0000\n"
"Language: English\n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n"
Expand Down Expand Up @@ -102,14 +102,14 @@ msgid "core.pages.help.payment_options.p[2][0]%(website)s"
msgstr ""
"Don’t have access to a bank card? You can request a contactless card from "
"one of the companies that offer free contactless prepaid debit cards, such "
"as the <a href=\"%(website)s\" target=\"_blank\" rel=\"noopener "
"noreferrer\">Cash App Visa Debit Card</a> "
"as the <a href=\"%(website)s\" target=\"_blank\" rel=\"noopener noreferrer"
"\">Cash App Visa Debit Card</a> "

#, python-format
msgid "core.pages.help.payment_options.p[2][1]%(website)s"
msgstr ""
"or the <a href=\"%(website)s\" target=\"_blank\" rel=\"noopener "
"noreferrer\">Venmo Mastercard Debit Card</a>."
"or the <a href=\"%(website)s\" target=\"_blank\" rel=\"noopener noreferrer"
"\">Venmo Mastercard Debit Card</a>."

msgid "core.pages.help.payment_options.p[3]"
msgstr ""
Expand Down Expand Up @@ -140,8 +140,8 @@ msgid "core.pages.help.login_gov.p[2]"
msgstr ""
"To learn more about Login.gov, please visit the <a href='https://login.gov/' "
"target=\"_blank\" rel=\"noopener noreferrer\">Login.gov website</a> or the "
"<a href='https://login.gov/help/' target=\"_blank\" rel=\"noopener "
"noreferrer\">Login.gov Help Center</a>."
"<a href='https://login.gov/help/' target=\"_blank\" rel=\"noopener noreferrer"
"\">Login.gov Help Center</a>."

msgid "core.pages.help.login_gov_verify"
msgstr "How do I verify my identity on Login.gov?"
Expand Down Expand Up @@ -318,6 +318,9 @@ msgid "eligibility.pages.start.bankcard.text"
msgstr ""
"Your contactless card must be a debit or credit card by Visa or Mastercard."

msgid "eligibility.pages.start.modal.title"
msgstr "Learn more about contactless cards"

msgid "eligibility.pages.start.mst_courtesy_card.start_item.heading"
msgstr "Your current Courtesy Card number"

Expand Down Expand Up @@ -378,6 +381,42 @@ msgctxt "image alt text"
msgid "core.icons.idcardcheck"
msgstr "Identification card icon with checkmark"

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."

#, python-format
msgid "eligibility.pages.start.modal.p[4.1]%(agency_short_name)s"
msgstr ""
"You can still get your transit benefit by going through your "
"%(agency_short_name)s application process. For updates on additional "
"options, please check back on this website, or contact "

#, python-format
msgid "eligibility.pages.start.modal.p[4.2]%(agency_info_url)s"
msgstr ""
"<a href=\"%(agency_info_url)s\" target=\"_blank\" rel=\"noopener noreferrer"
"\">"

#, python-format
msgid "eligibility.pages.start.modal.p[4.3]%(agency_short_name)s"
msgstr "%(agency_short_name)s</a>."

msgid "core.modals.back"
msgstr "Go back"

msgid "eligibility.pages.index.senior.help.headline"
msgstr "Learn more about"

Expand Down Expand Up @@ -466,8 +505,8 @@ msgstr ""
"This option is for people who have served in the active military, naval, or "
"air service, and who were discharged or released therefrom under conditions "
"other than dishonorable. You will need to <a href='https://www.va.gov/"
"resources/verifying-your-identity-on-vagov/' target=\"_blank\" "
"rel=\"noopener noreferrer\">verify your identity through VA.gov</a>"
"resources/verifying-your-identity-on-vagov/' target=\"_blank\" rel="
"\"noopener noreferrer\">verify your identity through VA.gov</a>"

msgid "eligibility.pages.index.intro.mst"
msgstr ""
Expand Down
58 changes: 48 additions & 10 deletions benefits/locale/es/LC_MESSAGES/django.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
msgid ""
msgstr ""
"Report-Msgid-Bugs-To: https://github.com/cal-itp/benefits/issues \n"
"POT-Creation-Date: 2023-07-16 22:50+0000\n"
"POT-Creation-Date: 2023-07-20 18:48+0000\n"
"Language: Español\n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n"
Expand Down Expand Up @@ -112,8 +112,8 @@ msgstr ""
#, python-format
msgid "core.pages.help.payment_options.p[2][1]%(website)s"
msgstr ""
"o la tarjeta de débito <a href=\"%(website)s\" target=\"_blank\" "
"rel=\"noopener noreferrer\">Venmo Mastercard</a>."
"o la tarjeta de débito <a href=\"%(website)s\" target=\"_blank\" rel="
"\"noopener noreferrer\">Venmo Mastercard</a>."

msgid "core.pages.help.payment_options.p[3]"
msgstr ""
Expand Down Expand Up @@ -144,8 +144,8 @@ msgid "core.pages.help.login_gov.p[2]"
msgstr ""
"Para obtener más información sobre Login.gov, visite <a href='https://login."
"gov/es' target=\"_blank\" rel=\"noopener noreferrer\">Login.gov</a> o <a "
"href='https://login.gov/es/help/' target=\"_blank\" rel=\"noopener "
"noreferrer\">Login.gov: Centro de ayuda</a>."
"href='https://login.gov/es/help/' target=\"_blank\" rel=\"noopener noreferrer"
"\">Login.gov: Centro de ayuda</a>."

msgid "core.pages.help.login_gov_verify"
msgstr "¿Cómo verifico mi identidad en Login.gov?"
Expand Down Expand Up @@ -205,9 +205,8 @@ msgstr ""
#, python-format
msgid "core.pages.help.littlepay.p[1]%(website)s"
msgstr ""
"Para obtener más información sobre Littlepay, visite el sitio web de <a "
"href=\"%(website)s\" target=\"_blank\" rel=\"noopener "
"noreferrer\">Littlepay</a>."
"Para obtener más información sobre Littlepay, visite el sitio web de <a href="
"\"%(website)s\" target=\"_blank\" rel=\"noopener noreferrer\">Littlepay</a>."

msgid "core.pages.help.questions"
msgstr "¿Preguntas?"
Expand Down Expand Up @@ -329,6 +328,9 @@ msgstr ""
"TODO: Su tarjeta debe ser una tarjeta de débito o crédito sin contacto de "
"Visa o Mastercard."

msgid "eligibility.pages.start.modal.title"
msgstr "TODO: Learn more about contactless cards"

msgid "eligibility.pages.start.mst_courtesy_card.start_item.heading"
msgstr "Su número actual de Tarjeta de Cortesía"

Expand Down Expand Up @@ -390,6 +392,42 @@ msgctxt "image alt text"
msgid "core.icons.idcardcheck"
msgstr "Icono de tarjeta de identificación con marca de verificación"

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."

#, python-format
msgid "eligibility.pages.start.modal.p[4.1]%(agency_short_name)s"
msgstr ""
"TODO: You can still get your transit benefit by going through your "
"%(agency_short_name)s application process. For updates on additional "
"options, please check back on this website, or contact "

#, python-format
msgid "eligibility.pages.start.modal.p[4.2]%(agency_info_url)s"
msgstr ""
"<a href=\"%(agency_info_url)s\" target=\"_blank\" rel=\"noopener noreferrer"
"\">"

#, python-format
msgid "eligibility.pages.start.modal.p[4.3]%(agency_short_name)s"
msgstr "%(agency_short_name)s</a>."

msgid "core.modals.back"
msgstr "TODO: Regresar a la página principal"

msgid "eligibility.pages.index.senior.help.headline"
msgstr "TODO: Learn more about"

Expand Down Expand Up @@ -477,8 +515,8 @@ msgstr ""
"TODO: This option is for people who have served in the active military, "
"naval, or air service, and who were discharged or released therefrom under "
"conditions other than dishonorable. You will need to <a href='https://www.va."
"gov/resources/verifying-your-identity-on-vagov/' target=\"_blank\" "
"rel=\"noopener noreferrer\">verify your identity through VA.gov</a>"
"gov/resources/verifying-your-identity-on-vagov/' target=\"_blank\" rel="
"\"noopener noreferrer\">verify your identity through VA.gov</a>"

msgid "eligibility.pages.index.intro.mst"
msgstr ""
Expand Down
25 changes: 7 additions & 18 deletions benefits/static/css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,8 +132,7 @@ a:not(.btn) {
font-weight: var(--bold-font-weight);
}

a:hover:not(.btn),
.modal-trigger--link:hover {
a:hover:not(.btn) {
color: var(--hover-color);
text-decoration: underline;
}
Expand Down Expand Up @@ -706,36 +705,26 @@ 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;
}
Comment on lines -709 to -720
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These are no longer necessary b/c we're using an <a> element for the modal trigger. These classes were only overriding <button> defaults and adding <a> defaults.

/* Modal Trigger */
/* All links/image buttons that open modals have a question mark icon after them */
/* Buttons that open modals (like the Agency Selector) do not have the icon */

.modal-trigger--link::after {
[data-bs-toggle="modal"]:not(.btn)::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 {
[data-bs-toggle="modal"]:not(.btn):hover::after {
background-image: url("/static/img/modal-trigger--hover.svg");
}

.modal-trigger--link:visited::after {
[data-bs-toggle="modal"]:not(.btn):visited::after {
background-image: url("/static/img/modal-trigger--selected.svg");
}

Expand Down