chore: wip

Author: jgravois

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

@@ -13,18 +13,21 @@
 {% endblock nav-buttons %}
 
 {% block headline %}
-  <h1 class="pb-4">{{ headline }}</h1>
+  <div class="d-flex flex-column gap-3 align-items-start pb-4">
+    <h2 class="p fw-semibold eyebrow-raising">{{ flow }}</h2>
+    <h1 class="pt-0">{{ headline }}</h1>
+  </div>
 {% endblock headline %}
 
 {% block inner-content %}
   {% block paragraphs %}
     <p>{{ next_step }}</p>
-    <p class="mt-4">
+    <p class="mt-3">
       {% translate "You won't be charged, and we don't store your information. Your card details will be sent to our payment partner " %}
       <!-- djlint:off --><a href="modal--transit-processor" class="{{ classes }}" data-bs-toggle="modal" data-bs-target="#modal--transit-processor">{{ transit_processor.name }}</a><!-- djlint:on -->
       .
     </p>
-    <div class="mt-4">
+    <div class="mt-3">
       {% if alert_include %}
         {% include alert_include %}
       {% else %}
@@ -41,7 +44,7 @@ <h1 class="pb-4">{{ headline }}</h1>
 {% endblock inner-content %}
 
 {% block call-to-action-button %}
-  <a id="{{ cta_button }}" href="{{ cta_button }}" class="btn btn-lg btn-primary" role="button">
+  <a id="{{ cta_button }}" href="{% url cta_button %}" class="btn btn-lg btn-primary" role="button">
     {% translate "Register your card" %}
   </a>
 {% endblock call-to-action-button %}

…/templates/enrollment_init/tokenize.html …nit/templates/enrollment_init/start.htmlbenefits/enrollment_init/templates/enrollment_init/tokenize.html renamed to benefits/enrollment_init/templates/enrollment_init/start.html benefits/enrollment_init/templates/enrollment_init/tokenize.html renamed to benefits/enrollment_init/templates/enrollment_init/start.html

@@ -7,7 +7,7 @@
   </script>
 
   <h1 class="mb-4">Enter your card details</h1>
-  <form action="./success" method="get">
+  <form action="{% url success_url %}" method="get">
     <!-- Credit card fields -->
     <div class="input mt-3">
       <span>Card number</span>
@@ -20,12 +20,12 @@ <h1 class="mb-4">Enter your card details</h1>
       <p class="error"></p>
     </div>
     <div class="input mt-4">
-      <span>Security Code</span>
+      <span>Security code</span>
       <div id="cvv"></div>
       <p class="error"></p>
     </div>
     <!-- Submit the form to your server -->
-    <button class="btn btn-lg btn-primary mt-5" id="tokenizeButton" type="button">Tokenize card</button>
+    <button class="btn btn-lg btn-primary mt-5" id="tokenizeButton" type="button">Register my card</button>
   </form>
 
   {% comment %} <div>reCAPTCHA</div> {% endcomment %}
@@ -59,9 +59,9 @@ <h1 class="mb-4">Enter your card details</h1>
             placeholder: "123",
           }
         },
-        validationCallback: function (field, status, message) {
-          if (status) return // if field is valid, short-circuit
-          document.querySelector(`#${field} + p`).innerText = message;
+        validationCallback: function (field, valid, message) {
+          const errNode = document.querySelector(`#${field} + p`)
+          errNode.innerText = valid ? '' : message;
         },
         timeoutDuration: 10000,
         timeoutCallback: function () {

benefits/enrollment_init/urls.py

@@ -1,14 +1,14 @@
 from django.urls import path
 
-from benefits.enrollment_init.views import IndexView, SuccessView, TokenizeView
+from benefits.enrollment_init.views import IndexView, StartView, SuccessView
 from benefits.routes import routes
 
 app_name = "init"
 urlpatterns = [
-    # /init
+    # /init/
     path("", IndexView.as_view(), name=routes.name(routes.ENROLLMENT_INIT_INDEX)),
-    # /init/tokenize
-    path("tokenize", TokenizeView.as_view(), name=routes.name(routes.ENROLLMENT_INIT_TOKENIZE)),
+    # /init/start
+    path("start", StartView.as_view(), name=routes.name(routes.ENROLLMENT_INIT_START)),
     # /init/success
     path("success", SuccessView.as_view(), name=routes.name(routes.ENROLLMENT_INIT_SUCCESS)),
 ]

benefits/enrollment_init/views.py

@@ -17,13 +17,6 @@ class IndexView(AgencySessionRequiredMixin, IndexContextMixin, FormView):
     """View for the enrollment landing page."""
 
     enrollment_method = models.EnrollmentMethods.SELF_SERVICE
-    form_class = forms.CardTokenizeSuccessForm
-    route_enrollment_success = routes.ENROLLMENT_SUCCESS
-    route_reenrollment_error = routes.ENROLLMENT_REENROLLMENT_ERROR
-    route_retry = routes.ENROLLMENT_RETRY
-    route_system_error = routes.ENROLLMENT_SYSTEM_ERROR
-    route_server_error = routes.SERVER_ERROR
-    route_tokenize_success = routes.ENROLLMENT_INIT_INDEX
     template_name = "enrollment_init/index.html"
 
     def get_context_data(self, **kwargs):
@@ -34,8 +27,9 @@ def get_context_data(self, **kwargs):
                 "headline": _("You are eligible for a reduced fare!"),
                 "next_step": _("The last step is to register a bank card so you get a reduced fare when you tap."),
                 "collect_js_api_key": self.agency.init_config.tokenization_api_key,
-                "cta_button": "./tokenize",
+                "cta_button": routes.ENROLLMENT_INIT_START,
                 "enrollment_method": self.enrollment_method,
+                "flow": self.flow,
                 "transit_processor": {
                     "name": "INIT",
                     "website": "https://www.initse.com/enus/solutions/fare-collection-revenue-management/",
@@ -45,7 +39,7 @@ def get_context_data(self, **kwargs):
         return context
 
 
-class TokenizeView(AgencySessionRequiredMixin, IndexContextMixin, FormView):
+class StartView(AgencySessionRequiredMixin, IndexContextMixin, FormView):
     """View for the page that tokenizes the user card."""
 
     enrollment_method = models.EnrollmentMethods.SELF_SERVICE
@@ -55,8 +49,8 @@ class TokenizeView(AgencySessionRequiredMixin, IndexContextMixin, FormView):
     route_retry = routes.ENROLLMENT_RETRY
     route_system_error = routes.ENROLLMENT_SYSTEM_ERROR
     route_server_error = routes.SERVER_ERROR
-    route_tokenize_success = routes.ENROLLMENT_INIT_INDEX
-    template_name = "enrollment_init/tokenize.html"
+    route_tokenize_success = routes.ENROLLMENT_INIT_SUCCESS
+    template_name = "enrollment_init/start.html"
 
     def get_context_data(self, **kwargs):
         context = super().get_context_data(**kwargs)
@@ -67,13 +61,14 @@ def get_context_data(self, **kwargs):
         tokenize_success_form = forms.CardTokenizeSuccessForm(
             action_url=self.route_tokenize_success, auto_id=True, label_suffix=""
         )
+
         context.update(
             {
                 "collect_js_api_key": self.agency.init_config.tokenization_api_key,
                 "forms": [tokenize_system_error_form, tokenize_success_form],
                 "form_success": tokenize_success_form.id,
                 "form_system_error": tokenize_system_error_form.id,
-                "cta_button": "./tokenize",
+                "success_url": self.route_tokenize_success,
                 "enrollment_method": self.enrollment_method,
                 "transit_processor": {
                     "name": "INIT",

benefits/routes.py

@@ -105,14 +105,14 @@ def ENROLLMENT_INIT_INDEX(self):
         return "init:index"
 
     @property
-    def ENROLLMENT_INIT_TOKENIZE(self):
+    def ENROLLMENT_INIT_START(self):
         """Time to tokenize, using Init."""
-        return "init:tokenize"
+        return "init:start"
 
     @property
     def ENROLLMENT_INIT_SUCCESS(self):
         """Tokenization complete, using Init."""
-        return "init:tokenize"
+        return "init:success"
 
     @property
     def ENROLLMENT_SWITCHIO_GATEWAY_URL(self):

benefits/static/css/styles.css

@@ -822,3 +822,10 @@ footer .footer-links li a.footer-link:visited {
 .additional-agency {
   border-bottom: 1px solid var(--dsdl-gray-40);
 }
+
+.eyebrow-raising {
+  border-radius: var(--border-radius, 3px);
+  background: var(--Color-Cyan-cyan-10, #dff3fe);
+  margin-top: calc(72rem / 16);
+  padding: 4px 8px;
+}