Scheduled updates: time frequency control updates to support multisit…

…e context design (#89605) * Introduce showAllOptionControls property to frequency control * Adapt style for the multisite context * Rename entry properties name * Support editing entry props outside of component
Automattic · Jul 17, 2024 · 1307370 · 1307370
1 parent 4e7e441
commit 1307370
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 11 deletions.
diff --git a/client/blocks/plugins-scheduled-updates-multisite/schedule-form.tsx b/client/blocks/plugins-scheduled-updates-multisite/schedule-form.tsx
@@ -87,7 +87,11 @@ export const ScheduleForm = () => {
 				</Flex>
 			</div>
 			<div className="form-control-container">
-				<ScheduleFormFrequency initFrequency="daily" optionsDirection={ [ 'column', 'row' ] } />
+				<ScheduleFormFrequency
+					initFrequency="daily"
+					optionsDirection={ [ 'column', 'row' ] }
+					showAllOptionControls={ true }
+				/>
 			</div>
 		</div>
 	);

diff --git a/client/blocks/plugins-scheduled-updates-multisite/styles.scss b/client/blocks/plugins-scheduled-updates-multisite/styles.scss
@@ -25,6 +25,10 @@
 		div.radio-option {
 			flex-basis: 100%;
 			min-height: 85px;
+
+			& > .components-radio-control {
+				margin-bottom: 1rem;
+			}
 		}
 	}
 

diff --git a/client/blocks/plugins-scheduled-updates/schedule-form-frequency.tsx b/client/blocks/plugins-scheduled-updates/schedule-form-frequency.tsx
@@ -27,6 +27,7 @@ interface Props {
 	optionsDirection?: FlexDirection[];
 	error?: string;
 	showError?: boolean;
+	showAllOptionControls?: boolean;
 	onTouch?: ( touched: boolean ) => void;
 	onChange?: ( frequency: Frequency, timestamp: number ) => void;
 }
@@ -41,6 +42,7 @@ export function ScheduleFormFrequency( props: Props ) {
 		optionsDirection = [ 'column' ],
 		error,
 		showError,
+		showAllOptionControls,
 		onChange,
 		onTouch,
 	} = props;
@@ -78,12 +80,12 @@ export function ScheduleFormFrequency( props: Props ) {
 						onChange={ ( f ) => setFrequency( f as 'daily' ) }
 						onBlur={ () => setFieldTouched( true ) }
 					></RadioControl>
-					{ frequency === 'daily' && (
+					{ ( showAllOptionControls || frequency === 'daily' ) && (
 						<Flex gap={ 6 }>
 							<FlexBlock>
 								<ScheduleFormTime
-									initHour={ hour }
-									initPeriod={ period }
+									hour={ hour }
+									period={ period }
 									isAmPmFormat={ isAmPmFormat }
 									onChange={ ( hour, period ) => {
 										setHour( hour );
@@ -102,7 +104,7 @@ export function ScheduleFormFrequency( props: Props ) {
 						onChange={ ( f ) => setFrequency( f as 'weekly' ) }
 						onBlur={ () => setFieldTouched( true ) }
 					></RadioControl>
-					{ frequency === 'weekly' && (
+					{ ( showAllOptionControls || frequency === 'weekly' ) && (
 						<Flex gap={ 6 } direction={ [ 'column', 'row' ] }>
 							<FlexItem>
 								<div className="form-field">
@@ -117,8 +119,8 @@ export function ScheduleFormFrequency( props: Props ) {
 							</FlexItem>
 							<FlexBlock>
 								<ScheduleFormTime
-									initHour={ hour }
-									initPeriod={ period }
+									hour={ hour }
+									period={ period }
 									isAmPmFormat={ isAmPmFormat }
 									onChange={ ( hour, period ) => {
 										setHour( hour );

diff --git a/client/blocks/plugins-scheduled-updates/schedule-form-time.tsx b/client/blocks/plugins-scheduled-updates/schedule-form-time.tsx
@@ -1,22 +1,35 @@
 import { SelectControl } from '@wordpress/components';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { HOUR_OPTIONS, HOUR_OPTIONS_24, PERIOD_OPTIONS } from './schedule-form.const';
 import { convertHourTo12, convertHourTo24 } from './schedule-form.helper';
 
 interface Props {
-	initHour: string;
-	initPeriod: string;
+	hour: string;
+	period: string;
 	isAmPmFormat: boolean;
 	onChange: ( hour: string, period: string ) => void;
 }
 export function ScheduleFormTime( props: Props ) {
-	const { initHour, initPeriod, isAmPmFormat, onChange } = props;
+	const { hour: initHour, period: initPeriod, isAmPmFormat, onChange } = props;
 
 	const [ hour, setHour ] = useState(
 		isAmPmFormat ? initHour : convertHourTo24( initHour, initPeriod )
 	);
 	const [ period, setPeriod ] = useState( initPeriod );
 
+	useEffect( () => {
+		if ( isAmPmFormat ) {
+			setHour( initHour );
+		} else {
+			setHour( convertHourTo24( initHour, initPeriod ) );
+			setPeriod( parseInt( initHour ) < 12 ? 'am' : 'pm' );
+		}
+	}, [ initHour ] );
+
+	useEffect( () => {
+		setPeriod( initPeriod );
+	}, [ initPeriod ] );
+
 	return (
 		<div className="form-field">
 			<div className="time-controls">