mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-01-20 22:42:53 -05:00
Updated newsletter settings GRO-76 GRO-90 (#19155)
refs GRO-76, GRO-90 - Reused `renderReplyToEmail` and `renderSenderEmail` from `NewsletterDetailModal.tsx` like Simon suggested - Changed Newsletter preview header in Newsletter settings to show Reply-to address instead of the “To” mock placeholder - When no custom sending domain is set, switched “Sender email address” to disabled TextField for better visual rhythm - Added a link to the help doc for (Pro) users without custom sending domain set (the doc itself will still need to be updated though, but Sam and the gang are already aware of this) - When custom sending domain is set, added a hint about the default value, which IMO is clearer than using a placeholder
This commit is contained in:
Djordje Vlaisavljevic
GitHub
parent
adace14beb
commit
494e0918fd
3 changed files with 39 additions and 30 deletions
|
|
@ -4,7 +4,7 @@ import React, {useEffect, useState} from 'react';
|
|||
import useFeatureFlag from '../../../../hooks/useFeatureFlag';
|
||||
import useSettingGroup from '../../../../hooks/useSettingGroup';
|
||||
import validator from 'validator';
|
||||
import {Button, ButtonGroup, ColorPickerField, ConfirmationModal, Form, Heading, Hint, HtmlField, Icon, ImageUpload, LimitModal, PreviewModalContent, Select, SelectOption, Separator, SettingGroupContent, Tab, TabView, TextArea, TextField, Toggle, ToggleGroup, showToast} from '@tryghost/admin-x-design-system';
|
||||
import {Button, ButtonGroup, ColorPickerField, ConfirmationModal, Form, Heading, Hint, HtmlField, Icon, ImageUpload, LimitModal, Link, PreviewModalContent, Select, SelectOption, Separator, Tab, TabView, TextArea, TextField, Toggle, ToggleGroup, showToast} from '@tryghost/admin-x-design-system';
|
||||
import {Config, hasSendingDomain, isManagedEmail, sendingDomain} from '@tryghost/admin-x-framework/api/config';
|
||||
import {ErrorMessages, useForm, useHandleError} from '@tryghost/admin-x-framework/hooks';
|
||||
import {HostLimitError, useLimiter} from '../../../../hooks/useLimiter';
|
||||
|
|
@ -15,7 +15,7 @@ import {getSettingValues} from '@tryghost/admin-x-framework/api/settings';
|
|||
import {textColorForBackgroundColor} from '@tryghost/color-utils';
|
||||
import {useGlobalData} from '../../../providers/GlobalDataProvider';
|
||||
|
||||
const renderSenderEmail = (newsletter: Newsletter, config: Config, defaultEmailAddress: string|undefined) => {
|
||||
export const renderSenderEmail = (newsletter: Newsletter, config: Config, defaultEmailAddress: string|undefined) => {
|
||||
if (isManagedEmail(config) && !hasSendingDomain(config) && defaultEmailAddress) {
|
||||
// Not changeable: sender_email is ignored
|
||||
return defaultEmailAddress;
|
||||
|
|
@ -33,7 +33,7 @@ const renderSenderEmail = (newsletter: Newsletter, config: Config, defaultEmailA
|
|||
return newsletter.sender_email || defaultEmailAddress || '';
|
||||
};
|
||||
|
||||
const renderReplyToEmail = (newsletter: Newsletter, config: Config, supportEmailAddress: string|undefined, defaultEmailAddress: string|undefined) => {
|
||||
export const renderReplyToEmail = (newsletter: Newsletter, config: Config, supportEmailAddress: string|undefined, defaultEmailAddress: string|undefined) => {
|
||||
if (newsletter.sender_reply_to === 'newsletter') {
|
||||
return renderSenderEmail(newsletter, config, defaultEmailAddress);
|
||||
}
|
||||
|
|
@ -175,7 +175,7 @@ const Sidebar: React.FC<{
|
|||
return (
|
||||
<TextField
|
||||
error={Boolean(errors.sender_email)}
|
||||
hint={errors.sender_email}
|
||||
hint={errors.sender_email || `If left empty, noreply@${sendingDomain(config)} will be used`}
|
||||
rightPlaceholder={`@${sendingDomain(config)}`}
|
||||
title="Sender email address"
|
||||
value={sendingEmailUsername || ''}
|
||||
|
|
@ -190,17 +190,19 @@ const Sidebar: React.FC<{
|
|||
);
|
||||
}
|
||||
|
||||
const hint = (
|
||||
<>
|
||||
To customise, set up a <Link href="https://ghost.org/help/custom-sending-domains/" rel="noopener noreferrer" target="_blank">custom sending domain</Link>
|
||||
</>
|
||||
);
|
||||
|
||||
// Pro users without custom sending domains
|
||||
return (
|
||||
<SettingGroupContent
|
||||
values={[
|
||||
{
|
||||
heading: 'Sender email address',
|
||||
key: 'sender-email-addresss',
|
||||
value: `${defaultEmailAddress}`,
|
||||
hint: <span className="text-xs text-grey-700">To customise, set up a <a className="text-green" href="#">custom sending domain</a></span>
|
||||
}
|
||||
]}
|
||||
<TextField
|
||||
disabled={true}
|
||||
hint={hint}
|
||||
title="Sender email address"
|
||||
value={defaultEmailAddress}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,14 +3,14 @@ import React from 'react';
|
|||
import useFeatureFlag from '../../../../hooks/useFeatureFlag';
|
||||
import {Newsletter} from '@tryghost/admin-x-framework/api/newsletters';
|
||||
import {getSettingValues} from '@tryghost/admin-x-framework/api/settings';
|
||||
import {hasSendingDomain, isManagedEmail} from '@tryghost/admin-x-framework/api/config';
|
||||
import {renderReplyToEmail, renderSenderEmail} from './NewsletterDetailModal';
|
||||
import {textColorForBackgroundColor} from '@tryghost/color-utils';
|
||||
import {useGlobalData} from '../../../providers/GlobalDataProvider';
|
||||
|
||||
const NewsletterPreview: React.FC<{newsletter: Newsletter}> = ({newsletter}) => {
|
||||
const hasEmailCustomization = useFeatureFlag('emailCustomization');
|
||||
const {currentUser, settings, siteData, config} = useGlobalData();
|
||||
const [title, icon, commentsEnabled, defaultEmailAddress] = getSettingValues<string>(settings, ['title', 'icon', 'comments_enabled', 'default_email_address']);
|
||||
const [title, icon, commentsEnabled, supportEmailAddress, defaultEmailAddress] = getSettingValues<string>(settings, ['title', 'icon', 'comments_enabled', 'support_email_address', 'default_email_address']);
|
||||
|
||||
let headerTitle: string | null = null;
|
||||
if (newsletter.show_header_title) {
|
||||
|
|
@ -91,17 +91,6 @@ const NewsletterPreview: React.FC<{newsletter: Newsletter}> = ({newsletter}) =>
|
|||
secondaryTextColor
|
||||
} : {};
|
||||
|
||||
const renderSenderEmail = () => {
|
||||
if (isManagedEmail(config)) {
|
||||
if (!hasSendingDomain(config)) {
|
||||
// Sender email is ignored
|
||||
return defaultEmailAddress || '';
|
||||
}
|
||||
}
|
||||
|
||||
return newsletter.sender_email || defaultEmailAddress || '';
|
||||
};
|
||||
|
||||
return <NewsletterPreviewContent
|
||||
authorPlaceholder={currentUser.name || currentUser.email}
|
||||
backgroundColor={colors.backgroundColor || '#ffffff'}
|
||||
|
|
@ -111,8 +100,9 @@ const NewsletterPreview: React.FC<{newsletter: Newsletter}> = ({newsletter}) =>
|
|||
headerImage={newsletter.header_image}
|
||||
headerSubtitle={headerSubtitle}
|
||||
headerTitle={headerTitle}
|
||||
senderEmail={renderSenderEmail()}
|
||||
senderEmail={renderSenderEmail(newsletter, config, defaultEmailAddress)}
|
||||
senderName={newsletter.sender_name || title}
|
||||
senderReplyTo={renderReplyToEmail(newsletter, config, supportEmailAddress, defaultEmailAddress)}
|
||||
showBadge={newsletter.show_badge}
|
||||
showCommentCta={showCommentCta}
|
||||
showFeatureImage={newsletter.show_feature_image}
|
||||
|
|
|
|||
|
|
@ -4,11 +4,14 @@ import LatestPosts2 from '../../../../assets/images/latest-posts-2.png';
|
|||
import LatestPosts3 from '../../../../assets/images/latest-posts-3.png';
|
||||
import clsx from 'clsx';
|
||||
import {GhostOrb, Icon} from '@tryghost/admin-x-design-system';
|
||||
import {isManagedEmail} from '@tryghost/admin-x-framework/api/config';
|
||||
import {textColorForBackgroundColor} from '@tryghost/color-utils';
|
||||
import {useGlobalData} from '../../../providers/GlobalDataProvider';
|
||||
|
||||
const NewsletterPreviewContent: React.FC<{
|
||||
senderName?: string;
|
||||
senderEmail: string;
|
||||
senderEmail: string | null;
|
||||
senderReplyTo: string | null;
|
||||
headerImage?: string | null;
|
||||
headerIcon?: string;
|
||||
headerTitle?: string | null;
|
||||
|
|
@ -38,6 +41,7 @@ const NewsletterPreviewContent: React.FC<{
|
|||
}> = ({
|
||||
senderName,
|
||||
senderEmail,
|
||||
senderReplyTo,
|
||||
headerImage,
|
||||
headerIcon,
|
||||
headerTitle,
|
||||
|
|
@ -66,6 +70,7 @@ const NewsletterPreviewContent: React.FC<{
|
|||
titleColor
|
||||
}) => {
|
||||
const showHeader = headerIcon || headerTitle;
|
||||
const {config} = useGlobalData();
|
||||
|
||||
const currentDate = new Date().toLocaleDateString('default', {
|
||||
year: 'numeric',
|
||||
|
|
@ -76,14 +81,26 @@ const NewsletterPreviewContent: React.FC<{
|
|||
|
||||
const backgroundColorIsDark = backgroundColor && textColorForBackgroundColor(backgroundColor).hex().toLowerCase() === '#ffffff';
|
||||
|
||||
let emailHeader;
|
||||
|
||||
if (!isManagedEmail(config)) {
|
||||
emailHeader = <><p className="leading-normal"><span className="font-semibold text-grey-900">{senderName}</span><span> {senderEmail}</span></p>
|
||||
<p className="leading-normal"><span className="font-semibold text-grey-900">To:</span> Jamie Larson jamie@example.com</p></>;
|
||||
} else {
|
||||
emailHeader = <><p className="leading-normal"><span className="font-semibold text-grey-900">From: </span><span>{senderName} ({senderEmail})</span></p>
|
||||
<p className="leading-normal">
|
||||
<span className="font-semibold text-grey-900">Reply-to: </span>{senderReplyTo ? senderReplyTo : 'Not set' }
|
||||
</p>
|
||||
</>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative flex grow flex-col">
|
||||
<div className="absolute inset-0 m-5 flex items-center justify-center">
|
||||
<div className="mx-auto my-0 flex max-h-full w-full max-w-[700px] flex-col overflow-hidden rounded-[4px] text-black shadow-sm">
|
||||
{/* Email header */}
|
||||
<div className="flex-column flex min-h-[77px] justify-center rounded-t-sm border-b border-grey-200 bg-white px-6 text-sm text-grey-700">
|
||||
<p className="leading-normal"><span className="font-semibold text-grey-900">{senderName}</span><span> {senderEmail}</span></p>
|
||||
<p className="leading-normal"><span className="font-semibold text-grey-900">To:</span> Jamie Larson jamie@example.com</p>
|
||||
{emailHeader}
|
||||
</div>
|
||||
|
||||
{/* Email content */}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue