Improve coupon code JS applicator

CHANGELOG.md

@@ -136,6 +136,11 @@
     * Partials are rendered on pages owned by the partials as tabs as a top bar
     * Admin-nav has a sub-menu for the settings now
 
+*   Coupon code application has been separated from the Continue button on the Payment checkout page
+
+    * JavaScript for it has been moved from address.js into its own `spree/frontend/checkout/coupon-code`
+    * Numerous small nuisances have been fixed [#1090](https://github.com/solidusio/solidus/pull/1090)
+
 ## Solidus 1.2.0 (2016-01-26)
 
 *   Admin menu has been moved from top of the page to the left side.

core/config/locales/en.yml

@@ -783,6 +783,7 @@ en:
     analytics_desc_list_4: It's completely free!
     analytics_trackers: Analytics Trackers
     and: and
+    apply_code: Apply Code
     approve: approve
     approver: Approver
     approved_at: Approved at

frontend/app/assets/javascripts/spree/frontend/checkout.js.coffee

@@ -1,7 +1,8 @@
-//= require jquery.payment
-//= require_self
-//= require spree/frontend/checkout/address
-//= require spree/frontend/checkout/payment
+#= require jquery.payment
+#= require_self
+#= require spree/frontend/checkout/address
+#= require spree/frontend/checkout/payment
+#= require spree/frontend/checkout/coupon-code
 
 Spree.disableSaveOnClick = ->
   ($ 'form.edit_order').submit ->

frontend/app/assets/javascripts/spree/frontend/checkout/coupon-code.js.coffee

@@ -0,0 +1,34 @@
+Spree.onCouponCodeApply = (e) ->
+  couponCodeField = $('#order_coupon_code')
+  couponCode = $.trim(couponCodeField.val())
+  return if couponCode == ''
+
+  couponStatus = $("#coupon_status")
+  successClass = 'success'
+  errorClass = 'alert'
+  url = Spree.url(Spree.routes.apply_coupon_code(Spree.current_order_id),
+    {
+      order_token: Spree.current_order_token,
+      coupon_code: couponCode
+    }
+  )
+
+  couponStatus.removeClass([successClass,errorClass].join(" "));
+
+  req = Spree.ajax
+    method: "PUT",
+    url: url
+
+  req.done (data) ->
+    window.location.reload();
+    couponCodeField.val('')
+    couponStatus.addClass(successClass).html("Coupon code applied successfully.")
+
+  req.fail (xhr) ->
+    # handler = JSON.parse(xhr.responseText)
+    handler = xhr.responseJSON
+    couponStatus.addClass(errorClass).html(handler["error"])
+
+Spree.ready ($) ->
+  $('#coupon-code-apply-button').click (e) ->
+    Spree.onCouponCodeApply(e)

frontend/app/assets/javascripts/spree/frontend/checkout/payment.js.coffee

@@ -40,40 +40,4 @@ Spree.ready ($) ->
       # i.e. if user enters invalid data
       ($ 'input[type="radio"]:checked').click()
 
-      $('#checkout_form_payment').submit ->
-        # Coupon code application may take a number of seconds.
-        # Informing the user that this is happening is a good way to indicate some progress to them.
-        # In addition to this, if the coupon code FAILS then they don't lose their just-entered payment data.
-        coupon_code_field = $('#order_coupon_code')
-        coupon_code = $.trim(coupon_code_field.val())
-        if (coupon_code != '')
-          if $('#coupon_status').length == 0
-            coupon_status = $("<div id='coupon_status'></div>")
-            coupon_code_field.parent().append(coupon_status)
-          else
-            coupon_status = $("#coupon_status")
-
-          url = Spree.url(Spree.routes.apply_coupon_code(Spree.current_order_id),
-            {
-              order_token: Spree.current_order_token,
-              coupon_code: coupon_code
-            }
-          )
-
-          coupon_status.removeClass();
-          Spree.ajax({
-            async: false,
-            method: "PUT",
-            url: url,
-            success: (data) ->
-              coupon_code_field.val('')
-              coupon_status.addClass("success").html("Coupon code applied successfully.")
-              return true
-            error: (xhr) ->
-              handler = JSON.parse(xhr.responseText)
-              coupon_status.addClass("error").html(handler["error"])
-              $('.continue').attr('disabled', false)
-              return false
-          })
-
   Spree.onPayment()

frontend/app/assets/stylesheets/spree/frontend/screen.css.scss

@@ -920,7 +920,7 @@ p[data-hook="use_billing"] {
   &.success {
     color: $c_green;
   }
-  &.error {
+  &.error, &.alert {
     color: $c_red;
   }
 }

frontend/app/views/spree/checkout/_payment.html.erb

@@ -59,7 +59,13 @@
     <p class='field' data-hook='coupon_code'>
       <%= form.label :coupon_code %><br />
       <%= form.text_field :coupon_code %>
+      <button type="button" class="button" id="coupon-code-apply-button">
+        <%= Spree.t(:apply_code) %>
+      </button>
+
     </p>
+    <div id='coupon_status'></div>
+
   </div>
 </fieldset>
 

frontend/spec/features/checkout_spec.rb

@@ -317,7 +317,7 @@
     end
   end
 
-  context "in coupon promotion, submits coupon along with payment", js: true do
+  context "Coupon promotions", js: true do
     let!(:promotion) { create(:promotion, name: "Huhuhu", code: "huhu") }
     let!(:calculator) { Spree::Calculator::FlatPercentItemTotal.create(preferred_flat_percent: "10") }
     let!(:action) { Spree::Promotion::Actions::CreateItemAdjustments.create(calculator: calculator) }
@@ -336,20 +336,19 @@
       expect(page).to have_current_path(spree.checkout_state_path("payment"))
     end
 
-    it "makes sure payment reflects order total with discounts" do
+    it "applies them & refreshes the page on user clicking the Apply Code button" do
       fill_in "Coupon Code", with: promotion.codes.first.value
-      click_on "Save and Continue"
+      click_on "Apply Code"
 
       expect(page).to have_content(promotion.name)
-      expect(Spree::Payment.first.amount.to_f).to eq Spree::Order.last.total.to_f
+      expect(page).to have_content("-$2.00")
     end
 
-    context "invalid coupon" do
-      it "doesnt create a payment record" do
+    context "with invalid coupon" do
+      it "doesnt apply the promotion" do
         fill_in "Coupon Code", with: 'invalid'
-        click_on "Save and Continue"
+        click_on "Apply Code"
 
-        expect(Spree::Payment.count).to eq 0
         expect(page).to have_content(Spree.t(:coupon_code_not_found))
       end
     end