From b90413809f26b0496f20dbc4de1964c679242677 2014-12-02 18:35:53
From: Bradley M. Kuhn <bkuhn@ebb.org>
Date: 2014-12-02 18:35:53
Subject: [PATCH] Subscriptions for monthly supporters.

There are now two options at the bottom of the page, annual and monthly
supporters.

In addition, there is Javascript code to cause the annual and monthly
items disappear and reappear upon selection either in the donate box or
the selector above the items.

I tested this in links and it seems to degrade reasonably well.

---

diff --git a/www/conservancy/static/forms.css b/www/conservancy/static/forms.css
index 145c2e75ebaaf56b5a2cc180414a0ef7abd41c99..9981a74f16ac91c575cd1ebc470fef5222ac0e90 100644
--- a/www/conservancy/static/forms.css
+++ b/www/conservancy/static/forms.css
@@ -34,3 +34,13 @@ input.invalid, textarea.invalid {
 input.valid, textarea.valid {
     border: 2px solid green;
 }
+
+div.supporter-type-selector {
+    font-size: 125%;
+    text-align: center;
+}
+
+.supporter-type-selection {
+    clear: both;
+    padding-bottom: 60px;
+}
diff --git a/www/conservancy/static/supporter-page.js b/www/conservancy/static/supporter-page.js
index f18a8306ff957b623827aa9681f60298c0fb22cf..0c0fcb4552a191cf5ac3b024684f838194de2b7c 100644
--- a/www/conservancy/static/supporter-page.js
+++ b/www/conservancy/static/supporter-page.js
@@ -47,6 +47,44 @@ $(document).ready(function() {
             input.removeClass("valid").addClass("invalid");
             errorElement.removeClass("form-error").addClass("form-error-show");
         }
-  });
+    });
+    /* Handle toggling of annual/monthly form selections */
+    $('.supporter-type-selection#monthly').hide();
+    $('#annualSelector').css("font-weight", "bold").css("font-size", "127%");
+
+    $("a[href$='monthly']").bind('click', function() {
+        $('.supporter-type-selection#annual').hide();
+        $('.supporter-type-selection#monthly').show();
+        $('#monthlySelector').css("font-weight", "bold").css("font-size", "127%");
+        $('#annualSelector').css("font-weight", "normal").css("font-size", "125%");
+    });
+    $("a[href$='annual']").bind('click', function() {
+        $('.supporter-type-selection#annual').show();
+        $('.supporter-type-selection#monthly').hide();
+        $('#annualSelector').css("font-weight", "bold").css("font-size", "127%");
+        $('#monthlySelector').css("font-weight", "normal").css("font-size", "125%");
+    });
 
   });
+
+$(window).load(function () {
+    verifySelctionCorrectOnPageLoad = function() {
+        var ourURL = document.URL;
+        if (ourURL.search("#monthly") > 0) {
+            $('.supporter-type-selection#annual').hide();
+            $('.supporter-type-selection#monthly').show();
+            $('#monthlySelector').css("font-weight", "bold").css("font-size", "127%");
+            $('#annualSelector').css("font-weight", "normal").css("font-size", "125%");
+        }
+        if (ourURL.search("#annual") > 0) {
+            $('.supporter-type-selection#monthly').hide();
+            $('.supporter-type-selection#annual').show();
+            $('#annualSelector').css("font-weight", "bold").css("font-size", "127%");
+            $('#monthlySelector').css("font-weight", "normal").css("font-size", "125%");
+        }
+    }
+    if (location.hash) {
+        setTimeout(verifySelctionCorrectOnPageLoad, 1);
+    }
+    window.addEventListener("hashchange", verifySelctionCorrectOnPageLoad);
+});
diff --git a/www/conservancy/static/supporter/index.html b/www/conservancy/static/supporter/index.html
index 26f35188d0d0b863ae6a6857cbc89b945f185e0a..e73375e3361d7d3c12450b6844bcf4316c9e1bb2 100644
--- a/www/conservancy/static/supporter/index.html
+++ b/www/conservancy/static/supporter/index.html
@@ -20,9 +20,10 @@
     Now!</h1></div>
 <h3>Become a Supporter now!</h3>
 
-<h4><a href="#now">Support us via PayPal or credit card.</a></h4>
+<h4><a href="#annual">Annual supporter via PayPal, ACH, or credit card.</a></h4>
+<h4><a href="#monthly">Monthly supporter via PayPal, ACH, or credit card.</a></h4>
    
-Other payment methods  to become a supporter:
+Other payment methods  to become an annual supporter:
 <div class="toggle-unit">
     <h4 class="toggle-control" data-text="Wire Transfer" 
     data-expanded-text="Wire Transfer:">Wire Transfer</h4>
@@ -118,8 +119,12 @@ internal policies</a> are published and available for scrutiny.</p>
 
 [1] the shirts will ship First Quarter 2015.
 
-<h2>Become a Supporter Now!</h2>
-<a id="now"></a>
+<hr/>
+<div class="supporter-type-selector">
+  <strong>Become a Supporter Now:</strong>  <a id="annualSelector" href="#annual">Annual</a> | <a id="monthlySelector" href="#monthly">Monthly</a></div>
+<div id="annual" class="supporter-type-selection">
+<h3>Join as an Annual Supporter</h3>
+<a id="annual"></a>
 <form id="supporter-form" action="https://www.paypal.com/cgi-bin/webscr" method="post" name="supporter">
 <div id="supporter-form-inputs">
             <input type="hidden" name="cmd" value="_xclick" />
@@ -170,5 +175,55 @@ internal policies</a> are published and available for scrutiny.</p>
 
 </form>
 </div>
-
+<div id="monthly" class="supporter-type-selection">
+<h3>Join as an Monthly Supporter</h3>
+<a id="monthly"></a>
+<p>Monthly supporters will not receive their t-shirts until they've been a
+  monthly supporter for at least 12 months.</p>
+<form id="supporter-form" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
+<div id="supporter-form-inputs">
+            <input type="hidden" name="cmd" value="_s-xclick">
+            <input type="hidden" name="item_name" value="Conservancy Supporter, Monthly" />
+            <input type="hidden" name="hosted_button_id" value="UU7VBCXYV7UPQ">
+                      <label for="wantGift"><strong>Do you want to receive a t-shirt? </strong></label>
+                      <input type="hidden" name="on1" value="wantGift" />
+                      <input type="radio" checked="checked" name="os1" value="Yes" />Yes
+                      <input type="radio" name="os1" value="No" />No
+                      <br />
+                      <label for="wantGift"><strong>T-shirt size: </strong></label>
+                      <input type="hidden" name="on3" value="size"/>
+                      <select name="os3" id="os3">
+                        <option name="os3" id="os3" value="MenS">Men's S</option>
+                        <option name="os3" id="os3" value="MenM">Men's M</option>
+                        <option name="os3" id="os3" value="MenL">Men's L</option>
+                        <option name="os3" id="os3" value="MenXL">Men's XL</option>
+                        <option name="os3" id="os3" value="Men2XL">Men's 2XL</option>
+                        <option name="os3" id="os3" value="LadiesS">Ladies' S</option>
+                        <option name="os3" id="os3" value="LadiesM">Ladies' M</option>
+                        <option name="os3" id="os3" value="LadiesL">Ladies' L</option>
+                         <option name="os3" id="os3" value="LadiesXL">Ladies' XL</option>
+                      </select><br/>
+                      <label for="publicAck"><strong>
+                          Should we list you publicly as a Conservancy Supporter? </strong></label>
+                      <input type="hidden" name="on2" value="publicAck" />
+                      <input type="radio" checked="checked" name="os2" value="Yes" />Yes
+                      <input type="radio" name="os2" value="No" />No<br/>
+                      <label for="joinList"><strong>Join Conservancy's
+                      Low-Traffic Announcement Email List? </strong></label>
+                      <input type="hidden" name="on4" value="joinList" />
+                      <input type="radio" checked="checked" name="os4" value="Yes" />Yes
+                      <input type="radio" name="os4" value="No" />No<br>
+                      <br /></div>
+                      <div id="supporter-form-submit">
+                      <input type="image"
+                      src="https://www.paypalobjects.com/en_US/i/btn/btn_subscribeCC_LG.gif"
+                      border="0" name="submit" alt="Become a Monthly Supporter Now!">
+<img alt="" border="0"
+                      src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif"
+     width="1" height="1">
+<br/><small>You will be redirected to PayPal's site when you click &ldquo;Subscribe&rdquo;.</small>
+                      </div>
+</form>
+</div>
+</div>
 {% endblock %}