Membership form changes.

[wolnelektury.git] / src / club / templates / club / membership_form.html

diff --git a/src/club/templates/club/membership_form.html b/src/club/templates/club/membership_form.html
index ac4e4c1..474095b 100644 (file)
--- a/src/club/templates/club/membership_form.html
+++ b/src/club/templates/club/membership_form.html
@@ -1,13 +1,34 @@
 {% extends request.session.from_app|yesno:"base/app.html,base/base.html" %}
 {% load chunks %}
 {% load thumbnail %}
+{% load club %}
 
-{% block titleextra %}Towarzystwo Wolnych Lektur{% endblock %}
+{% block titleextra %}Uwalniaj książki razem z nami!{% endblock %}
+{% block metadescription %}„Wolne Lektury należy wspierać, bo są” - Filip Springer{% endblock %}
 
 
 {% block body %}
 
   <style>
+
+   .plan-select {
+       margin-bottom: 15px;
+   }
+.methods {
+ color: #888;
+line-height: 30px;
+}
+.methods .method {
+  border: 1px solid #888;
+  border-radius: 5px;
+display: inline-block;
+padding: 0 5px;
+}
+.methods img {
+height: 30px;
+margin-right: 5px;
+vertical-align: middle;
+}
    .payment-method.disabled {
        opacity: .5;
        filter: grayscale(100%);
@@ -20,12 +41,14 @@
    }
    .kwota, .inna .button, .plan-toggle, .inna input {
        border: 1px solid black;
+       border-radius: 8px;
        background: none;
        cursor: pointer;
-       padding: 10px 0;
+       padding: 0;
        margin-right: 3%;
        margin-bottom: 10px;
        line-height: 3em;
+       font-size: 20px;
    }
    .plan-toggle {
        width: 46.5%;
@@ -59,25 +82,27 @@
    }
 
    .kwota.active, .plan-toggle.active {
-       background: black;
-       color: white;
+       background: #9ACD32;
    }
    .inna input {display: none;}
    .inna.active input {display: inline;}
    .inna.active .button {display: none;}
 
    .ambassador {
-       padding: 2em 145px 2em 2em;
+       padding: 2em;
        margin-bottom: 1em;
        border: 1px solid #ddd;
        position: relative;
    }
+   .ambassador.with-photo {
+       padding-right: 145px;
+   }
    .ambassador img {
        border-radius: 100%;
        height: 100px;
        width: 100px;
        position: absolute;
-       top: 30px;
+       top: 35px;
        right: 30px;
    }
    .ambassador div {
@@ -119,12 +144,18 @@
     <h2 style="margin-bottom:2em;">
       {% if membership %}Dziękujemy za Twoje dotychczasowe zaangażowanie! Wesprzyj nas ponownie!{% else %}Dziękujemy, że chcesz razem z nami uwalniać książki!{% endif %}</h2>
 
-    {% chunk 'club_form_top' %}
+    {% with schedule=request.user|active_schedule %}
+     {% if schedule %}
+      <p><a href="{{ schedule.get_absolute_url }}">Zobacz swoje dotychczasowe wsparcie.</a></p>
+     {% endif %}
+    {% endwith %}
+
     <div class='twocol'>
 
       <form method="POST" action="" id="payment-form" class="wlform">
         {% csrf_token %}
-        <h3>Zadeklaruj, jak często i jaką kwotą chcesz nas wspierać:</h3>
+
+        {% chunk 'club_form_top' %}
 
         <ul class="errorlist">
           {% for e in  form.non_field_errors %}
@@ -138,13 +169,17 @@
           {% endfor %}
         </ul>
 
+        <h3>1. Wybierz rodzaj wsparcia</h3>
+
         {{ form.amount }}
         {{ form.monthly }}
-        <div>
+        <div class="plan-select">
           <span class="button plan-toggle" data-plan="plan-single" data-monthly="False">jednorazowo</span>
           <span class="button plan-toggle active" data-plan="plan-monthly" data-monthly="True">miesięcznie</span>
         </div>
 
+        <h3>2. Wybierz kwotę</h3>
+
         <div class="plan" id="plan-single" style="display:none;" data-monthly="False" data-min-for-year="{{ club.min_for_year }}" data-amount="{{ club.default_single_amount }}">
           {% for amount in club.proposed_single_amounts %}
             <span class="button kwota{% if amount == club.default_single_amount %} active{% endif %}{% if amount >= club.min_for_year %} yearly{% endif %}">{{ amount }}</span>
@@ -154,6 +189,7 @@
             <span class="button">inna kwota</span>
             <input type="number" min="{{ club.min_amount }}">
           </span>
+<div class="methods">{% include 'club/payment/payu.html' %}</div>
         </div>
 
 
@@ -166,20 +202,31 @@
             <span class="button">inna kwota</span>
             <input type="number" min="{{ club.min_amount }}">
           </span>
+<div class="methods">{% include 'club/payment/payu-re.html' %}</div>
         </div>
 
-        <h3>
-          Podaj nam swój adres e-mail, żebyśmy mogli się z Tobą skontaktować:
-        </h3>
+        <h3>3. Podaj adres e-mail</h3>
+
+        <p>{{ form.email }}</p>
 
         <p>
-          {{ form.email }}</p>
-        <button class="submit" type='submit'>Dołącz</button>
+          {{ form.agree_newsletter }}
+          <label for="agree_newsletter">
+            Chcę dostawać informacje o nowościach
+          </label>
+        </p>
+
+        <p>W każdej chwili możesz zrezygnować z subskrypcji. Więcej w <a href="https://nowoczesnapolska.org.pl/prywatnosc/">polityce prywatności</a>.</p>
+
+        <div><button class="submit" type='submit'>Wpłać</button></div>
+
+        {% chunk 'club_form_bottom' %}
+
       </form>
 
       <div class="club-form-info">
         {% if ambassador %}
-          <div class="ambassador">
+       <div class="ambassador {% if ambassador.photo %}with-photo{% endif %}">
             <div>
               <em>
                 {{ ambassador.text }}