Site Settings: add card to manage holiday snow settings (#97127)

* Site Settings: add card to manage holiday snow settings * Move card downer on the page * Update untangled look to ensure consistent margins * Only display the card between December 1st and January 4th.
Automattic · Dec 6, 2024 · 11fd5f6 · 11fd5f6
1 parent e95a5b9
commit 11fd5f6
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 0 deletions.
diff --git a/client/my-sites/site-settings/form-general.jsx b/client/my-sites/site-settings/form-general.jsx
@@ -448,6 +448,7 @@ const getFormSettings = ( settings ) => {
 		lang_id: '',
 		timezone_string: '',
 		blog_public: '',
+		jetpack_holiday_snow_enabled: false,
 		wpcom_coming_soon: '',
 		wpcom_data_sharing_opt_out: false,
 		wpcom_legacy_contact: '',
@@ -472,6 +473,8 @@ const getFormSettings = ( settings ) => {
 
 		is_fully_managed_agency_site: settings.is_fully_managed_agency_site,
 
+		jetpack_holiday_snow_enabled: !! settings.jetpack_holiday_snow_enabled,
+
 		wpcom_coming_soon: settings.wpcom_coming_soon,
 		wpcom_data_sharing_opt_out: !! settings.wpcom_data_sharing_opt_out,
 		wpcom_legacy_contact: settings.wpcom_legacy_contact,

diff --git a/client/sites/settings/site/form.jsx b/client/sites/settings/site/form.jsx
@@ -3,6 +3,7 @@ import { DIFMUpsell } from '../components/difm-upsell-banner';
 import { A4AFullyManagedSiteForm } from './agency';
 import EnhancedOwnershipForm from './enhanced-ownership';
 import FooterCredit from './footer-credit';
+import HolidaySnow from './holiday-snow';
 import PrivacyForm from './privacy';
 import SubscriptionGiftingForm from './subscription-gifting';
 import ToolbarForm from './toolbar';
@@ -70,6 +71,16 @@ export default function SiteSettingsForm( {
 				urlRef="unlaunched-settings"
 			/>
 
+			{ ! siteIsJetpack && (
+				<HolidaySnow
+					fields={ fields }
+					handleToggle={ handleToggle }
+					isSaving={ isSavingSettings }
+					onSave={ handleSubmitForm }
+					disabled={ isRequestingSettings || isSavingSettings }
+				/>
+			) }
+
 			<SubscriptionGiftingForm
 				fields={ fields }
 				handleToggle={ handleToggle }

diff --git a/client/sites/settings/site/holiday-snow.jsx b/client/sites/settings/site/holiday-snow.jsx
@@ -0,0 +1,73 @@
+import { Button, Card } from '@automattic/components';
+import { ToggleControl } from '@wordpress/components';
+import { useTranslate } from 'i18n-calypso';
+import FormSettingExplanation from 'calypso/components/forms/form-setting-explanation';
+import { useLocalizedMoment } from 'calypso/components/localized-moment';
+import { PanelCard, PanelCardHeading, PanelCardDescription } from 'calypso/components/panel';
+import SettingsSectionHeader from 'calypso/my-sites/site-settings/settings-section-header';
+import { isHostingMenuUntangled } from '../utils';
+
+// Add settings for holiday snow: ability to enable snow on the site until January 4th.
+export default function HolidaySnow( { fields, handleToggle, isSaving, onSave, disabled } ) {
+	const translate = useTranslate();
+	const isUntangled = isHostingMenuUntangled();
+	const moment = useLocalizedMoment();
+
+	// Only display the card between December 1st and January 4th.
+	const today = moment();
+	const currentYear = today.year();
+	const startDate = moment( { year: currentYear, month: 11, date: 1 } ); // moment months are 0-indexed
+	const endDate = moment( { year: currentYear, month: 0, date: 4 } ); // moment months are 0-indexed
+
+	if ( today.isBefore( startDate, 'day' ) && today.isAfter( endDate, 'day' ) ) {
+		return null;
+	}
+
+	const renderForm = () => {
+		return (
+			<>
+				<ToggleControl
+					disabled={ disabled }
+					className="site-settings__holiday-snow-toggle"
+					label={ translate( 'Enable snow' ) }
+					checked={ fields.jetpack_holiday_snow_enabled }
+					onChange={ handleToggle( 'jetpack_holiday_snow_enabled' ) }
+				/>
+				{ ! isUntangled && (
+					<FormSettingExplanation>
+						{ translate( 'Show falling snow on my site until January 4th.' ) }
+					</FormSettingExplanation>
+				) }
+			</>
+		);
+	};
+
+	if ( ! isUntangled ) {
+		return (
+			<div className="site-settings__holiday-snow-container">
+				<SettingsSectionHeader
+					title={ translate( 'Holiday snow' ) }
+					id="site-settings__holiday-snow-header"
+					disabled={ disabled }
+					isSaving={ isSaving }
+					onButtonClick={ onSave }
+					showButton
+				/>
+				<Card className="site-settings__holiday-snow-content">{ renderForm() }</Card>
+			</div>
+		);
+	}
+
+	return (
+		<PanelCard>
+			<PanelCardHeading>{ translate( 'Holiday snow' ) }</PanelCardHeading>
+			<PanelCardDescription>
+				{ translate( 'Show falling snow on my site until January 4th.' ) }
+			</PanelCardDescription>
+			{ renderForm() }
+			<Button busy={ isSaving } disabled={ disabled } onClick={ onSave }>
+				{ translate( 'Save' ) }
+			</Button>
+		</PanelCard>
+	);
+}
diff --git a/client/sites/settings/site/index.tsx b/client/sites/settings/site/index.tsx
@@ -50,6 +50,7 @@ export function SiteSettings( props: any ) {
 const getFormSettings = ( settings: any ) => {
 	const defaultSettings = {
 		blog_public: '',
+		jetpack_holiday_snow_enabled: false,
 		wpcom_coming_soon: '',
 		wpcom_data_sharing_opt_out: false,
 		wpcom_legacy_contact: '',
@@ -65,6 +66,7 @@ const getFormSettings = ( settings: any ) => {
 
 	const formSettings = {
 		blog_public: settings.blog_public,
+		jetpack_holiday_snow_enabled: !! settings.jetpack_holiday_snow_enabled,
 		wpcom_coming_soon: settings.wpcom_coming_soon,
 		wpcom_data_sharing_opt_out: !! settings.wpcom_data_sharing_opt_out,
 		wpcom_legacy_contact: settings.wpcom_legacy_contact,