Reading Settings: Add new 'For each new post email, include..' newsle…

…tter setting (Automattic#71247) * Reading Settings: Add new 'For each new post email, include..' newsletter setting * Update client/my-sites/site-settings/settings-reading/main.tsx Co-authored-by: Ivan Ottinger <25105483+ivan-ottinger@users.noreply.github.com> * Update client/my-sites/site-settings/reading-newsletter-settings/ExcerptSetting.tsx Co-authored-by: Ivan Ottinger <25105483+ivan-ottinger@users.noreply.github.com> * Add localizeUrl import to ExcerptSetting component Co-authored-by: Ivan Ottinger <25105483+ivan-ottinger@users.noreply.github.com>
sirino · Dec 22, 2022 · 24544fc · 24544fc
1 parent 248e4c4
commit 24544fc
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 7 deletions.
diff --git a/client/my-sites/site-settings/reading-newsletter-settings/ExcerptSetting.tsx b/client/my-sites/site-settings/reading-newsletter-settings/ExcerptSetting.tsx
@@ -0,0 +1,59 @@
+import { localizeUrl } from '@automattic/i18n-utils';
+import { useTranslate } from 'i18n-calypso';
+import FormFieldset from 'calypso/components/forms/form-fieldset';
+import FormLabel from 'calypso/components/forms/form-label';
+import FormRadio from 'calypso/components/forms/form-radio';
+import FormSettingExplanation from 'calypso/components/forms/form-setting-explanation';
+
+type ExcerptSettingProps = {
+	value?: boolean;
+	disabled?: boolean;
+	updateFields?: ( fields: { [ key: string ]: unknown } ) => void;
+};
+
+export const ExcerptSetting = ( {
+	value = false,
+	disabled,
+	updateFields,
+}: ExcerptSettingProps ) => {
+	const translate = useTranslate();
+	return (
+		<FormFieldset>
+			<FormLabel>For each new post email, include</FormLabel>
+			<FormLabel>
+				{ /* @ts-expect-error FormRadio is not typed and is causing errors */ }
+				<FormRadio
+					checked={ ! value }
+					onChange={ () => updateFields?.( { wpcom_subscription_emails_use_excerpt: false } ) }
+					disabled={ disabled }
+					label={ translate( 'Full text' ) }
+				/>
+			</FormLabel>
+			<FormLabel>
+				{ /* @ts-expect-error FormRadio is not typed and is causing errors */ }
+				<FormRadio
+					checked={ value }
+					onChange={ () => updateFields?.( { wpcom_subscription_emails_use_excerpt: true } ) }
+					disabled={ disabled }
+					label={ translate( 'Excerpt' ) }
+				/>
+			</FormLabel>
+			<FormSettingExplanation>
+				{ translate(
+					'Sets whether email subscribers can read full posts in emails or just an excerpt and link to the full version of the post. {{link}}Learn more about sending emails{{/link}}.',
+					{
+						components: {
+							link: (
+								<a
+									href={ localizeUrl( 'https://wordpress.com/support/launch-a-newsletter/' ) }
+									target="_blank"
+									rel="noreferrer"
+								/>
+							),
+						},
+					}
+				) }
+			</FormSettingExplanation>
+		</FormFieldset>
+	);
+};
diff --git a/client/my-sites/site-settings/reading-newsletter-settings/index.tsx b/client/my-sites/site-settings/reading-newsletter-settings/index.tsx
@@ -1,10 +1,12 @@
 import { Card } from '@automattic/components';
 import { useTranslate } from 'i18n-calypso';
 import SettingsSectionHeader from 'calypso/my-sites/site-settings/settings-section-header';
+import { ExcerptSetting } from './ExcerptSetting';
 import { FeaturedImageEmailSetting } from './FeaturedImageEmailSetting';
 
 type Fields = {
 	wpcom_featured_image_in_email?: boolean;
+	wpcom_subscription_emails_use_excerpt?: boolean;
 };
 
 type NewsletterSettingsSectionProps = {
@@ -13,6 +15,7 @@ type NewsletterSettingsSectionProps = {
 	handleSubmitForm: ( event: React.FormEvent< HTMLFormElement > ) => void;
 	disabled?: boolean;
 	isSavingSettings: boolean;
+	updateFields: ( fields: Fields ) => void;
 };
 
 export const NewsletterSettingsSection = ( {
@@ -21,9 +24,10 @@ export const NewsletterSettingsSection = ( {
 	handleSubmitForm,
 	disabled,
 	isSavingSettings,
+	updateFields,
 }: NewsletterSettingsSectionProps ) => {
 	const translate = useTranslate();
-	const { wpcom_featured_image_in_email } = fields;
+	const { wpcom_featured_image_in_email, wpcom_subscription_emails_use_excerpt } = fields;
 
 	return (
 		<>
@@ -35,13 +39,20 @@ export const NewsletterSettingsSection = ( {
 				disabled={ disabled }
 				isSaving={ isSavingSettings }
 			/>
-			<Card>
+			<Card className="site-settings__card">
 				<FeaturedImageEmailSetting
 					value={ wpcom_featured_image_in_email }
 					handleToggle={ handleToggle }
 					disabled={ disabled }
 				/>
 			</Card>
+			<Card className="site-settings__card">
+				<ExcerptSetting
+					value={ wpcom_subscription_emails_use_excerpt }
+					updateFields={ updateFields }
+					disabled={ disabled }
+				/>
+			</Card>
 		</>
 	);
 };
diff --git a/client/my-sites/site-settings/settings-reading/main.tsx b/client/my-sites/site-settings/settings-reading/main.tsx
@@ -13,20 +13,30 @@ import wrapSettingsForm from '../wrap-settings-form';
 
 const isEnabled = config.isEnabled( 'settings/modernize-reading-settings' );
 
-// Settings are not typed yet, so we need to use `unknown` for now.
-type Settings = unknown;
+type Settings = {
+	posts_per_page?: boolean;
+	posts_per_rss?: boolean;
+	wpcom_featured_image_in_email?: boolean;
+	wpcom_subscription_emails_use_excerpt?: boolean;
+};
 
-const getFormSettings = ( settings: Settings = {} ) => {
+const getFormSettings = ( settings: Settings ) => {
 	if ( ! settings ) {
 		return {};
 	}
 
-	// @ts-expect-error Settings are not typed yet, so we need to use `unknown` for now.
-	const { posts_per_page, posts_per_rss, wpcom_featured_image_in_email } = settings;
+	const {
+		posts_per_page,
+		posts_per_rss,
+		wpcom_featured_image_in_email,
+		wpcom_subscription_emails_use_excerpt,
+	} = settings;
+
 	return {
 		...( posts_per_page && { posts_per_page } ),
 		...( posts_per_rss && { posts_per_rss } ),
 		...( wpcom_featured_image_in_email && { wpcom_featured_image_in_email } ),
+		...( wpcom_subscription_emails_use_excerpt && { wpcom_subscription_emails_use_excerpt } ),
 	};
 };
 
@@ -42,6 +52,7 @@ type Fields = {
 	posts_per_page?: number;
 	posts_per_rss?: number;
 	wpcom_featured_image_in_email?: boolean;
+	wpcom_subscription_emails_use_excerpt?: boolean;
 };
 
 type ReadingSettingsFormProps = {
@@ -52,6 +63,7 @@ type ReadingSettingsFormProps = {
 	isRequestingSettings: boolean;
 	isSavingSettings: boolean;
 	siteUrl?: string;
+	updateFields: ( fields: Fields ) => void;
 };
 
 const ReadingSettingsForm = wrapSettingsForm( getFormSettings )(
@@ -64,6 +76,7 @@ const ReadingSettingsForm = wrapSettingsForm( getFormSettings )(
 			isRequestingSettings,
 			isSavingSettings,
 			siteUrl,
+			updateFields,
 		}: ReadingSettingsFormProps ) => {
 			const disabled = isRequestingSettings || isSavingSettings;
 			return (
@@ -89,6 +102,7 @@ const ReadingSettingsForm = wrapSettingsForm( getFormSettings )(
 						handleSubmitForm={ handleSubmitForm }
 						disabled={ disabled }
 						isSavingSettings={ isSavingSettings }
+						updateFields={ updateFields }
 					/>
 				</form>
 			);