diff --git a/app/views/checkout/_summary.html.haml b/app/views/checkout/_summary.html.haml
index 5677aab42a..682f02639e 100644
--- a/app/views/checkout/_summary.html.haml
+++ b/app/views/checkout/_summary.html.haml
@@ -1,10 +1,10 @@
-= form_with url: checkout_update_path(checkout_step), model: @order, method: :put, data: { remote: "true" } do |f|
+= form_with url: checkout_update_path(checkout_step), model: @order, method: :put, data: { remote: "true", 'guest-checkout-target': 'summary' } do |f|
.summary-main
= render partial: "checkout/already_ordered" if show_bought_items? && checkout_step?(:summary)
.checkout-substep
.checkout-title
= t("checkout.step3.delivery_details.title")
- %a.summary-edit{href: main_app.checkout_step_path(:details)}
+ %a.summary-edit{ href: main_app.checkout_step_path(:details), data: { action: "guest-checkout#removeUnloadEvent" } }
= t("checkout.step3.delivery_details.edit")
.summary-subtitle
@@ -51,7 +51,7 @@
.checkout-substep
.checkout-title
= t("checkout.step3.payment_method.title")
- %a.summary-edit{href: main_app.checkout_step_path(:payment)}
+ %a.summary-edit{ href: main_app.checkout_step_path(:payment), data: { action: "guest-checkout#removeUnloadEvent" } }
= t("checkout.step3.payment_method.edit")
.two-columns
- payment_method = last_payment_method(@order)
@@ -74,7 +74,7 @@
%div.checkout-substep
%div.checkout-title
= t("checkout.step3.order.title")
- %a.summary-edit{href: main_app.cart_path}
+ %a.summary-edit{ href: main_app.cart_path, data: { action: "guest-checkout#removeUnloadEvent" } }
= t("checkout.step3.order.edit")
= render 'spree/orders/summary', order: @order, display_footer: false
@@ -108,4 +108,4 @@
.checkout-submit
- if any_terms_required?(@order.distributor)
= render partial: "terms_and_conditions", locals: { f: f }
- = f.submit t("checkout.step3.submit"), name: "confirm_order", class: "button primary", disabled: @terms_and_conditions_accepted == false || @platform_tos_accepted == false
+ = f.submit t("checkout.step3.submit"), name: "confirm_order", class: "button primary", disabled: @terms_and_conditions_accepted == false || @platform_tos_accepted == false, data: { action: "click -> guest-checkout#removeUnloadEvent" }
diff --git a/app/webpacker/controllers/guest_checkout_controller.js b/app/webpacker/controllers/guest_checkout_controller.js
index 322386b5b2..189505f207 100644
--- a/app/webpacker/controllers/guest_checkout_controller.js
+++ b/app/webpacker/controllers/guest_checkout_controller.js
@@ -1,13 +1,17 @@
import { Controller } from "stimulus";
export default class extends Controller {
- static targets = ["checkout", "guest"];
+ static targets = ["checkout", "guest", "summary"];
static values = {
distributor: String,
session: { type: String, default: "guest-checkout" },
};
connect() {
+ if (this.hasSummaryTarget) {
+ window.addEventListener('beforeunload', this.handlePageUnload);
+ }
+
if (!this.hasGuestTarget) {
return;
}
@@ -34,4 +38,21 @@ export default class extends Controller {
usingGuestCheckout() {
return sessionStorage.getItem(this.sessionValue) === this.distributorValue;
}
+
+ handlePageUnload(event) {
+ event.preventDefault()
+
+ event.returnValue = 'I18n.t("admin.unsaved_confirm_leave")';
+ return
+ }
+
+ removeUnloadEvent() {
+ if (this.hasSummaryTarget) {
+ window.removeEventListener('beforeunload', this.handlePageUnload);
+ }
+ }
+
+ disconnect() {
+ this.removeUnloadEvent();
+ }
}
diff --git a/spec/system/consumer/checkout/summary_spec.rb b/spec/system/consumer/checkout/summary_spec.rb
index a15b800528..b17229ff1f 100644
--- a/spec/system/consumer/checkout/summary_spec.rb
+++ b/spec/system/consumer/checkout/summary_spec.rb
@@ -109,6 +109,41 @@ RSpec.describe "As a consumer, I want to checkout my order" do
end
end
+ describe "navigating away from checkout summary page" do
+ it "navigates to new page when popup is confirmed" do
+ visit checkout_step_path(:summary)
+ expect(page).to have_content "Order summary"
+ within '.nav-main-menu' do
+ accept_alert do
+ click_link(href: '/groups')
+ end
+ end
+ expect(page).not_to have_content "Order summary"
+ expect(page).to have_content "Groups / regions"
+ end
+
+ it "doesn't navigate to new page when popup is canceled" do
+ visit checkout_step_path(:summary)
+ expect(page).to have_content "Order summary"
+ within '.nav-main-menu' do
+ dismiss_confirm do
+ click_link(href: '/groups')
+ end
+ end
+ expect(page).to have_content "Order summary"
+ expect(page).not_to have_content "Groups / regions"
+ end
+
+ it "opens correct order step when edit link is clicked" do
+ visit checkout_step_path(:summary)
+ expect(page).to have_content "Order summary"
+ click_link(href: '/checkout/details')
+
+ expect(page).to have_content "Contact information"
+ expect(page).not_to have_content "Groups / regions"
+ end
+ end
+
describe "navigation available" do
it "redirect to Payment method step by clicking on 'Payment method' link" do
visit checkout_step_path(:summary)