Wired default email recipients setting in admin-x

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

- wires default email recipient and filter setting to site data

ghost/admin-x-settings/src/components/settings/email/DefaultRecipients.tsx

@@ -1,23 +1,98 @@
 import Dropdown from '../../../admin-x-ds/global/Dropdown';
-import React, {useState} from 'react';
+import React from 'react';
 import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
 import SettingGroupContent from '../../../admin-x-ds/settings/SettingGroupContent';
-import {TSettingGroupStates} from '../../../admin-x-ds/settings/SettingGroup';
+import useSettingGroup from '../../../hooks/useSettingGroup';
+import {getOptionLabel} from '../../../utils/helpers';
+
+type RefipientValueArgs = {
+    defaultEmailRecipients: string;
+    defaultEmailRecipientsFilter: string|null;
+};
+
+const RECIPIENT_FILTER_OPTIONS = [{
+    label: 'Whoever has access to the post',
+    value: 'visibility'
+}, {
+    label: 'All members',
+    value: 'all-members'
+}, {
+    label: 'Paid-members only',
+    value: 'paid-only'
+}, {
+    label: 'Specific people',
+    value: 'segment'
+}, {
+    label: 'Usually nobody',
+    value: 'none'
+}];
+
+function getDefaultRecipientValue({
+    defaultEmailRecipients,
+    defaultEmailRecipientsFilter
+}: RefipientValueArgs): string {
+    if (defaultEmailRecipients === 'filter') {
+        if (defaultEmailRecipientsFilter === 'status:free,status:-free') {
+            return 'all-members';
+        } else if (defaultEmailRecipientsFilter === 'status:-free') {
+            return 'paid-only';
+        } else if (defaultEmailRecipientsFilter === null) {
+            return 'none';
+        } else {
+            return 'segment';
+        }
+    }
+
+    return defaultEmailRecipients;
+}
 
 const DefaultRecipients: React.FC = () => {
-    const [currentState, setCurrentState] = useState<TSettingGroupStates>('view');
+    const {
+        currentState,
+        handleSave,
+        handleCancel,
+        updateSetting,
+        getSettingValues,
+        handleStateChange
+    } = useSettingGroup();
 
-    const handleStateChange = (newState: TSettingGroupStates) => {
-        setCurrentState(newState);
+    const [defaultEmailRecipients, defaultEmailRecipientsFilter] = getSettingValues([
+        'editor_default_email_recipients', 'editor_default_email_recipients_filter'
+    ]) as [string, string|null];
+
+    const setDefaultRecipientValue = (value: string) => {
+        if (['visibility', 'disabled'].includes(value)) {
+            updateSetting('editor_default_email_recipients', value);
+            updateSetting('editor_default_email_recipients_filter', null);
+        } else {
+            updateSetting('editor_default_email_recipients', 'filter');
+        }
+
+        if (value === 'all-members') {
+            updateSetting('editor_default_email_recipients_filter', 'status:free,status:-free');
+        }
+
+        if (value === 'paid-only') {
+            updateSetting('editor_default_email_recipients_filter', 'status:-free');
+        }
+
+        if (value === 'none') {
+            updateSetting('editor_default_email_recipients_filter', null);
+        }
     };
 
+    const emailRecipientValue = getDefaultRecipientValue({
+        defaultEmailRecipients,
+        defaultEmailRecipientsFilter
+    });
+
     const values = (
         <SettingGroupContent
             values={[
                 {
                     heading: 'Default Newsletter recipients',
                     key: 'default-recipients',
-                    value: 'Whoever has access to the post'
+                    value: getOptionLabel(RECIPIENT_FILTER_OPTIONS, emailRecipientValue)
                 }
             ]}
         />
@@ -26,26 +101,24 @@ const DefaultRecipients: React.FC = () => {
     const form = (
         <SettingGroupContent columns={1}>
             <Dropdown
-                defaultSelectedOption='option-1'
+                defaultSelectedOption={emailRecipientValue}
                 hint='Who should be able to subscribe to your site?'
-                options={[
-                    {value: 'option-1', label: 'Whoever has access to the post'},
-                    {value: 'option-2', label: 'All members'},
-                    {value: 'option-3', label: 'Paid-members only'},
-                    {value: 'option-4', label: 'Specific people'},
-                    {value: 'option-5', label: 'Usually nobody'}
-                ]}
+                options={RECIPIENT_FILTER_OPTIONS}
                 title="Subscription access"
-                onSelect={() => {}}
+                onSelect={(value) => {
+                    setDefaultRecipientValue(value);
+                }}
             />
         </SettingGroupContent>
     );
 
     return (
-        <SettingGroup 
+        <SettingGroup
             description='When you publish new content, who do you usually want to send it to?'
-            state={currentState} 
-            title='Default recipients' 
+            state={currentState}
+            title='Default recipients'
+            onCancel={handleCancel}
+            onSave={handleSave}
             onStateChange={handleStateChange}
         >
             {currentState === 'view' ? values : form}

ghost/admin-x-settings/src/components/settings/membership/Access.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
 import SettingGroupContent from '../../../admin-x-ds/settings/SettingGroupContent';
 import useSettingGroup from '../../../hooks/useSettingGroup';
+import {getOptionLabel} from '../../../utils/helpers';
 
 const MEMBERS_SIGNUP_ACCESS_OPTIONS = [
     {value: 'all', label: 'Anyone can sign up'},
@@ -23,10 +24,6 @@ const COMMENTS_ENABLED_OPTIONS = [
     {value: 'off', label: 'Nobody'}
 ];
 
-function getOptionLabel(options: {value: string; label: string}[], value: string): string | undefined {
-    return options.find(option => option.value === value)?.label;
-}
-
 const Access: React.FC = () => {
     const {
         currentState,

ghost/admin-x-settings/src/utils/helpers.ts

@@ -29,3 +29,9 @@ export function getLocalTime(timeZone: string) {
     const localTime = date.toLocaleString('en-US', options);
     return localTime;
 }
+
+export function getOptionLabel(
+    options: {value: string; label: string}[], value: string
+): string | undefined {
+    return options?.find(option => option.value === value)?.label;
+}