diff --git a/ghost/admin/app/components/modal-delete-member.hbs b/ghost/admin/app/components/modal-delete-member.hbs
index 953b34bd1c..5e7d937b25 100644
--- a/ghost/admin/app/components/modal-delete-member.hbs
+++ b/ghost/admin/app/components/modal-delete-member.hbs
@@ -1,28 +1,28 @@
{{svg-jar "close"}}Close
-
- You're about to delete "{{or this.member.name this.member.email}}". This is permanent! We warned you, k?
+
+ Permanently delete {{this.member.email}} from Ghost.
{{#if this.hasActiveStripeSubscriptions}}
-
-
Cancel Stripe subscription
-
If disabled, member's Stripe subscription will continue
-
-
@@ -31,5 +31,5 @@
\ No newline at end of file
diff --git a/ghost/admin/app/components/modal-delete-member.js b/ghost/admin/app/components/modal-delete-member.js
index d98e383401..ac7cacc467 100644
--- a/ghost/admin/app/components/modal-delete-member.js
+++ b/ghost/admin/app/components/modal-delete-member.js
@@ -1,6 +1,7 @@
import ModalComponent from 'ghost-admin/components/modal-base';
import {alias} from '@ember/object/computed';
import {computed} from '@ember/object';
+import {reads} from '@ember/object/computed';
import {inject as service} from '@ember/service';
import {task} from 'ember-concurrency';
@@ -14,6 +15,8 @@ export default ModalComponent.extend({
member: alias('model'),
+ cancelSubscriptions: reads('shouldCancelSubscriptions'),
+
hasActiveStripeSubscriptions: computed('member', function () {
let subscriptions = this.member.get('stripe');
@@ -34,7 +37,7 @@ export default ModalComponent.extend({
},
toggleShouldCancelSubscriptions() {
- this.shouldCancelSubscriptions = !this.shouldCancelSubscriptions;
+ this.set('shouldCancelSubscriptions', !this.shouldCancelSubscriptions);
}
},
diff --git a/ghost/admin/app/styles/layouts/members.css b/ghost/admin/app/styles/layouts/members.css
index 203ed6392c..d352e14cd5 100644
--- a/ghost/admin/app/styles/layouts/members.css
+++ b/ghost/admin/app/styles/layouts/members.css
@@ -436,6 +436,31 @@ textarea.gh-member-details-textarea {
flex-basis: 408px;
}
+.gh-member-cancelstripe-checkbox {
+ margin-bottom: 4px;
+}
+
+.gh-member-cancelstripe-checkbox label {
+ display: flex;
+}
+
+.gh-member-cancelstripe-checkbox h4 {
+ font-size: 1.4rem;
+ font-weight: 600;
+ line-height: 1.15em;
+ margin-top: 2px;
+}
+
+.gh-member-cancelstripe-checkbox label p {
+ margin-top: -2px;
+ color: var(--middarkgrey);
+}
+
+.gh-member-cancelstripe-checkbox input:checked + .input-toggle-component {
+ border-color: color-mod(var(--red) l(-5%));
+ background: var(--red);
+}
+
/* Import modal
/* ---------------------------------------------------------- */