diff options
Diffstat (limited to 'plugins/jetpack/extensions/blocks/business-hours/components/day-preview.js')
-rw-r--r-- | plugins/jetpack/extensions/blocks/business-hours/components/day-preview.js | 53 |
1 files changed, 53 insertions, 0 deletions
diff --git a/plugins/jetpack/extensions/blocks/business-hours/components/day-preview.js b/plugins/jetpack/extensions/blocks/business-hours/components/day-preview.js new file mode 100644 index 00000000..be0dd24b --- /dev/null +++ b/plugins/jetpack/extensions/blocks/business-hours/components/day-preview.js @@ -0,0 +1,53 @@ +/** + * External dependencies + */ +import { _x, sprintf } from '@wordpress/i18n'; +import { Component, Fragment } from '@wordpress/element'; +import { date } from '@wordpress/date'; +import { isEmpty } from 'lodash'; + +class DayPreview extends Component { + formatTime( time ) { + const { timeFormat } = this.props; + const [ hours, minutes ] = time.split( ':' ); + const _date = new Date(); + if ( ! hours || ! minutes ) { + return false; + } + _date.setHours( hours ); + _date.setMinutes( minutes ); + return date( timeFormat, _date ); + } + + renderInterval = ( interval, key ) => { + return ( + <dd key={ key }> + { sprintf( + _x( 'From %s to %s', 'from business opening hour to closing hour', 'jetpack' ), + this.formatTime( interval.opening ), + this.formatTime( interval.closing ) + ) } + </dd> + ); + }; + + render() { + const { day, localization } = this.props; + const hours = day.hours.filter( + // remove any malformed or empty intervals + interval => this.formatTime( interval.opening ) && this.formatTime( interval.closing ) + ); + return ( + <Fragment> + <dt className={ day.name }>{ localization.days[ day.name ] }</dt> + { isEmpty( hours ) ? ( + <dd>{ _x( 'Closed', 'business is closed on a full day', 'jetpack' ) }</dd> + ) : ( + hours.map( this.renderInterval ) + ) } + </Fragment> + ); + } +} + +export default DayPreview; |