Added custom segment option for default post access setting

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

With multiple products we'll re-enable segmentation by product for posts, which also means need to add a new option to the default post access setting in Membership settings. This change -

- adds new `A segment` option to default post access dropdown behind the alpha flag for multiple products
- shows member segment select dropdown for `A segment` option
- handles update of `defaultContentVisibility` to allow setting custom filter

ghost/admin/app/components/settings/members-default-post-access.hbs

@@ -23,4 +23,16 @@
             </div>
         </div>
     </PowerSelect>
-</div>
+    {{#if this.hasVisibilityFilter}}
+        <div class="mt2">
+            <GhMembersSegmentSelect
+                @hideLabels={{true}}
+                @segment={{this.settings.defaultContentVisibility}}
+                @onChange={{action "setVisibility"}}
+                @renderInPlace={{true}}
+                @hideDefaultSegments={{true}}
+                @hideOptionsWhenAllSelected={{true}}
+            />
+        </div>
+    {{/if}}
+</div>

ghost/admin/app/components/settings/members-default-post-access.js

@@ -4,9 +4,10 @@ import {inject as service} from '@ember/service';
 
 export default class SettingsMembersDefaultPostAccess extends Component {
     @service settings;
+    @service feature;
 
     get options() {
-        return [{
+        const defaultOptions = [{
             name: 'Public',
             description: 'All site visitors to your site, no login required',
             value: 'public',
@@ -25,20 +26,47 @@ export default class SettingsMembersDefaultPostAccess extends Component {
             icon: 'members-paid',
             icon_color: 'pink'
         }];
+        if (this.feature.get('multipleProducts')) {
+            defaultOptions.push({
+                name: 'A segment',
+                description: 'Members with any of the selected products',
+                value: 'filter',
+                icon: 'members-paid',
+                icon_color: 'yellow'
+            });
+        }
+        return defaultOptions;
+    }
+
+    get hasVisibilityFilter() {
+        return this.feature.get('multipleProducts') && !['public', 'members', 'paid'].includes(this.settings.get('defaultContentVisibility'));
     }
 
     get selectedOption() {
         if (this.settings.get('membersSignupAccess') === 'none') {
             return this.options.find(o => o.value === 'public');
         }
-
+        if (!['public', 'members', 'paid'].includes(this.settings.get('defaultContentVisibility'))) {
+            return this.options.find(o => o.value === 'filter');
+        }
         return this.options.find(o => o.value === this.settings.get('defaultContentVisibility'));
     }
 
+    @action
+    setVisibility(segment) {
+        if (segment) {
+            this.settings.set('defaultContentVisibility', segment);
+        }
+    }
+
     @action
     setDefaultContentVisibility(option) {
         if (this.settings.get('membersSignupAccess') !== 'none') {
-            this.settings.set('defaultContentVisibility', option.value);
+            if (option.value === 'filter') {
+                this.settings.set('defaultContentVisibility', '');
+            } else {
+                this.settings.set('defaultContentVisibility', option.value);
+            }
         }
     }
 }

ghost/admin/app/controllers/settings/membership.js

@@ -316,6 +316,13 @@ export default class MembersAccessController extends Controller {
 
     @task({drop: true})
     *saveSettingsTask(options) {
+        if (!this.settings.get('defaultContentVisibility')) {
+            const oldValue = this.settings.changedAttributes().defaultContentVisibility?.[0];
+            if (oldValue) {
+                this.settings.set('defaultContentVisibility', oldValue);
+            }
+        }
+
         if (!this.feature.get('multipleProducts')) {
             yield this.validateStripePlans({updatePortalPreview: false});