/** * External dependencies */ import styled from '@emotion/styled'; /** * WordPress components that create the necessary UI elements for the block * * @see https://developer.wordpress.org/block-editor/packages/packages-components/ */ import {registerBlockType} from '@wordpress/blocks'; import {__} from '@wordpress/i18n'; import { Panel, PanelBody, PanelRow, TextControl, SelectControl, ToggleControl, TabPanel, __experimentalToggleGroupControl as ToggleGroupControl, __experimentalToggleGroupControlOption as ToggleGroupControlOption } from '@wordpress/components'; import {useEffect, useState} from '@wordpress/element'; /** * React hook that is used to mark the block wrapper element. * It provides all the necessary props like the class name. * * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops */ import { useBlockProps, InspectorControls, } from '@wordpress/block-editor'; import React from "react"; import TypographyControl from "../../controls/TypographyControl"; import ColorSelectorControl from "../../controls/ColorSelectorControl"; import BorderControl from "../../controls/BorderControl"; import PaddingBoxControl from "../../controls/PaddingBoxControl"; import {SettingsIcon, StylesIcon} from "../../controls/LatepointIcons"; const LatepointBookButtonWrapper = styled.div` `; const LatepointBookButton = styled.div` `; const PanelRowBlock = styled(PanelRow)` display: block; margin-bottom: 20px; `; /** * The edit function describes the structure of your block in the context of the * editor. This represents what the editor will render when the block is used. * * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit * * @param {Object} props Properties passed to the function. * @param {Object} props.attributes Available block attributes. * @param {Function} props.setAttributes Function that updates individual attributes. * * @return {WPElement} Element to render. */ export default function Edit({attributes, setAttributes}) { const blockProps = useBlockProps(); useEffect(() => { if (!attributes.id) { setAttributes({ id: Math.random().toString(36).substr(2, 9) + '-' + Date.now() }); } }, []); const [isHovered, setIsHovered] = useState(false); const [activeTab, setActiveTab] = useState('settings'); const Separator = styled.div` height: 1px; background-color: #e0e0e0; `; const generateStyles = () => { let styles = {} if (attributes.is_inherit) return styles; if (attributes.font_weight) styles.fontWeight = attributes.font_weight if (attributes.font_size) styles.fontSize = attributes.font_size if (attributes.text_transform) styles.textTransform = attributes.text_transform if (attributes.font_family) styles.fontFamily = attributes.font_family if (attributes.line_height) styles.lineHeight = attributes.line_height if (attributes.letter_spacing) styles.letterSpacing = attributes.letter_spacing if (attributes.border_radius) styles.borderRadius = attributes.border_radius if (attributes.bg_color) styles.backgroundColor = isHovered && attributes.bg_color_hover ? attributes.bg_color_hover : attributes.bg_color; if (attributes.text_color) styles.color = isHovered && attributes.text_color_hover ? attributes.text_color_hover : attributes.text_color; if (attributes.border_color) styles.borderColor = isHovered && attributes.border_color_hover ? attributes.border_color_hover : attributes.border_color; if (attributes.border_style && attributes.border_style !== 'default') styles.borderStyle = attributes.border_style; if (attributes.border_width && attributes.border_style !== 'default') styles.borderWidth = attributes.border_width; if (attributes.padding) styles.padding = attributes.padding; return styles } const getGeneralTabs = () => { let tabs = [ {name: 'settings', title: <div className="lb-tab-head"><SettingsIcon/>Settings</div>} ]; if(!attributes.is_inherit){ tabs.push({name: 'styles', title: <div className="lb-tab-head"><StylesIcon/>Style</div>}); } return tabs; } return ( <div {...blockProps}> <InspectorControls> <TabPanel className="lb-general-tabs" activeClass="active-tab" tabs={ getGeneralTabs() } onSelect={(tabName) => setActiveTab(tabName)} > {(tab) => { if (tab.name === 'settings') { return ( <> <PanelBody title="Button Settings" initialOpen={true}> <TextControl label="Caption" value={attributes.caption || ''} onChange={(value) => setAttributes({caption: value})} /> <ToggleControl label="Inherit From Theme" checked={attributes.is_inherit} onChange={(value) => setAttributes({is_inherit: value})} /> </PanelBody> <PanelBody title="Booking Form Settings" initialOpen={false}> <ToggleControl label="Hide Summary Panel" checked={attributes.hide_summary} onChange={(value) => setAttributes({hide_summary: value})} /> <ToggleControl label="Hide Side Panel" checked={attributes.hide_side_panel} onChange={(value) => setAttributes({hide_side_panel: value})} /> </PanelBody> <PanelBody title="Step Settings" initialOpen={false}> <SelectControl value={attributes.selected_agent} label={__('Preselected Agent', 'latepoint')} onChange={(value) => setAttributes({selected_agent: value})} options={latepoint_helper.selected_agents_options} /> <SelectControl value={attributes.selected_service} label={__('Preselected Service', 'latepoint')} onChange={(value) => setAttributes({selected_service: value})} options={latepoint_helper.selected_services_options} /> <SelectControl value={attributes.selected_service_category} label={__('Preselected Service Category', 'latepoint')} onChange={(value) => setAttributes({selected_service_category: value})} options={latepoint_helper.selected_service_categories_options} /> <SelectControl value={attributes.selected_bundle} label={__('Preselected Bundle', 'latepoint')} onChange={(value) => setAttributes({selected_bundle: value})} options={latepoint_helper.selected_bundles_options} /> <SelectControl value={attributes.selected_location} label={__('Preselected Location', 'latepoint')} onChange={(value) => setAttributes({selected_location: value})} options={latepoint_helper.selected_locations_options} /> <TextControl label={__('Preselected Booking Start Date', 'latepoint')} value={attributes.selected_start_date || ''} placeholder="YYYY-MM-DD" onChange={(value) => setAttributes({selected_start_date: value})} /> <TextControl label={__('Preselected Booking Start Time', 'latepoint')} value={attributes.selected_start_time || ''} placeholder="Minutes" onChange={(value) => setAttributes({selected_start_time: value})} /> <TextControl label={__('Preselected Duration', 'latepoint')} value={attributes.selected_duration || ''} placeholder="Minutes" onChange={(value) => setAttributes({selected_duration: value})} /> <TextControl label={__('Preselected Total Attendees', 'latepoint')} value={attributes.selected_total_attendees || ''} placeholder="Number" onChange={(value) => setAttributes({selected_total_attendees: value})} /> </PanelBody> <PanelBody title="Other Settings" initialOpen={false}> <TextControl label="Source ID" value={attributes.source_id || ''} onChange={(value) => setAttributes({source_id: value})} /> <TextControl label="Calendar Start Date" value={attributes.calendar_start_date || ''} placeholder="YYYY-MM-DD" onChange={(value) => setAttributes({calendar_start_date: value})} /> <TextControl label="Show Services" placeholder="Comma separated service IDs" value={attributes.show_services || ''} onChange={(value) => setAttributes({show_services: value})} /> <TextControl label="Show Service Categories" placeholder="Comma separated category IDs" value={attributes.show_service_categories || ''} onChange={(value) => setAttributes({show_service_categories: value})} /> <TextControl label="Show Agents" placeholder="Comma separated agent IDs" value={attributes.show_agents || ''} onChange={(value) => setAttributes({show_agents: value})} /> <TextControl label="Show Locations" placeholder="Comma separated location IDs" value={attributes.show_locations || ''} onChange={(value) => setAttributes({show_locations: value})} /> </PanelBody> </> ); } if (tab.name === 'styles') { return ( <> <Panel> <PanelBody> <ToggleGroupControl className="lb-toggle-group" isBlock isDeselectable={true} value={attributes.align} label={__('Alignment', 'latepoint')} onChange={(value) => { setAttributes({align: value}) }} > <ToggleGroupControlOption label="Left" value="left"/> <ToggleGroupControlOption label="Center" value="center"/> <ToggleGroupControlOption label="Right" value="right"/> <ToggleGroupControlOption label="Justify" value="justify"/> </ToggleGroupControl> </PanelBody> </Panel> {!attributes.is_inherit && ( <Panel> <PanelBody> <PaddingBoxControl label={__('Padding', 'latepoint')} paddingAttribute="padding" attributes={attributes} setAttributes={setAttributes} /> </PanelBody> <PanelBody title="Color" initialOpen={false}> <TabPanel className="lb-tabs" activeClass="active-tab" tabs={[ {name: 'tab-normal', title: 'Normal',}, {name: 'tab-hover', title: 'Hover',}, ]} > {(tab) => { if (tab.name === 'tab-normal') { return ( <> <PanelRow> <ColorSelectorControl attributes={attributes} setAttributes={setAttributes} colorAttribute="bg_color" label={__('Background Color', 'latepoint')} ></ColorSelectorControl> </PanelRow> <PanelRow> <ColorSelectorControl attributes={attributes} setAttributes={setAttributes} colorAttribute="text_color" label={__('Text Color', 'latepoint')} ></ColorSelectorControl> </PanelRow> </> ); } if (tab.name === 'tab-hover') { return ( <> <PanelRow> <ColorSelectorControl attributes={attributes} setAttributes={setAttributes} colorAttribute="bg_color_hover" label={__('Background Color', 'latepoint')} ></ColorSelectorControl> </PanelRow> <PanelRow> <ColorSelectorControl attributes={attributes} setAttributes={setAttributes} colorAttribute="text_color_hover" label={__('Text Color', 'latepoint')} ></ColorSelectorControl> </PanelRow> </> ); } }} </TabPanel> </PanelBody> <PanelBody title="Text" initialOpen={false}> <TypographyControl attributes={attributes} setAttributes={setAttributes} fontSizeAttr="font_size"></TypographyControl> </PanelBody> <PanelBody title="Border" initialOpen={false}> <BorderControl attributes={attributes} setAttributes={setAttributes} borderRadiusAttr="border_radius"></BorderControl> </PanelBody> </Panel> )} </> ); } }} </TabPanel> <Panel> <Separator></Separator> </Panel> </InspectorControls> <LatepointBookButtonWrapper className={'latepoint-book-button-wrapper ' + 'wp-block-button ' + (attributes.align ? `latepoint-book-button-align-${attributes.align}` : '')}> <LatepointBookButton onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} style={generateStyles()} className="wp-block-button__link latepoint-book-button"> {attributes.caption} </LatepointBookButton> </LatepointBookButtonWrapper> </div> ); }