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
  48               <strong>Continue</strong>
  49               at the bottom of the page.{/ts}
  50           </div>
  51         </div>
  52         <div class="crm-section no-label {$form.$expressButtonName.name}-section">
  53           <div class="content description">
  54             {$form.$expressButtonName.html}
  55             <div class="description">Save time. Checkout securely. Pay without sharing your financial information.</div>
  56           </div>
  57         </div>
  58       {/if}
  59
  60       {if $paymentProcessor.billing_mode & 1}
  61       <div class="crm-section billing_mode-section {if $paymentProcessor.payment_type & 2}direct_debit_info-section{else}credit_card_info-section{/if}">
  62         {if $paymentProcessor.payment_type & 2}
  63           <div class="crm-section {$form.account_holder.name}-section">
  64             <div class="label">{$form.account_holder.label}</div>
  65             <div class="content">{$form.account_holder.html}</div>
  66             <div class="clear"></div>
  67           </div>
  68           <div class="crm-section {$form.bank_account_number.name}-section">
  69             <div class="label">{$form.bank_account_number.label}</div>
  70             <div class="content">{$form.bank_account_number.html}</div>
  71             <div class="clear"></div>
  72           </div>
  73           <div class="crm-section {$form.bank_identification_number.name}-section">
  74             <div class="label">{$form.bank_identification_number.label}</div>
  75             <div class="content">{$form.bank_identification_number.html}</div>
  76             <div class="clear"></div>
  77           </div>
  78           <div class="crm-section {$form.bank_name.name}-section">
  79             <div class="label">{$form.bank_name.label}</div>
  80             <div class="content">{$form.bank_name.html}</div>
  81             <div class="clear"></div>
  82           </div>
  83         {else}
  84           <div class="crm-section {$form.credit_card_type.name}-section">
  85             <div class="label">{$form.credit_card_type.label} {$reqMark}</div>
  86             <div class="content">
  87               {$form.credit_card_type.html}
  88               <div class="crm-credit_card_type-icons"></div>
  89             </div>
  90             <div class="clear"></div>
  91           </div>
  92           <div class="crm-section {$form.credit_card_number.name}-section">
  93             <div class="label">{$form.credit_card_number.label} {$reqMark}</div>
  94             <div class="content">{$form.credit_card_number.html|crmAddClass:creditcard}</div>
  95             <div class="clear"></div>
  96           </div>
  97           <div class="crm-section {$form.cvv2.name}-section">
  98             <div class="label">{$form.cvv2.label} {$reqMark}</div>
  99             <div class="content">
 100               {$form.cvv2.html}
 101               <span class="cvv2-icon"
 102                     title="{ts}Usually the last 3-4 digits in the signature area on the back of the card.{/ts}"> </span>
 103             </div>
 104             <div class="clear"></div>
 105           </div>
 106           <div class="crm-section {$form.credit_card_exp_date.name}-section">
 107             <div class="label">{$form.credit_card_exp_date.label} {$reqMark}</div>
 108             <div class="content">{$form.credit_card_exp_date.html}</div>
 109             <div class="clear"></div>
 110           </div>
 111         {/if}
 112       </div>
 113     </fieldset>
 114     {else}
 115     </fieldset>
 116     {/if}
 117     {/if}
 118     {if $profileAddressFields}
 119       <input type="checkbox" id="billingcheckbox" value="0">
 120       <label for="billingcheckbox">{ts}My billing address is the same as above{/ts}</label>
 121     {/if}
 122     <fieldset class="billing_name_address-group">
 123       <legend>{ts}Billing Name and Address{/ts}</legend>
 124       <div class="crm-section billing_name_address-section">
 125         <div class="crm-section {$form.billing_first_name.name}-section">
 126           <div class="label">{$form.billing_first_name.label} {$reqMark}</div>
 127           <div class="content">{$form.billing_first_name.html}</div>
 128           <div class="clear"></div>
 129         </div>
 130         <div class="crm-section {$form.billing_middle_name.name}-section">
 131           <div class="label">{$form.billing_middle_name.label}</div>
 132           <div class="content">{$form.billing_middle_name.html}</div>
 133           <div class="clear"></div>
 134         </div>
 135         <div class="crm-section {$form.billing_last_name.name}-section">
 136           <div class="label">{$form.billing_last_name.label} {$reqMark}</div>
 137           <div class="content">{$form.billing_last_name.html}</div>
 138           <div class="clear"></div>
 139         </div>
 140         {assign var=n value=billing_street_address-$bltID}
 141         <div class="crm-section {$form.$n.name}-section">
 142           <div class="label">{$form.$n.label} {$reqMark}</div>
 143           <div class="content">{$form.$n.html}</div>
 144           <div class="clear"></div>
 145         </div>
 146         {assign var=n value=billing_city-$bltID}
 147         <div class="crm-section {$form.$n.name}-section">
 148           <div class="label">{$form.$n.label} {$reqMark}</div>
 149           <div class="content">{$form.$n.html}</div>
 150           <div class="clear"></div>
 151         </div>
 152         {assign var=n value=billing_country_id-$bltID}
 153         <div class="crm-section {$form.$n.name}-section">
 154           <div class="label">{$form.$n.label} {$reqMark}</div>
 155           <div class="content">{$form.$n.html|crmAddClass:big}</div>
 156           <div class="clear"></div>
 157         </div>
 158         {assign var=n value=billing_state_province_id-$bltID}
 159         <div class="crm-section {$form.$n.name}-section">
 160           <div class="label">{$form.$n.label} {$reqMark}</div>
 161           <div class="content">{$form.$n.html|crmAddClass:big}</div>
 162           <div class="clear"></div>
 163         </div>
 164         {assign var=n value=billing_postal_code-$bltID}
 165         <div class="crm-section {$form.$n.name}-section">
 166           <div class="label">{$form.$n.label} {$reqMark}</div>
 167           <div class="content">{$form.$n.html}</div>
 168           <div class="clear"></div>
 169         </div>
 170       </div>
 171     </fieldset>
 172
 173   </div>
 174 {if $profileAddressFields}
 175   <script type="text/javascript">
 176     {literal}
 177
 178     CRM.$(function ($) {
 179       // build list of ids to track changes on
 180       var address_fields = {/literal}{$profileAddressFields|@json_encode}{literal};
 181       var input_ids = {};
 182       var select_ids = {};
 183       var orig_id, field, field_name;
 184
 185       // build input ids
 186       $('.billing_name_address-section input').each(function (i) {
 187         orig_id = $(this).attr('id');
 188         field = orig_id.split('-');
 189         field_name = field[0].replace('billing_', '');
 190         if (field[1]) {
 191           if (address_fields[field_name]) {
 192             input_ids['#' + field_name + '-' + address_fields[field_name]] = '#' + orig_id;
 193           }
 194         }
 195       });
 196       if ($('#first_name').length)
 197         input_ids['#first_name'] = '#billing_first_name';
 198       if ($('#middle_name').length)
 199         input_ids['#middle_name'] = '#billing_middle_name';
 200       if ($('#last_name').length)
 201         input_ids['#last_name'] = '#billing_last_name';
 202
 203       // build select ids
 204       $('.billing_name_address-section select').each(function (i) {
 205         orig_id = $(this).attr('id');
 206         field = orig_id.split('-');
 207         field_name = field[0].replace('billing_', '').replace('_id', '');
 208         if (field[1]) {
 209           if (address_fields[field_name]) {
 210             select_ids['#' + field_name + '-' + address_fields[field_name]] = '#' + orig_id;
 211           }
 212         }
 213       });
 214
 215       // detect if billing checkbox should default to checked
 216       var checked = true;
 217       for (var id in input_ids) {
 218         orig_id = input_ids[id];
 219         if ($(id).val() != $(orig_id).val()) {
 220           checked = false;
 221           break;
 222         }
 223       }
 224       for (var id in select_ids) {
 225         orig_id = select_ids[id];
 226         if ($(id).val() != $(orig_id).val()) {
 227           checked = false;
 228           break;
 229         }
 230       }
 231       if (checked) {
 232         $('#billingcheckbox').prop('checked', true);
 233         if (CRM.billing.billingProfileIsHideable) {
 234           $('.billing_name_address-group').hide();
 235         }
 236       }
 237
 238       // onchange handlers for non-billing fields
 239       for (var id in input_ids) {
 240         orig_id = input_ids[id];
 241         $(id).change(function () {
 242           var id = '#' + $(this).attr('id');
 243           var orig_id = input_ids[id];
 244
 245           // if billing checkbox is active, copy other field into billing field
 246           if ($('#billingcheckbox').prop('checked')) {
 247             $(orig_id).val($(id).val());
 248           }
 249         });
 250       }
 251       for (var id in select_ids) {
 252         orig_id = select_ids[id];
 253         $(id).change(function () {
 254           var id = '#' + $(this).attr('id');
 255           var orig_id = select_ids[id];
 256
 257           // if billing checkbox is active, copy other field into billing field
 258           if ($('#billingcheckbox').prop('checked')) {
 259             $(orig_id + ' option').prop('selected', false);
 260             $(orig_id + ' option[value="' + $(id).val() + '"]').prop('selected', true);
 261           }
 262
 263           if (orig_id == '#billing_country_id-5') {
 264             $(orig_id).change();
 265           }
 266         });
 267       }
 268
 269
 270       // toggle show/hide
 271       $('#billingcheckbox').click(function () {
 272         if (this.checked) {
 273           if (CRM.billing.billingProfileIsHideable) {
 274             $('.billing_name_address-group').hide(200);
 275           }
 276
 277           // copy all values
 278           for (var id in input_ids) {
 279             orig_id = input_ids[id];
 280             $(orig_id).val($(id).val());
 281           }
 282           for (var id in select_ids) {
 283             orig_id = select_ids[id];
 284             $(orig_id + ' option').prop('selected', false);
 285             $(orig_id + ' option[value="' + $(id).val() + '"]').prop('selected', true);
 286           }
 287         } else {
 288           $('.billing_name_address-group').show(200);
 289         }
 290       });
 291
 292       // remove spaces, dashes from credit card number
 293       $('#credit_card_number').change(function () {
 294         var cc = $('#credit_card_number').val()
 295                 .replace(/ /g, '')
 296                 .replace(/-/g, '');
 297         $('#credit_card_number').val(cc);
 298       });
 299     });
 300     {/literal}
 301   </script>
 302 {/if}
 303
 304 {/crmRegion}