edx-platform/lms/templates/verify_student/pay_and_verify.html

<%page expression_filter="h"/>
<%!
import json
from django.utils.translation import ugettext as _

from openedx.core.djangolib.markup import HTML, Text
from lms.djangoapps.verify_student.views import PayAndVerifyView
%>
<%namespace name='static' file='../static_content.html'/>

<%inherit file="../main.html" />
<%block name="bodyclass">register verification-process step-requirements</%block>

<%block name="pagetitle">
  % if message_key == PayAndVerifyView.UPGRADE_MSG:
    ${_("Upgrade Your Enrollment For {course_name}.").format(course_name=course.display_name)}
  % elif message_key in [PayAndVerifyView.VERIFY_NOW_MSG, PayAndVerifyView.VERIFY_LATER_MSG]:
    ${_("Verify For {course_name}").format(course_name=course.display_name)}
  % else:
    ${_("Enroll In {course_name}").format(course_name=course.display_name)}
  % endif
</%block>

<%block name="header_extras">
    <%
      template_names = (
          ["webcam_photo", "image_input", "error"] +
          ["intro_step"] +
          ["face_photo_step", "id_photo_step", "review_photos_step", "enrollment_confirmation_step"]
      )

      if not is_ab_testing:
        template_names.append("make_payment_step")
      else:
        template_names.append("make_payment_step_ab_testing")

    %>
    % for template_name in template_names:
        <script type="text/template" id="${template_name}-tpl">
            <%static:include path="verify_student/${template_name}.underscore" />
        </script>
    % endfor
</%block>
<%block name="js_extra">
  <script src="${static.url('js/src/tooltip_manager.js')}"></script>
  <%static:js group='verify_student'/>
</%block>

<%block name="content">
## Top-level wrapper for errors
## JavaScript views may append to this wrapper
<div id="error-container" style="display: none;"></div>

<div class="container no-min-scale">
  <section class="wrapper carousel">
    ## Payment / Verification flow
    ## Most of these data attributes are used to dynamically render
    ## the steps, but some are just useful for A/B test setup.
    <div
      id="pay-and-verify-container"
      class="pay-and-verify"
      data-full-name='${user_full_name}'
      data-platform-name='${platform_name}'
      data-course-key='${course_key}'
      data-course-name='${course.display_name}'
      data-courseware-url='${courseware_url}'
      data-course-mode-name='${course_mode.name}'
      data-course-mode-slug='${course_mode.slug}'
      data-course-mode-min-price='${course_mode.min_price}'
      data-course-mode-sku='${course_mode.sku or ''}'
      data-course-mode-suggested-prices='${course_mode.suggested_prices}'
      data-course-mode-currency='${course_mode.currency}'
      data-contribution-amount='${contribution_amount}'
      data-processors='${json.dumps(processors)}'
      data-verification-deadline='${verification_deadline}'
      data-display-steps='${json.dumps(display_steps)}'
      data-current-step='${current_step}'
      data-requirements='${json.dumps(requirements)}'
      data-msg-key='${message_key}'
      data-is-active='${is_active}'
      data-user-email='${user_email}'
      data-user-language='${user_language}'
      data-user-timezone='${user_timezone}'
      data-already-verified='${already_verified}'
      data-verification-good-until='${verification_good_until}'
      data-capture-sound='${capture_sound}'
      data-is-ab-testing='${json.dumps(is_ab_testing)}'

      ## If we reached the verification flow from an in-course checkpoint,
      ## then pass the checkpoint location in so that we can associate
      ## the attempt with the checkpoint on submission.
      % if checkpoint_location is not None:
        data-checkpoint-location='${checkpoint_location}'
      % endif
    ></div>

    % if is_active:
    ## Support
    <div class="wrapper-content-supplementary">
      <aside class="content-supplementary">
          <ul class="list-help">
              <%include file="${static.get_template_path('_verification_help.html')}" />

              % if PayAndVerifyView.WEBCAM_REQ in requirements:
              <li class="help-item help-item-technical">
                  <h3 class="title">${_("Technical Requirements")}</h3>
                  <div class="copy">
                      <p>${Text(_("Please make sure your browser is updated to the {strong_start}{a_start}most recent version possible{a_end}{strong_end}. Also, please make sure your {strong_start}webcam is plugged in, turned on, and allowed to function in your web browser (commonly adjustable in your browser settings).{strong_end}")).format(
                              a_start=HTML('<a rel="external" href="http://browsehappy.com/">'),
                              a_end=HTML('</a>'),
                              strong_start=HTML('<strong>'),
                              strong_end=HTML('</strong>'))}</p>
                  </div>
              </li>
              % endif
          </ul>
        </aside>
    </div>
    % endif

  </section>
</div>
</%block>