Switched membership unsaved changes modal to new modal pattern

refs https://github.com/TryGhost/Team/issues/1734
refs https://github.com/TryGhost/Team/issues/559
refs https://github.com/TryGhost/Ghost/issues/14101

- switches to newer modal patterns ready for later Ember upgrades

ghost/admin/app/controllers/settings/membership.js

@@ -23,7 +23,6 @@ export default class MembersAccessController extends Controller {
     @service session;
 
     @tracked showLeavePortalModal = false;
-    @tracked showLeaveRouteModal = false;
     @tracked showPortalSettings = false;
     @tracked showStripeConnect = false;
     @tracked showTierModal = false;
@@ -93,25 +92,8 @@ export default class MembersAccessController extends Controller {
         this.updatePortalPreview();
     }
 
-    leaveRoute(transition) {
-        if (this.settings.get('hasDirtyAttributes') || this.hasChangedPrices) {
-            transition.abort();
-            this.leaveSettingsTransition = transition;
-            this.showLeaveRouteModal = true;
-        }
-    }
-
-    @action
-    async confirmLeave() {
-        this.settings.rollbackAttributes();
-        this.resetPrices();
-        this.leaveSettingsTransition.retry();
-    }
-
-    @action
-    cancelLeave() {
-        this.showLeaveRouteModal = false;
-        this.leaveSettingsTransition = null;
+    get isDirty() {
+        return this.settings.get('hasDirtyAttributes') || this.hasChangedPrices;
     }
 
     @action
@@ -389,6 +371,14 @@ export default class MembersAccessController extends Controller {
         }
     }
 
+    @action
+    reset() {
+        this.settings.rollbackAttributes();
+        this.resetPrices();
+        this.showLeavePortalModal = false;
+        this.showPortalSettings = false;
+    }
+
     resetPrices() {
         const monthlyPrice = this.tier.get('monthlyPrice');
         const yearlyPrice = this.tier.get('yearlyPrice');
@@ -397,12 +387,6 @@ export default class MembersAccessController extends Controller {
         this.stripeYearlyAmount = yearlyPrice ? (yearlyPrice.amount / 100) : 50;
     }
 
-    reset() {
-        this.showLeaveRouteModal = false;
-        this.showLeavePortalModal = false;
-        this.showPortalSettings = false;
-    }
-
     _validateSignupRedirect(url, type) {
         const siteUrl = this.config.get('blogUrl');
         let errMessage = `Please enter a valid URL`;

ghost/admin/app/routes/settings/membership.js

@@ -1,5 +1,7 @@
 import AdminRoute from 'ghost-admin/routes/admin';
+import ConfirmUnsavedChangesModal from '../../components/modals/confirm-unsaved-changes';
 import VerifyEmail from '../../components/modals/settings/verify-email';
+import {action} from '@ember/object';
 import {inject as service} from '@ember/service';
 
 export default class MembershipSettingsRoute extends AdminRoute {
@@ -41,11 +43,46 @@ export default class MembershipSettingsRoute extends AdminRoute {
         }
     }
 
-    actions = {
-        willTransition(transition) {
-            return this.controller.leaveRoute(transition);
+    @action
+    async willTransition(transition) {
+        if (this.hasConfirmed) {
+            return true;
+        }
+
+        transition.abort();
+
+        // wait for any existing confirm modal to be closed before allowing transition
+        if (this.confirmModal) {
+            return;
+        }
+
+        if (this.controller.saveTask?.isRunning) {
+            await this.controller.saveTask.last;
+        }
+
+        const shouldLeave = await this.confirmUnsavedChanges();
+
+        if (shouldLeave) {
+            this.controller.reset();
+
+            this.hasConfirmed = true;
+            return transition.retry();
+        }
+    }
+
+    async confirmUnsavedChanges() {
+        if (this.controller.isDirty) {
+            this.confirmModal = this.modals
+                .open(ConfirmUnsavedChangesModal)
+                .finally(() => {
+                    this.confirmModal = null;
+                });
+
+            return this.confirmModal;
+        }
+
+        return true;
     }
-    };
 
     buildRouteInfoMetadata() {
         return {

ghost/admin/app/templates/settings/membership.hbs

@@ -160,15 +160,6 @@
         </div>
     </section>
 
-    {{#if this.showLeaveRouteModal}}
-        <GhFullscreenModal
-            @modal="leave-settings"
-            @confirm={{this.confirmLeave}}
-            @close={{this.cancelLeave}}
-            @modifier="action wide"
-        />
-    {{/if}}
-
     {{#if this.showPortalSettings}}
         <GhFullscreenModal @modal="portal-settings"
             @model={{hash