Fixed stripe connect modal not adjusting correctly to connected state

no issue

- updated `<GhFullscreenModal>` to pass `@modifier` and `@updateModifier` through to child modal components so they can adjust their own classes
- added an `updateSuccessModifier()` action to `<ModalStripeConnect>` to set the modal size when first opening and on `@onConnected/Disconnected` actions passed to the `<GhMembersPaymentsSetting>` component
- updated `<GhMembersPaymentsSetting>` to call passed in `onConnected/Disconnected` actions when connection or disconnection is finalised

ghost/admin/app/components/gh-fullscreen-modal.hbs

@@ -9,6 +9,8 @@
                     @model={{this.model}}
                     @confirm={{action "confirm"}}
                     @closeModal={{action "close"}}
+                    @modifier={{this.modifier}}
+                    @updateModifier={{action (mut this.modifier)}}
                 />
             {{/let}}
         {{/if}}

ghost/admin/app/components/gh-members-payments-setting.js

@@ -226,6 +226,8 @@ export default Component.extend({
 
         yield this.ajax.delete(url);
         yield this.settings.reload();
+
+        this.onDisconnected?.();
     }),
 
     calculateDiscount(monthly, yearly) {
@@ -262,8 +264,10 @@ export default Component.extend({
         if (this.get('settings.stripeConnectIntegrationToken')) {
             try {
                 let response = yield this.settings.save();
+
                 const products = yield this.store.query('product', {include: 'stripe_prices'});
                 this.product = products.firstObject;
+
                 if (this.product) {
                     const stripePrices = this.product.stripePrices || [];
                     const yearlyDiscount = this.calculateDiscount(5, 50);
@@ -297,8 +301,11 @@ export default Component.extend({
                     this.settings.set('membersYearlyPriceId', yearlyPrice.id);
                     response = yield this.settings.save();
                 }
+
                 this.set('membersStripeOpen', false);
                 this.set('stripeConnectSuccess', true);
+                this.onConnected?.();
+
                 return response;
             } catch (error) {
                 if (error.payload && error.payload.errors) {

ghost/admin/app/components/modal-stripe-connect.hbs

@@ -8,9 +8,11 @@
 </button>
 
 <form>
-<div class="modal-body">
+<div class="modal-body" {{did-insert this.updateSuccessModifier}}>
     <GhMembersPaymentsSetting
         @setStripeConnectIntegrationTokenSetting={{this.setStripeConnectIntegrationTokenSetting}}
+        @onConnected={{this.updateSuccessModifier}}
+        @onDisconnected={{this.updateSuccessModifier}}
     />
 </div>
 </form>

ghost/admin/app/components/modal-stripe-connect.js

@@ -12,4 +12,17 @@ export default class ModalStripeConnect extends ModalBase {
     setStripeConnectIntegrationTokenSetting(stripeConnectIntegrationToken) {
         this.settings.set('stripeConnectIntegrationToken', stripeConnectIntegrationToken);
     }
+
+    @action
+    updateSuccessModifier() {
+        if (this.settings.get('stripeConnectAccountId')) {
+            if (this.modifier?.indexOf('stripe-connected') === -1) {
+                this.updateModifier(`${this.modifier} stripe-connected`);
+            }
+        } else {
+            if (this.modifier?.indexOf('stripe-connected') !== -1) {
+                this.updateModifier(this.modifier.replace(/\s?stripe-connected/, ''));
+            }
+        }
+    }
 }

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

@@ -247,6 +247,6 @@
         <GhFullscreenModal
             @modal="stripe-connect"
             @close={{this.closeStripeConnect}}
-            @modifier="action wide stripe-connect {{if this.settings.stripeConnectAccountId "stripe-connected" ""}}" />
+            @modifier="action wide stripe-connect" />
     {{/if}}
 </section>