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
 112                 {if $profileAddressFields}
 113                   <input type="checkbox" id="billingcheckbox" value="0"> <label for="billingcheckbox">{ts}My billing address is the same as above{/ts}</label>
 114                 {/if}
 115                 <fieldset class="billing_name_address-group">
 116                   <legend>{ts}Billing Name and Address{/ts}</legend>
 117                     <div class="crm-section billing_name_address-section">
 118                         <div class="crm-section {$form.billing_first_name.name}-section">
 119                             <div class="label">{$form.billing_first_name.label} {$reqMark}</div>
 120                             <div class="content">{$form.billing_first_name.html}</div>
 121                             <div class="clear"></div>
 122                         </div>
 123                         <div class="crm-section {$form.billing_middle_name.name}-section">
 124                             <div class="label">{$form.billing_middle_name.label}</div>
 125                             <div class="content">{$form.billing_middle_name.html}</div>
 126                             <div class="clear"></div>
 127                         </div>
 128                         <div class="crm-section {$form.billing_last_name.name}-section">
 129                             <div class="label">{$form.billing_last_name.label} {$reqMark}</div>
 130                             <div class="content">{$form.billing_last_name.html}</div>
 131                             <div class="clear"></div>
 132                         </div>
 133                         {assign var=n value=billing_street_address-$bltID}
 134                         <div class="crm-section {$form.$n.name}-section">
 135                             <div class="label">{$form.$n.label} {$reqMark}</div>
 136                             <div class="content">{$form.$n.html}</div>
 137                             <div class="clear"></div>
 138                         </div>
 139                         {assign var=n value=billing_city-$bltID}
 140                         <div class="crm-section {$form.$n.name}-section">
 141                             <div class="label">{$form.$n.label} {$reqMark}</div>
 142                             <div class="content">{$form.$n.html}</div>
 143                             <div class="clear"></div>
 144                         </div>
 145                         {assign var=n value=billing_country_id-$bltID}
 146                         <div class="crm-section {$form.$n.name}-section">
 147                             <div class="label">{$form.$n.label} {$reqMark}</div>
 148                             <div class="content">{$form.$n.html|crmAddClass:big}</div>
 149                             <div class="clear"></div>
 150                         </div>
 151                         {assign var=n value=billing_state_province_id-$bltID}
 152                         <div class="crm-section {$form.$n.name}-section">
 153                             <div class="label">{$form.$n.label} {$reqMark}</div>
 154                             <div class="content">{$form.$n.html|crmAddClass:big}</div>
 155                             <div class="clear"></div>
 156                         </div>
 157                         {assign var=n value=billing_postal_code-$bltID}
 158                         <div class="crm-section {$form.$n.name}-section">
 159                             <div class="label">{$form.$n.label} {$reqMark}</div>
 160                             <div class="content">{$form.$n.html}</div>
 161                             <div class="clear"></div>
 162                         </div>
 163                     </div>
 164                 </fieldset>
 165             {else}
 166                 </fieldset>
 167             {/if}
 168     </div>
 169
 170      {if $profileAddressFields}
 171      <script type="text/javascript">
 172      {literal}
 173
 174 CRM.$(function($) {
 175   // build list of ids to track changes on
 176   var address_fields = {/literal}{$profileAddressFields|@json_encode}{literal};
 177   var input_ids = {};
 178   var select_ids = {};
 179   var orig_id = field = field_name = null;
 180
 181   // build input ids
 182   cj('.billing_name_address-section input').each(function(i){
 183     orig_id = cj(this).attr('id');
 184     field = orig_id.split('-');
 185     field_name = field[0].replace('billing_', '');
 186     if(field[1]) {
 187       if(address_fields[field_name]) {
 188         input_ids['#'+field_name+'-'+address_fields[field_name]] = '#'+orig_id;
 189       }
 190     }
 191   });
 192   if(cj('#first_name').length)
 193     input_ids['#first_name'] = '#billing_first_name';
 194   if(cj('#middle_name').length)
 195     input_ids['#middle_name'] = '#billing_middle_name';
 196   if(cj('#last_name').length)
 197     input_ids['#last_name'] = '#billing_last_name';
 198
 199   // build select ids
 200   cj('.billing_name_address-section select').each(function(i){
 201     orig_id = cj(this).attr('id');
 202     field = orig_id.split('-');
 203     field_name = field[0].replace('billing_', '').replace('_id', '');
 204     if(field[1]) {
 205       if(address_fields[field_name]) {
 206         select_ids['#'+field_name+'-'+address_fields[field_name]] = '#'+orig_id;
 207       }
 208     }
 209   });
 210
 211   // detect if billing checkbox should default to checked
 212   var checked = true;
 213   for(var id in input_ids) {
 214     var orig_id = input_ids[id];
 215     if(cj(id).val() != cj(orig_id).val()) {
 216       checked = false;
 217       break;
 218     }
 219   }
 220   for(var id in select_ids) {
 221     var orig_id = select_ids[id];
 222     if(cj(id).val() != cj(orig_id).val()) {
 223       checked = false;
 224       break;
 225     }
 226   }
 227   if(checked) {
 228     cj('#billingcheckbox').prop('checked', true);
 229     cj('.billing_name_address-group').hide();
 230   }
 231
 232   // onchange handlers for non-billing fields
 233   for(var id in input_ids) {
 234     var orig_id = input_ids[id];
 235     cj(id).change(function(){
 236       var id = '#'+cj(this).attr('id');
 237       var orig_id = input_ids[id];
 238
 239       // if billing checkbox is active, copy other field into billing field
 240       if(cj('#billingcheckbox').prop('checked')) {
 241         cj(orig_id).val( cj(id).val() );
 242       };
 243     });
 244   };
 245   for(var id in select_ids) {
 246     var orig_id = select_ids[id];
 247     cj(id).change(function(){
 248       var id = '#'+cj(this).attr('id');
 249       var orig_id = select_ids[id];
 250
 251       // if billing checkbox is active, copy other field into billing field
 252       if(cj('#billingcheckbox').prop('checked')) {
 253         cj(orig_id+' option').prop('selected', false);
 254         cj(orig_id+' option[value="'+cj(id).val()+'"]').prop('selected', true);
 255       };
 256
 257       if(orig_id == '#billing_country_id-5') {
 258         cj(orig_id).change();
 259       }
 260     });
 261   };
 262
 263
 264   // toggle show/hide
 265   cj('#billingcheckbox').click(function(){
 266     if(this.checked) {
 267       cj('.billing_name_address-group').hide(200);
 268
 269       // copy all values
 270       for(var id in input_ids) {
 271         var orig_id = input_ids[id];
 272         cj(orig_id).val( cj(id).val() );
 273       };
 274       for(var id in select_ids) {
 275         var orig_id = select_ids[id];
 276         cj(orig_id+' option').prop('selected', false);
 277         cj(orig_id+' option[value="'+cj(id).val()+'"]').prop('selected', true);
 278       };
 279     } else {
 280       cj('.billing_name_address-group').show(200);
 281     }
 282   });
 283
 284   // remove spaces, dashes from credit card number
 285   cj('#credit_card_number').change(function(){
 286     var cc = cj('#credit_card_number').val()
 287       .replace(/ /g, '')
 288       .replace(/-/g, '');
 289     cj('#credit_card_number').val(cc);
 290   });
 291 });
 292 {/literal}
 293 </script>
 294 {/if}
 295 {/if}
 296 {/crmRegion}