diff --git a/ghost/admin/app/components/gh-membership-products-alpha.hbs b/ghost/admin/app/components/gh-membership-products-alpha.hbs
index 0704092420..c8d66dbba1 100644
--- a/ghost/admin/app/components/gh-membership-products-alpha.hbs
+++ b/ghost/admin/app/components/gh-membership-products-alpha.hbs
@@ -1,15 +1,43 @@
-Tiers
-
-{{#each this.products as |product productIdx|}}
-
-{{/each}}
-
-
diff --git a/ghost/admin/app/components/modals/offers/unarchive.hbs b/ghost/admin/app/components/modals/offers/unarchive.hbs
index fd906ffec2..19cde85685 100644
--- a/ghost/admin/app/components/modals/offers/unarchive.hbs
+++ b/ghost/admin/app/components/modals/offers/unarchive.hbs
@@ -7,7 +7,7 @@
- Reactivating {{@data.offer.name}} will immediately allow new members to subscribe using this offer.
+ Reactivating {{@data.offer.name}} will allow new members to subscribe to this tier. Existing members will remain unchanged.
diff --git a/ghost/admin/app/components/modals/tiers/archive.hbs b/ghost/admin/app/components/modals/tiers/archive.hbs
new file mode 100644
index 0000000000..0b8a798929
--- /dev/null
+++ b/ghost/admin/app/components/modals/tiers/archive.hbs
@@ -0,0 +1,23 @@
+
+
+
+
{{svg-jar "close"}}Close
+
+
+
+ Members will no longer be able to subscribe to {{@data.product.name}} and it will be removed from the list of available tiers in portal. Existing members on this tier will remain unchanged.
+
+
+
+
+
diff --git a/ghost/admin/app/components/modals/tiers/archive.js b/ghost/admin/app/components/modals/tiers/archive.js
new file mode 100644
index 0000000000..4db031d23d
--- /dev/null
+++ b/ghost/admin/app/components/modals/tiers/archive.js
@@ -0,0 +1,31 @@
+import Component from '@glimmer/component';
+import {inject as service} from '@ember/service';
+import {task} from 'ember-concurrency-decorators';
+
+export default class ArchiveTierModalComponent extends Component {
+ @service notifications;
+ @service router;
+
+ get isActive() {
+ const {product} = this.args.data;
+ return !!product.active;
+ }
+
+ @task({drop: true})
+ *archiveTierTask() {
+ const {product} = this.args.data;
+ product.active = false;
+
+ try {
+ yield product.save();
+
+ return product;
+ } catch (error) {
+ if (error) {
+ this.notifications.showAPIError(error, {key: 'tier.archive.failed'});
+ }
+ } finally {
+ this.args.close();
+ }
+ }
+}
diff --git a/ghost/admin/app/components/modals/tiers/unarchive.hbs b/ghost/admin/app/components/modals/tiers/unarchive.hbs
new file mode 100644
index 0000000000..5678889269
--- /dev/null
+++ b/ghost/admin/app/components/modals/tiers/unarchive.hbs
@@ -0,0 +1,22 @@
+
+
+
+
{{svg-jar "close"}}Close
+
+
+
+ Reactivating {{@data.product.name}} will immediately allow new members to subscribe to this.
+
+
+
+
+
diff --git a/ghost/admin/app/components/modals/tiers/unarchive.js b/ghost/admin/app/components/modals/tiers/unarchive.js
new file mode 100644
index 0000000000..6d97b136e0
--- /dev/null
+++ b/ghost/admin/app/components/modals/tiers/unarchive.js
@@ -0,0 +1,31 @@
+import Component from '@glimmer/component';
+import {inject as service} from '@ember/service';
+import {task} from 'ember-concurrency-decorators';
+
+export default class UnarchiveTierModalComponent extends Component {
+ @service notifications;
+ @service router;
+
+ get isActive() {
+ const {product} = this.args.data;
+ return !!product.active;
+ }
+
+ @task({drop: true})
+ *unarchiveTask() {
+ const {product} = this.args.data;
+ product.active = true;
+
+ try {
+ yield product.save();
+
+ return product;
+ } catch (error) {
+ if (error) {
+ this.notifications.showAPIError(error, {key: 'tier.unarchive.failed'});
+ }
+ } finally {
+ this.args.close();
+ }
+ }
+}
diff --git a/ghost/admin/app/components/settings/members/archive-tier.hbs b/ghost/admin/app/components/settings/members/archive-tier.hbs
new file mode 100644
index 0000000000..8fdad0ffab
--- /dev/null
+++ b/ghost/admin/app/components/settings/members/archive-tier.hbs
@@ -0,0 +1,17 @@
+{{#if this.product.active}}
+ {{#if (not this.product.isNew)}}
+
+ Archive
+
+ {{/if}}
+{{else}}
+
+ Reactivate
+
+{{/if}}
\ No newline at end of file
diff --git a/ghost/admin/app/components/settings/members/archive-tier.js b/ghost/admin/app/components/settings/members/archive-tier.js
new file mode 100644
index 0000000000..8d7e62a6c0
--- /dev/null
+++ b/ghost/admin/app/components/settings/members/archive-tier.js
@@ -0,0 +1,40 @@
+import Component from '@glimmer/component';
+import {action} from '@ember/object';
+import {inject as service} from '@ember/service';
+
+export default class ArchiveTierComponent extends Component {
+ @service notifications;
+ @service router;
+ @service modals;
+
+ get isActive() {
+ const {product} = this.args;
+ return !!product.active;
+ }
+
+ get product() {
+ return this.args.product;
+ }
+
+ @action
+ handleArchiveTier() {
+ if (!this.product.isNew) {
+ this.modals.open('modals/tiers/archive', {
+ product: this.product
+ }, {
+ className: 'fullscreen-modal fullscreen-modal-action fullscreen-modal-wide'
+ });
+ }
+ }
+
+ @action
+ handleUnarchiveTier() {
+ if (!this.product.isNew) {
+ this.modals.open('modals/tiers/unarchive', {
+ product: this.product
+ }, {
+ className: 'fullscreen-modal fullscreen-modal-action fullscreen-modal-wide'
+ });
+ }
+ }
+}
diff --git a/ghost/admin/app/styles/components/modals-new.css b/ghost/admin/app/styles/components/modals-new.css
index c11c7cb5b8..8cf377a7d9 100644
--- a/ghost/admin/app/styles/components/modals-new.css
+++ b/ghost/admin/app/styles/components/modals-new.css
@@ -55,6 +55,7 @@
}
.epm-modal-container {
+ z-index: 10000;
display: flex;
justify-content: center;
overflow: auto;
diff --git a/ghost/admin/app/styles/layouts/products.css b/ghost/admin/app/styles/layouts/products.css
index 5c93f3c8d8..06504dfd34 100644
--- a/ghost/admin/app/styles/layouts/products.css
+++ b/ghost/admin/app/styles/layouts/products.css
@@ -11,6 +11,11 @@
}
}
+.gh-contentfilter-menu-trigger-tiers {
+ margin-right: 0 !important;
+ background: transparent !important;
+}
+
.gh-product-cards {
margin: 0 0 24px;
}
@@ -28,10 +33,25 @@
}
}
-.gh-product-card-editbutton {
+.gh-product-card-editbutton-container {
position: absolute;
right: 24px;
- top: 16px;
+ top: 24px;
+ margin-right: 0;
+}
+
+.gh-product-card-editbutton {
+ margin-right: 0;
+}
+
+.gh-product-card-editbutton.gh-btn span {
+ height: 24px;
+}
+
+.gh-tier-actions-menu {
+ top: calc(100% + 6px);
+ left: auto;
+ right: 0;
}
.gh-product-card-block {