Disconnect Stripe Connect integration (#1613)

no-issue

Co-authored-by: Peter Zimon <peter.zimon@gmail.com>

This adds the ability to disconnect the Stripe Connect integration from the Members settings.

ghost/admin/app/components/gh-members-lab-setting.hbs

@@ -67,12 +67,21 @@
                                 <span class="gh-members-connect-testmodelabel">Test mode</span>
                             {{/unless}}
                         </p>
+                        {{#if this.hasActiveStripeSubscriptions}}
+                        <p class="red ma0 pa0 f8">
+                            Cannot disconnect while there are members with active Stripe subscriptions.
+                        </p>
+                        {{/if}}
                     {{else}}
                         <p class="gh-setting-desc pa0 ma0">Connect to Stripe to create subscriptions and take payments</p>
                     {{/if}}
                 </div>
                 <div>
-                    <button type="button" class="gh-btn" {{action (toggle "membersStripeOpen" this)}} data-test-toggle-membersstripe><span>{{if this.membersStripeOpen "Close" "Expand"}}</span></button>
+                    {{#if this.stripeConnectIntegration}}
+                        <button type="button" class="gh-btn" {{action "openDisconnectStripeModal"}}><span>Disconnect</span></button>
+                    {{else}}
+                        <button type="button" class="gh-btn" {{action (toggle "membersStripeOpen" this)}} data-test-toggle-membersstripe><span>{{if this.membersStripeOpen "Close" "Expand"}}</span></button>
+                    {{/if}}
                 </div>
             </div>
 
@@ -368,6 +377,16 @@
     {{/unless}}
 </div>
 
+{{#if this.showDisconnectStripeConnectModal}}
+    <GhFullscreenModal @modal="disconnect-stripe"
+        @model={{hash
+            stripeConnectIntegration=this.stripeConnectIntegration
+        }}
+        @confirm={{action "disconnectStripeConnectIntegration"}}
+        @close={{action "closeDisconnectStripeModal"}}
+        @modifier="action wide" />
+{{/if}}
+
 {{#if this.showMembersModalSettings}}
     <GhFullscreenModal @modal="members-modal-settings"
         @model={{hash
@@ -376,4 +395,4 @@
         }}
         @close={{action "closeMembersModalSettings"}}
         @modifier="action wide" />
-{{/if}}
+{{/if}}

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

@@ -222,9 +222,44 @@ export default Component.extend({
 
         setStripeConnectIntegrationToken(key, event) {
             this.setStripeConnectIntegrationTokenSetting(event.target.value);
+        },
+
+        openDisconnectStripeModal() {
+            this.openDisconnectStripeConnectModal.perform();
+        },
+
+        closeDisconnectStripeModal() {
+            this.set('showDisconnectStripeConnectModal', false);
+        },
+
+        disconnectStripeConnectIntegration() {
+            this.disconnectStripeConnectIntegration.perform();
         }
     },
 
+    openDisconnectStripeConnectModal: task(function* () {
+        this.set('hasActiveStripeSubscriptions', false);
+        if (!this.get('stripeConnectIntegration')) {
+            return;
+        }
+        const url = this.get('ghostPaths.url').api('/members/hasActiveStripeSubscriptions');
+        const response = yield this.ajax.request(url);
+
+        if (response.hasActiveStripeSubscriptions) {
+            this.set('hasActiveStripeSubscriptions', true);
+            return;
+        }
+        this.set('showDisconnectStripeConnectModal', true);
+    }).drop(),
+
+    disconnectStripeConnectIntegration: task(function* () {
+        this.set('disconnectStripeError', false);
+        const url = this.get('ghostPaths.url').api('/settings/stripe/connect');
+
+        yield this.ajax.delete(url);
+        yield this.settings.reload();
+    }),
+
     saveStripeSettings: task(function* () {
         this.set('stripeConnectError', null);
         this.set('stripeConnectSuccess', null);

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

@@ -0,0 +1,13 @@
+<header class="modal-header">
+    <h1>Are you sure you want to disconnect?</h1>
+</header>
+<a class="close" href="" role="button" title="Close" {{action "closeModal"}}>{{svg-jar "close"}}<span class="hidden">Close</span></a>
+
+<div class="modal-body">
+    You're about to disconnect your Stripe account ({{this.stripeConnectIntegration.name}}) from this site. This will automatically turn off paid memberships on this site.
+</div>
+
+<div class="modal-footer">
+    <button {{action "closeModal"}} class="gh-btn"><span>Cancel</span></button>
+    <GhTaskButton @buttonText="Disconnect" @successText="Disconnected" @task={{this.disconnectStripe}} @class="gh-btn gh-btn-red gh-btn-icon" />
+</div>

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

@@ -0,0 +1,24 @@
+import ModalComponent from 'ghost-admin/components/modal-base';
+import {alias} from '@ember/object/computed';
+import {task} from 'ember-concurrency';
+
+export default ModalComponent.extend({
+    // Allowed actions
+    confirm: () => {},
+
+    stripeConnectIntegration: alias('model.stripeConnectIntegration'),
+
+    actions: {
+        confirm() {
+            this.disconnectStripe.perform();
+        }
+    },
+
+    disconnectStripe: task(function* () {
+        try {
+            yield this.confirm();
+        } finally {
+            this.send('closeModal');
+        }
+    }).drop()
+});