refactor payment gateway forms in frontend+backend

Fixes spree#2418

core/app/assets/javascripts/admin/payments/new.js

@@ -1,9 +1,16 @@
 $(document).ready(function(){
-  
+
   $("#card_new").radioControlsVisibilityOfElement('#card_form');
-  
+
   $('select.jump_menu').change(function(){
     window.location = this.options[this.selectedIndex].value;
   });
 
+  $('#cvv_link').click(function(event){
+    window_name = 'cvv_info';
+    window_options = 'left=20,top=20,width=500,height=500,toolbar=0,resizable=0,scrollbars=1';
+    window.open($(this).attr('href'), window_name, window_options);
+    event.preventDefault();
+  });
+
 });

core/app/assets/javascripts/store/checkout.js.coffee

@@ -74,6 +74,13 @@ $ ->
       ($ '#payment_method_' + @value).show() if @checked
     )
 
+    ($ '#cvv_link').live('click', (event) ->
+      window_name = 'cvv_info'
+      window_options = 'left=20,top=20,width=500,height=500,toolbar=0,resizable=0,scrollbars=1'
+      window.open(($ this).attr('href'), window_name, window_options)
+      event.preventDefault()
+    )
+
     # Activate already checked payment method if form is re-rendered
     # i.e. if user enters invalid data
     ($ 'input[type="radio"]:checked').click()

core/app/views/spree/admin/payments/source_forms/_gateway.html.erb

@@ -9,16 +9,16 @@
     <div class="nine columns">
       <%= image_tag 'credit_cards/credit_card.gif', :id => 'credit-card-image' %>
     </div>
-    
+
     <% param_prefix = "payment_source[#{payment_method.id}]" %>
 
     <div class="clear"></div>
 
     <div class="alpha four columns">
       <div data-hook="card_number">
         <div class="field">
-          <%= label_tag nil, raw(t(:card_number) + content_tag(:span, ' *', :class => 'required')) %>
-          <%= text_field_tag "#{param_prefix}[number]", '', :class => 'required fullwidth', :maxlength => 19 %>
+          <%= label_tag 'card_number', raw(t(:card_number) + content_tag(:span, ' *', :class => 'required')) %>
+          <%= text_field_tag "#{param_prefix}[number]", '', :class => 'required fullwidth', :id => 'card_number', :maxlength => 19 %>
           <span id="card_type" style="display:none;">
             ( <span id="looks_like" ><%= t(:card_type_is) %> <span id="type"></span></span>
               <span id="unrecognized"><%= t(:unrecognized_card_type) %></span>
@@ -29,17 +29,17 @@
     </div>
     <div class="three columns">
       <div data-hook="card_expiration" class="field">
-        <%= label_tag nil, raw(t(:expiration) + content_tag(:span, ' *', :class => 'required')) %><br>
-        <%= select_month(Date.today, :prefix => param_prefix, :field_name => 'month', :use_month_numbers => true, :class => 'required select2') %>
-        <%= select_year(Date.today, :prefix => param_prefix, :field_name => 'year', :start_year => Date.today.year, :end_year => Date.today.year + 15, :class => 'required select2') %>
+        <%= label_tag 'card_month', raw(t(:expiration) + content_tag(:span, ' *', :class => 'required')) %><br>
+        <%= select_month(Date.today, { :prefix => param_prefix, :field_name => 'month', :use_month_numbers => true }, :class => 'required select2', :id => 'card_month') %>
+        <%= select_year(Date.today, { :prefix => param_prefix, :field_name => 'year', :start_year => Date.today.year, :end_year => Date.today.year + 15 }, :class => 'required select2', :id => 'card_year') %>
       </div>
     </div>
     <div class="omega two columns">
       <div data-hook="card_code" class="field">
-        <%= label_tag nil, raw(t(:card_code) + content_tag(:span, ' *', :class => "required")) %>
-        <%= text_field_tag "#{param_prefix}[verification_value]", '', :class => 'required fullwidth', :size => 5 %>
-        <a href="/content/cvv" class="info" target="_blank" onclick="window.open(this.href,'cvv_info','left=20,top=20,width=500,height=500,toolbar=0,resizable=0,scrollbars=1');return false">
-          (<%= t(:whats_this) %>)
+        <%= label_tag 'card_code', raw(t(:card_code) + content_tag(:span, ' *', :class => "required")) %>
+        <%= text_field_tag "#{param_prefix}[verification_value]", '', :class => 'required fullwidth', :size => 5, :id => 'card_code' %>
+        <a href="/content/cvv" class="info" target="_blank" id="cvv_link">
+          (<%= t(:whats_is_this) %>)
         </a>
       </div>
     </div>

core/app/views/spree/checkout/payment/_gateway.html.erb

@@ -2,7 +2,7 @@
 <% param_prefix = "payment_source[#{payment_method.id}]" %>
 
 <p class="field" data-hook="card_number">
-  <%= label_tag nil, t(:card_number) %><span class="required">*</span><br />
+  <%= label_tag "card_number", t(:card_number) %><span class="required">*</span><br />
   <% options_hash = Rails.env.production? ? {:autocomplete => 'off'} : {} %>
   <%= text_field_tag "#{param_prefix}[number]", '', options_hash.merge(:id => 'card_number', :class => 'required', :size => 19, :maxlength => 19, :autocomplete => "off") %>
   &nbsp;
@@ -13,14 +13,14 @@
   </span>
 </p>
 <p class="field" data-hook="card_expiration">
-  <%= label_tag nil, t(:expiration) %><span class="required">*</span><br />
-  <%= select_month(Date.today, { :prefix => param_prefix, :field_name => 'month', :use_month_numbers => true }, :class => 'required') %>
-  <%= select_year(Date.today, { :prefix => param_prefix, :field_name => 'year', :start_year => Date.today.year, :end_year => Date.today.year + 15 }, :class => 'required') %>
+  <%= label_tag "card_month", t(:expiration) %><span class="required">*</span><br />
+  <%= select_month(Date.today, { :prefix => param_prefix, :field_name => 'month', :use_month_numbers => true }, :class => 'required', :id => "card_month") %>
+  <%= select_year(Date.today, { :prefix => param_prefix, :field_name => 'year', :start_year => Date.today.year, :end_year => Date.today.year + 15 }, :class => 'required', :id => "card_year") %>
 </p>
 <p class="field" data-hook="card_code">
-  <%= label_tag nil, t(:card_code) %><span class="required">*</span><br />
+  <%= label_tag "card_code", t(:card_code) %><span class="required">*</span><br />
   <%= text_field_tag "#{param_prefix}[verification_value]", '', options_hash.merge(:id => 'card_code', :class => 'required', :size => 5) %>
-  <%= link_to "(#{t(:whats_this)})", spree.content_path('cvv'), :target => '_blank', :onclick => "window.open(this.href,'cvv_info','left=20,top=20,width=500,height=500,toolbar=0,resizable=0,scrollbars=1');return false", "data-hook" => "cvv_link" %>
+  <%= link_to "(#{t(:what_is_this)})", spree.content_path('cvv'), :target => '_blank', "data-hook" => "cvv_link", :id => "cvv_link" %>
 </p>
 <%= hidden_field param_prefix, 'first_name', :value => @order.billing_firstname %>
 <%= hidden_field param_prefix, 'last_name', :value => @order.billing_lastname %>

core/config/locales/en.yml

@@ -1139,7 +1139,6 @@ en:
   welcome_to_sample_store: "Welcome to the sample store"
   what_is_a_cvv: "What is a (CVV) Credit Card Code?"
   what_is_this: "What's This?"
-  whats_this: "What's this"
   width: Width
   year: Year
   you_have_been_logged_out: "You have been logged out."