Site Settings: add date time format sub-page

assets/stylesheets/_components.scss

@@ -318,6 +318,7 @@
 @import 'my-sites/site-settings/action-panel/style';
 @import 'my-sites/site-settings/custom-content-types/style';
 @import 'my-sites/site-settings/comment-display-settings/style';
+@import 'my-sites/site-settings/date-time-format/style';
 @import 'my-sites/site-settings/delete-site/style';
 @import 'my-sites/site-settings/delete-site-options/style';
 @import 'my-sites/site-settings/delete-site-warning-dialog/style';

client/my-sites/site-settings/controller.js

@@ -19,6 +19,7 @@ import SiteSettingsComponent from 'my-sites/site-settings/main';
 import sitesFactory from 'lib/sites-list';
 import StartOver from './start-over';
 import Taxonomies from './taxonomies';
+import DateTimeFormat from './date-time-format';
 import { setDocumentHeadTitle as setTitle } from 'state/document-head/actions';
 import titlecase from 'to-title-case';
 import utils from 'lib/site/utils';
@@ -179,6 +180,13 @@ module.exports = {
 		);
 	},
 
+	dateTimeFormat( context ) {
+		renderPage(
+			context,
+			<DateTimeFormat />
+		);
+	},
+
 	legacyRedirects( context, next ) {
 		const section = context.params.section,
 			redirectMap = {

client/my-sites/site-settings/date-time-format/date-format-option.jsx

@@ -0,0 +1,74 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { localize } from 'i18n-calypso';
+
+/**
+ * Internal dependencies
+ */
+import FormFieldset from 'components/forms/form-fieldset';
+import FormInput from 'components/forms/form-text-input';
+import FormLabel from 'components/forms/form-label';
+import FormRadio from 'components/forms/form-radio';
+import FormSettingExplanation from 'components/forms/form-setting-explanation';
+import { phpToMomentDatetimeFormat } from 'lib/formatting';
+import { defaultDateFormats } from './default-formats';
+
+export const DateFormatOption = ( {
+	dateFormat,
+	disabled,
+	isCustom,
+	now,
+	setCustomDateFormat,
+	setDateFormat,
+	translate,
+} ) => (
+	<FormFieldset>
+		<FormLabel>
+			{ translate( 'Date Format' ) }
+		</FormLabel>
+		{ defaultDateFormats.map( ( format, index ) =>
+			<FormLabel key={ index }>
+				<FormRadio
+					checked={ ! isCustom && format === dateFormat }
+					disabled={ disabled }
+					name="date_format"
+					onChange={ setDateFormat }
+					value={ format }
+				/>
+				<span>{ now.format( phpToMomentDatetimeFormat( format ) ) }</span>
+			</FormLabel>
+		) }
+		<FormLabel className="date-time-format__custom-field">
+			<FormRadio
+				checked={ isCustom }
+				disabled={ disabled }
+				name="date_format"
+				onChange={ setCustomDateFormat }
+				value={ dateFormat }
+			/>
+			<span>
+				{ translate( 'Custom', { comment: 'Custom date/time format field' } ) }
+				<FormInput
+					disabled={ disabled }
+					name="date_format_custom"
+					onChange={ setCustomDateFormat }
+					type="text"
+					value={ dateFormat || '' }
+				/>
+				<FormSettingExplanation>
+					{ isCustom && dateFormat
+						? translate( 'Preview: %s', {
+							args: now.format( phpToMomentDatetimeFormat( dateFormat ) ),
+							comment: 'Date/time format preview',
+						} )
+						: ''
+					}
+				</FormSettingExplanation>
+			</span>
+		</FormLabel>
+	</FormFieldset>
+);
+
+export default localize( DateFormatOption );

client/my-sites/site-settings/date-time-format/date-time-format-options.jsx

@@ -0,0 +1,171 @@
+/**
+ * External dependencies
+ */
+import React, { Component } from 'react';
+import { localize } from 'i18n-calypso';
+import { capitalize, includes } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import Button from 'components/button';
+import Card from 'components/card';
+import SectionHeader from 'components/section-header';
+import DateFormatOption from './date-format-option';
+import StartOfWeekOption from './start-of-week-option';
+import TimeFormatOption from './time-format-option';
+import { defaultDateFormats, defaultTimeFormats } from './default-formats';
+import { getNow } from './utils';
+import wrapSettingsForm from '../wrap-settings-form';
+
+export class DateTimeFormatOptions extends Component {
+	state = {
+		customDateFormat: false,
+		customTimeFormat: false,
+		isLoadingSettings: true,
+	};
+
+	componentWillReceiveProps( nextProps ) {
+		const {
+			fields: {
+				date_format: dateFormat,
+				time_format: timeFormat,
+			},
+		} = nextProps;
+
+		if ( ! this.state.isLoadingSettings || '' === dateFormat || '' === timeFormat ) {
+			return;
+		}
+
+		this.setState( {
+			customDateFormat: ! includes( defaultDateFormats, dateFormat ),
+			customTimeFormat: ! includes( defaultTimeFormats, timeFormat ),
+			isLoadingSettings: false,
+		} );
+	}
+
+	setFormat = ( name, defaultFormats ) => event => {
+		const { value: format } = event.currentTarget;
+		this.props.updateFields( { [ `${ name }_format` ]: format } );
+		this.setState( {
+			[ `custom${ capitalize( name ) }Format` ]: ! includes( defaultFormats, format ),
+		} );
+	};
+
+	setDateFormat = this.setFormat( 'date', defaultDateFormats );
+
+	setTimeFormat = this.setFormat( 'time', defaultTimeFormats );
+
+	setCustomFormat = name => event => {
+		const { value: format } = event.currentTarget;
+		this.props.updateFields( { [ `${ name }_format` ]: format } );
+		this.setState( {
+			[ `custom${ capitalize( name ) }Format` ]: true,
+		} );
+	};
+
+	setCustomDateFormat = this.setCustomFormat( 'date' );
+
+	setCustomTimeFormat = this.setCustomFormat( 'time' );
+
+	render() {
+		const {
+			fields: {
+				date_format: dateFormat,
+				start_of_week: startOfWeek,
+				time_format: timeFormat,
+				timezone_string: timezoneString,
+			},
+			handleSelect,
+			handleSubmitForm,
+			isRequestingSettings,
+			isSavingSettings,
+			translate,
+		} = this.props;
+
+		const {
+			customDateFormat,
+			customTimeFormat,
+		} = this.state;
+
+		const now = getNow( timezoneString );
+
+		return (
+			<div>
+				<SectionHeader>
+					<Button
+						compact={ true }
+						onClick={ handleSubmitForm }
+						primary={ true }
+						type="submit"
+						disabled={ isRequestingSettings || isSavingSettings }>
+							{ isSavingSettings
+								? translate( 'Saving…' )
+								: translate( 'Save Settings' )
+							}
+					</Button>
+				</SectionHeader>
+				<Card>
+					<form>
+						<DateFormatOption
+							dateFormat={ dateFormat }
+							disabled={ isRequestingSettings }
+							isCustom={ customDateFormat }
+							now={ now }
+							setCustomDateFormat={ this.setCustomDateFormat }
+							setDateFormat={ this.setDateFormat }
+						/>
+						<TimeFormatOption
+							disabled={ isRequestingSettings }
+							isCustom={ customTimeFormat }
+							now={ now }
+							setCustomTimeFormat={ this.setCustomTimeFormat }
+							setTimeFormat={ this.setTimeFormat }
+							timeFormat={ timeFormat }
+						/>
+						<StartOfWeekOption
+							disabled={ isRequestingSettings }
+							onChange={ handleSelect }
+							startOfWeek={ startOfWeek }
+						/>
+					</form>
+				</Card>
+			</div>
+		);
+	}
+}
+
+export default wrapSettingsForm( settings => {
+	const defaultSettings = {
+		date_format: '',
+		start_of_week: 0,
+		time_format: '',
+		timezone_string: '',
+	};
+
+	if ( ! settings ) {
+		return defaultSettings;
+	}
+
+	const formSettings = {
+		date_format: settings.date_format,
+		start_of_week: settings.start_of_week,
+		time_format: settings.time_format,
+		timezone_string: settings.timezone_string,
+	};
+
+	// handling `gmt_offset` and `timezone_string` values
+	const gmt_offset = settings.gmt_offset;
+
+	if (
+		! settings.timezone_string &&
+		typeof gmt_offset === 'string' &&
+		gmt_offset.length
+	) {
+		formSettings.timezone_string = 'UTC' +
+			( /\-/.test( gmt_offset ) ? '' : '+' ) +
+			gmt_offset;
+	}
+
+	return formSettings;
+} )( localize( DateTimeFormatOptions ) );

client/my-sites/site-settings/date-time-format/default-formats.js

@@ -0,0 +1,12 @@
+export const defaultDateFormats = [
+	'F j, Y',
+	'Y-m-d',
+	'm/d/Y',
+	'd/m/Y',
+];
+
+export const defaultTimeFormats = [
+	'g:i a',
+	'g:i A',
+	'H:i',
+];

client/my-sites/site-settings/date-time-format/index.jsx

@@ -0,0 +1,39 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { connect } from 'react-redux';
+import { localize } from 'i18n-calypso';
+import page from 'page';
+
+/**
+ * Internal dependencies
+ */
+import DateTimeFormatOptions from './date-time-format-options';
+import DocumentHead from 'components/data/document-head';
+import HeaderCake from 'components/header-cake';
+import { getSelectedSite } from 'state/ui/selectors';
+
+export const DateTimeFormat = ( { translate, site } ) => {
+	const goBack = () => {
+		page( '/settings/general/' + site.slug );
+	};
+
+	return (
+		<div className="main main-column date-time-format" role="main">
+			<DocumentHead title={ translate( 'Manage Date and Time Format' ) } />
+			<HeaderCake onClick={ goBack }>
+				<h1>
+					{ translate( 'Date and Time Format' ) }
+				</h1>
+			</HeaderCake>
+			<DateTimeFormatOptions />
+		</div>
+	);
+};
+
+const mapStateToProps = state => ( {
+	site: getSelectedSite( state ),
+} );
+
+export default connect( mapStateToProps )( localize( DateTimeFormat ) );

client/my-sites/site-settings/date-time-format/start-of-week-option.jsx

@@ -0,0 +1,39 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { localize } from 'i18n-calypso';
+
+/**
+ * Internal dependencies
+ */
+import FormFieldset from 'components/forms/form-fieldset';
+import FormLabel from 'components/forms/form-label';
+import FormSelect from 'components/forms/form-select';
+
+export const StartOfWeekOption = ( {
+	disabled,
+	moment,
+	onChange,
+	startOfWeek,
+	translate,
+} ) =>
+<FormFieldset>
+	<FormLabel>
+		{ translate( 'Week starts on' ) }
+	</FormLabel>
+	<FormSelect
+		disabled={ disabled }
+		name="start_of_week"
+		onChange={ onChange }
+		value={ startOfWeek || 0 }
+	>
+		{ moment.weekdays().map( ( day, index ) =>
+			<option key={ index } value={ index }>
+				{ day }
+			</option>
+		) }
+	</FormSelect>
+</FormFieldset>;
+
+export default localize( StartOfWeekOption );

client/my-sites/site-settings/date-time-format/style.scss

@@ -0,0 +1,10 @@
+.date-time-format__custom-field {
+	.form-radio {
+		margin-top: 12px;
+	}
+
+	.form-text-input {
+		margin: 0 12px;
+		width: 100px;
+	}
+}