Add browser unsaved changes modal when navigation form order sumary page [OFN-11600]

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" }

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();
+  }
 }

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)