From 3ab0a52f623313a145cf03523a7ef29e1352c6ce Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Thu, 20 May 2021 17:20:49 +0100
Subject: [PATCH] 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  |  2 ++
 .../app/components/gh-members-payments-setting.js   |  7 +++++++
 ghost/admin/app/components/modal-stripe-connect.hbs |  4 +++-
 ghost/admin/app/components/modal-stripe-connect.js  | 13 +++++++++++++
 ghost/admin/app/templates/settings/membership.hbs   |  2 +-
 5 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/ghost/admin/app/components/gh-fullscreen-modal.hbs b/ghost/admin/app/components/gh-fullscreen-modal.hbs
index 56f6d17115..fe9b246576 100644
--- a/ghost/admin/app/components/gh-fullscreen-modal.hbs
+++ b/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}}
diff --git a/ghost/admin/app/components/gh-members-payments-setting.js b/ghost/admin/app/components/gh-members-payments-setting.js
index cddc650b2f..e7ce1c8820 100644
--- a/ghost/admin/app/components/gh-members-payments-setting.js
+++ b/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) {
diff --git a/ghost/admin/app/components/modal-stripe-connect.hbs b/ghost/admin/app/components/modal-stripe-connect.hbs
index f7900792e0..eaa3816469 100644
--- a/ghost/admin/app/components/modal-stripe-connect.hbs
+++ b/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>
diff --git a/ghost/admin/app/components/modal-stripe-connect.js b/ghost/admin/app/components/modal-stripe-connect.js
index 935f98259b..c25c064f7d 100644
--- a/ghost/admin/app/components/modal-stripe-connect.js
+++ b/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/, ''));
+            }
+        }
+    }
 }
diff --git a/ghost/admin/app/templates/settings/membership.hbs b/ghost/admin/app/templates/settings/membership.hbs
index 3045f633a3..8952aadf3d 100644
--- a/ghost/admin/app/templates/settings/membership.hbs
+++ b/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>
\ No newline at end of file