Fixed errors when closing portal settings modal

no issue

- added actions for handling close/confirm/cancel of portal settings rather than re-using the route-level leave modal because the portal settings modal does not need any knowledge of the route
- added controller reset that is called when the route is exited to ensure no modals are shown when navigating back to the membership screen
- fixed "cannot set on destroyed" error when portal settings are opened and closed quickly
- removed usage of old `{{action}}` helper - this has been replaced with `{{on}}` and `{{fn}}`

ghost/admin/app/components/modal-portal-settings.js

@@ -153,7 +153,9 @@ export default ModalComponent.extend({
         this._super(...arguments);
         this.get('settings.errors').clear();
         run.later(this, function () {
-            this.set('hidePreviewFrame', false);
+            if (!this.isDestroyed && !this.isDestroying) {
+                this.set('hidePreviewFrame', false);
+            }
         }, 1200);
     },
 

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

@@ -7,7 +7,8 @@ import {tracked} from '@glimmer/tracking';
 export default class MembersAccessController extends Controller {
     @service settings;
 
-    @tracked showLeaveSettingsModal = false;
+    @tracked showLeavePortalModal = false;
+    @tracked showLeaveRouteModal = false;
     @tracked showPortalSettings = false;
 
     queryParams = ['showPortalSettings'];
@@ -16,15 +17,35 @@ export default class MembersAccessController extends Controller {
         if (this.settings.get('hasDirtyAttributes')) {
             transition.abort();
             this.leaveSettingsTransition = transition;
-            this.showLeaveSettingsModal = true;
+            this.showLeaveRouteModal = true;
+        }
+    }
+
+    @action openPortalSettings() {
+        this.saveSettingsTask.perform();
+        this.showPortalSettings = true;
+    }
+
+    @action
+    closePortalSettings() {
+        const changedAttributes = this.settings.changedAttributes();
+        if (changedAttributes && Object.keys(changedAttributes).length > 0) {
+            this.showLeavePortalModal = true;
+        } else {
+            this.showPortalSettings = false;
         }
     }
 
     @action
-    async leavePortalSettings() {
+    async confirmClosePortalSettings() {
         this.settings.rollbackAttributes();
         this.showPortalSettings = false;
-        this.showLeaveSettingsModal = false;
+        this.showLeavePortalModal = false;
+    }
+
+    @action
+    cancelClosePortalSettings() {
+        this.showLeavePortalModal = false;
     }
 
     @action
@@ -32,26 +53,15 @@ export default class MembersAccessController extends Controller {
         // Open stripe settings here
     }
 
-    @action
-    closePortalSettings() {
-        const changedAttributes = this.settings.changedAttributes();
-        if (changedAttributes && Object.keys(changedAttributes).length > 0) {
-            this.showLeaveSettingsModal = true;
-        } else {
-            this.showPortalSettings = false;
-        }
-    }
-
     @action
     async confirmLeave() {
         this.settings.rollbackAttributes();
-        this.showLeaveSettingsModal = false;
         this.leaveSettingsTransition.retry();
     }
 
     @action
     cancelLeave() {
-        this.showLeaveSettingsModal = false;
+        this.showLeaveRouteModal = false;
         this.leaveSettingsTransition = null;
     }
 
@@ -59,4 +69,10 @@ export default class MembersAccessController extends Controller {
     *saveSettingsTask() {
         return yield this.settings.save();
     }
+
+    reset() {
+        this.showLeaveRouteModal = false;
+        this.showLeavePortalModal = false;
+        this.showPortalSettings = false;
+    }
 }

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

@@ -19,4 +19,10 @@ export default class MembershipSettingsRoute extends AuthenticatedRoute {
             titleToken: 'Settings - Membership'
         };
     }
+
+    resetController(controller, isExiting) {
+        if (isExiting) {
+            controller.reset();
+        }
+    }
 }

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

@@ -33,14 +33,14 @@
                                 </p>
                             </div>
                             <div>
-                                <button type="button" class="gh-btn gh-btn-green" {{action (toggle "showPortalSettings" this)}} data-test-toggle-membersFrom>
+                                <button type="button" class="gh-btn gh-btn-green" {{on "click" this.openPortalSettings}} data-test-toggle="portal-settings">
                                     <span>Customise Portal &rarr;</span>
                                 </button>
                             </div>
                         </div>
                     </div>
                 </section>
-                
+
                 <div class="gh-setting-members-access">
                     <Settings::MembersSubscriptionAccess />
                     <Settings::MembersDefaultPostAccess />
@@ -67,7 +67,7 @@
                             <h4 class="gh-expandable-title">Free</h4>
                             <p class="gh-expandable-description">Free membership signup settings</p>
                         </div>
-                        <button type="button" class="gh-btn" {{action (toggle "freeOpen" this)}} data-test-toggle-pub-info><span>{{if this.freeOpen "Close" "Expand"}}</span></button>
+                        <button type="button" class="gh-btn" {{on "click" (toggle "freeOpen" this)}} data-test-toggle-pub-info><span>{{if this.freeOpen "Close" "Expand"}}</span></button>
                     </div>
                     <div class="gh-expandable-content">
                         {{#liquid-if this.freeOpen}}
@@ -94,7 +94,7 @@
                             <h4 class="gh-expandable-title">Premium</h4>
                             <p class="gh-expandable-description">Customise prices and premium signup options</p>
                         </div>
-                        <button type="button" class="gh-btn" {{action (toggle "paidOpen" this)}} data-test-toggle-pub-info><span>{{if this.paidOpen "Close" "Expand"}}</span></button>
+                        <button type="button" class="gh-btn" {{on "click" (toggle "paidOpen" this)}} data-test-toggle-pub-info><span>{{if this.paidOpen "Close" "Expand"}}</span></button>
                     </div>
                     <div class="gh-expandable-content">
                         {{#liquid-if this.paidOpen}}
@@ -144,7 +144,7 @@
         </div>
     </section>
 
-    {{#if this.showLeaveSettingsModal}}
+    {{#if this.showLeaveRouteModal}}
         <GhFullscreenModal
             @modal="leave-settings"
             @confirm={{this.confirmLeave}}
@@ -152,12 +152,22 @@
             @modifier="action wide"
         />
     {{/if}}
+
     {{#if this.showPortalSettings}}
         <GhFullscreenModal @modal="portal-settings"
             @model={{hash
-                openStripeSettings=(action "openStripeSettings")
+                openStripeSettings=this.openStripeSettings
             }}
-            @close={{action "closePortalSettings"}}
+            @close={{this.closePortalSettings}}
             @modifier="full-overlay portal-settings" />
     {{/if}}
+
+    {{#if this.showLeavePortalModal}}
+        <GhFullscreenModal
+            @modal="leave-settings"
+            @confirm={{this.confirmClosePortalSettings}}
+            @close={{this.cancelClosePortalSettings}}
+            @modifier="action wide"
+        />
+    {{/if}}
 </section>