From c7b6a72a493adaa18433e59ee4b1b941bc33345a Mon Sep 17 00:00:00 2001
From: Sodbileg Gansukh <sodbileg.gansukh@gmail.com>
Date: Thu, 18 May 2023 13:11:09 +0800
Subject: [PATCH] Separated tiers group to active and archived

refs https://github.com/TryGhost/Team/issues/1403

- currently, all tiers are grouped together in dropdowns with list of tiers
- this separates them into active and archived groups, so that the status of the tiers is clear when making choices
---
 .../components/gh-members-recipient-select.js | 22 ++++++++++++----
 .../components/gh-members-segment-select.js   | 26 ++++++++++++++-----
 .../visibility-segment-select.js              | 25 +++++++++++++-----
 3 files changed, 56 insertions(+), 17 deletions(-)

diff --git a/ghost/admin/app/components/gh-members-recipient-select.js b/ghost/admin/app/components/gh-members-recipient-select.js
index bf7bb00747..4073af6d4c 100644
--- a/ghost/admin/app/components/gh-members-recipient-select.js
+++ b/ghost/admin/app/components/gh-members-recipient-select.js
@@ -165,21 +165,33 @@ export default class GhMembersRecipientSelect extends Component {
         const tiers = yield this.store.query('tier', {filter: 'type:paid', limit: 'all'});
 
         if (tiers.length > 1) {
-            const tiersGroup = {
-                groupName: 'Tiers',
+            const activeTiersGroup = {
+                groupName: 'Active tiers',
+                options: []
+            };
+
+            const archivedTiersGroup = {
+                groupName: 'Archived tiers',
                 options: []
             };
 
             tiers.forEach((tier) => {
-                tiersGroup.options.push({
+                const tierData = {
                     name: tier.name,
                     segment: `tier:${tier.slug}`,
                     count: tier.count?.members,
                     class: 'segment-tier'
-                });
+                };
+
+                if (tier.active) {
+                    activeTiersGroup.options.push(tierData);
+                } else {
+                    archivedTiersGroup.options.push(tierData);
+                }
             });
 
-            options.push(tiersGroup);
+            options.push(activeTiersGroup);
+            options.push(archivedTiersGroup);
         }
 
         this.specificOptions = options;
diff --git a/ghost/admin/app/components/gh-members-segment-select.js b/ghost/admin/app/components/gh-members-segment-select.js
index c43cf44c7f..34d5b57abe 100644
--- a/ghost/admin/app/components/gh-members-segment-select.js
+++ b/ghost/admin/app/components/gh-members-segment-select.js
@@ -78,22 +78,36 @@ export default class GhMembersSegmentSelect extends Component {
         const tiers = yield this.store.query('tier', {filter: 'type:paid', limit: 'all', include: 'monthly_price,yearly_price,benefits'});
 
         if (tiers.length > 0) {
-            const tiersGroup = {
-                groupName: 'Tiers',
+            const activeTiersGroup = {
+                groupName: 'Active tiers',
                 options: []
             };
+
+            const archivedTiersGroup = {
+                groupName: 'Archived tiers',
+                options: []
+            };
+
             tiers.forEach((tier) => {
-                tiersGroup.options.push({
+                const tierData = {
                     name: tier.name,
                     segment: `${tier.id}`,
                     count: tier.count?.members,
                     class: 'segment-tier'
-                });
+                };
+
+                if (tier.active) {
+                    activeTiersGroup.options.push(tierData);
+                } else {
+                    archivedTiersGroup.options.push(tierData);
+                }
             });
 
-            options.push(tiersGroup);
+            options.push(activeTiersGroup);
+            options.push(archivedTiersGroup);
+
             if (this.args.selectDefaultTier && !this.args.segment) {
-                this.args.onChange?.(tiersGroup.options[0].segment);
+                this.args.onChange?.(activeTiersGroup.options[0].segment);
             }
         }
 
diff --git a/ghost/admin/app/components/gh-post-settings-menu/visibility-segment-select.js b/ghost/admin/app/components/gh-post-settings-menu/visibility-segment-select.js
index 02e1daab4e..57aa3954eb 100644
--- a/ghost/admin/app/components/gh-post-settings-menu/visibility-segment-select.js
+++ b/ghost/admin/app/components/gh-post-settings-menu/visibility-segment-select.js
@@ -75,23 +75,36 @@ export default class VisibilitySegmentSelect extends Component {
         this.tiers = tiers;
 
         if (tiers.length > 0) {
-            const tiersGroup = {
-                groupName: 'Tiers',
+            const activeTiersGroup = {
+                groupName: 'Active tiers',
+                options: []
+            };
+
+            const archivedTiersGroup = {
+                groupName: 'Archived tiers',
                 options: []
             };
 
             tiers.forEach((tier) => {
-                tiersGroup.options.push({
+                const tierData = {
                     name: tier.name,
                     id: tier.id,
                     count: tier.count?.members,
                     class: 'segment-tier'
-                });
+                };
+
+                if (tier.active) {
+                    activeTiersGroup.options.push(tierData);
+                } else {
+                    archivedTiersGroup.options.push(tierData);
+                }
             });
 
-            options.push(tiersGroup);
+            options.push(activeTiersGroup);
+            options.push(archivedTiersGroup);
+
             if (this.args.selectDefaultTier && !this.args.tiers) {
-                this.setSegment([tiersGroup.options[0]]);
+                this.setSegment([activeTiersGroup.options[0]]);
             }
         }