Move checkout coupon code section into summary

This commit moves the coupon code application section of checkout into the summary box, still visible in payment step only. It also wraps the coupon code input + button into a real form so it still works if, for some reason, JS is not working, falling back to submitting a simple order form for now.
stewart · May 11, 2018 · 4497ef5 · 4497ef5
1 parent c7c47b2
commit 4497ef5
Show file tree

Hide file tree

Showing 8 changed files with 53 additions and 19 deletions.
diff --git a/frontend/app/assets/javascripts/spree/frontend/checkout/coupon-code.js b/frontend/app/assets/javascripts/spree/frontend/checkout/coupon-code.js
@@ -1,4 +1,5 @@
 Spree.onCouponCodeApply = function(e) {
+  e.preventDefault();
   var couponCodeField = $("#order_coupon_code");
   var couponCode = $.trim(couponCodeField.val());
   if (couponCode === "") {

diff --git a/frontend/app/assets/stylesheets/spree/frontend/screen.css.scss b/frontend/app/assets/stylesheets/spree/frontend/screen.css.scss
@@ -948,9 +948,35 @@ p[data-hook="use_billing"] {
   padding: 5px;
 }
 
+.coupon-code {
+  margin-top: 20px;
+  padding: 10px;
+
+  form {
+    display: flex;
+    flex-flow: row wrap;
+  }
+
+  label {
+    flex: 1 100%;
+    text-align: left;
+  }
+
+  input[type="text"] {
+    flex: 3 0;
+    width: 100%;
+    margin-right: 5px;
+  }
+
+  &-apply-button {
+    white-space: nowrap;
+  }
+}
+
 #coupon_status {
+  margin-top: 10px;
   font-weight: bold;
-  font-size: 125%;
+  font-size: 100%;
   &.success {
     color: $c_green;
   }

diff --git a/frontend/app/controllers/spree/checkout_controller.rb b/frontend/app/controllers/spree/checkout_controller.rb
@@ -173,12 +173,13 @@ def apply_coupon_code
         handler = PromotionHandler::Coupon.new(@order).apply
 
         if handler.error.present?
-          setup_for_current_state
           flash.now[:error] = handler.error
-          respond_with(@order) { |format| format.html { render :edit } } && return
         elsif handler.success
           flash[:success] = handler.success
         end
+
+        setup_for_current_state
+        respond_with(@order) { |format| format.html { render :edit } } && return
       end
     end
 

diff --git a/frontend/app/views/spree/checkout/_coupon_code.html.erb b/frontend/app/views/spree/checkout/_coupon_code.html.erb
@@ -0,0 +1,12 @@
+<div class="coupon-code" data-hook='coupon_code'>
+  <%= form_for order, url: update_checkout_path(order.state) do |form| %>
+    <%= form.label :coupon_code %>
+    <%= form.text_field :coupon_code, placeholder: :coupon_code %>
+
+    <button type="submit" class="button coupon-code-apply-button" id="coupon-code-apply-button">
+      <%= t('spree.apply_code') %>
+    </button>
+  <% end %>
+
+  <div id='coupon_status'></div>
+</div>
diff --git a/frontend/app/views/spree/checkout/_payment.html.erb b/frontend/app/views/spree/checkout/_payment.html.erb
@@ -56,16 +56,6 @@
       <% end %>
     </ul>
     <br style="clear:both;" />
-    <p class='field' data-hook='coupon_code'>
-      <%= form.label :coupon_code %>
-      <%= form.text_field :coupon_code %>
-      <button type="button" class="button" id="coupon-code-apply-button">
-        <%= t('spree.apply_code') %>
-      </button>
-
-    </p>
-    <div id='coupon_status'></div>
-
   </div>
 </fieldset>
 

diff --git a/frontend/app/views/spree/checkout/_summary.html.erb b/frontend/app/views/spree/checkout/_summary.html.erb
@@ -70,3 +70,7 @@
     </tr>
   </tbody>
 </table>
+
+<% if order.state == 'payment' %>
+  <%= render 'coupon_code', order: order %>
+<% end %>
diff --git a/frontend/spec/controllers/spree/checkout_controller_spec.rb b/frontend/spec/controllers/spree/checkout_controller_spec.rb
@@ -507,7 +507,7 @@ def post_address
 
         put :update, params: { state: order.state, order: { coupon_code: coupon_code } }
 
-        expect(response).to redirect_to(spree.checkout_state_path('confirm'))
+        expect(response).to render_template :edit
         expect(flash.now[:success]).to eq('Coupon Applied!')
       end
 

diff --git a/frontend/spec/features/coupon_code_spec.rb b/frontend/spec/features/coupon_code_spec.rb
@@ -59,23 +59,23 @@ def create_basic_coupon_promotion(code)
 
         it "informs about an invalid coupon code" do
           fill_in "order_coupon_code", with: "coupon_codes_rule_man"
-          click_button "Save and Continue"
+          click_button "Apply Code"
           expect(page).to have_content(I18n.t('spree.coupon_code_not_found'))
         end
 
         it "can enter an invalid coupon code, then a real one" do
           fill_in "order_coupon_code", with: "coupon_codes_rule_man"
-          click_button "Save and Continue"
+          click_button "Apply Code"
           expect(page).to have_content(I18n.t('spree.coupon_code_not_found'))
           fill_in "order_coupon_code", with: "onetwo"
-          click_button "Save and Continue"
+          click_button "Apply Code"
           expect(page).to have_content("Promotion (Onetwo)   -$10.00")
         end
 
         context "with a promotion" do
           it "applies a promotion to an order" do
             fill_in "order_coupon_code", with: "onetwo"
-            click_button "Save and Continue"
+            click_button "Apply Code"
             expect(page).to have_content("Promotion (Onetwo)   -$10.00")
           end
         end
@@ -112,7 +112,7 @@ def create_basic_coupon_promotion(code)
 
           it "shows wallet payments on coupon code errors" do
             fill_in "order_coupon_code", with: "coupon_codes_rule_man"
-            click_button "Save and Continue"
+            click_button "Apply Code"
 
             expect(page).to have_content("The coupon code you entered doesn't exist. Please try again.")
             expect(page).to have_content("Use an existing card")