templates/CRM/Core/BillingBlock.tpl

   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}