TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-25 03:44:29 +03:00
Code Issues Projects Releases Wiki Activity

Added enable newsletter toggle in AdminX settings (#17582)

Browse Source 
refs. https://github.com/TryGhost/Product/issues/3601

---------

Co-authored-by: Jono Mingard <reason.koan@gmail.com>
This commit is contained in:
Peter Zimon 2023-08-03 18:32:30 +02:00 committed by GitHub
parent af7ce52708
commit d960b1284d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 96 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
apps/admin-x-settings/src/components/Sidebar.tsx
View File

@ -4,12 +4,17 @@ import SettingNavItem from '../admin-x-ds/settings/SettingNavItem';
import SettingNavSection from '../admin-x-ds/settings/SettingNavSection';
import TextField from '../admin-x-ds/global/form/TextField';
import useRouting from '../hooks/useRouting';
import {getSettingValues} from '../utils/helpers';
import {useGlobalData} from './providers/GlobalDataProvider';
import {useSearch} from './providers/ServiceProvider';
const Sidebar: React.FC = () => {
const {filter, setFilter} = useSearch();
const {updateRoute} = useRouting();
const {settings} = useGlobalData();
const [newslettersEnabled] = getSettingValues(settings, ['editor_default_email_recipients']) as [string];
const handleSectionClick = (e: React.MouseEvent<HTMLButtonElement>) => {
updateRoute(e.currentTarget.name);
};
@ -47,10 +52,14 @@ const Sidebar: React.FC = () => {
</SettingNavSection>
<SettingNavSection title="Email newsletters">
<SettingNavItem navid='newsletter-sending' title="Newsletter sending" onClick={handleSectionClick} />
<SettingNavItem navid='newsletters' title="Newsletters" onClick={handleSectionClick} />
<SettingNavItem navid='default-recipients' title="Default recipients" onClick={handleSectionClick} />
<SettingNavItem navid='mailgun' title="Mailgun settings" onClick={handleSectionClick} />
<SettingNavItem navid='enable-newsletters' title="Newsletter sending" onClick={handleSectionClick} />
{newslettersEnabled !== 'disabled' && (
<>
<SettingNavItem navid='newsletters' title="Newsletters" onClick={handleSectionClick} />
<SettingNavItem navid='default-recipients' title="Default recipients" onClick={handleSectionClick} />
<SettingNavItem navid='mailgun' title="Mailgun settings" onClick={handleSectionClick} />
</>
)}
</SettingNavSection>
<SettingNavSection title="Advanced">

18
apps/admin-x-settings/src/components/settings/email/EmailSettings.tsx
View File

@ -1,21 +1,33 @@
import DefaultRecipients from './DefaultRecipients';
import EnableNewsletters from './EnableNewsletters';
import MailGun from './Mailgun';
import Newsletters from './Newsletters';
import React from 'react';
import SettingSection from '../../../admin-x-ds/settings/SettingSection';
import {getSettingValues} from '../../../utils/helpers';
import {useGlobalData} from '../../providers/GlobalDataProvider';
const searchKeywords = {
enableNewsletters: ['newsletter', 'enable', 'disable', 'turn on'],
newsletters: ['newsletter', 'email'],
defaultRecipients: ['newsletter', 'default recipients', 'email'],
mailgun: ['mailgun', 'email']
};
const EmailSettings: React.FC = () => {
const {settings} = useGlobalData();
const [newslettersEnabled] = getSettingValues(settings, ['editor_default_email_recipients']) as [string];
return (
<SettingSection keywords={Object.values(searchKeywords).flat()} title='Email newsletters'>
<Newsletters keywords={searchKeywords.newsletters} />
<DefaultRecipients keywords={searchKeywords.defaultRecipients} />
<MailGun keywords={searchKeywords.mailgun} />
<EnableNewsletters keywords={searchKeywords.enableNewsletters} />
{newslettersEnabled !== 'disabled' && (
<>
<Newsletters keywords={searchKeywords.newsletters} />
<DefaultRecipients keywords={searchKeywords.defaultRecipients} />
<MailGun keywords={searchKeywords.mailgun} />
</>
)}
</SettingSection>
);
};

68
apps/admin-x-settings/src/components/settings/email/EnableNewsletters.tsx Normal file
View File

@ -0,0 +1,68 @@
import Icon from '../../../admin-x-ds/global/Icon';
import React from 'react';
import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
import SettingGroupContent from '../../../admin-x-ds/settings/SettingGroupContent';
import Toggle from '../../../admin-x-ds/global/form/Toggle';
import {Setting} from '../../../types/api';
import {getSettingValues} from '../../../utils/helpers';
import {useEditSettings} from '../../../utils/api/settings';
import {useGlobalData} from '../../providers/GlobalDataProvider';
const EnableNewsletters: React.FC<{ keywords: string[] }> = ({keywords}) => {
const {settings} = useGlobalData();
const {mutateAsync: editSettings} = useEditSettings();
const [newslettersEnabled] = getSettingValues(settings, ['editor_default_email_recipients']) as [string];
const handleToggleChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
const updates: Setting[] = [
{key: 'editor_default_email_recipients', value: (e.target.checked ? 'visibility' : 'disabled')}
];
if (!e.target.checked) {
updates.push({key: 'editor_default_email_recipients_filter', value: null});
}
await editSettings(updates);
};
const enableToggle = (
<>
<Toggle
checked={newslettersEnabled !== 'disabled'}
direction='rtl'
onChange={handleToggleChange}
/>
</>
);
return (<SettingGroup
customButtons={enableToggle}
description='Newsletter features are active, posts can be sent by email'
keywords={keywords}
navid='enable-newsletters'
testId='enable-newsletters'
title='Newsletter sending'
>
<SettingGroupContent
values={[
{
key: 'private',
value: newslettersEnabled !== 'disabled' ? (
<div className='flex items-center gap-2'>
<Icon colorClass='text-green' name='check' size='sm' />
<span>Enabled</span>
</div>
) : (
<div className='flex items-center gap-2 text-grey-900'>
<Icon colorClass='text-grey-600' name='mail-block' size='sm' />
<span>Disabled</span>
</div>
)
}
]}
/>
</SettingGroup>);
};
export default EnableNewsletters;