Skip to content
Snippets Groups Projects
Commit 3f243e73 authored by Joshua Walker's avatar Joshua Walker
Browse files

Merge pull request #7 from laryn/patch-1 

laryn-update-4.3-add-scroll-to-top
parents c5c564df d5d914ee
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
com.drastikbydesign.stripe/templates/CRM/Core/BillingBlock.tpl
+ 173
− 115
View file @ 3f243e73
{*
+--------------------------------------------------------------------+
| CiviCRM version 4.2 |
| CiviCRM version 4.3 |
+--------------------------------------------------------------------+
| Copyright CiviCRM LLC (c) 2004-2012 |
| Copyright CiviCRM LLC (c) 2004-2013 |
+--------------------------------------------------------------------+
| This file is a part of CiviCRM. |
| |
......@@ -24,7 +24,15 @@
+--------------------------------------------------------------------+
*}
{crmRegion name="billing-block"}
{* Add 'required' marker to billing fields in this template for front-end / online contribution and event registration forms only. *}
{if $context EQ 'front-end'}
{assign var=reqMark value=' <span class="crm-marker" title="This field is required.">*</span>'}
{else}
{assign var=reqMark value=''}
{/if}
{if $form.credit_card_number or $form.bank_account_number}
<!-- START Stripe -->
{if $paymentProcessor.payment_processor_type == 'Stripe'}
<script type="text/javascript">
......@@ -82,6 +90,7 @@
// Response from Stripe.createToken.
function stripeResponseHandler(status, response) {
if (response.error) {
cj('html, body').animate({ scrollTop: 0 }, 300);
// Show the errors on the form.
if (cj(".messages.crm-error.stripe-message").length > 0) {
cj(".messages.crm-error.stripe-message").slideUp();
......@@ -120,129 +129,117 @@
</legend>
{if $paymentProcessor.billing_mode & 2 and !$hidePayPalExpress }
<div class="crm-section no-label paypal_button_info-section">
<div class="content description">
<div class="content description">
{ts}If you have a PayPal account, you can click the PayPal button to continue. Otherwise, fill in the credit card and billing information on this form and click <strong>Continue</strong> at the bottom of the page.{/ts}
</div>
</div>
<div class="crm-section no-label {$form.$expressButtonName.name}-section">
<div class="content description">
{$form.$expressButtonName.html}
<div class="description">Save time. Checkout securely. Pay without sharing your financial information. </div>
</div>
</div>
</div>
</div>
<div class="crm-section no-label {$form.$expressButtonName.name}-section">
<div class="content description">
{$form.$expressButtonName.html}
<div class="description">Save time. Checkout securely. Pay without sharing your financial information. </div>
</div>
</div>
{/if}
{if $paymentProcessor.billing_mode & 1}
<div class="crm-section billing_mode-section {if $paymentProcessor.payment_type & 2}direct_debit_info-section{else}credit_card_info-section{/if}">
{if $paymentProcessor.payment_type & 2}
{if $paymentProcessor.payment_type & 2}
<div class="crm-section {$form.account_holder.name}-section">
<div class="label">{$form.account_holder.label}</div>
<div class="label">{$form.account_holder.label}</div>
<div class="content">{$form.account_holder.html}</div>
<div class="clear"></div>
</div>
<div class="crm-section {$form.bank_account_number.name}-section">
<div class="label">{$form.bank_account_number.label}</div>
<div class="label">{$form.bank_account_number.label}</div>
<div class="content">{$form.bank_account_number.html}</div>
<div class="clear"></div>
</div>
<div class="crm-section {$form.bank_identification_number.name}-section">
<div class="label">{$form.bank_identification_number.label}</div>
<div class="label">{$form.bank_identification_number.label}</div>
<div class="content">{$form.bank_identification_number.html}</div>
<div class="clear"></div>
</div>
<div class="crm-section {$form.bank_name.name}-section">
<div class="label">{$form.bank_name.label}</div>
<div class="label">{$form.bank_name.label}</div>
<div class="content">{$form.bank_name.html}</div>
<div class="clear"></div>
</div>
{else}
<div class="crm-section {$form.credit_card_type.name}-section">
<div class="label">{$form.credit_card_type.label}</div>
<div class="content">{$form.credit_card_type.html}</div>
<div class="clear"></div>
</div>
<div class="crm-section {$form.credit_card_number.name}-section">
<div class="label">{$form.credit_card_number.label}</div>
<div class="content">{$form.credit_card_number.html}
<div class="description">{ts}Enter numbers only, no spaces or dashes.{/ts}</div>
</div>
<div class="clear"></div>
</div>
<div class="crm-section {$form.cvv2.name}-section">
<div class="label">{$form.cvv2.label}</div>
<div class="content">
{$form.cvv2.html}
<img src="{$config->resourceBase}i/mini_cvv2.gif" alt="{ts}Security Code Location on Credit Card{/ts}" style="vertical-align: text-bottom;" />
<div class="description">{ts}Usually the last 3-4 digits in the signature area on the back of the card.{/ts}</div>
</div>
<div class="clear"></div>
</div>
<div class="crm-section {$form.credit_card_exp_date.name}-section">
<div class="label">{$form.credit_card_exp_date.label}</div>
<div class="content">{$form.credit_card_exp_date.html}</div>
<div class="clear"></div>
</div>
{else}
<div class="crm-section {$form.credit_card_type.name}-section">
<div class="label">{$form.credit_card_type.label} {$reqMark}</div>
<div class="content">{$form.credit_card_type.html}</div>
<div class="clear"></div>
</div>
<div class="crm-section {$form.credit_card_number.name}-section">
<div class="label">{$form.credit_card_number.label} {$reqMark}</div>
<div class="content">{$form.credit_card_number.html|crmAddClass:creditcard}</div>
<div class="clear"></div>
</div>
<div class="crm-section {$form.cvv2.name}-section">
<div class="label">{$form.cvv2.label} {$reqMark}</div>
<div class="content">
{$form.cvv2.html}
<img src="{$config->resourceBase}i/mini_cvv2.gif" alt="{ts}Usually the last 3-4 digits in the signature area on the back of the card.{/ts}" title="{ts}Usually the last 3-4 digits in the signature area on the back of the card.{/ts}" style="vertical-align: text-bottom;" />
</div>
<div class="clear"></div>
</div>
<div class="crm-section {$form.credit_card_exp_date.name}-section">
<div class="label">{$form.credit_card_exp_date.label} {$reqMark}</div>
<div class="content">{$form.credit_card_exp_date.html}</div>
<div class="clear"></div>
</div>
{/if}
</div>
</fieldset>
{if $profileAddressFields}
<input type="checkbox" id="billingcheckbox" value="0"> <label for="billingcheckbox">{ts}My billing address is the same as above{/ts}</label>
{/if}
<fieldset class="billing_name_address-group">
<legend>{ts}Billing Name and Address{/ts}</legend>
{if $profileAddressFields}
<input type="checkbox" id="billingcheckbox" value=0> <label for="billingcheckbox">{ts}Billing Address is same as above{/ts}</label>
{/if}
<div class="crm-section billing_name_address-section">
<div class="crm-section billingNameInfo-section">
<div class="content description">
{if $paymentProcessor.payment_type & 2}
{ts}Enter the name of the account holder, and the corresponding billing address.{/ts}
{else}
{ts}Enter the name as shown on your credit or debit card, and the billing address for this card.{/ts}
{/if}
</div>
</div>
<div class="crm-section {$form.billing_first_name.name}-section">
<div class="label">{$form.billing_first_name.label}</div>
<div class="label">{$form.billing_first_name.label} {$reqMark}</div>
<div class="content">{$form.billing_first_name.html}</div>
<div class="clear"></div>
</div>
<div class="crm-section {$form.billing_middle_name.name}-section">
<div class="label">{$form.billing_middle_name.label}</div>
<div class="label">{$form.billing_middle_name.label}</div>
<div class="content">{$form.billing_middle_name.html}</div>
<div class="clear"></div>
</div>
<div class="crm-section {$form.billing_last_name.name}-section">
<div class="label">{$form.billing_last_name.label}</div>
<div class="label">{$form.billing_last_name.label} {$reqMark}</div>
<div class="content">{$form.billing_last_name.html}</div>
<div class="clear"></div>
</div>
{assign var=n value=billing_street_address-$bltID}
<div class="crm-section {$form.$n.name}-section">
<div class="label">{$form.$n.label}</div>
<div class="label">{$form.$n.label} {$reqMark}</div>
<div class="content">{$form.$n.html}</div>
<div class="clear"></div>
</div>
{assign var=n value=billing_city-$bltID}
<div class="crm-section {$form.$n.name}-section">
<div class="label">{$form.$n.label}</div>
<div class="label">{$form.$n.label} {$reqMark}</div>
<div class="content">{$form.$n.html}</div>
<div class="clear"></div>
</div>
{assign var=n value=billing_country_id-$bltID}
<div class="crm-section {$form.$n.name}-section">
<div class="label">{$form.$n.label}</div>
<div class="content">{$form.$n.html|crmReplace:class:big}</div>
<div class="label">{$form.$n.label} {$reqMark}</div>
<div class="content">{$form.$n.html|crmAddClass:big}</div>
<div class="clear"></div>
</div>
{assign var=n value=billing_state_province_id-$bltID}
<div class="crm-section {$form.$n.name}-section">
<div class="label">{$form.$n.label}</div>
<div class="content">{$form.$n.html|crmReplace:class:big}</div>
<div class="label">{$form.$n.label} {$reqMark}</div>
<div class="content">{$form.$n.html|crmAddClass:big}</div>
<div class="clear"></div>
</div>
{assign var=n value=billing_postal_code-$bltID}
<div class="crm-section {$form.$n.name}-section">
<div class="label">{$form.$n.label}</div>
<div class="label">{$form.$n.label} {$reqMark}</div>
<div class="content">{$form.$n.html}</div>
<div class="clear"></div>
</div>
......@@ -253,67 +250,128 @@
{/if}
</div>
{if $profileAddressFields}
<script type="text/javascript">
{literal}
{if $profileAddressFields}
<script type="text/javascript">
{literal}
cj( function( ) {
cj('#billingcheckbox').click( function( ) {
sameAddress( this.checked ); // need to only action when check not when toggled, can't assume desired behaviour
// build list of ids to track changes on
var address_fields = {/literal}{$profileAddressFields|@json_encode}{literal};
var input_ids = {};
var select_ids = {};
var orig_id = field = field_name = null;
// build input ids
cj('.billing_name_address-section input').each(function(i){
orig_id = cj(this).attr('id');
field = orig_id.split('-');
field_name = field[0].replace('billing_', '');
if(field[1]) {
if(address_fields[field_name]) {
input_ids['#'+field_name+'-'+address_fields[field_name]] = '#'+orig_id;
}
}
});
});
if(cj('#first_name').length)
input_ids['#first_name'] = '#billing_first_name';
if(cj('#middle_name').length)
input_ids['#middle_name'] = '#billing_middle_name';
if(cj('#last_name').length)
input_ids['#last_name'] = '#billing_last_name';
function sameAddress( setValue ) {
{/literal}
var addressFields = {$profileAddressFields|@json_encode};
{literal}
var locationTypeInProfile = 'Primary';
var orgID = field = fieldName = null;
if ( setValue ) {
cj('.billing_name_address-section input').each( function( i ){
orgID = cj(this).attr('id');
field = orgID.split('-');
fieldName = field[0].replace('billing_', '');
if ( field[1] ) { // ie. there is something after the '-' like billing_street_address-5
// this means it is an address field
if ( addressFields[fieldName] ) {
fieldName = fieldName + '-' + addressFields[fieldName];
}
// build select ids
cj('.billing_name_address-section select').each(function(i){
orig_id = cj(this).attr('id');
field = orig_id.split('-');
field_name = field[0].replace('billing_', '').replace('_id', '');
if(field[1]) {
if(address_fields[field_name]) {
select_ids['#'+field_name+'-'+address_fields[field_name]] = '#'+orig_id;
}
cj(this).val( cj('#' + fieldName ).val() );
}
});
// detect if billing checkbox should default to checked
var checked = true;
for(var id in input_ids) {
var orig_id = input_ids[id];
if(cj(id).val() != cj(orig_id).val()) {
checked = false;
break;
}
}
for(var id in select_ids) {
var orig_id = select_ids[id];
if(cj(id).val() != cj(orig_id).val()) {
checked = false;
break;
}
}
if(checked) {
cj('#billingcheckbox').attr('checked', 'checked');
cj('.billing_name_address-group').hide();
}
// onchange handlers for non-billing fields
for(var id in input_ids) {
var orig_id = input_ids[id];
cj(id).change(function(){
var id = '#'+cj(this).attr('id');
var orig_id = input_ids[id];
// if billing checkbox is active, copy other field into billing field
if(cj('#billingcheckbox').attr('checked')) {
cj(orig_id).val( cj(id).val() );
};
});
};
for(var id in select_ids) {
var orig_id = select_ids[id];
cj(id).change(function(){
var id = '#'+cj(this).attr('id');
var orig_id = select_ids[id];
var stateId;
cj('.billing_name_address-section select').each( function( i ){
orgID = cj(this).attr('id');
field = orgID.split('-');
fieldName = field[0].replace('billing_', '');
fieldNameBase = fieldName.replace('_id', '');
if ( field[1] ) {
// this means it is an address field
if ( addressFields[fieldNameBase] ) {
fieldName = fieldNameBase + '-' + addressFields[fieldNameBase];
}
}
// if billing checkbox is active, copy other field into billing field
if(cj('#billingcheckbox').attr('checked')) {
cj(orig_id+' option').removeAttr('selected');
cj(orig_id+' option[value="'+cj(id).val()+'"]').attr('selected', 'selected');
};
// don't set value for state-province, since
// if need reload state depending on country
if ( fieldNameBase == 'state_province' ) {
stateId = cj('#' + fieldName ).val();
}
else {
cj(this).val( cj('#' + fieldName ).val() ).change( );
if(orig_id == '#billing_country_id-5') {
cj(orig_id).change();
}
});
};
// now set the state province
// after ajax call loads all the states
if ( stateId ) {
cj('select[id^="billing_state_province_id"]').ajaxStop(function() {
cj( 'select[id^="billing_state_province_id"]').val( stateId );
});
// toggle show/hide
cj('#billingcheckbox').click(function(){
if(this.checked) {
cj('.billing_name_address-group').hide(200);
// copy all values
for(var id in input_ids) {
var orig_id = input_ids[id];
cj(orig_id).val( cj(id).val() );
};
for(var id in select_ids) {
var orig_id = select_ids[id];
cj(orig_id+' option').removeAttr('selected');
cj(orig_id+' option[value="'+cj(id).val()+'"]').attr('selected', 'selected');
};
} else {
cj('.billing_name_address-group').show(200);
}
}
}
});
// remove spaces, dashes from credit card number
cj('#credit_card_number').change(function(){
var cc = cj('#credit_card_number').val()
.replace(/ /g, '')
.replace(/-/g, '');
cj('#credit_card_number').val(cc);
});
});
{/literal}
</script>
{/if}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment