templates/CRM/Core/BillingBlock.tpl

   1 {*
   2  +--------------------------------------------------------------------+
   3  | Copyright CiviCRM LLC. All rights reserved.                        |
   4  |                                                                    |
   5  | This work is published under the GNU AGPLv3 license with some      |
   6  | permitted exceptions and without any warranty. For full license    |
   7  | and copyright information, see https://civicrm.org/licensing       |
   8  +--------------------------------------------------------------------+
   9 *}
  10 {crmRegion name="billing-block"}
  11 <div id="payment_information">
  12   {if $paymentFields|@count}
  13     <fieldset class="billing_mode-group {$paymentTypeName}_info-group">
  14       <legend>
  15         {$paymentTypeLabel}
  16       </legend>
  17       {crmRegion name="billing-block-pre"}
  18       {/crmRegion}
  19       <div class="crm-section billing_mode-section {$paymentTypeName}_info-section">
  20         {foreach from=$paymentFields item=paymentField}
  21           {assign var='name' value=$form.$paymentField.name}
  22           <div class="crm-section {$form.$paymentField.name}-section">
  23             <div class="label">{$form.$paymentField.label}
  24               {if $requiredPaymentFields.$name}<span class="crm-marker" title="{ts}This field is required.{/ts}">*</span>{/if}
  25             </div>
  26             <div class="content">
  27                 {$form.$paymentField.html}
  28               {if $paymentFieldsMetadata.$name.description}
  29                 <div class="description">{$paymentFieldsMetadata.$name.description}</div>
  30               {elseif $paymentField == 'cvv2'}{* @todo move to form assignment*}
  31                 <span class="cvv2-icon" title="{ts}Usually the last 3-4 digits in the signature area on the back of the card.{/ts}"> </span>
  32               {/if}
  33               {if $paymentField == 'credit_card_type'}
  34                 <div class="crm-credit_card_type-icons"></div>
  35               {/if}
  36             </div>
  37             <div class="clear"></div>
  38           </div>
  39         {/foreach}
  40       </div>
  41     </fieldset>
  42   {/if}
  43   {if $billingDetailsFields|@count && $paymentProcessor.payment_processor_type neq 'PayPal_Express'}
  44     {if $profileAddressFields && !$ccid}
  45       <input type="checkbox" id="billingcheckbox" value="0">
  46       <label for="billingcheckbox">{ts}My billing address is the same as above{/ts}</label>
  47     {/if}
  48     <fieldset class="billing_name_address-group">
  49       <legend>{ts}Billing Name and Address{/ts}</legend>
  50       <div class="crm-section billing_name_address-section">
  51         {foreach from=$billingDetailsFields item=billingField}
  52           {assign var='name' value=$form.$billingField.name}
  53           <div class="crm-section {$form.$billingField.name}-section">
  54             <div class="label">{$form.$billingField.label}
  55               {if $requiredPaymentFields.$name}<span class="crm-marker" title="{ts}This field is required.{/ts}">*</span>{/if}
  56             </div>
  57             {if $form.$billingField.type == 'text'}
  58               <div class="content">{$form.$billingField.html}</div>
  59             {else}
  60               <div class="content">{$form.$billingField.html|crmAddClass:big}</div>
  61             {/if}
  62             <div class="clear"></div>
  63           </div>
  64         {/foreach}
  65       </div>
  66     </fieldset>
  67   {/if}
  68 </div>
  69 {if $profileAddressFields}
  70   <script type="text/javascript">
  71     {literal}
  72
  73     CRM.$(function ($) {
  74       // build list of ids to track changes on
  75       var address_fields = {/literal}{$profileAddressFields|@json_encode}{literal};
  76       var input_ids = {};
  77       var select_ids = {};
  78       var orig_id, field, field_name;
  79
  80       // build input ids
  81       $('.billing_name_address-section input').each(function (i) {
  82         orig_id = $(this).attr('id');
  83         field = orig_id.split('-');
  84         field_name = field[0].replace('billing_', '');
  85         if (field[1]) {
  86           if (address_fields[field_name]) {
  87             input_ids['#' + field_name + '-' + address_fields[field_name]] = '#' + orig_id;
  88           }
  89         }
  90       });
  91       if ($('#first_name').length)
  92         input_ids['#first_name'] = '#billing_first_name';
  93       if ($('#middle_name').length)
  94         input_ids['#middle_name'] = '#billing_middle_name';
  95       if ($('#last_name').length)
  96         input_ids['#last_name'] = '#billing_last_name';
  97
  98       // build select ids
  99       $('.billing_name_address-section select').each(function (i) {
 100         orig_id = $(this).attr('id');
 101         field = orig_id.split('-');
 102         field_name = field[0].replace('billing_', '').replace('_id', '');
 103         if (field[1]) {
 104           if (address_fields[field_name]) {
 105             select_ids['#' + field_name + '-' + address_fields[field_name]] = '#' + orig_id;
 106           }
 107         }
 108       });
 109
 110       // detect if billing checkbox should default to checked
 111       var checked = true;
 112       for (var id in input_ids) {
 113         orig_id = input_ids[id];
 114         if ($(id).val() != $(orig_id).val()) {
 115           checked = false;
 116           break;
 117         }
 118       }
 119       for (var id in select_ids) {
 120         orig_id = select_ids[id];
 121         if ($(id).val() != $(orig_id).val()) {
 122           checked = false;
 123           break;
 124         }
 125       }
 126       if (checked) {
 127         $('#billingcheckbox').prop('checked', true).data('crm-initial-value', true);
 128         if (!CRM.billing || CRM.billing.billingProfileIsHideable) {
 129           $('.billing_name_address-group').hide();
 130         }
 131       }
 132
 133       // onchange handlers for non-billing fields
 134       for (var id in input_ids) {
 135         orig_id = input_ids[id];
 136         $(id).change(function () {
 137           var id = '#' + $(this).attr('id');
 138           var orig_id = input_ids[id];
 139
 140           // if billing checkbox is active, copy other field into billing field
 141           if ($('#billingcheckbox').prop('checked')) {
 142             $(orig_id).val($(id).val());
 143           }
 144         });
 145       }
 146       for (var id in select_ids) {
 147         orig_id = select_ids[id];
 148         $(id).change(function () {
 149           var id = '#' + $(this).attr('id');
 150           var orig_id = select_ids[id];
 151
 152           // if billing checkbox is active, copy other field into billing field
 153           if ($('#billingcheckbox').prop('checked')) {
 154             $(orig_id + ' option').prop('selected', false);
 155             $(orig_id + ' option[value="' + $(id).val() + '"]').prop('selected', true);
 156             $(orig_id).change();
 157           }
 158         });
 159       }
 160
 161       // toggle show/hide
 162       var billingCheckboxElement = $('#billingcheckbox');
 163       billingCheckboxElement.click(function() {
 164         billingCheckboxChanged(billingCheckboxElement);
 165       });
 166
 167       billingCheckboxElement.change(function() {
 168         billingCheckboxChanged(billingCheckboxElement);
 169       });
 170
 171       function billingCheckboxChanged(billingCheckbox) {
 172         if (billingCheckbox.prop('checked')) {
 173           if (!CRM.billing || CRM.billing.billingProfileIsHideable) {
 174             $('.billing_name_address-group').hide(200);
 175           }
 176
 177           // copy all values
 178           for (var id in input_ids) {
 179             orig_id = input_ids[id];
 180             $(orig_id).val($(id).val());
 181           }
 182           for (var id in select_ids) {
 183             orig_id = select_ids[id];
 184             $(orig_id + ' option').prop('selected', false);
 185             $(orig_id + ' option[value="' + $(id).val() + '"]').prop('selected', true);
 186             $(orig_id).change();
 187           }
 188         } else {
 189           $('.billing_name_address-group').show(200);
 190         }
 191       }
 192
 193       // remove spaces, dashes from credit card number
 194       $('#credit_card_number').change(function () {
 195         var cc = $('#credit_card_number').val()
 196                 .replace(/ /g, '')
 197                 .replace(/-/g, '');
 198         $('#credit_card_number').val(cc);
 199       });
 200     });
 201
 202   </script>
 203   {/literal}
 204 {/if}
 205 {if $suppressSubmitButton}
 206 {literal}
 207   <script type="text/javascript">
 208     CRM.$(function($) {
 209       $('.crm-submit-buttons', $('#billing-payment-block').closest('form')).hide();
 210     });
 211   </script>
 212 {/literal}
 213 {/if}
 214 {/crmRegion}
 215 {crmRegion name="billing-block-post"}
 216   {* Payment processors sometimes need to append something to the end of the billing block. We create a region for
 217      clarity  - the plan is to move to assigning this through the payment processor to this region *}
 218 {/crmRegion}