Date Picker: show timezone abbreviation if possible (#12353)

GoogleForCreators · Sep 28, 2022 · 599679d · 599679d
1 parent fb6ad33
commit 599679d
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 19 deletions.
diff --git a/includes/Locale.php b/includes/Locale.php
@@ -28,6 +28,9 @@
 
 namespace Google\Web_Stories;
 
+use DateTime;
+use DateTimeZone;
+
 /**
  * Locale class.
  */
@@ -68,19 +71,40 @@ public function get_locale_settings(): array {
 			$time_format = $default_time_format;
 		}
 
+		/**
+		 * Time zone string.
+		 *
+		 * @var string $timezone_string
+		 */
+		$timezone_string = get_option( 'timezone_string', 'UTC' );
+		$timezone_abbr   = '';
+
+		if ( ! empty( $timezone_string ) ) {
+			$timezone_date = new DateTime( 'now', new DateTimeZone( $timezone_string ) );
+			$timezone_abbr = $timezone_date->format( 'T' );
+		}
+
 		/**
 		 * Start of week value.
 		 *
 		 * @var int|string $start_of_week
 		 */
 		$start_of_week = get_option( 'start_of_week', 0 );
 
+		/**
+		 * GMT Offset.
+		 *
+		 * @var int $gmt_offset
+		 */
+		$gmt_offset = get_option( 'gmt_offset', 0 );
+
 		return [
 			'locale'           => str_replace( '_', '-', get_user_locale() ),
 			'dateFormat'       => $date_format,
 			'timeFormat'       => $time_format,
-			'gmtOffset'        => get_option( 'gmt_offset' ),
-			'timezone'         => get_option( 'timezone_string' ),
+			'gmtOffset'        => (float) $gmt_offset,
+			'timezone'         => $timezone_string,
+			'timezoneAbbr'     => $timezone_abbr,
 			'months'           => array_values( $wp_locale->month ),
 			'monthsShort'      => array_values( $wp_locale->month_abbrev ),
 			'weekdays'         => array_values( $wp_locale->weekday ),

diff --git a/packages/date/src/settings.ts b/packages/date/src/settings.ts
@@ -21,6 +21,7 @@ export const DEFAULT_DATE_SETTINGS = {
   timeFormat: 'g:i a',
   gmtOffset: 0,
   timezone: '',
+  timezoneAbbr: '',
   weekStartsOn: 0 as WeekdayIndex,
 };
 
@@ -29,6 +30,7 @@ type Settings = {
   timeFormat: string;
   gmtOffset: number;
   timezone: string;
+  timezoneAbbr: string;
   weekStartsOn: WeekdayIndex;
   locale?: string;
   months?: string[];

diff --git a/packages/story-editor/src/components/form/dateTime/timePicker.js b/packages/story-editor/src/components/form/dateTime/timePicker.js
@@ -255,7 +255,7 @@ function TimePicker({ onChange, is12Hour, localData, setLocalData }) {
               </PMButton>
             </InputGroup>
           )}
-          <TimeZone date={localData?.date} />
+          <TimeZone />
         </InputRow>
       </Fieldset>
     </TimeWrapper>

diff --git a/packages/story-editor/src/components/form/dateTime/timeZone.js b/packages/story-editor/src/components/form/dateTime/timeZone.js
@@ -17,8 +17,7 @@
 /**
  * External dependencies
  */
-import { getSettings, getOptions, format } from '@googleforcreators/date';
-import PropTypes from 'prop-types';
+import { getSettings } from '@googleforcreators/date';
 import styled from 'styled-components';
 import { __ } from '@googleforcreators/i18n';
 import {
@@ -41,8 +40,8 @@ const StyledText = styled(Text)`
   line-height: 30px;
 `;
 
-function TimeZone({ date }) {
-  const { timezone, gmtOffset } = getSettings();
+function TimeZone() {
+  const { timezone, gmtOffset, timezoneAbbr } = getSettings();
 
   // Convert timezone offset to hours.
   const userTimezoneOffset = -1 * (new Date().getTimezoneOffset() / 60);
@@ -53,15 +52,16 @@ function TimeZone({ date }) {
     return null;
   }
 
-  const { timeZone: timeZoneString } = getOptions();
-  const zoneAbbr = timezone?.length
-    ? format(date, 'T')
-    : `UTC${timeZoneString}`;
+  const offsetSymbol = Number(gmtOffset) >= 0 ? '+' : '';
+  const zoneAbbr =
+    '' !== timezoneAbbr && Number.isNaN(Number(timezoneAbbr))
+      ? timezoneAbbr
+      : `UTC${offsetSymbol}${gmtOffset}`;
 
   const tooltip =
-    'UTC' === zoneAbbr
+    'UTC' === timezone
       ? __('Coordinated Universal Time', 'web-stories')
-      : timezone;
+      : `(${zoneAbbr}) ${timezone.replace('_', ' ')}`;
 
   return (
     <Wrapper>
@@ -77,9 +77,4 @@ function TimeZone({ date }) {
   );
 }
 
-TimeZone.propTypes = {
-  date: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)])
-    .isRequired,
-};
-
 export default TimeZone;
diff --git a/tests/phpunit/integration/tests/Locale.php b/tests/phpunit/integration/tests/Locale.php
@@ -27,14 +27,15 @@ class Locale extends TestCase {
 	public function test_get_locale_settings(): void {
 		$actual = ( new \Google\Web_Stories\Locale() )->get_locale_settings();
 
-		$this->assertCount( 11, $actual );
+		$this->assertCount( 12, $actual );
 		$this->assertEqualSets(
 			[
 				'locale',
 				'dateFormat',
 				'timeFormat',
 				'gmtOffset',
 				'timezone',
+				'timezoneAbbr',
 				'months',
 				'monthsShort',
 				'weekdays',