regluit/frontend/templates/pledge.html

{% extends "basepledge.html" %}
{% load humanize %}

{% block title %}Pledge{% endblock %}

{% block extra_extra_head %}
<link type="text/css" rel="stylesheet" href="/static/css/campaign.css"  />
<link type="text/css" rel="stylesheet" href="/static/css/pledge.css"  />

<script type="text/javascript" src="/static/js/reconcile_pledge.js"></script>
{% endblock %}

{% block doccontent %}
<div style="height:15px"></div>
<div class="book-detail">
	<div id="book-detail-img">
		<a href="#"><img src="{{ work.cover_image_thumbnail }}" alt="{{ work.title }}" title="{{ work.title }}" width="131" height="192" /></a>
    </div>
    
    <div class="book-detail-info">
		<div class="layout">
			<h2 class="book-name">{{ work.title }}</h2>
			<div>
				<div class="pubinfo">
					<h3 class="book-author">{{ work.author }}</h3>
					<h3 class="book-year">{{ pubdate }}</h3>
				</div>
			</div>
		</div>

		<div class="jsmodule rounded pledge">
			<div class="jsmod-content">
				${{ work.last_campaign.target|floatformat:0|intcomma }} needed by<br />
				{{ work.last_campaign.deadline }}
			</div>
		</div>
                
        <div class="pledged-info">
        	<div class="pledged-group">
        		{{ work.last_campaign.supporters_count }} Ungluers have pledged ${{ work.last_campaign.current_total|intcomma }}
        	</div>
        	<div class="status">
        		<img src="/static/images/images/icon-book-37by25-{{ work.percent_unglued }}.png"  title="book list status" alt="book list status" />
        	</div>
        </div>
    </div>
</div>
    
<div class="jsmodule rounded clearfix">
    <div class="jsmod-content">

	{% if faqmenu == 'modify' %}	
	<div class="modify_notification clearfix"><h4>You've already pledged to this campaign:</h4>
		<div>
		Amount: ${{preapproval_amount|intcomma}}.<br />
		Your premium: {% if premium_description %}{{ premium_description }}{% else %}You did not request a premium for this campaign.{% endif %}<br />
		</div>
	<br /> You can modify your pledge below.
	</div>
	{% endif %}

    	{% comment %}
    	Even there is a CampaignPledgeForm in frontend/forms.py , the "widget" for premium_id is implemented in HTML here for now.
    	{% endcomment %}	
	
    	<form class="pledgeform" method="POST" action="{% if faqmenu == 'modify' %}{% url pledge_modify work_id=work.id %}{% else %}{% url pledge work_id=work.id %}{% endif %}">
        	{% csrf_token %}
			{{ form.non_field_errors }}
        	<div class="pledge_amount">{{ form.preapproval_amount.label_tag }}: {{ form.preapproval_amount.errors }}${{ form.preapproval_amount }}</div>
        	
        	{% comment %}
        	not supported yet; don't display
        	{{ form.anonymous.label_tag }}: {{ form.anonymous.errors }}{{ form.anonymous }}	
        	{% endcomment %}
        	
        	<div class="pledge_amount premium_level">Choose your premium:</div>

        	<ul class="support menu" id="premiums_list">
            	{% for premium_item in premiums %}
            	{% if premium_item.limit == 0  or  premium_item.limit > premium_item.premium_count  %}
            	<li class="{% if forloop.first %}first{% else %}{% if forloop.last %}last{% endif %}{% endif %}">
            	<label for="premium_{{premium_item.id}}">
                	<input type="radio" name="premium_id" id="premium_{{premium_item.id}}" value="{{premium_item.id}}" {% ifequal request.REQUEST.premium_id premium_item.id|stringformat:"s"  %}checked="checked"{% else %} {% ifequal premium_id premium_item.id %}checked="checked"{% endifequal %}{% endifequal %} />
                    <span class="menu-item-price">
                    	${{ premium_item.amount|intcomma }}
                    </span>
                	<span class="menu-item-desc">
                		{{ premium_item.description }} {% ifnotequal premium_item.limit 0 %}<br /> Only  {{ premium_item.premium_remaining }} remaining! {% endifnotequal %}
                	</span>
           		</label></li>
            	{% endif %}
            	{% endfor %}
         	</ul>

			<div class="pledge_amount clearfix" id="mandatory_premiums">
			<div>Depending on your pledge level, you'll also get these acknowledgements.</div>
			<div class="ack_active"><div class="ack_level">Any amount</div><div class="ack_header">The unglued ebook will be delivered to your inbox.</div></div>
			<div id="ack_name" class="ack_inactive"><div class="ack_level">$25+</div><div class="ack_header">You'll be acknowledged on the supporters page<span id="ack_section"></span>.&nbsp;{{ form.ack_name.label_tag }} {{ form.ack_name.errors }}{{ form.ack_name }}<div id="anonbox"><I>{{ form.anonymous.label_tag }}</I> {{ form.anonymous.errors }}{{ form.anonymous }}</div></div></div>
			<div id="ack_link" class="ack_inactive"><div class="ack_level">$50+</div><div class="ack_header">Your acknowledgement will link to your Unglue.it supporter page.{{ form.ack_link }}</div></div>
			<div id="ack_dedication" class="ack_inactive"><div class="ack_level">$100+</div><div class="ack_header">Your acknowledgement can include a dedication (140 characters max).&nbsp;{{ form.ack_dedication.label_tag }} {{ form.ack_dedication.errors }}{{ form.ack_dedication }}</div></div>
				{% comment %}
				What this needs:
				DONE fields for name (and anonymity), link, dedication (140 char limit)
				selective highlighting/activation. if inactive, grey out and provide an indication of the amount ( "$50+" or "($50+)" ); remove indication when active
				DONE "How would you like to be recognized on the supporters page?" or similar
				DONE validation? how?
				prefill name and link? how? (do NOT prefill dedication; make them commit to that)  At any rate, this is a second-step problem.
				A way to commit this to the db.
					DONE: fields attached to transaction 
					- do we want to update supporter with a last-committed-name-and-link to allow prefilling?
					- path from frontend through db field.  add to existing form and use for validation? make sure everything is optional.
				styling
				
				Testing:
					run tests
					create tests pertaining to name/link/dedication. what?
					scour for places transaction authorize() & pledge() happen
					make sure they've all been fed needed data!
					wire in support analogously to PledgeView, then ask raymond to check in on DonateView
					make sure forms do something sensible when ack_name, etc., are empty
					make sure to expose & handle anonymity checkbox
				{% endcomment %}
			</div>
			<input name="pledge" type="submit" {% if faqmenu == 'modify' %}value="Modify Pledge"{% else %}value="Pledge Now"{% endif %} id="pledgesubmit" />
			<input name="decoy" type="submit" id="fakepledgesubmit" disabled="disabled" />
			{% comment %}
				When the pledge amount and premium are in an inconsistent state, the real button is disabled and (via css) hidden; instead we display this fake button with a helpful message.  It's a button so we can reuse all the existing CSS for buttons, so that it looks like the real button has just changed in appearance.  It's hidden and the other one un-disabled and un-hidden when the pledge & premium return to a correct state.  People without javascript enabled will miss out on the front-end corrections but form validation will catch it.
			{% endcomment %}
    	</form>    	
    </div>
</div>
<div class="cancel_notice">(You will be sent to <b>{{ payment_processor|capfirst }}</b>
{% if faqmenu == 'modify' %}, if needed, to modify your pledge. We hope you won't, but of course you're also free to <a href="{% url pledge_cancel campaign_id=work.last_campaign.id %}">cancel your pledge</a>{% else %} to complete your pledge.{% endif %}.)</div>
<div id="supporter_name" style="display: none;">{{ request.user.username }}</div>
{% endblock %}