feat: added payment modal

innovate/static/innovate/signup.css

@@ -54,3 +54,44 @@ button {
 #payment-instructions:hover {
   text-decoration: underline;
 }
+
+.modal {
+  display: none;
+  position: fixed;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgb(0,0,0);
+  background-color: rgba(0,0,0,0.4);
+}
+
+.modal-content {
+  background-color: #fefefe;
+  margin: 15% auto;
+  padding: 20px;
+  border: 1px solid #888;
+  width: 80%;
+  color: black;
+}
+
+.modal-content img {
+  width: 50%;
+}
+
+
+.close {
+  color: #aaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+  color: black;
+  text-decoration: none;
+  cursor: pointer;
+}

innovate/static/innovate/signup.js

@@ -0,0 +1,17 @@
+var modal = document.getElementById("payment-modal")
+var openBtn = document.getElementById("payment-modal-open")
+var closeBtn = document.getElementById("payment-modal-close")
+
+openBtn.onclick = () => {
+  modal.style.display = "block"
+}
+
+closeBtn.onclick = () => {
+  modal.style.display = "none"
+}
+
+window.onclick = (e) => {
+  if (e.target == modal) {
+    modal.style.display = "none"
+  }
+}

innovate/templates/innovate/signup.html

@@ -4,20 +4,35 @@
 {% block styles %}
     <link rel="stylesheet" href="{% static 'innovate/signup.css' %}">
     <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
-    <script src="{% static 'innovate/formsets.js' %}"></script>
-    <script type="text/javascript">
-        $(function() {
-            $('form .competitor-container').formset({
-                extraClasses: ['row1', 'row2', 'row3', 'row4']
-            })
-        })
-    </script>
 {% endblock %}
 
 
 {% load crispy_forms_tags %}
 {% block content %}
-
+    <div id="payment-modal" class="modal">
+        <div class="modal-content">
+            <span class="close" id="payment-modal-close">&times;</span>
+            <h1>How to pay</h1>
+            <h3>Step 0:</h3>
+            <a href="https://www.myschoolbucks.com/ver2/stores/catalog/getproduct?productKey=ZZVR1J3QQUX02D5&OPTZZVR1J3QQUX02D5=ZZVR1J3R37E0D5S">Click here to open the payment link</a>
+            <br>
+            <h3>Step 1:</h3>
+            <p>Determine donation amount. Recommended $20 per team. Enter “Amount to Pay” and “School Name (For Non TJ Students)” fields. Then click the blue “Purchase” button. Do not click other forms (you are already filling out those forms on this registration form).</p>
+            <img src="{% static 'innovate/img/step1.png' %}">
+            <br>
+            <h3>Step 2:</h3>
+            <p>If you have a MySchoolBucks account, log in. Otherwise, click the green “Continue as Guest” button.</p>
+            <img src="{% static 'innovate/img/step2.png' %}">
+            <br>
+            <h3>Step 3:</h3>
+            <p>Enter all fields. Double check the information is correct. Click the blue “Continue” button.</p>
+            <img src="{% static 'innovate/img/step3.png' %}">
+            <br>
+            <h3>Step 4:</h3>
+            <p>Confirm all fields are correct. Then click the blue “Place Order” button. Screenshot or take a picture of your payment confirmation page and upload to this form. Thank you for donating to InnovateTJ!</p>
+            <img src="{% static 'innovate/img/step4.png' %}">
+        </div>
+    </div>
     <form class="form col-sm-6 offset-sm-3" method="POST" action="" enctype="multipart/form-data">
         {% csrf_token %}
         {{ formset.management_form|crispy }}
@@ -70,7 +85,7 @@
         <fieldset class="container col reciept">
             <legend class="team-header row">
                 Team Payment (Optional)
-                <a id="payment-instructions" href="#">How do I pay?</a>
+                <button class="btn btn-light" type="button" id="payment-modal-open">How do I pay?</button>
             </legend>
             <div class="form-floating row">
                 {{ team_form.reciept }}
@@ -78,3 +93,17 @@
         </fieldset>
         <button class="mt-3 btn btn-light" type="submit">Sign Up!</button>
 {% endblock %}
+
+{% block scripts %}
+
+<script src="{% static 'innovate/formsets.js' %}"></script>
+<script src="{% static 'innovate/signup.js' %}"></script>
+<script type="text/javascript">
+    $(function() {
+        $('form .competitor-container').formset({
+            extraClasses: ['row1', 'row2', 'row3', 'row4']
+        })
+    })
+</script>
+
+{% endblock %}

launchx/templates/launchx/base.html

@@ -45,7 +45,7 @@
         </div>
       </nav>
     </header>
-    {% block scripts %}{% endblock %}
+    
     <main role="main" class="container">
       {% block content %}{% endblock %}
     </main>
@@ -54,5 +54,6 @@
     <!-- Bootstrap JS -->
     <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
+    {% block scripts %}{% endblock %}  
   </body>
 </html>