diff options
Diffstat (limited to 'plugins/jetpack/extensions/blocks/business-hours/edit.js')
-rw-r--r-- | plugins/jetpack/extensions/blocks/business-hours/edit.js | 104 |
1 files changed, 104 insertions, 0 deletions
diff --git a/plugins/jetpack/extensions/blocks/business-hours/edit.js b/plugins/jetpack/extensions/blocks/business-hours/edit.js new file mode 100644 index 00000000..7649fd45 --- /dev/null +++ b/plugins/jetpack/extensions/blocks/business-hours/edit.js @@ -0,0 +1,104 @@ +/** + * External dependencies + */ +import apiFetch from '@wordpress/api-fetch'; +import classNames from 'classnames'; +import { __ } from '@wordpress/i18n'; +import { __experimentalGetSettings } from '@wordpress/date'; +import { BlockIcon } from '@wordpress/editor'; +import { Component } from '@wordpress/element'; +import { Placeholder } from '@wordpress/components'; + +/** + * Internal dependencies + */ +import DayEdit from './components/day-edit'; +import DayPreview from './components/day-preview'; +import { icon } from '.'; + +const defaultLocalization = { + days: { + Sun: __( 'Sunday', 'jetpack' ), + Mon: __( 'Monday', 'jetpack' ), + Tue: __( 'Tuesday', 'jetpack' ), + Wed: __( 'Wednesday', 'jetpack' ), + Thu: __( 'Thursday', 'jetpack' ), + Fri: __( 'Friday', 'jetpack' ), + Sat: __( 'Saturday', 'jetpack' ), + }, + startOfWeek: 0, +}; + +class BusinessHours extends Component { + state = { + localization: defaultLocalization, + hasFetched: false, + }; + + componentDidMount() { + this.apiFetch(); + } + + apiFetch() { + this.setState( { data: defaultLocalization }, () => { + apiFetch( { path: '/wpcom/v2/business-hours/localized-week' } ).then( + data => { + this.setState( { localization: data, hasFetched: true } ); + }, + () => { + this.setState( { localization: defaultLocalization, hasFetched: true } ); + } + ); + } ); + } + + render() { + const { attributes, className, isSelected } = this.props; + const { days } = attributes; + const { localization, hasFetched } = this.state; + const { startOfWeek } = localization; + const localizedWeek = days.concat( days.slice( 0, startOfWeek ) ).slice( startOfWeek ); + + if ( ! hasFetched ) { + return ( + <Placeholder + icon={ <BlockIcon icon={ icon } /> } + label={ __( 'Loading business hours', 'jetpack' ) } + /> + ); + } + + if ( ! isSelected ) { + const settings = __experimentalGetSettings(); + const { + formats: { time }, + } = settings; + return ( + <dl className={ classNames( className, 'jetpack-business-hours' ) }> + { localizedWeek.map( ( day, key ) => { + return ( + <DayPreview + key={ key } + day={ day } + localization={ localization } + timeFormat={ time } + /> + ); + } ) } + </dl> + ); + } + + return ( + <div className={ classNames( className, 'is-edit' ) }> + { localizedWeek.map( ( day, key ) => { + return ( + <DayEdit key={ key } day={ day } localization={ localization } { ...this.props } /> + ); + } ) } + </div> + ); + } +} + +export default BusinessHours; |