Added unsaved changes modal to members-payments screen

no issue

Unsaved changes handling hadn't been moved across fully to the payments screen when settings were re-jigged meaning changes on the payments screen would make settings dirty and show unsaved changes modal unexpectedly on other screens.

- refactored `members-payments` route to use native classes
- used same unsaved changes pattern as `members-access` route/controller

ghost/admin/app/controllers/settings/members-payments.js

@@ -2,11 +2,14 @@
 import Controller from '@ember/controller';
 import {action} from '@ember/object';
 import {inject as service} from '@ember/service';
-import {task} from 'ember-concurrency';
+import {task} from 'ember-concurrency-decorators';
+import {tracked} from '@glimmer/tracking';
 
 export default class MembersPaymentsController extends Controller {
     @service settings;
 
+    @tracked showLeaveSettingsModal = false;
+
     @action
     setDefaultContentVisibility(value) {
         this.settings.set('defaultContentVisibility', value);
@@ -22,6 +25,27 @@ export default class MembersPaymentsController extends Controller {
         return yield this.settings.save();
     }
 
+    leaveRoute(transition) {
+        if (this.settings.get('hasDirtyAttributes')) {
+            transition.abort();
+            this.leaveSettingsTransition = transition;
+            this.showLeaveSettingsModal = true;
+        }
+    }
+
+    @action
+    async confirmLeave() {
+        this.settings.rollbackAttributes();
+        this.showLeaveSettingsModal = false;
+        this.leaveSettingsTransition.retry();
+    }
+
+    @action
+    cancelLeave() {
+        this.showLeaveSettingsModal = false;
+        this.leaveSettingsTransition = null;
+    }
+
     reset() {
         // stripeConnectIntegrationToken is not a persisted value so we don't want
         // to keep it around across transitions

ghost/admin/app/routes/settings/members-payments.js

@@ -1,12 +1,13 @@
 import AuthenticatedRoute from 'ghost-admin/routes/authenticated';
 import {inject as service} from '@ember/service';
 
-export default AuthenticatedRoute.extend({
-    session: service(),
-    settings: service(),
+export default class MembersPaymentsRoute extends AuthenticatedRoute {
+    @service session;
+    @service settings;
 
     beforeModel() {
-        this._super(...arguments);
+        super.beforeModel(...arguments);
+
         return this.session.get('user').then((user) => {
             if (!user.isOwner && user.isAdmin) {
                 return this.transitionTo('settings');
@@ -14,21 +15,27 @@ export default AuthenticatedRoute.extend({
                 return this.transitionTo('home');
             }
         });
-    },
+    }
 
     model() {
         return this.settings.reload();
-    },
+    }
+
+    actions = {
+        willTransition(transition) {
+            return this.controller.leaveRoute(transition);
+        }
+    }
 
     resetController(controller, isExiting) {
         if (isExiting) {
             controller.reset();
         }
-    },
+    }
 
     buildRouteInfoMetadata() {
         return {
             titleToken: 'Settings - Members'
         };
     }
-});
+}

ghost/admin/app/templates/settings/members-payments.hbs

@@ -24,4 +24,13 @@
             />
         </div>
     </section>
+
+    {{#if this.showLeaveSettingsModal}}
+        <GhFullscreenModal
+            @modal="leave-settings"
+            @confirm={{this.confirmLeave}}
+            @close={{this.cancelLeave}}
+            @modifier="action wide"
+        />
+    {{/if}}
 </section>