| 1 | {* |
| 2 | +--------------------------------------------------------------------+ |
| 3 | | CiviCRM version 4.5 | |
| 4 | +--------------------------------------------------------------------+ |
| 5 | | Copyright CiviCRM LLC (c) 2004-2014 | |
| 6 | +--------------------------------------------------------------------+ |
| 7 | | This file is a part of CiviCRM. | |
| 8 | | | |
| 9 | | CiviCRM is free software; you can copy, modify, and distribute it | |
| 10 | | under the terms of the GNU Affero General Public License | |
| 11 | | Version 3, 19 November 2007 and the CiviCRM Licensing Exception. | |
| 12 | | | |
| 13 | | CiviCRM is distributed in the hope that it will be useful, but | |
| 14 | | WITHOUT ANY WARRANTY; without even the implied warranty of | |
| 15 | | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. | |
| 16 | | See the GNU Affero General Public License for more details. | |
| 17 | | | |
| 18 | | You should have received a copy of the GNU Affero General Public | |
| 19 | | License and the CiviCRM Licensing Exception along | |
| 20 | | with this program; if not, contact CiviCRM LLC | |
| 21 | | at info[AT]civicrm[DOT]org. If you have questions about the | |
| 22 | | GNU Affero General Public License or the licensing of CiviCRM, | |
| 23 | | see the CiviCRM license FAQ at http://civicrm.org/licensing | |
| 24 | +--------------------------------------------------------------------+ |
| 25 | *} |
| 26 | {crmRegion name="billing-block"} |
| 27 | {* Add 'required' marker to billing fields in this template for front-end / online contribution and event registration forms only. *} |
| 28 | {if $context EQ 'front-end'} |
| 29 | {assign var=reqMark value=' <span class="crm-marker" title="This field is required.">*</span>'} |
| 30 | {else} |
| 31 | {assign var=reqMark value=''} |
| 32 | {/if} |
| 33 | |
| 34 | {if $form.credit_card_number or $form.bank_account_number} |
| 35 | <div id="payment_information"> |
| 36 | <fieldset class="billing_mode-group {if $paymentProcessor.payment_type & 2}direct_debit_info-group{else}credit_card_info-group{/if}"> |
| 37 | <legend> |
| 38 | {if $paymentProcessor.payment_type & 2} |
| 39 | {ts}Direct Debit Information{/ts} |
| 40 | {else} |
| 41 | {ts}Credit Card Information{/ts} |
| 42 | {/if} |
| 43 | </legend> |
| 44 | {if $paymentProcessor.billing_mode & 2 and !$hidePayPalExpress } |
| 45 | <div class="crm-section no-label paypal_button_info-section"> |
| 46 | <div class="content description"> |
| 47 | {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} |
| 48 | </div> |
| 49 | </div> |
| 50 | <div class="crm-section no-label {$form.$expressButtonName.name}-section"> |
| 51 | <div class="content description"> |
| 52 | {$form.$expressButtonName.html} |
| 53 | <div class="description">Save time. Checkout securely. Pay without sharing your financial information. </div> |
| 54 | </div> |
| 55 | </div> |
| 56 | {/if} |
| 57 | |
| 58 | {if $paymentProcessor.billing_mode & 1} |
| 59 | <div class="crm-section billing_mode-section {if $paymentProcessor.payment_type & 2}direct_debit_info-section{else}credit_card_info-section{/if}"> |
| 60 | {if $paymentProcessor.payment_type & 2} |
| 61 | <div class="crm-section {$form.account_holder.name}-section"> |
| 62 | <div class="label">{$form.account_holder.label}</div> |
| 63 | <div class="content">{$form.account_holder.html}</div> |
| 64 | <div class="clear"></div> |
| 65 | </div> |
| 66 | <div class="crm-section {$form.bank_account_number.name}-section"> |
| 67 | <div class="label">{$form.bank_account_number.label}</div> |
| 68 | <div class="content">{$form.bank_account_number.html}</div> |
| 69 | <div class="clear"></div> |
| 70 | </div> |
| 71 | <div class="crm-section {$form.bank_identification_number.name}-section"> |
| 72 | <div class="label">{$form.bank_identification_number.label}</div> |
| 73 | <div class="content">{$form.bank_identification_number.html}</div> |
| 74 | <div class="clear"></div> |
| 75 | </div> |
| 76 | <div class="crm-section {$form.bank_name.name}-section"> |
| 77 | <div class="label">{$form.bank_name.label}</div> |
| 78 | <div class="content">{$form.bank_name.html}</div> |
| 79 | <div class="clear"></div> |
| 80 | </div> |
| 81 | {else} |
| 82 | <div class="crm-section {$form.credit_card_type.name}-section"> |
| 83 | <div class="label">{$form.credit_card_type.label} {$reqMark}</div> |
| 84 | <div class="content"> |
| 85 | {$form.credit_card_type.html} |
| 86 | <div class="crm-credit_card_type-icons"></div> |
| 87 | </div> |
| 88 | <div class="clear"></div> |
| 89 | </div> |
| 90 | <div class="crm-section {$form.credit_card_number.name}-section"> |
| 91 | <div class="label">{$form.credit_card_number.label} {$reqMark}</div> |
| 92 | <div class="content">{$form.credit_card_number.html|crmAddClass:creditcard}</div> |
| 93 | <div class="clear"></div> |
| 94 | </div> |
| 95 | <div class="crm-section {$form.cvv2.name}-section"> |
| 96 | <div class="label">{$form.cvv2.label} {$reqMark}</div> |
| 97 | <div class="content"> |
| 98 | {$form.cvv2.html} |
| 99 | <span class="cvv2-icon" title="{ts}Usually the last 3-4 digits in the signature area on the back of the card.{/ts}"> </span> |
| 100 | </div> |
| 101 | <div class="clear"></div> |
| 102 | </div> |
| 103 | <div class="crm-section {$form.credit_card_exp_date.name}-section"> |
| 104 | <div class="label">{$form.credit_card_exp_date.label} {$reqMark}</div> |
| 105 | <div class="content">{$form.credit_card_exp_date.html}</div> |
| 106 | <div class="clear"></div> |
| 107 | </div> |
| 108 | {/if} |
| 109 | </div> |
| 110 | </fieldset> |
| 111 | {else} |
| 112 | </fieldset> |
| 113 | {/if} |
| 114 | {/if} |
| 115 | {if $profileAddressFields} |
| 116 | <input type="checkbox" id="billingcheckbox" value="0"> <label for="billingcheckbox">{ts}My billing address is the same as above{/ts}</label> |
| 117 | {/if} |
| 118 | <fieldset class="billing_name_address-group"> |
| 119 | <legend>{ts}Billing Name and Address{/ts}</legend> |
| 120 | <div class="crm-section billing_name_address-section"> |
| 121 | <div class="crm-section {$form.billing_first_name.name}-section"> |
| 122 | <div class="label">{$form.billing_first_name.label} {$reqMark}</div> |
| 123 | <div class="content">{$form.billing_first_name.html}</div> |
| 124 | <div class="clear"></div> |
| 125 | </div> |
| 126 | <div class="crm-section {$form.billing_middle_name.name}-section"> |
| 127 | <div class="label">{$form.billing_middle_name.label}</div> |
| 128 | <div class="content">{$form.billing_middle_name.html}</div> |
| 129 | <div class="clear"></div> |
| 130 | </div> |
| 131 | <div class="crm-section {$form.billing_last_name.name}-section"> |
| 132 | <div class="label">{$form.billing_last_name.label} {$reqMark}</div> |
| 133 | <div class="content">{$form.billing_last_name.html}</div> |
| 134 | <div class="clear"></div> |
| 135 | </div> |
| 136 | {assign var=n value=billing_street_address-$bltID} |
| 137 | <div class="crm-section {$form.$n.name}-section"> |
| 138 | <div class="label">{$form.$n.label} {$reqMark}</div> |
| 139 | <div class="content">{$form.$n.html}</div> |
| 140 | <div class="clear"></div> |
| 141 | </div> |
| 142 | {assign var=n value=billing_city-$bltID} |
| 143 | <div class="crm-section {$form.$n.name}-section"> |
| 144 | <div class="label">{$form.$n.label} {$reqMark}</div> |
| 145 | <div class="content">{$form.$n.html}</div> |
| 146 | <div class="clear"></div> |
| 147 | </div> |
| 148 | {assign var=n value=billing_country_id-$bltID} |
| 149 | <div class="crm-section {$form.$n.name}-section"> |
| 150 | <div class="label">{$form.$n.label} {$reqMark}</div> |
| 151 | <div class="content">{$form.$n.html|crmAddClass:big}</div> |
| 152 | <div class="clear"></div> |
| 153 | </div> |
| 154 | {assign var=n value=billing_state_province_id-$bltID} |
| 155 | <div class="crm-section {$form.$n.name}-section"> |
| 156 | <div class="label">{$form.$n.label} {$reqMark}</div> |
| 157 | <div class="content">{$form.$n.html|crmAddClass:big}</div> |
| 158 | <div class="clear"></div> |
| 159 | </div> |
| 160 | {assign var=n value=billing_postal_code-$bltID} |
| 161 | <div class="crm-section {$form.$n.name}-section"> |
| 162 | <div class="label">{$form.$n.label} {$reqMark}</div> |
| 163 | <div class="content">{$form.$n.html}</div> |
| 164 | <div class="clear"></div> |
| 165 | </div> |
| 166 | </div> |
| 167 | </fieldset> |
| 168 | |
| 169 | </div> |
| 170 | |
| 171 | {if $profileAddressFields} |
| 172 | <script type="text/javascript"> |
| 173 | {literal} |
| 174 | |
| 175 | CRM.$(function($) { |
| 176 | // build list of ids to track changes on |
| 177 | var address_fields = {/literal}{$profileAddressFields|@json_encode}{literal}; |
| 178 | var input_ids = {}; |
| 179 | var select_ids = {}; |
| 180 | var orig_id, field, field_name; |
| 181 | |
| 182 | // build input ids |
| 183 | $('.billing_name_address-section input').each(function(i){ |
| 184 | orig_id = $(this).attr('id'); |
| 185 | field = orig_id.split('-'); |
| 186 | field_name = field[0].replace('billing_', ''); |
| 187 | if(field[1]) { |
| 188 | if(address_fields[field_name]) { |
| 189 | input_ids['#'+field_name+'-'+address_fields[field_name]] = '#'+orig_id; |
| 190 | } |
| 191 | } |
| 192 | }); |
| 193 | if($('#first_name').length) |
| 194 | input_ids['#first_name'] = '#billing_first_name'; |
| 195 | if($('#middle_name').length) |
| 196 | input_ids['#middle_name'] = '#billing_middle_name'; |
| 197 | if($('#last_name').length) |
| 198 | input_ids['#last_name'] = '#billing_last_name'; |
| 199 | |
| 200 | // build select ids |
| 201 | $('.billing_name_address-section select').each(function(i){ |
| 202 | orig_id = $(this).attr('id'); |
| 203 | field = orig_id.split('-'); |
| 204 | field_name = field[0].replace('billing_', '').replace('_id', ''); |
| 205 | if(field[1]) { |
| 206 | if(address_fields[field_name]) { |
| 207 | select_ids['#'+field_name+'-'+address_fields[field_name]] = '#'+orig_id; |
| 208 | } |
| 209 | } |
| 210 | }); |
| 211 | |
| 212 | // detect if billing checkbox should default to checked |
| 213 | var checked = true; |
| 214 | for(var id in input_ids) { |
| 215 | orig_id = input_ids[id]; |
| 216 | if($(id).val() != $(orig_id).val()) { |
| 217 | checked = false; |
| 218 | break; |
| 219 | } |
| 220 | } |
| 221 | for(var id in select_ids) { |
| 222 | orig_id = select_ids[id]; |
| 223 | if($(id).val() != $(orig_id).val()) { |
| 224 | checked = false; |
| 225 | break; |
| 226 | } |
| 227 | } |
| 228 | if(checked) { |
| 229 | $('#billingcheckbox').prop('checked', true); |
| 230 | if (CRM.billing.billingProfileIsHideable) { |
| 231 | $('.billing_name_address-group').hide(); |
| 232 | } |
| 233 | } |
| 234 | |
| 235 | // onchange handlers for non-billing fields |
| 236 | for(var id in input_ids) { |
| 237 | orig_id = input_ids[id]; |
| 238 | $(id).change(function(){ |
| 239 | var id = '#'+$(this).attr('id'); |
| 240 | var orig_id = input_ids[id]; |
| 241 | |
| 242 | // if billing checkbox is active, copy other field into billing field |
| 243 | if($('#billingcheckbox').prop('checked')) { |
| 244 | $(orig_id).val( $(id).val() ); |
| 245 | } |
| 246 | }); |
| 247 | } |
| 248 | for(var id in select_ids) { |
| 249 | orig_id = select_ids[id]; |
| 250 | $(id).change(function(){ |
| 251 | var id = '#'+$(this).attr('id'); |
| 252 | var orig_id = select_ids[id]; |
| 253 | |
| 254 | // if billing checkbox is active, copy other field into billing field |
| 255 | if($('#billingcheckbox').prop('checked')) { |
| 256 | $(orig_id+' option').prop('selected', false); |
| 257 | $(orig_id+' option[value="'+$(id).val()+'"]').prop('selected', true); |
| 258 | } |
| 259 | |
| 260 | if(orig_id == '#billing_country_id-5') { |
| 261 | $(orig_id).change(); |
| 262 | } |
| 263 | }); |
| 264 | } |
| 265 | |
| 266 | |
| 267 | // toggle show/hide |
| 268 | $('#billingcheckbox').click(function(){ |
| 269 | if(this.checked) { |
| 270 | if (CRM.billing.billingProfileIsHideable) { |
| 271 | $('.billing_name_address-group').hide(200); |
| 272 | } |
| 273 | |
| 274 | // copy all values |
| 275 | for(var id in input_ids) { |
| 276 | orig_id = input_ids[id]; |
| 277 | $(orig_id).val( $(id).val() ); |
| 278 | } |
| 279 | for(var id in select_ids) { |
| 280 | orig_id = select_ids[id]; |
| 281 | $(orig_id+' option').prop('selected', false); |
| 282 | $(orig_id+' option[value="'+$(id).val()+'"]').prop('selected', true); |
| 283 | } |
| 284 | } else { |
| 285 | $('.billing_name_address-group').show(200); |
| 286 | } |
| 287 | }); |
| 288 | |
| 289 | // remove spaces, dashes from credit card number |
| 290 | $('#credit_card_number').change(function(){ |
| 291 | var cc = $('#credit_card_number').val() |
| 292 | .replace(/ /g, '') |
| 293 | .replace(/-/g, ''); |
| 294 | $('#credit_card_number').val(cc); |
| 295 | }); |
| 296 | }); |
| 297 | {/literal} |
| 298 | </script> |
| 299 | {/if} |
| 300 | |
| 301 | {/crmRegion} |